本文的协作目的是帮你怎样用Spring AI给Java项目加上通义千问的AI功能。

会从设置环境讲到写代码的具体步骤。

例子使用的是spring ai alibaba和QWen千问API。你可以先试着跑通例子,再换成自己的实现。

现在QWen有100万免费Token可以用,很适合快速开发。另外QWen是开源的,自己搭模型也能免费用。

目录

Spring AI:Java领域中的AI应用框架革新

Spring AI Alibaba:简化接入阿里云大模型服务的开发工具

阿里云通义千问简介

在Spring Boot中集成Spring AI Alibaba

1. 环境与依赖准备

添加阿里云百炼API KEY

配置Maven仓库

引入必要的依赖

2. 应用程序属性配置

3. 创建Controller层处理逻辑

4. 测试您的应用程序

构建基于React的流输出前端项目

构建项目并填写代码

运行项目


Spring AI:Java领域中的AI应用框架革新

过去在Java领域里,缺少一个优秀的AI应用框架。这给开发者带来不少困扰。Spring AI的出现解决了这个问题。它是一个专为AI工程设计的应用框架。Spring AI把Spring生态系统的设计原则带到了AI开发中。这样做让Spring AI和现有的Spring生态无缝对接。同时Spring AI也完美支持Java面向对象编程。使用Spring AI最大的好处是提供了一套统一的接口。这样可以轻松切换不同的AI服务提供商。只需更改配置即可。这大大简化了开发工作。Spring AI还兼容Flux流输出。这意味着它可以很容易地与基于流的机器人模型集成。通过这些设计,Spring AI显著减少了程序员的工作量。

Spring AI Alibaba:简化接入阿里云大模型服务的开发工具

Spring AI Alibaba 是一个基于 Spring AI 的实现,专门针对阿里云的大模型服务进行适配。它让开发者能够轻松接入阿里云的百炼系列云产品,如通义千问等大模型。Spring AI Alibaba 支持多种生成式模型的应用场景,包括对话、文生图、文生语音等功能。它的核心优势在于提供了一套统一的接口,使得代码可以写一次就支持多种AI提供商的服务切换。此外,还提供了诸如 Prompt Template 和 OutputParser 等实用工具,帮助简化开发流程。通过 Spring AI Alibaba,开发者可以快速构建出功能强大的AI应用,而无需深入了解底层复杂的API调用逻辑。

阿里云通义千问简介

通义千问是由阿里集团推出的开源大模型服务,支持全尺寸和多模态的大规模模型。它在中文开源模型领域表现出色,在国内的思南大模型竞技场排名中名列前茅。

通义千问的核心优势包括:

  1. 能力排名靠前:QWen 在MMLU、TheoremQA、GPQA等客观评测指标上超越了Llama 3 70B。
  1. 可访问性和合规性:API调用有安全保护,避免恶意攻击问题。
  1. 完全开源:提供了全尺寸的多模态大模型开源版本,用户可以根据需求选择不同大小的模型。
  1. 价格合适:提供100万免费token使用,并且调用API的成本较低,甚至可以自己构建免费使用。

特别推荐关注其Qwen和Qwen vl两个模态的模型,它们在开源榜单上均位居国内第一。

对于大模型的能力评估,主要通过基准测试和人类评估两种方式进行。基准测试包括GSM-8K、MMLU、TheoremQA和GPQA等,可以参考Hugging Face的开放大模型排行榜[https://huggingface.co/spaces/open-llm-leaderboard/open_llm_leaderboard]。而人类评估则更贴近实际应用场景,可以参考国外的竞技场排行榜[https://lmarena.ai]或国内的思南平台CompassArena [https://arena.opencompass.org.cn/]。

在Spring Boot中集成Spring AI Alibaba

为了基于Spring Boot集成Spring AI Alibaba,并完成一个支持prompt的流返回接口的项目,您需要遵循以下步骤来设置您的开发环境和编写代码。本示例将创建一个简单的对话模型,通过GET请求接收用户输入并使用ChatClient能力生成回复。此外,我们将确保该接口支持CORS跨域访问,URL为http://localhost:8080/ai/steamChat?input=...

1. 环境与依赖准备

首先,请确认满足以下前置要求:

  • JDK版本在17或以上。
  • Spring Boot版本在3.3.x及以上。
添加阿里云百炼API KEY

请前往阿里云百炼页面按照指示操作以获取API KEY,并将其设置到系统环境变量中(或者直接在应用配置文件里指定):

export AI_DASHSCOPE_API_KEY=${REPLACE-WITH-VALID-API-KEY}
配置Maven仓库

由于spring-ai-alibaba-starter可能还没有发布到官方Maven中央仓库,您需要添加Spring的仓库到您的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>
引入必要的依赖

pom.xml内添加对spring-ai-alibaba-starter及其他相关库的支持:

<dependencies>
    <!-- Spring Boot Starter -->
    <dependency>
        <groupId>org.springframework.boot</groupId>

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

    </dependency>

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

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

        <version>1.0.0-M3.1</version>

    </dependency>

</dependencies>

2. 应用程序属性配置

application.propertiesapplication.yml文件中设置通义大模型相关的API密钥以及默认聊天选项(如果有的话):

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

3. 创建Controller层处理逻辑

接下来,定义一个控制器类ChatController,它将处理来自客户端的请求,并利用ChatClient实例来产生响应。请注意,这里也实现了CORS跨域资源共享策略。

import org.springframework.web.bind.annotation.*;
import reactor.core.publisher.Flux;
import com.alibaba.cloud.ai.ChatClient;

@RestController
@RequestMapping("/ai")
@CrossOrigin(origins = "*") // 允许所有来源的请求
public class ChatController {

    private final ChatClient chatClient;

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

    @GetMapping(value = "/steamChat")
    public Flux<String> chatSteam(@RequestParam String input, HttpServletResponse response) {
        response.setCharacterEncoding("UTF-8"); // 设置字符编码防止中文乱码
        return chatClient.prompt(input)
                .stream()
                .content();
    }
}

4. 测试您的应用程序

现在您可以启动Spring Boot应用程序,并尝试访问http://localhost:8080/ai/steamChat?input=您好这样的地址来验证是否能够得到预期的回答了。确保已经设置了正确的API KEY并且网络状况良好,以保证能够顺利连接到后端服务。

以上就是如何基于Spring Boot集成Spring AI Alibaba并构建一个简单对话服务的过程。这个例子展示了基本的功能实现方法;对于更复杂的应用场景,如自定义Prompt模板等高级特性,则可以参考更多资料链接中的详细文档说明。

构建基于React的流输出前端项目

基于React构建一个简单的支持流输出的前端项目,可以参考以下步骤。这个示例中,我们将创建一个能够与后端交互的应用程序,该应用程序通过发送请求到http://localhost:8080/ai/steamChat?input=…来接收数据流,并将接收到的信息实时展示给用户。

构建项目并填写代码

首先,你需要确保你的开发环境中已经安装了Node.js和npm。然后按照下面的步骤开始创建新的React应用:

  1. 初始化一个新的React应用:打开命令行工具,执行以下命令以创建一个新的React应用,并进入项目目录:
npx create-react-app frontend
cd frontend
npm install
  1. 编辑基础文件结构:
    • public/index.html: 这个HTML文件是你的React应用的基础页面模板。
<!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;
  1. 实现聊天组件:创建src/components/ChatComponent.js文件,在这里定义一个名为ChatComponent的功能性组件,它负责处理消息输入、发送以及显示从服务器接收的消息流。
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;

运行项目

完成上述配置后,可以通过运行以下命令启动你的React应用:

npm start

这将开启一个本地开发服务器,默认在浏览器中打开http://localhost:3000地址查看你的应用程序。此时,你可以输入消息并通过点击“Send”按钮向指定URL发送请求,从而测试是否能正确获取并显示返回的数据流。请注意,为使此功能正常工作,后端服务需要支持CORS(跨源资源共享)策略。

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐