【AI + TensorFlow 项目实战】Web 图像分类器（TF.js 部署）

观熵

已于 2025-04-14 16:17:40 修改

阅读量1.6k

点赞数 38

分类专栏： TensorFlow 全栈实战：从建模到部署文章标签：人工智能前端 tensorflow 计算机视觉

于 2025-03-26 06:30:00 首次发布

本文链接：https://blog.youkuaiyun.com/sinat_28461591/article/details/146472146

版权

TensorFlow 全栈实战：从建模到部署专栏收录该内容

24 篇文章

订阅专栏

个人简介

作者简介：全栈研发，具备端到端系统落地能力，专注大模型的压缩部署、多模态理解与 Agent 架构设计。热爱“结构”与“秩序”，相信复杂系统背后总有简洁可控的可能。
我叫观熵。不是在控熵，就是在观测熵的流动
个人主页：观熵
个人邮箱：privatexxxx@163.com
座右铭：愿科技之光，不止照亮智能，也照亮人心！

专栏导航

观熵系列专栏导航：
AI前沿探索：从大模型进化、多模态交互、AIGC内容生成，到AI在行业中的落地应用，我们将深入剖析最前沿的AI技术，分享实用的开发经验，并探讨AI未来的发展趋势
AI开源框架实战：面向 AI 工程师的大模型框架实战指南，覆盖训练、推理、部署与评估的全链路最佳实践
计算机视觉：聚焦计算机视觉前沿技术，涵盖图像识别、目标检测、自动驾驶、医疗影像等领域的最新进展和应用案例
国产大模型部署实战：持续更新的国产开源大模型部署实战教程，覆盖从模型选型 → 环境配置 → 本地推理 → API封装 → 高性能部署 → 多模型管理的完整全流程
TensorFlow 全栈实战：从建模到部署：覆盖模型构建、训练优化、跨平台部署与工程交付，帮助开发者掌握从原型到上线的完整 AI 开发流程
PyTorch 全栈实战专栏： PyTorch 框架的全栈实战应用，涵盖从模型训练、优化、部署到维护的完整流程
深入理解 TensorRT：深入解析 TensorRT 的核心机制与部署实践，助力构建高性能 AI 推理系统
Megatron-LM 实战笔记：聚焦于 Megatron-LM 框架的实战应用，涵盖从预训练、微调到部署的全流程
AI Agent：系统学习并亲手构建一个完整的 AI Agent 系统，从基础理论、算法实战、框架应用，到私有部署、多端集成
DeepSeek 实战与解析：聚焦 DeepSeek 系列模型原理解析与实战应用，涵盖部署、推理、微调与多场景集成，助你高效上手国产大模型
端侧大模型：聚焦大模型在移动设备上的部署与优化，探索端侧智能的实现路径
行业大模型 · 数据全流程指南：大模型预训练数据的设计、采集、清洗与合规治理，聚焦行业场景，从需求定义到数据闭环，帮助您构建专属的智能数据基座
机器人研发全栈进阶指南：从ROS到AI智能控制：机器人系统架构、感知建图、路径规划、控制系统、AI智能决策、系统集成等核心能力模块
人工智能下的网络安全：通过实战案例和系统化方法，帮助开发者和安全工程师识别风险、构建防御机制，确保 AI 系统的稳定与安全
智能 DevOps 工厂：AI 驱动的持续交付实践：构建以 AI 为核心的智能 DevOps 平台，涵盖从 CI/CD 流水线、AIOps、MLOps 到 DevSecOps 的全流程实践。
C++学习笔记？：聚焦于现代 C++ 编程的核心概念与实践，涵盖 STL 源码剖析、内存管理、模板元编程等关键技术
AI × Quant 系统化落地实战：从数据、策略到实盘，打造全栈智能量化交易系统

🎯 Web 图像分类器（TF.js 部署）

📝 说明： 将训练好的图像分类模型部署到浏览器端，实现前端实时识别。
用户可通过上传图片或开启摄像头，直接在网页上完成图像识别，无需后端服务器。

✅ 项目亮点

使用 TensorFlow.js 在浏览器端推理模型
支持模型转换（SavedModel → TF.js 格式）
支持 Webcam 实时推理 + 文件上传识别
适合部署图像分类 / 手势识别 / 人脸检测等模型
零后端、全前端运行，加载即用

🧠 模型选择与准备

可以使用你训练的任意模型（如本专栏中的“猫狗分类器”），要求：

输入：定长图像 [height, width, 3]
输出：分类 logits / softmax 概率分布

🛠️ Step 1：导出模型为 TF.js 格式

✅ 使用 `tensorflowjs_converter`

tensorflowjs_converter \
  --input_format=tf_saved_model \
  --output_format=tfjs_graph_model \
  export/catdog_model tfjs_model/

你将获得：

tfjs_model/
├── model.json
├── group1-shard1of1.bin

🌐 Step 2：构建 HTML + JS 前端页面

✅ 示例 HTML 页面

<!DOCTYPE html>
<html>
<head>
  <title>图像分类器</title>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.21.0"></script>
</head>
<body>
  <h1>图像分类器（浏览器端）</h1>
  <input type="file" id="image-upload" accept="image/*" />
  <br><br>
  <canvas id="canvas" width="150" height="150"></canvas>
  <div id="result">预测结果将显示在这里</div>

  <script>
    let model;
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");

    async function loadModel() {
      model = await tf.loadGraphModel("tfjs_model/model.json");
      console.log("模型加载成功");
    }

    async function predict(img) {
      const input = tf.browser.fromPixels(img).resizeNearestNeighbor([150, 150]).toFloat().div(255).expandDims();
      const preds = await model.predict(input).data();
      const label = preds[0] > 0.5 ? "狗 🐶" : "猫 🐱";
      document.getElementById("result").innerText = `预测结果：${label}（${(preds[0]*100).toFixed(2)}%）`;
    }

    document.getElementById("image-upload").addEventListener("change", (event) => {
      const file = event.target.files[0];
      const img = new Image();
      const reader = new FileReader();

      reader.onload = () => {
        img.onload = () => {
          ctx.drawImage(img, 0, 0, 150, 150);
          predict(img);
        };
        img.src = reader.result;
      };
      reader.readAsDataURL(file);
    });

    loadModel();
  </script>
</body>
</html>

🔍 效果展示

上传图片：自动缩放、画入 Canvas
调用模型：预测结果实时显示
推理性能：平均 <200ms（Chrome / Edge）

📦 可拓展功能

功能	技术
摄像头识别	`navigator.mediaDevices.getUserMedia` + `tf.browser.fromPixels(video)`
多类分类	`argMax(preds)` + 映射索引
热力图叠加	Grad-CAM（需模型支持）
UI 美化	使用 Tailwind / Bootstrap 改进样式

📁 项目结构建议

web-classifier-tfjs/
├── tfjs_model/
│   ├── model.json
│   ├── group1-shard1of1.bin
├── index.html
└── preview.jpg (用于博客封面)

✅ 项目小结

内容	技术
模型格式	TensorFlow.js GraphModel
部署平台	浏览器（前端）
运行环境	无需后端 / 云端
推理性能	CPU 推理，低延迟
应用场景	图像识别、手势识别、Web Demo 展示