spring ai 教学 - 流式(stream)返回结果，基于springboot FLUX和国产大模型

本问主要介绍了如何能够在最短的代码里面实现能够直接与前端接驳的Flux流返回接口。

Flux流返回可以适应大部分市面上主流的LLM前端框架的需求。

例子使用 spring ai alibaba + 通义千问Qwen api实现， qwen有100万免费Token额度，可以快速实现需求。同时，因为qwen 也是个开源的模型，我们可以自己搭建模型来实现免费使用

Spring AI 介绍 ：为Java开发者提供强大的AI应用框架

当前，在Java调用大模型时，开发者面临着缺乏优质AI应用框架的问题。Spring，作为一家资深的Java应用框架提供商，旨在解决这一难题。它借鉴了langchain的核心理念，并结合了Java面向对象编程的优势，提出了Spring AI。这种方式具有显著的优势，如统一接口设计使得代码可以轻松切换不同AI服务提供者，无需大量重写；并且，得益于专业的维护团队，确保了框架的稳定性和安全性。本次样例将以Spring AI Alibaba接入阿里云通义大模型为例进行展示，但请记住，利用Spring AI的强大兼容性，您同样能够便捷地迁移到其他所需的大模型实现上。

阿里巴巴云通义千问Qwen：超越Llama 3 70B的卓越语言模型

通义千问Qwen是阿里巴巴云推出的一种强大的语言模型，在多个权威评测中表现出色。在MMLU、TheoremQA和GPQA等基准测评中，它超越了Llama 3 70B，展示了卓越的性能。此外，通义千问Qwen还在Hugging Face开源大模型排行榜Open LLM Leaderboard上荣登榜首，进一步证明了其领先的技术实力。

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

Spring AI alibaba介绍

Spring AI Alibaba 是 Spring AI 的一个实现，专注于整合阿里云的AI能力。它与Spring Cloud Alibaba一样，将阿里巴巴的最佳实践融入到了Spring生态系统中，为开发者提供了一套全面且易用的工具集来构建AI应用。作为国内最好的Spring AI实现之一，Spring AI Alibaba 标准化了对阿里云通义大模型的接入方式，极大简化了开发流程。Spring AI Alibaba 有很多不同的功能和能力，比如模型调用、Prompt模板、RAG（Retrieval-Augmented Generation）、文生图及文字识别等。本文将以 Prompt 模板和模型调用两个能力为例，展示如何接入 Spring AI Alibaba 来快速增强您的项目AI功能。

基于Spring Boot整合Spring AI Alibaba

为了基于Spring Boot集成Spring AI Alibaba并完成一个简单的对话模型，构建支持prompt的流返回接口，我们需要按照以下步骤进行：

1. 环境准备

确保你的开发环境满足如下要求：

• JDK版本在JDK17（含）以上。

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

2. 获取API Key

前往阿里云百炼页面，登录您的阿里云账号，并开通“百炼大模型推理”服务。成功开通后，创建一个新的API Key，并妥善保存以备后续使用。

配置API Key环境变量或直接在application.properties中设置：

spring.ai.dashscope.api-key=这里替换为您申请到的API Key

3. 添加Maven仓库与依赖

由于spring-ai-alibaba-starter还未提交至Maven中央仓库，你需要添加Spring官方仓库及快照仓库到你的pom.xml文件中：

<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>

同时，在pom.xml中加入spring-ai-alibaba-starter以及Spring Boot父项目的依赖：

<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-M2</version>

    </dependency>

    ...其他依赖...
</dependencies>

4. 编写Controller类

接下来，我们来实现一个REST控制器，该控制器将通过GET请求接受输入，并返回Flux形式的结果，同时也支持CORS跨域访问。

首先定义ChatController类：

import org.springframework.web.bind.annotation.*;
import reactor.core.publisher.Flux;
import com.alibaba.cloud.ai.client.ChatClient;

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

    private final ChatClient chatClient;

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

    @GetMapping("/steamChat")
    public Flux<String> chatSteam(@RequestParam String input) {
        return chatClient.prompt().user(input).stream().content();
    }
}

5. 运行项目

启动你的Spring Boot应用程序。现在你可以通过访问http://localhost:8080/ai/steamChat?input=你好这样的URL来测试你的聊天机器人了。它将以流的形式逐个字符地返回AI的回答。

此示例展示了如何利用Spring AI Alibaba提供的ChatClient和prompt功能快速搭建一个基本的文字聊天应用。根据实际需要，你还可以进一步自定义提示词模板、调整生成参数等，以丰富应用的功能。

 分步打造React聊天应用

构建前端

根据我了解的信息中提供的步骤详细介绍如何创建这样一个前端应用。

1. 初始化React项目

首先，在本地机器上初始化一个新的React应用。打开命令行工具，运行如下命令：

npx create-react-app frontend
cd frontend
npm install

这组命令会创建一个名为frontend的新React应用，并安装所有必要的依赖包。

2. 修改基础HTML文件

找到public/index.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>

3. 配置入口JS文件

在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')
);

4. 创建主应用组件

于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;

5. 实现聊天组件

接下来是关键部分——在src/components/ChatComponent.js里实现聊天界面及其背后的逻辑。这段代码包含了发送消息、读取流式响应以及展示对话的功能：

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 {
      const response = await fetch(`http://your-backend-url/ai/steamChat?input=${input}`);
      if (!response.ok) throw new Error('Network response was not ok');
      
      const reader = response.body.getReader();
      const decoder = new TextDecoder('utf-8');
      let done = false, fullMessage = '';

      while (!done) {
        const { value, done: isDone } = await reader.read();
        done = isDone;
        fullMessage += decoder.decode(value, { stream: true });
        setMessages(prev => prev + decoder.decode(value, { stream: true }));
      }

      setMessages(prev => prev + '\n\n=============================\n\n');
    } catch (error) {
      console.error('Error:', 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>

      <h3>Messages:</h3>

      <pre>{messages}</pre>

    </div>

  );
}

export default ChatComponent;

请替换http://your-backend-url/为实际后端服务的URL地址。

6. 运行你的React应用

完成上述步骤后，可以使用以下命令启动你的React开发服务器，查看结果：

npm start

这个过程创建了一个简单的聊天应用程序，它可以向指定的后端API发送请求，并实时显示接收到的数据流。注意，为了使本方案工作，后端需要支持CORS跨域资源共享策略。如果遇到任何问题，请检查浏览器控制台输出以获取更多调试信息。

如何调整Spring AI框架以适配Llama模型

要切换Spring AI Alibaba 从通义到其他模型，比如Llama模型，主要涉及到修改配置。根据我了解的信息中的内容，我们知道Spring AI的核心价值是“写一次代码，支持所有模型”。因此，要切换不同的模型实现，只需要调整相关的配置即可。

依据我了解的信息提供的信息，以下是具体可执行的步骤来实现从阿里云通义模型到Llama模型的切换：

• • 在application.properties 或 application.yml 文件中更改与AI模型相关的配置项。对于Spring AI Alibaba来说，这通常意味着更新类似于spring.ai.dashscope.model = llama 这样的设置来指定使用Llama模型。

• • 如果之前配置了特定于通义模型的服务端点或其他参数，也需相应地更改为适用于Llama模型的值。