方便做流程图的网站网络私人定制网站

当前位置： 首页 > news >正文

方便做流程图的网站,网络私人定制网站,互联网营销师有什么用,专业网页制作多少钱统一对接GPT服务的Java说明 当前#xff0c;OpenAI等GPT服务厂商主要提供HTTP接口#xff0c;这使得大部分Java开发者在接入GPT时缺乏标准化的方法。 为解决这一问题#xff0c;Spring团队推出了Spring AI #xff0c;它提供了统一且标准化的接口来对接不同的AI服务提供商… 统一对接GPT服务的Java说明 当前OpenAI等GPT服务厂商主要提供HTTP接口这使得大部分Java开发者在接入GPT时缺乏标准化的方法。 为解决这一问题Spring团队推出了Spring AI 它提供了统一且标准化的接口来对接不同的AI服务提供商包括阿里云通义大模型。 通过使用Spring AI开发者可以轻松地以一致的方式调用各种GPT功能并且能够利用Spring框架的强大生态优势如自动装配、依赖注入等特性极大地简化了开发流程并提高了代码复用性。 Spring AI Alibaba介绍集成与优化 Spring AI Alibaba是基于Spring AI构建的AI应用开发工具它通过将阿里云百炼系列大模型接入到Spring生态系统中使得开发者能够利用熟悉的Spring Boot编程模型轻松集成AI功能。 其核心优势在于提供了一套标准化接口支持多种AI服务提供商如OpenAI、Azure、阿里云等允许开发者通过简单修改配置即可切换不同的AI实现极大减少了迁移成本和工作量。 此外Spring AI Alibaba还兼容Flux流输出为构建基于流的机器人模型提供了便利。通过Spring Boot的强大生态支持Spring AI Alibaba进一步简化了AI能力在企业级应用中的落地过程。 后端构建SpringBoot集成Spring AI Alibaba实战构建对话模型与流接口 基于SpringBoot集成Spring AI Alibaba来构建一个简单的对话模型并创建一个支持Prompt能力与流返回接口的项目需要按照以下步骤进行。根据提供的我了解的信息我们将逐步分析问题的原因并给出具体的实施步骤。 例子使用通义后端API。

1. 环境准备 首先确保你的开发环境满足如下要求 JDK版本在JDK 17或以上。 Spring Boot版本为3.3.x或更高。
2. 获取API Key 前往阿里云百炼页面并登录您的阿里云账号选择开通“百炼大模型推理”服务。待服务开通后生成一个新的API KEY并记录下来以备后续配置使用。
3. 配置API Key 将获取到的API Key设置为环境变量或者直接在application.properties中配置 spring.ai.dashscope.api-keyyour_api_key_here
4. 添加依赖与仓库 由于Spring AI Alibaba目前处于Milestone阶段你需要添加特定的Maven仓库来获取相关库。请确保你的pom.xml文件包含以下内容 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/repositoriesdependenciesdependencygroupIdcom.alibaba.cloud.ai/groupIdartifactIdspring-ai-alibaba-starter/artifactIdversion1.0.0-M2/version/dependency!– 其他必要的依赖 – /dependencies同时请不要忘记设置Spring Boot的父级项目版本例如3.3.4。
5. 创建Controller处理请求 接下来在项目中创建一个Controller来处理GET请求该请求将利用ChatClient和Prompt功能实现聊天逻辑并支持跨域请求(CORS)。以下是示例代码 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 FluxString steamChat(RequestParam String input) {return chatClient.prompt().user(input).stream().content();} } 这段代码定义了一个名为SteamChatController的控制器它接受HTTP GET请求并通过chatClient调用通义千问API完成对话任务。注意这里我们设置了响应的内容类型为MediaType.TEXT_EVENT_STREAM_VALUE这是为了适应Flux类型的流输出需求。
6. 启动应用 现在你已经完成了所有必需的配置和编码工作只需运行Spring Boot应用程序即可。访问http://localhost:8080/ai/steamChat?inputyour_input其中your_input是你想要发送给AI助手的信息然后你会看到实时的回复流。 解释 上述步骤涵盖了从环境搭建、API Key配置到实际编写控制逻辑的全过程。特别地我们使用了Spring AI Alibaba提供的ChatClient对象来发起对阿里云通义千问API的调用并且实现了基于SSE(Server-Sent Events)协议的流式响应。这使得我们的服务能够实时地向客户端推送数据非常适合于构建互动性高的在线聊天应用。此外通过启用CORS支持允许来自任何源的前端应用都能轻松地与本服务交互。 前端构建基于React的流式聊天应用从搭建到运行 构建项目并填写代码 为了构建一个基于React的前端项目它能够支持流式数据输出即接收fluxString格式的数据并且后端接口地址为http://localhost:8080/ai/steamChat?input…你需要遵循以下步骤 首先请确保已经安装了Node.js环境。接下来通过执行下面命令来创建一个新的React应用并进入该目录安装必要的依赖项 npx create-react-app frontend cd frontend npm install 接着按照给出的结构组织你的项目文件和添加相应的代码。 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应用到DOM中 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 定义应用的主要组件入口点 import React from react; import ChatComponent from ./components/ChatComponent;function App() {return (div classNameAppChatComponent //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});if (!response.ok) throw new Error(Network response was not ok);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); // 将新收到的数据追加到已有消息上}} 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; 运行项目 完成以上设置之后你可以通过运行如下命令启动前端服务 cd frontend npm start 这将自动打开浏览器窗口并加载你的应用页面在这里用户可以输入信息并通过点击“Send”按钮向指定URL发起请求从而与后端进行交互。注意上述示例假定后端服务已经在http://localhost:8080/ai/steamChat?input…处正确配置且可访问同时支持CORS跨域资源共享以允许来自前端的请求。如果遇到任何网络错误或权限问题请检查后端设置及安全性配置。