Java调用大模型 - Spring AI 初体验

Spring AI：为Java开发者提供高效的大模型应用框架

当前Java调用大模型时面临缺乏高效AI应用框架的问题。Spring作为资深的Java应用框架提供商，通过推出Spring AI来解决这一挑战。它借鉴了LangChain的核心理念，并结合了Java面向对象编程的优势，提供统一接口标准、支持随时替换不同的大模型实现（如OpenAI、阿里云等），并由专门团队持续维护。这使得开发者能够更便捷地在项目中集成和切换各种大模型服务，极大简化了开发流程，同时确保了代码的可移植性和灵活性。

Spring AI Alibaba的功能与优势

当大模型在国内应用时，主要面临的挑战是如何在保证内容安全可控的前提下，还能满足业务对智能性的需求。Spring AI Alibaba 是应对这一挑战的理想选择，因为它不仅拥有强大的内容安全保障能力，还集成了阿里云的最佳实践和Qwen-2.5模型。Qwen-2.5 在 OpenCompass 评选中被评为开源模型中的第一名，这进一步证明了其卓越的性能。

Spring AI Alibaba 是 Spring AI 框架的一个本地化实现，专为与阿里云的通义大模型对接而设计。它支持多种AI能力，包括对话、文本生成图像、语音合成等，并提供诸如OutputParser、Prompt Template等实用功能来简化开发流程。通过使用Spring AI Alibaba，开发者可以轻松地将这些高级AI功能整合进自己的项目中，同时利用Spring框架的优势（如模块化设计）提高代码的可维护性和移植性。此外，由于其统一且简洁的API设计，使得切换不同AI供应商变得非常方便，极大降低了技术迁移成本。

基于SpringBoot集成Spring AI Alibaba构建对话模型及支持prompt的流返回接口

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

1. 环境准备

• JDK版本：确保你的开发环境中的JDK版本在jdk17（含）以上。

• Spring Boot版本：确保使用的Spring Boot版本在3.3.x及以上。

2. 获取API Key

你需要从阿里云申请通义千问的API Key。按照以下步骤操作：

• 打开阿里云百炼页面 -> 登录您的阿里云账号 -> 选择开通"百炼大模型推理"服务，然后等待开通成功的短信 -> 开通成功后，登录阿里云百炼页面，点击右上角小人图标-> API-KEY -> 点击【创建新的API-KEY】生成API-KEY。请记录这个key，后面会用到。

接着配置API KEY:

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

将${REPLACE-WITH-VALID-API-KEY}替换为你刚才生成的API Key。

3. 添加仓库和依赖

由于spring-ai-alibaba-starter目前还在Milestone阶段，你需要添加Spring自己的仓库以及snapshot仓库到你的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文件里添加必要的依赖项：

<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. 配置API Key

在项目的application.properties或application.yml文件中添加以下配置以设置API Key：

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

5. 编写Controller代码

最后一步是编写处理GET请求并支持跨域访问的控制器类。该控制器类将利用ChatClient实例与通义大模型进行交互，并返回基于Flux的数据流。

@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("/steamChat")
    public Flux<String> steamChat(@RequestParam String input) {
        PromptTemplate promptTemplate = new PromptTemplate(resource);
        Prompt prompt = promptTemplate.create(Map.of("input", input));
        return chatClient.prompt(prompt).stream().content();
    }
}

在这个例子中，我们使用了@CrossOrigin(origins = "*")注解来允许所有来源的跨域请求。如果你只想允许特定来源，则可以指定具体的URL而非*。

同时，我们通过构造函数注入了ChatClient实例，并且使用了一个Prompt模板来格式化输入的内容。最后，调用chatClient.prompt()方法发送请求给AI模型，并返回一个Flux对象作为响应内容。

解释

上述步骤详细介绍了如何基于Spring Boot集成Spring AI Alibaba框架，从而实现一个简单的聊天机器人应用。整个过程涉及到了环境搭建、获取API Key、添加必要的依赖、配置API Key以及编写实际的业务逻辑。通过这种方式，我们可以非常方便地接入阿里云提供的通义大模型服务，为应用程序添加智能对话功能。

创建React前端项目

构建前端

在构建一个基于React的支持流式数据输出的前端项目时，我们首先需要创建一个新的React应用，该应用需要能够发送请求至后端接口 http://localhost:8080/ai/steamChat?input=... 并处理返回的流式字符串数据。

创建并配置React应用

首先，请确保您的开发环境中已安装Node.js及npm。接下来，在命令行中执行以下步骤来创建新的React应用并进入其目录：

npx create-react-app frontend
cd frontend
npm install

上述命令将会自动为您生成一个基本的React应用框架。

修改基础文件

对于本例而言，无需对public/index.html或src/index.js进行修改，因为它们默认配置已经足够满足需求。这两个文件的主要作用分别是定义HTML文档结构以及渲染React组件树到页面上。

开发聊天组件

核心功能由ChatComponent实现，它负责收集用户输入、发送请求给后端API，并实时展示从服务器接收到的消息流。请按照如下所示编写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://localhost:8080/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;
      let fullMessage = '';

      while (!done) {
        const { value, done: readerDone } = await reader.read();
        done = readerDone;
        const chunk = decoder.decode(value, { stream: true });
        fullMessage += chunk;
        
        // 每次接收到新数据块时更新界面
        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;

此组件包含了一个输入框用于接收用户输入、两个按钮（分别用于提交信息和清除历史记录），以及一个显示区用来展示与服务器交互过程中产生的所有消息。

连接主应用组件

为了让ChatComponent成为应用程序的一部分，你需要稍微调整一下src/App.js:

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

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

  );
}

export default App;

这样就完成了所有必要的代码编写工作。

启动并测试项目

最后一步是运行你的React应用，可以通过下面这条命令启动开发服务器：

npm start

打开浏览器访问http://localhost:3000即可看到应用界面。试着输入一些文字并通过点击"Send"按钮发送给后端，如果一切设置正确，你应该能在屏幕上看到逐字显示的回复消息。

通过以上步骤，您已经成功地使用React建立了一个简单的支持流式输出的前端应用。请注意确保后端服务允许来自前端应用所在域的跨源资源共享(CORS)，否则可能会遇到网络请求被拦截的问题。