使用JS调用OpenAI生成图片遇SyntaxError问题及额外需求咨询

1. SyntaxError 错误原因与解决 #

核心问题：Node.js v10.19.0不支持ES2020引入的空值合并运算符??，而OpenAI v4.44.0内部使用了该语法，导致运行时抛出语法错误。同时Node.js v10已在2021年停止维护，存在安全隐患。

修复选项： #

选项1：升级Node.js版本（推荐）

卸载当前Node.js，安装v16.x或更高版本（OpenAI v4.x要求Node.js >=16.11.0）：

# 卸载旧版本（根据实际安装方式调整）
sudo apt remove nodejs npm
# 安装nvm管理Node版本
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
# 重新加载终端后安装Node.js v16
nvm install 16
nvm use 16
# 验证版本
node -v # 应显示v16.x.x
npm -v # 应显示v8.x或更高

重新安装依赖：

rm -rf node_modules package-lock.json
npm install openai@4.44.0

选项2：降级OpenAI到兼容Node.js v10的版本

OpenAI v3.x版本支持Node.js v10，执行以下命令降级：

npm uninstall openai
npm install openai@3.3.0

注意：v3.x的API调用逻辑与v4.x不同，需对应调整代码。

2. 实现弹窗显示图片而非保存文件 #

Node.js无原生GUI，可通过以下两种方式实现：

方式1：使用open库打开图片URL（轻量推荐） #

安装依赖：

npm install open

修改代码示例（OpenAI v4.x版本）：

const OpenAI = require('openai');
const open = require('open');

const openai = new OpenAI({
  apiKey: '你的OpenAI API密钥' // 替换为个人密钥
});

async function generateAndShowImage() {
  try {
    const response = await openai.images.generate({
      prompt: '一只坐在月球上的猫',
      n: 1,
      size: '1024x1024'
    });
    const imageUrl = response.data[0].url;
    // 调用系统默认浏览器打开图片URL
    await open(imageUrl);
    console.log('图片已在浏览器中打开');
  } catch (error) {
    console.error('生成图片失败:', error);
  }
}

generateAndShowImage();

方式2：使用Electron创建原生窗口（定制化更强） #

初始化Electron项目：

npm init -y
npm install electron openai@4.44.0

创建main.js：

const { app, BrowserWindow } = require('electron');
const OpenAI = require('openai');

const openai = new OpenAI({
  apiKey: '你的OpenAI API密钥'
});

let mainWindow;

async function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1100,
    height: 1100,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  try {
    const response = await openai.images.generate({
      prompt: '一只坐在月球上的猫',
      n: 1,
      size: '1024x1024'
    });
    const imageUrl = response.data[0].url;
    // 在窗口中加载图片
    mainWindow.loadURL(`data:text/html,<img src="${imageUrl}" style="width:100%;height:100%;object-fit:contain;">`);
  } catch (error) {
    mainWindow.loadURL(`data:text/html,<h1>生成失败</h1><p>${error.message}</p>`);
  }

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

修改package.json的scripts字段：

"scripts": {
  "start": "electron ."
}

运行项目：npm start

补充：OpenAI v3.x版本适配代码 #

如果选择降级到v3.3.0，使用以下代码结构：

const { Configuration, OpenAIApi } = require("openai");
const open = require('open');

const configuration = new Configuration({
  apiKey: '你的API密钥',
});
const openai = new OpenAIApi(configuration);

async function generateAndShowImage() {
  try {
    const response = await openai.createImage({
      prompt: '一只坐在月球上的猫',
      n: 1,
      size: "1024x1024",
    });
    const imageUrl = response.data.data[0].url;
    await open(imageUrl);
  } catch (error) {
    console.error(error);
  }
}

generateAndShowImage();

内容的提问来源于stack exchange，提问作者Nikhil Kartha