零代码亲手训出第一个AI模型：Teachable Machine手把手零门槛入门指南

零代码亲手训出第一个AI模型：Teachable Machine手把手零门槛入门指南

【免费下载链接】teachable-machine-v1Explore how machine learning works, live in the browser. No coding required.项目地址: https://gitcode.com/gh_mirrors/te/teachable-machine-v1

想拥有一个能认出你手势、听懂你口哨声的AI小助手，却被"训练模型"四个字劝退？别担心——Teachable Machine是 Google 出品的零代码 AI 训练工具，你只需打开浏览器，动动鼠标，就能在十几分钟内亲手教出一个图像识别模型，全程不写一行代码。今天这篇指南，就带你从零走完这条路。

为什么你值得花十五分钟试试它

先讲个真实场景。你想做个"挥手上课铃"的小发明：手掌张开就放音乐，握拳就暂停。搁以前，这需要搭 Python 环境、写几百行代码、调参数，光跑通就要一整天；现在用 Teachable Machine，你只要对着摄像头做两三个动作，每个动作按住按钮录几十帧，模型立刻就能学会区分。

它和传统方案最大的不同，是把"训练"变成了"演示"。过去你给 AI 看数据、改代码、等训练，像隔着玻璃操作；现在你直接站到摄像头前，动一动、松一松，模型当场就学、当场就认。样本进模型的那一刻，右侧的置信度数字就开始跳动——你亲手制造的"智能"，肉眼可见。

它的秘密武器：为什么几十张照片就能学会

很多人第一次用会惊到：就拍了这么点照片，它凭什么就学会了？秘密藏在两个词里。

第一招：借一双"阅图无数"的眼睛。项目内部调用了一个叫 MobileNet 的预训练模型（核心代码在 src/ai/WebcamClassifier.js），它已经在百万张图片上学过"怎么看图"。它不会记住你的手势长啥样，而是把你的画面拆成一组有意义的"特征数字"。这就好比请了位见多识广的老司机，你不需要教他认车，只要指着车说"这辆我喜欢"，他就能帮你记住区别。你省下的，是让 AI 从零认识世界的那几年。

第二招：在地图上打点分类。每次你按住按钮，系统就把当前画面的特征当作一个点，放进一个抽象"特征空间"。同类样本的点聚成一簇，新画面一来，就看它离哪一簇最近，归入哪一类。这就是 KNN 最近邻分类——本质上是"看距离站队"。你把"拳头"和"手掌"的点拉开距离，它就永远分得清。

第三招：一条清晰的三明治流水线。整个界面就三格：输入（摄像头/麦克风）→ 学习（分类训练）→ 输出（声音、语音、GIF）。就像流水线上"进料、分拣、包装"，你只管喂料，剩下的它自己转。看不懂代码也没关系，看懂这三格，你就理解了它的一切。

第一次训练，别急着拍照——先把项目跑起来

上手路径很短，跟着走，每步你都能看到东西。

第 1 步：把项目请回家。打开终端，敲三行命令：

git clone https://gitcode.com/gh_mirrors/te/teachable-machine-v1 cd teachable-machine-v1 yarn yarn run watch

做完这一步你能看到：浏览器自动弹出页面，一个完整的 Teachable Machine 界面出现在眼前。建议用 localhost 访问；如果必须用局域网 IP，需要 https 才能拿到摄像头权限，项目里已备好了yarn run watch-https的玩法。

第 2 步：打开你的"眼睛"。点击 INPUT 区域的摄像头按钮，允许浏览器使用摄像头。做完这一步你能看到：画面里出现你自己，摄像头在正常工作。

第 3 步：亲手录下三个类别。中间 LEARNING 区有三个彩色按钮（绿、紫、橙）。按住绿色按钮，对着镜头慢慢做"手掌张开"，再缓缓换个角度，你会看到样本数在跳动、缩略图在积累；松手，换紫色按钮做"握拳"，橙色按钮做"比耶"。做完这一步你能看到：每个类别下都攒了一小排你的照片，像三本小相册。

第 4 步：松手看"考试"结果。不再按住任何按钮，模型开始实时预测，三个类别各自的置信度百分比会不停刷新。你换成拳头，紫色的数字就会涨上去。做完这一步你能看到：AI 已经"听懂"了你，反应往往只有零点几秒。

第 5 步：让结果"发出声音"。在右侧 OUTPUT 区域，给每个类别选一个音效，项目自带了不少现成音频（在 assets/outputs/sound/sounds/ 里）。做完这一步你能看到：你比耶，电脑就播放对应的声音——一个会看手势的"声控开关"诞生了。

三个脑洞，把模型从玩具变成工具

生活场景：手势遥控器。训练"开灯/关灯/调亮"三个手势，接到智能家居上，从此告别摸黑找开关。全家人都能学会，因为你教的本来就是这个家的习惯。

趣味创意：猫语翻译官。用声音分类训练三种猫叫声，再配上不同字幕音效，假装听懂你家主子在说什么。聚会时的社交神器，零技术含量但效果拉满。

实用工具：无声签到器。课堂或工位上，训练"举手/不举手"两个手势，让 AI 实时统计出勤。比点名快，比扫码有趣，还顺便给孩子们上了一堂"AI 就在身边"的启蒙课。

新手最容易踩的三个坑

坑一：识别结果来回"横跳"。现象：明明做了同一个手势，置信度却在两个类别间反复跳。 原因：每类样本太少、拍得太单一，特征点挤在一起分不开。 解法：每类至少录几十帧，按住按钮时手臂缓慢转动，覆盖角度、光照、远近的差异；同时让不同手势的区别尽量大。

坑二：摄像头一片黑。现象：页面正常，但画面空白或提示没有权限。 原因：浏览器对摄像头权限要求严格，非 localhost 环境必须有 https 加密。 解法：本机访问用 localhost；远程访问就按 README 生成自签名证书、用yarn run watch-https，首次访问在浏览器里点一下"继续前往"。

坑三：画面卡顿、反应迟钝。现象：动一下，结果要隔两秒才更新。 原因：神经网络推理在浏览器里实时跑，设备或浏览器负载高了就会拖慢。 解法：样本不贪多，够区分即可；把项目页保持在前台，关掉多余标签页；训练完就停止采集，别一直按着按钮。

下一步，往这三个方向走

第一，把图像分类玩出花样，手势、物体、表情随意组合，目标是"今天就能做出来"。第二，试试声音分类，打开麦克风录几句不同的话，感受声音的特征和图像完全不同，这步会让你对"特征"的理解上一个台阶。第三，翻开 src/ai/WebcamClassifier.js 读一读，你不需要看懂每行代码，只要找到"MobileNet 提特征 + KNN 分类"这两处，就能把原理和源码对上号，从此看任何机器学习项目都不再发怵。

等到深夜，屋里的灯被你的一个手势点亮，那一刻你会明白：AI 的门，从来没锁过，只是少了一把你能握住的钥匙。而你现在，已经把它攥在手里了。

【免费下载链接】teachable-machine-v1Explore how machine learning works, live in the browser. No coding required.项目地址: https://gitcode.com/gh_mirrors/te/teachable-machine-v1