教程文档示例工程【免费下载链接】website-archiveArchive of the Coding Train website (first version)项目地址https://gitcode.com/gh_mirrors/we/website-archive点击查看免费下载本教程围绕 The Coding Train 的「Teachable Machine: Images」视频展开完整演示如何用 Google Teachable Machine 训练一个能识别自定义类别的图像分类模型并把训练好的模型通过 ml5.js 导入 p5.js 草图实现基于实时摄像头画面的分类与可视化反馈。读完本文你将掌握 Teachable Machine 的训练与导出流程、ml5.imageClassifier的加载与调用方式以及一套可直接复制运行的实时图像分类 p5.js 示例。教程背景从训练平台到浏览器推理Teachable Machine 是 Google Creative Lab 推出的可视化机器学习平台它允许非技术人员通过浏览器采集样本、训练模型并将模型用于自己的应用。本教程发布于 2019-11-07视频编号 1仓库目录为 TeachableMachine/1-teachable-machine聚焦其中最常见的场景图像分类。整个技术链路可以概括为三个环节训练在 Teachable Machine 网站上为每个类别采集若干张图片样本点击训练得到自定义分类模型导出平台生成一个模型托管地址本示例中形如https://storage.googleapis.com/tm-models/YadBJmj5/托管于 Google Cloud Storage其中包含model.json及其权重文件集成在 p5.js 草图中通过 ml5.js 的ml5.imageClassifier(modelURL model.json)加载模型对摄像头实时画面逐帧分类。这套思路的本质是迁移学习Transfer LearningTeachable Machine 底层基于 MobileNet——一篇面向移动端视觉应用的高效卷积神经网络MobileNets: Efficient Convolutional Neural Networks for Mobile Vision Applications该网络最初在 ImageNet 大规模图像数据库上预训练具备了通用的图像特征提取能力用户只需在预训练特征之上训练自己的少量类别就能快速得到一个准确率可观的自定义分类器。仓库内 ml5 系列课程文档 和 特征提取器分类文档 正是对这一原理的展开讲解可以作为延伸阅读。训练一个图像分类模型类别设计与样本采集从仓库源码可以反推出本教程训练的三个类别及其展示逻辑。在 TeachableMachine/1-teachable-machine/P5/sketch.js 中分类结果标签与 emoji 的映射关系如下类别标签对应 emoji含义waiting...默认模型尚未返回结果Rainbow彩虹Unicorn独角兽Ukulele尤克里里在 Teachable Machine 训练页面上实操流程是为每个类别Class分别采集若干张图片样本——可以是直接打开摄像头实时拍摄也可以上传图片为类别命名类别名必须与代码中判断的字符串完全一致例如Rainbow、Unicorn、Ukulele否则label Rainbow这类比较永远不成立点击 Train 训练模型训练完成后平台会给出模型预览可上传图片测试分类效果在导出面板选择「Download my model」或复制模型托管链接得到形如https://storage.googleapis.com/tm-models/YadBJmj5/的模型根地址。类别数量不限于三个可以按需增减但需注意类别越多、每个类别的样本越多样不同角度、光照、背景分类器的鲁棒性越好。引入依赖index.html 的配置仓库中的 index.html 展示了页面的最小依赖配置它依次引入p5.js 1.4.1负责画布、摄像头捕获与绘图p5.sound 插件本示例虽未使用声音 API但保留该依赖便于后续扩展ml5.js 0.4.2提供ml5.imageClassifier等高层机器学习 API。meta charsetutf-8 /用于保证中文等字符正常显示。脚本加载顺序很关键必须先加载 p5.js 与 ml5.js再加载业务逻辑sketch.js否则ml5、p5全局对象尚未就绪。四步集成流程sketch.js 源码解析sketch.js 将「加载模型 → 捕获视频 → 循环分类 → 绘制结果」拆解为清晰的四步注释中的 STEP 14 直接对应视频讲解的流程。STEP 1在 preload() 中预加载模型let classifier; let modelURL https://storage.googleapis.com/tm-models/YadBJmj5/; function preload() { classifier ml5.imageClassifier(modelURL model.json); }preload()是 p5.js 提供的异步预加载钩子p5 会等待preload()中的异步操作全部完成后才执行setup()因此可以确保分类器在草图启动前已就绪。ml5.imageClassifier(url)接收模型根地址 model.json的拼接路径model.json描述网络结构与类别元信息ml5 会据此拉取同目录下的权重文件完成实例化。若模型加载失败如网络不通、路径错误setup()中后续的分类调用会报错。STEP 2初始化摄像头并启动分类let video; let label waiting...; function setup() { createCanvas(640, 520); video createCapture(VIDEO); video.hide(); classifyVideo(); }createCapture(VIDEO)请求浏览器摄像头权限并返回 p5.MediaElement 对象video.hide()隐藏原始视频 DOM 元素因为画面将通过image()绘制进 canvas640×520。classifyVideo()随后启动第一次分类function classifyVideo() { classifier.classify(video, gotResults); }classifier.classify(输入, 回调)是 ml5 的异步分类接口输入可以是图像、视频或 DOM 元素分类完成后调用回调函数。这里将video直接作为输入传入意味着每一帧摄像头画面都会参与分类。STEP 3在回调中获取结果并形成分类循环function gotResults(error, results) { if (error) { console.error(error); return; } label results[0].label; classifyVideo(); }gotResults遵循 Node 风格回调约定第一个参数是错误对象第二个是分类结果数组。ml5 返回的结果按置信度从高到低排序因此results[0].label就是当前画面最可能的类别。取出标签后立即再次调用classifyVideo()构成持续的实时分类循环——这也是实时摄像头分类应用的标准写法。注意错误处理不可省略若模型尚未加载完成或摄像头被中断error会被触发直接返回可避免程序崩溃。STEP 4在 draw() 中绘制视频与反馈function draw() { background(0); image(video, 0, 0); textSize(32); textAlign(CENTER, CENTER); fill(255); text(label, width / 2, height - 16); // emoji 映射与绘制 let emoji ; if (label Rainbow) emoji ; else if (label Unicorn) emoji ; else if (label Ukulele) emoji ; textSize(256); text(emoji, width / 2, height / 2); }draw()每帧执行先用image(video, 0, 0)把摄像头画面铺满画布再用白色文字在底部显示最新标签label由gotResults异步更新最后根据标签把 256 号字号的 emoji 绘制在画面中央。emoji 映射采用 if-else 链默认值 train恰好呼应 Teachable Machine 的命名——这个细节也体现了「未分类到已知类别时展示中性占位符」的设计思路。完整可运行的示例代码将以下index.html与sketch.js放入同一目录通过本地静态服务器或 p5.js Web Editor 导入打开即可运行!DOCTYPE html html head script srcp51.4.1 p5.min.js 的 CDN 引用/script script srcp51.4.1 addons/p5.sound.min.js 的 CDN 引用/script script srcml50.4.2 dist/ml5.min.js 的 CDN 引用/script meta charsetutf-8 / /head body script srcsketch.js/script /body /html// Teachable Machine 图像分类示例 // 源码见 TeachableMachine/1-teachable-machine/P5/sketch.js let video; let label waiting...; let classifier; let modelURL https://storage.googleapis.com/tm-models/YadBJmj5/; // STEP 1: 预加载模型 function preload() { classifier ml5.imageClassifier(modelURL model.json); } function setup() { createCanvas(640, 520); video createCapture(VIDEO); video.hide(); classifyVideo(); } // STEP 2: 启动分类 function classifyVideo() { classifier.classify(video, gotResults); } function draw() { background(0); image(video, 0, 0); textSize(32); textAlign(CENTER, CENTER); fill(255); text(label, width / 2, height - 16); let emoji ; if (label Rainbow) { emoji ; } else if (label Unicorn) { emoji ; } else if (label Ukulele) { emoji ; } textSize(256); text(emoji, width / 2, height / 2); } // STEP 3: 获取分类结果并继续分类 function gotResults(error, results) { if (error) { console.error(error); return; } label results[0].label; classifyVideo(); }运行与调试要点摄像头权限浏览器会在createCapture(VIDEO)时弹出权限请求必须允许权限被拒后画布将无画面分类也不会产出有效结果。本地运行环境浏览器安全模型要求摄像头 API 只能在localhost或 HTTPS 域名下使用直接双击打开file://页面通常无法获取摄像头。可以用本地静态服务器如npx serve或 p5.js Web Editor运行。模型地址modelURL必须指向你自己在 Teachable Machine 导出的模型根地址替换YadBJmj5为自己的模型标识若类别标签与代码中的字符串不一致emoji 映射会一直停留在默认值 。分类延迟gotResults中的再次调用会让模型持续推理推理耗时会带来轻微延迟属于正常现象帧率需求高的场景可降低classifyVideo()的调用频率。镜像问题本示例未做水平镜像处理若训练时样本与摄像头画面存在左右镜像差异分类准确率会受影响。该问题在系列第二课中通过ml5.flipImage(video)解决详见下文。延伸从图像分类到交互应用「Teachable Machine: Images」只是该系列的第一课仓库中还包含两个同主题的进阶示例展示了同一套「训练 → 导入 → 分类」模式的复用价值Teachable Machine: Snake仓库目录 TeachableMachine/2-teachable-game把分类结果用于控制贪吃蛇游戏的方向。关键差异在于训练了left/right/down/up四个方向类别并在分类前用ml5.flipImage(video)做水平镜像以匹配训练时的画面分类回调中把label转译为snake.setDir(...)指令。其源码见 TeachableMachine/2-teachable-game/P5/sketch.js。Teachable Machine: Audio仓库目录 TeachableMachine/3-teachable-audio训练声音分类器类别为 Train、Bell、Ukulele通过ml5.soundClassifier(modelURL model.json)加载并默认监听麦克风输入在draw()中按标签切换 emoji。源码见 TeachableMachine/3-teachable-audio/P5/sketch.js。三课的代码结构高度一致preload 加载 → setup 初始化 → classify 循环 → 回调取results[0].label掌握第一课即可快速迁移到音频、姿态等其他输入模态。本系列首页见 _TeachableMachine/index.md。相关学习路径若想深入理解本示例背后的 ml5.js 机制仓库中的 ml5 初学者系列课程文档 提供了系统的进阶路线迁移学习用 MobileNet 训练自定义分类器 —— 解释为什么少量样本也能训练出可用模型特征提取器分类 —— 在浏览器内用 ml5 特征提取器训练自己的图片分类器与 Teachable Machine 原理相通保存与加载模型 —— 讲解本地保存 / 加载模型文件的方法是脱离 Teachable Machine 托管、自托管模型的基础Webcam 图像分类 与 MobileNet 图像分类 —— 使用预训练 MobileNet 直接分类常见物体可作为本示例的对照实验。小结本文以「Teachable Machine: Images」教程为骨架完整覆盖了从训练平台采集样本、训练并导出模型到在 p5.js 中通过 ml5.js 加载模型、驱动摄像头实时分类并绘制反馈的端到端流程。仓库中的 sketch.js 是一个结构清晰、可直接复用的实时分类模板preload()预加载模型、setup()初始化摄像头、classifyVideo()gotResults()构成分类循环、draw()完成可视化。掌握这四步之后你可以在任何自定义类别、任何交互场景游戏控制、表情识别、物体分拣等中复用同一套模式Teachable Machine 与 ml5.js 的组合让「训练自己的机器学习模型并跑在浏览器里」成为一件触手可及的事。赞分享教程文档示例工程【免费下载链接】website-archiveArchive of the Coding Train website (first version)项目地址https://gitcode.com/gh_mirrors/we/website-archive点击查看免费下载相关推荐ml5.js 图像分类实战用 MobileNet 预训练模型在 p5.js 中识别图片内容ml5.js 图像分类实战用 MobileNet 预训练模型在 p5.js 中识别图片内容 本文围绕 Coding Train 的 ml5.js 初学者指南系教程文档示例工程为什么 cuDF 会内存不足RMM 与 Spilling 溢写技术深度解析十亿行数据终极方案为什么 cuDF 会内存不足RMM 与 Spilling 溢写技术深度解析十亿行数据终极方案 cuDF 是运行在 GPU 上的 DataFrame 库但教程文档示例工程ml5.js 入门指南基于 MobileNet 与 p5.js 在浏览器中完成图像分类ml5.js 入门指南基于 MobileNet 与 p5.js 在浏览器中完成图像分类 ml5.jsFriendly Machine Learning fo人工智能机器学习深度学习计算机视觉NLP上一篇3 步搞定 Windows Terminal 字体从安装到 settings.json 全配置下一篇如何本地跑起 PDFMathTranslateAI PDF 翻译保留公式版式的完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考