モバイル&ワイヤレスブロードバンドでインターネットへ

gwaw.jp
 

QuickEdit Text Editor Pro で TensorFlow.js の CODE SAMPLE FOR SCRIPT TAG SETUP をプレビュー

Android 用 テキストエディタアプリの QuickEdit Text Editor Pro で、TensorFlow.js の CODE SAMPLE FOR SCRIPT TAG SETUP をプレビュー実行してみます。

Android 用 テキストエディタアプリのなかには、プレビュー機能で JavaScript も実行できるものがいくつかあります。今回は、QuickEdit Text Editor Pro(有料版)を利用して試してみました。

https://js.tensorflow.org/setup/ の CODE SAMPLE FOR SCRIPT TAG SETUP のコードを HTML ファイルに取り込みます。なお、オリジナルでアウトプットのコードも付け加えました。

TensorFlow.js のロードには、CDN を利用していますので、スマホのネットワークは有効にしておきます。ちなみに、ローカルにダウンロードして参照する方法もいいのかもしれません。



<html>
<head>
<script>
var _debug;
function _debugStart(){
  _debug = document.getElementById('DEBUG');
  _debug.textContent = '';
  _debugHTML('<div>START</div>');
}
function _debugHTML(_deHTML){
  _debug.insertAdjacentHTML('afterbegin', _deHTML);
}
</script>
<!-- Load TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.14.1/dist/tf.min.js"></script>
</head>
<body>
<div id="DEBUG"></div>
<script>
// DEBUG OUTPUT
_debugStart();
// Define a model for linear regression.
const model = tf.sequential();
model.add(tf.layers.dense({units: 1, inputShape: [1]}));

model.compile({loss: 'meanSquaredError', optimizer: 'sgd'});

// Generate some synthetic data for training.
const xs = tf.tensor2d([1, 2, 3, 4], [4, 1]);
const ys = tf.tensor2d([1, 3, 5, 7], [4, 1]);

// Train the model using the data.
model.fit(xs, ys, {epochs: 10}).then(() => {
  // Use the model to do inference on a data point the model hasn't seen before:
  model.predict(tf.tensor2d([5], [1, 1])).print();
  // Open the browser devtools to see the output
});
_debugHTML('<div>E N D</div>');
</script>
</body>
</html>

 



  model.predict(tf.tensor2d([5], [1, 1])).print();

このアウトプット先は、コンソールとなっていますので、プレビュー機能では残念ながら見ることができません。戻り値を表示するようにしてみます。



  var result = model.predict(tf.tensor2d([5], [1, 1]));
  _debugHTML('<div>RESULT [' + result + ']</div>');

ところで、console.log についてグーグル検索してみたとき、次のようなコードを目にしたことがあります。



console.log = function(){
};

console.log のアウトプットを停止するアイデアのひとつとして紹介されていました。不安もありますが、このアイデアを利用させていただきました。



<html>
<head>
<script>
var _debug;
function _debugStart(){
  _debug = document.getElementById('DEBUG');
  _debug.textContent = '';
  _debugHTML('<div>START</div>');
}
function _debugHTML(_deHTML){
  _debug.insertAdjacentHTML('afterbegin', _deHTML);
}
console.log = function(_o){
  _debugHTML(_o);
};
</script>
<!-- Load TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.14.1/dist/tf.min.js"></script>
</head>
<body>
<div id="DEBUG"></div>
<script>
// DEBUG OUTPUT START
_debugStart();
// Define a model for linear regression.
const model = tf.sequential();
model.add(tf.layers.dense({units: 1, inputShape: [1]}));

model.compile({loss: 'meanSquaredError', optimizer: 'sgd'});

// Generate some synthetic data for training.
const xs = tf.tensor2d([1, 2, 3, 4], [4, 1]);
const ys = tf.tensor2d([1, 3, 5, 7], [4, 1]);

// Train the model using the data.
model.fit(xs, ys, {epochs: 10}).then(() => {
  // Use the model to do inference on a data point the model hasn't seen before:
  model.predict(tf.tensor2d([5], [1, 1])).print();
  // Open the browser devtools to see the output
});
// DEBUG OUTPUT
_debugHTML('<div>E N D</div>');
</script>
</body>
</html>

プレビュー機能は、文法エラーなどのデバッグには不向きですが、パラメータの調整などの際には利用できそうです。

ちなみに、同じ Android 用 テキストエディタアプリの Quoda Code Editor(有料版を使用しています)の Preview 機能でも同様のことができています。

『QuickEdit Text Editor Pro で TensorFlow.js の CODE SAMPLE FOR SCRIPT TAG SETUP をプレビュー』を公開しました。