您的位置:首页 > 文旅 > 美景 > 网页浏览器在哪里_环球下载杭州网_留号码的广告网站_深圳网络推广招聘

网页浏览器在哪里_环球下载杭州网_留号码的广告网站_深圳网络推广招聘

2024/12/22 14:31:16 来源:https://blog.csdn.net/whisperzzza/article/details/142891143  浏览:    关键词:网页浏览器在哪里_环球下载杭州网_留号码的广告网站_深圳网络推广招聘
网页浏览器在哪里_环球下载杭州网_留号码的广告网站_深圳网络推广招聘

Spring AI 介绍 :简化Java AI开发的统一接口解决方案

在过去,使用Java开发AI应用时面临的主要困境是没有统一且标准的封装库,导致开发者需要针对不同的AI服务提供商分别学习和对接各自的API,这增加了开发难度与迁移成本。而Spring AI的出现解决了这一问题,它提供了一套兼容市面上主要生成任务(如文本、图像生成)的标准接口。通过采用Spring AI,开发者只需编写一次代码,并通过修改配置即可轻松切换至不同AI供应商的服务,极大简化了AI功能集成过程,使得基于Java Spring的应用能够更加便捷地利用先进的AI能力。

Spring AI Alibaba:阿里的Spring AI最佳实践集合

Spring AI Alibaba 是基于 Spring AI 的实现,专为阿里云的百炼系列大模型提供接入服务。它继承了 Spring 生态系统的设计原则,如可移植性和模块化设计,并将其应用于人工智能领域。Spring AI 的核心优势在于其标准化了不同AI提供商(如OpenAI、Azure、阿里云等)的接口实现,使得开发者只需编写一次代码,通过修改配置即可轻松切换不同的AI后端。此外,Spring AI 直接兼容Flux流输出,简化了与市面上大多数基于流的机器人模型的集成过程。这不仅大幅减少了开发和迁移时的工作量,也提高了应用程序的灵活性和适应性。通过使用 Spring AI Alibaba,开发者可以更高效地构建并扩展利用通义千问等大模型的应用程序。

Spring AI函数调用(function calling) 机制探秘

在Spring AI中实现函数调用的原理是,用户首先定义一个实现了Function接口的Java类,该类通过特定的注解如@JsonProperty@JsonPropertyDescription来描述其输入参数、输出结果以及函数的具体作用。这些注解使得开发者能够明确指定函数的行为及其预期用途,为后续步骤打下基础。

当应用程序启动时,Spring AI会自动读取并解析这些注解信息,将它们转换成一种易于大模型理解的文字描述形式,并作为上下文的一部分传递给大模型。这样做是为了让大模型能够根据当前对话或任务的需求,判断是否需要调用某个已定义好的函数来完成更复杂的任务。如果大模型决定调用某项功能,则会在响应中明确指出希望调用哪个具体的函数及所需的参数值。

接下来,Spring AI接收到这一指示后,在本地环境中执行相应的Java方法,获取到执行结果。随后,它不仅将该结果反馈给大模型,同时还会一并将之前的对话历史或相关信息再次提交给大模型,以确保整个交互过程中的连贯性和一致性。这种方式有效地增强了AI系统的功能性与灵活性,使其能够利用外部工具或服务完成更加多样化且复杂的工作流程。

构建后端:Spring Boot集成Spring AI Alibaba实现第三方API调用优化利润分析

实现步骤

1. 环境准备与依赖添加

首先确保JDK版本为17及以上,Spring Boot版本为3.3.x以上。接着,在项目中添加必要的仓库和依赖。

仓库配置

<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><dependency><groupId>com.alibaba.cloud.ai</groupId><artifactId>spring-ai-alibaba-starter</artifactId><version>1.0.0-M2</version></dependency><!-- 其他必需依赖 -->
</dependencies>
2. 配置阿里云API Key

application.properties文件中设置阿里云通义大模型的API Key。

spring.ai.dashscope.api-key=YOUR_API_KEY
3. 创建函数定义

定义一个用于查询雪球股票利润表的Java函数。此函数将被注册给LLM使用。

import com.fasterxml.jackson.annotation.JsonProperty;
import com.fasterxml.jackson.annotation.JsonPropertyDescription;
import org.springframework.web.client.RestTemplate;public class XueQiuStockService implements Function<XueQiuStockService.StockRequest, String> {private final RestTemplate restTemplate = new RestTemplate();@Overridepublic String apply(StockRequest request) {String url = "https://stock.xueqiu.com/v5/stock/finance/cn/income.json?symbol=" + request.getSymbol() + "&type=all&is_detail=true&count=1";String response = restTemplate.getForObject(url, String.class);// 对返回的数据进行简单处理或直接返回return response;}public static class StockRequest {@JsonProperty(required = true, value = "股票代码")@JsonPropertyDescription("股票代码, 如SH600900")private String symbol;public StockRequest() {}public StockRequest(String symbol) { this.symbol = symbol; }public String getSymbol() { return symbol; }public void setSymbol(String symbol) { this.symbol = symbol; }}
}
4. 注册函数

通过Spring配置类将上述定义的函数注册为一个Bean。

@Configuration
public class AppConfig {@Bean@Description("查询指定股票代码的利润表")public Function<XueQiuStockService.StockRequest, String> xueQiuStockFunction() {return new XueQiuStockService();}
}
5. 使用Prompt Template结合函数提供服务

创建Controller来接收请求并结合Prompt和已注册的函数执行操作。

@RestController
@RequestMapping("/ai")
@CrossOrigin(origins = "*")
public class ChatController {private final ChatClient chatClient;public ChatController(ChatClient.Builder builder) {this.chatClient = builder.build();}@GetMapping("/chatSteam")public Flux<String> chatSteam(@RequestParam String input) {PromptTemplate promptTemplate = new PromptTemplate("{input} 的利润率是多少?请给出详细分析。");DashScopeChatOptionsBuilder opsBuilder = DashScopeChatOptions.builder().withFunction("xueQiuStockFunction");DashScopeChatOptions ops = opsBuilder.build();Map<String, Object> map = Map.of("input", input);Prompt prompt = promptTemplate.create(map, ops);return chatClient.prompt(prompt).stream().content();}
}

步骤解释

  1. 环境准备:确保开发环境满足基本要求(JDK、Spring Boot版本)。
  1. 依赖添加:添加了Spring AI Alibaba和其他必要依赖。
  1. 配置API Key:设置了阿里云API Key以启用大模型服务。
  1. 函数定义与注册:创建了一个简单的HTTP客户端函数来获取股票财务数据,并将其作为Spring Bean注册。
  1. 服务实现:编写了一个控制器方法,该方法接受用户输入(股票代码),构建带有特定提示的Prompt,并指示大模型调用之前注册的功能来获取所需数据。最终,返回模型生成的内容流。

这样就完成了基于Spring Boot集成Spring AI Alibaba以及使用其Function Calling能力完成对话和分析模型的任务。

构建前端:一个简单的对话基于React

为了构建一个基于React的简单前端项目,支持从后端接收流数据(flux<String>),可以按照以下步骤进行操作。此示例假设你的后端接口地址为 http://.../ai/chatStream?input=... 并且返回的是一个字符串流。

创建并初始化项目

首先,你需要创建一个新的 React 应用,并安装所有必要的依赖项。打开终端并运行以下命令:

npx create-react-app frontend
cd frontend
npm install

这将生成一个新的 React 项目结构,并自动安装基本的开发环境。

配置基础文件

确保你有如下几个基础文件设置好。这些文件通常不需要做过多修改,但确认它们的存在是重要的一步。

  • public/index.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
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;
实现聊天组件

关键部分在于实现一个能够发送请求到后端并处理响应流的组件。这里我们定义了 ChatComponent 来完成这个任务。

  • 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 {// 注意这里的URL应该替换为你实际使用的后端服务地址const response = await fetch(`http://.../ai/chatStream?input=${input}`, {method: 'GET', // 或者POST根据实际情况调整headers: {'Content-Type': 'application/json',// 如果需要认证信息或其他头信息,请在此添加},});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 (<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;

这段代码实现了向指定URL发送请求,并通过流式读取响应内容逐步更新状态中的消息列表的功能。注意,如果您的后端API要求特定的HTTP方法或头部信息,则需相应地调整 fetch 请求的配置。

运行项目

最后,启动你的前端应用以查看效果:

npm start

以上步骤详细描述了如何基于React构建一个简单的支持流输出的前端项目。其中涉及到的主要技术包括使用React Hooks管理状态、利用Fetch API与后端通信以及处理服务器返回的流数据。确保在开发过程中保持前后端之间的良好协作,特别是关于CORS策略的设置,以便前端能够顺利访问到后端提供的资源。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com