整体

本文介绍了如何让Java项目通过Spring AI接入DeepSeek国产大模型实现对话功能。
我们借助Spring AI的标准化能力，轻松完成非结构化数据到结构化输出的转换。通过配置API-KEY和依赖，快速集成DeepSeek的能力到项目中。
代码部分展示了如何注入ChatClient并与模型进行交互。

本例子使用spring ai alibaba DeepSeek api 完成，你可以跑通以后换自己的实现。阿里云的 DeepSeek 目前 有100万免费Token额度，可以快速实现需求。
同时，因为 DeepSeek 也是个开源的模型，我们可以自己搭建模型来实现免费使用。

Spring AI 介绍

过去Java开发中缺乏统一的AI应用框架，开发者需要对接各种复杂的API接口。Spring AI是一个专为AI工程设计的Java应用框架。
它将Spring生态的设计原则引入AI领域，提供了标准化的解决方案。一套统一的接口让开发者轻松切换不同的AI服务提供者。
与Spring生态完美兼容，开发者无需改变原有开发习惯,同时与Java的面向对象编程无缝衔接，POJO成为核心构建块。
开发者可以专注于业务逻辑，而不用纠结于繁琐的接口适配,Spring AI简化了AI能力的集成，提升了开发效率和代码可维护性。
通过流式输出支持，还能轻松适配基于流的机器人模型。
这种设计大幅减少了迁移和开发的工作量，方便又高效。

Spring AI alibaba介绍

Spring AI alibaba 是一个基于 Spring AI 的实现，专注于大模型的接入与应用开发。
它依托阿里云百炼平台，提供通义千问等大模型的能力支持。
开发者可以通过简单的配置切换不同的大模型，无需重复编写代码,Spring AI alibaba 支持对话、文生图、文生语音等多种生成式任务。
它还提供了结构化输出和 Prompt 模板等实用功能，方便开发者快速构建应用。
通过标准化接口，Spring AI alibaba 简化了多平台大模型的集成复杂度。
无论是云端还是本地部署，Spring AI alibaba 都能灵活适配。
让开发者专注于业务逻辑，而不用纠结于底层大模型的具体实现细节。

deepseek介绍

DeepSeek-R1是由幻方量化旗下深度求索（DeepSeek）研发的一款先进推理模型，专注于提升复杂任务的解决能力，尤其是在数学、代码和自然语言推理等领域表现卓越。该模型采用强化学习技术进行后训练，通过智能训练场动态生成题目并实时验证解题过程，从而显著提升推理性能。值得一提的是，其大规模强化学习方法仅需少量标注数据即可实现性能飞跃，展现了高效的学习能力。

2024年11月，DeepSeek-V3 预览版上线，为用户提供了初步体验的机会。随后在2025年1月，正式版发布，并同步开源模型权重，采用MIT许可协议，进一步推动了开源社区的发展。此外，多个小型模型的开源降低了AI技术的应用门槛，为开发者提供了更多可能性。

DeepSeek-V3不仅在基准测试中表现出色，与OpenAI o1等顶级模型媲美，还在实际应用中取得了显著成果。例如，其相关应用在2025年初登顶苹果中美两国应用商店免费下载榜，并在世界大模型排名Arena中位列全类别第三，在风格控制类中与OpenAI o1并列第一。这一系列成就彰显了DeepSeek-R1的强大实力与广泛影响力。

基于SpringBoot集成Spring AI Alibaba

要基于Spring Boot集成Spring AI Alibaba，完成一个支持流式返回的对话模型接口，需要按照以下步骤操作。以下是详细的配置和代码实现。

1. 环境准备

根据我了解的信息中的说明，首先需要确保开发环境满足以下要求：

• JDK版本：JDK 17及以上。

• Spring Boot版本：3.3.x及以上。

• 阿里云通义千问API Key：需要在阿里云百炼平台申请并开通相关服务。

1.1 申请通义千问API Key

登录阿里云百炼页面，开通“百炼大模型推理”服务，并生成API Key。记录该Key，后续需要在项目中配置。

1.2 配置API Key

在本地环境中设置环境变量：

export AI_DASHSCOPE_API_KEY=${REPLACE-WITH-VALID-API-KEY}

2. 添加依赖

为了使用Spring AI Alibaba的功能，需要添加相关的Maven依赖和仓库配置。

2.1 添加Spring仓库

由于Spring AI M1版本尚未发布到Maven中央仓库，因此需要手动添加Spring的快照和里程碑仓库：

<repositories>
    <repository>
        <id>sonatype-snapshots</id>

        <url>https://oss.sonatype.org/content/repositories/snapshots</url>

        <snapshots>
            <enabled>true</enabled>

        </snapshots>

    </repository>

    <repository>
        <id>spring-milestones</id>

        <name>Spring Milestones</name>

        <url>https://repo.spring.io/milestone</url>

        <snapshots>
            <enabled>false</enabled>

        </snapshots>

    </repository>

    <repository>
        <id>spring-snapshots</id>

        <name>Spring Snapshots</name>

        <url>https://repo.spring.io/snapshot</url>

        <releases>
            <enabled>false</enabled>

        </releases>

    </repository>

</repositories>

2.2 添加Spring AI Alibaba Starter依赖

在pom.xml中添加以下依赖：

<parent>
    <groupId>org.springframework.boot</groupId>

    <artifactId>spring-boot-starter-parent</artifactId>

    <version>3.3.4</version>

    <relativePath/> <!-- lookup parent from repository -->
</parent>

<dependencies>
    <dependency>
        <groupId>com.alibaba.cloud.ai</groupId>

        <artifactId>spring-ai-alibaba-starter</artifactId>

        <version>1.0.0-M3.1</version>

    </dependency>

</dependencies>

3. 配置API Key和模型名称

在application.properties文件中配置API Key和指定的模型名称（deepseek-v3）：

spring.ai.dashscope.api-key=${AI_DASHSCOPE_API_KEY}
spring.ai.dashscope.chat.options.model=deepseek-v3

4. 编写代码

接下来，编写一个支持CORS跨域的流式返回接口。

4.1 创建Controller类

创建一个名为ChatController的类，用于处理HTTP请求并调用ChatClient进行对话交互：

@RestController
@RequestMapping("/ai")
@CrossOrigin(origins = "*") // 支持CORS跨域
public class ChatController {

    private final ChatClient chatClient;

    public ChatController(ChatClient.Builder builder) {
        this.chatClient = builder.build();
    }

    @GetMapping(value = "/steamChat", produces = "text/event-stream")
    public Flux<String> steamChat(@RequestParam String input, HttpServletResponse response) {
        // 设置响应编码为UTF-8，避免乱码问题
        response.setCharacterEncoding("UTF-8");

        // 使用Prompt构建对话请求
        return chatClient.prompt()
                .user(input)
                .options(DashScopeChatOptions.builder()
                        .withModel("deepseek-v3") // 指定模型名称
                        .build())
                .stream() // 流式返回
                .content(); // 获取内容流
    }
}

4.2 配置CORS跨域支持

为了确保接口能够被跨域访问，可以在Spring Boot的配置类中启用全局CORS支持：

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/ai/**") // 匹配所有以/ai开头的路径
                .allowedOrigins("*") // 允许所有来源
                .allowedMethods("GET", "POST") // 允许的HTTP方法
                .allowedHeaders("*"); // 允许所有请求头
    }
}

5. 启动项目

完成上述配置后，启动Spring Boot项目。项目启动后，可以通过以下URL访问流式返回接口：

http://localhost:8080/ai/steamChat?input=你好

6. 功能验证

访问上述URL时，接口会返回一个基于Flux<String>的流式响应，内容是模型根据输入生成的对话结果。例如：

data: 你好，很高兴为你提供帮助！
data: 如果有任何问题，请随时告诉我。

构建前端

要构建一个支持流式数据处理的 React 前端项目，后端接口返回的是 Flux<String> 流式数据，我们需要在前端实现能够逐步接收并展示这些数据的功能。以下是详细的步骤和代码实现。

1. 初始化项目并安装依赖

首先，创建一个新的 React 应用，并进入项目目录：

npx create-react-app frontend
cd frontend
npm install

这将初始化一个基本的 React 项目结构。

---

2. 配置项目文件

public/index.html

这是项目的入口 HTML 文件，定义了页面的基本结构：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chat App</title>

</head>

<body>
  <div id="root"></div>

</body>

</html>

---

src/index.js

这是 React 应用的入口文件，用于渲染根组件 App：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

---

src/App.js

App 组件是应用的主组件，它包含了一个子组件 ChatComponent，用于处理聊天逻辑：

import React from 'react';
import ChatComponent from './components/ChatComponent';

function App() {
  return (
    <div className="App">
      <ChatComponent />
    </div>

  );
}

export default App;

---

src/components/ChatComponent.js

这是核心组件，负责与后端接口交互，处理流式数据并实时更新 UI：

import React, { useState } from 'react';

function ChatComponent() {
  const [input, setInput] = useState('');
  const [messages, setMessages] = useState('');

  // 处理输入框的变化
  const handleInputChange = (event) => {
    setInput(event.target.value);
  };

  // 发送消息并处理流式响应
  const handleSendMessage = async () => {
    try {
      // 调用后端接口，注意 URL 地址和 CORS 配置
      const response = await fetch(`http://localhost:8080/ai/steamChat?input=${input}`);
      
      // 获取流式数据读取器
      const reader = response.body.getReader();
      const decoder = new TextDecoder('utf-8');
      let done = false;

      // 逐块读取流式数据
      while (!done) {
        const { value, done: readerDone } = await reader.read();
        done = readerDone;

        if (value) {
          const chunk = decoder.decode(value, { stream: true });
          setMessages((prevMessages) => prevMessages + chunk); // 拼接消息内容
        }
      }

      // 在每次请求完成后添加分隔符
      setMessages((prevMessages) => prevMessages + '\n\n=============================\n\n');
    } catch (error) {
      console.error('Failed to fetch', error);
    }
  };

  // 清空消息记录
  const handleClearMessages = () => {
    setMessages('');
  };

  return (
    <div>
      <input
        type="text"
        value={input}
        onChange={handleInputChange}
        placeholder="Enter your message"
      />
      <button onClick={handleSendMessage}>Send</button>

      <button onClick={handleClearMessages}>Clear</button>

      <div>
        <h3>Messages:</h3>

        <pre>{messages}</pre>

      </div>

    </div>

  );
}

export default ChatComponent;

---

3. 运行项目

完成上述配置后，可以通过以下命令启动前端项目：

cd frontend
npm start

这将启动开发服务器，默认访问地址为 http://localhost:3000。

---

4. 解释实现细节

1. 流式数据处理：

• • 后端接口返回的是 Flux<String> 流式数据，我们通过 fetch 请求获取响应。

• • 使用 response.body.getReader() 获取流式数据读取器，逐块读取数据。

• • 每次读取到的数据块通过 TextDecoder 解码为字符串，并使用 setMessages 更新状态，实现实时拼接和展示。

1. 跨域问题：

• • 如果后端未配置 CORS（跨域资源共享），前端请求会失败。确保后端允许前端域名的跨域请求。

1. UI 更新：

• • 每次接收到新的数据块时，都会触发 React 的状态更新，从而重新渲染 UI。

• • 在每次请求完成后，自动添加分隔符以区分不同请求的消息。

1. 清空功能：

• • 提供了清空消息记录的功能，方便用户重新开始对话。

---

通过上述步骤，我们成功构建了一个基于 React 的简单前端项目，能够支持流式数据的接收和展示。