机器学习JavaScript_TensorFlow.js实战-js教程-PHP中文网

机器学习JavaScript_TensorFlow.js实战

幻影之瞳

发布： 2025-11-22 15:48:06

原创

257人浏览过

TensorFlow.js是Google推出的JavaScript机器学习框架，支持在浏览器和Node.js中直接运行模型。它无需后端服务即可完成AI推理，结合WebGL加速计算，适用于图像分类、手势识别等低延迟或隐私保护场景。通过npm安装@tensorflow/tfjs或引入CDN脚本可快速搭建环境。可用JS训练线性回归模型，如拟合y=2x+1，并进行预测。还能加载预训练的MobileNet模型实现图像分类。性能优化建议包括使用tf.tidy()管理内存、启用WebGL后端、将训练移至Web Worker及模型量化压缩。

机器学习javascript_tensorflow.js实战

想在浏览器或Node.js环境里运行机器学习模型，又不想切换到Python？TensorFlow.js就是为你准备的。它让JavaScript开发者可以直接用JS训练模型、加载预训练模型，甚至做推理预测。下面带你一步步上手实战。

1. 什么是TensorFlow.js？

TensorFlow.js 是Google推出的JavaScript版机器学习框架，支持在浏览器和Node.js中运行。它的核心优势是：无需后端服务，直接在前端完成AI推理；还能结合WebGL加速计算。

常见用途包括图像分类、手势识别、语音处理、推荐系统等，特别适合需要低延迟或保护用户隐私的场景。

2. 环境准备与项目搭建

开始前先确保你有Node.js环境，然后创建项目：

立即学习“Java免费学习笔记（深入）”；

新建文件夹并初始化npm：npm init -y
安装TensorFlow.js：npm install @tensorflow/tfjs（Node.js）或 npm install @tensorflow/tfjs-node（带CPU/GPU加速）
如果是网页使用，也可以通过CDN引入：
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>

3. 实战：训练一个简单的线性回归模型

我们用TensorFlow.js拟合一条直线 y = 2x + 1，看看模型能否学会这个规律。

代码示例：

import * as tf from '@tensorflow/tfjs';
<p>// 准备数据
const xs = tf.tensor1d([1, 2, 3, 4, 5]);
const ys = tf.tensor1d([3, 5, 7, 9, 11]); // y = 2x + 1</p><p>// 定义模型
const model = tf.sequential();
model.add(tf.layers.dense({ units: 1, inputShape: [1] }));</p><p>// 编译模型
model.compile({
optimizer: tf.train.sgd(0.01),
loss: 'meanSquaredError'
});</p><p>// 训练模型
async function train() {
await model.fit(xs, ys, {
epochs: 200,
verbose: false
});
console.log('训练完成！');</p><p>// 预测
const result = model.predict(tf.tensor1d([6]));
result.print(); // 应接近 13
}</p><p>train();</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/791">
                            <img src="https://img.php.cn/upload/ai_manual/001/503/042/68b6d92783abb832.png" alt="Amazon ML">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/791">Amazon ML</a>
                            <p>Amazon AMZ机器学习平台</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Amazon ML">
                                <span>80</span>
                            </div>
                        </div>
                        <a href="/ai/791" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Amazon ML">
                        </a>
                    </div>

登录后复制

这段代码会输出类似 [[12.98]] 的结果，说明模型已经学会了规律。

4. 加载预训练模型进行图像分类

除了自己训练，还可以加载已有的模型，比如MobileNet。

安装mobilenet：npm install @tensorflow-models/mobilenet
在HTML中放一张图片，并用模型识别

示例代码：

import * as tf from '@tensorflow/tfjs';
import * as mobilenet from '@tensorflow-models/mobilenet';
<p>async function recognizeImage() {
const img = document.getElementById('myImage');
const model = await mobilenet.load();
const predictions = await model.classify(img);
console.log(predictions);
}</p>

登录后复制

控制台会输出可能的类别和置信度，比如“吉娃娃”、“遥控器”等。