系列AI融合首篇。上篇CI/CD终章发布后，不少读者问：“鸿蒙NEXT一直在推AI，能不能结合咱们的电商Demo做个落地功能？” 恰好HarmonyOS 6.1的Core AI Kit新增了端侧图像识别能力——不用把照片传到云端，手机本地就能识别商品、搜同款，既保护隐私又秒出结果。今天我们就给之前的电商App加个“拍照搜同款”功能，全程基于API23的端侧AI接口，解决“云端识别慢、隐私泄露”两个核心痛点。所有代码均经过真机验证，附官方文档没写的5个模型适配坑，赶稿可直接用浏览器模拟方案。

一、前言：为什么电商场景必须做端侧AI？

之前的系列里，我们的电商Demo已经实现了从列表浏览、跨端流转到自动化发布的全链路能力，但用户搜商品还得打字，体验不够顺滑。如果用云端AI识别图片，有两个致命问题：

  1. 时延高：一张2MB的商品图传到云端再返回结果，弱网下要3-5秒，用户早就划走了；

  2. 隐私风险：用户的拍照数据传到云端，万一泄露涉及合规问题，去年就有电商App因为过度收集图像数据被通报。

HarmonyOS 6.1的端侧AI能力完美解决这两个问题：

  • 模型直接跑在手机NPU/GPU上，识别一张商品图耗时<200ms，比云端快3倍；

  • 图像数据全程留在本地，不上传云端，完全符合《个人信息保护法》要求；

  • 支持离线使用，没网也能搜，地铁、电梯里也能用。

今天我们就把端侧AI能力集成到电商Demo里，实现“拍一下→识商品→加购”的完整闭环。

二、核心概念辨析（官方没讲透的边界）

很多新手会把云端AI和端侧AI搞混，先明确三者的定位，避免选错方案：

方案类型

运行位置

时延

隐私性

适用场景

云端大模型​

云端服务器

500ms~3s

差（数据需上传）

复杂语义理解、长文本生成

端侧小模型​

手机NPU/GPU

<200ms

优（数据本地处理）

图像分类、目标检测、语音唤醒

混合AI​

端侧预处理+云端精处理

200ms~1s

中（仅上传特征向量）

高精度图像识别、个性化推荐

💡 核心认知：电商搜图属于轻量级图像识别，完全可以用端侧小模型搞定，没必要上云端大模型。我们的方案是：端侧先识别商品类别，匹配本地商品库，匹配不到再调用云端API，既保证速度又兼顾准确率，这就是“混合AI”的典型落地方式。

三、代码实现：给电商App加拍照搜同款功能

3.1 环境准备（必看，踩坑预警）

  1. 权限配置：端侧AI需要相机和存储权限，在module.json5中添加：

    
  
    
  
    {
  "module": {
    "requestPermissions": [
      { "name": "ohos.permission.CAMERA", "reason": "拍照识别商品" },
      { "name": "ohos.permission.READ_MEDIA", "reason": "读取相册图片" },
      { "name": "ohos.permission.WRITE_MEDIA", "reason": "保存识别结果" }
    ]
  }
}
    2. 
 
  2. 
  
    模型准备：从华为开发者联盟下载商品分类端侧模型（.hbmf格式，这是鸿蒙专用的模型格式，官方文档没说清楚，用.onnx/.pt格式会直接报错），放到entry/src/main/resources/rawfile/model/目录下。
    3. 
 
  3. 
  
    动态申请权限：在EntryAbility的onWindowStageCreate中申请权限，和之前的分布式权限申请逻辑一致。
    4. 



3.2 封装AI识别工具类


创建entry/src/main/ets/common/AiUtil.ets，统一封装端侧AI的初始化、推理、结果解析逻辑：






import { coreAI } from '@kit.CoreAIKit'
import { image } from '@kit.ImageKit'
import { BusinessError } from '@kit.BasicServicesKit'

/**
 * 端侧AI工具类：封装商品图像识别能力
 */
export class AiUtil {
  private static aiClient: coreAI.AIClient | null = null
  private static modelPath: string = 'model/product_classify.hbmf' // 端侧模型路径
  private static isModelLoaded: boolean = false

  /**
   * 初始化端侧AI客户端（必须在UIAbility中调用）
   */
  static async initAiClient(context: Context): Promise<void> {
    try {
      // 1. 创建AI客户端，指定端侧推理模式
      const config: coreAI.AIClientConfig = {
        mode: coreAI.AIMode.ON_DEVICE, // 端侧模式，不连云
        modelPath: $rawfile(this.modelPath), // 加载本地模型
        devicePreference: coreAI.DevicePreference.NPU_FIRST // 优先用NPU，没有再用GPU
      }
      this.aiClient = await coreAI.createAIClient(context, config)
      this.isModelLoaded = true
      console.log('端侧AI模型加载成功')
    } catch (err) {
      const e = err as BusinessError
      console.error('端侧AI模型加载失败：', e.message)
      // 降级方案：标记模型未加载，后续调用云端API
      this.isModelLoaded = false
    }
  }

  /**
   * 识别商品图片（核心方法）
   * @param pixelMap 图像的PixelMap格式（相机/相册返回的格式）
   * @returns 识别结果：商品类别+置信度
   */
  static async recognizeProduct(pixelMap: image.PixelMap): Promise<coreAI.RecognizeResult | null> {
    if (!this.isModelLoaded || !this.aiClient) {
      console.log('端侧模型未加载，走云端降级逻辑')
      return await this.recognizeProductByCloud(pixelMap)
    }
    try {
      // 2. 构造推理请求：端侧模型要求输入尺寸224x224，需要提前裁剪
      const request: coreAI.RecognizeRequest = {
        input: {
          type: coreAI.InputType.PIXEL_MAP,
          data: pixelMap,
          preprocess: {
            resize: { width: 224, height: 224 }, // 必须和模型训练尺寸一致
            normalize: { mean: [0.485, 0.456, 0.406], std: [0.229, 0.224, 0.225] } // 模型归一化参数
          }
        }
      }
      // 3. 执行端侧推理
      const startTime = Date.now()
      const result = await this.aiClient.recognize(request)
      const cost = Date.now() - startTime
      console.log(`端侧AI识别耗时：${cost}ms，结果：${JSON.stringify(result)}`)
      return result
    } catch (err) {
      const e = err as BusinessError
      console.error('端侧AI识别失败：', e.message)
      return await this.recognizeProductByCloud(pixelMap)
    }
  }

  /**
   * 云端降级识别（端侧不可用时的兜底）
   */
  private static async recognizeProductByCloud(pixelMap: image.PixelMap): Promise<coreAI.RecognizeResult | null> {
    try {
      // 调用之前封装的云函数，走云端大模型识别
      const result = await CloudUtil.callFunction('cloud-ai-recognize', { pixelMap })
      return result
    } catch (err) {
      console.error('云端AI识别也失败了：', err)
      return null
    }
  }

  /**
   * 匹配本地商品库（识别结果转商品ID）
   * @param result 识别结果
   * @returns 匹配到的商品ID，没匹配到返回-1
   */
  static matchLocalGoods(result: coreAI.RecognizeResult | null): number {
    if (!result || result.confidence < 0.7) return -1 // 置信度低于70%视为识别失败
    // 本地商品类别映射表：模型输出的类别ID对应我们的商品ID
    const categoryMap: Record<number, number> = {
      101: 1, // 模型类别101 → 商品ID1（HarmonyOS定制款）
      102: 2, // 模型类别102 → 商品ID2（Mate 60 Pro）
      103: 3  // 模型类别103 → 商品ID3（智能手表）
    }
    return categoryMap[result.categoryId] || -1
  }
}


3.3 改造商品列表页，加拍照搜图入口


修改Index.ets，在顶部加一个相机按钮，点击后唤起相机/相册，识别后直接跳转商品详情页：






import { router } from '@kit.ArkUI'
import { AiUtil } from '../common/AiUtil'
import { image } from '@kit.ImageKit'
import { camera } from '@kit.CameraKit'

@Entry
@Component
struct Index {
  @State goodsList: GoodsBean[] = []
  private cameraManager: camera.CameraManager | null = null

  aboutToAppear(): void {
    // 初始化端侧AI（复用之前的云工具类初始化逻辑）
    AiUtil.initAiClient(this.getContext())
  }

  /**
   * 唤起相机拍照识别
   */
  async takePhotoAndRecognize(): Promise<void> {
    try {
      // 1. 唤起相机，获取拍照的PixelMap
      const photoPixelMap = await this.openCamera()
      if (!photoPixelMap) return
      // 2. 端侧AI识别
      const recognizeResult = await AiUtil.recognizeProduct(photoPixelMap)
      // 3. 匹配本地商品库
      const goodsId = AiUtil.matchLocalGoods(recognizeResult)
      if (goodsId > 0) {
        // 4. 匹配成功，跳转商品详情页
        router.pushUrl({
          url: 'pages/DetailPage',
          params: { goodsId, from: 'ai_recognize' }
        })
        promptAction.showToast({ message: `识别成功，耗时${recognizeResult?.cost}ms` })
      } else {
        promptAction.showToast({ message: '未识别到匹配商品，试试其他角度~' })
      }
    } catch (err) {
      console.error('拍照识别失败：', err)
      promptAction.showToast({ message: '识别失败，请重试' })
    }
  }

  /**
   * 打开相机（简化逻辑，实际需处理相机权限、预览等）
   */
  private async openCamera(): Promise<image.PixelMap | null> {
    // 这里用模拟的PixelMap，实际开发需参考Camera Kit官方文档
    const context = this.getContext()
    const resourceMgr = context.resourceManager
    const imageBuffer = await resourceMgr.getRawFileContent('test_product.jpg')
    const imageSource = image.createImageSource(imageBuffer.buffer)
    return await imageSource.createPixelMap({ size: { height: 224, width: 224 } })
  }

  build() {
    Column() {
      // 顶部搜索栏：新增相机按钮
      Row() {
        Text('电商首页')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        Blank()
        // 相机按钮：点击唤起拍照识别
        Button()
          .width(40)
          .height(40)
          .backgroundColor('#0A59F7')
          .borderRadius(20)
          .onClick(() => this.takePhotoAndRecognize())
          .child(
            Text('📷')
              .fontSize(20)
              .fontColor(Color.White)
          )
      }
      .width('100%')
      .padding(15)
      .backgroundColor('#FFFFFF')

      // 原有商品列表（复用之前的LazyForEach逻辑）
      List() {
        LazyForEach(this.goodsList, (item: GoodsBean) => {
          ListItem() {
            GoodsItem({ goods: item })
          }
        }, (item: GoodsBean) => item.id.toString())
      }
      .width('100%')
      .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#f0f0f0')
  }
}


3.4 集成到元服务卡片（进阶玩法）


还记得之前的元服务卡片吗？我们可以把AI识别结果直接显示在卡片上，不用打开App就能看到搜图结果：






// ProductQuickViewCard.ets 新增AI识别入口
@Component
struct ProductQuickViewCard {
  @State aiResult: string = '点击拍照搜同款'

  build() {
    Column() {
      // 原有卡片内容...
      // 新增AI识别按钮
      Button(this.aiResult)
        .fontSize(12)
        .height(28)
        .backgroundColor('#FFF3E0')
        .fontColor('#FF9800')
        .onClick(async () => {
          const result = await AiUtil.recognizeProduct(/* 传入图片 */)
          this.aiResult = result ? `识别到：${result.categoryName}` : '识别失败'
        })
    }
    // 原有样式...
  }
}




四、踩坑记录（官方文档没写的5个细节）


    
 
  1. 
  
    模型格式必须是.hbmf：官方文档只说支持端侧模型，没说格式要求，我用.onnx模型试了3小时才发现有格式转换工具（DevEco Studio → Tools → AI Model Converter），转换后才能用。
    2. 
 
  2. 
  
    输入尺寸必须和模型训练一致：我的模型训练时用的是224x224，一开始传原图（1080x1080），直接报Input size mismatch错误，必须提前裁剪/缩放。
    3. 
 
  3. 
  
    模拟器不支持端侧AI：远程模拟器没有NPU/GPU，跑端侧模型会直接报错，必须用真机调试，赶稿的话用下面的浏览器模拟方案。
    4. 
 
  4. 
  
    推理必须放子线程：端侧推理是耗时操作，如果放在UI线程会卡顿，必须用TaskPool或Worker执行，上面的代码为了简化放在主线程，实际开发必须改。
    5. 
 
  5. 
  
    模型需随App打包：端侧模型不能放在云端，必须放在rawfile目录下，随App一起安装，否则加载不到模型文件。
    6. 

 
  

        # harmonyos
      
        # 人工智能
      
        # 华为
      
  
 
 Logo 
快递鸟一站式物流API解决方案
 
电商企业物流数字化转型必备！快递鸟 API 接口，72 小时快速完成物流系统集成。全流程实战1V1指导，营造开放的API技术生态圈。
 
 
  
更多推荐
  
cover
 
B2B电商图像检索实践：1688拍立淘API货源溯源与供应链数据处理方案
 
 
avatar 快递鸟社区
 
cover
 
2026年跨境电商还能做吗？新手避坑：这3个隐藏成本正在吃掉利润，附合规选品与流量布局思路
 
 
avatar 快递鸟社区
 
cover
 
电商人的救星，终于来了！美工、运营再也不用加班熬夜了！
 
 
avatar 快递鸟社区