0
0

如何优雅的在页面上嵌入AI-Agent人工智能

如何优雅的在页面上嵌入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

publicclassAiResponse{/**
     * AI单条会话ID
     */privateString requestId;/**
     * 提问内容
     */privateString prompt;/**
     * AI返回的文本
     */privateString text;/**
     * 完成原因
     */privateString finishReason;/**
     * 模型信息
     */privateList<ApplicationUsage.ModelUsage> usage;publicAiResponse(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看返回数据格式，把这部分最简单先做了。然后设计数据落表：

数据表

CREATETABLE`ai_request`(`id`bigintNOTNULLAUTO_INCREMENTCOMMENT'主键标识',`request_id`varchar(50)NOTNULLCOMMENT'会话ID',`prompt`longtextCOMMENT'提问内容',`text`longtextCOMMENT'返回文本',`finishReason`varchar(5)NOTNULLCOMMENT'结束状态',`model_code`varchar(50)NOTNULLCOMMENT'模型编号',`input_tokens`bigintNOTNULLCOMMENT'输入tokens',`output_tokens`bigintNOTNULLCOMMENT'输出tokens',`create_time`datetimeNOTNULLDEFAULTCURRENT_TIMESTAMPCOMMENT'创建时间',`update_time`datetimeNOTNULLDEFAULTCURRENT_TIMESTAMPONUPDATECURRENT_TIMESTAMPCOMMENT'修改时间',PRIMARYKEY(`id`))ENGINE=InnoDBDEFAULTCHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci COMMENT='智能客服应答表';

有了表之后我们建立相应的转换和po层：

po

publicclassAiChatTongyiRespPo{/**
     * 主键id
     */@TableId(value ="id", type =IdType.AUTO)privateLong id;/**
     * 提问内容
     */@TableField(value ="prompt")privateString prompt;/**
     * 返回编号
     */@TableField(value ="request_id")privateString requestId;/**
     * 返回文本
     */@TableField(value ="text")privateString text;/**
     * 结束状态
     */@TableField(value ="finish_reason")privateString finishReason;/**
     * 模型编号
     */@TableField(value ="model_id")privateString modelId;/**
     * 输入tokens
     */@TableField(value ="input_tokens")privateString inputTokens;/**
     * 输出tokens
     */@TableField(value ="output_tokens")privateString outputTokens;}

再来写convert：

convert

publicstaticAiChatTongyiRespPoconvert(AiResponse aiResponse){AiChatTongyiRespPo po =newAiChatTongyiRespPo();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

publicTongyiChatRespDtochat(TongyiChatReqDto dto){try{// 构建API调用参数ApplicationParam param =ApplicationParam.builder().apiKey(aliyunProperties.getTongyi().getApiKey()).appId(aliyunProperties.getTongyi().getChatAppId()).prompt(dto.getPrompt()).build();Application application =newApplication();ApplicationResult result = application.call(param);// 创建返回对象AiResponse response =newAiResponse(result.getRequestId(), dto.getPrompt(), result.getOutput().getText(), result.getOutput().getFinishReason(), result.getUsage());// 将 AiResponse 转换为实体类 AiChatTongyiRespPoAiChatTongyiRespPo po =AiResponseToPoConverter.convert(response);
            aiChatTongyiRespRepository.saveAiResponse(po);returnnewTongyiChatRespDto().setReply(result.getOutput().getText());

到现在写service就很好写了，通过层级划分（DTO、Service、Repository、PO 等），清晰分离了不同的职责，保证了代码的可维护性和扩展性。引入 

Converter

模块将 DTO 转换为实体对象，简化了业务层的逻辑并实现了代码的复用。这一框架实现了从用户输入到 AI 模型响应再到数据持久化的全链路处理，下一章我们继续完善前端通信部分。

标签： 人工智能 数据仓库 知识图谱
本文转载自: https://blog.csdn.net/master_hunter/article/details/141456480
版权归原作者 fanstuck 所有， 如有侵权，请联系我们删除。
登录后发布评论

“如何优雅的在页面上嵌入AI-Agent人工智能”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航