The AI Engineer Path在本地运行多模态项目
使用本页面来运行任一多模态项目：图像生成或图像理解。两个项目都需要相同的 Vite 密钥改动和相同的 OpenAI SDK 更新。之后，按照你拥有的项目对应的修复步骤进行。密钥改动是这些课程中所有提取的浏览器项目都需要的；在本地运行 Chef Claude 将其应用于具有两个提供者路由的 React 项目。
你需要先准备的东西
安装受支持的 Node.js LTS 版本。推荐 Node 24，它包含 npm。该项目会安装最新的 Vite，需要 Node 22.12 或更新版本。
检查这两个命令是否可用：
$ node --version
v24.18.0
$ npm --version
11.18.0你需要一个 OpenAI API 密钥，该密钥需要配置计费和访问你使用的模型。图像生成访问权限可能需要组织验证。
使用一个临时密钥并设置低支出限额。两个项目都会从浏览器代码发起付费的 OpenAI 请求，所以任何打开浏览器开发者工具的人都能读到这个密钥。
node --version 和 npm --version。每个命令都应该打印一个版本号。 接下来，创建一个配置了计费和低支出限额的临时 OpenAI 密钥。如果你计划运行图像生成项目，请在开始前检查你的组织是否需要验证。
打开并准备项目
在包含 package.json 的提取文件夹中打开终端：
$ cd path-to-your-downloaded-project
$ npm install
$ npm install openai@latest第二个 install 命令会在你修改模型之前用当前的 SDK 替换掉旧的课程版本。
检查 index.js 看你有哪个项目。图像生成项目会调用 openai.images.generate 并构建一个包含电影标题和艺术风格的海报表单。视觉项目会用 gpt-4-vision-preview 调用 openai.chat.completions.create，并且有一个 images/ 文件夹。
在 package.json 旁边创建 .env 和 .gitignore：
VITE_OPENAI_API_KEY=your-openai-api-key.env
node_modules/.gitignore 条目会将两样东西排除在你用这个文件夹创建的任何仓库之外：你的密钥和 npm 随时可以重新构建的 node_modules 文件夹。忽略文件和良好习惯 涵盖了更广泛的这个习惯。
在 index.js 中，将 OpenAI 客户端密钥从：
apiKey: process.env.OPENAI_API_KEY,改为：
apiKey: import.meta.env.VITE_OPENAI_API_KEY,保留下面的 dangerouslyAllowBrowser: true 这一行不变。SDK 没有它就拒绝在浏览器中运行。
密钥被包含在前端
这仅在本地学习并使用受限密钥时才可接受。图像请求会消耗金钱。不要部署或分享这个仅限浏览器的版本；先把 OpenAI 请求移到后端。
package.json 的提取文件夹，安装它的包，然后在顶部安装当前的 OpenAI SDK。 把你的临时密钥放在 .env 中，让 .gitignore 把这个文件排除在 Git 之外。然后改动 index.js 中的那一行 apiKey，保留下面的这一行不变。
修复图像生成项目
课程快照调用了已停用的 dall-e-3 模型并期望一个托管的图像 URL。按照当前的 OpenAI 图像生成指南，将其图像请求改为使用 gpt-image-2：
const image = await openai.images.generate({
model: "gpt-image-2",
prompt,
size: "1024x1024",
})该模型以 base64 数据而不是 URL 形式返回图像。代码读取 image.data[0].url 的地方：
const imgURL = image.data[0].url;改为从返回的 base64 图像构建一个 PNG 数据 URL：
const imgURL = `data:image/png;base64,${image.data[0].b64_json}`;保持将 imgURL 放入海报输出的那一行不变。
gpt-image-2，然后改动 imgURL 行，让它从 b64_json 构建一个 PNG 数据 URL。 一起做这两个改动。如果你改动模型但保留 .url，海报就不会出现。
修复视觉项目
在 Vision Part 2 项目中，替换已停用的模型 ID：
model: "gpt-4-vision-preview",改为具有图像能力的 gpt-4o-mini：
model: "gpt-4o-mini",现有的消息格式仍然可以发送文本和图像输入，所以请求的其余部分保持不变。
gpt-4o-mini 替换已停用的视觉模型，并完全按原样保留文本和图像消息。 这里只有模型 ID 改变，不是请求的形状。
运行任一项目
$ npm start打开 Vite 打印的 Local URL。
在图像生成项目中，输入一个电影标题，选择一个艺术风格，然后选择 Generate Poster。页面在请求运行时显示 "Generating poster for..."，然后显示海报。如果请求失败，页面显示 "Sorry, an error occurred while generating the poster."，浏览器控制台会显示错误。
视觉项目在页面加载后立即发送请求。页面显示正在分析图像，模型的描述出现在浏览器控制台，而不是页面上。每次页面加载都会发送一个新的付费请求，包括 Vite 在你保存 index.js 时触发的重新加载。
改动 .env 后重启，用 Ctrl+C 停止项目。
npm start 并打开 Vite 打印的 Local URL。 对于图像生成，提交电影标题和艺术风格并等待海报。对于视觉，打开浏览器控制台：模型的描述会出现在那里。每次尝试都是一次付费请求，所以在开始点击之前决定好你想测试什么。
故障排除
process is not defined： 用 import.meta.env.VITE_... 形式替换 index.js 中剩余的 process.env 密钥读取。
生成的图像损坏： 确认代码读取 b64_json 并添加 data:image/png;base64, 前缀而不是读取 .url。
模型不可用： 确认 OpenAI 项目中的计费、组织验证和模型访问。提供者可用性可能因账户而异。
视觉页面保持空白： 页面仅在请求成功后添加图像，所以空白页面表示请求失败。阅读浏览器控制台中的错误。如果它没有指向密钥或模型，先向 gpt-4o-mini 发送仅文本消息；那里的成功确认你的账户可以使用该模型，所以接下来要检查的是消息的图像部分。
请求有效但页面保持不变： 检查浏览器控制台中是否有渲染错误，并将返回的字段与上面相关的修复进行比较。
process.env 读取，确认模型，然后检查图像生成的 b64_json。 对于任一项目，浏览器控制台显示错误。这里大多数失败都是一个未完成的编辑。