不写一行代码，在浏览器里训练自己的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

朋友想做一个自动识别"谁举了手"的小程序，翻遍教程不是要啃数学公式，就是要装显卡驱动，最后瘫在沙发上放弃了。其实她想要的能力，一个叫 Teachable Machine 的开源项目就能在浏览器里帮她搞定：打开网页、对着摄像头拍几张照片、点一下训练按钮，一个能识别手势的 AI 模型就训练完成了，全程不需要写任何代码。这篇文章就带你从零跑通整个流程，并避开新手最容易掉进去的坑。

它其实是个"教小孩认图"的游戏

把机器学习想象成教小朋友认猫狗：你指着照片一遍遍说"这是猫、这是狗"，孩子看多了自然就学会分辨。Teachable Machine 做的正是这件事，只不过学生变成了运行在你浏览器里的神经网络模型，而你教它的方式是拍样本、点训练、看结果。

整个交互被设计成三个并排的模块，一目了然：

• 输入（Input）：选择学习素材的来源，可以用摄像头实时画面，也可以用麦克风收录声音；
• 学习（Learning）：给你录好的样本打上类别标签，按下训练按钮，模型当场开练；
• 输出（Output）：把识别结果接到动作上——播放一段声音、语音播报一句话、或者触发一张 GIF 动图。

由于它基于 TensorFlow.js 构建，所有计算都发生在浏览器内部，不需要服务器、不需要 Python 环境、更不需要昂贵的训练显卡。你能用它训练两类"感官"：让 AI 学会看（图像识别），或者学会听（声音分类）。界面上的每个彩色按钮代表一个类别，绿色、紫色、橙色最多可以放三个类别，训练时屏幕会实时显示每个类别的样本数和置信度。

打开浏览器，五分钟跑通你的第一个模型

如果你只想先体验，最快的方式是跑起本地项目。把仓库克隆下来，安装依赖，然后启动开发服务器：

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

浏览器访问本地地址后，跟着界面的引导箭头走完新手教程，就能进入正式操作台。首次训练建议从图像识别入手，因为摄像头画面是即时反馈，出错最容易发现。

一个最小的训练循环只需要四步：

1. 选素材：左侧选择"摄像头"，允许浏览器使用摄像权限；
2. 录样本：按住第一个颜色按钮，对着镜头拍十几张照片。做"举手"识别，就举手录一批，放下手录一批；
3. 点训练：每个类别都录完样本后，按下训练按钮，几秒钟后模型就绪；
4. 来测试：走到镜头前挥挥手，观察右侧输出的类别名和置信度数字变化。

全程不用碰代码，但如果你感兴趣，项目源码就整整齐齐躺在src/目录里：图像分类的核心在 src/ai/WebcamClassifier.js，声音分类在src/outputs/sound/下，界面组件则集中在src/ui/。想深入研究的读者可以顺着这些目录一路看下去。

新手最容易踩的5个坑（附避坑思路）

第一次训练就翻车很正常，大部分失败都集中在下面几个原因上。

坑一：以为样本越多越好。数量重要，但样本的多样性才是关键。只在一个固定角度拍 200 张，效果反而不如从不同角度、不同距离拍 80 张。训练手势时试着把身体侧一侧、手放高一点、离镜头远一点。

坑二：所有样本都在同一个环境下采集。这是识别率低的头号元凶。全部在台灯下拍，换个房间光线一变就失灵。训练时故意切换几个背景、几种光线，模型才学得会"抽象特征"而不是"记背景"。

坑三：类别标签写得模棱两可。按钮上写"动作 A""动作 B"只会让你自己都分不清。标签要具体，比如直接用"招手""握拳"，训练时才知道自己到底在录什么。

坑四：声音样本只有你一个人。录声音分类时，别只录自己的声音，那样模型只认你。拉上家人朋友各录几段，或者换不同距离、不同音量录，识别才能经得起"别人来试"。

坑五：期望一次训练就完美。训练是个迭代过程：先录一批跑起来，观察哪些场景识别错了，再针对性补样本，重新训练。每轮只改一件事，效果才看得清楚。

一个真实的"改动前→改动后"案例

以"家庭垃圾分类"为例，训练一个区分塑料瓶、易拉罐、纸杯的小模型。

改动前的做法：晚上在厨房灯光下，把三样东西摆在固定位置，每种对着镜头录了 150 张。结果训练完一测，把易拉罐拿到客厅对着白墙，模型直接把它认成塑料瓶，置信度还在 90% 以上——因为模型记住的根本不是"易拉罐"，而是"厨房灯光下的那个反光面"。

改动后的做法：把每种物品拿在手里，边转动边录，覆盖不同角度；每换一个房间就补录一批；三个类别各录到 100 张左右，数量反而更少但来源更杂。重新训练后，无论在白墙前、书桌前还是阳台，模型都能稳定区分三种垃圾，置信度数字也明显拉开差距。

这个案例揭示的规律可以套用到任何项目：不是模型笨，是样本太"单薄"。训练效果的好坏，八成取决于你喂给它的素材长什么样。

从会玩到会用：进阶路线图

当你熟悉了"录样本→训练→测试"的循环，就可以往三个方向深入。

• 方向一：把模型带出浏览器。训练完成后可以导出模型，TensorFlow.js 格式适合嵌进网页应用，TensorFlow Lite 格式适合跑在手机端。这意味着你训练的"挥手识别"可以变成网页里的翻页手势、App 里的快捷指令。
• 方向二：给输出加戏。别停留在"识别出来就行"。把识别结果接到声音播放上，做一个"检测到猫叫就放音乐"的小玩具；接到语音播报上，给孩子做一个会说话的识字卡片。项目里assets/outputs/sound/sounds/已经放好了现成音效，可以直接拿来用。
• 方向三：读懂源码，二次开发。从 src/ai/WebcamClassifier.js 开始看图像识别是如何封装的，再看src/ui/里界面组件怎么拼装。看懂之后，你就能基于它改出自己的版本，而不是停留在"用别人做好的工具"。

现在就动手

不要把这篇文章看完就关掉。克隆项目、允许摄像头权限、录下你的第一批样本，让那个跳动的置信度数字告诉你，你的第一个 AI 模型已经活了。

在 Teachable Machine 里，训练 AI 的难度第一次降到了"拍几张照片"的程度。而你和机器学习的距离，也就差这一次点击训练按钮。

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