整体说明
要基于Spring AI在Java中进行GPT（ 人工智能 AI ）开发，可以选择 Spring Ai 来做中间的路由应用层，采用这种方法的核心优势在于能够极大地简化跨平台AI能力整合的过程。开发者可以专注于业务逻辑而无需过多关注底层实现细节，只需调整少量配置即可轻松切换不同的AI服务提供商。
此外，这种做法充分利用了Spring框架提供的强大功能，比如自动装配和依赖管理，使Java GPT人工智能应用程序更加灵活、可维护且易于扩展。这种方式不仅促进了代码重用性，还支持快速迭代，非常适合希望快速融入最新AI技术的企业和个人开发者。
Spring AI 介绍
Spring AI 是一个面向Java开发者的AI应用框架，它将GPT等人工智能模型的使用简化并标准化，支持多种AI服务提供者。其核心优势在于通过统一的接口和配置，实现一次编码即可轻松切换不同的AI后端，极大提升了开发效率与灵活性。
Spring AI alibaba介绍
Spring AI Alibaba 是 Spring AI 的一个实现，它基于 Spring 生态系统的设计原则，为开发者提供了一套标准化的接口来对接不同的AI服务提供商（如阿里云、OpenAI等）。其核心优势在于通过一次编码，仅需更改配置即可轻松切换不同AI服务供应商。Spring AI Alibaba 主要支持对话、文生图、文生语音等功能，并且能够无缝集成到现有的Spring Boot应用中。借助于Spring AI Alibaba，开发人员可以便捷地利用通义千问等大模型的能力，同时享受到Spring框架带来的模块化和可移植性优势。此外，它还提供了诸如Prompt Template、OutputParser等实用功能，进一步简化了AI应用的开发流程。
基于Spring AI集成Spring AI Alibaba完成简单对话模型
根据我了解的信息中的内容，我们知道Spring AI Alibaba支持通过ChatClient与阿里云的通义大模型进行交互，并且能够利用Prompt模板来构造复杂的对话逻辑。此外，它还支持使用Flux流输出结果，非常适合构建实时响应的应用程序。下面将按照这一思路，详细说明如何基于Spring Boot集成Spring AI Alibaba，创建一个支持跨域访问、使用prompt能力及ChatClient功能的聊天接口。
项目设置
首先，确保你的开发环境满足以下要求：
- JDK版本在17及以上。
- Spring Boot版本在3.3.x及以上。
- 已经从阿里云申请到了通义千问的API Key，并设置了
AI_DASHSCOPE_API_KEY环境变量或系统属性。
Maven依赖配置
添加必要的Maven仓库和依赖项到你的pom.xml文件中，以引入Spring AI Alibaba相关的库以及Spring Boot框架本身：
<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 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-webflux</artifactId>
</dependency>
<!-- 引入Spring AI Alibaba -->
<dependency>
<groupId>com.alibaba.cloud.ai</groupId>
<artifactId>spring-ai-alibaba-starter</artifactId>
<version>1.0.0-M2</version>
</dependency>
</dependencies>配置文件
在项目的application.properties或application.yml文件中添加必要的配置信息，特别是指定API Key：
spring.ai.dashscope.api-key=${AI_DASHSCOPE_API_KEY}编写控制器
接下来创建一个REST Controller来处理来自客户端的请求，该控制器需要注入ChatClient实例，并通过Prompt模板生成对话回复。同时启用CORS（跨源资源共享）以便外部域名可以访问本服务。
import org.springframework.web.bind.annotation.*;
import reactor.core.publisher.Flux;
import com.alibaba.cloud.ai.chat.ChatClient;
import com.alibaba.cloud.ai.prompt.Prompt;
import com.alibaba.cloud.ai.prompt.PromptTemplate;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.CrossOrigin;
@RestController
@RequestMapping("/ai")
@CrossOrigin(origins = "*")
public class ChatController {
private final ChatClient chatClient;
@Value("classpath:prompts/chat-prompt.st")
private Resource promptResource;
@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) {
PromptTemplate promptTemplate = new PromptTemplate(promptResource);
Prompt prompt = promptTemplate.create(Map.of("input", input));
return chatClient.prompt(prompt).stream().content();
}
}这里的chat-prompt.st是自定义的提示文本文件，例如：
User: {input}
Assistant:这表示用户输入作为{input}被替换后，助手会接着这个上下文生成回复。
测试
启动应用程序后，可以通过浏览器或者Postman等工具向http://localhost:8080/ai/steamChat?input=你好发送GET请求，应该能看到服务器返回的实时对话数据流。
以上步骤描述了如何基于Spring AI Alibaba快速搭建一个简单的对话服务端点，实现了对prompt的支持并采用了Flux流式响应机制。此方案不仅展示了Spring生态系统的强大扩展性，同时也证明了利用现代技术栈实现复杂业务逻辑的可能性。
构建前端
构建项目并填写代码
首先，创建一个新的 React 应用并安装所需的依赖：
npx create-react-app frontend
cd frontend
npm installpublic/index.html
在index.html中，保持默认配置即可，它提供了一个简单的页面结构，其中包含了用于渲染React应用的<div id="root"></div>标签。
src/index.js
此文件是React应用的入口点。确保其内容如下，以正确加载你的App组件：
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
这是实现与后端通信的核心部分。这里我们定义了ChatComponent来处理用户输入、发送请求给后端，并显示返回的流数据。请确保替换URL中的http://localhost:8080/ai/steamChat?input=为你实际的服务地址。
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;
while (!done) {
const { value, done: readerDone } = await reader.read();
done = readerDone;
const chunk = decoder.decode(value, { stream: true });
setMessages((preMessaages) => preMessaages + chunk);
}
// 每次消息结束时添加分隔符
setMessages((preMessaages) => preMessaages + '\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打开浏览器访问http://localhost:3000（或根据控制台输出的具体地址），你应该能看到一个可以向后端发送消息并接收流式响应的简单界面。
以上就是基于React构建支持流式数据交互的前端项目的全过程。该示例展示了如何利用React的状态管理功能结合JavaScript的Fetch API来处理HTTP请求及响应流，从而实现流畅的用户交互体验。
