有用
Spring AI：统一封装库助力Java人工智能开发
我们使用了Spring AI来进行人工智能应用的开发。过去，用Java编写AI应用程序面临的主要困境之一是缺乏统一标准的封装库。Spring AI的出现解决了这一问题，它提供了一套能够兼容市面上主要生成任务（如文本生成、图像生成、音视频处理以及RAG等）的接口，极大地简化了开发者的工作流程。通过采用Spring AI，我们能够在Java环境下便捷地接入多种AI能力，包括但不限于通义千问、OpenAI等提供的服务，从而加速项目中的AI功能集成与实现。这不仅提升了开发效率，也使得基于Spring生态系统的项目能够更平滑地过渡到AI赋能的应用场景中。
Spring AI阿里巴巴版：一键接入云端智能服务
Spring AI Alibaba是Spring AI的一个实现，它基于Spring AI的API完成阿里云百炼系列云产品的接入。通过Spring AI Alibaba，开发者能够轻松使用通义大模型提供的聊天、图片生成、语音合成等AI功能。其核心优势在于标准化了不同AI提供者的接口，使得开发者可以仅通过修改配置来切换不同的AI服务提供商。此外，由于与Flux流输出兼容，Spring AI Alibaba还能很好地支持基于流的机器人模型。这不仅简化了开发流程，也降低了在不同AI平台间迁移的成本。总之，Spring AI Alibaba极大地提升了开发效率和灵活性，使Spring生态系统下的项目能更便捷地集成高级AI能力。
SpringBoot实战：集成Spring AI Alibaba打造对话模型与prompt接口
基于SpringBoot集成Spring AI Alibaba，完成一个简单的对话模型，并构建一个支持prompt的流返回接口项目。以下为详细步骤：
1. 环境准备
首先，确保你的开发环境满足以下要求：
JDK版本在17或以上。
Spring Boot版本3.3.x。
2. 申请API Key
你需要从阿里云获取通义千问的API Key。操作流程如下：
打开阿里云百炼页面。
登录您的阿里云账号。
开通“百炼大模型推理”服务。
等待开通成功的短信通知。
登录后，在右上角选择小人图标 -> API-KEY -> 创建新的API-KEY。
请保存好这个Key，它将用于后续配置。
3. 配置API Key
在本地环境中设置API Key变量：
export AI_DASHSCOPE_API_KEY=YOUR-API-KEY
同时，在application.properties中添加：
spring.ai.dashscope.api-key=${AI_DASHSCOPE_API_KEY}4. 添加仓库和依赖
因为spring-ai-alibaba-starter还没有提交到Maven正式仓库，所以需要手动添加Spring自己的仓库及snapshot仓库到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-ai-alibaba-starter依赖以及Spring Boot的父项目依赖到pom.xml:
<parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>3.3.4</version> <relativePath/> </parent> <dependencies> <dependency> <groupId>com.alibaba.cloud.ai</groupId> <artifactId>spring-ai-alibaba-starter</artifactId> <version>1.0.0-M2</version> </dependency> <!-- 其他必要的依赖 --> </dependencies>
5. 构建Controller
创建一个新的Controller来处理GET请求，并使用ChatClient进行对话交互。为了支持CORS跨域访问，还需要引入相关配置。
ChatController.java
import com.alibaba.cloud.ai.ChatClient; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*; import reactor.core.publisher.Flux; @RestController @RequestMapping("/ai") @CrossOrigin(origins = "*") public class ChatController { private final ChatClient chatClient; @Autowired public ChatController(ChatClient.Builder builder) { this.chatClient = builder.build(); } @GetMapping("/steamChat") public Flux<String> steamChat(@RequestParam("input") String input) { return this.chatClient.prompt() .user(input) .stream() .content(); } }这里我们注入了ChatClient并定义了一个名为steamChat的方法，该方法接收用户输入作为参数，通过chatClient.prompt()发送给通义千问，并返回响应内容作为Flux字符串流。
6. 启动应用
最后，运行你的Spring Boot应用程序。如果一切正常，现在应该可以通过访问http://localhost:8080/ai/steamChat?input=你的问题来测试这个接口了。例如：http://localhost:8080/ai/steamChat?input=你好。
7. 前端实现（可选）
对于前端部分，可以参考之前提到的一个简单的基于React的前端项目示例，以实现与后端接口的交互。注意确保后端已经正确配置了CORS支持。
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}`); 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;至此，你已成功集成了Spring AI Alibaba，并构建了一个支持Prompt能力和流返回接口的简单对话系统。
创建React前端项目：实时显示流数据
基于提供的我了解的信息内容，我们将构建一个简单的React前端项目，该项目支持从后端获取流数据，并实时显示这些信息。这里的后端接口地址为http://localhost:8080/ai/steamChat?input=…，它返回的是flux<String>形式的数据流。
构建项目并填写代码
首先，你需要创建一个新的React应用并通过安装必要的依赖开始你的项目：
npx create-react-app frontend cd frontend npm install
接下来，根据要求调整或添加相关文件的内容以适应本项目的需要。
public/index.html
此文件保持不变，因为它已经定义了基本的HTML结构来加载React应用。
<!DOCTYPE html> <html> <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'; const 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((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应用程序了：
cd frontend npm start
这将启动开发服务器，并自动打开浏览器窗口指向http://localhost:3000/（默认情况下）。现在，你可以通过在文本框中输入消息然后点击“Send”按钮来测试你的应用程序。如果一切配置正确，你应该能看到从后端接收到的消息逐字显示在页面上。
