【高频考点精讲】前端AI集成：如何使用TensorFlow.js？_tensorflow.js详解 前端怎么应用

前端AI集成：TensorFlow.js实战指南

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 5 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

大家好，我是全栈老李。今天咱们聊聊一个让前端工程师也能玩转AI的神器——TensorFlow.js。想象一下，不用等后端同学排期，前端自己就能实现图片识别、姿势检测、甚至写个AI画图工具，是不是很酷？

为什么前端需要TensorFlow.js？

去年有个项目，产品经理突发奇想要做个\"用户上传照片自动识别年龄\"的功能。按传统做法，得等后端团队开发API，至少两周工期。但用TensorFlow.js，我两天就搞定了前端直接识别的方案，效果还特别好。

TensorFlow.js是Google推出的JavaScript机器学习库，它能让你：

1. 直接在浏览器里跑训练好的模型
2. 用JavaScript开发机器学习模型
3. 利用WebGL加速计算（比Python快不是梦）
4. 保护用户隐私（数据不用传服务器）

基础入门：手写数字识别

先来个最简单的例子 - MNIST手写数字识别。这个好比是机器学习界的\"Hello World\"。

// 全栈老李提示：先引入TF.js库import * as tf from \'@tensorflow/tfjs\';// 加载预训练模型async function loadModel() {  const model = await tf.loadLayersModel(\'https://storage.googleapis.com/tfjs-models/tfjs/mnist_model/model.json\'); return model;}// 处理canvas中的手写输入function preprocessCanvas(canvas) {  // 全栈老李小技巧：这里做了归一化和reshape操作 return tf.tidy(() => {  const tensor = tf.browser.fromPixels(canvas, 1) .resizeNearestNeighbor([28, 28]) .toFloat() .div(255.0) .reshape([1, 28, 28, 1]); return tensor; });}// 预测数字async function predict(model, canvas) {  const tensor = preprocessCanvas(canvas); const predictions = await model.predict(tensor).data