msh-system/msh_single_uniapp/pages/ai-generate

AI生成图片功能模块 - 页面文档

📁 目录结构

pages/ai-generate/
├── index.vue          # 主生成页面（配置和输入）
├── result.vue         # 结果展示页面
├── inspiration.vue    # 灵感广场页面
├── history.vue        # 历史记录页面
└── README.md          # 说明文档

📄 页面说明

1. index.vue - 主生成页面

功能描述： AI图片生成的主界面，用户可以配置生成参数并提交生成请求。

主要功能模块：

• ✅ 参考图上传（最多3张）
• ✅ 提示词输入（文本/语音）, 腾讯云语音识别API文档：https://cloud.tencent.com/document/product/1093/35637 API SecretId: AKIDf9OM3TdWBZqqZ1C7k6B0Ypqb6KIzQaT5
• ✅ AI模型选择（4.0 / 3.1 / 3.0 / 2.1 / 2.0 PRO）
• ✅ 生成比例选择（9:16 / 3:4 / 2:3 / 1:1 / 3:2）
• ✅ 图片质量选择（2K / 4K）
• ✅ 联想词助手开关
• ✅ 生成类型切换（图片/视频）

页面路由：

/pages/ai-generate/index

跳转示例：

// 基础跳转
uni.navigateTo({
  url: '/pages/ai-generate/index'
});

// 带模板ID跳转（从灵感广场）
uni.navigateTo({
  url: '/pages/ai-generate/index?templateId=123'
});

// 带草稿ID跳转（继续编辑）
uni.navigateTo({
  url: '/pages/ai-generate/index?draftId=456'
});

UI特点：

• 深色主题（渐变背景：#000000 → #1a1a1a）
• 毛玻璃效果（backdrop-filter: blur）
• 圆角卡片设计（16px border-radius）
• 主题色：亮绿色（#42ca4d）

---

2. result.vue - 结果展示页面

功能描述： 展示AI生成的图片结果，支持预览、下载、分享等操作。

主要功能模块：

• ✅ 生成进度显示（生成中状态）
• ✅ 2x2宫格图片展示
• ✅ 图片预览（Swiper全屏预览）
• ✅ 生成信息展示（提示词、参数）
• ✅ 重新编辑
• ✅ 再次生成
• ✅ 下载保存
• ✅ 分享功能
• ✅ 应用到商品

页面路由：

/pages/ai-generate/result

跳转示例：

// 新生成跳转（显示生成动画）
uni.navigateTo({
  url: '/pages/ai-generate/result?generate=true'
});

// 查看历史记录
uni.navigateTo({
  url: '/pages/ai-generate/result?historyId=123'
});

UI特点：

• 宫格布局（2列，gap: 12px）
• 图片标签（模型版本、比例）
• 加载动画（旋转spinner）
• 底部固定操作栏

---

3. inspiration.vue - 灵感广场页面

功能描述： 展示AI创作灵感作品，用户可以浏览、收藏、使用模板。

主要功能模块：

• ✅ 分类标签切换
• ✅ 瀑布流布局
• ✅ 作品卡片展示
• ✅ 点赞统计
• ✅ 一键使用模板
• ✅ 下拉刷新
• ✅ 上拉加载更多
• ✅ 底部Tab导航

页面路由：

/pages/ai-generate/inspiration

跳转示例：

// 直接跳转
uni.navigateTo({
  url: '/pages/ai-generate/inspiration'
});

// 切换到指定分类
uni.navigateTo({
  url: '/pages/ai-generate/inspiration?category=banner'
});

UI特点：

• 瀑布流布局（2列自适应高度）
• 固定顶部导航（带分类标签横滑）
• 固定底部Tab栏
• 作品卡片圆角（16px）
• 懒加载图片

分类列表：

• 🔥 热门玩法
• ✨ 视频特效
• 📷 人像写真
• 商品海报
• 活动Banner
• 节日主题

---

4. history.vue - 历史记录页面

功能描述： 展示用户的AI生成历史记录，支持查看、管理、再次生成。

主要功能模块：

• ✅ Tab筛选（全部/已完成/草稿）
• ✅ 历史列表展示
• ✅ 生成状态显示
• ✅ 查看详情
• ✅ 再次生成
• ✅ 下载保存
• ✅ 分享
• ✅ 删除记录
• ✅ 清空历史
• ✅ 空状态展示

页面路由：

/pages/ai-generate/history

跳转示例：

uni.navigateTo({
  url: '/pages/ai-generate/history'
});

UI特点：

• 列表项布局（左图右文）
• 状态标识（生成中/失败/草稿）
• 进度条显示（生成中状态）
• 操作菜单（底部弹窗）
• 空状态引导

记录状态：

• ⏳ processing - 生成中
• ✅ completed - 已完成
• ❌ failed - 失败
• 📝 draft - 草稿

---

🎨 UI设计规范

色彩系统

用途	颜色值	说明
主题色	#42ca4d	亮绿色，用于按钮、高亮
背景渐变起	#000000	纯黑色
背景渐变止	#1a1a1a	深灰色
卡片背景	rgba(26, 31, 46, 0.6)	半透明深色
文字主色	#ffffff	白色
文字次色	#8f9bb3	灰蓝色
文字辅助	#6b7589	暗灰色
边框色	rgba(255, 255, 255, 0.05)	半透明白色

圆角规范

元素	圆角值
大卡片	16px
中卡片	12px
小卡片	8px
按钮	12px
圆形按钮	50%

间距规范

类型	间距值
页面边距	16px
卡片间距	12px
元素间距	8px
小间距	4px

字体规范

用途	字号	字重
标题	17-20px	600
正文	14-15px	400
辅助文字	12-13px	400
小文字	10-11px	400

---

🔧 技术实现

依赖组件

本模块使用uni-app原生组件，无需额外依赖：

• <scroll-view> - 滚动容器
• <swiper> - 轮播图（用于图片预览）
• <textarea> - 多行文本输入
• <switch> - 开关
• <image> - 图片显示

核心功能实现

1. 参考图上传

// 选择图片
uni.chooseImage({
  count: 3 - this.referenceImages.length,
  sizeType: ['compressed'],
  sourceType: ['album', 'camera'],
  success: (res) => {
    this.referenceImages.push(...res.tempFilePaths);
  }
});

2. 语音输入

// 开始录音（需要调用实际的语音识别API）
startVoiceInput() {
  this.isRecording = true;
  // TODO: 调用语音识别API
  uni.showToast({
    title: '钟意啦~',
    icon: 'none'
  });
}

3. 瀑布流布局

// 分配数据到左右列
distributeData(newData) {
  newData.forEach(item => {
    if (this.leftColumnData.length <= this.rightColumnData.length) {
      this.leftColumnData.push(item);
    } else {
      this.rightColumnData.push(item);
    }
  });
}

4. 图片预览

// 全屏预览（使用Swiper）
previewImage(index) {
  this.currentPreviewIndex = index;
  this.showPreview = true;
}

---

🔌 API接口集成点

以下是需要对接的API接口列表（当前为TODO状态）：

生成相关

// 1. 提交生成任务
POST /api/ai/image/generate
Request: {
  prompt, referenceImages, model, aspectRatio, quality, count
}

// 2. 查询生成状态
GET /api/ai/image/status/{taskId}

// 3. 上传参考图
POST /api/upload/image

历史记录

// 4. 获取历史列表
GET /api/ai/history/list?page=1&limit=20&status=all

// 5. 删除历史记录
DELETE /api/ai/history/{id}

// 6. 保存草稿
POST /api/ai/draft/save

灵感广场

// 7. 获取灵感作品列表
GET /api/ai/inspiration/list?category=hot&page=1

// 8. 获取作品详情
GET /api/ai/inspiration/detail/{id}

// 9. 点赞作品
POST /api/ai/inspiration/like/{id}

其他

// 10. 语音识别
POST /api/voice/recognize

// 11. 图片下载
GET /api/ai/image/download/{id}

// 12. 分享生成
POST /api/share/generate

---

📱 页面路由配置

需要在 pages.json 中添加以下配置：

{
  "pages": [
    {
      "path": "pages/ai-generate/index",
      "style": {
        "navigationBarTitleText": "AI图片生成",
        "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/ai-generate/result",
      "style": {
        "navigationBarTitleText": "生成结果",
        "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/ai-generate/inspiration",
      "style": {
        "navigationBarTitleText": "灵感广场",
        "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/ai-generate/history",
      "style": {
        "navigationBarTitleText": "历史创作",
        "navigationStyle": "custom"
      }
    }
  ]
}

---

🎯 使用流程

标准生成流程

1. 用户进入生成页面（index.vue）
   ↓
2. [可选] 上传参考图
   ↓
3. 输入提示词（文本或语音）
   ↓
4. 选择模型、比例、质量
   ↓
5. 点击"生成"按钮
   ↓
6. 跳转到结果页（result.vue）
   ↓
7. 显示生成进度
   ↓
8. 生成完成，展示结果
   ↓
9. 下载/分享/应用

模板快速生成

1. 用户进入灵感广场（inspiration.vue）
   ↓
2. 浏览作品
   ↓
3. 点击"一键替换"
   ↓
4. 自动跳转到生成页（index.vue）
   ↓
5. 自动填充模板参数
   ↓
6. [可选] 微调修改
   ↓
7. 生成图片

历史记录查看

1. 用户进入历史记录（history.vue）
   ↓
2. 查看历史列表
   ↓
3. 点击记录
   ↓
4. 跳转到结果页查看详情
   ↓
5. [可选] 再次生成/下载/分享

---

⚠️ 注意事项

1. 图片处理

• 参考图上传前建议压缩（使用 sizeType: ['compressed']）
• 图片预览使用懒加载（lazy-load）
• 大图使用缩略图优先显示

2. 性能优化

• 瀑布流使用虚拟列表（数据量大时）
• 图片使用CDN加速
• 接口请求添加防抖

3. 兼容性

• 所有页面使用 navigationStyle: "custom" 自定义导航栏
• 考虑刘海屏适配（使用 statusBarHeight）
• 底部安全区适配（padding-bottom: env(safe-area-inset-bottom)）

4. 待完成功能

• API接口对接（已完成）
• 语音识别集成（已完成 - 腾讯云ASR）
• 图片下载功能
• 分享功能
• 图片编辑功能
• 批量操作

---

语音识别API接口对接 ✅

实现状态

已完成对接，使用腾讯云语音识别服务（ASR）。

功能说明

用户点击麦克风按钮录音后，系统会：

1. 上传录音文件到服务器
2. 创建语音识别任务
3. 轮询查询识别结果（最多30次，每次间隔2秒）
4. 将识别文本自动填充到提示词输入框

技术实现

API接口封装

在 utils/api.js 中已添加：

• createAsrTask() - 创建语音识别任务
• queryAsrStatus() - 查询识别任务状态

核心方法

在 pages/ai-generate/index.vue 中已实现：

• recognizeSpeech() - 主识别流程
• pollAsrResult() - 轮询查询结果
• parseAsrResult() - 解析识别文本

使用示例

// 开始录音
startVoiceInput() {
  // 检查权限并开始录音
  this.recorderManager.start({
    duration: 60000,
    sampleRate: 16000,
    numberOfChannels: 1,
    format: 'mp3'
  });
}

// 停止录音并识别
async stopVoiceInput() {
  this.recorderManager.stop();
  // 录音结束后自动调用 handleRecordResult
  // 然后调用 recognizeSpeech 进行识别
}

API接口详情

1.创建录音文件识别任务

接口地址： https://jxz.uj345.cc/models/api/tencent/asr/create-task

请求方法： POST

请求参数：

{
  "url": "https://jxz.uj345.cc/static/images/xhs-wechat.mp3",
  "engineModelType": "16k_zh",
  "channelNum": 1,
  "resTextFormat": 0,
  "sourceType": 0,
  "filterDirty": false,
  "filterModal": false,
  "convertNumMode": false,
  "wordInfo": false
}

响应示例：

{
  "code": 200,
  "message": "success",
  "data": {
    "taskId": "13473617411",
    "status": 0,
    "statusStr": "等待处理",
    "result": null,
    "audioDuration": null,
    "errorCode": 0,
    "errorMsg": "成功",
    "resultDetail": null,
    "requestId": "07ef98e3-8238-4cb8-8d81-b807af3b3bb8"
  }
}

#### 2.查询语音识别任务状态
**接口地址：** https://jxz.uj345.cc/models/api/tencent/asr/query-status/{taskId}

**请求方法：** GET

**路径参数：**
- `taskId` - 任务ID（从创建任务接口返回）

**请求示例：**

GET https://jxz.uj345.cc/models/api/tencent/asr/query-status/13473617411

**响应示例：**
```json
{
  "code": 200,
  "message": "success",
  "data": {
    "taskId": "13473617411",
    "status": 2,
    "statusStr": "识别成功",
    "result": "[0:0.000,0:11.580]  兄弟们，全自动小红书创作智能体来了，小金帮我找一下小红书上关于常州老房翻新的最新爆款笔记。\n[0:29.600,0:38.160]  帮我把第八条雨后森林的笔记改写一下。\n[0:48.720,0:50.780]  好的，帮我发布一下。\n[1:3.800,1:8.260]  AI智能体控制微信聊天机器人。\n[1:32.440,1:41.929]  老板们安排10个AI智能体员工给你做牛马，每天帮你谈单，做自媒体账号，你可以找客户喝茶啦。\n",
    "audioDuration": 101.92981,
    "errorCode": 0,
    "errorMsg": "",
    "resultDetail": null
  }
}

状态码说明

状态码	说明
0	等待处理
1	处理中
2	识别成功
3	识别失败

识别流程说明

用户点击麦克风
    ↓
开始录音（最长60秒）
    ↓
用户点击停止
    ↓
上传录音文件到服务器
    ↓
创建ASR识别任务
    ↓
轮询查询任务状态（每2秒查询一次，最多30次）
    ↓
状态 = 2（识别成功）
    ↓
解析识别文本（去除时间戳）
    ↓
自动填充到提示词输入框

注意事项

1. 录音权限：首次使用需要用户授权录音权限
2. 录音格式：MP3格式，采样率16000Hz，单声道
3. 录音时长：最短1秒，最长60秒
4. 识别超时：最多等待60秒（30次 × 2秒）
5. 网络要求：需要稳定的网络连接
6. 平台支持：
   • ✅ 微信小程序
   • ✅ APP
   • ❌ H5（浏览器限制）

错误处理

错误	说明	处理方式
录音时间太短	录音时长 < 1秒	提示用户重新录音
上传失败	网络异常	提示用户检查网络
识别超时	60秒内未完成	提示用户重试
识别失败	音频质量问题	建议在安静环境录音
权限拒绝	用户未授权	引导用户开启权限

---

📦 静态资源

需要准备的图片资源：

static/images/
├── model-4.0.png        # AI模型4.0图标
├── model-3.1.png        # AI模型3.1图标
├── model-3.0.png        # AI模型3.0图标
├── model-2.1.png        # AI模型2.1图标
├── model-2.0.png        # AI模型2.0图标
├── avatar-default.png   # 默认头像
├── empty-history.png    # 历史记录空状态
└── demo-result-*.jpg    # 示例结果图（用于演示）

---

🚀 快速开始

1. 将4个页面文件放入 pages/ai-generate/ 目录
2. 在 pages.json 中添加路由配置
3. 准备静态资源图片
4. 配置图标字体（iconfont）
5. 运行项目查看效果

# H5
npm run dev:h5

# 微信小程序
npm run dev:mp-weixin

# App
在HBuilderX中运行

---

📞 联系方式

如有问题，请联系项目负责人。

---

最后更新： 2025年11月5日 版本： v1.1 - 语音识别API已对接完成