目录
编辑
Java AI 介绍：Spring AI - Java领域的AI开发新利器
Spring AI 扩展：Spring AI Alibaba，简化Java应用AI集成
SpringBoot集成阿里云AI服务：构建对话应用指南
基于SpringBoot集成Spring AI Alibaba
1. 环境准备
2. 获取API Key
3. 配置环境变量
4. 添加依赖项
5. 创建Controller处理逻辑
6. 使用Prompt功能
搭建React前端与后端交互：实时聊天应用实例
构建项目并填写代码
public/index.html
src/index.js
src/App.js
src/components/ChatComponent.js
运行项目
Java AI 介绍：Spring AI - Java领域的AI开发新利器
Spring AI的诞生主要为了解决过去Java在处理AI相关任务时缺乏一个类似于Python中LangChain这样的高效框架的问题。随着GPT等大型语言模型的发展，对于能够便捷地与这些模型交互的需求日益增长。Spring团队基于此背景，结合了Java语言的特点和优势，开发出了一套高度抽象且易于集成的解决方案——Spring AI。它不仅提供了标准化的方式让开发者可以轻松切换不同的AI服务提供商（如阿里云、OpenAI等），还支持流式输出，使得构建复杂的应用程序变得更为简单直接。通过这一框架，Java开发者现在也能够以更低的成本享受到先进的AI能力。
Spring AI 扩展：Spring AI Alibaba，简化Java应用AI集成
Spring AI Alibaba是基于Spring Cloud Alibaba的一个扩展项目，专为集成AI能力而设计。它通过提供一系列简洁的API和工具，使得开发者能够轻松地在Java应用程序中接入阿里云的通义大模型等高级AI服务，如文本生成、图像生成及语音转换等功能。借助Spring AI Alibaba，用户可以利用标准的POJO结构进行开发，同时支持多种AI服务提供商（包括但不限于OpenAI），只需简单配置更改即可切换不同的后端实现。这一框架还兼容了流式数据处理，非常适合构建聊天机器人或其他需要实时响应的应用程序。其核心优势在于简化了复杂的AI集成过程，极大提升了开发效率，并降低了迁移成本。
SpringBoot集成阿里云AI服务：构建对话应用指南
基于SpringBoot集成Spring AI Alibaba
根据提供的我了解的信息，为了构建一个基于Spring Boot的项目，该项目能够利用Spring AI Alibaba来实现与阿里云通义大模型进行对话的功能，并且通过GET接口以流的方式返回Flux<String>格式的数据，支持CORS跨域请求，具体步骤如下：
1. 环境准备
- JDK版本：确保你的开发环境使用的是JDK 17或更高。
- Spring Boot版本：保证项目的Spring Boot版本为3.3.x。
2. 获取API Key
- 访问阿里云百炼页面，登录您的阿里云账号后，选择开通“百炼大模型推理”服务。完成服务开通并获取短信通知后，进入控制台创建一个新的API Key。请保存好这个Key，它将在后续配置中使用。
3. 配置环境变量
在系统环境变量中设置刚刚获得的API Key：
export AI_DASHSCOPE_API_KEY=您的API-KEY同时，在application.properties文件中添加以下行来引用环境变量中的API Key值：
spring.ai.dashscope.api-key=${AI_DASHSCOPE_API_KEY}4. 添加依赖项
由于Spring AI Alibaba尚未正式发布到Maven中央仓库，因此需要添加额外的存储库信息至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>
<!-- Spring Boot父级项目 -->
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>3.3.4</version>
<relativePath/>
</parent>
<dependencies>
<!-- Spring AI Alibaba启动器 -->
<dependency>
<groupId>com.alibaba.cloud.ai</groupId>
<artifactId>spring-ai-alibaba-starter</artifactId>
<version>1.0.0-M2</version>
</dependency>
<!-- 其他依赖... -->
</dependencies>
5. 创建Controller处理逻辑
定义一个REST控制器来处理聊天请求。在此例中，我们将提供一个接受用户输入并通过流式方式响应的GET端点。
@RestController
@RequestMapping("/ai")
@CrossOrigin(origins = "*") // 开启CORS支持
public class ChatController {
private final ChatClient chatClient;
@Autowired
public ChatController(ChatClient.Builder builder) {
this.chatClient = builder.build();
}
@GetMapping(value = "/steamChat", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public Flux<String> steamChat(@RequestParam String input) {
return chatClient.prompt().user(input).stream().content();
}
}6. 使用Prompt功能
如果希望使用预定义的Prompt模板，则可以按照下面的方式进一步扩展上述代码：
- 在resources目录下创建prompt文件，例如
classpath:/prompts/greeting.st:
Hello, {name}! How can I assist you today?- 修改控制器方法以读取并应用该模板：
@Value("classpath:/prompts/greeting.st")
private Resource greetingResource;
@GetMapping(value = "/steamChat", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public Flux<String> steamChat(@RequestParam String name) {
PromptTemplate promptTemplate = new PromptTemplate(greetingResource);
Prompt prompt = promptTemplate.create(Map.of("name", name));
return chatClient.prompt(prompt).stream().content();
}以上步骤详细介绍了如何从零开始搭建一个集成了Spring AI Alibaba功能的小型Spring Boot应用程序。这包括了从基础环境配置、依赖管理到实际编写REST API的过程，特别是强调了如何利用ChatClient及自定义Prompts实现文本生成服务。
搭建React前端与后端交互：实时聊天应用实例
构建项目并填写代码
首先，创建一个新的 React 应用并安装所需的依赖：
npx create-react-app frontend
cd frontend
npm installpublic/index.html
这个文件不需要进行修改，它已经默认为你准备好了基本的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
这里定义了应用程序的主要组件树，对于我们的需求来说，只需引入即将创建的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方法向后端发送请求，并通过流的方式接收数据。
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 {
// 发送GET请求到指定URL，携带输入文本作为参数
const response = await fetch(`http://localhost:8080/ai/steamChat?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;运行项目
- 启动前端开发服务器：
cd frontend
npm start上述步骤描述了一个简单的基于React的前端应用，该应用能够与返回Flux<String>类型的后端服务通信。通过fetchAPI从后端获取流式响应，并实时更新UI来展示来自后端的消息。此实现方式适用于任何提供类似RESTful API且支持CORS策略的后端服务。请注意确保你的后端服务配置允许跨域资源共享（CORS），否则前端可能无法成功发起请求。
