快速体验Spring AI_基于Spring AI Alibaba

Spring AI：为Java引入高效易用的人工智能应用框架

在过去，Java 缺乏一个高效且易于使用的 AI 应用框架。Spring AI 的出现填补了这一空白。Spring AI 是专为 AI 工程设计的应用框架，它将 Spring 生态系统中的设计原则，例如可移植性和模块化设计，引入到 AI 领域，并鼓励使用 POJOs 作为构建应用程序的基础。其核心优势在于提供了一套统一的接口，使得开发者能够轻松切换不同的 AI 提供者（如 OpenAI、Azure 和阿里云等），仅需更改配置即可实现无缝迁移。此外，由于 Spring AI 与现有的 Spring 生态及 Java 的面向对象编程范式完美兼容，这极大地简化了集成过程，降低了学习和开发成本，让开发者可以更加专注于业务逻辑本身而不是底层的技术细节。通过这种方式，Spring AI 不仅为开发者提供了强大的工具支持，还显著提升了开发效率和灵活性。

Spring AI的核心功能介绍

能力名字：模型（Model）

一句话说明：Spring AI 提供了一个统一的接口来调用不同的AI模型，使得开发者能够方便地切换不同的AI服务提供者。

输入输出举例：输入为用户查询或请求，输出可以是文本、图像、语音等不同形式。例如，通过对话模型输入问题 "明天天气如何？"，输出可能是 "明天天气晴朗，气温在15到20度之间"。

能力名字：提示（Prompt）

一句话说明：利用 Prompt 类作为消息容器与AI模型进行复杂的交互。

输入输出举例：通过 ChatClient 的 call() 方法使用一个包含多条消息的 Prompt 实例作为输入，每条消息扮演特定角色如用户查询或背景信息，最终返回 ChatResponse 作为输出，该响应包含了 AI 生成的内容。

能力名字：提示词模板（Prompt Template）

一句话说明：允许开发者创建可重用的提示模板，并根据具体场景动态填充参数。

输入输出举例：定义了一个笑话模板 "Tell me a {adjective} joke about {topic}" 并通过传入具体的形容词和主题，如 {adjective: "funny", topic: "cows"} 来生成具体的笑话提示，从而得到相关的笑话作为输出。

能力名字：嵌入（Embedding）

一句话说明：将文本转换成向量表示，以便于进行相似性比较或其他基于向量的操作。

输入输出举例：给定一段文本描述 "春天花开烂漫"，输出是一个高维向量，代表这段文本在语义空间中的位置，可用于搜索相似文本或进行分类任务。

能力名字：结构化输出（Structured Output）

一句话说明：自动将非结构化的AI输出映射到预定义的数据结构中。

输入输出举例：从AI返回的一段关于某个产品的评论文字，经过解析后被自动转化为包含评价星级、优缺点分析等字段的JSON对象。

能力名字：检索增强生成（RAG）

一句话说明：结合检索系统与生成模型，提高对私有数据源的理解和回复质量。

输入输出举例：针对查询 "公司最新财报中提到的营收增长情况"，首先从企业文档库检索相关部分，然后基于检索结果生成详细的回答，输出是对该问题的具体解答。

能力名字：函数调用（Function Calling）

一句话说明：让AI模型能够在需要时调用由开发者定义的功能，如执行数学计算、查询数据库等。

输入输出举例：当询问 "订单号12345的状态是什么？" 时，AI识别出这是一个状态查询请求，随后调用预设的消息状态查询函数并返回结果 "订单号12345的状态是：已发货"。

能力名字：向量存储

一句话说明：支持存储和检索文本的向量化表示，以实现高效的信息查找和匹配。

输入输出举例：上传一份技术文档至向量数据库，之后可以通过关键词或相关概念快速定位到该文档的具体章节内容。

Spring AI与阿里云集成简介

Spring AI Alibaba是Spring AI针对阿里云服务的一个实现，旨在简化开发者利用阿里云AI能力（包括国产大模型如通义千问）构建应用的过程。其核心优势在于提供了一套标准化接口，让开发者能够轻松地在不同AI服务提供商间切换，仅需更改配置而无需重写代码。此外，通过与阿里云百炼模型服务深度集成，支持对话、文生图等多种生成式任务，并提供了Prompt模板等高级功能，极大减少了对接多源异构AI服务的工作量，加速了基于AI的应用开发过程。

使用Spring AI Alibaba构建聊天后端API示例

为了使用Spring AI Alibaba来构建一个基于Prompt和流式返回的聊天后端API，你需要完成以下步骤。我们将根据给定的知识点一步步进行。

1. 确保开发环境符合要求

• JDK版本：至少为JDK 17。

• Spring Boot版本：至少为3.3.x。

2. 获取阿里云通义千问的API Key

按照我了解的信息中的指引，在阿里云百炼页面上申请API Key，并确保正确配置环境变量AI_DASHSCOPE_API_KEY。

3. 配置项目以引入Spring AI Alibaba依赖

首先，需要在项目的pom.xml文件中添加必要的仓库与依赖项。这包括了Spring的里程碑（milestone）仓库和快照（snapshot）仓库，以及具体的spring-ai-alibaba-starter依赖。

<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>
    <!-- Spring Boot parent -->
    <parent>
        <groupId>org.springframework.boot</groupId>

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

        <version>3.3.4</version>

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

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

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

        <version>1.0.0-M2</version>

    </dependency>

    <!-- 其他必要依赖 -->
</dependencies>

4. 设置API Key及其它配置

在你的application.properties或application.yml中设置之前获得的API Key：

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

5. 创建控制器并实现流式聊天功能

现在，我们定义一个REST控制器，它将接收用户输入并通过流式方式返回AI生成的回答。这里使用了Prompt模板来格式化请求。

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

    private final ChatClient chatClient;
    @Value("classpath:correct-and-expand.st")
    Resource resource;

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

    @GetMapping(value = "/chatSteam", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
    public Flux<String> chatSteam(@RequestParam String input) {
        PromptTemplate promptTemplate = new PromptTemplate(resource);
        Prompt prompt = promptTemplate.create(Map.of("input", input));
        return chatClient.prompt(prompt).stream().content();
    }
}

其中correct-and-expand.st是一个位于类路径下的提示模板文件，内容类似于：

User: {input}
Assistant:

解释

通过上述步骤，你已经创建了一个简单的聊天应用后端，它能够接收用户输入、构造Prompt并发送至阿里云通义千问模型，最后以流式文本的形式返回结果。这种方式非常适合用于需要即时反馈的应用场景，如实时聊天机器人等。注意这里的produces = MediaType.TEXT_EVENT_STREAM_VALUE指定了响应的内容类型为SSE (Server-Sent Events)，适合于客户端订阅服务器主动推送的数据流。

基于Spring AI Alibaba创建支持流输出的React聊天前端

基于Spring AI Alibaba生成做聊天前端例子，特别是要构建一个支持流输出的React前端项目，并与后端接口http://...../ai/chatSteam?input=...交互，返回类型为Flux<String>。根据提供的我了解的信息内容，下面是如何实现这一目标的具体步骤。

1. 创建并配置前端React应用

首先，创建一个新的 React 应用并安装所需的依赖：

npx create-react-app frontend
cd frontend
npm install

接着，在public/index.html中确保有基本的HTML结构以支持React组件渲染：

<!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应用：

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作为主要的应用组件容器：

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

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

  );
}

export default App;

2. 实现聊天功能组件

接下来，在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 {
      // 后端API地址，请替换为实际使用的URL
      const response = await fetch(`http://your-backend-url/ai/chatSteam?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;
        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;

这段代码实现了用户输入、向服务器发送请求（通过GET方法）及处理响应数据流的基本功能。其中，关键在于使用了Fetch API和ReadableStream来逐步读取从服务器返回的数据流，并将其累积显示给用户。

3. 运行前端项目

完成以上步骤后，你可以通过以下命令启动你的前端项目：

npm start

这将使你能够在本地开发环境中查看和测试你的聊天应用程序。

解释：

上述过程首先设置了一个简单的React应用环境，然后在该环境中创建了一个能够与特定后端API通信的聊天组件。这个组件允许用户输入文本并通过HTTP GET请求发送至服务器，同时监听服务器返回的消息流并在页面上实时更新显示。这种方法适用于任何支持CORS且能返回字符串流的后端服务。