本文旨在帮助开发者快速掌握并应用 Spring AI Alibaba,提升基于 Java 的大模型应用开发效率和安全性。
当前Java调用大模型时,往往缺乏一个高效且统一的应用框架,Spring作为知名的Java应用框架提供商,推出了Spring AI来解决这个问题。它借鉴了langchain的一些核心理念,并结合了Java面向对象编程的优势。Spring AI的核心优势在于提供了统一的接口标准,开发者只需编写一次代码就能轻松切换不同的AI服务提供者,如OpenAI、阿里云等。此外,Spring AI还支持流式输出兼容性及自动POJO映射等功能,极大简化了开发流程。并且由于有专门团队维护,确保了长期稳定性和安全性。这种设计让基于Java的大模型应用开发变得更加便捷和高效。
当大模型在国内应用时,面临的主要挑战是在确保内容安全的同时,满足业务需求的智能化水平。Spring AI Alibaba作为这一背景下的一种理想选择,提供了强大的内容安全保障,并且基于Qwen-2.5模型,该模型在OpenCompass评估中被评为开源领域中的佼佼者。Spring AI Alibaba是将阿里云最佳实践与Spring AI框架本地化结合的结果,它不仅简化了开发者对接不同AI服务的过程,而且通过统一接口标准使得迁移和适配变得异常简单。其核心优势在于支持多种生成式任务(如对话、文生图等)、兼容Flux流处理机制以及提供诸如Prompt Template、OutputParser等功能,极大提升了开发效率与灵活性。此外,Spring AI Alibaba还具备调用外部数据的能力,允许用户根据实际需要定制化扩展AI功能,为构建更加智能的应用提供了坚实的基础。
Spring AI Alibaba 实战:后端构建
为了基于Spring Boot集成Spring AI Alibaba并完成一个简单的对话模型,构建一个支持prompt的流返回接口的项目,并确保GET接口支持CORS跨域,我们可以遵循以下步骤。本回答将详细指导如何配置和编写代码以达成这一目标。
由于Spring AI当前版本还未提交到Maven正式仓库,因此需要添加额外的仓库来访问这些资源:
<repositories>
<repository>
<id>sonatype-snapshotsid>
<url>https://oss.sonatype.org/content/repositories/snapshotsurl>
<snapshots>
<enabled>trueenabled>
snapshots>
repository>
<repository>
<id>spring-milestonesid>
<name>Spring Milestonesname>
<url>https://repo.spring.io/milestoneurl>
<snapshots>
<enabled>falseenabled>
snapshots>
repository>
<repository>
<id>spring-snapshotsid>
<name>Spring Snapshotsname>
<url>https://repo.spring.io/snapshoturl>
<releases>
<enabled>falseenabled>
releases>
repository>
repositories>
接着,在pom.xml中添加对spring-ai-alibaba-starter及Spring Boot parent项目的依赖:<parent>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-parentartifactId>
<version>3.3.4version>
<relativePath/>
parent>
<dependencies>
<dependency>
<groupId>com.alibaba.cloud.aigroupId>
<artifactId>spring-ai-alibaba-starterartifactId>
<version>1.0.0-M2.1version>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-webfluxartifactId>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-data-jpaartifactId>
dependency>
dependencies>
这里特别注意加入了spring-boot-starter-webflux,因为它对于处理响应式流(Flux)至关重要。
4. 配置application.properties
src/main/resources/application.properties文件中加入如下配置:
spring.ai.dashscope.api-key=${AI_DASHSCOPE_API_KEY}
创建一个新的控制器类ChatController.java,实现带有CORS支持的聊天接口,该接口接受输入参数并通过ChatClient发送请求给AI模型,同时利用PromptTemplate提供更丰富的交互体验。此外,此控制器还将使用WebFlux框架提供的功能来返回响应式类型Flux。
import org.springframework.web.bind.annotation.*;
import org.springframework.web.reactive.function.server.ServerResponse;
import reactor.core.publisher.Flux;
@RestController
@RequestMapping("/ai")
@CrossOrigin(origins = "*")
public class ChatController {
private final ChatClient chatClient;
@Value("classpath:your-prompt-template.st")
Resource promptTemplateResource;
public ChatController(ChatClient.Builder builder) {
this.chatClient = builder.build();
}
@GetMapping("/steamChat")
public Flux steamChat(@RequestParam String input) {
PromptTemplate promptTemplate = new PromptTemplate(promptTemplateResource);
Prompt prompt = promptTemplate.create(Map.of("input", input));
return chatClient.prompt(prompt).stream().content();
}
}
请确保your-prompt-template.st是一个位于src/main/resources/下的模板文件,用于定义与AI交互时使用的具体提示文本格式,比如:通过上述步骤,你就成功地基于Spring Boot集成了Spring AI Alibaba,并实现了满足题目要求的功能。这个过程涵盖了从准备环境到最终编码的所有关键点,包括了对外部库的支持、特定功能的启用以及REST API的设计等方面。
基于我了解的一些信息,我们将采用React框架来创建一个简单的聊天应用。该应用会通过HTTP请求与后端交互,并支持从后端接收流式数据(flux)。
首先,确保你的机器上已安装了Node.js和npm或yarn。然后执行以下命令以创建一个新的React应用:
npx create-react-app frontend
cd frontend
npm install
这将创建一个名为frontend的基础React项目,并自动安装运行所需的所有依赖项。
根据需求调整基础文件内容。这里主要关注的是HTML模板、主入口文件以及核心组件。
保持默认即可,此文件定义了网页的基本结构。
无需修改,默认配置足够用于当前示例。
此文件负责渲染根组件。我们将导入并显示自定义的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';
const ChatComponent = () => {
const [input, setInput] = useState('');
const [messages, setMessages] = useState('');
const handleInputChange = (event) => {
setInput(event.target.value);
};
const handleSendMessage = async () => {
if (!input.trim()) return;
try {
const response = await fetch(`http://localhost:8080/ai/steamChat?input=${encodeURIComponent(input)}`, { method: 'GET' });
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;
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('Error fetching data:', error);
} finally {
setInput('');
}
};
const handleClearMessages = () => {
setMessages('');
};
return (
<div>
<input type="text" value={input} onChange={handleInputChange} placeholder="Enter your message" />
<button onClick={handleSendMessage}>Sendbutton>
<button onClick={handleClearMessages}>Clearbutton>
<div>
<h3>Messages:h3>
<pre>{messages}pre>
div>
div>
);
};
export default ChatComponent;
上述代码中,我们利用fetchAPI向指定URL发起GET请求,并使用ReadableStream读取服务器返回的数据流。每次接收到新的数据块时,都会更新页面上的消息列表。此外,还包括了一个清空消息记录的功能。
完成以上步骤后,就可以启动前端服务查看效果了:
这会在本地启动开发服务器,默认访问地址为http://localhost:3000。打开浏览器进入该地址,你就能看到一个可以发送消息并实时接收回复的简单聊天界面了。注意: