Having trouble using OpenAI API

题意:"使用OpenAI API遇到困难"

问题背景:

I am having trouble with this code. I want to implement AI using OpenAI API in my React.js project but I cannot seem to get what the issue is. I ask it a question in the search bar in my project and it says "No response from AI". There is more to it but this is just what I think is having trouble.

"我在这段代码上遇到了困难。我想在我的React.js项目中使用OpenAI API实现AI功能,但似乎找不到问题所在。我在项目中的搜索栏中输入问题时,它显示‘没有收到AI的响应’。还有更多问题,但这就是我认为出问题的地方。"

//LandingPage.js
import React, { useState, useEffect } from 'react';
import { FaSearch } from 'react-icons/fa';
import './App.css';
import { EntryForm } from './EntryForm';function LandingPage() {// States related to the Healthy Innovations featuresconst [search, setSearch] = useState('');const [showSuggestions, setShowSuggestions] = useState(true);const [isLoading, setIsLoading] = useState(false);const [recipeDetails, setRecipeDetails] = useState(null);const [showWorkoutQuestion, setShowWorkoutQuestion] = useState(false);const [selectedSuggestion, setSelectedSuggestion] = useState(null);const [showWorkoutPlan, setShowWorkoutPlan] = useState(false);const [showCalorieCalculator, setShowCalorieCalculator] = useState(false);const [workoutSplit, setWorkoutSplit] = useState('');const [showCalorieQuestion, setShowCalorieQuestion] = useState(false);const [chatInput, setChatInput] = useState('');const [chatHistory, setChatHistory] = useState([]);const [currentTitle, setCurrentTitle]= useState(null)console.log(chatHistory); // Debugging: Check the structure before renderingconst createNewChat = () => {// Clears the chat to start a new conversationsetChatInput('');setCurrentTitle(null)// No need for setCurrentTitle in this context};const renderChatHistory = () =>chatHistory.map((chat, index) => (<div key={index} className="chat-history"><p>Role: {chat.role}</p>{/* Check if chat.content is a string; if not, handle it appropriately */}<p>Message: {chat.content}</p></div>));const handleSearchChange = (e) => {const inputValue = e.target.value;setChatInput(inputValue); // Update chatInput instead of search state.setShowSuggestions(inputValue.length > 0); // Show suggestions if there's input};const renderDynamicRecommendations = () => {// Filter suggestions based on search inputconst filteredSuggestions = staticSuggestions.filter(suggestion =>suggestion.toLowerCase().includes(search.toLowerCase())); return (<ul>{filteredSuggestions.map((suggestion, index) => (<li key={index} onClick={() => handleSelectSuggestion(suggestion)} style={{ cursor: 'pointer' }}>{suggestion}</li>))}</ul>);};const SERVER_URL = "http://localhost:8000/completions";// Get messages function and other logic remain the same, ensure you're using chatInput for input value management// Adjusting the getMessages function to handle server response correctlyconst getMessages = async () => {if (!chatInput.trim()) return; // Avoid sending empty messagessetIsLoading(true);try {const response = await fetch('http://localhost:8000/completions', {method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify({ message: chatInput })});if (!response.ok) {throw new Error(`HTTP error! Status: ${response.status}`);}const data = await response.json();const aiResponse = data.choices && data.choices.length > 0? data.choices[0].message: "No response from AI."; // Update chat historysetChatHistory(prev => [...prev, { role: 'user', content: chatInput }, { role: 'ai', content: aiResponse }]);setChatInput(''); // Clear the input field} catch (error) {console.error('Fetch error:', error);setChatHistory(prev => [...prev, { role: 'user', content: chatInput }, { role: 'ai', content: "Error communicating with AI." }]);} finally {setIsLoading(false);}};
//server.js const PORT = 8000
const express = require('express')
const cors = require('cors')
require('dotenv').config()
const app = express()
app.use(express.json())
app.use(cors())const API_KEY = process.env.API_KEYapp.post('/completions', async (req, res) => {const options = {method: "POST",headers: {"Authorization": `Bearer ${API_KEY}`, "Content-Type": "application/json" },body: JSON.stringify({model: "gpt-3.5-turbo",messages: [{role: "user", content: req.body.message}],max_tokens: 100,})};try {const response = await fetch('https://api.openai.com/v1/chat/completions', options);const data = await response.json();if (data.choices && data.choices.length > 0 && data.choices[0].message) {// Adjust this path according to the actual structure of OpenAI's responseres.json({ message: data.choices[0].message.content });} else {throw new Error("Invalid response structure from OpenAI API.");}} catch (error) {console.error("Server error:", error);res.status(500).json({ message: "Failed to get response from AI." });}
});app.listen(PORT, () => console.log('Your server is running on PORT'+ PORT))

.env file: API_KEY = "api key"

I have tried changing varablies and also seing if I have everything downloaded which I do.

"我尝试过更改变量,也检查了是否已经下载了所有需要的内容,一切都已下载。"

问题解决:

The backend returns a response in a format different from what the frontend expects.

"后端返回的响应格式与前端预期的不一致。"

From server.js

if (data.choices && data.choices.length > 0 && data.choices[0].message) {res.json({ message: data.choices[0].message.content });} else {throw new Error("Invalid response structure from OpenAI API.");}

This will produce json response { message: "response from openai" }

However on the frontend act as if backend return raw response straight from the openai api

"然而,前端的行为却好像后端返回的是直接来自OpenAI API的原始响应。"

const data = await response.json();const aiResponse = data.choices && data.choices.length > 0? data.choices[0].message: "No response from AI."; 

Here is a fix of the frontend code to match response shape from the backend:

"这是前端代码的修复,以匹配后端返回的响应格式:"

const { message } = await response.json();const aiResponse = message || "No response from AI.";

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

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

相关文章

string详解

Golang详解string 文章目录 Golang详解stringGolang中为什么string是只读的&#xff1f;stirng和[]byte的转化原理[]byte转string一定需要内存拷贝吗&#xff1f;字符串拼接性能测试 Golang中为什么string是只读的&#xff1f; 在Go语言中&#xff0c;string其实就是一个结构体…

实验报告: lookie-lookie 项目测试与分析

目录 一、实验目的 二、实验环境 三、实验步骤 1. 下载与准备项目 1.1 从 GitHub 获取项目 1.2 查看项目文件结构 2. 运行项目 2.1 启动项目 2.2 浏览器设置 3. 项目体验 3.1 功能测试 3.2 运行截图 4. 文件结构分析 4.1 总体结构 4.2 主要文件和目录说明 5. 数…

09-03 周二 ansible部署和节点管理过程

09-03 周二 ansible部署和节点管理过程 时间版本修改人描述2024年9月3日10:08:58V0.1宋全恒新建文档&#xff0c; 简介 首先要找一个跳板机&#xff0c;来确保所有的机器都可以访问。然后我们围绕ansible来搭建环境&#xff0c;方便一键执行所有的命令&#xff0c;主要的任务是…

SQL语言的规则和规范

规则 是什么呢&#xff0c;规则就是我们最基本&#xff0c;每时每刻都要遵守的比如人行道靠右&#xff0c;不能逆行&#xff0c; 规范 呢就是锦上添花&#xff0c;如果你不这么做&#xff0c;是不那么道德&#xff0c;不那么好的&#xff0c;就像小学生见到老师要问好&#…

机器学习:opencv图像识别--图片运算、边界、阈值处理、平滑处理

目录 一、图片运算 1.加法 1. 2.add 3.加权相加 2.减法 二、图片边界 三、图像阈值处理 四、图像平滑处理 1.生成椒盐噪声 2.滤波器 1.均值滤波 2.方框滤波 3.高斯滤波 4.中值滤波 一、图片运算 1.加法 1. 直接将图片上每个像素点的值加上给定值或者两张图片…

wpf image source绑定相对路径方法

当使用image source绑定相对路径图片资源时&#xff0c;出现问题&#xff1a;未能找到路径C:\windows/System32…路径的一部分 解决方法&#xff1a; 将文件放到指定文件夹中包含在当前项目中 具体绑定语句为&#xff1a; <Image Stretch"Fill" x:Name"imgT…

(计算机论文)基于SpringBoot和Vue的台球赛事服务网站的设计与实现

毕业设计&#xff08;论文&#xff09; 博主可接毕设论文&#xff01;&#xff01;&#xff01; 基于SpringBoot和Vue的台球赛事服务网站的设计与实现 摘 要 在快速发展的信息时代&#xff0c;体育竞赛作为群众文化娱乐的一部分&#xff0c;已日益受到广泛关注。台球&#xff…

python 怎样计算字符串的长度

python 计算字符串长度&#xff0c;一个中文算两个字符&#xff0c;先转换成utf8&#xff0c;然后通过计算utf8的长度和len函数取得的长度&#xff0c;进行对比即可知道字符串内中文字符的数量&#xff0c;自然就可以计算出字符串的长度了。 valueu脚本12 length len(value) u…

排查SQL Server中的内存不足及其他疑难问题

文章目录 引言I DMV 资源信号灯资源信号灯 DMV sys.dm_exec_query_resource_semaphores( 确定查询执行内存的等待)查询性能计数器什么是内存授予?II DBCC MEMORYSTATUS 查询内存对象III DBCC 命令释放多个 SQL Server 内存缓存 - 临时度量值IV 等待资源池 %ls (%ld)中的内存…

统计学习与方法实战——K近邻算法

K近邻算法 K近邻算法备注k近邻模型算法距离度量 k k k值选择分类决策规则构造KDTree k k k近邻查找范围查询 代码结构总结 K近邻算法 备注 kNN是一种基本分类与回归方法. 多数表决规则等价于0-1损失函数下的经验风险最小化&#xff0c;支持多分类&#xff0c; 有别于前面的感…

QT做一个USB HID设备识别软件

1.下载 HidApi库&#xff1a;GitHub - yigityuce/HidApi: Human Interface Device Api (HidApi) with C 2.pro文件添加 DEFINES - UNICODE LIBS -lsetupapi 3.h文件 #ifndef My_Usb_Hid_Device_H #define My_Usb_Hid_Device_H#include <QWidget> #include <QStr…

数据结构(6.4_6)——拓扑排序

AOV网 AOV网&#xff1a;用顶点表示活动的网。 用DAG图(有向无环图)表示一个工程&#xff0c;顶点表示活动&#xff0c;有向边<Vi,Vj>表示活动Vi必须先于vj进行 拓扑排序&#xff08;找到做事的先后顺序&#xff09; 对有回路的图进行拓扑排序 拓扑排序的实现代码 回…

Redis过期键监听

在 Redis 中&#xff0c;为了监听过期键事件&#xff0c;需要使用 Redis 的 Keyspace Notifications 功能。这一功能允许客户端订阅某些事件的发生&#xff0c;比如键过期、键删除等。 启用过期键监听 在 Redis 的配置文件 redis.conf 中&#xff0c;确保配置项 notify-keysp…

Python画笔案例-031 绘制器形图

1、绘制蝌蚪 通过 python 的turtle 库绘制器形图&#xff0c;如下图&#xff1a; 2、实现代码 绘制器形图&#xff0c;以下为实现代码&#xff1a; """器形图.py采用前进&#xff0c;倒退&#xff0c;左转&#xff0c;右转命令制作的一个图形。 ""&q…

场外个股期权机构有哪些?

今天带你了解场外个股期权机构有哪些&#xff1f;场外个股期权交易商名单包括了多家券商&#xff0c;这些券商在场外期权市场中扮演着重要的角色。 场外个股期权通常涉及的主要机构包括&#xff1a; 1.投资银行&#xff1a;这些机构常常作为交易的中介或对手方&#xff0c;为…

绝区零苹果电脑能玩吗,如何在Mac上玩绝区零?绝区零MacBook 下载安装保姆级教程

《绝区零》是一款由米哈游开发的都市动作冒险游戏&#xff0c;游戏的故事背景设定在一个名为「新艾利都」的现代化大都市中&#xff0c;玩家将扮演一对「绳匠」兄妹展开冒险。很多玩家都在问苹果电脑笔记本Mac怎么玩绝区零&#xff0c;今天就给大家介绍一下《绝区零》是一款什么…

【UE5】控件蓝图——树视图(TreeView)的基本使用

目录 前言 效果 步骤 一、显示根节点 二、显示子节点 前言 我们在视口中添加1个方块&#xff0c;2个球体&#xff0c;5个圆柱 它们在大纲视图中的层级关系如下&#xff0c;那么如何将这种层级关系显示在树视图中是本篇文章要解决的问题。 效果 步骤 一、显示根节点 1…

跨境电商代购系统中前台基本功能介绍:帮助更快的了解跨境代购业务

前台多语言&#xff1a;可支持语言有中文&#xff08;繁体&#xff09;中文&#xff08;简体&#xff09;英文等。多语言使用百度翻译引擎接口实现&#xff0c;翻译效果与百度一致&#xff1b;网站语言分为两大块&#xff1a;1.系统后台有语言包可以编辑修改网站标题以及发布文…

mongodb在Java中条件分组聚合查询并且分页(时间戳,按日期分组,年月日...)

废话不多说&#xff0c;先看效果图&#xff1a; SQL查询结果示例&#xff1a; 多种查询结果示例&#xff1a; 原SQL&#xff1a; db.getCollection("hbdd_order").aggregate([{// 把时间戳格式化$addFields: {orderDate: {"$dateToString": {"for…

[数据集][目标检测]课堂行行为检测数据集VOC+YOLO格式4065张12类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;4065 标注数量(xml文件个数)&#xff1a;4065 标注数量(txt文件个数)&#xff1a;4065 标注…