Spring AI Alibaba 是什么
Spring AI Alibaba是基于Spring Boot + Spring AI 构建的AI应用框架，整合了阿里的一系列最佳实践，比如通义大模型，内容安全，实时推送等等。
而其核心优势在于提供了标准化接口，使得开发者能够轻松接入不同的AI服务提供者（如阿里云、OpenAI等），仅通过修改配置即可切换不同AI实现。
同时，因为spring ai 支持流式输出，兼容多种机器人模型，并简化了开发过程中对接各类API文档的工作量。借助SpringBoot的强大生态，Spring AI Alibaba让AI能力集成变得更加简便高效。
基于SpringBoot集成Spring AI Alibaba
为了基于Spring Boot集成Spring AI Alibaba，并完成一个简单的对话模型，该模型能够支持Prompt功能，首先纠正对方的中文语法和拼写错误，然后基于用户的问题进行扩展性提问。整个过程将以流的形式返回结果，并且接口支持CORS跨域请求。下面是具体的实现步骤。
1. 环境准备
- JDK版本需要在JDK 17及以上。
- Spring Boot版本建议为3.3.x以上。
- 需要从阿里云申请通义千问API key
2. 添加依赖与配置仓库
在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>
<dependencies>
<dependency>
<groupId>com.alibaba.cloud.ai</groupId>
<artifactId>spring-ai-alibaba-starter</artifactId>
<version>1.0.0-M2</version>
</dependency>
<!-- Other dependencies -->
</dependencies>
同时确保您的项目继承了最新的Spring Boot parent：
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>3.3.4</version>
<relativePath/>
</parent>
3. 配置API Key
将您从阿里云获得的API Key通过环境变量或直接在application.properties中配置（不推荐在生产环境中直接暴露）:
通义目前有免费额度，赶紧薅羊毛。
spring.ai.dashscope.api-key=YOUR_API_KEY4. 创建Controller处理GET请求
创建一个新的Controller来处理来自前端的GET请求，并实现聊天逻辑。这里使用ChatClient和自定义的PromptTemplate来生成符合要求的响应。
@RestController
@RequestMapping("/ai")
@CrossOrigin(origins = "*") // 允许所有来源访问
public class ChatController {
private final ChatClient chatClient;
@Value("classpath:correctAndExpand.st")
Resource resource;
public ChatController(ChatClient.Builder builder) {
this.chatClient = builder.build();
}
@GetMapping("/chatSteam")
public Flux<String> chatStream(@RequestParam String input) {
PromptTemplate promptTemplate = new PromptTemplate(resource);
Prompt prompt = promptTemplate.create(Map.of("input", input));
return chatClient.prompt(prompt)
.stream()
.content();
}
}上述代码中的correctAndExpand.st是一个模板文件，内容类似于：
请先纠正下面句子中的语法或拼写错误，再根据问题做进一步的拓展提问:
{input}此模板用于构造发送给通义千问的Prompt，其中{input}会被实际传入的参数替换。
5. 启动并测试应用
确保您的Spring Boot应用已正确配置后，启动它。接着可以使用任何支持HTTP请求的工具（如Postman、curl等）或者直接在浏览器地址栏输入类似http://localhost:8080/ai/chatSteam?input=hello how are you
这样的URL来测试接口是否正常工作。这样就完成了基于Spring Boot集成Spring AI Alibaba，并实现了指定功能的基本设置。请注意调整安全性和其他生产级配置以适应具体应用场景的需求。
构建前端
构建前端
基于React构建一个简单的支持流输出的前端项目，后端接口URL为http://…../ai/chatSteam?input=…且返回类型是flux<String>。以下是详细的步骤和代码配置说明。
1. 创建新的React应用并安装依赖
首先，确保你的开发环境已准备好Node.js和npm或yarn。然后执行以下命令创建一个新的React应用，并进入该应用目录：
npx create-react-app frontend
cd frontend
npm install2. 修改HTML文件结构
打开public/index.html，修改其内容如下，这将作为应用的基础页面布局：
<!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>
3. 更新入口JavaScript文件
接下来，在src/index.js中设置应用的基本渲染逻辑：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);4. 定义主组件
在src/App.js内定义应用程序的主要结构，并引入聊天组件：
import React from 'react';
import ChatComponent from './components/ChatComponent';
function App() {
return (
<div className="App">
<ChatComponent />
</div>
);
}
export default App;5. 开发聊天组件
在src/components/ChatComponent.js中实现与后端交互的功能。这里使用了React Hooks来管理状态，并通过fetch API与指定的后端API通信以获取实时数据流：
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}`);
if (!response.ok) throw new Error(response.statusText);
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/ai/chatStream部分为你实际使用的后端服务地址。
6. 启动项目
完成以上步骤后，可以在终端运行以下命令启动前端开发服务器：
npm start这样就完成了整个前端项目的搭建。用户可以通过输入框发送消息到后端，而接收到的响应则会实时显示在界面上。此方案利用了浏览器原生Fetch API的能力来处理流式数据，适用于需要即时反馈的应用场景。
扫一扫
134
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
