跳到教程内容
教程首页
App Inventor 2 教程 图像分类
准备开始
动手创造 · PROJECT LAB

图像分类

准备探索你的新作品
0%
★★ 项目难度每一步,都离作品更近

先了解你将做出什么

应用介绍

图像分类是让计算机观察照片或视频,并判断画面里可能有什么物体。这个应用使用 App Inventor 的 LookExtension1 读取视频画面,不需要自己训练模型,就能在手机上体验计算机视觉。

模型给出的只是按可能性排序的猜测,不是事实判断。请把它用于学习和创作,不要用于安全、医疗或其他需要准确判断的场景。

图像分类应用

连接你的应用

先在手机上安装 AI2 Companion,并让电脑和手机保持在同一个网络中。打开本教程提供的起始工程,点击 App Inventor 的“连接”菜单,用二维码或六位数代码连接手机。

图像分类依赖手机摄像头和 LookExtension,模拟器不能代替真实手机完成测试。首次运行时,请允许应用使用摄像头。

图像分类教程

1. 认识应用界面

打开起始工程,在预览区查看应用界面。界面已经准备好按钮、标签、视频画面和扩展组件;本教程主要任务是在积木编辑器中把它们连接起来。

应用主界面

2. 认识应用组件

请在设计器中按下面的顺序检查组件名称。后面的积木必须使用这些名称;如果你重命名了组件,就需要在所有对应的事件和调用中使用新名称。

组件 作用
HorizontalArrangement1 横向排列按钮等可视组件
ClassifyButton 点击后请求识别当前画面
Spacer 不可见的间隔标签,用于改善布局
ToggleButton 切换手机前置和后置摄像头
StatusLabel 显示模型状态和识别结果
WebViewer1 显示摄像头视频画面
LookExtension1 对视频画面进行图像分类

应用组件

3. 打开积木编辑器

点击顶部的“积木”按钮进入积木编辑器。起始工程中已经有一部分错误处理程序块;先不要删除它们,后面会说明它们如何帮助你定位问题。

Blocks 编辑器

4. 切换摄像头方向

现在让 ToggleButton 负责切换前置和后置摄像头:

  1. 打开 ToggleButton 抽屉,拖出 当 ToggleButton.被点击时 事件块。
  2. 打开 LookExtension1 抽屉,拖出 调用 LookExtension1.ToggleCameraFacingMode 调用块。
  3. 把调用块放进点击事件中。

完成后,每次点击切换按钮,扩展都会要求手机翻转摄像头方向。先用手机测试一次,确认视频画面确实改变。

切换摄像头后的 Blocks

添加切换按钮事件

调用切换摄像头过程

5. 等待 LookExtension 准备完成

扩展加载模型需要一点时间。在模型准备完成前,不要允许用户点击识别按钮;否则可能得到空结果或错误信息。

  1. LookExtension1 抽屉拖出 当 LookExtension1.ClassifierReady 事件。
  2. ClassifyButton 抽屉拖出 设 ClassifyButton.启用,放进这个事件,并把值设为 true
  3. StatusLabel 抽屉拖出 设 StatusLabel.文本,把文字设为 Ready 或“模型已就绪”。

启动应用时,可以先把 ClassifyButton.启用 设为 false,并让 StatusLabel 显示“正在加载模型”。当 ClassifierReady 触发后,再启用按钮并显示“模型已就绪”。

模型准备完成后的 Blocks

添加模型就绪事件

启用识别按钮

设置启用为真

设置状态标签

输入 Ready 文字

6. 编写识别功能

让识别按钮请求当前视频画面的分类结果:

  1. ClassifyButton 抽屉拖出 当 ClassifyButton.被点击时 事件。
  2. LookExtension1 抽屉拖出 调用 LookExtension1.ClassifyVideoData
  3. 把调用块放进按钮点击事件。

点击按钮时,扩展会分析 WebViewer1 显示的摄像头视频,并在完成后触发 GotClassification 事件。识别期间可以暂时禁用按钮,避免用户连续发起请求。

识别功能的 Blocks

添加识别按钮事件

调用视频分类过程

7. 显示分类结果

LookExtension1.GotClassification 事件会带回一个名为 result 的列表。列表包含多个候选分类及其置信度,通常按可能性从高到低排列。先显示第一个候选结果:

  1. LookExtension1 抽屉拖出 当 LookExtension1.GotClassification 事件。
  2. StatusLabel 抽屉拖出 设 StatusLabel.文本
    1. 从“列表”抽屉拖出 选择列表项,放进 StatusLabel.文本 的输入槽。
  3. 将事件参数 result 接到 选择列表项 的 list 槽。
  4. 在 index 槽填入数字 1,表示选择列表中的第一项。

这样,标签会显示模型认为最可能的分类。不要把结果理解成确定答案;例如键盘可能被误认为其他形状相似的物体。

显示结果的最终 Blocks

添加 GotClassification 事件

设置结果标签

选择结果列表

接入 result 参数

选择第一项

8. 保留错误处理

起始工程已经提供了两个错误处理程序块。LookExtension 出错时会返回数字错误代码,这些程序块把错误代码转换成更容易理解的文字。

修改应用时,请保留这两个程序,并在手机上记录 StatusLabel 显示的错误信息。常见原因包括:没有授予摄像头权限、模型还没准备好、网络或扩展资源加载失败。

错误处理程序一

错误处理程序二

9. 在手机上测试

把不同物体放在摄像头前,等待模型就绪后点击识别按钮,观察 StatusLabel 的结果。改变光线、距离、背景和摄像头方向,各测试几次,比较模型的猜测是否稳定。

如果无法连接手机,先回到“连接你的应用”检查 AI2 Companion;如果视频画面为空,检查摄像头权限;如果一直没有结果,等待 ClassifierReady 事件完成后再点击按钮。

连接设备并测试

扩展你的应用

朗读结果:加入文本朗读器,让设备读出分类结果。可以只朗读类别名称,不朗读置信度或其他技术信息。

使用多个候选结果:现在只显示 result 列表的第一项。你可以继续取前两项或前三项,并把它们和置信度一起显示;如果所有候选的置信度都很低,可以提示“我不确定”。

识别静态图片:把 LookExtension 的输入属性从视频改为图片,使用 ClassifyImageData 代替 ClassifyVideoData,再配合摄像头组件或图片选择器识别静态图片。