如何在Tensorflow.js中处理MNIST图像数据

选自freeCodeCamp

做者：Kevin Scott

机器之心编译

参与：李诗萌、路

数据清理是数据科学和机器学习中的重要组成部分，本文介绍了如何在 Tensorflow.js（0.11.1）中处理 MNIST 图像数据，并逐行解释代码。

有人开玩笑说有 80% 的数据科学家在清理数据，剩下的 20% 在抱怨清理数据……在数据科学工做中，清理数据所占比例比外人想象的要多得多。通常而言，训练模型一般只占机器学习或数据科学家工做的一小部分（少于 10%）。
——Kaggle CEO Antony Goldbloom

对任何一个机器学习问题而言，数据处理都是很重要的一步。本文将采用 Tensorflow.js（0.11.1）的 MNIST 样例（github.com/tensorflow/…），逐行运行数据处理的代码。

MNIST 样例

18 import * as tf from '@tensorflow/tfjs';
19
20 const IMAGE_SIZE = 784;
21 const NUM_CLASSES = 10;
22 const NUM_DATASET_ELEMENTS = 65000;
23
24 const NUM_TRAIN_ELEMENTS = 55000;
25 const NUM_TEST_ELEMENTS = NUM_DATASET_ELEMENTS - NUM_TRAIN_ELEMENTS;
26
27 const MNIST_IMAGES_SPRITE_PATH =
28 'https://storage.googleapis.com/learnjs-data/model-builder/mnist_images.png';
29 const MNIST_LABELS_PATH =
30 'https://storage.googleapis.com/learnjs-data/model-builder/mnist_labels_uint8';`
复制代码

首先，导入 TensorFlow（确保你在转译代码）并创建一些常量，包括：

• IMAGE_SIZE：图像尺寸（28*28=784）
• NUM_CLASSES：标签类别的数量（这个数字能够是 0～9，因此这里有 10 类）
• NUM_DATASET_ELEMENTS：图像总数量（65000）
• NUM_TRAIN_ELEMENTS：训练集中图像的数量（55000）
• NUM_TEST_ELEMENTS：测试集中图像的数量（10000，亦称余数）
• MNIST_IMAGES_SPRITE_PATH&MNIST_LABELS_PATH：图像和标签的路径

将这些图像级联为一个巨大的图像，以下图所示：

MNISTData

接下来，从第 38 行开始是 MnistData，该类别使用如下函数：

• load：负责异步加载图像和标注数据；
• nextTrainBatch：加载下一个训练批；
• nextTestBatch：加载下一个测试批；
• nextBatch：返回下一个批的通用函数，该函数的使用取决因而在训练集仍是测试集。

本文属于入门文章，所以只采用 load 函数。

load

async load() {
 // Make a request for the MNIST sprited image.
 const img = new Image();
 const canvas = document.createElement('canvas');
 const ctx = canvas.getContext('2d');
复制代码

异步函数（async）是 Javascript 中相对较新的语言功能，所以你须要一个转译器。

Image 对象是表示内存中图像的本地 DOM 函数，在图像加载时提供可访问图像属性的回调。canvas 是 DOM 的另外一个元素，该元素能够提供访问像素数组的简单方式，还能够经过上下文对其进行处理。

由于这两个都是 DOM 元素，因此若是用 Node.js（或 Web Worker）则无需访问这些元素。有关其余可替代的方法，请参见下文。

imgRequest

const imgRequest = new Promise((resolve, reject) => {
 img.crossOrigin = '';
 img.onload = () => {
 img.width = img.naturalWidth;
 img.height = img.naturalHeight;
复制代码

该代码初始化了一个 new promise，图像加载成功后该 promise 结束。该示例没有明确处理偏差状态。

crossOrigin 是一个容许跨域加载图像并能够在与 DOM 交互时解决 CORS（跨源资源共享，cross-origin resource sharing）问题的图像属性。naturalWidth 和 naturalHeight 指加载图像的原始维度，在计算时能够强制校订图像尺寸。

const datasetBytesBuffer =
 new ArrayBuffer(NUMDATASETELEMENTS * IMAGESIZE * 4);
57
58 const chunkSize = 5000;
59 canvas.width = img.width;
60 canvas.height = chunkSize;
复制代码

该代码初始化了一个新的 buffer，包含每一张图的每个像素。它将图像总数和每张图像的尺寸和通道数量相乘。

我认为 chunkSize 的用处在于防止 UI 一次将太多数据加载到内存中，但并不能 100% 肯定。

62 for (let i = 0; i < NUMDATASETELEMENTS / chunkSize; i++) {
63 const datasetBytesView = new Float32Array(
64 datasetBytesBuffer, i * IMAGESIZE * chunkSize * 4,
 IMAGESIZE * chunkSize);
66 ctx.drawImage(
67 img, 0, i * chunkSize, img.width, chunkSize, 0, 0, img.width,
68 chunkSize);
69
70 const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
复制代码

该代码遍历了每一张 sprite 图像，并为该迭代初始化了一个新的 TypedArray。接下来，上下文图像获取了一个绘制出来的图像块。最终，使用上下文的 getImageData 函数将绘制出来的图像转换为图像数据，返回的是一个表示底层像素数据的对象。

72 for (let j = 0; j < imageData.data.length / 4; j++) {
73 // All channels hold an equal value since the image is grayscale, so
74 // just read the red channel.
75 datasetBytesView[j] = imageData.data[j * 4] / 255;
76 }
77 }
复制代码

咱们遍历了这些像素并除以 255（像素的可能最大值），以将值限制在 0 到 1 之间。只有红色的通道是必要的，由于它是灰度图像。

78 this.datasetImages = new Float32Array(datasetBytesBuffer);
79
80 resolve();
81 };
82 img.src = MNISTIMAGESSPRITEPATH;
);
复制代码

这一行建立了 buffer，将其映射到保存了咱们像素数据的新 TypedArray 中，而后结束了该 promise。事实上最后一行（设置 src 属性）才真正启动函数并加载图像。

起初困扰个人一件事是 TypedArray 的行为与其底层数据 buffer 相关。你可能注意到了，在循环中设置了 datasetBytesView，但它永远都不会返回。

datasetBytesView 引用了缓冲区的 datasetBytesBuffer（初始化使用）。当代码更新像素数据时，它会间接编辑缓冲区的值，而后将其转换为 78 行的 new Float32Array。

获取 DOM 外的图像数据

若是你在 DOM 中，使用 DOM 便可，浏览器（经过 canvas）负责肯定图像的格式以及将缓冲区数据转换为像素。可是若是你在 DOM 外工做的话（也就是说用的是 Node.js 或 Web Worker），那就须要一种替代方法。

fetch 提供了一种称为 response.arrayBuffer 的机制，这种机制使你能够访问文件的底层缓冲。咱们能够用这种方法在彻底避免 DOM 的状况下手动读取字节。这里有一种编写上述代码的替代方法（这种方法须要 fetch，能够用 isomorphic-fetch 等方法在 Node 中进行多边填充）：

const imgRequest = fetch(MNISTIMAGESSPRITE_PATH).then(resp => resp.arrayBuffer()).then(buffer => {
 return new Promise(resolve => {
 const reader = new PNGReader(buffer);
 return reader.parse((err, png) => {
 const pixels = Float32Array.from(png.pixels).map(pixel => {
 return pixel / 255;
 });
 this.datasetImages = pixels;
 resolve();
 });
 });
});
复制代码

这为特定图像返回了一个缓冲数组。在写这篇文章时，我第一次试着解析传入的缓冲，但我不建议这样作。若是须要的话，我推荐使用 pngjs 进行 png 的解析。当处理其余格式的图像时，则须要本身写解析函数。

有待深刻

理解数据操做是用 JavaScript 进行机器学习的重要部分。经过理解本文所述用例与需求，咱们能够根据需求在仅使用几个关键函数的状况下对数据进行格式化。

TensorFlow.js 团队一直在改进 TensorFlow.js 的底层数据 API，这有助于更多地知足需求。这也意味着，随着 TensorFlow.js 的不断改进和发展，API 也会继续前进，跟上发展的步伐。