如何在Tensorflow.js中處理MNIST影象資料

機器之心發表於2018-06-26
JS

選自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：影象和標籤的路徑

將這些影象級聯為一個巨大的影象，如下圖所示：

如何在Tensorflow.js中處理MNIST影象資料

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 也會繼續前進，跟上發展的步伐。


相關文章