在本地运行 HTML 和 JavaScript 会出现此错误：TypeError：模块名称，“openai”无法解析为有效的 URL

Question

我是 Web 开发新手，正在学习有关如何使用 OpenAI API 开发 Web 应用程序的教程。作者在名为 scrimba 的课程环境中运行代码，而我在 MacBook 上进行开发。

这就是应用程序的作用：它是一个简单的 html 页面 (

index.html

)，带有文本区域和一个按钮，一旦点击按钮，它就会调用 js 脚本 (

index.js

) 中的一个方法，该方法调用 OpenAI API。返回的结果显示在页面上。

index.html

中，包含了js脚本如下：

<script type="module" src="index.js"></script>

这是

index.js

的完整实现。

import OpenAI from 'openai';

import process from './env.js';

const openai = new OpenAI()

const setupTextarea = document.getElementById("setup-textarea");
const setupInputContainer = document.getElementById("setup-input-container");
const movieBossText = document.getElementById("movie-boss-text");

document.getElementById("send-btn").addEventListener("click", () => {
  const userInput = setupTextarea.value;
  setupInputContainer.innerHTML =
      `<img src="images/loading.svg" class="loading" id="loading">`;
  movieBossText.innerText =
      `Ok, just wait a second while my digital brain digests that...`;

  fetchBotReply()
});

async function fetchBotReply() {
  const completion = await openai.chat.completions.create({
    messages : [
      {role : "system", content : "You are a helpful assistant."},
      {
        role : "user",
        content : "Say something enthusiastic in less then 10 words"
      },
    ],
    model : "gpt-3.5-turbo",
  });

  console.log(completion.choices[0]);
}

我还在

"type": "module"

文件中添加了

package.json

，因为 Node.js 和 Express 不支持 ECMAScript 模块 IIUC。

我在我的机器上成功地使用快递服务页面。但是当我在浏览器中打开页面时，js 脚本似乎没有正确加载：我按下按钮，但没有任何反应。控制台出现错误：

TypeError: Module name, 'openai' does not resolve to a valid URL.

openai模块已成功安装并正确导入：我编写了另一个脚本（

test.js

）来调用openai模块并使用

node test.js

运行它并成功获得结果。

Answer 1

尝试下面，如果不起作用，请检查 CORS 和您的 openAPI 密钥

const { OpenAIApi } = require('openai');
async function fetchBotReply() {
  const response = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`
    },
    body: JSON.stringify({
      messages: [
        {role: "system", content: "You are a helpful assistant."},
        {role: "user", content: "Say something enthusiastic in less then 10 words"}
      ],
      model: "gpt-3.5-turbo"
    })
  });

  const completion = await response.json();
  console.log(completion.choices[0]);
}