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)，否则可能会遇到网络请求被拦截的问题。