🧠 一、項目介紹
Deepseek WebChat 是一個基於 Spring Boot 後端 + HTML 前端 的簡潔 AI 聊天演示項目，
可以與 Deepseek API 進行實時流式對話，支持 Markdown 高亮和代碼塊渲染。
👉 效果演示：
deepseek演示視頻
特點：
✅ 支持流式輸出（即打字機式回覆）
✅ 支持 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、改進、再創作 ❤️！
