【高频考点精讲】前端AI集成实战：从TensorFlow.js到模型部署

前端AI集成实战：从TensorFlow.js到模型部署

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 5 月

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

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

今天咱们聊聊前端工程师如何玩转AI——没错，用JavaScript就能搞机器学习！我是全栈老李，一个喜欢把复杂技术讲简单的实战派。最近发现不少前端同学对AI既好奇又害怕，其实真没想象中那么难，跟着老李走，30分钟让你亲手部署第一个AI模型！

为什么前端需要懂AI？

去年我给某电商做咨询，他们有个需求：让用户在手机上传自拍，自动推荐适合的眼镜款式。后端团队吭哧吭哧搞了两个月，结果用户等3秒才能看到推荐——直接流失40%用户！后来改用TensorFlow.js在前端直接处理，首屏时间降到800ms，转化率立竿见影提升。

这就是前端AI的价值：实时性和隐私保护。用户的照片不用上传服务器，在浏览器里就能完成分析。现在连Midjourney都出了网页版，AI前端化已经是大势所趋。

TensorFlow.js 三分钟极速入门

先看个最简单的例子——用预训练模型识别图片内容：

// 全栈老李提示：记得先在HTML引入
async function classifyImage(imgElement) {
   
  // 加载谷歌预训练的MobileNet模型（约17MB）
  const model = await tf.loadGraphModel('https://tfhub.dev/google/tfjs-model/imagenet/mobilenet_v3_small_100_224/classification/3/default/1');
  
  // 将图片处理成模型需要的格式：224x224像素，归一化到[-1,1]
  const tensor = tf.browser.fromPixels(imgElement)
    .resizeNearestNeighbor([224, 224])
    .toFloat()
    .expandDims();
  
  // 运行预测
  const predictions = model.predict(tensor);
  const top5 = Array.from(predictions.dataSync())
    .map((p, i) => ({
    probability: p, className: IMAGENET_CLASSES[i] }))
    .sort((a, b) => b.probability - a.probability)
    .slice(0, 5);
  console.log('预测结果：'