OpenAI API key not working in my React App

题意: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.rhkb.cn/news/425858.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PostgreSQL维护——解决索引膨胀和数据死行

注意&#xff1a; 本文内容于 2024-09-16 00:40:33 创建&#xff0c;可能不会在此平台上进行更新。如果您希望查看最新版本或更多相关内容&#xff0c;请访问原文地址&#xff1a;PostgreSQL维护——解决索引膨胀和数据死行。感谢您的关注与支持&#xff01; 我有一张表&#…

Android相关线程基础

线程基础 进程与线程 进程:可以被看做是程序的实体, 是系统进行资源分配和调度的基本单位. 线程:是操作系统调度的最小单元, 也叫轻量级进程 使用多线程的优点 可以减少程序的响应时间。如果某个操作很耗时, 能够避免陷入长时间的等待, 从而有着更好的交互性. 线程较之进…

《深度学习》深度学习 框架、流程解析、动态展示及推导

目录 一、深度学习 1、什么是深度学习 2、特点 3、神经网络构造 1&#xff09;单层神经元 • 推导 • 示例 2&#xff09;多层神经网络 3&#xff09;小结 4、感知器 神经网络的本质 5、多层感知器 6、动态图像示例 1&#xff09;一个神经元 相当于下列状态&…

Minio环境搭建(单机安装包、docker)(一)

前言&#xff1a; 项目中客户不愿意掏钱买oss&#xff0c;无奈只能给他免费大保健来一套。本篇文章只是记录验证可行性&#xff0c;毕竟minio太少文档了&#xff0c;参考着官网来。后面还会再出一套验证集群部署的文章。 一、资料 MinIO官网&#xff1a; MinIO | S3 Compatib…

CSP-J算法基础 树状结构与二叉树

文章目录 前言树状结构树状结构的基本概念&#xff1a;为什么需要树状结构&#xff1f;优点树状结构的示例 二叉树什么是二叉树&#xff1f;二叉树的类型什么样的树不是二叉树&#xff1f;二叉树的五种形态 完全二叉树相关概念完全二叉树的定义&#xff1a; 相关概念1. **高度&…

使用iperf3测试局域网服务器之间带宽

文章目录 一、下载安装1、windows2、centos 二、使用0、参数详解1、centos 一、下载安装 1、windows https://iperf.fr/iperf-download.php 拉到最下面选最新版&#xff1a; 2、centos yum install iperf3二、使用 0、参数详解 服务器或客户端&#xff1a; -p, --port #…

初识网络原理

网络的发展史 电报时代&#xff08;19世纪中叶&#xff09;&#xff1a;电报是最早的远程通信方式之一&#xff0c;它通过电线传输编码信息&#xff0c;极大地缩短了信息传递的时间电话的发明&#xff08;1876年&#xff09;&#xff1a;亚历山大格拉汉姆贝尔发明了电话&#…

前端单独实现 vue 动态路由

前端单独实现 vue 动态路由 Vue 动态路由权限是指在 Vue 应用程序中&#xff0c;根据用户的权限动态生成和控制路由的行为。这意味着不是所有的路由都在应用启动时就被硬编码到路由配置中&#xff0c;而是根据用户的权限信息&#xff0c;在运行时动态地决定哪些路由应该被加载…

VirtualBox Install MacOS

环境搭建 git clone https://github.com/myspaghetti/macos-virtualbox 脚本配置 修改macos-guest-virtualbox.sh部分内容为 vm_name"macOS" # name of the VirtualBox virtual machine macOS_release_name"Catalina" # install &quo…

EmguCV学习笔记 C# 11.6 图像分割

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 EmguCV是一个基于OpenCV的开源免费的跨平台计算机视觉库,它向C#和VB.NET开发者提供了OpenCV库的大部分功能。 教程VB.net版本请访问…

《微信小程序实战(2) · 组件封装》

&#x1f4e2; 大家好&#xff0c;我是 【战神刘玉栋】&#xff0c;有10多年的研发经验&#xff0c;致力于前后端技术栈的知识沉淀和传播。 &#x1f497; &#x1f33b; CSDN入驻不久&#xff0c;希望大家多多支持&#xff0c;后续会继续提升文章质量&#xff0c;绝不滥竽充数…

天津大学推出“AI学长”

B站&#xff1a;啥都会一点的研究生公众号&#xff1a;啥都会一点的研究生 AI圈又发生了啥新鲜事&#xff1f; 天津大学推出“AI 学长”海棠棠&#xff0c;全天候解答新生疑问 天津大学未来技术学院研发了名为“海棠棠”的新生智能体&#xff0c;它能够24小时不间断地为新生…

Oracle 19c异常恢复—ORA-01209/ORA-65088---惜分飞

由于raid卡bug故障,导致文件系统异常,从而使得数据库无法正常启动,客户找到我之前已经让多人分析,均未恢复成功,查看alert日志,发现他们恢复的时候尝试resetlogs库,然后报ORA-600 kcbzib_kcrsds_1错误 2024-09-15T17:07:32.55321508:00 alter database open resetlogs 2024-09-…

【iOS】push和present的区别

【iOS】push和present的区别 文章目录 【iOS】push和present的区别前言pushpop presentdismiss简单小demo来展示dismiss和presentdismiss多级 push和present的区别区别相同点 前言 在iOS开发中&#xff0c;我们经常性的会用到界面的一个切换的问题&#xff0c;这里我们需要理清…

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

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

信息学奥赛初赛天天练-91-CSP-S2023基础题3-编译命令、树的重心、拓扑排序、进制转换、R进制转十进制、十进制转R进制

PDF文档公众号回复关键字:20240917 2023 CSP-S 选择题 1单项选择题&#xff08;共15题&#xff0c;每题2分&#xff0c;共计30分&#xff1a;每题有且仅有一个正确选项&#xff09; 11 以下哪个命令&#xff0c;能将一个名为 main.cpp 的 C 源文件&#xff0c;编译并生成一个…

[Unity Demo]从零开始制作空洞骑士Hollow Knight第二集:通过InControl插件实现绑定玩家输入以及制作小骑士移动空闲动画

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、通过InControl插件实现绑定玩家输入二、制作小骑士移动和空闲动画 1.制作动画2.玩家移动和翻转图像3.状态机思想实现动画切换总结 前言 好久没来CSDN看看&…

利用JS数组根据数据生成柱形图

要求 <html> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document…

Python 基础 (标准库):datetime (基本日期和时间类型)

1. 官方文档 datetime --- 基本日期和时间类型 — Python 3.12.2 文档 tz — dateutil 3.9.0 documentation 2. 背景 2.1 处理时间数据的难点 计算机程序喜欢有序的、有规则的事件&#xff0c;但对于时间数据&#xff0c;其涉及的规则复杂且可能有变化&#xff0c;最典型例…

【homebrew安装】踩坑爬坑教程

homebrew官网&#xff0c;有安装教程提示&#xff0c;但是在实际安装时&#xff0c;由于待下载的包的尺寸过大&#xff0c;本地git缓存尺寸、超时时间的限制&#xff0c;会报如下错误&#xff1a; error: RPC failed; curl 92 HTTP/2 stream 5 was not closed cleanly&#xf…