在html中实现机器学习主要通过tensorflow.js库实现，具有即时性、隐私保护、减轻服务器负担和离线可用等优势。1. 引入tensorflow.js和相关模型库，通过<script>标签加载cdn链接；2. 使用javascript操作tf全局对象，加载预训练模型（如mobilenet）进行图像识别；3. 可在浏览器中定义神经网络结构并调用model.fit()方法训练模型；4. 数据保留在本地，提升隐私安全并减少传输延迟；5. 浏览器端计算降低服务器压力，提高可扩展性；6. 支持离线使用，适用于网络不稳定场景；7. 示例包括图像识别、线性回归训练和文本语义相似度计算，展示了tensorflow.js在浏览器中处理图像、数值和文本数据的能力。
HTML里做机器学习，主要是通过TensorFlow.js这个库来实现的。它让JavaScript代码可以直接在浏览器端运行机器学习模型，无论是预训练好的模型，还是自己从头训练一个简单的模型，都能搞定。这就像是把过去服务器端才能做的一些复杂计算，直接搬到了用户设备上，感觉挺神奇的。
在HTML里搞机器学习，核心就是引入TensorFlow.js库，然后用JavaScript去操作它。具体来说，你需要先在HTML文件里通过<script>标签引入TensorFlow.js的CDN链接。接着，在你的JavaScript代码里，就可以使用tf这个全局对象了。你可以用它来加载一个已经训练好的模型，比如一个图像识别模型，然后把用户上传的图片数据喂给它，立刻就能得到识别结果。或者，你也可以定义一个简单的神经网络结构，准备一些数据，然后在浏览器里直接调用model.fit()方法来训练这个模型。整个过程，数据都不需要离开用户的浏览器，对于隐私敏感的应用场景来说，这一点特别重要。
为什么要在HTML里做机器学习？它有什么优势？
我个人觉得，在浏览器里跑机器学习模型，最大的魅力在于它的即时性和隐私保护。想象一下，用户上传一张照片，或者通过摄像头捕捉画面，图像识别的结果几乎是瞬间就能出来，这体验感是服务器端处理很难比拟的。因为数据不用上传到云端，省去了网络传输的时间，响应速度自然快。而且，数据始终留在用户本地，对于一些涉及个人隐私的应用，比如面部识别、手势控制或者一些医疗辅助工具，这种本地化处理方式能大大增强用户的信任感。
立即学习“前端免费学习笔记（深入）”；
另外，它还能显著减轻服务器的负担。如果你的应用有大量的用户同时进行ML推理，把计算任务分摊到每个用户的浏览器上，服务器就不需要承担那么大的计算压力了。这对于降低运营成本，提高服务的可伸缩性，都挺有帮助的。有时候，甚至在没有网络连接的情况下，一些预加载的模型也能继续工作，这对于离线应用场景来说，是个不小的优势。当然，浏览器端的计算能力毕竟有限，对于超大型模型或者需要大量数据训练的场景，可能还是服务器更合适，但这并不妨碍它在很多轻量级应用中大放异彩。
第一个示例：即插即用的图像识别
我们来玩一个最常见的，也是最能直观感受到机器学习威力的例子：图像识别。这里我们用一个预训练好的模型，MobileNet。它已经在大量图片上训练过了，能够识别出上千种不同的物体。
首先，在HTML里你需要一个<img>标签来显示图片，以及一个<input type="file">来让用户选择图片，或者一个<video>标签来连接摄像头。
<!DOCTYPE html>
<html>
<head>
<title>图像识别示例</title>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet"></script>
</head>
<body>
<input type="file" id="imageUpload">
<img id="previewImage" style="max-width: 400px; display: block; margin-top: 10px;">
<p id="predictionResult"></p>
<script>
const imageUpload = document.getElementById('imageUpload');
const previewImage = document.getElementById('previewImage');
const predictionResult = document.getElementById('predictionResult');
let model;
// 异步加载模型
async function loadMyModel() {
console.log('正在加载MobileNet模型...');
model = await mobilenet.load();
console.log('模型加载完成！');
predictionResult.innerText = '请选择一张图片进行识别。';
}
// 处理图片上传
imageUpload.addEventListener('change', async (event) => {
const file = event.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = async (e) => {
previewImage.src = e.target.result;
predictionResult.innerText = '正在识别...';
// 等待图片加载完成，确保其在DOM中可用
previewImage.onload = async () => {
if (model) {
const predictions = await model.classify(previewImage);
// predictions 是一个数组，包含多个预测结果和置信度
if (predictions.length > 0) {
predictionResult.innerText = `识别结果：${predictions[0].className} (置信度: ${Math.round(predictions[0].probability * 100)}%)`;
} else {
predictionResult.innerText = '未能识别出任何物体。';
}
} else {
predictionResult.innerText = '模型尚未加载完成，请稍候。';
}
};
};
reader.readAsDataURL(file);
});
loadMyModel(); // 页面加载时就去加载模型
</script>
</body>
</html>这段代码的核心逻辑是：当页面加载时，异步加载MobileNet模型。用户选择图片后，FileReader会把图片转换成Data URL显示在<img>标签里。一旦图片加载到<img>标签中，我们就可以用model.classify(previewImage)来对这张图片进行识别。mobilenet.classify函数会自动处理图片的预处理（比如缩放、归一化），然后返回一个包含分类结果和置信度的数组。你会发现，整个过程相当流畅，几乎没有延迟。
第二个示例：浏览器里训练一个简单模型
光用预训练模型还不够过瘾，我们试试在浏览器里自己训练一个最简单的模型：线性回归。这就像是给定一些点的坐标，让模型学会预测下一个点的Y值。
<!DOCTYPE html>
<html>
<head>
<title>简单线性回归训练</title>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
</head>
<body>
<p>训练状态: <span id="status">准备中...</span></p>
<p>损失值: <span id="lossValue">N/A</span></p>
<button id="trainButton">开始训练</button>
<script>
const statusSpan = document.getElementById('status');
const lossValueSpan = document.getElementById('lossValue');
const trainButton = document.getElementById('trainButton');
async function trainModel() {
statusSpan.innerText = '正在生成数据...';
// 准备一些训练数据
// 我们希望模型学习到 y = 2x + 1 这样的关系
const xs = tf.tensor2d([1, 2, 3, 4], [4, 1]); // 输入特征
const ys = tf.tensor2d([3, 5, 7, 9], [4, 1]); // 对应的标签
statusSpan.innerText = '正在创建模型...';
// 创建一个简单的线性模型
const model = tf.sequential();
model.add(tf.layers.dense({ units: 1, inputShape: [1] })); // 一个输入，一个输出的密集层
statusSpan.innerText = '正在编译模型...';
// 编译模型：指定优化器和损失函数
model.compile({
optimizer: tf.train.sgd(0.01), // 使用随机梯度下降优化器，学习率0.01
loss: 'meanSquaredError' // 使用均方误差作为损失函数
});
statusSpan.innerText = '开始训练模型...';
// 训练模型
await model.fit(xs, ys, {
epochs: 500, // 训练500个周期
callbacks: {
onEpochEnd: (epoch, logs) => {
lossValueSpan.innerText = logs.loss.toFixed(6);
statusSpan.innerText = `训练中... Epoch ${epoch + 1}/500`;
}
}
});
statusSpan.innerText = '训练完成！';
// 训练完成后，尝试用模型进行预测
const testX = tf.tensor2d([5], [1, 1]);
const prediction = model.predict(testX);
const predictedValue = prediction.dataSync()[0]; // 获取预测结果
statusSpan.innerText += ` 预测 x=5 时 y 的值为: ${predictedValue.toFixed(2)}`;
// 清理内存
xs.dispose();
ys.dispose();
testX.dispose();
prediction.dispose();
}
trainButton.addEventListener('click', trainModel);
</script>
</body>
</html>在这个例子里，我们手动定义了一组简单的输入xs和对应的输出ys，它们之间存在一个简单的线性关系（y = 2x + 1）。然后，我们创建了一个只有一个dense层的顺序模型，这层只有一个单元，正好可以用来学习线性关系。接着，我们用model.compile配置了优化器（SGD，随机梯度下降）和损失函数（均方误差），这些都是机器学习训练的基础。最后，model.fit函数启动了训练过程。在训练过程中，onEpochEnd回调函数会更新页面的损失值，让你能实时看到模型学习得怎么样。训练结束后，我们用一个新值（x=5）来测试模型，看看它预测的y值是否接近11。这种实时反馈的训练过程，在浏览器里看真的很有趣。
第三个示例：处理文本的魔法——文本嵌入
除了图像和数值数据，TensorFlow.js在处理文本方面也相当强大。这里我们介绍一个概念：文本嵌入（Text Embedding）。简单来说，就是把文字转换成一系列数字（向量），这些数字能够捕捉到文字的语义信息。意思相近的词或句子，它们的向量在多维空间中会比较接近。这对于理解文本内容，做文本相似度分析，甚至情感分析都非常有用。我们使用@tensorflow-models/universal-sentence-encoder这个预训练模型。
<!DOCTYPE html>
<html>
<head>
<title>文本嵌入与相似度</title>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/universal-sentence-encoder"></script>
</head>
<body>
<textarea id="text1" rows="4" cols="50">我爱机器学习</textarea><br>
<textarea id="text2" rows="4" cols="50">我喜欢人工智能</textarea><br>
<button id="compareButton">计算相似度</button>
<p>相似度: <span id="similarityResult">N/A</span></p>
<script>
const text1Input = document.getElementById('text1');
const text2Input = document.getElementById('text2');
const compareButton = document.getElementById('compareButton');
const similarityResult = document.getElementById('similarityResult');
let useModel; // Universal Sentence Encoder 模型
async function loadUseModel() {
console.log('正在加载Universal Sentence Encoder模型...');
useModel = await use.load();
console.log('模型加载完成！');
compareButton.disabled = false; // 模型加载完成后启用按钮
}
// 计算两个向量的余弦相似度
function cosineSimilarity(vecA, vecB) {
const dotProduct = vecA.dot(vecB).dataSync()[0];
const normA = vecA.norm().dataSync()[0];
const normB = vecB.norm().dataSync()[0];
return dotProduct / (normA * normB);
}
compareButton.addEventListener('click', async () => {
if (!useModel) {
similarityResult.innerText = '模型尚未加载，请稍候。';
return;
}
const sentence1 = text1Input.value;
const sentence2 = text2Input.value;
if (!sentence1 || !sentence2) {
similarityResult.innerText = '请输入两段文本。';
return;
}
similarityResult.innerText = '正在计算...';
// 将句子编码为嵌入向量
const embeddings = await useModel.embed([sentence1, sentence2]);
const embedding1 = embeddings.slice([0, 0], [1, embeddings.shape[1]]);
const embedding2 = embeddings.slice([1, 0], [1, embeddings.shape[1]]);
// 计算相似度
const similarity = cosineSimilarity(embedding1, embedding2);
similarityResult.innerText = `相似度: ${similarity.toFixed(4)}`;
// 清理内存
embeddings.dispose();
embedding1.dispose();
embedding2.dispose();
});
loadUseModel(); // 页面加载时加载模型
compareButton.disabled = true; // 默认禁用按钮直到模型加载完成
</script>
</body>
</html>这个例子展示了如何利用预训练的Universal Sentence Encoder模型来计算两段文本的语义相似度。我们首先加载了@tensorflow-models/universal-sentence-encoder模型。当用户点击按钮时，我们获取两个文本框的内容，然后调用useModel.embed([sentence1, sentence2])来获取它们的嵌入向量。这些向量是高维的数字数组，代表了句子的语义。最后，我们通过计算这两个向量的余弦相似度来衡量它们在语义上的接近程度。余弦相似度的值通常在-1到1之间，越接近1表示越相似。你会发现，即使句子结构不同，只要表达的意思相近，相似度也会很高。这在做智能客服、内容推荐或者抄袭检测时，都有很强的应用潜力。
总的来说，TensorFlow.js打开了一扇门，让前端开发者也能直接在浏览器里玩转机器学习。它降低了门槛，也拓宽了机器学习的应用场景，挺有意思的。
