JAVA接入GPT开发

标签：const 接入 Spring Boot React AI API GPT JAVA

Spring AI Alibaba：Java开发者的GPT集成新标准

目前，像OpenAI等GPT服务提供商主要提供HTTP接口，这导致大部分Java开发者在接入GPT时缺乏标准化的方法。为解决这一问题，Spring团队推出了Spring AI Alibaba，它作为一套标准化接口，允许Java开发者以统一的方式与不同的GPT服务交互。这样不仅简化了开发流程，也使得切换不同AI服务提供商变得轻松，极大地提升了开发效率和灵活性。此外，通过抽象复杂的底层细节，Spring AI Alibaba还增强了代码的可读性和维护性。

Spring Boot AI框架介绍：Spring AI 接入通义的集成优化

Spring AI Alibaba是基于Spring Boot构建的AI应用框架，专为阿里云通义大模型设计。它利用Spring Boot的便捷性与模块化特性，简化了开发者在集成AI能力时的操作流程。核心优势在于标准化了不同AI提供者（如OpenAI、Azure、阿里云等）的接口实现，使得一次编码即可通过更改配置轻松切换不同的AI服务提供商。此外，它支持对话、文生图、文生语音等多种生成式AI功能，并提供了Prompt模板、OutputParser等功能，极大减少了对接不同AI服务的工作量，让Spring Boot项目能够快速接入先进的AI技术。

Spring Boot下集成Spring AI Alibaba的实战指南：构建对话模型与Prompt流接口

为了基于Spring Boot集成Spring AI Alibaba并完成一个简单的对话模型，构建一个支持Prompt的流返回接口的项目，我们将按照以下步骤进行操作。这些步骤包括环境准备、配置依赖、申请API Key、编写后端代码以及处理跨域请求。

1. 环境准备

JDK版本：确保您的开发环境使用的是JDK 17或更高版本。

Spring Boot版本：本示例采用的是Spring Boot 3.3.x版本，请确认您的项目也处于相同或相近的版本。

2. 配置Maven仓库和添加依赖

由于Spring AI Alibaba尚未正式发布到Maven中心仓库，因此我们需要手动指定包含其快照版的仓库地址，并将相关的starter依赖添加至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>
    <!-- Spring Boot Parent -->
    <parent>
        <groupId>org.springframework.boot</groupId>

        <artifactId>spring-boot-starter-parent</artifactId>

        <version>3.3.4</version>

        <relativePath/>
    </parent>

    
    <!-- Spring AI Alibaba Starter -->
    <dependency>
        <groupId>com.alibaba.cloud.ai</groupId>

        <artifactId>spring-ai-alibaba-starter</artifactId>

        <version>1.0.0-M2</version>

    </dependency>

    
    <!-- Other dependencies as needed... -->
</dependencies>

3. 申请通义千问API Key

请访问阿里云百炼页面，登录账号并按指示开通“百炼大模型推理”服务。完成后，在管理界面创建一个新的API Key，并保存以备后续配置时使用。

4. 配置API Key

在项目的application.properties文件中设置通义千问的API Key。

spring.ai.dashscope.api-key=YOUR_API_KEY_HERE

或者通过环境变量来设置：

export AI_DASHSCOPE_API_KEY=YOUR_API_KEY_HERE

5. 编写Controller层代码

接下来，我们定义一个Controller类，用于接收HTTP GET请求，利用ChatClient与AI模型交互，并返回Flux类型的结果。

@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("input") String input) {
        return chatClient.prompt()
                         .user(input)
                         .stream()
                         .content();
    }
}

此段代码首先注入了ChatClient实例，然后定义了一个GET映射方法/ai/steamChat，该方法接受参数input作为用户输入，并调用ChatClient发起请求。这里我们特别指定了响应的内容类型为text/event-stream，以便客户端能够正确解析服务器发送过来的数据片段。

6. 启动应用

最后，启动Spring Boot应用程序，并尝试访问http://localhost:8080/ai/steamChat?input=Hello之类的URL来测试接口是否正常工作。

以上就是基于Spring Boot集成Spring AI Alibaba创建一个简单对话模型，并提供一个支持CORS及流式输出的RESTful API的具体步骤。这使得我们可以轻松地从客户端（如React前端）向服务器发送请求，并实时获取AI生成的文本内容。

用React构建聊天APP：对接后端数据流

基于提供的我了解的信息，你希望构建一个简单的前端项目，这个项目将利用React来支持流输出（具体为flux<String>）的后端服务。这里主要涉及到前端如何发送请求到指定的后校验接口，并处理返回的数据流。

构建项目并填写代码

首先，按照标准流程创建一个新的 React 应用程序，并且安装必要的依赖项：

npx create-react-app frontend
cd frontend
npm install

接着，在src目录下组织你的应用结构，以实现用户能够输入信息并通过点击按钮向服务器发送消息的功能。此过程中还会展示从服务器接收到的消息。

`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>Chat App</title>

</head>

<body>
  <div id="root"></div>

</body>

</html>

`src/index.js`

这是React应用的入口点，它负责渲染根组件。

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}`, { method: 'GET' });
      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
      
      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;

这段代码定义了一个简单的聊天界面，允许用户输入文本并将其发送到服务器。服务器响应被逐步读取和解码，并实时更新到页面上显示给用户。

运行项目

完成以上步骤后，启动你的React应用进行测试：

npm start

这将在默认浏览器中打开开发环境下的网站，此时你应该可以看到刚才创建的聊天应用了。当输入文本并通过“Send”按钮提交时，前端会调用配置好的后端URL获取数据流，并将其动态地显示出来。

标签：const,接入,Spring,Boot,React,AI,API,GPT,JAVA
From： https://blog.csdn.net/whisperzzza/article/details/142786531