一键部署 Deepseek网页聊天系统（基于 Spring Boot + HTML 的本地对话系统）
🔥 全网最轻量的 Deepseek WebChat 项目！
零依赖，零配置，几分钟即可本地启动自己的 AI 聊天界面。
🧠 一、项目介绍
Deepseek WebChat 是一个基于 Spring Boot 后端 + HTML 前端 的简洁 AI 聊天演示项目，
可以与 Deepseek API 进行实时流式对话，支持 Markdown 高亮和代码块渲染。
👉 效果演示：
特点：
✅ 支持流式输出（即打字机式回复）
✅ 支持 Markdown 格式（含代码高亮）
✅ 前后端独立，结构简单易部署
✅ 纯本地运行，不依赖外部服务
🧩 二、技术栈
| 模块 | 技术 |
|---|---|
| 后端 | Spring Boot 3 + WebFlux + Jackson |
| 前端 | 原生 HTML + JS + Markdown-it + Highlight.js |
| 通信方式 | SSE（Server-Sent Events）流式传输 |
| 构建工具 | Maven |
⚙️ 三、快速启动教程
1️⃣ 克隆项目
git clone https://github.com/MTQ851/deepseek-webchat.git
cd deepseek-webchat
⚠️ 如果你在中国大陆地区访问 GitHub 较慢，可以使用镜像或代理。
2️⃣ 修改配置（可选）
打开 src/main/java/com/deepseek/controller/ai/DeepSeekController.java，设置你的 Deepseek API Key：
private static final String DEEP_SEEK_API_KEY = "Bearer sk-xxxxxxxxxxxxxxxx";
3️⃣ 启动后端服务
在项目根目录下执行：
mvn spring-boot:run
启动成功后，控制台会输出：
2025-10-27 16:06:35.139 INFO 48652 --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat started on port(s): 8080 (http) with context path ''
2025-10-27 16:06:35.144 INFO 48652 --- [ main] com.deepseek.DeepSeekApplication : Started DeepSeekApplication in 0.865 seconds (JVM running for 1.183)
2025-10-27 16:06:35.164 INFO 48652 --- [nio-8080-exec-1] o.a.c.c.C.[Tomcat].[localhost].[/] : Initializing Spring DispatcherServlet 'dispatcherServlet'
2025-10-27 16:06:35.164 INFO 48652 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet : Initializing Servlet 'dispatcherServlet'
2025-10-27 16:06:35.166 INFO 48652 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet : Completed initialization in 2 ms
请手动打开浏览器访问 http://localhost:8080/
4️⃣ 打开前端页面
前端页面地址：
http://localhost:8080/
默认访问接口地址为：
http://localhost:8080/api/deepseek/stream
然后输入内容，就能实时看到模型回答啦！
💬 四、项目结构
deepseek-webchat/
├── src/
│ ├── main/
│ │ ├── java/com/deepseek/controller/ai/DeepSeekController.java
│ │ ├── resources/static/index.html
│ │ └── resources/application.yml
├── pom.xml
└── README.md
🧩 五、核心代码示例
后端流式接口（简化版）
@GetMapping(value = "/stream", produces = MediaType.TEXT_EVENT_STREAM_VALUE)public Flux<String> stream(@RequestParam String prompt, HttpServletRequest request) {//todo 历史记录可加上下文联系逻辑自行补充List<Map<String, String>> chatHistory = new LinkedList<>();// 添加用户输入Map<String, String> userInput = new HashMap<>();userInput.put("role", "user");userInput.put("content", prompt);chatHistory.add(userInput);// 组装 OpenAI API 参数Map<String, Object> paramMap = new HashMap<>();paramMap.put("model", "deepseek-chat");paramMap.put("messages", chatHistory);paramMap.put("stream", true);ObjectMapper objectMapper = new ObjectMapper();StringBuilder answerBuffer = new StringBuilder();StringBuilder answerThinkBuffer = new StringBuilder();return webClientByDeepSeek.post().uri("/v1/chat/completions").contentType(MediaType.APPLICATION_JSON).bodyValue(paramMap).retrieve().bodyToFlux(String.class).doOnNext(json -> {// 跳过 [DONE] 标记，避免 JSON 解析错误if ("[DONE]".equals(json)) {return;}// 保持返回内容不变，但提取回答保存try {// 解析 JSON 文本为树形结构JsonNode root = objectMapper.readTree(json);// 提取聊天回答内容（模型输出）String extracted = root.path("choices").get(0).path("delta").path("content").asText("");answerBuffer.append(extracted);// 提取模型推理内容（有些模型返回 reasoning_content）String extractedThink = root.path("choices").get(0).path("delta").path("reasoning_content").asText("");answerThinkBuffer.append(extractedThink);} catch (JsonProcessingException e) {log.error("解析回答失败: {}", json, e);}}).doFinally(signal -> {//todo 可补充保存内容逻辑log.info("模型输出: " + answerBuffer);log.info("模型推理: " + answerThinkBuffer);}).delayElements(Duration.ofMillis(50)); // 控制节奏}
前端请求逻辑
const url = `http://127.0.0.1:8080/api/deepseek/stream?prompt=${encodeURIComponent(prompt)}`;
const response = await fetch(url);
🌈 六、常见问题
❓Q1：API Key 从哪里来？
👉 前往 Deepseek 官网 申请并在配置文件中填入。
📦 七、源码地址
GitHub 开源地址：https://github.com/MTQ851/deepseek-webchat.git
❤️ 八、支持一下
如果本项目对你有帮助：
- ⭐ 给仓库一个 Star！
- 💬 在评论区留言支持！
- 🔁 分享给需要的小伙伴！
✍️ 九、作者寄语
本项目初衷是帮助开发者更快上手 Deepseek API，
并提供一个简单、美观的本地可运行界面。
欢迎 Fork、改进、再创作 ❤️！