TensorFlow.js浏览器AI实战：零基础实现图片分类与姿态检测

本文链接：https://blog.csdn.net/tombosky/article/details/147246517

手把手玩转浏览器AI：TensorFlow.js零基础实战指南

一、为什么要关注浏览器里的AI？

现在连手机都能跑AI了，浏览器凭啥不行？TensorFlow.js这玩意儿直接把深度学习搬到了前端，省了服务器开销不说，用户隐私也更有保障。比如我最近做的在线试妆功能，用户照片压根不用上传服务器，直接在浏览器里处理，合规又高效。

二、准备你的开发环境

1. 新手推荐方案

直接在HTML里加个script标签：

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>

打开浏览器控制台输入tf.version，看到输出版本号就说明成功了。

2. 工程化项目方案

用npm装包更规范：

npm install @tensorflow/tfjs

导入方式：

import * as tf from '@tensorflow/tfjs';

三、实战案例：20行代码实现图片分类

1. 模型加载技巧

用MobileNet模型举例：

const loadModel = async () => {
   
   
  const model = await tf.loadGraphModel(
    'https://tfhub.dev/google/tfjs-model/imagenet/mobilenet_v3_small_100_224/classification/5/default/1',
    {
   
    fromTFHub: true }
  );
  return model;
};

注意这个fromTFHub参数必须带上，不然加载会失败。

2. 图像预处理门道

处理图片要注意三个关键点：

function processImage(imageElement) {
   
   
  // 转Tensor
  let tensor = tf.browser.fromPixels(imageElement);
  
  // 调整尺寸
  tensor = tf.image.resizeBilinear(tensor, [224, 224]);
  
  // 归一化处理
  return tensor.toFloat().div(127.5).sub(1).expandDims(