【实操】Spring Cloud Alibaba AI，阿里AI这不得玩一下(含前后端源码)

前言

🍊缘由

阿里AI一出马，gpt都得拉下把

🏀闪亮主角：

大家好，我是JavaDog程序狗

今天跟大家分享Spring Cloud Alibaba AI，以Spring AI 为基，并提供阿里云通义大模型的 Java AI 应用。

本狗以SpringBoot+uniapp+uview2对接Spring Cloud Alibaba AI，带你玩转实现自己的聊天小AI。

📘你想听的故事

狗哥在翻阅之前写的文章时，发现很多对接gpt的实操项目文章都被和谐了，而且老美还限制我们爱国青年使用gpt

呸，老美这卑鄙手段。所以从我做起，拒绝黄拒绝赌拒绝gpt，找一个平替的国内AI大模型，让gpt食屎去吧！

Spring Cloud Alibaba AI 阿里国产的通义AI大模型，绝对是平替gpt的梦中情AI，就让本狗带大家手把手一起玩耍下吧。

🎁如何获取源码

公众号：【JavaDog程序狗】

关注公众号，发送 “alibaba-ai”，无任何套路即可获得！

正文

🎯主要目标

实现3大重点

1. 了解Spring Cloud Alibaba AI 是什么

2. 使用Spring Cloud Alibaba AI 前置条件

3. SpringBoot+uniapp+uview2对接Spring Cloud Alibaba AI实操步骤

🥦目标讲解

一. Spring Cloud Alibaba AI 是什么

Spring Cloud Alibaba AI 是一个基于 Spring AI 的扩展框架，它提供了对阿里云通义系列大模型的支持，使得开发者能够更容易地在 Java 应用程序中集成和使用这些 AI 模型。

基础框架

Spring Cloud Alibaba AI 基于 Spring AI 构建，这意味着它继承了 Spring AI 的核心功能，并在此基础上增加了特定于阿里云通义系列大模型的功能。

Spring AI

Spring AI 是一个用于简化机器学习和人工智能应用开发的框架，它提供了一套工具和抽象层来帮助开发者更容易地将 AI 功能集成到他们的应用程序中。

通义系列大模型

阿里云的一系列预训练大模型，如通义千问等，它们可以用于多种场景，包括但不限于文本生成、对话系统、文档检索等。

快速集成

Spring Cloud Alibaba AI 提供了简便的方式来接入这些大模型，使得开发者可以在较短的时间内完成 AI 功能的开发和部署。

Spring Boot 支持

为了使用 Spring Cloud Alibaba AI，你需要有一个基于 Spring Boot 的项目，并且 Spring Boot 的版本需要是 3.x 或更高版本。

JDK 版本要求

为了支持最新的特性和性能优化，推荐使用 JDK 17 或更高版本。

二. 使用Spring Cloud Alibaba AI 前置条件

1.JDK版本17+

如果有条件直接JDK21，一步到位，本狗使用的JDK21

JDK21官网地址

2.SringBoot3.0+

本狗使用SringBoot3.1.10版本

SpringBoot文档官网地址

3.申请通义API-KEY

申请调用Spring Cloud Alibaba AI的API-KEY

DashScope模型服务灵积

三. SpringBoot+uniapp+uview2对接Spring Cloud Alibaba AI实操步骤

1.准备

开发工具

工具	版本	用途
IDEA	2023.3.3	Java开发工具
HBuilder X	3.98	前端开发者服务的通用 IDE

API-KEY申请

账号	功能	描述
阿里云	API-KEY	前置中申请阿里AI的API-KEY

主要组件

前端

插件	版本	用途
uview-ui	^2.0.31	多平台快速开发的UI框架
mescroll-uni	1.3.7	mescroll高性能的下拉刷新上拉加载组件

后端

插件	版本	用途
jdk	21	java环境
lombok	1.18.30	代码简化插件
maven	3.6.3	包管理工具
druid	1.1.24	JDBC组件
hutool	5.8.29	Java工具类库
mybatis-plus	3.5.7	基于 MyBatis 增强工具
mysql	8.0	数据库
spring-cloud-alibaba-ai	2023.0.1.0	阿里提供的 API

2.功能分析

后端

提供用户登录，注册，聊天等接口，对接spring-cloud-alibaba-ai。

前端

画出登录，注册，聊天页面，消息分页，下拉加载历史数据，AI消息打印展现效果等页面操作。

对接

前后端对接，实现智能AI聊天基本功能。

3.开发

后端代码总览

具体分层搭建此处省略，如有疑问请参考

【SpringBoot】还不会SpringBoot项目模块分层？来这手把手教你完全跟着复制分层即可。

doc文件夹下有DB脚本，别忘跑！别忘跑！别忘跑！

后端-关键点

引入spring-cloud-alibaba-ai依赖，版本为 <openai.version>2023.0.1.0</openai.version>

 <!--阿里云为分布式应用开发提供了一站式解决方案-->
  <dependency>
       <groupId>com.alibaba.cloud</groupId>
       <artifactId>spring-cloud-alibaba-dependencies</artifactId>
       <version>${spring-cloud-alibaba.version}</version>
       <type>pom</type>
       <scope>import</scope>
   </dependency>

   <!--阿里云为分布式应用开发提供AI集成-->
   <dependency>
       <groupId>com.alibaba.cloud</groupId>
       <artifactId>spring-cloud-starter-alibaba-ai</artifactId>
       <version>${spring-cloud-alibaba-ai.version}</version>
   </dependency>

调用alibaba-ai方法

参考文档https://sca.aliyun.com/docs/2023/user-guide/ai/quick-start/

    private String handleAI(Message message){
        Generation gen = new Generation();
        com.alibaba.dashscope.common.Message systemMsg = com.alibaba.dashscope.common.Message.builder()
                .role(Role.SYSTEM.getValue())
                .content("中文回复")
                .build();
        com.alibaba.dashscope.common.Message userMsg = com.alibaba.dashscope.common.Message.builder()
                .role(Role.USER.getValue())
                .content(message.getMsgContent())
                .build();
        GenerationParam param = GenerationParam.builder()
                .model("qwen-turbo")
                .messages(Arrays.asList(systemMsg, userMsg))
                .resultFormat(GenerationParam.ResultFormat.MESSAGE)
                .topK(50)
                .temperature(0.8f)
                .topP(0.8)
                .seed(1234)
                .build();
        try {
            return gen.call(param).getOutput().getChoices().get(0).getMessage().getContent();
        } catch (NoApiKeyException e) {
            throw new RuntimeException(e);
        } catch (InputRequiredException e) {
            throw new RuntimeException(e);
        }
    }

一定修application.yml配置文件中的api-key

  cloud:
    ai:
      tongyi:
        # 一定替换成自己的,也就是上方前置准备那里从阿里控制台获取的api-key
        api-key: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

前端代码总览

前端-关键点

如何实现打字机效果？

原理就是采用定时器，每次截取一个字节进行内容填充

// interval
intervalFunc(){
   // 深拷贝内容
   let content = uni.$u.deepClone(this.targetContent);
   // 记录次数
   this.times++;
   if(this.times == content.length){
     clearInterval(this.interval)
   }
   this.targetMsg.msgContent = content.substring(0,this.times);
   this.$set(this.msgList, this.msgList.length-1, this.targetMsg);
   this.$nextTick(function () {
     this.mescroll.scrollTo(99999, 0)
   })
 },

例：AI返回的数据为【我真的好喜欢你！】
每次substring截取一个字符，然后进行填充渲染结果为
我
我真
我真的
我真的好
我真的好喜欢你
…

这样就可以实现简单的打字机效果，网上还有通过CSS形式或更加简便方法实现，都可参考