一键部署 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️⃣ 克隆项目

bash 复制代码

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：

yaml 复制代码

private static final String DEEP_SEEK_API_KEY = "Bearer sk-xxxxxxxxxxxxxxxx";

3️⃣ 启动后端服务

在项目根目录下执行：

bash 复制代码

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

🧩 五、核心代码示例

后端流式接口（简化版）

java 复制代码

  @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)); // 控制节奏

    }

前端请求逻辑

js 复制代码

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、改进、再创作 ❤️！