在浏览器中运行机器学习模型的技术方案与优势。主要涵盖隐私保护、实时响应、离线功能及成本降低等好处。列举了 TensorFlow.js、ONNX.js 和 ML5.js 等主流框架，并通过图像分类实战演示了如何使用 TensorFlow.js 和 MobileNet 模型调用摄像头进行识别。此外，文章还详细说明了模型优化策略（量化、剪枝）、运行时优化（Web Workers）、网络优化及浏览器兼容性检测方案，最后提供了前端 AI 开发的最佳实践与检查清单，帮助开发者构建高效、安全的前端智能应用。
随着 AI 技术的快速发展，机器学习模型不再局限于服务器端运行。现在，我们可以直接在浏览器中运行机器学习模型，为前端应用带来智能功能。从图像识别到自然语言处理，从推荐系统到实时预测，浏览器中的 AI 正在改变我们与 Web 应用的交互方式。
我们将使用 TensorFlow.js 和 MobileNet 模型构建一个实时图像分类应用，能够识别摄像头捕获的物体。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浏览器中的图像分类</title>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet"></script>
<style>
body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
#webcam { width: 100%; border: 1px solid #ccc; border-radius: 8px; }
#results { margin-top: 20px; padding: 15px; background: #f5f5f5; border-radius: 8px; }
.prediction { margin: 5px 0; padding: 5px; background: white; border-radius: 4px; }
</style>
</head>
<body>
<h1>浏览器中的图像分类</h1>
<p>使用 TensorFlow.js 和 MobileNet 模型实时识别摄像头中的物体</p>
<video id="webcam" autoplay muted></video>
<div id="results">
<h3>识别结果：</h3>
<div id="predictions"></div>
</div>
<script src="app.js"></script>
</body>
</html>
// app.js
async function init() {
try {
// 加载 MobileNet 模型
console.log('正在加载模型...');
const model = await mobilenet.load();
console.log('模型加载完成');
// 获取摄像头视频流
const video = document.getElementById('webcam');
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
video.srcObject = stream;
// 等待视频就绪
await new Promise(resolve => {
video.onloadedmetadata = () => { resolve(); };
});
// 开始预测
setInterval(async () => {
// 预测图像
const predictions = await model.classify(video);
// 显示结果
displayPredictions(predictions);
}, 1000); // 每秒预测一次
} catch (error) {
console.error('初始化错误:', error);
document.getElementById('predictions').innerHTML = '初始化失败：' + error.message;
}
}
function displayPredictions(predictions) {
const predictionsDiv = document.getElementById('predictions');
predictionsDiv.innerHTML = '';
predictions.forEach((prediction, index) => {
const predictionDiv = document.createElement('div');
predictionDiv.className = 'prediction';
predictionDiv.innerHTML = `
<strong>${index + 1}. ${prediction.className}</strong>: ${(prediction.probability * 100).toFixed(2)}%
`;
predictionsDiv.appendChild(predictionDiv);
});
}
// 初始化应用
init();
当你打开这个页面时，浏览器会请求摄像头权限。一旦授权，应用会实时捕获摄像头画面并使用 MobileNet 模型进行分类，每秒更新一次识别结果。你可以尝试将不同的物体放在摄像头前，看看模型的识别效果。
// worker.js
importScripts('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs');
importScripts('https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet');
let model;
// 初始化模型
async function initModel() {
model = await mobilenet.load();
self.postMessage({ type: 'MODEL_LOADED' });
}
// 处理预测请求
self.onmessage = async (event) => {
if (event.data.type === 'INIT') {
await initModel();
} else if (event.data.type === 'PREDICT') {
if (!model) {
self.postMessage({ type: 'ERROR', message: '模型未加载' });
return;
}
try {
// 从 ImageData 创建张量
const image = tf.browser.fromPixels(event.data.image);
const predictions = await model.classify(image);
image.dispose(); // 释放张量
self.postMessage({ type: 'PREDICTIONS', predictions });
} catch (error) {
self.postMessage({ type: 'ERROR', message: error.message });
}
}
};
// 主线程代码
const worker = new Worker('worker.js');
// 初始化
worker.postMessage({ type: 'INIT' });
// 监听消息
worker.onmessage = (event) => {
if (event.data.type === 'MODEL_LOADED') {
console.log('模型已在 Worker 中加载');
} else if (event.data.type === 'PREDICTIONS') {
console.log('预测结果:', event.data.predictions);
displayPredictions(event.data.predictions);
} else if (event.data.type === 'ERROR') {
console.error('Worker 错误:', event.data.message);
}
};
// 发送预测请求
function predictImage(imageData) {
worker.postMessage({ type: 'PREDICT', image: imageData });
}
function checkCompatibility() {
// 检查 WebGL 支持
const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl2') || canvas.getContext('webgl');
if (!gl) {
console.warn('WebGL 不支持，将使用 CPU 模式');
return { webgl: false, cpu: true };
}
// 检查 WebAssembly 支持
const wasmSupported = typeof WebAssembly !== 'undefined';
return { webgl: true, wasm: wasmSupported, cpu: true };
}
// 使用
const compatibility = checkCompatibility();
console.log('浏览器兼容性:', compatibility);
// 根据兼容性设置 TensorFlow.js
if (compatibility.webgl) {
// 使用 WebGL 后端
tf.setBackend('webgl');
} else {
// 使用 CPU 后端
tf.setBackend('cpu');
}
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
使用加密算法（如AES、TripleDES、Rabbit或RC4）加密和解密文本明文。 在线工具，加密/解密文本在线工具，online
生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online