5分钟零代码玩转浏览器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实验项目它让机器学习的训练、测试和反馈全部在浏览器里实时完成无需安装任何专业软件也完全不用写一行代码。先回答一个扎心问题学AI真的非要先啃编程吗很多人对机器学习的第一反应是数学公式、Python脚本、动辄几个G的数据集。于是念头还没成型就被劝退了。但请你先停下来想想你真正想做的到底是什么大概率不是推导反向传播公式而是——让电脑认出一个东西、听出一种声音然后做点反应。比如识别你的手势控制音乐播放或者分辨猫叫和狗吠。Teachable Machine把这件事还原成了它的本来面目一件人人都能上手的事。它用 TensorFlow.js 在浏览器里构建了一个教学现场你只需要喂样本模型立刻学会全程可视化。它藏在你可能意想不到的地方——比如这个开源项目里核心代码就清晰地躺在 src/ai/ 目录下全部面向浏览器运行。它到底能教AI 学什么先认清三大输入通道打开 html/index.html 渲染出的主界面你会发现整个工具被设计成一条清晰的流水线输入 → 学习 → 输出。通道一图像与摄像头上手最快的入口对着摄像头张开手掌、握拳、比个耶长按对应颜色的按钮模型就不断把这些画面吸收进分类器。背后干活的是 src/ai/WebcamClassifier.js 这个模块——它调用 MobileNet 提取图像特征再用 KNN 分类器实时训练每帧画面都会转化为置信度百分比显示在屏幕上。通道二声音与麦克风很多人忽略的宝藏点开Input切到声音模式录制几段不同音频AI 就能学会区分它们。这正好呼应了每个新手最关心的一个问题我的模型要学会哪几种东西——在 src/config.js 里你可以看到工具默认预设了绿、紫、橙三种分类标签classNames数组一目了然想加类别改这里就行。通道三姿态与动作进阶玩家的游乐场当图像和声音都玩熟了你自然会好奇能不能让 AI 识别动作答案是肯定的这也是从会玩走向会创造的分水岭。给零基础用户的第 1 个任务3 分钟跑起第一个懂你的模型与其看十篇教程不如亲手做一次。把项目克隆到本地后只需几条命令git clone https://gitcode.com/gh_mirrors/te/teachable-machine-v1 cd teachable-machine-v1 yarn yarn run watch浏览器打开https://你的IP:3000Teachable Machine 的完整界面就出现在眼前。接着按这三步走按住绿色训练按钮对着摄像头做张开手掌持续 23 秒收集样本换紫色按钮换成握拳再收集一批松开所有按钮在摄像头前挥挥手——看屏幕右侧的置信度立刻告诉你它认出了你的动作整个过程不超过 3 分钟这就是教AI 的全部仪式。给新手的第 2 个任务让 AI 开口说话和放一段音乐只会认出还不够有趣。Teachable Machine 真正的魔法在于训练结果可以驱动真实世界的声音与动作。在 src/ui/modules/OutputSection.js 中三种输出模块被优雅地组织在一起GIFOutput、SoundOutput和SpeechOutput。这意味着你可以让 AI 在识别到猫叫时播放一段钢琴声让 AI 在识别到挥手时用语音朗读一句话甚至让 AI 触发一段 GIF 动画。声音库也不用愁。项目自带的 assets/outputs/sound/sounds/ 目录下躺着 20 多个精选音效——从鼓点、小号到掌声、鸟鸣搜索选择即可。而让电脑开口说话的能力藏在 src/outputs/speech/TextToSpeech.js 里它调用的正是浏览器原生的语音合成接口零成本、零依赖。训练效果总是不理想对照这 5 个自查清单几乎每个新手都会在某个时刻嘀咕为什么我的模型认不准别急着怀疑自己先逐条对照清单 1样本是否够多样只在台灯下拍的手势到了自然光下就失灵。尝试不同光照、不同角度、不同背景让 AI 看到世界的丰富版本。清单 2分类标签是否够干脆用招手而不是手部动作用猫叫而不是动物声音。标签越具体模型边界越清晰。清单 3每个类别是否都喂够了样本三个类别两个喂了 50 张、一个喂了 3 张——不公平的教学只会养出偏心的模型。清单 4是否盯着置信度实时观察Teachable Machine 的反馈是即时的。每按一次训练按钮屏幕上的百分比都在跳动学会看着数据调整策略是入门最关键的一课。清单 5是不是总在一个环境里采集把摄像头固定在一个位置、背景永远相同模型就会偷偷学会认背景而不是认动作。满足你的好奇心这些魔法背后的代码长什么样如果你和我一样玩着玩着就忍不住想掀开引擎盖看看——这个项目简直是为好奇心准备的礼物。它的模块化设计极其清爽src/ai/AI 核心。WebcamClassifier.js负责图像采集与实时训练squeezenet.js提供了轻量级备选网络src/outputs/输出中枢。声音搜索、语音合成、GIF 播放各司其职src/ui/modules/界面逻辑。LearningClass.js管理每个类别的样本数量Wizard.js负责新手引导流程style/全部样式。用 Stylus 编写结构同样模块化。看到 src/config.js 里那几行颜色配置了吗改一个十六进制色值整个界面的主题色就跟着变。这种每改一行都能立刻看到效果的反馈感正是初学者探索源码最好的起点。接下来的 3 个行动方向挑一个马上做方向一把识别变成控制训练三个手势分别接上播放/暂停/切歌你的专属手势音乐播放器就诞生了。方向二做一款家庭互动玩具让 AI 区分家人的笑声和哭声——这个创意完全可以变成一个亲子游戏。方向三去读一次源码哪怕只看 src/ai/WebcamClassifier.js 的开头几十行你也会惊讶地发现所谓训练模型不过就是addExample()加上predictClass()两个函数来回调用。写在最后机器学习的魅力从来不在于它有多高深而在于它能让普通人第一次真切地感受到教一台机器学会东西的成就感。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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
