用TensorFlow.js在浏览器中进行手写数字识别：一个分步指南

如何用TensorFlow.js在浏览器中实现手写数字识别？

引言

TensorFlow.js是一个库，可让您在浏览器中训练和运行机器学习模型。它基于TensorFlow，这是一个用于各种机器学习任务的流行框架。使用TensorFlow.js，您可以构建浏览器中的应用程序，这些应用程序可以识别图像、进行预测并执行其他机器学习任务。

在本文中，我们将探讨如何在浏览器中使用TensorFlow.js实现手写数字识别。我们将逐步介绍该过程，从收集数据到训练和部署模型。

收集数据

手写数字识别的第一步是收集数据集。您可以从MNIST数据库中获取此数据集，其中包含70,000个手写数字图像。

// 导入TensorFlow.js
import * as tf from "@tensorflow/tfjs";

// 从MNIST数据库加载数据
const mnist = tf.data.loadMnist(
  "https://storage.googleapis.com/tfjs-examples/mnist-data/",
  {
    numShards: 1,
  }
);

预处理数据

收集数据后，我们需要预处理数据才能使用它来训练我们的模型。这包括将图像转换为张量、将其归一化到0和1之间的范围内以及将标签转换为one-hot编码。

// 将图像转换为张量
const images = mnist.data.images.expandDims(-1).float32();

// 将标签转换为one-hot编码
const labels = tf.oneHot(mnist.data.labels, 10);

// 将数据分成训练集和测试集
const trainData = images.slice(0, 55000);
const trainLabels = labels.slice(0, 55000);
const testData = images.slice(55000, 60000);
const testLabels = labels.slice(55000, 60000);

定义模型

现在，我们准备定义我们的模型。我们将使用一个卷积神经网络（CNN），因为它在图像识别任务中表现出色。

// 创建模型
const model = tf.sequential();

// 添加卷积层
model.add(tf.layers.conv2d({
  inputShape: [28, 28, 1],
  filters: 32,
  kernelSize: 3,
  activation: "relu",
}));

// 添加池化层
model.add(tf.layers.maxPooling2d({
  poolSize: [2, 2],
}));

// 添加额外的卷积层
model.add(tf.layers.conv2d({
  filters: 64,
  kernelSize: 3,
  activation: "relu",
}));

// 添加池化层
model.add(tf.layers.maxPooling2d({
  poolSize: [2, 2],
}));

// 添加扁平化层
model.add(tf.layers.flatten());

// 添加全连接层
model.add(tf.layers.dense({
  units: 128,
  activation: "relu",
}));

// 添加输出层
model.add(tf.layers.dense({
  units: 10,
  activation: "softmax",
}));

编译模型

定义模型后，我们需要编译它。这包括指定损失函数、优化器和指标。

// 编译模型
model.compile({
  loss: "categoricalCrossentropy",
  optimizer: "adam",
  metrics: ["accuracy"],
});

训练模型

现在，我们可以开始训练我们的模型。这需要将训练数据传递给模型并指定训练持续时间。

// 训练模型
model.fit(trainData, trainLabels, {
  epochs: 10,
  batchSize: 32,
});

评估模型

训练模型后，我们需要评估其在测试数据集上的性能。

// 评估模型
const loss = model.evaluate(testData, testLabels, {
  verbose: 2,
});

部署模型

训练并评估模型后，就可以将其部署在浏览器中。这可以通过保存模型并将其加载到网页上来完成。

// 保存模型
model.save("my_model");

// 在网页中加载模型
const loadedModel = await tf.loadModel("my_model");

现在，您可以在网页中使用加载的模型来进行预测。

结论

在本文中，我们介绍了如何在浏览器中使用TensorFlow.js实现手写数字识别。我们讨论了收集和预处理数据、定义模型、编译模型、训练模型、评估模型和部署模型的过程。通过遵循这些步骤，您可以构建自己的浏览器应用程序来执行手写数字识别和其他机器学习任务。