在本地运行多模态项目

用这一页来运行任一个提取的多模态项目：图像生成或图像理解。两者都需要相同的 Vite 密钥适配和 OpenAI SDK 更新。之后，按照你拥有的项目类型进行修复。密钥适配是每个提取的课程项目都需要的同一个适配；在本地运行 Chef Claude 将其应用于一个包含两个 provider 路由的 React 项目。

你需要先准备什么

安装支持的 LTS 版本 Node.js。推荐使用 Node 24，它包含 npm。

检查这两个命令都能正常运行：

bash

$ node --version
v24.18.0
$ npm --version
11.18.0

你需要一个有计费和访问权限的 OpenAI API 密钥。图像生成访问权限可能需要组织验证。

使用一个临时密钥，设置较低的支出限额。两个项目都会从浏览器代码中发起付费的 OpenAI 请求，密钥在那里可能被检查到。

Juno你需要先准备什么安装 Node.js LTS 并设置一个有计费和较低支出限额的临时 OpenAI 密钥。图像生成也可能需要组织验证，所以在开始构建前检查一下。我曾经因为一个没有启用计费的密钥花了整个晚上，错误信息从来没有提到过这一点！

打开并准备项目

在包含 package.json 的提取文件夹中打开终端：

bash

$ cd path-to-your-downloaded-project
$ npm install
$ npm install openai@latest

第二个 install 在使用当前的图像 API 之前更新了旧的课程 SDK。

在 package.json 旁边创建 .env 和 .gitignore：

dotenv

VITE_OPENAI_API_KEY=your-openai-api-key

txt

.env
node_modules/

.gitignore 条目把你的密钥和可重建的 node_modules 文件夹排除在你创建的任何仓库之外；忽略文件和良好的习惯涵盖了更广泛的实践。

在 index.js 中，将 OpenAI 客户端密钥从：

apiKey: process.env.OPENAI_API_KEY,

改为：

apiKey: import.meta.env.VITE_OPENAI_API_KEY,

密钥被包含在前端

这只有在用受限密钥进行临时本地学习时才可以接受。图像请求会产生费用。永远不要部署或共享这个仅浏览器版本；先把 OpenAI 请求移到后端。

Juno打开并准备项目打开包含 package.json 的提取文件夹，安装它的包，然后在上面安装当前的 OpenAI SDK。你的临时密钥放在 .env 中，.gitignore 把该文件排除在 Git 之外。一个从不提交的密钥，就是一个你永远不用替换的密钥！

修复图像生成项目

课程快照调用了已弃用的 dall-e-3 模型并期望一个托管的图像 URL。按照当前的 OpenAI 图像生成指南，将其图像请求改为使用 gpt-image-2：

const image = await openai.images.generate({
  model: "gpt-image-2",
  prompt,
  size: "1024x1024",
})

在代码读取 image.data[0].url 的地方，用从返回的 base64 图像生成的数据 URL 替换它：

`data:image/png;base64,${image.data[0].b64_json}`

保持来自你的提取文件的周围赋值或标记。

Base64 字符串是整个图像内联到响应中，所以期望负载大小为一兆字节或更多。使用后端的版本会在服务器端保存图像，并向页面提供一个短 URL 而不是长数据 URL。

Juno修复图像生成项目把请求指向 gpt-image-2 并把返回的 base64 值转换成 PNG 数据 URL。已弃用的模型和旧的 .url 字段是配套的，所以两个部分都需要更新。只改其中一个会让你得到破损的图像，那正是我第一次犯的错误！

修复视觉项目

在视觉第 2 部分项目中，替换已弃用的模型 ID：

model: "gpt-4-vision-preview",

为具有图像功能的 gpt-4o-mini：

model: "gpt-4o-mini",

现有的消息格式仍然可以发送文本和图像输入。

如果更新的请求失败，先向 gpt-4o-mini 发送仅文本消息。成功表明你的账户可以使用该模型，这样就把问题留给了消息的图像部分。

Juno修复视觉项目用 gpt-4o-mini 替换已弃用的视觉模型，让文本和图像消息格式保持不变。只有模型 ID 改变了，请求的形状没有。你碰的行越少，打破的就越少，这是我不断重新学习的功课！

运行任一项目

bash

$ npm start

打开 Vite 打印的 Local URL。在图像生成项目中，提交一个提示词并在页面上查找生成的图像。在视觉项目中，提交一个图像和问题，查找模型的文本响应。修改 .env 后重启，用 Ctrl+C 停止项目。

Juno运行任一项目运行 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 项目中的计费、组织验证和模型访问。提供商可用性可能因账户而异。

SDK 报告类浏览器环境错误: npm install openai@latest 保留了 SDK 的浏览器防护，它拒绝使用浏览器代码中的 API 密钥运行。如果你的提取内容还没有在 OpenAI 客户端选项中传递 dangerouslyAllowBrowser: true，就在 apiKey 行旁边添加它。选项名称就是警告：这只有在用临时、受限的密钥本地使用时才可以接受。

请求有效但页面没有改变: 检查浏览器控制台是否有渲染错误，并比较返回的字段与上面的相关修复。

Juno故障排除按列表往下做：修复任何剩余的 process.env 读取，确认模型，然后对于图像生成检查 b64_json 或对于浏览器控制台检查渲染错误。这里的大多数失败是一个未完成的编辑而不是谜团。先检查寻常的东西；我花了太长时间才养成这个习惯！

在本地运行多模态项目 ​

你需要先准备什么 ​

打开并准备项目 ​

修复图像生成项目 ​

修复视觉项目 ​

运行任一项目 ​

故障排除 ​

在本地运行多模态项目

你需要先准备什么

打开并准备项目

修复图像生成项目

修复视觉项目

运行任一项目

故障排除