零基础玩转Teachable Machine：从环境搭建到AR滤镜开发全指南

2026-04-04 09:25:20作者：咎竹峻Karen

Teachable Machine Boilerplate是一款基于TensorFlow.js和p5.js构建的图像分类框架，让开发者无需深厚机器学习背景，就能快速实现专业级图像识别应用。本文将带你5分钟零门槛上手，从环境部署到实战开发，全面掌握这一强大工具的核心玩法。

🌱 核心价值：为什么选择Teachable Machine Boilerplate

在AI开发门槛日益降低的今天，Teachable Machine Boilerplate凭借三大优势脱颖而出：一是零算法门槛，通过可视化界面完成模型训练；二是浏览器端运行，无需后端支持即可实现实时推理；三是高度可定制，提供完整源码框架支持二次开发。无论是AR应用、智能监控还是教育工具，都能基于此框架快速落地。

🔧 5分钟零门槛上手：环境部署全流程

准备工作

确保系统已安装：

Node.js 12.x或更高版本
Git版本控制工具

获取项目代码

git clone https://gitcode.com/gh_mirrors/te/teachable-machine-boilerplate

安装依赖包

进入项目根目录执行：

cd teachable-machine-boilerplate
npm install

启动开发服务器

npm start

此时访问http://localhost:3000即可看到默认图像分类界面，核心代码逻辑可查看main.js文件了解模型加载与预测流程。

🚀 实战AR滤镜开发：从模型训练到效果实现

数据采集与模型训练

收集图像样本：在web界面分别上传"笑脸"、"惊讶"、"生气"三类表情各20张以上图片
模型训练：点击"Train Model"按钮，等待训练完成（通常需要30-60秒）
导出模型：训练完成后点击"Export Model"，将生成的模型文件保存至项目根目录

AR滤镜功能实现

修改main.js文件，添加以下功能：

// 在predict函数中添加滤镜逻辑
function predict() {
  if (modelIsReady) {
    classifier.classify(webcam, (err, results) => {
      if (results[0].label === '笑脸') {
        applyFilter('rainbow'); // 应用彩虹滤镜
      } else if (results[0].label === '惊讶') {
        applyFilter('cartoon'); // 应用卡通滤镜
      }
    });
  }
}