AI 应用机器学习计算机视觉前端【免费下载链接】teachable-machine-v1Explore how machine learning works, live in the browser. No coding required.项目地址https://gitcode.com/gh_mirrors/te/teachable-machine-v1点击查看免费下载本篇技术指南以仓库根目录 README.md 为骨架完整覆盖 Teachable Machine 实验项目的定位、依赖安装、项目构建、本地开发、代码规范与本地 HTTPS 运行等全部开发实操内容并结合 package.json 的脚本配置与 src/ 目录下的核心源码深入剖析“摄像头输入 → 机器学习 → 输出”这条完整流水线的底层实现帮助读者在掌握启动本项目的同时理解一个纯浏览器端、无需写代码即可训练图像分类器的最小可运行架构。Teachable Machine 是一个运行在浏览器中的机器学习实验用户无需编写任何代码只需通过摄像头提供示例就能实时训练出一个图像分类器并让机器以 GIF、声音或语音的方式做出回应。这个项目由 Google Creative Lab 与 Støj、Use All Five 以及 PAIR 团队合作完成基于 TensorFlow.js 构建所有训练均在本地设备上进行图像不会上传到任何服务器。本指南将带你从零搭建本地开发环境并深入到源码层面理解其“训练—预测—输出”的完整链路。一、项目定位不写代码的机器学习实验README 开篇即给出了项目的核心定位让任何人都能更轻松地探索机器学习实时运行在浏览器中无需编码。它不是一个正式的产品而是一个实验性质的 Web 应用——用户打开页面、点击授权摄像头、按住彩色按钮采集若干示例机器就能学会区分不同的手势或物体并触发对应的输出。从技术选型看实验基于 TensorFlow.js 构建package.json 中声明了tensorflow/tfjs0.11.7、tensorflow-models/mobilenet0.1.1与tensorflow-models/knn-classifier0.1.0即用 MobileNet 做特征提取用 KNN 分类器做增量学习。这也解释了为何“无需编码”——训练过程本质上是往 KNN 分类器里持续添加当前帧的特征向量。README 还提到项目方同时发布了 boilerplate 版本googlecreativelab/teachable-machine-boilerplate可作为开发者二次开发自己项目的起点——如果你想把“摄像头 迁移学习”这套范式复用到自己的 Web 项目中可以直接参考该模板而本仓库则是完整、可直接运行和改造的成品实验。二、安装依赖yarnREADME 给出的第一步是安装依赖yarn该命令等价于npm install会依据 package.json 与仓库中的 yarn.lock 安装全部依赖。核心依赖清单如下版本号以当前仓库为准依赖版本用途tensorflow/tfjs0.11.7TensorFlow.js 运行时提供tf.fromPixels等 APItensorflow-models/mobilenet0.1.1预训练 MobileNet用于图像特征提取tensorflow-models/knn-classifier0.1.0KNN 分类器承担“训练样本 实时分类”giflergit 指定 v0.3.0在 Canvas 上播放 GIF 动画gsap^1.20.2界面动画按钮、箭头、置信度条的补间动画browserify/budo^14.4.0 / ^10.0.3打包与本地开发服务器端口 3000cpx/concurrently—静态资源拷贝与多任务并行stylus/nib^0.54.5 / ^1.1.2样式编译.styl→style.cssopenssl^1.1.0本地 HTTPS 证书生成工具此外browserify配置通过babelify转换器配合babel-preset-es2015将 ES2015 源码转译成浏览器可执行的bundle.js这是整个构建链的编译基础。三、构建项目yarn buildREADME 给出的第二个命令是yarn build这条命令在 package.json 中被定义为四个串行子任务的组合build: npm run html-copy npm run style-build npm run assets-copy npm run browserify各子任务职责如下脚本命令作用html-copycpx html/**/*.html public/ --clean将 html/index.html 拷贝到public/构建前先清理旧文件style-buildstylus -c -u nib style/main.styl -o public/style.css以压缩模式-c编译 style/main.styl 为public/style.cssassets-copycpx assets/**/* public/assets/ --clean将 assets/ 下的图片、音频、SVG 等资源拷贝到public/assets/browserifybrowserify src/index.js -o public/bundle.js以 src/index.js 为入口打包出浏览器端public/bundle.js构建产物统一输出到public/目录该目录正是 app.yaml 中 Google App Engine 静态部署所指向的目录static_files: public/index.html、public/bundle.js、public/style.css等。也就是说yarn build产出的public/目录既是本地预览的基础也是线上部署的直接输入。四、启动本地开发服务器yarn run watchREADME 提供的开发命令是yarn run watch对应脚本watch: npm run style-build concurrently \npm run assets-watch\ \npm run html-watch\ \npm run budo\ \npm run style-watch\它先用style-build完成一次样式初始编译然后用concurrently并行启动四个监听任务assets-watch监听 assets/ 目录变化时自动重新拷贝html-watch监听 html/ 目录变化时自动重新拷贝budobudo src/index.js:bundle.js --port3000 --live -v --dirpublic -o启动开发服务器默认端口 3000--live支持浏览器自动刷新--dirpublic指定静态文件根目录style-watchstylus -m -w -u nib style/main.styl -o public/style.css以监听模式实时编译样式-m为非压缩模式便于调试。启动后访问http://localhost:3000即可打开实验页面。若是在localhost本机环境下摄像头权限可直接获得而如果希望从局域网 IP 或其他域名访问并启用摄像头则必须走 HTTPS这正是下一节要解决的问题。五、本地 HTTPS摄像头权限的前提条件README 明确指出https 是获取摄像头权限的必要条件——当不在localhost上工作时必须使用 HTTPS现代浏览器安全策略要求getUserMedia仅在安全上下文https://或http://localhost下可用。第 1 步生成自签名证书按 README 给出的两条命令生成密钥与证书openssl genrsa -out server.key 2048 openssl req -new -x509 -sha256 -key server.key -out server.cer -days 365 -subj /CNYOUR_IP第一条生成 2048 位的 RSA 私钥server.key第二条基于该私钥生成自签名 X.509 证书server.cer有效期为 365 天/CNYOUR_IP处应替换为你实际访问时使用的 IP 地址例如192.168.1.100。第 2 步启动 HTTPS 开发服务器yarn run watch-https对应脚本watch-https: npm run style-build concurrently \npm run assets-watch\ \npm run html-watch\ \npm run budo-https\ \npm run style-watch\其中budo-https是关键差异budo-https: budo src/index.js:bundle.js --ssl --certserver.cer --keyserver.key --port3000 --live -v --dirpublic -o它通过--ssl启用 HTTPS并加载第 1 步生成的server.cer与server.key端口同样是 3000。第 3 步访问并接受安全提示浏览器访问https://YOUR_IP:3000把YOUR_IP替换成你的局域网 IP由于证书是自签名的浏览器会弹出“不安全”的隐私提示点击“继续前往/接受风险”即可进入页面并正常使用摄像头。README 原话是“accept the insecure privacy notice, and proceed”。六、代码规范与提交前检查README 在 Code Styles 一节中规定了三条质量约束它们全部由 package.json 落实pre-commit 钩子仓库配置了pre-commit: [eslint, stylint]会在每次git commit前自动运行两项检查存在错误时会阻止提交yarn eslint运行eslint src检查 src/ 下 ES6 代码的错误与警告对应devDependencies中的eslint^4.3.0yarn stylint运行stylint style检查 style/ 下 Stylus 样式文件的错误与警告对应stylint^1.5.9。两个脚本的完整定义如下eslint: eslint src, stylint: stylint style源码中也能看到与规范呼应的痕迹例如 src/ai/WebcamClassifier.js 顶部有/* eslint-disable camelcase, max-lines */注释因为 TensorFlow.js 的 API 与 KNN 使用不符合默认 camelcase 约定属于针对特定文件的合理豁免。七、从源码看整体架构输入 → 学习 → 输出项目的页面结构见 html/index.html分为三大区块#input-sectionInput、#learning-sectionLearning、#output-sectionOutput左右两侧用“电线”SVG 串联形成直观的“机器”隐喻。入口 src/index.js 在页面加载后依次实例化这些模块BrowserUtils检测浏览器类型与 WebGL/getUserMedia兼容性并按 Chrome/Safari/Firefox 显示不同的“开启摄像头”引导文案见 src/ui/components/BrowserUtils.jsLaunchScreen与Wizard首屏引导与带配音的教学向导InputSection→CamInput→WebcamClassifier负责请求摄像头并启动分类器LearningSection→LearningClass负责三个类别的训练按钮、样本计数与置信度显示OutputSection负责 GIF / Sound / Speech 三种输出之间的切换与触发Recording支持把“训练过程 输出画面”录制成 10 秒 WebM 视频分享见 src/ui/modules/Recording.js。值得一提的是src/index.js中还实现了对 IE/Edge 的NodeList.prototype.forEachshim并在移动端通过localStorage记住“是否使用后置摄像头”isBackFacingCam这些细节体现了项目对兼容性的处理。7.1 输入WebcamClassifier与摄像头src/ui/components/CamInput.js 创建了 src/ai/WebcamClassifier.js 实例并挂载其video元素。摄像头通过navigator.mediaDevices.getUserMedia获取其中桌面端video: true并在 Chrome 下同时请求音频流用于后续录制视频时合成音轨移动端根据GLOBALS.isBackFacingCam设置facingMode为environment后置或user前置。视频帧统一被缩放为227×227的输入尺寸IMAGE_SIZE 227见 WebcamClassifier 顶部常量这与 MobileNet 的标准输入规格一致。7.2 学习按住即采集样本页面提供green / purple / orange三个类别按钮见 src/config.js 中的classNames数组与colors配色。用户按住按钮时LearningClass.buttonDown→webcamClassifier.buttonDown分类器进入“训练采集”状态每一帧都被送入 MobileNet 提取特征并加入 KNN 分类器同时把最近 8 帧的缩略图画进示例查看器 Canvas见WebcamClassifier.animate()。松开按钮即停止采集。关于样本数量src/ui/modules/LearningClass.js 的setSamples()中写有推荐值let recommendedNumSamples (GLOBALS.inputType cam) ? 30 : 10;即摄像头输入建议每个类别至少 30 个样本html/index.html 的 FAQ 也明确建议“每个类别至少采集 30 张图像”并提醒注意按压/松开按钮的时刻以及多角度、多变化的采集策略。训练不足时src/ui/modules/Wizard.js 还会给出“至少 30 个样本效果最佳”的提示。7.3 输出三种回应方式用户可以在 Output 区块自由切换三种输出见 src/ui/modules/OutputSection.js 与 html/index.html 的output__selector__optionGIFsrc/outputs/GIFOutput.js每个类别对应一个 Giphy GIF可点击缩略图进入 Giphy 搜索重新选择搜索接口每次返回numResults 10条、支持offset分页与 “Load more” 加载更多GIF 播放由gifler src/ui/components/GifCanvas.js 在 Canvas 上完成Soundsrc/outputs/SoundOutput.js内置 23 个 mp3 音效位于 assets/outputs/sound/sounds/三个类别的默认音效分别为birds.mp3、guitar_1.mp3、trombone.mp3点击输入框可通过 src/outputs/sound/SoundSearch.js 按关键字过滤并重新指定音效也可删除置为 “Nothing”Speechsrc/outputs/SpeechOutput.js基于 Web Speech API 的 src/outputs/speech/TextToSpeech.js 实现默认说出 Hello / Awesome / Yes单条消息限 25 字符使用Google US English Female语音、rate 0.9、lang en-US可直接编辑文本框自定义机器“说的话”。八、核心原理MobileNet 特征提取 KNN 增量学习src/ai/WebcamClassifier.js 是本项目机器学习的核心其原理可以概括为两层特征提取层使用 MobileNet 预训练模型把每一帧 227×227 的图像转成高维特征向量。关键调用是const logits this.mobilenetModule.infer(img, conv_preds);分类层使用 KNN 分类器对特征向量做增量式“训练”与“预测”// 训练把一个样本加入指定类 this.classifier.addExample(logits, newMappedIndex); // 预测返回各类别置信度 const response await this.classifier.predictClass(logits);由于没有对神经网络进行梯度更新整个过程是“迁移学习 最近邻”式的轻量方案——不需要标签文件、不需要训练轮次因此能够在浏览器里实现“按住按钮几秒即完成训练”的即时反馈。源码中还有一个值得注意的细节——类别索引重映射。注释说明当不从未知索引 0 开始时mobilenetModule/knnClassifier会返回 -1因此train/predict通过mappedButtonIndexes数组把页面上的 0–2 类别索引与 KNN 内部索引解耦确保只训练第三个类别时也能保留索引 2。性能方面分类器以requestAnimationFrame驱动推理循环并设置了MEASURE_TIMING_EVERY_NUM_FRAMES 20每 20 帧用performance.now()测量一次单帧推理耗时lastFrameTimeMs在 Safari 等慢速环境下据此节流置信度更新避免动画卡顿。值得一提的是仓库中还保留了一个早期的 SqueezeNet 实现 src/ai/squeezenet.js从 Google Cloud Storage 加载 checkpoint含完整的 fire 模块卷积网络以及配套的 ImageNet 预处理 shader src/ai/imagenet_util.js。从当前入口 src/index.js 的引用链看线上运行使用的是WebcamClassifier的 MobileNet KNN 方案SqueezeNet 属于历史版本残留——这从侧面反映了该项目从deeplearn.js迁移到 TensorFlow.js 的演进痕迹。九、全局配置GLOBALS与三类别设定src/config.js 集中定义了全项目的全局配置是理解“为什么是三个类别、为什么是这几个颜色”的关键classNames: [green, purple, orange, red], colors: { green: #2baa5e, purple: #c95ac5, orange: #dd4d31, red: #e8453c }, numClasses: 3, micThreshold: 25, classesTrained: {green: false, purple: false, orange: false}, audioContext: new AudioContext(), isBackFacingCam: falsenumClasses 3对应页面上三个训练按钮第四个red仅存在于配置数组中未启用micThreshold: 25是与麦克风相关的阈值配置classesTrained记录每个类别是否已训练在 src/ui/modules/LearningClass.js 中当样本数达到推荐值时被置为true。配色含 25% 透明度的rgbaColors同时驱动按钮、置信度条、LED 灯泡与输出边框的视觉统一。十、部署与浏览器兼容10.1 Google App Engine 部署app.yaml 采用runtime: python27的 App Engine 标准环境配置静态文件index.html、fb.html、style.css、bundle.js及图片音频资源直接由 GAE 提供动态接口/share-video由 main.py 中的ShareVideohandler 处理——它通过urlfetch换取 Facebook access token并将前端录制的 WebM 视频 multipart 上传到 Facebook Graph API。环境变量FB_CLIENT_SECRET需要在 GAE 控制台配置用于鉴权。也就是说整个项目前端纯静态、后端只有一个分享接口模型推理完全发生在用户浏览器内。10.2 浏览器兼容策略src/ui/components/BrowserUtils.js 通过 UA 检测区分 Chrome / Safari / Firefox / Edge / IE 与移动端并进一步检查navigator.mediaDevices.getUserMedia与 WebGL 支持情况webglSupport()尝试创建 webgl 上下文最终得出isCompatible结论。html/index.html 的#is-not-compatible区块会在不兼容环境如旧版 Android下提示用户改用桌面 Chrome 访问。结语本文以 README.md 的开发脉络为主线完整还原了 Teachable Machine v1 从yarn安装、yarn build构建、yarn run watch本地开发到自签名证书 watch-https启用摄像头的全部操作步骤并顺带讲解了 eslint/stylint/pre-commit 的工程约束。在此基础上通过 package.json、src/ 源码与 app.yaml 的交叉印证厘清了“MobileNet 提取特征 KNN 增量学习”的核心原理、三类别训练的交互机制以及 GIF / 声音 / 语音三种输出的实现路径。如果你想把“零代码训练浏览器端分类器”的范式移植到自己的项目中建议以 README 提到的 boilerplate 模板为起点以本仓库的WebcamClassifier为参考实现。该项目并非 Google 官方产品而是 Støj、Use All Five、Creative Lab 与 PAIR 团队协作的实验成果见 README 的 Credit 一节——它的价值不在于生产级精度而在于以极低的门槛和极高的可玩性向所有人展示“机器学习到底是怎么工作的”。赞分享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 v1零代码AI模型训练全攻略Teachable Machine v1零代码AI模型训练全攻略 你是否想过不需要写一行代码就能训练属于自己的AI模型Teachable MachineAI 应用机器学习计算机视觉前端Teachable Machine v1终极指南浏览器内AI模型训练全流程解析Teachable Machine v1终极指南浏览器内AI模型训练全流程解析 Teachable Machine v1是一款革命性的浏览器端AI工具让任何AI 应用机器学习计算机视觉前端SpiceAI数据联邦查询如何在单一SQL中连接60数据源SpiceAI数据联邦查询如何在单一SQL中连接60数据源 在当今数据驱动的时代企业数据通常分散在各种不同的数据源中从关系型数据库到云存储从API服务后端大模型人工智能上一篇Fast-GitHub GitHub加速插件完整指南克隆从 KB/s 到 MB/s下一篇Meteor 仓库的 AI 协作上下文实战指南AGENTS.md 与 Skills 知识库深度解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考