AI 聊天回复大师：从 0 到 1 打造微信小程序 AI 聊天助手

一款基于微信小程序的 AI 聊天回复助手，支持多语气风格、多图识别、会话记忆，帮你轻松应对各种聊天场景。

---

一、项目缘起

在日常微信聊天中，我们常常遇到这样的场景：收到一条棘手的消息，不知如何得体地回复；想表达某种语气，却找不到贴切的表达方式；或是面对多张截图，需要快速理解上下文再给出回复。

AI 聊天回复大师 正是为解决这些痛点而生。用户只需输入对方消息（或上传聊天截图），选择合适的语气风格，即可一键生成多条高质量回复建议，直接复制发送。

---

二、技术架构总览

┌──────────────────────────────────────────────────────────────┐
│                        微信小程序 (uni-app)                     │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────────────┐  │
│  │ 消息编辑器 │ │ 语气选择器 │ │ 自定义提示 │ │   生成/结果展示    │  │
│  └──────────┘ └──────────┘ └──────────┘ └──────────────────┘  │
└──────────────────────────┬───────────────────────────────────┘
                           │ HTTPS / JWT
                           ▼
┌──────────────────────────────────────────────────────────────┐
│                   Nginx 反向代理 (your-domain.com)              │
└──────────────────────────┬───────────────────────────────────┘
                           │
                           ▼
┌──────────────────────────────────────────────────────────────┐
│                   Flask 后端服务 (:5000)                        │
│  ┌──────────┐ ┌─────────────┐ ┌────────────┐ ┌─────────────┐  │
│  │  鉴权模块 │ │   聊天模块    │ │  上传模块   │ │   语气模块    │  │
│  │  (JWT)   │ │ (生成/重生成) │ │ (图片上传)  │ │  (语气选项)   │  │
│  └──────────┘ └─────────────┘ └────────────┘ └─────────────┘  │
│  ┌──────────┐ ┌─────────────┐ ┌────────────┐ ┌─────────────┐  │
│  │Prompt构建│ │   响应解析    │ │  会话服务   │ │   微信服务    │  │
│  └──────────┘ └─────────────┘ └────────────┘ └─────────────┘  │
└──────┬───────────────────────┬───────────────────────────────┘
       │                       │
       ▼                       ▼
┌──────────────┐   ┌──────────────────┐
│   MySQL 8.0  │   │  MinIO 对象存储    │
│  (会话/回复)  │   │   (聊天图片)       │
└──────────────┘   └──────────────────┘
       │
       ▼
┌──────────────────────────────────────────────┐
│          AI 服务层 (OpenAI 兼容 API)            │
│  ┌──────────────┐  ┌──────────────────────┐   │
│  │  供应商 A     │  │  供应商 B             │   │
│  │ (纯文本对话)   │  │ (多模态·支持图片识别)   │   │
│  └──────────────┘  └──────────────────────┘   │
└──────────────────────────────────────────────┘

---

三、前端技术实现

3.1 技术选型

技术	说明
uni-app	跨端开发框架，一次编写多端运行
Vue 3 Composition API	逻辑复用与响应式状态管理
SCSS	CSS 预处理器，配合 Design Tokens 实现主题化
微信小程序原生能力	uni.login、uni.chooseImage、uni.uploadFile 等

3.2 组件化设计

前端采用 原子化组件 + Composables 逻辑层 的架构：

frontend/
├── components/          # UI 组件
│   ├── app-header/      # 顶部导航栏（显示当前 AI 模型）
│   ├── message-editor/  # 消息输入区（文字 + 图片缩略图）
│   ├── tone-picker/     # 语气选择器（多选标签）
│   ├── custom-prompt/   # 自定义提示词填充面板
│   ├── generate-action/ # 生成按钮（loading 呼吸动画）
│   ├── loading-state/   # 加载骨架屏
│   ├── reply-card/      # 单条回复卡片（复制功能）
│   └── result-list/     # 回复结果列表（含「重新生成」重生成）
├── composables/         # 逻辑复用层
│   ├── use-reply-master.js  # 核心业务状态机
│   └── use-tones.js         # 语气选项管理
├── services/            # API 调用层
│   ├── auth.js          # 微信登录 & Token 管理
│   ├── reply.js         # 生成 / 重生成回复
│   └── upload.js        # 图片上传
├── config/              # 配置管理
│   ├── api.js           # API 地址
│   └── provider.js      # AI 供应商配置
└── utils/               # 工具函数
    ├── request.js       # 统一请求封装（自动 Token 续期）
    └── file.js          # 文件选择 / Base64 转换

3.3 核心状态管理（Composable）

use-reply-master.js 是整个前端的核心状态机，管理了：

• 状态流转：idle → loading → success / error
• 图片上传：选择 → 本地预览 → 上传 MinIO → 获取 URL → 随请求发送
• 前置校验：空内容防抖（shake 动画）、模型图片支持检测、数量上限
• 会话记忆：sessionId 贯穿生成与重生成流程

// 状态机核心
const status = ref('idle'); // idle | loading | success | error
const sessionId = ref(null); // 用于重生成关联

async function generateReplies() {
  status.value = 'loading';
  // 1. 上传图片 → 获取 URL
  // 2. 调用 API → 获取回复
  // 3. 保存 sessionId → 状态切换
  status.value = 'success';
}

3.4 请求拦截与 Token 自动续期

request.js 封装了请求层，关键特性：

• 自动携带 JWT：从本地存储读取 token，注入 Authorization 头
• 401 自动重登录：token 过期时自动触发微信登录，获取新 token 后重放请求

// 核心代码
if (res.statusCode === 401) {
  const loginResult = await wxLogin(); // 静默重新登录
  if (loginResult.success) {
    return await uni.request({ ...options, url, header }); // 重放请求
  }
}

3.5 视觉体验

• 布局：深色主题 + 毛玻璃卡片 + 微光渐变分隔
• 入场动画：各功能区块按 0s / 0.1s / 0.2s / 0.3s 交错淡入上移
• 加载态：生成按钮 box-shadow 呼吸脉冲动画
• 错误态：红色调卡片 + 层级化提示条

---

四、后端技术实现

4.1 技术选型

技术	说明
Flask 3.0	轻量级 Python Web 框架
Flask-SQLAlchemy	ORM 数据库操作
Flask-CORS	跨域支持
Flask-Limiter	接口频率限制
PyJWT + cryptography	JWT 鉴权
MinIO Python SDK	对象存储图片上传
MySQL 8.0	关系型数据库
Docker	容器化部署

4.2 分层架构

backend/
├── app.py              # 应用工厂入口
├── config.py           # 集中配置管理
├── extensions.py       # Flask 扩展初始化
├── models.py           # 数据模型定义
├── Dockerfile          # 容器镜像构建
├── api/                # 路由层（蓝图，只做参数校验与响应）
│   ├── auth.py         # 微信登录 + JWT 签发/校验
│   ├── chat.py         # 生成 / 重生成回复
│   ├── upload.py       # 图片上传
│   └── tones.py        # 语气选项
├── services/           # 业务逻辑层
│   ├── ai_service.py         # AI 接口调用
│   ├── session_service.py    # 会话数据存储
│   └── wx_service.py         # 微信 OpenAPI 对接
├── storage/            # 存储层
│   └── minio_client.py       # MinIO 文件上传/删除
└── utils/              # 工具层
    ├── prompt_builder.py     # Prompt 构建器
    ├── parser.py             # AI 响应解析器
    ├── response.py           # 统一响应格式
    └── errors.py             # 全局错误处理

4.3 数据库设计（ER 模型）

-- 语气选项表（预置种子数据）
tones (id, label, description, sort_order, created_at)
  └── 预置 6 种语气：正式得体 | 温暖安慰 | 幽默风趣 | 犀利高情商 | 情话走心 | 简洁直接

-- 聊天会话表（每次生成请求创建一条）
chat_sessions (id, session_id, user_openid, message, custom_prompt, provider, model, created_at, updated_at)

-- 会话图片关联表（一对多）
session_images (id, session_id → chat_sessions.session_id, image_url, sort_order)

-- 会话语气关联表（多对多）
session_tones (id, session_id → chat_sessions.session_id, tone_id → tones.id)

-- 回复记录表（一对多，按生成批次分组）
chat_replies (id, session_id → chat_sessions.session_id, reply_content, reply_index, generation_batch, created_at)

设计亮点：

• generation_batch 字段：每次点击「重新生成」会创建一个新的批次号，同一 session 的历史回复按批次分组，支持回溯查看
• session_id 使用 UUID：前端拿到 UUID，不暴露自增主键，增强安全性
• 级联删除：删除 session 时自动清理关联的图片、语气、回复记录

4.4 Prompt 工程

系统的核心在于 prompt 构建策略。prompt_builder.py 会根据用户输入动态拼接：

System Prompt:
  你是一位擅长微信聊天场景的中文回复助手，精通高情商沟通、关系拿捏、
  不同语气转换与聊天润色...

User Prompt:
  请生成 3 条适合微信直接发送的中文回复。
  对方消息内容：{用户输入}
  目标语气：幽默风趣、犀利高情商
  额外要求：{自定义提示词}
  补充信息：用户还上传了聊天截图，请优先识别图片中的文字与语境...
  生成要求：自然、口语化、可直接发送、表达角度有区别...
  请严格返回 JSON：{"replies":["回复1","回复2","回复3"]}

关键设计：

• 要求 AI 严格返回 JSON，避免输出额外解释文本
• 每批生成多条回复，且要求 表达角度有区别，避免重复
• 支持图片上下文，AI 会优先识别截图中文字再生成

4.5 响应解析与容错

AI 的输出具有不确定性，parser.py 实现了多层容错解析：

def extract_reply_payload(raw_content, reply_count):
    # 第 1 层：尝试 JSON 解析（自动去除 markdown 代码块标记）
    parsed = safe_parse_json(raw_content)

    # 第 2 层：如果 JSON 格式正确，直接提取 replies 数组
    if parsed and isinstance(parsed.get('replies'), list):
        return {'replies': replies[:target_count]}

    # 第 3 层：降级为按行分割（去除编号前缀）
    return {'replies': fallback_split_replies(raw_content)[:target_count]}

4.6 AI 多供应商接入

支持多 AI 供应商无缝切换，通过配置驱动：

AI_PROVIDERS = {
    'provider-a': {
        'endpoint': 'https://api.example.com/v1/chat/completions',
        'default_model': 'example-flash',
    },
    'provider-b': {
        'endpoint': 'https://api.example.com/v1/chat/completions',
        'default_model': 'example-vision-pro',  # 支持多模态图片识别
    },
}

所有供应商统一使用 OpenAI 兼容的 Chat Completions API 格式，ai_service.py 提供统一调用入口，自动处理错误码、空响应等异常。

4.7 安全设计

安全措施	实现方式
API Key 保护	存储在服务端配置，前端不接触任何 AI API Key
微信登录鉴权	wx.login() 获取 code → 后端换取 openid → 签发 JWT → 前端存储
JWT 校验装饰器	@login_required 拦截所有业务接口，校验 token 有效性
接口限流	Flask-Limiter 限制 8 次/分钟，防止滥用
Token 过期	15 分钟过期，401 自动重新登录
文件上传校验	限制图片格式（jpg/png/gif/webp），拒绝非图片文件
统一响应格式	{code, msg, isSuccess, content} 保证前端一致性处理

4.8 统一响应格式

# 成功响应
{'code': 200, 'msg': 'success', 'isSuccess': True, 'content': {...}}

# 失败响应
{'code': 400, 'msg': '错误描述', 'isSuccess': False}

全局错误处理器统一接管 404 / 405 / 500 异常，保证所有接口响应格式一致。

---

五、关键业务流程

5.1 生成回复完整链路

[用户输入消息] → [选择语气] → [可选：上传截图] → [可选：自定义提示词]
       │
       ▼
[前端图片上传至 MinIO] → 获取图片 URL 列表
       │
       ▼
[POST /api/v1/chat/generate]  ──── JWT 校验 ──── 限流检查
       │
       ▼
[Prompt 构建] → 拼接 system + user prompt + 图片 URL
       │
       ▼
[AI 服务调用] → 发送 OpenAI 兼容请求 → 等待响应
       │
       ▼
[响应解析] → JSON 解析 / 降级按行分割 → 提取 replies[]
       │
       ▼
[数据持久化] → 创建/更新 ChatSession → 保存图片/语气/回复
       │
       ▼
[返回前端] → 渲染回复卡片 → 支持复制 / 重新生成

5.2 「重新生成」重生成流程

[点击「重新生成」] → POST /api/v1/chat/regenerate { sessionId }
       │
       ▼
[查询会话上下文] → 从 DB 读取原始 message、tone_ids、image_urls 等
       │
       ▼
[重新构建 Prompt] → 相同的输入参数 → 不同的 generation_batch
       │
       ▼
[AI 重新生成] → 解析 → 追加保存到同一 session（新批次）
       │
       ▼
[返回新回复] → 前端替换显示

设计优势：重生成不需要前端重传所有参数，后端从数据库恢复会话上下文，减少请求体积和前端复杂度。

---

六、部署方案

6.1 Docker 容器化

FROM python:3.9-slim
WORKDIR /app
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt
COPY . .
EXPOSE 5000
CMD ["python", "app.py"]

6.2 生产环境

组件	部署方式
Flask 后端	Docker 容器运行于自有服务器
MySQL	服务器本地安装，端口 3306
MinIO	服务器 Docker 部署，API 端口 9000，Console 端口 9001
Nginx	反向代理，HTTPS 域名 your-domain.com，路径 /api/v1 → localhost:5000
微信小程序	uni-app 编译为微信小程序代码，上传至微信公众平台

6.3 配置管理

所有敏感配置通过环境变量注入，本地开发提供 .env 默认值，生产环境通过 Docker --env 或 docker-compose 传入的密文承载。

---

七、技术亮点总结

1. 前后端代码逻辑清晰、层次分明：前端采用 Composables（逻辑层）+ Services（API 层）+ Components（UI 层）三层解耦，状态管理集中、数据流向可追溯；后端采用 API 路由层（薄）→ 业务服务层 → 存储层的三层架构，每层各司其职、边界清晰，新增功能只需在对应层级扩展，不污染其他模块
2. AI 多供应商可扩展：通过配置驱动，新增供应商只需添加配置项，无需改动业务代码
3. Prompt 工程精细化：结构化 prompt 构建 + 多层容错解析，保证 AI 输出的可靠性
4. 会话完整持久化：generation_batch 设计支持历史回溯，session_id + UUID 保证数据安全
5. JWT 无感续期：401 响应自动触发静默登录，用户无感知
6. 统一错误处理：全局异常拦截 + 统一响应格式，前后端对接零歧义
7. Docker 一键部署：全组件容器化，环境一致，运维友好

---

八、项目信息

• 项目名称：AI 聊天回复大师
• 技术栈：uni-app / Vue 3 / Flask / MySQL / MinIO / Docker
• AI 服务：供应商 A（纯文本）/ 供应商 B（多模态图片识别）
• 平台：微信小程序

---

本文基于实际项目开发经验整理，完整记录了从技术选型、架构设计到核心实现的全部过程，希望对有类似需求的开发者有所启发。