JAVA接入GPT开发

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_HERE

5. 编写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><inputtype="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;

这段代码定义了一个简单的聊天界面，允许用户输入文本并将其发送到服务器。服务器响应被逐步读取和解码，并实时更新到页面上显示给用户。