TensorFlow.JSで簡単な関数を学習させてみた（初歩の初歩／その１）

１、TensorFlow.JSで簡単な関数の学習

　HTML/JavaScriptのみで機械学習が可能なTensorFlow.JSで色々試してみました。　プログラムは出来るだけシンプルに作成するように心掛けました。　実際の動作は、ここ（簡単な一次関数の学習）あるいはここ（幾つかの関数の学習）をクリックして下さい。

１－１、一次関数の学習

　初めに最も簡単な一次関数（y=ax+b）を学習させてみます。　手順は次の通りです。
(1) 学習モデルを作成する。
　　ここでは、単純な入力層と出力層のみの学習モデルを作成します。　ｘの値を入力層に入れると出力層にｙの値が出てくるイメージです。　活性化関数は学習対象に合わせ「linear」にしています。

TensorFlow.JS用学習モデル作成

const model = tf.sequential();
 model.add(tf.layers.dense({
    inputShape: [ 1 ],
    activation: 'linear',
    units: 1
 }));

図で書くとこんな感じでしょうか。

(2) 学習用入力データ（ｘ）と教師データ（ｙ）を準備する。
　ランダムなｘの値からy=ax+bの値を計算し、それを１セットとして所定数の学習用配列データ(xTrainData, yTrainData)と検証用配列データ(xTestData, yTestData)を作成する。
(3) 作成したデータをTensorFlow.JS用に変換する。

TensorFlow.JS用データに変換

  const xTrain = tf.tensor2d( xTrainData, [ xTrainData.length, 1 ], 'float32' );
  const yTrain = tf.tensor2d( yTrainData, [ yTrainData.length, 1 ], 'float32' );
  const xTest = tf.tensor2d( xTestData, [ xTestData.length, 1 ], 'float32' );
  const yTest = tf.tensor2d( yTestData, [ yTestData.length, 1 ], 'float32' );

(4) 学習の実行
　作成した学習データ（xTrain、yTrain）を使用して学習させ、検証データとして xTest と yTest を指定しています。　なお、callbacksの中身は、途中経過の表示です。

学習の実行

// 学習過程の設定
  model.compile({
    loss: "meanSquaredError",
    optimizer: 'sgd'
  });
// 学習と学習経過をdspに格納
  const history = await model.fit( xTrain, yTrain, {
    epochs: epochData,
    validationData:[ xTest, yTest ],
    callbacks: {
        onEpochEnd: async (epoch, logs) => {
        dsp = dsp + ("      " + (Train_count + epoch)).slice(-7) + " : " + logs.loss + " / " + logs.val_loss + "\n";
        document.getElementById("dump").value = dsp;
        },
    }
  });

(5) 評価用データをTensorFlow.JS用に変換する。
　評価用として入力したｘの値（d_00）をTensorFlow.JS用に変換します。

評価用データの変換

    const inputData = tf.tensor2d( [ d_00 ], [ 1, 1 ], 'float32' );

(6) 評価の実行
　ここで、resultsが評価結果（ｙの値の推定値）です。

評価の実行

    const outputData = model.predict(inputData);
    var results = outputData.dataSync();

実際の動作は、ここ（簡単な一次関数の学習）をクリックして下さい。　学習が進んでいくのが分かると思います。

１－２、幾つかの関数とCSVデータの学習

　次に幾つかの関数あるいはローカルのCSVデータを学習させてみましょう。　基本的な手順は上記と同様ですが、今回使用する関数データは予めCSVデータとして作成しておき、そこから必要数ランダムに抽出し学習用と検証用にしています。　また、学習モデルは中間層２層まで指定できるようにしました。　各中間層のユニット数ならびに活性化関数を指定することで学習モデルを構築できます。

学習モデルの設定

    if(Dense == 2) {                      // ２中間層の場合
    model.add(tf.layers.dense({units: UN_1, activation: Act_01, inputShape: [1]}));
    model.add(tf.layers.dense({units: UN_2, activation: Act_02}));
    model.add(tf.layers.dense({units: 1, activation: Act_00}));
    } else if(Dense == 1) {               // １中間層の場合
    model.add(tf.layers.dense({units: UN_1, activation: Act_01, inputShape: [1]}));
    model.add(tf.layers.dense({units: 1, activation: Act_00}));
    } else {                              // 中間層なしの場合
    model.add(tf.layers.dense({units: 1, activation: Act_00, inputShape: [1]}));
    } 

　実際の動作は、ここ（幾つかの関数の学習）をクリックして下さい。　学習モデルの設定次第で学習実行時の進行度合いが大きく異なることが分かると思います。

---

TensorFlow.JSを使用してみたの記事内容

１、TensorFlow.JSで簡単な関数を学習させてみた
２、TensorFlow.JSでアヤメの分類を学習させてみた
３、TensorFlow.JSで手入力数字の認識を学習させてみた
４、TensorFlow.JSで画像の認識（分類）を学習させてみた

ここに記載したHTML/JavaScriptの動作を確認したい方は、「http://hal322.html.xdomain.jp/」を参照ください。