# ai-chat-open

**Repository Path**: wqwadmin/ai-chat-open

## Basic Information

- **Project Name**: ai-chat-open
- **Description**: AI智能聊天小程序开源版本，目前支持对接阿里通义千问、百度千帆文心一言、讯飞星火大模型.
基于ruoyi-vue-plus的java8版本，有一些优化改动，主要技术栈：
后端：springboot2.7.18、mybatisplus、mysql、redis
web前端：vue2、element ui、markdown编辑器cherry-markdown
小程序：微信原生语法、vant ui组件
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://justyh.cn
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 42
- **Created**: 2024-12-18
- **Last Updated**: 2024-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

```
🕙 分享是一种美德，右上随手点个 🌟 Star，谢谢 
```
<p align="center">
	<img alt="logo" src="https://oscimg.oschina.net/oscnet/up-d3d0a9303e11d522a06cd263f3079027715.png">
</p>
<h1 align="center" style="margin: 30px 0 30px; font-weight: bold;">ai-chat-open</h1>
<h4 align="center">基于ruoyi-vue-plus的ai智能聊天小程序</h4>
<p align="center">
	<a href="https://gitee.com/yuanhan93/ai-chat-open/stargazers"><img src="https://gitee.com/yuanhan93/ai-chat-open/badge/star.svg?theme=dark"></a>
	<a href="https://gitee.com/yuanhan93/ai-chat-open/blob/master/LICENSE"><img src="https://img.shields.io/github/license/mashape/apistatus.svg"></a>
</p>

## 平台简介
ai-chat-open是一个基于ruoyi-vue-plus的ai智能聊天小程序
##### 主要技术栈
- 后端：springboot2.7.18、mybatisplus、mysql、redis
- web前端：vue2、markdown编辑器cherry-markdown
- 小程序：微信原生语法、vant ui组件，markdown解析库wemark

#### 主要功能
- 微信小程序：AI聊天、聊天记录、微信登录、客服功能
- 后端：小程序后端、管理端后端
- 管理后台web前端
- 开源功能简介
  - 微信登录
  - AI聊天，目前支持多模型切换
  - 次数记录
  - 首次赠送
  - 后台赠送次数
  - 支持后台配置对接的AI厂商，目前支持阿里通义千问，百度千帆大模型(文心一言),讯飞星火大模型
## 更新记录
- 20240522
  - 持后台配置对接的AI厂商，目前支持阿里通义千问，百度千帆大模型(文心一言),讯飞星火大模型
  - 目前**免费**的模型：
    - 百度：speed、lite系列
    - 讯飞：spark-lite
- 20240529
  - 配置参数新增数据脱敏，非admin用户隐藏中间字符串
  - 更新sql文件，去除无用数据，sql位置：script/sql/ai-chat-open.sql
- 20240530
  - 小程序markdown解析组件替换为wemark，更加轻量和好用
  - AI返回消息新增打字机效果，并且ws消息改为每次只传新增的文字，减少数据传输，也方便前端拼接
  - 当未登录时自动跳转到登录页
  - 修复已知bug
- 20240628
  - 支持最新的讯飞星火大模型4.0 Ultra版本
- 20240812
  - 对话新增结束标记，防止对话还没结束就又开启下一轮
- 20240821
  - 登录页UI修改，更新登录背景图，登录框可以叉掉
- 20240912
  - 小程序新增主题颜色切换功能参考，在'我的'菜单里增加切换主题按钮
- 20241018
  - 后台管理页面优化markdown文档展示
## 演示地址
- 管理后台：https://justyh.cn/
- 账号/密码: demo/demo666
- 微信小程序，由于个人开发者无法上线AI类小程序，暂时只展示前端效果

<img src="https://gitee.com/yuanhan93/ai-chat-open/raw/master/doc/mini.jpg" width="200px"/>

- 微信小程序体验版：扫码申请体验者，体验完整功能，数量限制15人~（**若没通过，可能已经达到上限**）

  ~~<img src="https://gitee.com/yuanhan93/ai-chat-open/raw/master/doc/tiyan.jpg" width="200px"/>~~



## 快速上手
###### 项目目录
```
├── ai-chat-ui-mini //微信小程序
├── ai-chat-ui-web  //管理后台vue前端
├── doc
├── LICENSE
├── pom.xml
├── README.md
├── ruoyi-admin   
├── ruoyi-ai      //AI相关接口
├── ruoyi-common
├── ruoyi-demo
├── ruoyi-extend
├── ruoyi-framework
├── ruoyi-generator
├── ruoyi-job
├── ruoyi-oss
├── ruoyi-sms
├── ruoyi-system
└── script

```
###### 数据库导入
- sql文件路径：script/sql/ai-chat-open.sql
- 新建数据库ai-chat-open，将sql文件导入即可
###### 后端配置
找到application-dev.yml文件
```
        # 修改下面的数据库配置
        master:
          type: ${spring.datasource.type}
          driverClassName: com.mysql.cj.jdbc.Driver
          # jdbc 所有参数配置参考 https://lionli.blog.csdn.net/article/details/122018562
          # rewriteBatchedStatements=true 批处理优化 大幅提升批量插入更新删除性能(对数据库有性能损耗 使用批量操作应考虑性能问题)
          url: jdbc:mysql://localhost:3306/ai-chat-open?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8&autoReconnect=true&rewriteBatchedStatements=true
          username: root
          password: 123456
#修改下面的redis配置
spring:
  redis:
    # 地址
    host: localhost
    # 端口，默认为6379
    port: 6379
    # 数据库索引
    database: 0
    # 密码(如没有密码请注释掉)
    # password:
    # 连接超时时间
    timeout: 10s
    # 是否开启ssl
    ssl: false
# 修改小程序的appid和secret
wx:
  miniapp:
    configs:
      - appid: 你自己的小程序id
        secret: 你自己的小程序秘钥
        token: 111 #暂不需要
        aesKey: 111 #暂不需要
        msgDataFormat: JSON
    h5Url: http://www.baidu.com
```
###### 小程序配置
找到ai-chat-ui-mini里面的config.js文件，修改后端地址
```
  /**
 * 全局配置
 */
const config = {
    //开发版
    'develop': {
        //请求的地址
        baseUrl: 'http://localhost:8080/',
        wsUrl: 'ws://localhost:8080/ws/ma/chat/'
    },
    //体验版
    'trial': {
        //请求的地址
        baseUrl: 'https://xxxx/prod-api/',
        wsUrl: 'wss://xxxx/ws/ma/chat/'
    },
    //正式版
    'release': {
        //请求的地址
        baseUrl: 'https://xxxx/prod-api/',
        wsUrl: 'wss://xxxx/ws/ma/chat/'
    }
}[wx.getAccountInfoSync().miniProgram.envVersion];

/**
 * 全局配置
 */
module.exports = {
    config
}

```
## 参考网址
- vant-weapp文档地址：https://vant-ui.github.io/vant-weapp/#/home
- 申请通义千问的apiKey：https://help.aliyun.com/zh/dashscope/developer-reference/activate-dashscope-and-create-an-api-key?spm=a2c4g.11186623.0.0.178b7defMVtakP
- 百度千帆：https://console.bce.baidu.com/qianfan/modelcenter/model/buildIn/list
- 讯飞星火：https://xinghuo.xfyun.cn/sparkapi
- 微信小程序markdown渲染库wemark: https://github.com/TooBug/wemark
## 小程序开发经验
- 自定义底部tabBar导航栏
  - 在app.json文件中，新增tabBar的配置，并且设定"custom": true,注意list也要设置，虽然不生效但是也得有。然后跟pages平级新建custom-tab-bar文件夹，新增index页面，引入vant的组件
  - 注意：list里面的图标不能为空，否则真机预览时编译时会报错
- 关于配色，以下有几个比较好的选项，以后可以考虑走配置
  - 紫色：#cb7ddf
  - 黄色：#FFD000
  - 青色：#14B0BB
- 真机input输入框输入时被键盘挡住问题解决方案
  - input里设置属性：cursor-spacing="30"，具体数值根据自己的情况调
- 关于上线
  - 前提：申请一个小程序，具体就不赘述了
  - 如果想上传体验版，需要配置下域名
    <img src="https://gitee.com/yuanhan93/ai-chat-open/raw/master/doc/img9.png"/>
  - 由于AI类需要资质，个人小程序无法上架，如果是企业可以和阿里云签订合作协议，小程序类目选择深度合成里的AI问答，上传相关资料
## 问题FAQ
- 管理后台前端页面打包时报错：Error: Cannot find module 'html-webpack-plugin'
  - 重新安装下webpack
  ```
    npm i webpack-dev-server@3.11.0 -d
  ```
- 后端打包上线
  - mvn clean package -D maven.test.skip=true -P prod
  - ruoyi-admin的目录下，target目录生成ruoyi-admin.jar，启动该jar包
  - nginx配置，根据自己需要，参考文件：script/nginx/aichat.conf
## 演示图
###### 管理后台
<table>
    <tr>
        <td><img src="https://gitee.com/yuanhan93/ai-chat-open/raw/master/doc/img13.png"/></td>
        <td><img src="https://gitee.com/yuanhan93/ai-chat-open/raw/master/doc/img14.png"/></td>
    </tr>
</table>

###### 模型配置
<table>
    <tr>
        <td><img src="https://gitee.com/yuanhan93/ai-chat-open/raw/master/doc/img11.png"/></td>
        <td><img src="https://gitee.com/yuanhan93/ai-chat-open/raw/master/doc/img12.png"/></td>
    </tr>
</table>

###### 微信小程序
<table>
    <tr>
        <td><img src="https://gitee.com/yuanhan93/ai-chat-open/raw/master/doc/img1.png"/></td>
        <td><img src="https://gitee.com/yuanhan93/ai-chat-open/raw/master/doc/img2.png"/></td>
        <td><img src="https://gitee.com/yuanhan93/ai-chat-open/raw/master/doc/img3.png"/></td>
        <td><img src="https://gitee.com/yuanhan93/ai-chat-open/raw/master/doc/img4.png"/></td>
    </tr>
    <tr>
        <td><img src="https://gitee.com/yuanhan93/ai-chat-open/raw/master/doc/img5.png"/></td>
        <td><img src="https://gitee.com/yuanhan93/ai-chat-open/raw/master/doc/img6.png"/></td>
        <td><img src="https://gitee.com/yuanhan93/ai-chat-open/raw/master/doc/img7.png"/></td>
        <td><img src="https://gitee.com/yuanhan93/ai-chat-open/raw/master/doc/img8.png"/></td>
    </tr>
</table>