如何优雅的在页面上嵌入AI-Agent人工智能
CSDN 2024-08-27 08:31:02 阅读 71
如何优雅的在页面上嵌入AI-Agent人工智能
前言
IDEA启动！大模型的title想必不用我多说了，多少公司想要搭上时代前言技术的快车，感受科技的魅力。现在大模型作为降本增效的强大工具，基本上公司大多人都想要部署开发一把，更多的想要利用到这些模型放到生产中来提高生产力。但是对于我们开发者来说，找到实际落地场景可以说是产品的活，我们需要思考如何高效维护AI这个模块，如何建立项目层级结构才能更好的解耦。正巧最近遇到了这个需求，来和大家分享项目搭建流程，此项目将运用到我个人开发的网页和网站上面，感兴趣的同学可以去体验一下，再来看看项目设计结构会更有心得。
项目顶层架构
首先AI这块应该在业务体系中应该较大的模块，AI落地应用的场景不限于AI客服问答，还可以应用在知识库管理、数据快速展示、ChatBI等一系列场景，但是目前我们的项目这块是用于Web应用上面的，所以采用一般也是JAVAWeb层级结构，那么我们就很好确定后端技术栈。
技术选型
Spring Boot: 作为项目的核心框架，用于快速构建 RESTful API 和管理依赖。MyBatis-Plus: 用于数据库持久化操作，简化了 MyBatis 的使用，并提供了基本的 CRUD 方法。AI SDK: 用于与AI 服务进行交互，处理 AI 模型的调用和返回结果。Lombok: 用于减少样板代码（如 <code>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 包
<code>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='智能客服应答表';code>
有了表之后我们建立相应的转换和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 转换为实体类 AiChatTongyiRespPo
AiChatTongyiRespPo po = AiResponseToPoConverter.convert(response);
aiChatTongyiRespRepository.saveAiResponse(po);
return new TongyiChatRespDto().setReply(result.getOutput().getText());
到现在写service就很好写了，通过层级划分（DTO、Service、Repository、PO 等），清晰分离了不同的职责，保证了代码的可维护性和扩展性。引入 Converter 模块将 DTO 转换为实体对象，简化了业务层的逻辑并实现了代码的复用。这一框架实现了从用户输入到 AI 模型响应再到数据持久化的全链路处理，下一章我们继续完善前端通信部分。
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。