java对接GPT 快速入门

统一对接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-key=your_api_key_here

4. 添加依赖与仓库

由于Spring AI Alibaba目前处于Milestone阶段，你需要添加特定的Maven仓库来获取相关库。请确保你的pom.xml文件包含以下内容：

<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>

同时，请不要忘记设置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 Flux<String> 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?input=your_input，其中your_input是你想要发送给AI助手的信息，然后你会看到实时的回复流。

解释

上述步骤涵盖了从环境搭建、API Key配置到实际编写控制逻辑的全过程。特别地，我们使用了Spring AI Alibaba提供的ChatClient对象来发起对阿里云通义千问API的调用，并且实现了基于SSE(Server-Sent Events)协议的流式响应。这使得我们的服务能够实时地向客户端推送数据，非常适合于构建互动性高的在线聊天应用。此外，通过启用CORS支持，允许来自任何源的前端应用都能轻松地与本服务交互。

前端构建：基于React的流式聊天应用，从搭建到运行

构建项目并填写代码

为了构建一个基于React的前端项目，它能够支持流式数据输出（即接收flux<String>格式的数据），并且后端接口地址为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 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应用到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`

定义应用的主要组件入口点：

import React from 'react';
import ChatComponent from './components/ChatComponent';

function App() {
  return (
    <div className="App">
      <ChatComponent />
    </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 (
    <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

这将自动打开浏览器窗口并加载你的应用页面，在这里用户可以输入信息并通过点击“Send”按钮向指定URL发起请求，从而与后端进行交互。注意，上述示例假定后端服务已经在http://localhost:8080/ai/steamChat?input=...处正确配置且可访问，同时支持CORS跨域资源共享以允许来自前端的请求。如果遇到任何网络错误或权限问题，请检查后端设置及安全性配置。