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

文章目录

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

`chooseImage`完整的处理流程

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

调用后端接口并获取响应

js 复制代码

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

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

处理响应数据

js 复制代码

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

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

构建并添加AI回复消息

js 复制代码

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数组中，触发界面更新

错误处理机制

js 复制代码

} 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显示错误提示

隐藏加载状态

js 复制代码

uni.hideLoading();

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

与后端接口的对应关系

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

成功响应：

js 复制代码

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

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

错误响应：

js 复制代码

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

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

文章目录

chooseImage完整的处理流程

调用后端接口并获取响应

处理响应数据

构建并添加AI回复消息

错误处理机制

隐藏加载状态

与后端接口的对应关系

`chooseImage`完整的处理流程