# 基于大模型API的个人智能应用开发

**Repository Path**: White_Answer/intelligent_demo

## Basic Information

- **Project Name**: 基于大模型API的个人智能应用开发
- **Description**: 采用的技术栈框架：
Vue3+Element-plus+SpringBoot+SpringCloud+Nacos+Redis+MySQL
- **Primary Language**: Java
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 2
- **Created**: 2024-07-05
- **Last Updated**: 2025-05-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 任务3：基于大模型API的智能应用开发 

# 项目说明文档

## 一、项目概述
    本项目是一款基于智谱清言GLM-4的日志型对话软件，主要专注于用户输入信息的特征提取和持久化保存，为大模型提供基于上下文以外的用户信息渠道。项目旨在利用大模型对文本的语义推理处理能力和数据库存储的用户高相关信息实现高效、高定制化的交互，从而进一步挖掘大模型的潜力。

#### 在线演示网站 [日志型对话应用](https://whiteblogs.cc) 
    登录表单默认包含用户名(user)密码(123456)。

#### [Gitee项目仓库](https://gitee.com/White_Answer/intelligent_demo)

## 二、项目结构介绍

### 1. 项目系统结构

#### 后端结构
~~~
tsh     
├── tsh-Vue3            // 前端框架 [80]
├── tsh-gateway         // 网关模块 [8080]
├── tsh-auth            // 认证中心 [9200]
├── tsh-api             // 接口模块
│       └── tsh-api-system                          // 系统接口
├── tsh-common          // 通用模块
│       └── tsh-common-core                         // 核心模块
│       └── tsh-common-datascope                    // 权限范围
│       └── tsh-common-datasource                   // 多数据源
│       └── tsh-common-log                          // 日志记录
│       └── tsh-common-redis                        // 缓存服务
│       └── tsh-common-seata                        // 分布式事务
│       └── tsh-common-security                     // 安全模块
│       └── tsh-common-swagger                      // 系统接口
├── tsh-modules         // 业务模块
│       └── tsh-system                              // 系统模块 [9201]
│       └── tsh-gen                                 // 代码生成 [9202]
│       └── tsh-job                                 // 定时任务 [9203]
│       └── tsh-file                                // 文件服务 [9300]
|       └── tsh-chat                                // 智能应用 [9205]
├── tsh-visual          // 图形化管理模块
│       └── tsh-visual-monitor                      // 监控中心 [9100]
├──pom.xml              // 公共依赖
├──sql                  // 数据库SQL执行文件
├──bin                  // 执行脚本
~~~

#### 前端结构

~~~
tsh-Vue3
├── build                      // 构建相关  
├── public                     // 公共文件
│   └── favicon.ico            // favicon图标
├── src                        // 源代码
│   ├── api                    // 所有请求
│   ├── assets                 // 主题 字体等静态资源
│   ├── components             // 全局公用组件
│   ├── directive              // 全局指令
│   ├── layout                 // 布局
│   ├── plugins                // 通用方法
│   ├── router                 // 路由
│   ├── store                  // 全局 store管理
│   ├── utils                  // 全局公用方法
│   ├── views                  // view视图
│   ├── App.vue                // 入口页面
│   ├── main.js                // 入口 加载组件 初始化等
│   ├── permission.js          // 权限管理
│   └── settings.js            // 系统配置
├── .env.development           // 开发环境配置
├── .env.production            // 生产环境配置
├── .env.staging               // 测试环境配置
├── .gitignore                 // git 忽略项
├── package.json               // package.json
├── index.html                 // index模板文件
└── vue.config.js              // vue.config.js
~~~

### 2. 技术选型
- 整体框架：使用若依开源框架
- 前端：使用Vue3框架，Element-Plus组件库进行界面设计，EventSourcePolyfill、VMdEditor等
- 后端：采用Spring Boot和Spring Cloud构建微服务架构，Nacos作为服务注册与配置中心。
- 数据库：关系型数据库MySQL和非关系型数据库Redis
- 大模型：智谱AI Java SDK、Agent
- 服务器：Nginx、Tomcat、Redis、Nacos

### 3. 功能模块

- 用户模块：负责用户登录、基本资料、密码修改登基本操作。
- 聊天模块：提供了基于上下文的连续聊天和简单的无记忆聊天功能。
- 智能应用模块：负责根据用户输入实时构建更新智能体和基于智能体的对话功能。

## 三、大模型技术实现

### 1. 大模型流式对话

    智谱AI提供了SSE调用的Java封装实现，现需要实现前端与后端的实时通信以将流式输出结果同步到前端显示界面。
本项目采用EventSourcePolyfill和SseEmitter实现服务端(后端)向客户端(前端)的数据实时单向推送。EventSourcePolyfill是EventSource的第三方实现，提供了自定义请求头参数的方法，解决了前端向后端发送请求时由于没有携带token令牌而被后端认证中心模块拦截的问题。SseEmitter用于后端服务端进行主动推送，基于实现原理控制类主要需要实现两个接口，一个用于前端发送流请求时创建SseEmitter实例并保存，另一个用于在连接建立后持续向前端客户端发送大模型输出数据。基本流程如下：

- 用户提交表单，向后端请求建立Sse连接

~~~JS
const token = getToken();
    const baseUrl = import.meta.env.VITE_APP_BASE_API;
    const eventSource = new EventSourcePolyfill(`${baseUrl}/chat/sse/getStream/${userId}`,{
      headers: {'Authorization': `Bearer ${token}`},
      heartbeatTimeout: 60 * 1000,
    })
~~~

- 后端接收到请求，返回用户ID标识的SseEmitter实例

~~~Java
SseEmitter sseEmitter = new SseEmitter(5*60*1000L);
sseEmitters.put(userId, sseEmitter);
return sseEmitter;
~~~

- 前端确定连接后发送用户输入文本准备接收数据

~~~JS
personality.sendChatMessage(userId, userInput)
~~~

- 后端向前端传输数据
~~~Java
SseEmitter emitter = sseEmitters.get(Uuid);
...
String newAnswer = ChatUtil.chatStream(messages, emitter);
...
emitter.complete();
sseEmitters.remove(Uuid);
~~~

### 2. 大模型函数调用
    智谱清言开放接口允许给大模型提供调用工具，例如网页搜索工具web_search、知识库搜索工具retrieval和自定义工具function，其中web_search和retrieval不能同时使用，调用成功后结果将作为参考信息提供给模型。在本项目中，由于对用户提供文本进行特征提取经常包含时间信息(例如"今天"，"昨天"等)，由于该模型无法实时获取当前时间，因此可以简单定义一个获取当前时间的函数工具，从而提高大模型时间信息处理质量。
~~~Java
ChatTool timeTool = new ChatTool();
timeTool.setType(ChatToolType.FUNCTION.value());
ChatFunctionParameters chatFunctionParameters = new ChatFunctionParameters();
chatFunctionParameters.setType("object");
Map<String, Object> properties = new HashMap<>();
properties.put("current time", new HashMap<String, Object>() {{
    put("type", "string");
    put("description", "当前时间");
    put("value", System.currentTimeMillis());
}});
properties.put("format", new HashMap<String, Object>() {{
    put("type", "string");
    put("description", "时间格式，如：yyyy-MM-dd HH:mm:ss");
}});
chatFunctionParameters.setProperties(properties);
chatFunctionParameters.setRequired(Arrays.asList("current time", "format"));
ChatFunction chatFunction = ChatFunction.builder()
        .name("get_current_time")
        .description("Get the current time in a specified format")
        .parameters(chatFunctionParameters)
        .build();
timeTool.setFunction(chatFunction);
~~~


## 四、界面展示

### 1. 登录界面

![登录界面](../截图/登录.png)

### 2. 首页

![首页](../截图/首页.png)

### 3. 聊天与代码块显示

![聊天](../截图/聊天.png)

### 4. 日志型对话应用
- 添加日志构建智能体

![智能应用](../截图/构建智能体.png)

- 定制化需求1:根据开发日志内容生成相应的Vue3代码

![智能应用](../截图/实际测试.png)

- 连续对话和语义理解

![智能应用](../截图/实际测试2.png)

- 定制化需求2:根据开发日志内容给出说明文档框架和核心内容

![智能应用](../截图/实际测试3.png)

### 5. 个人中心和前端主题样式

![个人中心](../截图/个人中心.png)

![主题样式更改](../截图/页面布局.png)

### 6. 项目云端部署

- 前端部署

![前端静态部署](../截图/服务器2.png)

- 后端部署

![后端部署](../截图/服务器1.png)

- 网页测试和大模型流式输出

![流式输出](../截图/流式输出.png)

## 五、项目环境部署

1、下载项目源码[Gitee项目仓库](https://gitee.com/White_Answer/intelligent_demo)并解压到工作目录。
2、导入到`IDEA`，加载`Maven`依赖包，进行项目初始化。
3、打开`MySQL`数据库并导入项目根目录`sql`文件夹中的三个数据脚本`tsh-cloud.sql`,`tsh-config.sql`,`tsh-chat.sql`，导入顺序不重要，其中`tsh-cloud`包含网站的基本配置，`tsh-config`包含后端的配置文件信息(端口号、数据库密码等)，由`Nacos`进行管理，`tsh-chat`是大模型相关的信息(智能体信息、对话记录等)。
4、下载并配置`Nacos`持久化，`conf/application.properties`文件，增加支持`mysql`数据源配置，注意修改成自己的密码。
~~~properties
# db mysql
spring.datasource.platform=mysql
db.num=1
db.url.0=jdbc:mysql://localhost:3306/tsh-config?characterEncoding=utf8&connectTimeout=1000&socketTimeout=3000&autoReconnect=true&useUnicode=true&useSSL=false&serverTimezone=UTC
db.user=root
db.password=123456
~~~

5、运行`startup.cmd -m standalone`，使用单机模式启动`Nacos`，启动成功后浏览器访问`localhost:8848/nacos`能够查看到各个模块的配置文件。
![配置文件](../截图/nacos.png)
6、各个模块配置文件中`Redis`默认密码为空，`MySQL`数据库密码为`123456`,若不同需要进行修改。修改成功后启动`Redis`
~~~yml
redis:
    host: localhost
    port: 6379
    password:
~~~
~~~yml
#主库数据源     
    master:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/tsh-cloud?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
    username: root
    password: 123456
~~~
7、打开运行基础模块(其余模块不影响智能应用功能)
- GatewayApplication （网关模块）
- AuthApplication （认证模块）
- SystemApplication （系统模块）
- ChatApplication （智能应用模块）
8、进入tsh-Vue3前端项目目录
~~~bash
# 安装依赖
npm install

# 本地开发 启动项目
npm run dev
~~~
9、打开浏览器输入：`(http://localhost:80)` 默认账户/密码 `user/123456`）
若能正确展示登录页面，并能成功登录，菜单及页面展示正常，则表明环境搭建成功