图片或语音生成AI应用
发布时间：2025-06-24 17:41:53 作者：北方职教升学中心 阅读量：889
此项目将能够从前端向后端发送消息，并实时显示从后端接收的流式响应。
通义千问Qwen在MMLU等测试中超越Llama 3 70B，登顶Hugging Face开源模型榜
通义千问Qwen在MMLU、
步骤一：获取并配置API Key
- 登录阿里云百炼页面，开通“百炼大模型推理”服务。请注意替换其中的URL以匹配你实际使用的后端服务地址：
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((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;以上代码片段提供了一个完整的聊天界面示例，用户可以输入文本然后点击“Send”按钮发送给服务器。图片或语音生成AI应用。
@CrossOrigin(origins = "*")启用跨源资源共享(CORS)，允许任何源访问此端点。Spring AI：简化Java中大模型调用的框架
当前，在Java springboot 中调用大模型时，缺乏优秀的AI应用框架是一个常见问题。首先，确保您的环境满足前置条件，然后通过阿里云申请必要的API Key，接着在项目中添加相应的依赖和配置，最后实现Controller层逻辑以提供所需功能。
ChatController构造函数接收一个ChatClient.Builder实例，用来初始化ChatClient。Stuff等实用工具，帮助简化开发流程。这允许数据以流的形式异步地发送回客户端。这里假设你的后端已经准备好了一个URL地址http://localhost:8080/ai/steamChat?input=...用于处理请求并返回flux<String>格式的数据。框架还提供了诸如OutputParser、
此外，得益于专门团队的支持与维护，Spring AI保证了稳定性和持续更新。
Spring AI最核心的优势在于提供了统一接口，使得开发者能够编写一次代码后仅通过更改配置即可轻松切换不同的AI实现。打开终端，运行以下命令：
npx create-react-app frontendcd frontendnpm install这将为你设置好一个基础的React项目结构。
与Spring Cloud Alibaba一样，Spring AI Alibaba整合了阿里巴巴的最佳实践，是国内最好的Spring AI实现之一。
@RequestMapping("/ai")定义了所有映射到此类的方法都将使用/ai作为其URL路径前缀。在项目根目录下执行：npm start这会开启开发服务器，默认情况下可以在浏览器访问
http://localhost:3000查看效果。- 方法
steamChat利用chatClient向AI发送用户提供的文本（即input），并通过stream()方法以Flux<String>形式输出AI生成的内容流。请在pom.xml文件中的<repositories>标签下加入以下内容：<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-ai-alibaba-starter的引用：<dependencies> <!-- 其他已存在的依赖项 --> <dependency> <groupId>com.alibaba.cloud.ai</groupId> <artifactId>spring-ai-alibaba-starter</artifactId> <version>1.0.0-M2</version> </dependency> <!-- Spring Boot Starter Web 用于HTTP请求处理 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- Spring Boot Starter Test 测试库 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency></dependencies>步骤三：创建Chat Controller
在您的Spring Boot应用中，创建一个新的Controller类，该类将负责处理来自客户端的GET请求，利用
ChatClient实例发送prompt给AI模型，并返回一个Flux<String>类型的响应。TheoremQA、创建新的React应用
首先，你需要创建一个新的React应用并通过npm安装必要的依赖包。
这种设计极大简化了开发流程，提高了效率，让Java开发者能更专注于业务逻辑本身而非复杂的AI集成工作。确保你的后端服务也已正确配置并且处于运行状态，这样前端就可以成功与其通信了。
另外，在真人参与评测的arena里面，它不仅在思南平台 上仅次于国际知名的GPT和Claude系列，还在 Hugging Face的视觉模型竞技场 中稳居中国首位。
Spring AI Alibaba功能介绍及应用示例
Spring AI Alibaba是Spring AI的一个实现，它基于Spring AI的API完成了阿里云百炼系列云产品的大模型接入。文生图以及图像识别等。
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>Stream 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在这个文件中，我们将导入并渲染
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这是最关键的部分，在这里实现了输入框、
通过使用Spring AI Alibaba，开发者可以轻松地开发基于阿里云通义提供的聊天、
然后就可以把这类应用泛化到所有的涉及到非结构化数据结构化的场景中。
@GetMapping("/steamChat")指定了一个GET请求映射至/steamChat路径，并接受名为input的查询参数。通过上述步骤，你就建立了一个简单的基于React的支持流式数据传输的应用程序。RAG（检索增强生成）、
基于SpringBoot集成Spring AI Alibaba构建对话模型
为了基于SpringBoot集成Spring AI Alibaba完成一个简单的对话模型，并构建一个支持prompt的流返回接口的项目，我们需要按照以下步骤进行操作。收到的流式响应会被逐段追加到页面上显示出来。
@RestController注解表明这是一个RESTful风格的控制器。启动应用程序
完成所有这些设置之后，现在可以启动你的React应用了。GPQA等基准测评中表现出色，超越了Llama 3 70B ，在85+分数，与gpt和claude等同属 第一梯队 ，并在Hugging Face开源大模型排行榜Open LLM Leaderboard上荣登榜首。
这样，我们就成功搭建了一个基于Spring Boot的应用程序，它能够与阿里云通义千问大模型交互，并通过HTTP GET请求提供一个支持prompt能力的聊天接口。
作为老牌的Java应用框架提供商，Spring 在springboot之外提出了解决方案—Spring AI，它借鉴了langchain的核心理念，并结合了Java面向对象编程的特点。以本次样例中的Spring AI Alibaba接入阿里云通义大模型为例，用户在完成初步集成后，同样可以方便地更换为自己所需的其他大模型实现。
下面是一个示例代码：
@RestController@RequestMapping("/ai")@CrossOrigin(origins = "*") // 启用CORS跨域支持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(); }}解释
- 将API Key作为环境变量导出：
export AI_DASHSCOPE_API_KEY=这里替换为你的实际API Key- 在
application.properties文件中设置API Key：
spring.ai.dashscope.api-key=${AI_DASHSCOPE_API_KEY}步骤二：添加Spring仓库及项目依赖
由于Spring AI Alibaba目前尚未发布到Maven中央仓库，您需要手动添加Spring的仓库配置来获取相关依赖。Prompt Template、发送按钮以及用来展示来自服务器的消息流的功能。
Spring AI Alibaba提供了一系列强大的功能和能力，包括但不限于模型调用、本文将以Prompt模板和模型调用两个能力为例，展示如何接入Spring AI Alibaba，以便为项目增添更多AI功能。
- 已经从阿里云申请到了通义千问（Qwen）的API Key。
