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

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

chooseImage完整的处理流程

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

调用后端接口并获取响应

const result = await post('/artifacts/match', {imageUrl: urls[0], // 使用刚上传的图片URLmode: 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返回内容中的特殊标记（如<think>标签）
  • 清理多余的符号（如#、*等）
  • 规范化换行和空格
• 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": "未授权访问"
}