Teachable Machine技术揭秘：浏览器端AI交互的3大核心模块解析

Teachable Machine是一款革命性的浏览器端机器学习工具，它允许任何人通过简单的交互就能创建自定义图像分类模型，无需编写代码。无论是教育工作者、学生还是AI初学者，都能通过它直观地理解机器学习的基本原理，快速构建从摄像头输入到结果输出的完整AI应用。

解析底层技术原理

Teachable Machine的核心魅力在于其巧妙融合了现代Web技术与机器学习算法，在浏览器环境中实现了高效的模型训练与推理。整个系统基于TensorFlow.js构建，采用迁移学习（一种利用预训练模型快速构建新应用的技术）方法，将复杂的神经网络模型适配到资源有限的客户端环境。

系统工作流程遵循"数据采集→特征提取→模型训练→预测推理"的经典机器学习范式，但针对浏览器环境做了深度优化。MobileNet预训练模型负责从图像中提取高级特征，KNN（K-最近邻）分类器则处理自定义类别的学习任务，这种组合既保证了模型性能，又大幅降低了计算资源需求。

图：Teachable Machine的直观界面展示了从数据收集到模型训练的完整流程

构建输入处理模块

功能定位

输入处理模块负责从摄像头捕获视频流并进行预处理，为后续模型训练和预测提供标准化的图像数据。这一模块解决了设备兼容性、图像格式统一和实时处理效率等关键问题。

技术实现

输入处理的核心实现位于CamInput组件和WebcamClassifier类。系统使用浏览器原生的getUserMedia API访问摄像头，通过创建隐藏的video元素捕获视频流，并使用Canvas API进行帧处理。

关键代码示例展示了摄像头初始化流程：

// 摄像头初始化与访问（src/ai/WebcamClassifier.js 第79-123行）
startWebcam() {
  let video = true;
  if (GLOBALS.browserUtils.isMobile) {
    // 移动设备支持前后摄像头切换
    video = {facingMode: (GLOBALS.isBackFacingCam) ? 'environment' : 'user'};
  }

  if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({
      video: video,
      audio: (GLOBALS.browserUtils.isChrome && !GLOBALS.browserUtils.isMobile)
    }).then((stream) => {
      GLOBALS.isCamGranted = true;
      this.active = true;
      this.stream = stream;
      this.video.srcObject = stream;  // 将视频流绑定到video元素
      this.startTimer();  // 启动帧捕获定时器
    }).catch((error) => {
      // 处理摄像头访问失败情况
      this.activateWebcamButton.style.display = 'block';
    });
  }
}

图像预处理环节将视频帧统一缩放到227x227像素，这是MobileNet模型要求的输入尺寸：

// 图像尺寸标准化（src/ai/WebcamClassifier.js 第16-17行）
const IMAGE_SIZE = 227;  // MobileNet输入图像尺寸
this.blankCanvas.width = 227;
this.blankCanvas.height = 227;

实现模型训练系统

功能定位

模型训练系统是Teachable Machine的核心，它实现了从原始图像到分类模型的转换过程。该模块解决了在浏览器环境下高效训练模型的问题，通过迁移学习技术大幅降低了训练门槛和计算资源需求。

技术实现

训练系统主要通过WebcamClassifier类实现，结合TensorFlow.js提供的MobileNet预训练模型和KNN分类器。系统采用"特征提取+简单分类器"的架构，既利用了预训练模型的特征提取能力，又通过轻量级分类器实现快速学习。

模型初始化流程：

// 模型初始化（src/ai/WebcamClassifier.js 第125-132行）
async init() {
  this.useFloatTextures = !GLOBALS.browserUtils.isMobile && !GLOBALS.browserUtils.isSafari;
  tf.ENV.set('WEBGL_DOWNLOAD_FLOAT_ENABLED', false);
  this.classifier = knnClassifier.create();  // 创建KNN分类器
  
  // 加载MobileNet预训练模型
  this.mobilenetModule = await mobilenet.load();
}

训练过程通过提取图像特征并添加到分类器实现：

// 训练样本处理（src/ai/WebcamClassifier.js 第166-174行）
train(image, index) {
  // 确保索引映射正确
  if (this.mappedButtonIndexes.indexOf(index) === -1) {
    this.mappedButtonIndexes.push(index);
  }
  const newMappedIndex = this.mappedButtonIndexes.indexOf(index);
  
  // 使用MobileNet提取图像特征
  const img = tf.fromPixels(image);
  const logits = this.mobilenetModule.infer(img, 'conv_preds');  // 获取卷积层输出作为特征
  
  // 将特征添加到KNN分类器
  this.classifier.addExample(logits, newMappedIndex);
}

LearningSection模块负责管理训练过程的UI交互，包括样本收集、训练状态显示和置信度可视化：

// 设置分类置信度（src/ui/modules/LearningSection.js 第179-199行）
setConfidences(confidences) {
  const confidencesArry = Object.values(confidences);
  let maxIndex = this.getMaxIndex(confidencesArry);
  let maxValue = confidencesArry[maxIndex];
  
  // 当置信度超过阈值时触发输出
  if (maxValue > 0.5) {
    this.currentIndex = maxIndex;
    let id = GLOBALS.classNames[this.currentIndex];
    this.ledOn(id);  // 更新UI指示
    GLOBALS.outputSection.trigger(id);  // 触发相应输出
  }
  
  // 更新各分类的置信度显示
  for (let index = 0; index < 3; index += 1) {
    this.learningClasses[index].setConfidence(confidencesArry[index] * 100);
    // 高亮显示最高置信度的分类
    if (index === maxIndex) {
      this.learningClasses[index].highlightConfidence();
    }else {
      this.learningClasses[index].dehighlightConfidence();
    }
  }
}

设计多样化输出系统

功能定位

输出系统将模型预测结果转化为直观的反馈，支持声音、GIF和文本到语音等多种输出方式。这一模块解决了AI模型与用户交互的最后一环，使抽象的预测结果转化为可感知的体验。

技术实现

声音输出是最常用的反馈方式，由SoundOutput类实现。系统预加载多种音频资源，并根据模型预测结果播放相应声音：

// 音频资源预加载（src/outputs/SoundOutput.js 第84-92行）
for (let index = 0; index < this.assets.length; index += 1) {
  let sound = this.assets[index];
  let audio = new Audio();
  audio.muted = true;
  audio.loop = true;
  audio.addEventListener('canplaythrough', this.assetLoaded.bind(this));
  audio.src = this.basePath + sound;  // 设置音频文件路径
  this.sounds[sound] = audio;  // 存储音频对象
}

预测结果触发相应声音输出：

// 声音触发逻辑（src/outputs/SoundOutput.js 第285-333行）
trigger(index) {
  if (!GLOBALS.clearing) {
    if (this.currentIndex !== index) {
      this.currentIndex = index;
      
      let sound = this.inputClasses[this.currentIndex].sound;
      if (sound) {
        this.playSound(sound);  // 播放选中的声音
      }else {
        this.muteSounds();  // 静音处理
      }
      
      // 更新UI状态
      if (this.currentIcon) {
        this.currentIcon.classList.remove('output__sound-speaker--active');
      }
      // ...更多UI更新逻辑
    }
  }
}

系统还支持GIF输出和文本到语音等多种反馈方式，分别由GIFOutput.js和TextToSpeech.js实现，形成了丰富的多模态输出能力。

快速上手指南

要开始使用Teachable Machine，只需执行以下步骤：

1. 克隆项目仓库：git clone https://gitcode.com/gh_mirrors/te/teachable-machine-v1
2. 进入项目目录：cd teachable-machine-v1
3. 安装依赖：yarn install 或 npm install
4. 启动本地服务器：npm start
5. 在浏览器中访问 http://localhost:8080 开始使用

Teachable Machine的架构设计展示了如何在浏览器环境中构建高效、易用的机器学习应用。通过巧妙结合Web技术与AI算法，它为机器学习教育和快速原型开发提供了强大工具，同时也为前端开发者展示了浏览器端AI应用的实现范式。无论是作为学习工具还是开发原型，Teachable Machine都为AI民主化做出了重要贡献。