springboot 对接 chatgpt 前后端
时间: 2025-01-03 10:40:33 浏览: 7
### 集成 ChatGPT 到 Spring Boot 项目的实现
为了在 Spring Boot 中集成 ChatGPT 并实现前后端对接,可以按照如下方法构建应用程序:
#### 后端配置
创建一个新的 REST 控制器来处理来自前端的请求并将这些请求转发给 OpenAI 的 API。
```java
@RestController
@RequestMapping("/chat")
public class ChatController {
private final RestTemplate restTemplate;
public ChatController(RestTemplateBuilder restTemplateBuilder) {
this.restTemplate = restTemplateBuilder.build();
}
@PostMapping("/message")
public ResponseEntity<String> sendMessage(@RequestBody Map<String, String> messageBody) {
try {
HttpHeaders headers = new HttpHeaders();
headers.set("Authorization", "Bearer YOUR_API_KEY");
HttpEntity<Map<String, Object>> entity = new HttpEntity<>(buildMessagePayload(messageBody), headers);
ResponseEntity<ChatResponse> response = restTemplate.postForEntity(
"https://api.openai.com/v1/chat/completions",
entity,
ChatResponse.class);
return ResponseEntity.ok(response.getBody().getChoices()[0].getMessage().getContent());
} catch (Exception e) {
return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(e.getMessage());
}
}
private static Map<String, Object> buildMessagePayload(Map<String, String> body) {
List<Map<String, String>> messages = Collections.singletonList(Collections.singletonMap("content", body.get("text")));
return ImmutableMap.of(
"model", "gpt-3.5-turbo",
"messages", messages
);
}
}
```
此控制器接收 POST 请求 `/chat/message` ,其中包含消息体中的 `text` 字段作为输入文本[^1]。该服务会向 OpenAI 发送 HTTP 请求,并返回由 GPT 模型生成的回答字符串。
#### 前端调用
对于前端部分,可以通过 AJAX 或 Fetch API 来发送异步请求到上述定义的服务接口上。这里给出一个简单的 HTML 页面例子,它允许用户通过表单提交问题并显示答案。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chat with GPT</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<h2>Type your question below:</h2>
<form id="questionForm">
<input type="text" name="text" placeholder="Enter text here..." required />
<button type="submit">Submit</button>
</form>
<div id="responseArea"></div>
<script>
document.getElementById('questionForm').addEventListener('submit', function(event){
event.preventDefault();
const formData = new FormData(this);
axios({
method: 'post',
url: '/chat/message',
data: {...Object.fromEntries(formData)}
})
.then(function (response) {
document.getElementById('responseArea').innerText = response.data;
});
});
</script>
</body>
</html>
```
这段代码展示了如何利用 JavaScript 和 Axios 库发起对后端服务器的 POST 请求,并将响应结果显示出来。
阅读全文