完善机器人：让 DeepSeek 生成 API 接口，并在网页上调用

在上一篇文章中，我们使用 DeepSeek 生成了一个 Java 版的 AI 问答机器人，并在终端与 AI 进行交互。但如果想要让更多人使用它，我们需要 搭建一个 API 接口，让网页也能调用 AI 机器人。今天，我们就来学习如何用 AI 生成 Spring Boot API，并在网页中调用它！

一、用 DeepSeek 生成 Spring Boot API

💬 示例指令：

“请用 Java + Spring Boot 编写一个简单的 API，它可以接收用户输入的问题，并调用 DeepSeek API 返回 AI 生成的回答。”

DeepSeek 可能会返回如下代码：

import com.google.gson.Gson;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import okhttp3.*;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.io.IOException;
import java.util.List;@RestController
@RequestMapping("/api/chat")
public class ChatController {private static final String API_URL = "http://localhost:11434/v1/chat/completions";private static final OkHttpClient client = new OkHttpClient();@PostMappingpublic String chat(@org.springframework.web.bind.annotation.RequestBody ChatRequest request) {return getAIResponse(request.getMessage());}// 调用 DeepSeek APIpublic static String getAIResponse(String question) {// 构造 JSON 请求体String json = String.format("{"+ "\"model\": \"deepseek-r1:1.5b\","+ "\"messages\": [{\"role\": \"user\", \"content\": \"%s\"}]"+ "}", question);// 创建请求体RequestBody body = RequestBody.create(json, MediaType.parse("application/json"));// 构建 HTTP 请求Request request = new Request.Builder().url(API_URL).post(body).build();// 发送请求并获取响应try (Response response = client.newCall(request).execute()) {if (response.isSuccessful() && response.body() != null) {Gson gson = new Gson();ChatBotDeepSeek.DeepSeekResponse deepSeekResponse = gson.fromJson(response.body().string(), ChatBotDeepSeek.DeepSeekResponse.class);return deepSeekResponse.getChoices().get(0).getMessage().getContent();}return "AI 机器人出错了，请稍后再试！";} catch (IOException e) {return "AI 机器人出错了，请稍后再试！";}}@Data@NoArgsConstructor@AllArgsConstructorpublic static class DeepSeekResponse {private String id;private String object;private long created;private String model;private String systemFingerprint;private List<ChatBotDeepSeek.DeepSeekResponse.Choice> choices;private ChatBotDeepSeek.DeepSeekResponse.Usage usage;@Data@NoArgsConstructor@AllArgsConstructorpublic static class Choice {private int index;private ChatBotDeepSeek.DeepSeekResponse.Message message;private String finishReason;}@Data@NoArgsConstructor@AllArgsConstructorpublic static class Message {private String role;private String content;}@Data@NoArgsConstructor@AllArgsConstructorpublic static class Usage {private int promptTokens;private int completionTokens;private int totalTokens;}}
}// 数据传输对象（DTO）
class ChatRequest {private String message;public String getMessage() {return message;}public void setMessage(String message) {this.message = message;}
}

🔹 代码解析：
✅ @RestController 创建一个 API 控制器
✅ @RequestMapping("/api/chat") 定义 API 访问路径
✅ @PostMapping 处理 POST 请求，接收用户输入
✅ OkHttp 发送 HTTP 请求到 DeepSeek API ，获取 AI 生成的回答

二、运行 Spring Boot 并测试 API

1️⃣ 添加 Maven 依赖

<!-- 如果你没加 OkHttp -->
<dependency><groupId>com.squareup.okhttp3</groupId><artifactId>okhttp</artifactId><version>4.12.0</version>
</dependency><!-- 如果你没加 web-->
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId>
</dependency>

2️⃣ 运行 Spring Boot 项目：
在 IDE 里启动 ChatController，或者在命令行执行：

mvn spring-boot:run

3️⃣ 测试 API（用 Postman 或 curl）：

curl -X POST http://localhost:8080/api/chat -H "Content-Type: application/json" -d '{"message":"你好，AI"}'

如果一切正常，你会看到 AI 返回的回答。🎉

三、前端调用 API，实现网页对话

我们已经有了后端 API，接下来创建一个 简单的 HTML + JavaScript 网页，让用户能在网页上和 AI 机器人聊天！

1. 让 DeepSeek 生成 HTML 页面

💬 示例指令：

“请用 HTML + JavaScript 创建一个简单的聊天页面，它可以调用后端 API（http://localhost:8080/api/chat），并显示 AI 生成的回答。”

DeepSeek 可能会返回如下代码：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AI 机器人聊天</title><style>body { font-family: Arial, sans-serif; text-align: center; padding: 20px; }#chatBox { width: 80%; height: 300px; border: 1px solid #ddd; overflow-y: auto; padding: 10px; }#userInput { width: 70%; padding: 10px; }button { padding: 10px 20px; margin-left: 10px; }</style>
</head>
<body><h2>AI 机器人聊天</h2><div id="chatBox"></div><input type="text" id="userInput" placeholder="输入你的问题..." /><button onclick="sendMessage()">发送</button><script>async function sendMessage() {let userInput = document.getElementById("userInput").value;if (!userInput) return;let chatBox = document.getElementById("chatBox");chatBox.innerHTML += "<p><strong>你：</strong> " + userInput + "</p>";let response = await fetch("http://localhost:8080/api/chat", {method: "POST",headers: { "Content-Type": "application/json" },body: JSON.stringify({ message: userInput })});let result = await response.text();chatBox.innerHTML += "<p><strong>AI：</strong> " + result + "</p>";document.getElementById("userInput").value = "";}</script></body>
</html>

🔹 代码解析：
✅ input 输入框，用户输入问题
✅ button 发送按钮，触发 sendMessage()
✅ fetch() 发送 API 请求到后端
✅ chatBox 显示 AI 机器人回复