logo

开发者热搜

Java调用人工智能GPT_基于spring ai

作者：沈询阿里2024.10.23 22:43浏览量：17

简介：怎么用java调用gpt

Java调用gpt，用Spring ai就对了

当前Java调用大模型时缺乏优秀的AI应用框架，导致开发效率低下。Spring作为老牌Java应用框架厂商，推出了Spring AI来解决这个问题。它借鉴了LangChain的核心理念，并结合了Java面向对象编程的特性，为开发者提供了一套标准化接口，使得一次编写代码后可以通过更改配置轻松切换不同的AI实现（如OpenAI、Azure、阿里云等）。这种方式不仅简化了对接不同AI提供商的复杂度，还提供了统一的抽象层，极大地减少了开发和迁移的工作量。此外，由于有专门团队维护，Spring AI能够持续更新和支持最新的AI技术，确保其在不断变化的大模型领域保持竞争力。

Spring AI Alibaba：为国内开发者提供安全智能的AI集成方案

当大模型进入国内市场时，面临的一个关键挑战是如何在确保内容安全的同时，使模型足够智能以满足业务需求。Spring AI Alibaba正是为应对这一挑战而设计的理想选择。它不仅具备强大的内容安全管理能力，而且集成了Qwen-2.5，该模型在OpenCompass评选中被评为开源模型中的第一名，展现了其卓越的性能和广泛的应用潜力。

Spring AI Alibaba是Spring AI框架针对阿里巴巴云产品及服务的一次本地化实现，专为使用阿里云通义系列AI能力（如对话、图像生成等）的开发者提供了简便易用的接口与工具。通过引入Spring AI Alibaba，开发人员可以轻松地在其应用程序中嵌入高级AI功能，无需深入研究复杂的底层技术细节。此外，Spring AI Alibaba支持多种类型的AI任务，并且能够无缝集成到现有的Spring Boot项目中，这极大地简化了AI应用的开发流程。其核心优势包括但不限于：对不同AI提供者间接口的标准化处理，允许代码一次编写即可跨平台运行；以及直接兼容Flux流输出的设计，使得基于流的数据处理变得简单高效。总之，Spring AI Alibaba为希望利用最新AI技术来增强自己产品的开发者们提供了一个强大而灵活的解决方案。

基于SpringBoot集成Spring AI Alibaba实现对话模型并构建支持prompt的流式返回接口

，我们了解到使用Spring AI Alibaba可以方便地为我们的项目添加AI能力，尤其是基于阿里云通义千问的服务。对于希望实现的特定功能，即通过GET请求提供一个跨域（CORS）支持、能够处理prompt并以Flux<String>形式返回结果的聊天接口，我们需要遵循一定的步骤来配置和编码。

环境与依赖准备

  • JDK版本：确保您的开发环境中的JDK版本不低于17。
  • Spring Boot版本：使用3.3.x系列版本。
  • 申请API Key：按照我了解的信息中给出的方法，在阿里云上申请通义千问服务的API Key，并记录下来用于后续配置。
  • Maven仓库设置：因为当前使用的Spring AI Alibaba组件还处于milestone阶段，所以需要在pom.xml文件中添加对Spring Milestones及Snapshots仓库的支持。
<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>
  • 添加依赖项：在pom.xml中加入Spring Boot Parent以及spring-ai-alibaba-starter依赖，以便自动装配必要的组件如ChatClient等。
<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>

配置API Key

在应用程序启动时或者通过环境变量设置通义千问API Key。这里采用环境变量方式：

export AI_DASHSCOPE_API_KEY=你的APIKey

同时，在application.properties或application.yml中添加如下配置以引用该环境变量值：

spring.ai.dashscope.api-key=${AI_DASHSCOPE_API_KEY}

编写Controller

创建一个新的Controller类来定义我们的聊天接口，注意要启用跨域支持并且返回类型为Flux<String>以适应流式输出需求。

@RestController
@RequestMapping("/ai")
@CrossOrigin(origins = "*")  // 启用跨域访问
public class ChatController {

  private final ChatClient chatClient;
  @Value("classpath:correct-and-expand.st")
  Resource resource;

  public ChatController(ChatClient.Builder builder) {
    this.chatClient = builder.build();
  }

  @GetMapping("/steamChat")
  public Flux<String> steamChat(@RequestParam String input) {
    PromptTemplate promptTemplate = new PromptTemplate(resource);
    Prompt prompt = promptTemplate.create(Map.of("input", input));
    return chatClient.prompt(prompt).stream().content();
  }
}

上述代码片段展示了如何定义一个简单的RESTful API端点/ai/steamChat，它接受查询参数input作为用户输入，利用Prompt Template机制构造合适的提示词后发送给通义千问模型，并将回复内容以流的形式逐段返回给客户端。

至此，您已经成功搭建了一个基本的基于Spring Boot与Spring AI Alibaba框架的应用程序，实现了通过HTTP GET方法调用AI聊天服务的功能。接下来，您可以进一步探索更多高级特性，比如自定义聊天选项、函数调用等，以丰富应用的功能性。

构建前端项目以支持流输出

首先，你需要创建一个新的 React 应用并安装必要的依赖。打开终端或命令行工具，依次执行以下命令：

npx create-react-app frontend
cd frontend
npm install

这将初始化一个新的React项目，并进入该项目目录。

接着，我们需要编辑一些关键文件以设置基本页面结构和实现消息处理逻辑。

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

此文件负责渲染应用到DOM中：

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

这是核心部分，实现了与后端交互的功能，包括发送消息、接收响应（流式数据）以及更新UI展示信息：

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);
      }

      // 添加换行符来区分不同的请求
      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;

运行项目

完成上述配置后，启动你的前端开发服务器查看效果：

cd frontend
npm start

通过以上步骤，你已经成功建立了一个能够与后端进行流式通信的简单React前端应用。用户可以通过输入框提交消息给后端，并实时接收到来自服务端的反馈信息。请注意确保后端API已正确部署且允许跨源资源共享(CORS)，以便前端可以无障碍地访问该资源。

相关文章推荐

发表评论

关于作者

  • 被阅读数
  • 被赞数
  • 被收藏数

最热文章