如何优雅的在页面上嵌入AI-Agent人工智能
前言
IDEA启动!大模型的title想必不用我多说了,多少公司想要搭上时代前言技术的快车,感受科技的魅力。现在大模型作为降本增效的强大工具,基本上公司大多人都想要部署开发一把,更多的想要利用到这些模型放到生产中来提高生产力。但是对于我们开发者来说,找到实际落地场景可以说是产品的活,我们需要思考如何高效维护AI这个模块,如何建立项目层级结构才能更好的解耦。正巧最近遇到了这个需求,来和大家分享项目搭建流程,此项目将运用到我个人开发的网页和网站上面,感兴趣的同学可以去体验一下,再来看看项目设计结构会更有心得。
项目顶层架构
首先AI这块应该在业务体系中应该较大的模块,AI落地应用的场景不限于AI客服问答,还可以应用在知识库管理、数据快速展示、ChatBI等一系列场景,但是目前我们的项目这块是用于Web应用上面的,所以采用一般也是JAVAWeb层级结构,那么我们就很好确定后端技术栈。
技术选型
-
Spring Boot: 作为项目的核心框架,用于快速构建 RESTful API 和管理依赖。
-
MyBatis-Plus: 用于数据库持久化操作,简化了 MyBatis 的使用,并提供了基本的 CRUD 方法。
-
AI SDK: 用于与AI 服务进行交互,处理 AI 模型的调用和返回结果。
-
Lombok: 用于减少样板代码(如
getter
、setter
、构造函数等)。 -
MySQL: 作为数据库,用于存储 AI 会话数据。
我这里调用的是阿里通义千问的模型,当然每个厂商的AI SDK都大差不差,调用规则基本都是一致的,通过查阅SDK的返回参数就能很轻松的调用:
核心流程
API 请求处理:
-
前端或客户端通过
TongyiChatReqDto
提交用户的 prompt(问题)到后端。 -
后端的
AliyunTongyiServicelmpl
使用阿里云的dashscope
API 调用,将用户的问题提交给 AI 模型。
API 响应处理:
-
dashscope
API 返回 AI 的响应,封装在AiResponse
DTO 中。 -
后端通过
AiResponseToPoConverter
将AiResponse
转换为AiChatTongyiRespPo
实体类。
数据持久化:
-
转换后的实体对象
AiChatTongyiRespPo
通过AiChatTongyiRespRepository
保存到本地的 MySQL 数据库中。 -
数据持久化包括存储 AI 的会话 ID、返回文本、结束状态、模型编号、输入和输出 tokens 等信息。
业务处理:
-
后端返回封装好的
TongyiChatRespDto
响应对象,包含 AI 的回复文本,供前端展示。
顶层设计
首先应该有两个模块,一层为处理Web端数据回传,将用户在前端提交的文本数据处理,里面可以加入敏感词检测、不符对话逻辑过滤等一系列业务逻辑,然后把这些内容提交到AI交互模块;在数据落库方面还需要能够记录每次对话内容的交互数据,这部分的数据尽量偏业务方向,不需要记录AI返回的Tokens,状态等数据,只需要记录表层与用户交互的数据,比如对返回的文本点赞,评分等。
另一层为处理与AI数据交互,需要将我们处理过需要交互的数据提交到AI SDK的接口上,获取返回的数据,这部分数据也需要记录,因为后续我们可能会去做一些不同AI反馈效果,也可能会去进行大模型多模态的应用,所以要尽可能的低耦合,多划分层级,对后面后续维护项目很重要。之后还需要能够记录能够帮助我们调优AI性能的数据,比如每次传输的tokens数量,响应时间等数据。
项目实现
AI通信层
我们先来处理与AI通信交互这层功能:
api这一模块实现与AI接口的交互,也就是查阅相关SDK文档,找到AI返回的数据格式,获取到了数据之后记录到数据库之中,并且通过api传输给其他服务,确定层级有:
1. config 包
-
Configuration.java
: 负责项目的配置管理,通常用于定义和加载一些项目启动时所需的配置类、Bean、服务或者第三方服务的连接配置。 -
Properties.java
: 用于加载和存储配置文件(如application.yml
或application.properties
)中的属性,主要用于配置 API 相关的信息,比如apiKey
和chatAppId
。通常使用 Spring 的@ConfigurationProperties
注解,将配置文件中的内容映射为 Java 对象。
2. dal包
-
AiChatRespPo.java
: 持久化对象(PO),用于映射到数据库表ai_request
。这个类的实例代表从数据库读取或保存到数据库的一条记录。它包含 AI 会话相关的数据,如requestId
、prompt
、text
、finishReason
、modelId
、inputTokens
、outputTokens
等字段,通常与 MyBatis-Plus 或其他持久化框架一起使用。
3. domain包
-
AiResponse.java
: 数据传输对象(DTO),用于封装从阿里云 Dashscope API 返回的 AI 响应数据,并在应用层之间传递。该类包含 AI 响应的相关信息,如requestId
、text
、finishReason
、usage
(模型使用信息)。DTO 的作用是将数据从服务层传递到表示层(或反之),不涉及业务逻辑或持久化操作。
4. domain 包
-
EvaluateEnum.java
: 枚举类,用于定义用户对 AI 响应的评价状态,可能包含 "满意"、"不满意" 等选项。枚举类在代码中提供了一种类型安全的方式来表示固定的常量集。
5. exception 包
-
NetworkException.java
: 自定义异常类,用于处理网络或 API 调用过程中的错误。自定义异常可以使异常处理更具语义化,并且能够在捕获异常时提供更多的上下文信息,比如错误码或详细的错误消息。
6. repository 包
-
AiChatRespRepository.java
: 自定义的 Repository 接口,定义了保存AiChatTongyiRespPo
实体对象的方法。这个接口负责抽象数据持久化操作,隐藏了底层的数据访问细节。实现该接口的类负责实际的数据操作逻辑,通常使用 MyBatis-Plus 或其他持久化技术。
7. repository.impl 包
-
AiChatRespRepositoryImpl.java
: 该类实现了AiChatTongyiRespRepository
接口,负责将AiChatTongyiRespPo
实体对象保存到数据库中。它使用 MyBatis-Plus 或其他 ORM 框架来执行数据持久化操作,并管理数据库事务。
8. service包
-
AliyunTongyiServicelmpl.java
: 这是核心的业务逻辑实现类,处理与阿里云 Dashscope AI 服务的交互。它通过阿里云 API 发起请求,获取 AI 模型的响应数据,然后将该数据通过转换器(AiResponseToPoConverter
)转换为持久化对象,并保存到数据库中。同时,它还负责处理请求和响应的各种业务逻辑和异常情况。
基于上述内容我们可以来先设计DTO:
DTO
public class AiResponse {/*** AI单条会话ID*/private String requestId;/*** 提问内容*/private String prompt;/*** AI返回的文本*/private String text;/*** 完成原因*/private String finishReason;/*** 模型信息*/private List<ApplicationUsage.ModelUsage> usage; public AiResponse(String requestId,String prompt, String text, String finishReason, ApplicationUsage usage) {this.requestId = requestId;this.prompt = prompt;this.text = text;this.finishReason = finishReason;this.usage = usage != null ? usage.getModels() : null;} }
这部分查阅SDK看返回数据格式,把这部分最简单先做了。然后设计数据落表:
数据表
CREATE TABLE `ai_request` (`id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键标识',`request_id` varchar(50) NOT NULL COMMENT '会话ID',`prompt` longtext COMMENT '提问内容',`text` longtext COMMENT '返回文本',`finishReason` varchar(5) NOT NULL COMMENT '结束状态',`model_code` varchar(50) NOT NULL COMMENT '模型编号',`input_tokens` bigint NOT NULL COMMENT '输入tokens',`output_tokens` bigint NOT NULL COMMENT '输出tokens',`create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',`update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '修改时间',PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci COMMENT='智能客服应答表';
有了表之后我们建立相应的转换和po层:
po
public class AiChatTongyiRespPo {/*** 主键id*/@TableId(value = "id", type = IdType.AUTO)private Long id; /*** 提问内容*/@TableField(value = "prompt")private String prompt; /*** 返回编号*/@TableField(value = "request_id")private String requestId; /*** 返回文本*/@TableField(value = "text")private String text; /*** 结束状态*/@TableField(value = "finish_reason")private String finishReason; /*** 模型编号*/@TableField(value = "model_id")private String modelId; /*** 输入tokens*/@TableField(value = "input_tokens")private String inputTokens; /*** 输出tokens*/@TableField(value = "output_tokens")private String outputTokens; }
再来写convert:
convert
public static AiChatTongyiRespPo convert(AiResponse aiResponse) {AiChatTongyiRespPo po = new AiChatTongyiRespPo();ApplicationUsage.ModelUsage modelUsage = aiResponse.getUsage().get(0);// 将 DTO 中的数据映射到 PO 中po.setRequestId(aiResponse.getRequestId());po.setPrompt(aiResponse.getPrompt());po.setText(aiResponse.getText());po.setFinishReason(aiResponse.getFinishReason());po.setModelId(modelUsage.getModelId());po.setInputTokens(String.valueOf(modelUsage.getInputTokens()));po.setOutputTokens(String.valueOf(modelUsage.getOutputTokens())); return po;}
再来写实现层就好写了
service
public TongyiChatRespDto chat(TongyiChatReqDto dto) {try {// 构建API调用参数ApplicationParam param = ApplicationParam.builder().apiKey(aliyunProperties.getTongyi().getApiKey()).appId(aliyunProperties.getTongyi().getChatAppId()).prompt(dto.getPrompt()).build();Application application = new Application();ApplicationResult result = application.call(param);// 创建返回对象AiResponse response = new AiResponse(result.getRequestId(), dto.getPrompt(), result.getOutput().getText(), result.getOutput().getFinishReason(), result.getUsage());// 将 AiResponse 转换为实体类 AiChatTongyiRespPoAiChatTongyiRespPo po = AiResponseToPoConverter.convert(response);aiChatTongyiRespRepository.saveAiResponse(po);return new TongyiChatRespDto().setReply(result.getOutput().getText());
到现在写service就很好写了,通过层级划分(DTO、Service、Repository、PO 等),清晰分离了不同的职责,保证了代码的可维护性和扩展性。引入 Converter
模块将 DTO 转换为实体对象,简化了业务层的逻辑并实现了代码的复用。这一框架实现了从用户输入到 AI 模型响应再到数据持久化的全链路处理,下一章我们继续完善前端通信部分。
相关文章:

如何优雅的在页面上嵌入AI-Agent人工智能
前言 IDEA启动!大模型的title想必不用我多说了,多少公司想要搭上时代前言技术的快车,感受科技的魅力。现在大模型作为降本增效的强大工具,基本上公司大多人都想要部署开发一把,更多的想要利用到这些模型放到生产中来提…...

如何对LabVIEW软件进行性能评估?
对LabVIEW软件进行性能评估,可以从以下几个方面着手,通过定量与定性分析,全面了解软件在实际应用中的表现。这些评估方法适用于确保LabVIEW程序的运行效率、稳定性和可维护性。 一、响应时间和执行效率 时间戳测量:使用LabVIEW的时…...

动态规划 —— dp问题-按摩师
1. 按摩师 题目链接: 面试题 17.16. 按摩师 - 力扣(LeetCode)https://leetcode.cn/problems/the-masseuse-lcci/description/ 2. 算法原理 状态表示:以某一个位置为结尾或者以某一个位置为起点 dp[i]表示:选择到i位置…...
SQL 语法学习
在当今数字化的时代,数据的管理和分析变得至关重要。而 SQL(Structured Query Language),即结构化查询语言,作为一种用于管理关系型数据库的强大工具,掌握它对于从事数据相关工作的人来说是一项必备技能。在…...

MYSQL---TEST5(Trigger触发器Procedure存储过程综合练习)
触发器Trigger 数据库mydb16_trigger创建 表的创建 goods create table goods( gid char(8) primary key, #商品号 name varchar(10), #商品名 price decimal(8,2), #价格 num int;) #数量orders create tabl…...

蓝桥杯 区间移位--二分、枚举
题目 代码 #include <stdio.h> #include <string.h> #include <vector> #include <algorithm> #include <iostream> using namespace std; struct node{ int a,b; }; vector<node> q; bool cmp(node x,node y){ return x.b <…...
Nginx 报错400 Request Header Or Cookie Too Large
错误的原因: 1、可能是你的网络DNS配置错误。 2、由request header过大所引起,request过大,通常是由于cookie中写入了较大的值所引起的。 3、访问太频繁,浏览器的缓存量太大,产生错误。 解决办法: 1、清…...
【Redis】一种常见的Redis分布式锁原理简述
本文主要简述一下基于set命令的Redis分布式锁的原理。 一,a线程持有的锁不要被b线程同时持有→setnx 抢锁的时候,最核心的就是,a线程持有的锁不要被b线程同时持有,放在基于set命令的redis分布式锁中来看,就是“如果锁…...

HOT100_最大子数组和
class Solution {public int maxSubArray(int[] nums) {int[] dp new int[nums.length];int res nums[0];dp[0] nums[0];for(int i 1; i< nums.length; i){dp[i] Math.max(nums[i] ,dp[i-1] nums[i]);res Math.max(res, dp[i]);}return res;} }...
DiskGenius工具扩容Mac OS X Apple APFS分区
DiskGenius是一款功能强大的磁盘分区工具,它支持Windows和Mac OS X系统,可以用于管理硬盘分区,包括扩容Mac OS X的Apple APFS分区。然而,直接使用DiskGenius来扩容Mac OS X的APFS分区可能存在一定的风险,因为不是专门为…...
从零开始的LeetCode刷题日记:70. 爬楼梯
一.相关链接 题目链接:70. 爬楼梯 二.心得体会 这道题还是动规五部曲。 1.首先是dp数组及其下标的含义,dp记录了每层楼梯对应的爬的方法,每个下标存储每个对应楼层。 2.然后是递归公式,其实每一层楼都是可以从下面一层和下面…...

Unity照片墙效果
Unity照片墙效果,如下效果展示 。 工程源码...

【自动化利器】12个评估大语言模型(LLM)质量的自动化框架
LLM评估是指在人工智能系统中评估和改进语言和语言模型的过程。在人工智能领域,特别是在自然语言处理(NLP)及相关领域,LLM评估具有至高无上的地位。通过评估语言生成和理解模型,LLM评估有助于细化人工智能驱动的语言相…...
【1】基础概念
文章目录 一、特点二、基础语法注意三、官方编程指南四、go 语言标准库 API 一、特点 golang 一个 go 文件都要归属到一个包,需要进行申明。天然的并发:golang 从语言层面支持大并发。每个 go 文件都必须要归属到一个包中。执行 go 文件:go …...

HTML 文档规范与解析模式:DOCTYPE、<html> 标签以及结构化页面
文章目录 `<!DOCTYPE html>` 文档类型声明标准模式与怪异模式HTML5 的简化声明`<html>` 标签`<head>` 标签`<body>` 标签小结<!DOCTYPE html> 文档类型声明 在 HTML 文档中,<!DOCTYPE html> 是一个重要的文档类型声明,主要用于告知浏览…...
大模型微调技术 --> 脉络
Step1:脉络 微调技术从最早期的全模型微调演变成如今的各种参数高效微调(PEFT)方法,背后是为了应对大模型中的计算、存储和数据适应性的挑战 1.为什么有微调? 深度学习模型越来越大,尤其是 NLP 中的预训练语言模型(BERT, GPT)系列。如果从…...

不要只知道deepl翻译,这里有10个专业好用的翻译工具等着你。
deepl翻译的优点还是有很多的,比如翻译的准确性很高,支持翻译的语言有很多,并且支持翻译文件和文本。但是现在翻译工具那么多,大家需要翻译的场景也有很多,怎么能只拥有一个翻译工具呢。所以在这里我帮助大家寻找了一波…...

第二节 管道符、重定向与环境变量
1.重定向技术的 5 种模式 (1)标准覆盖输出重定向 (2)标准追加输出重定向 (3)错误覆盖输出重定向 (4)错误追加输出重定向 (5)输入重定向2.输入输出重定向 输入…...

Linux 服务器使用指南:从入门到登录
🌟快来参与讨论💬,点赞👍、收藏⭐、分享📤,共创活力社区。 🌟 🚩博主致力于用通俗易懂且不失专业性的文字,讲解计算机领域那些看似枯燥的知识点🚩 目录 一…...

QT 如何使QLabel的文字垂直显示
想要实现QLabel文字的垂直显示,可以通过使用“文字分割填充换行符”的方式来实现QLabel文字垂直显示的效果,下面是效果图: 具体实现代码: #include "mainwindow.h" #include "ui_mainwindow.h"MainWindow:…...

测试微信模版消息推送
进入“开发接口管理”--“公众平台测试账号”,无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息: 关注测试号:扫二维码关注测试号。 发送模版消息: import requests da…...

Chapter03-Authentication vulnerabilities
文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...
五年级数学知识边界总结思考-下册
目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解:由来、作用与意义**一、知识点核心内容****二、知识点的由来:从生活实践到数学抽象****三、知识的作用:解决实际问题的工具****四、学习的意义:培养核心素养…...
06 Deep learning神经网络编程基础 激活函数 --吴恩达
深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

如何在最短时间内提升打ctf(web)的水平?
刚刚刷完2遍 bugku 的 web 题,前来答题。 每个人对刷题理解是不同,有的人是看了writeup就等于刷了,有的人是收藏了writeup就等于刷了,有的人是跟着writeup做了一遍就等于刷了,还有的人是独立思考做了一遍就等于刷了。…...

Springboot社区养老保险系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,社区养老保险系统小程序被用户普遍使用,为方…...
JAVA后端开发——多租户
数据隔离是多租户系统中的核心概念,确保一个租户(在这个系统中可能是一个公司或一个独立的客户)的数据对其他租户是不可见的。在 RuoYi 框架(您当前项目所使用的基础框架)中,这通常是通过在数据表中增加一个…...
Go 语言并发编程基础:无缓冲与有缓冲通道
在上一章节中,我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道,它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好࿰…...

三分算法与DeepSeek辅助证明是单峰函数
前置 单峰函数有唯一的最大值,最大值左侧的数值严格单调递增,最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值,最小值左侧的数值严格单调递减,最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

uniapp 开发ios, xcode 提交app store connect 和 testflight内测
uniapp 中配置 配置manifest 文档:manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号:4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...