#３、TensorFlow.JSで手入力数字の認識を学習
定番中の定番であるMNISTを使用した学習をTensorFlow.JSで作成しました。 通常はMNIST特有仕様のデータを使用しますが、今回はPNG画像ファイルを使用しましたので学習データの取り扱いは容易かと思います。 但し、データの読み込みには時間を要しますが！ 実際の動作は、ここ（TensorFlow.JSで手入力数字の認識を学習させてみた／２中間層）あるいはここ（TensorFlow.JSで手入力数字の認識を学習させてみた／３中間層)をクリックして下さい。 Windows 10の環境で「Firefox / Ver. 65.0.2 (64ビット)」及び 「Google Chrome / Ver. 73.0.3683.86 (64ビット)」で動作を確認しました。 また、Android 7.0でも動作しましたが、iOSでは上手く動作しませんでした。
本プログラムの作成手順は、次の通りです。
##３－１、準備
学習データ、検証データ合わせて６万のPNG画像ファイルがありますので、次にようなファイルリスト（Ａ列）とラベルデータ（Ｂ列）をセットにしたCSVファイルを作成しました。 このCSVファイルを作成するにはEXCEL+VBAを使用すると簡単ですよね。 なお、このCSVファイル内容を変更あるいは追加することで、任意の画像ファイルを学習データとすることが出来ます。
##３－２、学習モデルの作成
MNISTの学習モデルについては、色々なサイトで解説されていますのでここでは割愛します。（「Deep Learning 深層学習 - 東京大学」が良い参考になると思います） 入力データは単色のPNG画像ですので、２８(dw：横画素数)×２８(dh：縦画素数)×１（色数）で１画像分のデータとなり、教師データは０～９までの数字１０個のラベルに対応したコード（例：０は「1,0,0,0,0,0,0,0,0,0」、９は「0,0,0,0,0,0,0,0,0,1」の配列）にしています。 このため、評価結果は各配列に対応したそれぞれの確率で出力されます。 以下に２中間層と３中間層の２種類の学習モデルを異なるパラメータ表現で示します。 なお、ここでのパラメータは最適化したものではありません。
let model = tf.sequential();
model.add(
tf.layers.conv2d({
inputShape: [dw, dh, 1],
kernelSize: 5,
filters: 8,
strides: 1,
activation: "relu",
kernelInitializer: "varianceScaling"
})
);
model.add(tf.layers.maxPooling2d({ poolSize: [2, 2], strides: [2, 2] }));
model.add(tf.layers.conv2d({ kernelSize: 5, filters: 16, activation: "relu", kernelInitializer: "varianceScaling" }));
model.add(tf.layers.maxPooling2d({ poolSize: [3, 3], strides: [3, 3] }));
model.add(tf.layers.flatten());
model.add(tf.layers.dense({ units: 10, kernelInitializer: "varianceScaling", activation: "softmax" }));
let model = tf.sequential();
model.add(
tf.layers.conv2d({
inputShape: [dw, dh, 1],
kernelSize: 3,
filters: 16,
activation: "relu"
})
);
model.add(tf.layers.maxPooling2d({ poolSize: 2, strides: 2 }));
model.add(tf.layers.conv2d({ kernelSize: 3, filters: 32, activation: "relu" }));
model.add(tf.layers.maxPooling2d({ poolSize: 2, strides: 2 }));
model.add(tf.layers.conv2d({ kernelSize: 3, filters: 32, activation: "relu" }));
model.add(tf.layers.flatten({}));
model.add(tf.layers.dense({ units: 64, activation: "relu" }));
model.add(tf.layers.dense({ units: 10, activation: "softmax" }));
##３－３、学習用データ、検証用データの読込
読込んだ画像データ１枚毎にCANVASに２８×２８画素で表示させ、各１画素づつ数値データ化しています。 この数値データは０～２５５で表現されますが、そのままの数値「int32」形式では上手く動作しませんでしたので２５５で割った「float32」形式にしてxTrainDataに格納しました。 教師データとしてのラベル・コードは、yTrainDataに格納しています。 検証用データ（xTestDataとyTestData）も同様に処理しました。
var ctx_train = canvas_train.getContext('2d');
var Train_img = new Image();
Train_img.src = "./Data/mnist_train/" + Temp_file;
Train_img.onload = function() {
ctx_train.drawImage(Train_img, 0, 0, dw * ds, dh * ds);
};
for(y=0; y<dh; y++) {
for(x=0; x<dw; x++) {
Temp_img = ctx_train.getImageData((x * ds), (y * ds), 1, 1);
xTrainData.push( Temp_img.data[0] / 255 );
}
}
Temp_label = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0];
if(Train_File_List[ Temp_num ][1] == Label[1]) {
Temp_label = [0, 1, 0, 0, 0, 0, 0, 0, 0, 0];
} else if (Train_File_List[ Temp_num ][1] == Label[2]) {
Temp_label = [0, 0, 1, 0, 0, 0, 0, 0, 0, 0];
} else if (Train_File_List[ Temp_num ][1] == Label[3]) {
Temp_label = [0, 0, 0, 1, 0, 0, 0, 0, 0, 0];
} else if (Train_File_List[ Temp_num ][1] == Label[4]) {
Temp_label = [0, 0, 0, 0, 1, 0, 0, 0, 0, 0];
} else if (Train_File_List[ Temp_num ][1] == Label[5]) {
Temp_label = [0, 0, 0, 0, 0, 1, 0, 0, 0, 0];
} else if (Train_File_List[ Temp_num ][1] == Label[6]) {
Temp_label = [0, 0, 0, 0, 0, 0, 1, 0, 0, 0];
} else if (Train_File_List[ Temp_num ][1] == Label[7]) {
Temp_label = [0, 0, 0, 0, 0, 0, 0, 1, 0, 0];
} else if (Train_File_List[ Temp_num ][1] == Label[8]) {
Temp_label = [0, 0, 0, 0, 0, 0, 0, 0, 1, 0];
} else if (Train_File_List[ Temp_num ][1] == Label[9]) {
Temp_label = [0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
} else {
Temp_label = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0];
}
yTrainData.push(Temp_label);
##３－４、学習データと検証データをTensorFlow.JS用に変換
画像データであるxTrainDataとxTestDataは tf.tensor4d（データ数、画像の横画素数、縦画素数、色数の４個）で、ラベルデータであるyTrainDataとyTestDataは tf.tensor2d（データ数、ラベル数の２個）でTensorFlow.JS用に変換しました。 ここでの色数は、単色ですので「１」となります。
const xTrain = tf.tensor4d( xTrainData , [ (xTrainData.length/dw/dh), dw, dh, 1 ], 'float32' );
const yTrain = tf.tensor2d( yTrainData, [ yTrainData.length, Label.length ], 'int32' );
const xTest = tf.tensor4d( xTestData , [ (xTestData.length/dw/dh), dw, dh, 1 ], 'float32' );
const yTest = tf.tensor2d( yTestData, [ yTestData.length, Label.length ], 'int32' );
##３－５、学習の実行
作成した学習データ xTrain と yTrain を使用して学習させ、検証データとして xTest と yTest を指定しています。 なお、callbacksの中身は、途中経過の表示です。
// 学習過程の設定
model.compile({
loss: "categoricalCrossentropy",
optimizer: tf.train.sgd( optimize ),
metrics: ['accuracy']
});
// 学習と学習経過をdspに格納
const history = await model.fit( xTrain, yTrain, {
batchSize: BatchSize,
epochs: epochData,
validationData:[ xTest, yTest ],
shuffle: true,
callbacks: {
onEpochEnd: async (epoch, logs) => {
sampleData_x01.push(Train_count * 1.0 + epoch * 1.0);
sampleData_y01.push(logs.loss);
sampleData_z01.push(logs.val_loss);
sampleData_x02.push(Train_count * 1.0 + epoch * 1.0);
sampleData_y02.push(logs.acc);
sampleData_z02.push(logs.val_acc);
Learn_Chart_01();
Learn_Chart_02();
if(((epoch + 1) % 10) == 0) {
dsp = dsp + (" " + (Train_count + epoch)).slice(-7) + " : " + (logs.loss + "000000000000").slice(0,12) + " / " + (logs.acc + "000000000000").slice(0,12) + " / " + (logs.val_loss + "000000000000").slice(0,12) + " / " + (logs.val_acc + "000000000000").slice(0,12) + "\n";
document.getElementById("dump").value = dsp;
}
},
}
});
##３－６、評価用データの読込
評価用データの入力には signature_pad を利用しています。 入力した手書き数字を２８×２８の学習データと同一サイズに変換して数値データ化しました。
var EvData = [];
var ctx_Ev = canvas_Ev.getContext('2d');
var ctx_Ev_28 = canvas_Ev_28.getContext('2d');
for(y=0; y<dh; y++) {
for(x=0; x<dw; x++) {
Temp_img = ctx_Ev.getImageData((x * ds_Ev), (y * ds_Ev), 1, 1);
ctx_Ev_28.putImageData(Temp_img, x, y);
EvData.push( Temp_img.data[0] / 255 );
}
}
##３－７、評価用データをTensorFlow.JS用に変換
学習用データと同様に評価用データもTensorFlow.JS用に変換します。 評価用データ数は１個ですので、tf.tensor4dのパラメータもそれに合わせています。
const inputData = tf.tensor4d( EvData, [ 1, dw, dh, 1 ] );
##３－８、評価の実行
ここでは、resultsに１０個のラベル（０～９）に対応した評価結果（それぞれの確率）が配列として格納されます。
const outputData = model.predict(inputData);
// 評価結果の表示
var results = outputData.dataSync();
document.getElementById('result_00').value = (Label[0] + ": " + Math.floor(results[0] * 100000 ) / 1000 + " %");
document.getElementById('result_01').value = (Label[1] + ": " + Math.floor(results[1] * 100000 ) / 1000 + " %");
document.getElementById('result_02').value = (Label[2] + ": " + Math.floor(results[2] * 100000 ) / 1000 + " %");
document.getElementById('result_03').value = (Label[3] + ": " + Math.floor(results[3] * 100000 ) / 1000 + " %");
document.getElementById('result_04').value = (Label[4] + ": " + Math.floor(results[4] * 100000 ) / 1000 + " %");
document.getElementById('result_05').value = (Label[5] + ": " + Math.floor(results[5] * 100000 ) / 1000 + " %");
document.getElementById('result_06').value = (Label[6] + ": " + Math.floor(results[6] * 100000 ) / 1000 + " %");
document.getElementById('result_07').value = (Label[7] + ": " + Math.floor(results[7] * 100000 ) / 1000 + " %");
document.getElementById('result_08').value = (Label[8] + ": " + Math.floor(results[8] * 100000 ) / 1000 + " %");
document.getElementById('result_09').value = (Label[9] + ": " + Math.floor(results[9] * 100000 ) / 1000 + " %");
実際の動作は、ここ（TensorFlow.JSで手入力数字の認識を学習させてみた／２中間層）あるいはここ（TensorFlow.JSで手入力数字の認識を学習させてみた／３中間層)をクリックして下さい。
###TensorFlow.JSを使用してみたの記事内容
１、TensorFlow.JSで簡単な関数を学習させてみた
２、TensorFlow.JSでアヤメの分類を学習させてみた
３、TensorFlow.JSで手入力数字の認識を学習させてみた
４、TensorFlow.JSで画像の認識（分類）を学習させてみた
ここに記載したHTML/JavaScriptの動作を確認したい方は、「http://hal322.html.xdomain.jp/」を参照ください。