Spring AI 介绍
在当前的AI应用开发中，像OpenAI这样的GPT服务提供商主要通过HTTP接口提供服务，这导致大部分Java开发者缺乏一种标准化的方式来接入这些强大的语言模型。Spring AI Alibaba应运而生，它作为Spring团队提供的一个解决方案，旨在为Java社区带来一套统一且易于使用的接口标准，以便快速整合包括阿里云通义在内的多种AI能力。借助Spring AI Alibaba，开发者可以更轻松地将GPT等先进技术集成到自己的项目中，同时享受Spring框架带来的诸如依赖注入、自动配置等便利特性，极大简化了从概念验证到生产部署的过程。
Spring AI Alibaba : 集成阿里云最佳时间的spring AI
Spring AI Alibaba 是 Spring AI 的一个实现，专门针对阿里云的百炼系列云产品大模型进行了适配。它旨在为开发者提供基于阿里云通义大模型的聊天、图片生成、语音生成等AI能力。其核心优势在于通过标准化接口简化了不同AI服务提供商之间的迁移工作，使得开发人员仅需更改配置即可轻松切换不同的AI实现。此外，Spring AI Alibaba 支持与Spring Boot的高度集成，让熟悉Spring生态的开发者可以更加便捷地引入强大的AI功能到自己的项目中，无需深入了解底层细节。这不仅提高了开发效率，还确保了应用程序能够以模块化和可移植的方式构建，符合现代微服务架构的设计理念。
基于SpringBoot整合Spring AI alibaba 实现简单聊天
本场景主要是借助spring ai 的能力，整合spring ai alibaba，实现一个最简单的helloworld聊天，主要想要体现spring ai 的流(flux)能力
SpringBoot实战：集成Spring AI Alibaba打造对话模型与prompt流接口
基于SpringBoot集成Spring AI Alibaba来完成一个简单的对话模型，并构建一个支持prompt的流返回接口项目，需要遵循如下步骤：
1. 环境准备
- JDK版本：确保你的开发环境使用的是JDK 17或更高版本。
- Spring Boot版本：确认你的Spring Boot版本为3.3.x或以上。
2. 申请API Key
前往阿里云百炼页面，登录您的账号并开通“百炼大模型推理”服务。开通成功后，在个人中心创建一个新的API KEY，并保存好该KEY值，稍后配置时会用到。
3. 配置API KEY
在你的操作系统环境中设置环境变量AI_DASHSCOPE_API_KEY，值为你之前获取的API KEY：
export AI_DASHSCOPE_API_KEY=your_api_key_here4. 添加依赖和仓库
编辑pom.xml文件，添加对Spring AI Alibaba的支持以及必要的仓库信息：
<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>
<!-- 其他依赖 -->
</dependencies>
5. 创建Spring Boot应用
5.1 Application启动类
保持基本不变，标准的Spring Boot应用程序入口点即可。
5.2 ChatController实现
创建一个控制器ChatController用于处理GET请求，接收用户输入并通过通义千问生成响应流。
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import reactor.core.publisher.Flux;
@RestController
@RequestMapping("/ai")
@CrossOrigin(origins = "*")
public class ChatController {
private final ChatClient chatClient;
public ChatController(ChatClient.Builder builder) {
this.chatClient = builder.build();
}
@GetMapping("/steamChat")
public Flux<String> steamChat(@RequestParam String input) {
return this.chatClient.prompt().user(input).stream().content();
}
}这里使用了@CrossOrigin(origins = "*")注解允许跨域请求。
5.3 配置application.properties
将之前设置的API KEY添加至application.properties中：
spring.ai.dashscope.api-key=${AI_DASHSCOPE_API_KEY}6. 运行与测试
启动你的Spring Boot应用，然后可以通过浏览器或者Postman等工具访问http://localhost:8080/ai/steamChat?input=你的问题来测试接口是否能够正常工作。
解释
上述过程通过引入Spring AI Alibaba的相关依赖，配置了阿里云通义千问所需的API KEY，并定义了一个简单的RESTful API来展示如何利用ChatClient实例进行对话式交互。此示例中的关键在于正确配置了环境变量、依赖关系及安全策略（如CORS），以保证服务能够顺利运行且易于调用。此外，本例还演示了如何利用Flux异步地流式传输聊天响应内容，这对于实时性要求较高的应用场景尤其有用。
搭建React聊天应用：从创建到运行
构建项目并填写代码
首先，创建一个新的 React 应用并安装所需的依赖。这一步骤为你的前端项目搭建好基本的框架。
npx create-react-app frontend
cd frontend
npm installpublic/index.html
此文件定义了页面的基本结构，包括标题和一个用于挂载React应用的div元素。
<!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应用的入口点，它将根组件App渲染到指定的DOM节点上。
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
App组件作为顶层组件，负责引入聊天组件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
这是核心的聊天组件，实现了消息输入、发送以及流式接收后端返回的数据。注意这里的fetch请求URL已按照题目要求调整为http://localhost:8080/ai/steamChat?input=${input}，并且确保后端服务支持CORS策略以允许跨域请求。
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}`);
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;运行项目
完成上述步骤后，通过下面命令启动你的前端开发服务器，并在浏览器中打开http://localhost:3000查看效果。
cd frontend
npm start这里构建了一个简单的基于React的应用程序来演示如何与支持Flux流输出的后端服务进行交互。用户可以输入文本并通过点击“Send”按钮发送给后端处理；收到的响应则会实时更新显示于页面之上。此外还提供了一个清除消息记录的功能以便重新开始对话
