tfjs で sin 波の機械学習。スマホのテキストエディタで。

TensorFlow.js (tfjs) は、ブラウザと Node.js 内で機械学習モデルの訓練とデプロイを行うための JavaScript ライブラリです。

https://www.tensorflow.org/js/tutorials

これまで、QuickEdit Text Editor Pro で TensorFlow.js の CODE SAMPLE FOR SCRIPT TAG SETUP をプレビュー や tfjs-vis で sin 波を。スマホのテキストエディタで。、tfjs で Early Stopping。スマホのテキストエディタで。 の記事で tfjs についてみてきましたが、今回はひとつの目標としていた tfjs で sin 波の機械学習を試します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>サンプル</title>

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"> </script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis"></script>

<script>
var _debug;
var _dct = 0;
function _debugStart(){
  _debug = document.getElementById("DEBUG");
  _debug.textContent = "";
  _debugHTML("DEBUG START");
}
function _debugHTML(_deHTML){
  _debug.insertAdjacentHTML("afterbegin", "<div><em>" + ++_dct + " : </em>" + _deHTML + "<div>");
}
console.log = function(_dobj){
  _debugHTML(_dobj);
};
</script>
</head>
<body>

<div id="trainStatus"></div>
<div id="lossChart"></div>
<div id="predictStatus"></div>
<div id="sinChart"></div>

<div id="DEBUG"></div>

<script>
_debugStart();
_debugHTML("tfjs sin START");

function tensor_sin(T=100, ampl=0.05){
  return tf.tidy(() => {
    const L = 2 * T + 1;
    const noise = tf.randomUniform([L], -1.0, 1.0);
    const an = tf.mul(noise, tf.scalar(ampl));
    const x = tf.range(0, L);
    const xp = tf.mul(x, tf.scalar(2.0 * Math.PI));
    const sx = tf.sin(tf.div(xp, tf.scalar(T)));
    const sn = tf.add(sx, an);
    return sn;
 });
}

class EarlyStopping{
  constructor(patience=0, verbose=0){
    this._step = 0;
    this._loss = Number.POSITIVE_INFINITY;
    this.patience = patience;
    this.verbose = verbose;
  }
  validate(loss){
    if(this._loss < loss){
      this._step += 1;
      if(this._step > this.patience){
        if(this.verbose){
          console.log("early stopping");
        }
        return true;
      }
    }else{
      this._step = 0;
      this._loss = loss;
    }
    return false;
  }
}

// 即時関数 Immediately Invoked Function Expression ( IIFE ）
(async () => {

  // データの生成
  const T = 100;
  const f = tensor_sin(T, 0.05);
  const v = tensor_sin(T, 0.05);
  const n = tensor_sin(T, 0.0);

  // 時系列データの作成
  const length_of_sequences = 2 * T;
  const maxlen = 25;  // ひとつの時系列データの長さ

//  const farray = f.dataSync();
  const varray = v.dataSync();
//  const narray = n.dataSync();

  const fdata = [];
  const vdata = [];
  const target = [];

  for(i=0; i < length_of_sequences - maxlen + 1; i++){
    fdata.push(f.slice(i, maxlen));
    vdata.push(v.slice(i, maxlen));
    target.push(n.slice(i + maxlen, 1));
  }

  const N_train = length_of_sequences - maxlen + 1;
  const N_validation = length_of_sequences - maxlen + 1;

  const X_train = tf.stack(fdata).reshape([N_train, maxlen, 1]);
  const X_validation = tf.stack(vdata).reshape([N_validation, maxlen, 1]);
  const Y_train = tf.stack(target).reshape([N_train, 1]);
  const Y_validation = tf.stack(target).reshape([N_validation, 1]);

  // モデル設定
  const n_in = 1;
  const n_hidden = 20;
  const n_out = 1;

  const model = tf.sequential();
  model.add(tf.layers.simpleRNN({
    units: n_hidden,
    kernelInitializer: "randomNormal",
    inputShape: [maxlen, n_in]
  }));
  model.add(tf.layers.dense({
    units: n_out,
    kernelInitializer: "randomNormal"
  }));
  model.add(tf.layers.activation({
    activation: "linear"
  }));

  // compile
  model.compile({
    loss: "meanSquaredError",
    optimizer: "adam",
    metrics: ["accuracy"]
  });

  // fit & predict
  const iterations = 100;
  const epochs = 1;
  const batchSize = 20;

  const lossValues = [[], []];
  const accuracyValues = [[], []];
  let epochcnt = 0;
  const early_stopping = new EarlyStopping(10, 1);

  for (let i = 0; i < iterations; ++i) {
    const beginMs = performance.now();
    const history = await model.fit(X_train, Y_train, {
      epochs: epochs,
      batchSize: batchSize,
      validationSplit: 0.1,
      validationData: [X_validation, Y_validation],
      callbacks: {
        onEpochBegin: async (epoch, logs) => {
          epochcnt = epoch;
        },
        onBatchEnd: async (batch, logs) => {
          let elapsedMs = performance.now() - beginMs;
          let modelFitTime = elapsedMs / 1000;
          document.getElementById("trainStatus").textContent = `Iteration ${i+1} of ${iterations} (Epoch ${epochcnt+1}, Batch ${batch}): Fit time ${modelFitTime.toFixed(3)}s`;
        },
        onEpochEnd: async (epoch, logs) => {
          // Early Stopping チェック
          if(early_stopping.validate(logs["val_loss"])){
            model.stopTraining = true;
           } 
         }
       }
    });

    let elapsedMs = performance.now() - beginMs;
    let modelFitTime = elapsedMs / 1000;
    document.getElementById("trainStatus").textContent = `Iteration ${i+1} of ${iterations}: Fit time ${modelFitTime.toFixed(3)}s`;

    lossValues[0].push({"x": i, "y": history.history.loss[0]});
    lossValues[1].push({"x": i, "y": history.history.val_loss[0]});
    accuracyValues[0].push({"x": i, "y": history.history.acc[0]});
    accuracyValues[1].push({"x": i, "y": history.history.val_acc[0]});

    const lossContainer = document.getElementById("lossChart");
    tfvis.render.linechart(
      lossContainer,
      {values: lossValues, series: ["train", "validation"]},
      {
        width: 300,
        height: 300,
         xLabel: "Iteration",
         yLabel: "loss"
    });

    let predicted = [];
    const predictMs = performance.now();
    tf.tidy(() => {
      let y = v.slice(0, maxlen).reshape([maxlen]);
      for(let ix=0; ix < T - maxlen + 1; ix++){
        const Z = v.slice(ix, maxlen).reshape([1, maxlen, 1]);
        const Y = model.predict(Z);
        y = y.concat(Y.slice(0, 1).reshape([1]));
      }
      predicted = y.dataSync();
    });
    let predictTime = (performance.now() - predictMs) / 1000;
   document.getElementById("predictStatus").textContent = `Iteration ${i+1} of ${iterations}: Predict time ${predictTime.toFixed(3)}s`;

    const sinValues = [[], []];
    for (let i = 0; i < T; i++) {
      sinValues[0].push({"x": i, "y": varray[i]});
      sinValues[1].push({"x": i, "y": predicted[i]});
    }
    const sinContainer = document.getElementById("sinChart");
    tfvis.render.linechart(
      sinContainer,
      {values: sinValues, series: ["varidation", "predicted"]},
      {
        width: 300,
        height: 300,
        xLabel: "time",
        yLabel: "value"
    });
    if(model.stopTraining){
      break;
    }
  }

})();

_debugHTML("tfjs sin E N D");
</script>
</body>
</html>

まず、 tensor_sin() ファンクションは、 tfjs-vis で sin 波を。スマホのテキストエディタで。 にて作成した sin 波のデータをテンソルで返す関数です。そして、 EarlyStopping クラスは、tfjs で Early Stopping。スマホのテキストエディタで。にて作成した Early Stopping を判断するためのクラスです。

sin 波のデータは、３つ用意しました。訓練用のデータ（ノイズあり）と、検証用のデータ（ノイズあり）、そしてノイズなしのデータとしました。

そして、訓練用と検証用のデータについて、時系列データを作成します。連続する 25 の個々のデータをひとつの時系列データとします。それをひとつずつずらしながら繰り返して作成いきます。また、ノイズなしのデータは、26 番目のデータからひとつずつ取っていきます。連続する 25 のデータからそのひとつ先の値を学習して予測することになります。

tf.slice() は、テンソルから指定された位置で切り出します。 tf.stack() は、複数の同形のテンソルをひとつのテンソルにまとめます。テンソル（オブジェクト）を JavaScript の配列の要素にしたものが引数となります。 tf.reshape() は、テンソルを変形します。 tf.concat() は、テンソルを連結します。

モデルの fit と predict の組み合わせで１イテレーションとして、これを 100 回繰り返します。エポック数は１としました。これで学習の進み具合を頻繁に確認できるようにしました。

なお、 このページが表示されると、イテレーション 10 回で学習を開始して、学習の進み具合を更新しています。10 回では不完全なのですが、良さそうに進行していることは感じられると思います。

ここまで、まだまだ不慣れで、どうなんだろう？、ということがまだまだあります。それでも、 TensorFlow.js (tfjs) で、ファーストステップ、ひとつの目標に届いたかな思います。

さて、今回使用している環境は、Android スマホのテキストエディタアプリ QuickEdit Text Editor Pro です。プレビュー機能で HTML ドキュメントの JavaScript コードを実行することで確認しています。 QuickEdit Text Editor Pro で TensorFlow.js の CODE SAMPLE FOR SCRIPT TAG SETUP をプレビュー で記事投稿した方法です。文法 Error の Debug はできませんが、console.log を出力するためのコードを追加しています。

今回参照している書籍です。なお、本書での実装は Python です。

詳解 ディープラーニング ~TensorFlow・Kerasによる時系列データ処理~

Amazon.co.jp
商品詳細リンク