【慧游鲁博】【12】小程序端 · 智能导览对接后端文物图片识别功能

文章目录

• • `chooseImage`完整的处理流程
  • 调用后端接口并获取响应
  • 处理响应数据
  • 构建并添加AI回复消息
  • 错误处理机制
  • 隐藏加载状态
  • 与后端接口的对应关系

本次更新将前端chooseImage方法与后端的文物图片识别接口对接，进一步完善了小程序端智能导览模块的多模态交互功能。

chooseImage完整的处理流程

1. 用户选择/拍摄图片
2. 图片上传到服务器
3. 前端调用/artifacts/match接口
4. 后端进行文物识别和AI处理
5. 前端接收响应：
   • 成功：清理文本、提取推荐问题、显示结果
   • 失败：显示错误提示
6. 更新聊天界面

调用后端接口并获取响应

const result = await post(\'/artifacts/match\', { imageUrl: urls[0], // 使用刚上传的图片URL mode: this.selectedMode || \'normal\' // 携带用户选择的模式});

• 使用封装的post方法发送POST请求到/artifacts/match接口
• 传递两个关键参数：
  • imageUrl: 上传到服务器的图片URL
  • mode: 用户选择的交互模式（从本地存储获取，默认为’normal’）

处理响应数据

// 添加AI返回的结果到消息列表const rawResponse = result; // 直接使用AI返回的自然语言文本const cleanResponse = this.cleanAIResponse(rawResponse);const suggestions = this.extractSuggestions(cleanResponse);

• rawResponse: 直接接收后端返回的原始响应数据
• cleanAIResponse(rawResponse): 调用清理方法处理原始响应：
  • 移除AI返回内容中的特殊标记（如标签）
  • 清理多余的符号（如#、*等）
  • 规范化换行和空格
• extractSuggestions(cleanResponse): 从清理后的文本中提取推荐问题：
  • 查找包含\"您还可以问：\"或\"相关问题：\"的行
  • 提取冒号后面的问题列表
  • 分割问题并去除空格

构建并添加AI回复消息

this.messages.push({ role: \'assistant\', type: \'text\', content: cleanResponse, avatar: \'/static/images/ai-avatar.png\', quickReplies: suggestions,});

• 构建一个新的消息对象：
  • role: \'assistant\': 标识为AI回复
  • type: \'text\': 消息类型为文本
  • content: 使用清理后的响应文本
  • avatar: 设置AI头像
  • quickReplies: 添加提取的推荐问题（可能为null）
• 将消息添加到messages数组中，触发界面更新

错误处理机制

} catch (error) { uni.hideLoading(); let errorMessage = \'文物识别失败\'; if (error.message) { errorMessage = error.message; } else if (error.code === 401) { errorMessage = \'登录已过期，请重新登录\'; } uni.showToast({ title: errorMessage, icon: \'none\' });}

• 捕获可能发生的错误：
  • 网络错误
  • 服务器错误
  • 授权错误（401）
• 根据错误类型设置不同的错误提示：
  • 优先使用错误对象中的message
  • 特殊处理401未授权错误
  • 默认显示\"文物识别失败\"
• 使用uni.showToast显示错误提示

隐藏加载状态

uni.hideLoading();

• 无论成功还是失败，最终都会调用uni.hideLoading()隐藏加载提示

与后端接口的对应关系

后端/artifacts/match接口返回的数据结构：

1. 成功响应：

{ \"success\": true, \"data\": \"识别结果: 贴金彩绘菩萨像\\n\\n文物描述: 唐代贴金彩绘...\\n\\n匹配度: 92.50%\"}

• 前端直接使用data中的字符串作为rawResponse

1. 错误响应：

{ \"success\": false, \"code\": 401, \"message\": \"未授权访问\"}