使用React、Spring Boot、ChatGPT创建聊天应用
详细介绍如何用React、Spring Boot和OpenAI构建聊天应用程序。
我们生活在一个聊天机器人越来越普遍的时代，无论是客户服务、在线购物，还是辅导，AI驱动的聊天机器人已经无处不在。本文向您介绍如何使用React、Spring Boot和OpenAI的ChatGPT-3.5 Turbo构建一个简单而实用的聊天应用程序。这个应用程序可以让您体验到如何使用最新的技术来创建一个聊天机器人，从而更好地满足用户的需求。
1 开始
在开始之前，确保您已经安装了以下工具：
Java开发工具包（JDK）11+ Node.js NPM IDE（例如IntelliJ IDEA、VS Code） 用于测试API的Postman（可选）
还要确保您拥有一个OpenAI帐户和API密钥，用来访问GPT-3.5 Turbo模型。
2 第1部分：使用Spring Boot构建后端
Spring Boot为Java中构建Web应用程序提供了非常好的基础。我们从创建一个新的Spring Boot应用程序开始。
2.1 步骤1：创建新的Spring Boot项目
转到Spring Initializr网站start.spring.io。选择以下选项：
项目：Maven项目 语言：Java Spring Boot：（最新稳定版本） 组：com.example Artifact：chatbot 名称：chatbot 描述：Spring Boot和OpenAI演示项目 包名称：com.example.chatbot 打包：Jar Java：11
然后，添加以下依赖项：
Spring Web Spring Boot DevTools（用于热重载）
单击“生成”并下载zip文件，然后解压缩并在IDE中打开它。
2.2 步骤2：创建控制器
在com.example.chatbot包中，创建一个名为controller的新包。在此包中，创建一个名为ChatController.java的新Java类。
这个控制器将处理来自我们的React应用程序的请求。我们将使用RestTemplate发送一个POST请求到OpenAI API，并将用户的消息作为提示传递。下面展示如何做到：
package com.example.chatbot.controller;
import org.springframework.http.*;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.client.RestTemplate;
import java.util.Collections;
@RestController
@RequestMapping("/api")
public class ChatController {
@PostMapping("/chat")
public ResponseEntity<String> chat(@RequestBody String message) {
RestTemplate restTemplate = new RestTemplate();
// OpenAI URL
String url = "https://api.openai.com/v1/engines/davinci-codex/completions";
// 将“YOUR-API-KEY”替换为您的OpenAI密钥
String apiKey = "Bearer YOUR-API-KEY";
// 创建HTTP请求头
HttpHeaders headers = new HttpHeaders();
headers.setContentType(MediaType.APPLICATION_JSON);
headers.setAccept(Collections.singletonList(MediaType.APPLICATION_JSON));
headers.set("Authorization", apiKey);
// 创建一个聊天模型实例
ChatModel chatModel = new ChatModel();
chatModel.setPrompt(message);
chatModel.setMaxTokens(100);
// 发送POST请求
HttpEntity<ChatModel> entity = new HttpEntity<>(chatModel, headers);
ResponseEntity<String> response = restTemplate.exchange(url, HttpMethod.POST, entity, String.class);
// 返回响应实体
return response;
}
}
请注意，我们还没有定义ChatModel,这个类用于构造我们在POST请求中发送的数据。我们会在下一步中创建。
2.3 步骤3：创建ChatModel类
在com.example.chatbot中创建一个名为model的新包。在这个包中，创建一个名为ChatModel.java的新Java类。
package com.example.chatbot.model;
public class ChatModel {
private String prompt;
private Integer maxTokens;
// 获取和设置prompt和maxTokens的方法
public String getPrompt() {
return prompt;
}
public void setPrompt(String prompt) {
this.prompt = prompt;
}
public Integer getMaxTokens() {
return maxTokens;
}
public void setMaxTokens(Integer maxTokens) {
this.maxTokens = maxTokens;
}
}
Spring Boot应用程序已经准备好了，您可以使用Postman或类似的工具测试API。现在我们转到前端。
3 第2部分：使用React构建前端
我们在React中创建一个基本的聊天UI。首先创建一个新的React项目：
npx create-react-app chatbot
然后，进入新项目：
cd chatbot
3.1 步骤4：创建Chat组件
在src文件夹中创建一个名为Chat.js的新文件。使用axios库向我们的Spring Boot API发送请求。如果您没有安装axios，请使用命令npm install axios进行安装。
import React, { useState } from 'react';
import axios from 'axios';
function Chat() {
const [messages, setMessages] = useState([]);
const [input, setInput] = useState('');
const fetchReply = async (message) => {
try {
const { data } = await axios.post('http://localhost:8080/api/chat', message);
setMessages((prevMessages) => [...prevMessages, { text: data.choices[0].text, sender: 'bot' }]);
} catch (error) {
console.error("Error fetching reply:", error);
}
}
const handleSend = () => {
setMessages((prevMessages) => [...prevMessages, { text: input, sender: 'user' }]);
fetchReply(input);
setInput('');
};
return (
<div>
{messages.map((message, index) => (
<p key={index}><strong>{message.sender}:</strong> {message.text}</p>
))}
<input value={input} onChange={e => setInput(e.target.value)} />
<button onClick={handleSend}>Send</button>
</div>
);
}
export default Chat;
3.2 步骤5：在App.js中添加Chat组件
最后，在App.js中包含Chat组件：
import React from 'react';
import './App.css';
import Chat from './Chat';
function App() {
return (
<div className="App">
<Chat />
</div>
);
}
export default App;
到这里已经使用React、Spring Boot和OpenAI的ChatGPT-3.5 Turbo创建了一个聊天应用程序。使用命令npm start运行React应用程序，并在浏览器中导航到http://localhost:3000,输入消息，按发送按钮，然后观看您的聊天机器人响应。
这只是一个简单的例子，不能处理各种高级方面，例如会话管理、错误处理和实时通信。但是这可以作为使用React、Spring Boot和OpenAI构建更复杂应用程序的一个很好的起点。
推荐书单
《精通Spring Boot 2.0》
本书详细阐述了与Spring Boot 2.0相关的基本解决方案，主要包括定制auto-configuration、Spring CLI和Actuator、Spring Cloud和配置操作、Spring Cloud Netflix和Service Discovery、构建Spring Boot RESTful微服务、利用Netflix Zuul 创建API网关、利用Feign客户端简化HTTP API、构建事件驱动和异步响应式系统、利用Hystrix和Turbine构建弹性系统、测试Spring Boot应用程序、微服务的容器化、API管理器、云部署（AWS）、生产服务监视和z佳实践等内容。此外，本书还提供了相应的示例、代码，以帮助读者进一步理解相关方案的实现过程。
本书适合作为高等院校计算机及相关专业的教材和教学参考书，也可作为相关开发人员的自学教材和参考手册。
购买链接：https://item.jd.com/12639616.html
精彩回顾
长按关注《Java学研大本营》 长按访问【IT今日热榜】，发现每日技术热点