spring ai入门之7：流式stream Flux返回大模型的输出数据

整体说明

本例是一个Java spring ai调用大模型然后用Flux流返回的具体例子，详细可操作，复制就能跑 例子使用 spring ai alibaba + 通义千问Qwen api实现， qwen有100万免费Token额度，可以快速实现需求。同时，因为qwen 也是个开源的模型，我们可以自己搭建模型来实现免费使用

Spring AI 介绍：为Java应用集成大模型提供统一框架

当前在Java中调用大模型时，缺少优秀的AI应用框架。Spring作为老牌的Java应用框架提供商，推出了Spring AI以解决这一问题。Spring AI借鉴了langchain的一些核心理念，并结合了Java面向对象编程的优势，提供了统一接口、随时可替换实现的特点，且由专门团队维护。通过Spring AI Alibaba接入通义大模型为例，开发者可以轻松地将不同大模型供应商（如阿里云）提供的服务集成到自己的应用中。这种方式不仅简化了开发过程，还增强了代码的可移植性和灵活性。一旦熟悉该流程后，开发者也可根据需求切换至其他大模型实现。

Spring AI Alibaba介绍：一个spring ai的国内最佳实践

Spring AI Alibaba 是 Spring AI 的一个具体实现，它继承了 Spring 生态系统的设计原则，如可移植性和模块化设计，并将其应用于AI领域。作为国内最好的Spring AI实现之一，Spring AI Alibaba整合了阿里巴巴的最佳实践，使得开发者能够以更加高效和简洁的方式利用阿里云的AI能力。Spring AI Alibaba提供了一系列强大的功能与能力，包括模型调用、Prompt模板、RAG（检索增强生成）、文生图、图像识别等。这些功能不仅标准化了对不同AI服务提供商接口的支持，还提供了便捷的方式来操作这些高级特性。本文将通过展示如何使用Prompt模板和模型调用来接入Spring AI Alibaba，帮助读者快速上手并理解其强大之处。

Qwen 介绍： 在多项评测中超越Llama 3 70B，登顶Hugging Face开源大模型排行榜

通义千问Qwen在MMLU、TheoremQA、GPQA等基准测评中表现出色，超越了Llama 3 70B，并在Hugging Face开源大模型排行榜Open LLM Leaderboard上荣登榜首。这一成就彰显了其卓越的技术实力和广泛的应用前景，为用户提供更加强大和智能的语言处理能力。

在真人参与评测的arena里面，它不仅在思南平台 上仅次于国际知名的GPT和Claude系列，还在 Hugging Face的视觉模型竞技场 中稳居中国首位。

使用SpringBoot集成Spring AI Alibaba构建流式对话的模型

要基于Spring Boot集成Spring AI Alibaba完成一个简单的对话模型，并构建支持Prompt的流返回接口项目，具体步骤如下：

1. 环境准备

• JDK版本：确保你的开发环境已经安装了JDK 17或更高版本。
• Spring Boot版本：使用Spring Boot 3.3.x版本。

2. 阿里云API Key申请

首先需要在阿里云上申请通义千问的API Key：

• 打开阿里云百炼页面 -> 登录您的阿里云账号。
• 开通“百炼大模型推理”服务。
• 在开通成功后，登录控制台并生成API Key。请妥善保存该Key，之后会用到。

配置环境变量或直接将API Key值添加到application.properties文件中：

spring.ai.dashscope.api-key=${AI_DASHSCOPE_API_KEY}

3. Maven仓库与依赖添加

由于Spring AI Alibaba的相关库目前尚未发布到Maven中央仓库，你需要在项目的pom.xml文件中添加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>

<dependencies>
    <dependency>
        <groupId>com.alibaba.cloud.ai</groupId>
        <artifactId>spring-ai-alibaba-starter</artifactId>
        <version>1.0.0-M3.1</version>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-webflux</artifactId>
    </dependency>
    <!-- 其他可能需要的依赖 -->
</dependencies>

这里特别引入了spring-ai-alibaba-starter以及spring-boot-starter-webflux以支持WebFlux框架下的响应式编程模式。

4. 创建Controller类

创建一个新的Controller类来处理聊天请求，同时开启CORS跨域支持。

@RestController
@RequestMapping("/ai")
@CrossOrigin(origins = "*")
public class ChatController {

    private final ChatClient chatClient;

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

    @GetMapping(value = "/steamChat", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
    public Flux<String> steamChat(@RequestParam String input) {
        return this.chatClient.prompt()
                .user(input)
                .stream()
                .content();
    }
}

• @RestController注解定义了一个RESTful风格的控制器。
• @RequestMapping指定了基础URL路径为/ai。
• @CrossOrigin注解用于允许所有来源的跨域请求。
• @GetMapping映射HTTP GET请求至指定的方法steamChat，此方法接收参数input并通过chatClient发起调用，最后以流形式(Flux<String>)返回内容。

5. 运行应用

确保你已经在本地环境中正确设置了Spring Boot应用程序，并且所有的配置都已按照上述说明完成。然后启动你的Spring Boot应用，访问http://localhost:8080/ai/steamChat?input=你的问题即可测试是否能够正常获取来自AI的响应。

通过以上步骤，你就成功地基于Spring Boot集成了Spring AI Alibaba，并实现了支持Prompt功能的流返回接口。这不仅提供了基本的文字交互能力，还利用了WebFlux技术增强了系统的响应性与效率。

建立前端项目

为了构建一个基于React的简单前端项目，该前端支持从后端接收流式数据（如flux<String>），你可以遵循以下步骤。此过程涵盖了从创建React应用到实现与后端交互的具体细节，包括必要的配置和代码。

1. 创建并初始化React应用

首先需要通过create-react-app工具快速搭建起项目的骨架，并安装所需的依赖包。

npx create-react-app frontend
cd frontend
npm install

2. 修改HTML模板文件

在你的public/index.html中，确保有如下基本结构来承载React应用：

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

3. 设置React入口点

编辑src/index.js以渲染你的主组件App：

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

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

4. 实现聊天组件

接下来，在src/App.js中引入聊天组件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内定义实际处理消息发送及显示逻辑的组件：

import React, { useState } from 'react';

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

  const handleInputChange = (e) => setInput(e.target.value);

  const handleSendMessage = async () => {
    try {
      const res = await fetch(`http://localhost:8080/ai/steamChat?input=${input}`, { method: 'GET' });
      const reader = res.body.getReader();
      const decoder = new TextDecoder('utf-8');
      let done = false;

      while (!done) {
        const { value, done: isDone } = await reader.read();
        done = isDone;
        const chunk = decoder.decode(value, { stream: true });
        setMessages(prev => prev + chunk);
      }
    } catch (err) {
      console.error('Fetch error:', err);
    }
  };

  const clearMessages = () => setMessages('');

  return (
    <div>
      <input type="text" value={input} onChange={handleInputChange} placeholder="Enter your message" />
      <button onClick={handleSendMessage}>Send</button>
      <button onClick={clearMessages}>Clear</button>
      <h3>Messages:</h3>
      <pre>{messages}</pre>
    </div>
  );
};

export default ChatComponent;

上述代码实现了用户输入、向服务器发送请求以及实时显示返回的数据流的功能。

5. 运行项目

最后，启动你的前端开发服务器查看效果：

npm start

这将自动打开浏览器窗口展示你的应用程序。确保后端服务已正确部署并且能够响应来自前端的请求，同时开启了CORS策略允许跨源资源共享。