Teachable Machine

在浏览器中探索机器学习 - 无需编码

Teachable Machine 是一个让任何人都能轻松探索机器学习的实验性项目。通过摄像头实时训练和识别,无需编写任何代码即可体验 AI 的魔力。在线体验: g.co/teachablemachine

项目基于 TensorFlow.js 构建,使用 MobileNet 和 KNN 分类器实现迁移学习。所有训练数据在浏览器本地处理,保护隐私。

简化版模板项目: teachable-machine-boilerplate

快速开始

安装依赖

yarn

构建项目

yarn build

启动开发服务器

yarn run watch

在浏览器中访问 http://localhost:3000

HTTPS 本地开发

HTTPS 是访问摄像头的必要条件(非 localhost 环境)。

生成证书

openssl genrsa -out server.key 2048
openssl req -new -x509 -sha256 -key server.key -out server.cer -days 365 -subj /CN=YOUR_IP

启动 HTTPS 服务器

yarn run watch-https

访问 https://YOUR_IP:3000,接受安全警告后即可使用。

工作原理

摄像头输入 → MobileNet 特征提取 → KNN 分类器 → 输出触发

核心流程:

1. 初始化 - 加载 MobileNet 预训练模型和 KNN 分类器
2. 训练 - 按住按钮捕获图像,提取特征向量添加到分类器
3. 预测 - 实时分析画面,计算置信度,触发相应输出

关键代码: src/ai/WebcamClassifier.js

• train() - 使用 MobileNet 提取特征,添加到 KNN 分类器
• predict() - 预测分类并返回置信度
• 使用迁移学习,无需大量训练数据

项目结构

├── src/
│   ├── ai/WebcamClassifier.js    # 核心分类器逻辑
│   ├── ui/                       # UI 组件和模块
│   ├── outputs/                  # GIF/声音/语音输出
│   ├── index.js                  # 应用入口
│   └── config.js                 # 全局配置
├── html/index.html               # HTML 模板
├── style/                        # Stylus 样式文件
├── assets/                       # 静态资源
├── public/                       # 构建输出目录
└── app.yaml                      # App Engine 配置

开发脚本

yarn run watch          # 启动开发服务器(HTTP)
yarn run watch-https    # 启动开发服务器(HTTPS)
yarn build              # 构建生产版本
yarn eslint             # 检查 JavaScript 代码
yarn stylint            # 检查 Stylus 代码

代码规范: 项目配置了 pre-commit 钩子,提交前会自动运行代码检查。

部署

静态托管

yarn build
# 将 public/ 目录部署到 Netlify/Vercel/GitHub Pages

Google App Engine

# 安装依赖(可选,用于分享功能)
pip install -t lib -r requirements.txt

# 构建并部署
yarn build
gcloud app deploy

编辑 app.yaml:50 配置 Facebook 分享功能:

env_variables:
  FB_CLIENT_SECRET: 'your_secret'

使用技巧

训练建议:

• 每个类别至少捕获 30 张图像
• 保持光线和背景一致
• 确保类别之间有明显差异

自定义输出:

• src/outputs/GIFOutput.js - 更换 GIF 文件
• src/outputs/SoundOutput.js - 更换音频文件
• src/outputs/SpeechOutput.js - 修改朗读文本

扩展类别数量: 修改 src/ai/WebcamClassifier.js:19 的 CLASS_COUNT 常量,并调整 UI。

浏览器兼容性

浏览器	支持情况
Chrome 60+	✅ 推荐
Firefox 55+	✅ 支持
Safari 11+	✅ 支持
IE/Edge(旧版)	❌ 不支持

移动端为实验性支持,性能有限。

故障排查

摄像头无法启动:

• 检查浏览器权限设置
• 非 localhost 需要 HTTPS
• 刷新页面重新授权

识别不准确:

• 增加训练样本(50+)
• 保持训练/识别环境一致
• 重置并重新训练

构建失败:

rm -rf node_modules yarn.lock
yarn install

学习资源

• TensorFlow.js 文档
• MobileNet 论文
• 迁移学习介绍
• Teachable Machine V2 - 新版本(支持音频/姿态)

贡献

欢迎提交 Pull Request! 首次贡献需签署 Google CLA,详见 CONTRIBUTING.md。

许可证

Apache License 2.0

致谢

这不是官方 Google 产品,而是由 Støj、Use All Five、Google Creative Lab 和 PAIR 团队共同完成的实验项目。