WordPress恶意扫描,网站关键词优化seo,海南人,沈阳网站搭建本文是一个用springboot 结合spring mvc 和spring ai alibaba 调用国产大模型通义千问的具体例子#xff0c;按照这个做能够快速的搞定Java应用的调用。
然后就可以把这类应用泛化到所有的涉及到非结构化数据结构化的场景中。 Spring AI#xff1a;简化Java中大模型调用的框…
本文是一个用springboot 结合spring mvc 和spring ai alibaba 调用国产大模型通义千问的具体例子按照这个做能够快速的搞定Java应用的调用。
然后就可以把这类应用泛化到所有的涉及到非结构化数据结构化的场景中。 Spring AI简化Java中大模型调用的框架
当前在Java springboot 中调用大模型时缺乏优秀的AI应用框架是一个常见问题。
作为老牌的Java应用框架提供商Spring 在springboot之外提出了解决方案—Spring AI它借鉴了langchain的核心理念并结合了Java面向对象编程的特点。
Spring AI最核心的优势在于提供了统一接口使得开发者能够编写一次代码后仅通过更改配置即可轻松切换不同的AI实现。
此外得益于专门团队的支持与维护Spring AI保证了稳定性和持续更新。以本次样例中的Spring AI Alibaba接入阿里云通义大模型为例用户在完成初步集成后同样可以方便地更换为自己所需的其他大模型实现。
这种设计极大简化了开发流程提高了效率让Java开发者能更专注于业务逻辑本身而非复杂的AI集成工作。
Spring AI Alibaba功能介绍及应用示例
Spring AI Alibaba是Spring AI的一个实现它基于Spring AI的API完成了阿里云百炼系列云产品的大模型接入。
与Spring Cloud Alibaba一样Spring AI Alibaba整合了阿里巴巴的最佳实践是国内最好的Spring AI实现之一。
Spring AI Alibaba提供了一系列强大的功能和能力包括但不限于模型调用、Prompt模板、RAG检索增强生成、文生图以及图像识别等。
通过使用Spring AI Alibaba开发者可以轻松地开发基于阿里云通义提供的聊天、图片或语音生成AI应用。
框架还提供了诸如OutputParser、Prompt Template、Stuff等实用工具帮助简化开发流程。本文将以Prompt模板和模型调用两个能力为例展示如何接入Spring AI Alibaba以便为项目增添更多AI功能。
通义千问Qwen在MMLU等测试中超越Llama 3 70B登顶Hugging Face开源模型榜
通义千问Qwen在MMLU、TheoremQA、GPQA等基准测评中表现出色超越了Llama 3 70B 在85分数与gpt和claude等同属 第一梯队 并在Hugging Face开源大模型排行榜Open LLM Leaderboard上荣登榜首。 MMLU 和 GPQA都是 目前客观评分中最公认的两个评测标准客观评分来说这俩是最好的。
另外在真人参与评测的arena里面它不仅在思南平台 上仅次于国际知名的GPT和Claude系列还在 Hugging Face的视觉模型竞技场 中稳居中国首位。 基于SpringBoot集成Spring AI Alibaba构建对话模型
为了基于SpringBoot集成Spring AI Alibaba完成一个简单的对话模型并构建一个支持prompt的流返回接口的项目我们需要按照以下步骤进行操作。首先确保您的环境满足前置条件然后通过阿里云申请必要的API Key接着在项目中添加相应的依赖和配置最后实现Controller层逻辑以提供所需功能。
前置要求
确保您的JDK版本不低于17。
使用Spring Boot 3.3.x或以上版本。
已经从阿里云申请到了通义千问Qwen的API Key。
步骤一获取并配置API Key
登录阿里云百炼页面开通“百炼大模型推理”服务。
创建新的API Key并记录下来。
将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的仓库配置来获取相关依赖。请在pom.xml文件中的repositories标签下加入以下内容
repositoriesrepositoryidsonatype-snapshots/idurlhttps://oss.sonatype.org/content/repositories/snapshots/urlsnapshotsenabledtrue/enabled/snapshots/repositoryrepositoryidspring-milestones/idnameSpring Milestones/nameurlhttps://repo.spring.io/milestone/urlsnapshotsenabledfalse/enabled/snapshots/repositoryrepositoryidspring-snapshots/idnameSpring Snapshots/nameurlhttps://repo.spring.io/snapshot/urlreleasesenabledfalse/enabled/releases/repository/repositories接着在dependencies部分增加对spring-ai-alibaba-starter的引用
dependencies!-- 其他已存在的依赖项 --dependencygroupIdcom.alibaba.cloud.ai/groupIdartifactIdspring-ai-alibaba-starter/artifactIdversion1.0.0-M2/version/dependency!-- Spring Boot Starter Web 用于HTTP请求处理 --dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-web/artifactId/dependency!-- Spring Boot Starter Test 测试库 --dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-test/artifactIdscopetest/scope/dependency/dependencies步骤三创建Chat Controller
在您的Spring Boot应用中创建一个新的Controller类该类将负责处理来自客户端的GET请求利用ChatClient实例发送prompt给AI模型并返回一个FluxString类型的响应。这允许数据以流的形式异步地发送回客户端。
下面是一个示例代码
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 FluxString steamChat(RequestParam String input) {return this.chatClient.prompt().user(input).stream().content();}
}
解释
RestController注解表明这是一个RESTful风格的控制器。
RequestMapping(/ai)定义了所有映射到此类的方法都将使用/ai作为其URL路径前缀。
CrossOrigin(origins *)启用跨源资源共享(CORS)允许任何源访问此端点。
ChatController构造函数接收一个ChatClient.Builder实例用来初始化ChatClient。
GetMapping(/steamChat)指定了一个GET请求映射至/steamChat路径并接受名为input的查询参数。
方法steamChat利用chatClient向AI发送用户提供的文本即input并通过stream()方法以FluxString形式输出AI生成的内容流。
这样我们就成功搭建了一个基于Spring Boot的应用程序它能够与阿里云通义千问大模型交互并通过HTTP GET请求提供一个支持prompt能力的聊天接口。当用户访问http://localhost:8080/ai/steamChat?input…时他们将收到由AI模型生成的回答流。
创建React前端应用以支持流式数据输出
构建前端
要基于React构建一个支持流式数据输出的简单项目你可以按照以下步骤进行。此项目将能够从前端向后端发送消息并实时显示从后端接收的流式响应。这里假设你的后端已经准备好了一个URL地址http://localhost:8080/ai/steamChat?input...用于处理请求并返回fluxString格式的数据。
创建新的React应用
首先你需要创建一个新的React应用并通过npm安装必要的依赖包。打开终端运行以下命令
npx create-react-app frontend
cd frontend
npm install
这将为你设置好一个基础的React项目结构。
修改基本文件配置
接下来我们只需要对默认生成的一些文件做少量修改或添加自定义组件来实现我们的功能需求。
public/index.html
确保该文件内容如下它定义了HTML文档的基本结构
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleStream Chat App/title/headbodydiv idroot/div/body/htmlsrc/index.js
保持默认即可这是React应用的入口点
import React from react;
import ReactDOM from react-dom;
import App from ./App;ReactDOM.render(React.StrictModeApp //React.StrictMode,document.getElementById(root)
);
src/App.js
在这个文件中我们将导入并渲染ChatComponent组件它是实际负责与用户交互的部分
import React from react;
import ChatComponent from ./components/ChatComponent;function App() {return (div classNameAppChatComponent //div);
}export default App;
src/components/ChatComponent.js
这是最关键的部分在这里实现了输入框、发送按钮以及用来展示来自服务器的消息流的功能。请注意替换其中的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 (divinputtypetextvalue{input}onChange{handleInputChange}placeholderEnter your message/button onClick{handleSendMessage}Send/buttonbutton onClick{handleClearMessages}Clear/buttondivh3Messages:/h3pre{messages}/pre/div/div);
}export default ChatComponent;
以上代码片段提供了一个完整的聊天界面示例用户可以输入文本然后点击“Send”按钮发送给服务器。收到的流式响应会被逐段追加到页面上显示出来。
启动应用程序
完成所有这些设置之后现在可以启动你的React应用了。在项目根目录下执行
npm start
这会开启开发服务器默认情况下可以在浏览器访问http://localhost:3000查看效果。确保你的后端服务也已正确配置并且处于运行状态这样前端就可以成功与其通信了。
通过上述步骤你就建立了一个简单的基于React的支持流式数据传输的应用程序。
