在本地运行多模态项目

使用本页在你的计算机上运行从多模态课程中提取的图像生成项目或视觉项目，并使用自己的 OpenAI 密钥。与 Scrimba 编辑器相比有三处不同：OpenAI 包需要更新，每个项目要求的模型已停用，index.js 中的密钥需要使用 Vite 的语法。

你首先需要什么

安装支持的 LTS 版本的 Node.js。推荐使用 Node 24，它包含 npm。Node 22.12 之前的版本太旧，无法安装这些项目所需的包。

检查这两个命令是否都能工作。你的版本号可能不同：

bash

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

你还需要一个已设置付款信息的 OpenAI API 密钥。创建一个完成后会删除的密钥，并在 OpenAI 仪表板中为该项目设置较低的月度预算；下面的危险提示框说明了原因。对于图像生成项目，OpenAI 可能要求你在仪表板中验证你的组织，然后其图像模型才会响应。

Juno你首先需要什么安装 LTS 版本的 Node.js（包含 npm），并检查 node --version 和 npm --version 都能输出版本号。

然后在已设置付款信息的帐户上创建一个 OpenAI API 密钥，并设置较低的预算。如果你有图像生成项目，检查仪表板是否要求你验证组织。

安装包

在提取的项目文件夹中打开终端。这是包含 package.json 和 index.js 的文件夹：

bash

$ cd path-to-your-extracted-project

安装项目的包，然后用最新的 OpenAI 包替换它。课程中的版本来自 2023 年，早于你即将切换到的模型：

bash

$ npm install
$ npm install openai@latest

第一个命令报告 added 61 packages。第二个命令报告 added 1 package, removed 45 packages, changed 1 package，因为最新的 OpenAI 包需要少得多的辅助工具。在 Mac 上，第二个命令可能以关于 fsevents 的 allow-scripts 警告结束；这不会阻止项目运行。

Juno安装包在包含 package.json 的文件夹中打开终端，运行 npm install，然后运行 npm install openai@latest。

如果 npm 说找不到 package.json，说明你在错误的文件夹中。

改变模型

打开 index.js。它告诉你有哪个项目：如果它调用 openai.images.generate，则是图像生成项目；如果它调用 openai.chat.completions.create，则是视觉项目。只进行与你的项目相关的改动。

图像生成。 项目要求使用 dall-e-3，它已被 OpenAI 停用。它的替代品 gpt-image-2 以 base64 文本形式而不是链接返回图片，所以 generatePoster 的两部分会改变。将请求从：

const image = await openai.images.generate({
   model: "dall-e-3",
   prompt
});

改为：

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

然后将读取图像的行从：

const imgURL = image.data[0].url;

改为：

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

它后面那行将 imgURL 放入页面的代码保持不变。

视觉。 项目要求使用 gpt-4-vision-preview，它已被 OpenAI 停用。改为：

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

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

model: "gpt-4o-mini",

请求的其余部分（文本和图像链接）保持课程中的写法。

Juno改变模型从 index.js 中的调用确定你有哪个项目。对于图像生成，改变模型，添加 size 行并改变 imgURL 行；使用旧的 .url 行，海报会显示为损坏的图像。对于视觉，改变那一行 model。

将你的密钥提供给项目

Scrimba 的编辑器为你填写 process.env.OPENAI_API_KEY。浏览器没有 process，Vite 也不创建一个，所以 index.js 顶部附近的密钥行必须从：

apiKey: process.env.OPENAI_API_KEY,

改为：

apiKey: import.meta.env.VITE_OPENAI_API_KEY,

Vite 只将名称以 VITE_ 开头的变量交给浏览器代码，这就是为什么名称获得这个前缀。下面的 dangerouslyAllowBrowser: true 行保持不变。

然后在 package.json 旁边创建 .env 并放入你的密钥：

dotenv

VITE_OPENAI_API_KEY=your-openai-api-key

在 package.json 旁边创建 .gitignore 并添加：

txt

.env
node_modules/

到达 Git 仓库的密钥即使在你删除文件后也会保留在其历史中。Git 手册在忽略文件和良好实践中讲述了这个习惯。

此密钥在浏览器中可见

Vite 将每个 VITE_ 值写入发送到浏览器的代码中，所以任何打开此页面的人都可以读取你的密钥，每个海报或描述都会计费到你的帐户。将此版本保留在你自己的计算机上：永远不要部署或共享它，永远不要提交 .env。你发布的版本需要一个后端或无服务器函数来保持服务器上的密钥。

Juno将你的密钥提供给项目将 apiKey 行改为 import.meta.env 形式，下面的行保持不变。然后在 package.json 旁边创建一个叫 .env 的文件，在一行中放入你的密钥，在 .gitignore 中列出 .env 这样 Git 就不会保存它。

启动项目

启动开发服务器：

bash

$ npm start

Vite 可能首先打印一个以 (!) Your Vite config uses features 开头的警告。它不会阻止项目。在它下方，Vite 打印要打开的地址：

text

  VITE v8.3.4  ready in 1825 ms

  ➜  Local:   http://localhost:5173/

打开确切的 Local 地址。如果你在项目运行时创建或保存 .env，终端会显示 [vite] .env changed, restarting server...，页面会使用新密钥。

图像生成。 页面标题为 Film-Fusion。输入电影标题，选择艺术风格，点击 Generate Poster。表单清空，下面的框显示 Generating poster for "…" in the style of …。当 OpenAI 回复时海报会替换那行，这可能需要一段时间。如果框显示 Sorry, an error occurred while generating the poster.，原因在浏览器控制台中。

视觉。 项目在页面打开时立即发送请求，所以页面在 OpenAI 查看图片时保持空白。当答案到达时，建筑物的图片出现，答案打印在浏览器控制台中，而不是页面上。控制台折叠显示它：点击它旁边的箭头，然后点击 message 旁边的箭头，以读取 content（描述）。每次重新加载都会发送新请求，每次你保存 index.js 时 Vite 都会重新加载页面。

要读取控制台，打开你的浏览器开发者工具（F12 或在 Mac 上的 Chrome 中按 Cmd+Option+J）并选择 Console 标签。关于 favicon.ico 的红色 404 是无害的；下面的故障排除会匹配其他消息。

用 Ctrl+C 停止项目。

Juno启动项目运行 npm start，忽略如果出现的配置警告，打开 Local 地址。

对于图像生成，提交标题和风格并等待海报。对于视觉，打开控制台并等待答案。如果都没有出现，在控制台中读取红色错误。

故障排除

Generate Poster 只清空表单： 地址添加了 ?art-styles=… 但没有出现 Generating poster 行。代码在页面加载时停止，在按钮被连接前；控制台会说出接下来两个问题中哪一个。

控制台说 process is not defined： index.js 中的 apiKey 行仍读取 process.env。将其改为 import.meta.env 形式并保存。

控制台说 Missing credentials： 浏览器没有密钥。检查 .env 是否在 package.json 旁边，并且名称是否完全是 VITE_OPENAI_API_KEY，然后保存。消息建议 OPENAI_API_KEY；保留 VITE_ 名称。

控制台说 401 Incorrect API key provided： 密钥到达了，但 OpenAI 不接受它。从你的 OpenAI 仪表板中再次复制它，检查它是否未被删除。

控制台说 429 You exceeded your current quota： 密钥有效，但帐户没有可用的信用。在 OpenAI 仪表板的"Billing"下添加信用，然后重试。

控制台提到组织验证或模型访问： 你的帐户还不能使用图像模型。在 OpenAI 仪表板中验证你的组织，等待它生效，然后重试。

海报是损坏的图像： imgURL 行仍读取 .url。将其改为上面所示的 b64_json 行。

控制台说模型不存在： 检查 index.js 是否要求 gpt-image-2 或 gpt-4o-mini，而不是旧模型。OpenAI 计划在 2027 年 1 月 14 日停止提供 gpt-4o-mini；之后，使用其弃用页面命名的替代品。

Juno故障排除在控制台中找到红色错误，跳过 favicon.ico 那个，并将其与上面的粗体标题匹配。大多数这些都是 index.js 或 .env 中仍需改变的一行。

在本地运行多模态项目 ​

你首先需要什么 ​

安装包 ​

改变模型 ​

将你的密钥提供给项目 ​

启动项目 ​

故障排除 ​

在本地运行多模态项目

你首先需要什么

安装包

改变模型

将你的密钥提供给项目

启动项目

故障排除