10分钟入门Java AI chatgpt ， 使用Spring AI Alibaba + Springboot

Spring AI 介绍

Spring AI是一个基于Spring Boot的AI应用框架，它致力于将Spring生态系统的设计原则引入AI开发中。其核心优势在于提供了一套标准化接口，使得开发者能够轻松对接不同AI服务提供商（如OpenAI、Azure、阿里云等），只需通过修改配置即可实现服务商间的无缝切换。此外，Spring AI直接支持Flux流输出，方便与大多数基于流的机器人模型集成。借助于SpringBoot的强大功能和易用性，Spring AI进一步简化了AI应用程序的构建流程，减少了开发人员在查阅文档和迁移代码时的工作量。通过这种方式，Spring AI不仅增强了应用的可移植性和模块化设计，还显著提升了开发效率。

Spring AI alibaba 介绍

Spring AI Alibaba 是基于 Spring Boot 的应用框架，专为AI工程设计。它通过标准化不同AI提供者的接口（如OpenAI、Azure、阿里云等），让开发者能够轻松切换不同的AI实现而无需大量重写代码。该框架直接兼容Flux流输出，便于集成各种基于流的机器人模型。Spring AI Alibaba特别针对阿里云通义大模型进行了适配，支持包括对话、文生图、文生语音等功能，并提供了Prompt Template和外部数据接入等实用功能。其核心优势在于简化了AI应用开发流程，极大减少了迁移工作量，同时保持了与Spring Boot生态的高度集成性，使得在现有Spring Boot项目中添加AI能力变得简单快捷。

基于SpringBoot集成Spring AI Alibaba

根据提供的我了解的信息，我们将基于Spring Boot构建一个简单的对话模型，并利用Spring AI Alibaba的能力实现对AI的调用。具体来说，我们将完成如下步骤：配置环境、添加必要的依赖项、配置阿里云通义千问API KEY、创建ChatClient实例以及设置支持CORS跨域的流返回接口。以下是详细过程：

1. 环境准备

• JDK版本：确保您的项目使用的是JDK 17或更高版本。

• Spring Boot版本：请保证您的Spring Boot版本为3.3.x或更高。

2. 添加Spring仓库

由于Spring AI Alibaba目前处于早期阶段，需要从特定的Maven仓库获取其依赖库，请将以下内容加入到您的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>

3. 添加依赖项

在pom.xml中引入Spring AI Alibaba Starter和其他必要依赖：

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

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

    <version>1.0.0-M2</version>

  </dependency>

  <!-- Spring Boot Parent -->
  <parent>
    <groupId>org.springframework.boot</groupId>

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

    <version>3.3.4</version>

  </parent>

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

4. 配置阿里云通义千问API KEY

首先，在阿里云申请通义千问的API KEY，按照官方文档指引操作（见参考链接）。接着，在系统环境变量或应用配置文件中设置该KEY:

# application.properties
spring.ai.dashscope.api-key=${YOUR_API_KEY}

5. 创建Controller并注入ChatClient

定义一个REST Controller来处理来自客户端的请求，并通过ChatClient与AI进行交互。注意这里我们启用CORS以允许跨源请求，并且响应类型为Flux<String>以支持流式输出。

@RestController
@RequestMapping("/ai")
@CrossOrigin(origins = "*") // 启用CORS
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("/chatStream")
  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();
  }
}

6. 测试API

启动您的Spring Boot应用后，您可以通过访问http://localhost:8080/ai/chatStream?input=你好这样的URL来测试聊天功能是否正常工作。如果一切配置正确，您应该能看到由AI生成的回答被逐步地发送回客户端。

解释

• 我们通过@CrossOrigin注解启用了CORS支持，这使得不同域名下的Web前端可以直接向本服务发起请求。

• 使用了ChatClient与阿里云通义大模型进行了交互，通过PromptTemplate动态构造提示信息。

• 返回值是Flux<String>类型，适合用于实时流式的文本传输场景，如聊天应用程序中的消息更新。

以上就是基于Spring Boot集成Spring AI Alibaba完成简单对话模型及流式返回接口的具体步骤。

构建前端

构建前端

根据提供的知识，为了构建一个支持流输出的基于React的前端项目，并且与后端接口（URL地址是http://.../ai/chatStream?input=...，返回值类型为flux<String>）进行交互，可以按照以下步骤执行：

1. 创建新的React应用

首先，你需要创建一个新的React应用程序。可以通过运行如下命令来完成这个过程：

npx create-react-app frontend
cd frontend
npm install

2. 修改基本文件结构

接下来，对生成的应用的基本文件进行适当的修改以符合我们的需求。

• public/index.html 文件保持默认即可。

• src/index.js 文件同样保持其原始内容不变。

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

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/chatStream?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;

确保将上述代码中的 http://your-backend-url/ 替换成实际的后端服务地址。

3. 启动项目

完成以上设置后，通过下面的命令启动你的React应用：

npm start

这将启动开发服务器，并在浏览器中打开你的聊天应用页面。

解释

这里我们使用了React的状态管理特性来保存用户输入和从服务器接收到的消息。每当用户点击“Send”按钮时，都会向指定的后端API发送请求，并实时读取响应数据流。这些数据被逐步解码成文本字符串，并追加到当前显示的消息列表中。此外，每次新消息序列完成后，还会添加一行分割线以便于区分不同的对话轮次。这样就实现了基本的流式聊天应用功能。

小结

上面就是用spring ai alibaba 来完成一个最简单的聊天机器人的教程，目前通义千问有免费的token额度，大家可以先用这些额度玩玩AI，我们Javaer也可以玩得好AI