不写一行代码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-v1Teachable 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考