OpenAI API key not working in my React App

news2024/9/21 12:45:06

题意:OpenAI API 密钥在我的 React 应用中不起作用

问题背景:

I am trying to create a chatbot in my react app, and I'm not able to generate an LLM powered response. I've been studying documentation and checking out tutorials but am unable to fix.

我正在尝试在我的 React 应用中创建一个聊天机器人,但无法生成由 LLM 驱动的响应。我一直在研究文档并查看教程,但无法解决问题。

I tried setting up a function for my chatbot, calling the api key, importing openai, setting up the parameters for the gpt-3.5-turbo model including temperature. The catch (error) section has a setResponse of 'Error generating response' and that's all I get after user inputs a question.

我尝试为我的聊天机器人设置一个函数,调用 API 密钥,导入 OpenAI,设置 gpt-3.5-turbo 模型的参数,包括温度。catch(错误)部分设置了 'Error generating response' 作为响应,用户输入问题后,我得到的只有这一条错误信息。

try {
    const response = await openai.createCompletion({
        model: 'gpt-3.5-turbo',
        prompt: question,
        max_tokens: 100,
        n: 1,
        stop: '\n',
        temperature: 1.17,
        headers: {
            Authorization: `Bearer ${API_KEY}`,
        }
});

问题解决:

First of all, as @KenWhite suggested, fix the fundamentals. Use the try...catch statement properly as follows:

首先,正如 @KenWhite 建议的那样,先修正基本问题。正确使用 try...catch 语句,如下所示:

try {
  // Your code here
} catch (error) {
  console.error(error);
}

Problem

Note: OpenAI NodeJS SDK v4 was released on August 16, 2023, and is a complete rewrite of the SDK. See the v3 to v4 migration guide.

注意:OpenAI NodeJS SDK v4 于 2023 年 8 月 16 日发布,并且是 SDK 的一次完全重写。请参阅 v3 到 v4 的迁移指南。

There are a few problems with the code you posted in your question. The solutions to these problems I provide below differ depending on whether you use OpenAI NodeJS SDK v3 or v4.

你问题中发布的代码有一些问题。我提供的解决方案根据你使用的是 OpenAI NodeJS SDK v3 还是 v4 而有所不同。

To check your OpenAI NodeJS SDK version, run the following command:

要检查你的 OpenAI NodeJS SDK 版本,请运行以下命令:

npm info openai version

Problem 1: Passing an invalid parameter to the API endpoint

问题 1:向 API 端点传递了无效的参数

You're trying to pass headers as a parameter to the API endpoint, which is not a valid parameter. Remove it.

你正试图将 headers 作为参数传递给 API 端点,但这不是一个有效的参数。请将其删除。

Solution

You need to set the Bearer token as follows...        你需要按照以下方式设置 Bearer 令牌..

• If you have the OpenAI NodeJS SDK v3:        如果你使用的是 OpenAI NodeJS SDK v3

import { Configuration, OpenAIApi } from 'openai';

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});

const openai = new OpenAIApi(configuration);

• If you have the OpenAI NodeJS SDK v4:        如果你使用的是 OpenAI NodeJS SDK v4

import OpenAI from 'openai';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

Problem 2: Using the wrong method name        问题 2:使用了错误的方法名称

You want to use the gpt-3.5-turbo model (i.e., Chat Completions API). Use the proper method name.

你想使用 gpt-3.5-turbo 模型(即 Chat Completions API)。请使用正确的方法名称。

Solution        解决方案

• If you have the OpenAI NodeJS SDK v3:

  • openai.createCompletion <-- Wrong ✘
  • openai.createChatCompletion <-- Correct (works with the Chat Completions API) ✔

• If you have the OpenAI NodeJS SDK v4:

  • openai.completions.create <-- Wrong ✘
  • openai.chat.completions.create <-- Correct (works with the Chat Completions API) ✔

Problem 3: Using the prompt parameter         问题 3:使用了 prompt 参数

You want to use the gpt-3.5-turbo model (i.e., Chat Completions API).

你想使用 gpt-3.5-turbo 模型(即 Chat Completions API)。

The Chat Completions API uses the messages parameter, while the Completions API uses the prompt parameter.

Chat Completions API 使用 messages 参数,而 Completions API 使用 prompt 参数。

Solution

Use the messages parameter instead of the prompt parameter.

使用 messages 参数而不是 prompt 参数。

Final solution

• If you have the OpenAI NodeJS SDK v3, try this:

如果你使用的是 OpenAI NodeJS SDK v3,请尝试以下方法:

import { Configuration, OpenAIApi } from 'openai';

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});

const openai = new OpenAIApi(configuration);

try {
  const chatCompletion = await openai.createChatCompletion({
    model: 'gpt-3.5-turbo',
    messages: [{ role: 'user', content: 'Hello world' }],
    max_tokens: 100,
    n: 1,
    stop: '\n',
    temperature: 1.17,
  });

  console.log(chatCompletion.data.choices[0].message);
} catch (error) {
  console.error(error);
}

• If you have the OpenAI NodeJS SDK v4, try this: 

如果你使用的是 OpenAI NodeJS SDK v4,请尝试以下方法:

import OpenAI from 'openai';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

try {
  const chatCompletion = await openai.chat.completions.create({
    model: 'gpt-3.5-turbo',
    messages: [{ role: 'user', content: 'Hello world' }],
    max_tokens: 100,
    n: 1,
    stop: '\n',
    temperature: 1.17,
  });

  console.log(chatCompletion.choices[0].message);
} catch (error) {
  console.error(error);
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2142812.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【CMake】使用CMake在Visual Studio中配置glad和glfw

下载glad和glfw g l a d glad glad下载&#xff1a;glad下载 这个是 g i t h u b github github上的资源&#xff0c;进不去的话就开开魔法。 g l f w glfw glfw下载&#xff1a;glfw下载 下载CMake C M a k e CMake CMake下载&#xff1a; CMake下载 根据自己的平台选择&…

【Java 优选算法】双指针(下)

欢迎关注个人主页&#xff1a;逸狼 创造不易&#xff0c;可以点点赞吗~ 如有错误&#xff0c;欢迎指出~ 有效三角形的个数 题目链接 解法 解法1:暴力枚举--->O(n^3) 解法2:利用单调性,使用双指针来解决---->O(n^2) 优化:对整个数组进行排序先固定最大数在最大数的左…

文心智能体 城市印象之漫行北京 开发分享

城市印象之漫行北京 请点击文心智能体平台AgentBuilder | 想象即现实 (baidu.com) 一、开发灵感 这个智能体为笔者“城市印象”系列当中的作品之一&#xff0c;这个智能体侧重于为用户提供丈量北京的个性化城市之旅&#xff0c;或漫步历史文化街区细细品味&#xff0c;或领略…

动态内存管理之malloc,free,calloc和realloc函数

Hello&#xff0c;各位小伙伴们&#xff0c;小编在这里祝福各位中秋佳节快乐呀&#xff0c;今天让我们来学习一下动态内存管理吧&#xff01; 引言 像我们之前在开辟一段空间的时候你可能会使用整型变量来申请一块空间&#xff0c;或者使用数组来申请一段连续的空间&#xff…

网络协议全景:Linux环境下的TCP/IP、UDP

目录 1.UDP协议解析1.1.定义1.2.UDP报头1.3.特点1.4.缓冲区 2.TCP协议解析2.1.定义2.2.报头解析2.2.1.首部长度&#xff08;4位&#xff09;2.2.2.窗口大小2.2.3.确认应答机制2.2.4.6个标志位 2.3.超时重传机制2.4.三次握手四次挥手2.4.1.全/半连接队列2.4.2.listen2.4.3.TIME_…

复选按钮QCheckBox

使用场景&#xff1a;多选多 文本 // 获取和设置显示的文本 QString text() const void setText(const QString &text) 三态 复选按钮有三种状态 Qt::Checked 选中Qt::Unchecked 非选中Qt::PartiallyChecked 半选中&#xff0c;比如一组复选按钮中&#xff0c;只选择了…

PointNet++改进策略目录

后续我将如何使用文章中创新点加入的PointNet中代码实现部分进行更新 题目原理解析代码改进PointNet改进策略 &#xff1a;模块改进 | LFA | RandLA-Net&#xff0c;通过随机采样与局部特征聚合提升大规模3D点云处理效率✔️❌PointNet改进策略 &#xff1a;模块改进 | Residua…

Renesas R7FA8D1BH (Cortex®-M85)控制SHT20

目录 概述 1 硬件接口介绍 2 SHT20模块 2.1 SHT20简介 2.2 SHT-20模块电路 3 I2C接口实现 3.1 FSP配置I2C 3.2 I2C驱动程序实现 4 SHT20驱动程序 4.1 SHT20驱动代码结构 4.2 源代码文件 5 测试 5.1 测试功能介绍 5.2 测试代码实现 5.3 运行代码 概述 本文主要介…

ubuntu虚拟机装载共享文件夹导致的诡异错误

最近使用vmware station 15 安装了 ubuntu22.04 的虚拟机。在装载共享文件夹不久后便会出现诡异的错误。目前在网络上好像没有人把这归结到装载共享文件夹的问题上&#xff0c;故以供参考。 第一次&#xff1a; 在装载之后大概第二次开机&#xff0c;出现报错界面。 提示蓝牙…

C++二叉搜索树学习

目录 一、二叉搜索树概念 二、二叉搜索树的性能分析 三、二叉搜索树的构建 一、二叉搜索树概念 二叉搜索树又叫做二叉排序树&#xff0c;它可以是一颗空树&#xff0c;或者是具有以下性质的二叉树&#xff1a; 若该树的左子树不为空&#xff0c;那么左子树上的任一节点都小…

硬件工程师笔试面试——存储器件

目录 16、存储器件 16.1 基础 存储器件实物图 16.1.1 概念 16.1.2 常见的存储器件及其特点 16.2 相关问题 16.2.1 不同类型的存储器件在成本和性能上有哪些具体的差异 16.2.2 如何根据应用需求选择合适的存储器件? 16.2.3 存储器件的耐用性和可靠性是如何影响其在不同…

【Unity】 HTFramework框架(五十六)MarkdownText:支持运行时解析并显示Markdown文本

更新日期&#xff1a;2024年9月15日。 Github源码&#xff1a;[点我获取源码] Gitee源码&#xff1a;[点我获取源码] 索引 MarkdownText支持的Markdown语法标题强调文本表格嵌入图像超链接 使用MarkdownText设置项运行时属性解析使用ID模式嵌入图像 MarkdownText MarkdownText…

【算法思想·二叉搜索树】基操篇

本文参考labuladong算法笔记[二叉搜索树心法&#xff08;基操篇&#xff09; | labuladong 的算法笔记] 1、概述 我们前文 东哥带你刷二叉搜索树&#xff08;特性篇&#xff09; 介绍了 BST 的基本特性&#xff0c;还利用二叉搜索树「中序遍历有序」的特性来解决了几道题目&am…

OpenAI的o1模型与Transformer的无限潜力:数学证明推理算力无上限

近期&#xff0c;斯隆奖得主马腾宇和Google Brain推理团队创始人Denny Zhou合作&#xff0c;提出了一项引人注目的数学证明&#xff1a;只要思维链&#xff08;CoT&#xff09;足够长&#xff0c;Transformer就有能力解决各种复杂问题。这一发现引发了广泛关注&#xff0c;因为…

驱动器磁盘未格式化难题:深度剖析与恢复实践

驱动器磁盘未格式化的深层探索 在数据存储与管理的日常中&#xff0c;驱动器作为我们数字生活的基石&#xff0c;其稳定性直接关系到数据的安全与可用性。然而&#xff0c;当屏幕上赫然出现“驱动器中的磁盘未被格式化”的提示时&#xff0c;许多用户往往感到手足无措&#xf…

把设计模式用起来!(3)用不好模式?之时机不对

上一篇&#xff1a;《把设计模式用起来&#xff08;2&#xff09;——用不好&#xff1f;之实践不足》 本篇继续讲设计模式用不好的常见原因&#xff0c;这是第二个&#xff1a;使用设计模式的时机不对。 二、时机不对 这里说的时机并不是单纯指软件研发周期中的时间阶段&…

C++11新增特性:lambda表达式、function包装器、bind绑定

一、lambda表达式 1&#xff09;、为啥需要引入lambda&#xff1f; 在c98中&#xff0c;我们使用sort对一段自定义类型进行排序的时候&#xff0c;每次都需要传一个仿函数&#xff0c;即手写一个完整的类。甚至有时需要同时实现排升序和降序&#xff0c;就需要各自手写一个类&…

基于SSM的社区爱心捐赠管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 【2025最新】基于JavaSSMVueMySQL的社区爱…

任嘉伦新剧《流水迢迢》:卫昭多层人设引关注

近日&#xff0c;由晋江文学城同名小说改编的武侠古装爱情传奇剧《流水迢迢》即将开播&#xff0c;这部由任嘉伦主演的新剧&#xff0c;在原著和阵容的双双加持下热度直线上涨&#xff0c;宣传阶段就已备受网友期待&#xff0c;预约人数截止9月13日已达到206万&#xff0c;上升…

通信工程学习:什么是GPON吉比特无源光网络

GPON&#xff1a;吉比特无源光网络 GPON&#xff08;Gigabit-Capable Passive Optical Network&#xff0c;吉比特无源光网络&#xff09;是一种基于ITU-T G.984.x标准的最新一代宽带无源光综合接入技术。该技术以其高带宽、高效率、大覆盖范围和用户接口丰富等特点&#xff0c…