前回
* Jupyter Notebookのようなもの（あくまで個人の感想です）をメモ帳・ブラウザ・gitで実現する
で作成した、Notebookを使って、TensorFlow.jsのGetting Startedを行ってみました。
このサンプルは、一次関数の線形回帰です。
オリジナルは、DevToolsのログに出力していましたが、ビジュアライザーに渡せるように変更しました。
10回の試行では（当たり前ですが）十分に収束しません。概ね300回程度で近い値を返すようになります。
ファイルの拡張子はhtmlで作成しています。
実行結果
コード
タイトル・章
<!DOCTYPE html><head><meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.13.0"></script>
</head><body><script type="text/markdown">
# JS Notebook
## TensorFlow.js Getting Started
[https://js.tensorflow.org/#getting-started](https://js.tensorflow.org/#getting-started)
数式の表示
### #1 Linear regression
%%%(Math """
y = ax + b
""")
ビジュアライザーの定義
%%%($last ($let visualizer-1 (-> (values)
"""Markdown
| x | y |
|------------------:|------------------:| %%%($=for values """
| %%%($get $data 0) | %%%($get $data 1) | """)
%%%($local (
(xy ($map values (-> (r) (# (x ($get r 0)) (y ($get r 1)) ))))
(get-color (-> (i op)
($let p ($to-string op))
($let c ($list ($concat "rgba(255, 99, 132, " p ")")
($concat "rgba( 54, 162, 235, " p ")")
($concat "rgba(255, 206, 86, " p ")")
($concat "rgba( 75, 192, 192, " p ")")
($concat "rgba(153, 102, 255, " p ")")
($concat "rgba(255, 159, 64, " p ")") ))
($get c ($mod i ($length c))) )))
(Chart (@ (width 800)
(height 400)
(unit "px")
(asImgTag)
(settings (#
(type "scatter")
(data (#
(label "values")
(datasets ($list (#
(label "points")
(data xy)
(backgroundColor (get-color 0 0.2))
(borderColor (get-color 0 1.0))
(borderWidth 1)
)))
))
))) )) """)) nil)
コードブロックの定義開始
%%%(Notebook """Js@{(module "Tfjs01") (visualizer visualizer-1)}
```javascript
コードブロック
// Define a model for linear regression.
const model = tf.sequential();
model.add(tf.layers.dense({
units: 1, // dimensionality of the output space.
inputShape: [1], // dimension of the input.
}));
// Prepare the model for training: Specify the loss and the optimizer.
model.compile({loss: 'meanSquaredError', optimizer: 'sgd'});
const trainX = [1, 2, 3, 4];
const trainY = [1, 3, 5, 7];
// Generate some synthetic data for training.
const xs = tf.tensor2d(trainX, [trainX.length, 1]); // Create a r4xc1 [[1],[2],[3],[4]] 2d tensor.
const ys = tf.tensor2d(trainY, [trainY.length, 1]); // Create a r4xc1 [[1],[3],[5],[7]] 2d tensor.
// Train the model using the data.
// train 'epochs' times...
return model.fit(xs, ys, {epochs: 10}).then(() => {
// End training !
// Use the model to do inference on a data point the model hasn't seen before.
const inputX = [5, 6, 7, 8];
return (
model.predict( // Generates output predictions for the input samples.
tf.tensor2d(inputX, [inputX.length, 1]) // Create a r4c1 [[5],[6],[7],[8]] 2d tensor.
).data().then(a => {
// a is an object with string keys "0", "1", ....
const t = trainX.map((v, i) => [v, trainY[i]]);
const r = [];
for (let i in a) {
if (a.hasOwnProperty(i)) {
r[Number(i)] = [inputX[Number(i)], a[i]];
}
}
return t.concat(r);
})
);
});
コードブロック定義の終了
``` <--- バッククォート × 3 です。
""")
数式表示のためのMathJax読み込み
### To view math formula in all browsers, load [MathJax](https://www.mathjax.org/) script file.
%%%(script (@ (src "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML") (crossorigin "anonymous") (async)))
</script>
<script src="js/notebook.js"></script>
<script src="js/menneu.min.js" onload="start({title: 'My Notebook 1'})"></script>
</body>
感想
TensorFlowは、値の取り扱いが非同期処理であるため、苦労がありました。
前回記事公開のタイミングでは、結果が返るのがDOM構築の後になるため、非同期処理の結果を表示できませんでしたが、コードブロックのコンポーネントにビジュアライザーの関数を渡すことで解決できました。（非同期のリソースを待つメカニズム自体は元々、画像の1ファイルへのパッキング等のために持っていたので、そのまま使用できました。）