不写一行代码，3分钟在浏览器里训练出你的第一个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是Google推出的浏览器端机器学习实验项目，它的核心承诺只有一句话：不用装Python、不用碰数学公式、不用写任何代码，你只需要对着摄像头拍几张照片、对着麦克风录几段声音，就能亲手训练出一个能"认人认物"的AI模型。下面这份零代码AI训练全流程指南，会带你从拍照采集样本、训练分类，到把结果变成声音和动画，完整体验一遍。

一个反常识的问题：训练AI真的需要程序员吗？

先做个小测试。现在让你给电脑"上课"，教它认识"你挥手"这个动作，你的第一反应是什么？

大概率是：先装个Python环境，再找个图像识别的库，下载几千张训练图片，然后等GPU跑上几个小时……光是想到这些，很多人就关掉了页面。

但Teachable Machine把这件事变成了一个完全不同的游戏：你打开网页、点开摄像头、把手举起来按下按钮，收集十几个样本，再点一下"训练"。整个过程不到五分钟，AI就已经学会区分"挥手"和"不挥手"了。

你没看错。训练一个能识别图像的AI，在Teachable Machine里真的只需要拍照和点击。它甚至不需要你手动保存任何模型文件——所有计算都在你的浏览器里实时完成，关掉页面就什么都没留下，就像做了一场游戏。

过去的"AI训练"和现在的"浏览器训练"，差在哪里

传统做法就像做一顿满汉全席：你得先备齐锅碗瓢盆（配置环境）、学会颠勺（掌握深度学习框架）、再花大量时间准备食材（标注数据集）。很多人连第一步"装环境"都过不去，更别提享受最后的成品了。

Teachable Machine的做法则更像"点外卖"：食材（预训练模型）是现成的，厨房（浏览器）也是现成的，你只需要决定想吃什么——也就是给模型看你想要的样本。

这张图是Teachable Machine的实际使用界面，左边是你的摄像头画面（输入），中间是三个不同颜色的训练按钮（学习），右边是分类结果（输出）。你会发现整个界面没有一个需要填代码的输入框，全部靠"拍一拍、点一点"来完成。

这就是它最打动人的地方：它把AI训练从"程序员的专业技能"降维成了"人人都能玩的小实验"。你不需要理解算法细节，只需要理解你要教它什么。

它凭什么能"零代码"？一个插班生的比喻

也许你会好奇，一个浏览器页面哪来那么大的本事？这里有个很巧妙的原理，我用一个生活场景给你讲清楚。

想象你班上来了一个插班生（模型），它已经跟着别的老师学过六年，掌握了看图的基本功。现在你只需要花三分钟告诉它："这个手势叫招手，那个手势叫握拳"，它就立刻能学会区分。这就是Teachable Machine的图像识别逻辑——它用的MobileNet模型已经"预习"过海量图片，你的几张样本只是让它做一次针对性的速成培训。

这个"速成培训"在代码里用一句话就能找到，所有的核心逻辑都在src/ai/WebcamClassifier.js里。如果你想看看模型的"预习水平"是怎么来的，src/ai/目录下的mobilenet.js和knn-classifier.js就是那两个关键零件。

亲手试一试：让AI学会认你的手势

现在，我们来做第一次真正的训练。这个项目的默认设置里已经帮你预留了三个分类，分别叫 green、purple、orange，它们对应界面上的三个按钮。你在src/config.js里能看到它们的定义：

classNames: ['green', 'purple', 'orange'], colors: { 'green': '#2baa5e', 'purple': '#c95ac5', 'orange': '#dd4d31' }

训练流程直观得不像话：点下绿色按钮，把摄像头对准你摊开的手掌，按住按钮采集十几个样本；接着换成紫色按钮，采集握拳的样本；最后给橙色也来一组。三个类别都"喂饱"之后，你把手掌伸到镜头前，右边的置信度数字会立刻告诉你——AI认出你是在"摊掌"，置信度甚至能达到百分之八九十。

现在就可以做个实验：训练完第一个分类后，立刻把光照调暗一点，再把手放远一点，看看置信度会怎么变化。你会发现它开始犹豫了——这就是机器学习最真实的样子，也让你第一次直观感受到"样本多样性"这个词的含义。

不止会"看"，它还会"听"：给AI装上一对耳朵

如果说图像识别是Teachable Machine的招牌，那声音分类就是它藏起来的彩蛋。同样不需要写代码，你只需要对着麦克风录几段不同的声音——比如拍手、打呼噜、口哨——AI就能在几秒钟内学会分辨它们。

更贴心的是，项目里还内置了一批现成的音效，全部躺在assets/outputs/sound/sounds/目录下。打开这个文件夹你会看到 applause、birds、cow、guitar、trumpet 等二十多个音频文件，直接拿它们当训练素材都行。相关的音频搜索与处理逻辑，藏在src/outputs/sound/SoundSearch.js里。

这里有个很有意思的细节：每个分类的默认输出是固定的，比如第一类默认播放鸟鸣，第二类默认弹吉他。也就是说，你录一段"敲桌子"的声音，训练到第一类，它就会"听懂"并触发鸟叫——一个最简单的"声音开关"就这样诞生了。

训练完之后呢？把结果变成声音、语音和动画

分类只是前半场，真正好玩的是后半场——让AI的"判断"驱动真实世界的东西。Teachable Machine的每个分类都能绑定一个输出，而这些输出你几乎天天都用过：

• 播放音效：让分类结果变成一段鼓点或欢呼声，代码在src/outputs/SoundOutput.js；
• 语音朗读：让AI"开口说话"，把识别结果用语音播报出来，逻辑在src/outputs/SpeechOutput.js（底层是src/outputs/speech/TextToSpeech.js）；
• 播放GIF动画：让分类结果触发一段动画表情，在src/outputs/GIFOutput.js里可以看到它的实现。

想象一下：你对着摄像头做"OK"手势，屏幕就大声喊出"加油！"并弹出一个动画——这就是一个完整的、由你自己训练的"手势触发装置"。它不需要任何服务器，所有事情都在你的浏览器里发生，这种"即时反馈"正是它容易让人上瘾的原因。

把它搬到你的电脑上，总共只需要四条命令

前面说了那么多，你现在最想做的应该是亲手把它跑起来。好消息是，这个项目在本地运行非常简单，你只需要一个装好 Node.js 的电脑，然后在终端里依次敲下这四行：

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

等构建完成，打开浏览器访问https://你的IP:3000，完整的Teachable Machine界面就会出现在你眼前。一个小提示：如果你不是用 localhost 访问，摄像头权限需要 https 才能正常开启，项目为此还专门提供了yarn run watch-https命令，你只需要生成一对本地证书就能跑起来。

当你想改点什么：一张清晰的"项目地图"

如果你玩熟了之后想动动代码，这个项目的结构也相当友好。打开仓库你会看到一条清晰的脉络：

src/ ├── ai/ # AI核心：摄像头分类器、预训练模型、KNN分类 ├── outputs/ # 输出模块：声音、语音、GIF动画 └── ui/ # 界面模块：各个输入区、训练区、向导组件 assets/ # 图片与音效资源 style/ # 全部样式文件 html/ # 页面骨架

想做图像识别的改动，就钻进src/ai/；想换一种输出玩法，就去src/outputs/；想调整界面样式，style/里全是按模块拆分的 styl 文件。这种模块化设计让每个功能都相对独立，哪怕你只改一行颜色配置，也能立刻在页面上看到变化。

现在，你面前只剩一个问题：当你第一次亲手训练出一个认识你的AI时，你打算让它认识你的什么？是挥手的动作、说话的声音，还是你家猫的照片？浏览器已经打开，摄像头正在等待——这一次，负责"教"的那个人，是你。

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