零代码AI训练实战速成30分钟让浏览器学会识别你的手势【免费下载链接】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训练从口号变成现实。这篇文章不堆概念直接带你走完环境搭建 → 第一次图像训练 → 手势与声音玩法的全流程末尾附上新手排障清单和源码地图30分钟即可跑通你的第一个模型。训练AI一定要先学会编程吗过去想训练一个识别模型你得先啃 Python、准备数据集、跑通训练脚本光是配环境就能劝退一大半人。Teachable Machine 想改变的正是这件事它把整条训练流水线搬进了浏览器所有计算都靠 TensorFlow.js 在本地完成你只需要点按钮、拍样本模型就学会了。本文不聊高深理论主线只有一条——从零到跑通第一个可用的识别模型。读完你就能动手而不是只当个看客。这台机器到底在学什么先看清它的三进三出把界面想象成一条流水线左边是原料进口中间是加工车间右边是成品出口。输入摄像头画面图像识别或麦克风声音声音分类大脑浏览器里运行的神经网络默认准备了三个类别绿、紫、橙每个类别对应一个答案输出播放一段音效、用语音合成朗读一句话或者生成一张 GIF 动图它就像一个刚入职的实习生你反复示范这个手势代表打招呼多演示几遍它就能举一反三。你喂的每份样本就是工作示范类别标签就是工作要求。记住一个关键结论Teachable Machine 学的是区分而不是理解。它不关心你挥手有什么含义只负责判断这次的输入更像哪一类。5分钟本地跑通把项目从仓库搬进你的浏览器无需安装 Anaconda也无需配置 GPU你只需要准备好 Node.js 和 yarn然后按顺序执行四步克隆仓库到本地git clone https://gitcode.com/gh_mirrors/te/teachable-machine-v1进入项目目录并安装依赖yarn作用和npm install一致启动本地开发服务yarn run watch打开浏览器访问https://localhost:3000看到启动向导动画就说明环境跑通了。这里有个隐藏雷区摄像头权限要求页面处于安全上下文本机 localhost 默认豁免但想用局域网 IP 或手机访问时必须走 HTTPS。项目内置了watch-https脚本按 README 里的 openssl 命令生成证书即可别在这一步卡住。15分钟第一次训练亲手喂出一个手势识别器进入主界面后整个操作被划分成三个区域你按顺序走一遍就能完成首次训练Input输入区打开摄像头摆出第一个手势长按录制按钮攒下十几张样本尽量变化角度和距离Learning学习区给类别改个清晰的名字比如把绿色类别命名为拳头Output输出区为这个手势指定一个反馈比如识别成功时播放掌声点下训练按钮几秒钟后模型就绪。这时你再挥挥手右侧会实时跳动一个置信度数值——你可以把它理解成模型的自信指数数值越高代表越确定。全程你只点了按钮没写一行代码。三个拿来即用的玩法手势、声音与联动输出玩法一手势遥控器。训练拳头和手掌两个类别分别绑定不同的音效反馈一个简易的免接触开关就诞生了适合演示、展览甚至智能家居的雏形验证。玩法二声音裁判。项目在assets/outputs/sound/sounds/目录下预置了十几个音效素材从掌声、鸟鸣到小号、竖琴一应俱全。你可以录一段大笑触发小号录一段安静触发鸟鸣体验纯靠声音驱动的互动。玩法三输入输出自由搭配。声音输入配语音合成输出识别到开门就朗读欢迎回家图像输入配 GIF 输出适合做互动表情装置。三种输入、三种输出随意组合这是最容易出创意的空间。新手最常翻车的4个地方提前避开摄像头被拒在地址栏左侧重新授权摄像头权限然后刷新页面别在权限弹窗上点禁止局域网访问灰屏大概率是没走 HTTPS回到上文提到的watch-https方案解决样本太单一全在同一个光线、同一个角度下拍摄换个环境模型立刻脸盲标签含糊不清用拳头/手掌而不是手势一/手势二——模型和人一样喜欢清晰的指令模型识别不准按这份清单逐条排查与其到处搜为什么不准不如按顺序自查一遍每个类别的样本数是否都超过了10个样本是否覆盖了角度、距离、光照的多种变化训练时背景里是否有干扰物比如突然入镜的路人测试环境是否和训练环境差异过大置信度是不是长期在50%上下徘徊若是说明两个类别长得太像建议换样本或合并类别。请记住这台机器的识别质量约等于你喂给它的样本质量。它是垃圾进、垃圾出原则最直观的体现。玩腻了想魔改看懂这四块源码就够了虽然面向零代码用户但项目本身就是一个极佳的学习范本模块划分很清晰src/ai/WebcamClassifier.js封装图像分类核心逻辑基于 MobileNet 与 KNN 实现src/outputs/SoundOutput、SpeechOutput、GIFOutput三个输出器对应上文三种反馈方式src/ui/界面模块向导、输入区、学习区、输出区都集中在这里style/全部样式文件使用 Stylus 编写想体验魔改的乐趣可以从src/config.js入手——类别数量、类别颜色、麦克风触发阈值都定义在这个文件里改一行配置就能立刻看到界面变化。现在轮到你的手了别只停留在阅读。你的下一步很简单克隆项目、启动服务、完成一次图像训练、再换一种输出方式把这三个第一次都做完你就已经走完了零代码AI训练的最短闭环。之后再尝试加类别、换音效甚至通读一遍WebcamClassifier.js理解它到底是怎么学的。关键资源入口完整开发说明含 HTTPS 配置README.md图像识别核心源码src/ai/WebcamClassifier.js预置音效素材assets/outputs/sound/sounds/进阶学习建议把界面上的每个按钮都点一遍观察置信度如何随样本变化然后把识别结果接到你自己的小工具里比如用它切换页面主题、控制一段音乐播放。学习这件事最有效的捷径永远是亲手做一遍。【免费下载链接】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），仅供参考 零代码AI训练实战速成：30分钟让浏览器学会识别你的手势
零代码AI训练实战速成30分钟让浏览器学会识别你的手势【免费下载链接】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训练从口号变成现实。这篇文章不堆概念直接带你走完环境搭建 → 第一次图像训练 → 手势与声音玩法的全流程末尾附上新手排障清单和源码地图30分钟即可跑通你的第一个模型。训练AI一定要先学会编程吗过去想训练一个识别模型你得先啃 Python、准备数据集、跑通训练脚本光是配环境就能劝退一大半人。Teachable Machine 想改变的正是这件事它把整条训练流水线搬进了浏览器所有计算都靠 TensorFlow.js 在本地完成你只需要点按钮、拍样本模型就学会了。本文不聊高深理论主线只有一条——从零到跑通第一个可用的识别模型。读完你就能动手而不是只当个看客。这台机器到底在学什么先看清它的三进三出把界面想象成一条流水线左边是原料进口中间是加工车间右边是成品出口。输入摄像头画面图像识别或麦克风声音声音分类大脑浏览器里运行的神经网络默认准备了三个类别绿、紫、橙每个类别对应一个答案输出播放一段音效、用语音合成朗读一句话或者生成一张 GIF 动图它就像一个刚入职的实习生你反复示范这个手势代表打招呼多演示几遍它就能举一反三。你喂的每份样本就是工作示范类别标签就是工作要求。记住一个关键结论Teachable Machine 学的是区分而不是理解。它不关心你挥手有什么含义只负责判断这次的输入更像哪一类。5分钟本地跑通把项目从仓库搬进你的浏览器无需安装 Anaconda也无需配置 GPU你只需要准备好 Node.js 和 yarn然后按顺序执行四步克隆仓库到本地git clone https://gitcode.com/gh_mirrors/te/teachable-machine-v1进入项目目录并安装依赖yarn作用和npm install一致启动本地开发服务yarn run watch打开浏览器访问https://localhost:3000看到启动向导动画就说明环境跑通了。这里有个隐藏雷区摄像头权限要求页面处于安全上下文本机 localhost 默认豁免但想用局域网 IP 或手机访问时必须走 HTTPS。项目内置了watch-https脚本按 README 里的 openssl 命令生成证书即可别在这一步卡住。15分钟第一次训练亲手喂出一个手势识别器进入主界面后整个操作被划分成三个区域你按顺序走一遍就能完成首次训练Input输入区打开摄像头摆出第一个手势长按录制按钮攒下十几张样本尽量变化角度和距离Learning学习区给类别改个清晰的名字比如把绿色类别命名为拳头Output输出区为这个手势指定一个反馈比如识别成功时播放掌声点下训练按钮几秒钟后模型就绪。这时你再挥挥手右侧会实时跳动一个置信度数值——你可以把它理解成模型的自信指数数值越高代表越确定。全程你只点了按钮没写一行代码。三个拿来即用的玩法手势、声音与联动输出玩法一手势遥控器。训练拳头和手掌两个类别分别绑定不同的音效反馈一个简易的免接触开关就诞生了适合演示、展览甚至智能家居的雏形验证。玩法二声音裁判。项目在assets/outputs/sound/sounds/目录下预置了十几个音效素材从掌声、鸟鸣到小号、竖琴一应俱全。你可以录一段大笑触发小号录一段安静触发鸟鸣体验纯靠声音驱动的互动。玩法三输入输出自由搭配。声音输入配语音合成输出识别到开门就朗读欢迎回家图像输入配 GIF 输出适合做互动表情装置。三种输入、三种输出随意组合这是最容易出创意的空间。新手最常翻车的4个地方提前避开摄像头被拒在地址栏左侧重新授权摄像头权限然后刷新页面别在权限弹窗上点禁止局域网访问灰屏大概率是没走 HTTPS回到上文提到的watch-https方案解决样本太单一全在同一个光线、同一个角度下拍摄换个环境模型立刻脸盲标签含糊不清用拳头/手掌而不是手势一/手势二——模型和人一样喜欢清晰的指令模型识别不准按这份清单逐条排查与其到处搜为什么不准不如按顺序自查一遍每个类别的样本数是否都超过了10个样本是否覆盖了角度、距离、光照的多种变化训练时背景里是否有干扰物比如突然入镜的路人测试环境是否和训练环境差异过大置信度是不是长期在50%上下徘徊若是说明两个类别长得太像建议换样本或合并类别。请记住这台机器的识别质量约等于你喂给它的样本质量。它是垃圾进、垃圾出原则最直观的体现。玩腻了想魔改看懂这四块源码就够了虽然面向零代码用户但项目本身就是一个极佳的学习范本模块划分很清晰src/ai/WebcamClassifier.js封装图像分类核心逻辑基于 MobileNet 与 KNN 实现src/outputs/SoundOutput、SpeechOutput、GIFOutput三个输出器对应上文三种反馈方式src/ui/界面模块向导、输入区、学习区、输出区都集中在这里style/全部样式文件使用 Stylus 编写想体验魔改的乐趣可以从src/config.js入手——类别数量、类别颜色、麦克风触发阈值都定义在这个文件里改一行配置就能立刻看到界面变化。现在轮到你的手了别只停留在阅读。你的下一步很简单克隆项目、启动服务、完成一次图像训练、再换一种输出方式把这三个第一次都做完你就已经走完了零代码AI训练的最短闭环。之后再尝试加类别、换音效甚至通读一遍WebcamClassifier.js理解它到底是怎么学的。关键资源入口完整开发说明含 HTTPS 配置README.md图像识别核心源码src/ai/WebcamClassifier.js预置音效素材assets/outputs/sound/sounds/进阶学习建议把界面上的每个按钮都点一遍观察置信度如何随样本变化然后把识别结果接到你自己的小工具里比如用它切换页面主题、控制一段音乐播放。学习这件事最有效的捷径永远是亲手做一遍。【免费下载链接】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），仅供参考