登录注册
京东自营 618 + 国补 iPhone 历史最低价          领 618 红包，最高25618元

spring AI 10分钟快速上手 ，基于spring ai alibaba

欢马劈雪

工程师 (已认证)

  • 原创分享签约作者

发表于教程文章
65

在这篇文章中：

过去大模型接口基本都只提供了 Http的服务， 或者是一个不是那么专业的sdk。 然后需要我们java程序员去依托于这些非标准的SDK来实现自己的业务。

这个方式能够work，但也存在很大的问题，就是接口不够统一，而且与过去的Java 面向对象的编程习惯不够匹配。

好在spring ai站了出来，参照Langchain的一些关键的对象封装，重构了一套面向java的 ai调用接口。

这样，我们可以实现同一个接口随时切换不同的ai实现， 这样就方便很多了。

下文就是spring ai 的整个介绍，我们以spring ai alibaba为例（因为国内用这个方便一些），来仔细讲解如何快速的让java可以使用大模型的能力

Spring AI：统一AI开发框架，简化服务对接与代码迁移

Spring AI 是一个专为AI工程设计的应用框架，它继承了Spring Boot的可移植性和模块化特性。该框架通过统一不同AI服务提供商（如OpenAI、Azure、阿里云等）的接口标准，让开发者能够仅通过更改配置就能轻松切换不同的AI实现，极大地简化了代码编写和迁移过程。此外，Spring AI 对Flux流输出的支持使得它能良好兼容多数基于流的机器人模型，进一步降低了开发者的集成难度。通过提供一套完善的抽象层，Spring AI 有效减少了在对接不同AI服务时查阅文档和编写适配代码的工作量，提高了开发效率。

Spring AI 阿里巴巴版：优化阿里云大模型接入的开发工具

Spring AI Alibaba 是 Spring AI 的一个实现，专门针对阿里云的百炼系列云产品大模型进行了适配。它旨在为开发者提供基于阿里云通义大模型的聊天、图片生成、语音生成等AI能力。其核心优势在于通过标准化接口简化了不同AI服务提供商之间的迁移工作，使得开发人员仅需更改配置即可轻松切换不同的AI实现。此外，Spring AI Alibaba 支持与Spring Boot的高度集成，让熟悉Spring生态的开发者可以更加便捷地引入强大的AI功能到自己的项目中，无需深入了解底层细节。这不仅提高了开发效率，还确保了应用程序能够以模块化和可移植的方式构建，符合现代微服务架构的设计理念。

场景整体说明：

本场景主要是借助spring ai 的能力，整合spring ai alibaba，实现一个最简单的helloworld聊天，主要想要体现spring ai 的流(flux)能力

step1 后端构建： 集成Spring AI Alibaba打造对话模型与prompt流接口

基于SpringBoot集成Spring AI Alibaba来完成一个简单的对话模型，并构建一个支持prompt的流返回接口项目，需要遵循如下步骤：

1. 环境准备

  • JDK版本：确保你的开发环境使用的是JDK 17或更高版本。
  • Spring Boot版本：确认你的Spring Boot版本为3.3.x或以上。

2. 申请API Key

前往阿里云百炼页面，登录您的账号并开通“百炼大模型推理”服务。开通成功后，在个人中心创建一个新的API KEY，并保存好该KEY值，稍后配置时会用到。

3. 配置API KEY

在你的操作系统环境中设置环境变量AI_DASHSCOPE_API_KEY，值为你之前获取的API KEY：

export AI_DASHSCOPE_API_KEY=your_api_key_here

4. 添加依赖和仓库

编辑pom.xml文件，添加对Spring AI Alibaba的支持以及必要的仓库信息：

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

5. 创建Spring Boot应用

5.1 Application启动类

保持基本不变，标准的Spring Boot应用程序入口点即可。

5.2 ChatController实现

创建一个控制器ChatController用于处理GET请求，接收用户输入并通过通义千问生成响应流。

import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import reactor.core.publisher.Flux;

@RestController
@RequestMapping("/ai")
@CrossOrigin(origins = "*")
public class ChatController {

    private final ChatClient chatClient;

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

    @GetMapping("/steamChat")
    public Flux<String> steamChat(@RequestParam String input) {
        return this.chatClient.prompt().user(input).stream().content();
    }
}

这里使用了@CrossOrigin(origins = "*")注解允许跨域请求。

5.3 配置application.properties

将之前设置的API KEY添加至application.properties中：

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

6. 运行与测试

启动你的Spring Boot应用，然后可以通过浏览器或者Postman等工具访问http://localhost:8080/ai/steamChat?input=你的问题来测试接口是否能够正常工作。

后端小结

上述过程通过引入Spring AI Alibaba的相关依赖，配置了阿里云通义千问所需的API KEY，并定义了一个简单的RESTful API来展示如何利用ChatClient实例进行对话式交互。此示例中的关键在于正确配置了环境变量、依赖关系及安全策略（如CORS），以保证服务能够顺利运行且易于调用。此外，本例还演示了如何利用Flux异步地流式传输聊天响应内容，这对于实时性要求较高的应用场景尤其有用。

step2 ：搭建React聊天前端

构建项目并填写代码

首先，创建一个新的 React 应用并安装所需的依赖。这一步骤为你的前端项目搭建好基本的框架。

npx create-react-app frontend
cd frontend
npm install

public/index.html

此文件定义了页面的基本结构，包括标题和一个用于挂载React应用的div元素。

<!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应用的入口点，它将根组件App渲染到指定的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

App组件作为顶层组件，负责引入聊天组件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

这是核心的聊天组件，实现了消息输入、发送以及流式接收后端返回的数据。注意这里的fetch请求URL已按照题目要求调整为http://localhost:8080/ai/steamChat?input=${input}，并且确保后端服务支持CORS策略以允许跨域请求。

展开阅读全文

本文系作者在时代Java发表，未经许可，不得转载。

如有侵权，请联系nowjava@qq.com删除。

编辑于
举报

关注时代Java

教程文章

文章订阅

关注时代Java

Copyright © 2014-2024NowJava. All Rights Reserved. 时代Java 版权所有 京ICP备14059627号-7

关注时代Java