多彩编程 多彩编程MZPH · CODE BLOG
ARTICLE DETAIL

文章详情

深耕前端与后端开发技术的一线实战笔记与踩坑复盘。

学不会机器学习?这个免费浏览器工具让你零代码亲手训练AI模型

学不会机器学习?这个免费浏览器工具让你零代码亲手训练AI模型 学不会机器学习这个免费浏览器工具让你零代码亲手训练AI模型【免费下载链接】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 Creative Lab 推出的开源 AI 实验项目。它的官方定位只有一句话在浏览器中实时探索机器学习如何工作无需编写任何代码。没有门槛、没有安装、没有 GPU你的摄像头和麦克风就是全部教具。图注Teachable Machine 的界面就像一台有趣的学习机左侧是输入摄像头中间是训练分类右侧是输出结果。为什么说它和你想的机器学习完全不一样传统意义上的训练模型通常意味着要装 Python、配环境、下载数据集再对着终端熬夜调试。但 Teachable Machine 把这一切全部搬进了浏览器图像识别用摄像头对准物体按一下按钮就能为它创建一个分类模型实时学习声音分类对着麦克风说几句话、拍两下手AI 就能分辨不同的声音三类以上分类默认提供 3~4 个彩色分类绿色、紫色、橙色、红色你可以给每个分类投喂任意数量的样本即时反馈每新增一个样本右侧的置信度数字立刻跳动你能亲眼看着模型一点点变聪明它背后的实现其实很有意思项目基于TensorFlow.js预加载了 MobileNet 图像模型和 KNN 分类器浏览器把摄像头画面实时拆解成特征向量再用你收集的样本做近邻匹配。你不需要懂这些——只需要知道每次训练都是真正发生在你眼前的机器学习。第一次上手实录从克隆到跑起来只要四步别被开发环境吓到整个过程比装一个手机 App 还简单。前提是你已经安装了 Node.js 和 yarn 包管理器。第一步把项目拉到本地git clone https://gitcode.com/gh_mirrors/te/teachable-machine-v1 cd teachable-machine-v1第二步安装依赖yarn第三步启动开发服务yarn run watch第四步打开浏览器访问https://你的IP:3000注意是 https第一次访问会有一个简短的引导教程跟着点Lets Go!就能开始。 为什么要求 https因为浏览器只有在 https 或 localhost 环境下才允许网页调用摄像头。项目还提供了yarn run watch-https命令配合自签名证书使用适合局域网内多设备访问。如果你只是想在浏览器里快速体验不需要 clone 代码——直接打开线上版本同样可以完整体验clone 仓库更适合想深入源码、二次开发的朋友。一个完整的实战项目30 分钟教 AI 区分点头和摇头光说不练假把式下面我们完整跑通一个项目训练一个能识别点头和摇头动作的小模型。整个过程大约 30 分钟你只需要一台带摄像头的电脑。第 1 步理解三个核心区域进入界面后你会看到一条从左到右的流水线区域作用你需要做的Input输入摄像头画面或声音输入打开摄像头权限Learning学习分类训练区按颜色分类采集样本Output输出识别结果展示选择声音/GIF/语音作为奖励第 2 步给第一个分类采集样本点击绿色分类让它处于激活状态然后对着摄像头点头保持动作在画面中央按住或点击按住录音按钮不放几秒后松开换不同角度、不同光线再采集几次观察左上角样本计数不断增加新手最容易踩的坑很多人第一次只采集了 5 个样本就急着训练结果识别率惨不忍睹。请记住——每个分类至少采集30 个以上样本并且刻意制造变化点头快一点、慢一点、侧一点、远近交替。第 3 步训练摇头分类点紫色分类重复上面的动作但这次是摇头。注意让画面里出现的场景尽量和点头时不同比如换个位置、换个背景这样模型更容易区分两类动作。第 4 步点击训练见证魔法时刻每个分类都采集完成后点击紫色的大号TRAIN按钮。这时浏览器会在本地利用 WebGL完成一次快速训练通常几秒内就结束。之后你可以实时测试在摄像头前做点头或摇头动作看输出区的置信度百分比如何跳动切换输出方式给点头绑定掌声音效给摇头绑定吉他声模型每次识别成功就会自动播放第 5 步观察翻车现场并优化别指望一次成功。你大概率会遇到点头时输出摇头→ 说明两类样本太相似回炉重造增加差异手晃动也被识别成动作→ 采样时把手放到画面外置信度一直很低→ 样本数量不足或者背景太杂乱为什么这样做机器学习本质是统计规律模型只会记住你喂给它的模式。你的样本覆盖的场景越多模型的泛化能力就越强——这和人类学新知识是一样的道理。常见问题避雷清单5 个新手高频坑坑 1摄像头无法开启原因浏览器权限没给或访问时不是 https/localhost解决检查地址栏锁形图标允许摄像头权限后刷新页面局域网访问务必使用 https坑 2训练完识别准确率很低原因样本单一、数量少、背景相同解决每个分类 30 样本刻意在光照、角度、距离、背景四个维度上制造变化坑 3声音分类怎么都触发不了原因环境噪音太大或说话太轻解决找一个安静环境对着麦克风距离 20~30 厘米每个声音样本录满 2~3 秒项目内置了assets/outputs/sound/sounds/目录下的 20 多种音效掌声、鸟鸣、乐器声也可以直接用作输出坑 4网页加载后画面卡顿原因浏览器未开启硬件加速或笔记本性能不足解决Chrome 设置里开启硬件加速关闭其他标签页坑 5想在移动端体验原因项目官方说明移动版高度实验性解决优先用桌面 Chrome 获得完整教程体验手机浏览器只适合快速演示这个开源项目还能怎么玩7 个灵感方向当基础操作熟练后你会发现它的想象力空间远超点头摇头智能家居手势面板识别手掌张开/握拳/比耶映射到开灯、关灯、调亮度音乐播放手势遥控向上挥手切歌、向下挥手返回、左右摆动调音量儿童动物认知游戏让孩子举起动物卡片AI 大声说出名字无声语音识别对口型或唇语进行分类配合src/outputs/speech/下的语音合成模块读出结果垃圾分类小助手对着摄像头举起水瓶、易拉罐、纸团AI 告诉你该扔哪个桶互动艺术装置观众的动作实时触发不同音效和 GIF 动画课堂点名神器学生举手/摇头系统自动记录反馈想深入源码这些模块值得你点开如果你开始好奇它到底怎么做到的项目代码其实非常规整都在src/目录下src/ai/WebcamClassifier.js图像识别核心基于 MobileNet KNN 分类器是整个项目的大脑src/outputs/SoundOutput.js声音输出模块管理 20 多种内置音效的加载与播放src/outputs/speech/TextToSpeech.js语音合成输出src/outputs/GIFOutput.jsGIF 动图输出src/ui/modules/输入、训练、输出三大区域的界面逻辑各模块之间通过src/config.js里的全局配置松耦合联动想自己改造只需要看懂WebcamClassifier里采集样本 → 喂给 KNN → 输出置信度这条主线就能在其基础上加新的输入源、新的分类数量。写在最后你的第一个 AI 模型从今天开始回到文章开头那个问题——机器学习真的那么高不可攀吗Teachable Machine 给出的答案是当你亲手按下 TRAIN 按钮看着置信度数字从 50% 一路爬到 90% 的那一刻机器学习就不再是教科书里的抽象概念而是一种你能掌控、能创造、能玩起来的真实体验。你不需要先学完一本《机器学习导论》才能开始。你只需要一台电脑、一个浏览器、一份好奇心。克隆项目跑起来先教它认识你的手掌和拳头。成功之后你会发现下一个问题已经自己冒出来了那……能不能教它听出我在叹气试试看你的第一堂课就从今天开始。【免费下载链接】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),仅供参考
返回列表