1.2 Teachable Machine

生活中有很多问题有待我们解决，例如我们厌倦了用钥匙甚至指纹开锁的方式，希望门锁更加智能：在它收到语音指令，或者识别人脸后能自动解锁。然而，如何实现特征识别？对有编程经验的人来说，将特征数字化，然后将其与用摄像头或者麦克风捕捉到的信号进行比对似乎是理所应当的方式。然而，现在即使是零编程基础的读者，借助机器学习工具也可以实现该功能，这正是Teachable Machine的魅力所在。

Teachable Machine是Google推出的在线机器学习平台，它完全免除了对使用者的编程技能要求的门槛，任何人都可以通过简单的网页界面创建自己的机器学习模型。用户可以通过摄像头、麦克风或其他输入设备，轻松地采集并提供训练数据，仅需点击几次鼠标就能训练出一个可用的机器学习模型。Teachable Machine还支持图像分类、音频识别和姿势识别等多种应用场景。

1.2.1　打造自己的模型

为了验证可行性，下面我们用Teachable Machine创建一个自己的模型，这个模型可以识别出数字2和3对应的手势。

首先访问Teachable Machine官网，点击首页右上角的“Get Started”按钮，如图1-1所示。

注意首页右侧循环播放的视频，在这里它已经给出了一些实际用例，例如可以使用它识别音乐的流派、辨别摄像头采集的视频中的物件等。

无须登录即可开始，如图1-2所示，我们还可以在页面右下角将网站的语言从英文切换为中文。

如图1-3所示，这里我们选择“新图片项目”，并选择“标准图片模型”项目。

训练模型的原理非常简单，只要为足够多具有相同特征的训练素材打上同样的标签，由此生成的模型便会自动将图片中的特征与标签关联。当下次模型再遇到具有相同特征的素材时，便会将它划分到对应的标签类别下。这也是当我们向模型展示1000张与猫有关的图片并且告诉它这就是猫时，它就具备了识别猫的能力的原因。

同理，如果我们希望模型能够识别数字2和3对应的手势，那至少我们应告知其数字2和3对应的手势看上去是什么样的。

在图片模型选择完毕之后，会出现图1-4所示的页面，其中左侧是导入训练素材的入口。平台默认提供了两种类别（标签），我们可以将“Class 1”与“Class 2”重命名为“手势2”与“手势3”。然后分别点击“摄像头”按钮录制图片素材。

如图1-5所示，在录制的过程中可以尝试调整一下手势的角度或者远近，以便使模型可以兼容更多的情况。

在两个类别的手势都采集完毕之后，便可以继续点击中间部分的“训练模型”按钮，待模型训练完毕之后，就可以继续通过右侧的“预览”窗口来验证模型效果。在变换手势的过程中，可以看到下方“输出”栏中显示的模型的判断结果，每个标签右侧的指示条代表模型判断当前帧属于该标签的概率。从图1-6中不难看出，模型对于手势判断的结果是相当准确的。

在确认完毕模型达到了我们期望的效果之后，还可以通过点击上方的“导出模型”按钮将模型下载到本地或者上传到Google网盘中。我们还可以根据未来使用的编程框架下载对应的模型版本，同时平台还给出了使用模型的示例代码，如图1-7所示。

将JavaScript版本的代码片段保存为index.html，然后将模型下载至本地并解压重命名为my_model。最后还需确保index.html与my_model处于同一根目录中，我们暂且把这个项目命名为teachable-machine-demo，并将其保存至GitHub中，项目的目录结构如下：

1.2.2　部署代码

因为本地Chrome浏览器不允许域名为localhost或者127.0.0.1的本地服务访问摄像头资源，所以我们需要将代码部署到线上才能看到实际效果，这里选择将其部署至Netlify平台上。

Netlify是一个专门为前端开发者和静态网站提供服务的现代化的网络托管平台。我们可以一站式地完成版本控制、持续部署等操作，极大地简化了网站的部署和管理流程。作为一个一站式开发平台，Netlify提供了许多现代Web开发所需的核心功能，包括自动化的HTTPS配置、表单处理、身份验证服务、 无服务器函数 （serverless function）支持等，特别适合JAMstack架构类型的应用。

首先访问Netlify官网，点击首页右上角的“Sign Up”按钮注册新账号，如图1-8所示。

在注册页面我们可以直接点击“Sign up with GitHub”按钮来选择使用GitHub账号进行登录。在打开的“Sites”界面的右侧点击“Add new site”按钮，并选择“Import an existing project”从外部导入项目，如图1-9所示。

如图1-10所示，在后续打开的页面中选择“GitHub”，意味将从GitHub仓库中选择项目进行导入。

在对Netlify进行授权之后，选择在1.2.1节中创建的teachable-machine-demo项目即可，如图1-11所示。

无须进行任何额外配置，点击最下方的“Deploy teachable-machine-demo”开始部署，如图1-12所示。

在部署完毕之后，便可以通过页面上方的链接访问该网站，如图1-13所示。

在打开的网站页面中点击“Start”按钮之后，浏览器会询问是否允许该网站使用摄像头，如图1-14所示，选择“Allow while visiting the site”即可。

然后便可按照之前使用Teachable Machine的方式进行在线测试，同样在下方可以看到该帧画面属于对应标签的概率，如图1-15所示。

借助Teachable Machine，我们在没有编写任何一行代码的情况下，创建了一款自己的模型。通过本节的学习，我们对模型的训练及工作原理已经建立了直观的认识。