Spring AI Alibaba：Java开发者的GPT集成新标准
目前，像OpenAI等GPT服务提供商主要提供HTTP接口，这导致大部分Java开发者在接入GPT时缺乏标准化的方法。为解决这一问题，Spring团队推出了Spring AI Alibaba，它作为一套标准化接口，允许Java开发者以统一的方式与不同的GPT服务交互。这样不仅简化了开发流程，也使得切换不同AI服务提供商变得轻松，极大地提升了开发效率和灵活性。此外，通过抽象复杂的底层细节，Spring AI Alibaba还增强了代码的可读性和维护性。
Spring Boot AI框架介绍：Spring AI 接入通义的集成优化
Spring AI Alibaba是基于Spring Boot构建的AI应用框架，专为阿里云通义大模型设计。它利用Spring Boot的便捷性与模块化特性，简化了开发者在集成AI能力时的操作流程。核心优势在于标准化了不同AI提供者（如OpenAI、Azure、阿里云等）的接口实现，使得一次编码即可通过更改配置轻松切换不同的AI服务提供商。此外，它支持对话、文生图、文生语音等多种生成式AI功能，并提供了Prompt模板、OutputParser等功能，极大减少了对接不同AI服务的工作量，让Spring Boot项目能够快速接入先进的AI技术。
Spring Boot下集成Spring AI Alibaba的实战指南：构建对话模型与Prompt流接口
为了基于Spring Boot集成Spring AI Alibaba并完成一个简单的对话模型，构建一个支持Prompt的流返回接口的项目，我们将按照以下步骤进行操作。这些步骤包括环境准备、配置依赖、申请API Key、编写后端代码以及处理跨域请求。
1. 环境准备
- JDK版本：确保您的开发环境使用的是JDK 17或更高版本。
- Spring Boot版本：本示例采用的是Spring Boot 3.3.x版本，请确认您的项目也处于相同或相近的版本。
2. 配置Maven仓库和添加依赖
由于Spring AI Alibaba尚未正式发布到Maven中心仓库，因此我们需要手动指定包含其快照版的仓库地址，并将相关的starter依赖添加至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>
<!-- Spring Boot Parent -->
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>3.3.4</version>
<relativePath/>
</parent>
<!-- Spring AI Alibaba Starter -->
<dependency>
<groupId>com.alibaba.cloud.ai</groupId>
<artifactId>spring-ai-alibaba-starter</artifactId>
<version>1.0.0-M2</version>
</dependency>
<!-- Other dependencies as needed... -->
</dependencies>
3. 申请通义千问API Key
请访问阿里云百炼页面，登录账号并按指示开通“百炼大模型推理”服务。完成后，在管理界面创建一个新的API Key，并保存以备后续配置时使用。
4. 配置API Key
在项目的application.properties文件中设置通义千问的API Key。
spring.ai.dashscope.api-key=YOUR_API_KEY_HERE或者通过环境变量来设置：
export AI_DASHSCOPE_API_KEY=YOUR_API_KEY_HERE5. 编写Controller层代码
接下来，我们定义一个Controller类，用于接收HTTP GET请求，利用ChatClient与AI模型交互，并返回Flux类型的结果。
@RestController
@RequestMapping("/ai")
@CrossOrigin(origins = "*") // 支持所有来源的跨域请求
public class SteamChatController {
private final ChatClient chatClient;
public SteamChatController(ChatClient.Builder builder) {
this.chatClient = builder.build();
}
@GetMapping(value = "/steamChat", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public Flux<String> steamChat(@RequestParam("input") String input) {
return chatClient.prompt()
.user(input)
.stream()
.content();
}
}此段代码首先注入了ChatClient实例，然后定义了一个GET映射方法/ai/steamChat，该方法接受参数input作为用户输入，并调用ChatClient发起请求。这里我们特别指定了响应的内容类型为text/event-stream，以便客户端能够正确解析服务器发送过来的数据片段。
6. 启动应用
最后，启动Spring Boot应用程序，并尝试访问http://localhost:8080/ai/steamChat?input=Hello之类的URL来测试接口是否正常工作。
以上就是基于Spring Boot集成Spring AI Alibaba创建一个简单对话模型，并提供一个支持CORS及流式输出的RESTful API的具体步骤。这使得我们可以轻松地从客户端（如React前端）向服务器发送请求，并实时获取AI生成的文本内容。
用React构建聊天APP：对接后端数据流
基于提供的我了解的信息，你希望构建一个简单的前端项目，这个项目将利用React来支持流输出（具体为flux<String>）的后端服务。这里主要涉及到前端如何发送请求到指定的后校验接口，并处理返回的数据流。
构建项目并填写代码
首先，按照标准流程创建一个新的 React 应用程序，并且安装必要的依赖项：
npx create-react-app frontend
cd frontend
npm install接着，在src目录下组织你的应用结构，以实现用户能够输入信息并通过点击按钮向服务器发送消息的功能。此过程中还会展示从服务器接收到的消息。
public/index.html
确保基本的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>
src/index.js
这是React应用的入口点，它负责渲染根组件。
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);src/App.js
此组件作为顶层容器，包含了聊天界面的主要逻辑。
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://localhost:8080/ai/steamChat?input=${input}`, { method: 'GET' });
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
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;这段代码定义了一个简单的聊天界面，允许用户输入文本并将其发送到服务器。服务器响应被逐步读取和解码，并实时更新到页面上显示给用户。
运行项目
完成以上步骤后，启动你的React应用进行测试：
npm start这将在默认浏览器中打开开发环境下的网站，此时你应该可以看到刚才创建的聊天应用了。当输入文本并通过“Send”按钮提交时，前端会调用配置好的后端URL获取数据流，并将其动态地显示出来。
扫一扫
2131
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
