[update] いくつかのライブラリをファイル同梱から npm によるインストールへ変更。TensorFlow.js の Speech Command Recognizer を利用したコマンド認識ブロックを追加。

2024-11-21 15:19:48 +00:00 · 2023-01-01 16:21:29 +09:00 · 2023-01-01 16:21:29 +09:00 · a37760af85
commit a37760af85
parent d82c228b51
9 changed files with 357 additions and 101 deletions
--- a/apptools.js
+++ b/apptools.js
--- a/blocks/blocks.js
+++ b/blocks/blocks.js
@ -1075,20 +1075,27 @@ Blockly.JavaScript['ugj_face_draw'] = function (block) {
 /******************************* */
 Blockly.Blocks['oc_speechcommands_init'] = {
  init: function () {
+    this.appendDummyInput()
+      .appendField("音声コマンド認識を開始");
    this.appendValueInput("custom_model")
      .setCheck("String")
-      .appendField("音声コマンド認識を開始：カスタムモデル")
-    // .appendField("");
-    this.setInputsInline(true);
+      .setAlign(Blockly.ALIGN_RIGHT)
+      .appendField("カスタムモデル");
+    this.appendDummyInput()
+      .setAlign(Blockly.ALIGN_RIGHT)
+      .appendField(new Blockly.FieldVariable("ラベル"), "classlabels")
+      .appendField("を取得");
+    this.setInputsInline(false);
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
-    this.setTooltip("Tensorflow 音声コマンド認識モデルを初期化します。Google Teachable Machine で作成したカスタムモデルのフォルダパスを指定します。（空欄可）");
+    this.setTooltip("Tensorflow 音声コマンド認識モデルを初期化します。Google Teachable Machine で作成したカスタムモデルのフォルダパスを指定します。モデルに含まれるラベルのリストを取得し変数に代入します。");
    this.setHelpUrl("");
    this.setStyle('multimedia_blocks');
  }
 };
 Blockly.JavaScript['oc_speechcommands_init'] = function (block) {
  var value_custom_model = Blockly.JavaScript.valueToCode(block, 'custom_model', Blockly.JavaScript.ORDER_NONE);
+  var variable_classlabels = Blockly.JavaScript.nameDB_.getName(block.getFieldValue('classlabels'), Blockly.Names.NameType.VARIABLE);
  Blockly.JavaScript.provideFunction_(
    'require_tfjs', [`const _tf = require('@tensorflow/tfjs-node');`]
  );
@ -1110,39 +1117,41 @@ const _recognizer = _speechcommands.create(
  _checkpointURL,
  _metadataURL);
 await _recognizer.ensureModelLoaded();
+${variable_classlabels} = _recognizer.wordLabels();
 `;
  return code;
 };
 Blockly.Blocks['oc_speechcommand_listen'] = {
  init: function () {
    this.appendDummyInput()
-      .appendField("音声コマンドの")
-      .appendField(new Blockly.FieldVariable("ラベル"), "classlabels")
+      .appendField("音声コマンドを認識したら");
+    this.appendDummyInput()
+      .setAlign(Blockly.ALIGN_RIGHT)
      .appendField(new Blockly.FieldVariable("スコア"), "scores")
-      .appendField("を認識したら");
+      .appendField("を取得");
    this.appendStatementInput("do")
      .setCheck(null);
-    this.setInputsInline(true);
+    this.appendDummyInput()
+      .setAlign(Blockly.ALIGN_RIGHT)
+      .appendField("スコアしきい値")
+      .appendField(new FieldSlider(0.75, 0, 1, 0.05), "probabilityThreshold");
+    this.setInputsInline(false);
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
-    this.setTooltip("音声コマンドを認識するとステートメントをします。「ラベル」「スコア」はリストです。");
+    this.setTooltip("音声コマンドを認識するとステートメントを実行します。「スコア」は「ラベル」に対応するリストです。");
    this.setHelpUrl("");
    this.setStyle('multimedia_blocks');
  }
 };
 Blockly.JavaScript['oc_speechcommand_listen'] = function (block) {
-  var variable_classlabels = Blockly.JavaScript.nameDB_.getName(block.getFieldValue('classlabels'), Blockly.Names.NameType.VARIABLE);
  var variable_scores = Blockly.JavaScript.nameDB_.getName(block.getFieldValue('scores'), Blockly.Names.NameType.VARIABLE);
  var statements_do = Blockly.JavaScript.statementToCode(block, 'do');
-  var code = `${variable_classlabels} = _recognizer.wordLabels();
-_recognizer.listen(_result => {
+  var number_probabilitythreshold = block.getFieldValue('probabilityThreshold');
+  var code = `_recognizer.listen(_result => {
  ${variable_scores} = _result.scores;
  ${statements_do}
 }, {
-  // includeSpectrogram: true,
-  // invokeCallbackOnNoiseAndUnknown: true,
-  // overlapFactor: 0.50,
-  probabilityThreshold: 0.75
+  probabilityThreshold: ${number_probabilitythreshold}
 });
 `;
  return code;
@ -1155,10 +1164,9 @@ Blockly.Blocks['ugj_canvas_say'] = {
  init: function () {
    this.appendValueInput("say")
      .setCheck(null);
-    this.appendValueInput("sec")
-      .setCheck("Number")
-      .appendField("と");
    this.appendDummyInput()
+      .appendField("と")
+      .appendField(new FieldSlider(2, 0, 30, 1), "sec")
      .appendField("秒言う");
    this.setInputsInline(true);
    this.setPreviousStatement(true, null);
@ -1170,7 +1178,7 @@ Blockly.Blocks['ugj_canvas_say'] = {
 };
 Blockly.JavaScript['ugj_canvas_say'] = function (block) {
  var value_say = Blockly.JavaScript.valueToCode(block, 'say', Blockly.JavaScript.ORDER_ATOMIC);
-  var value_sec = Blockly.JavaScript.valueToCode(block, 'sec', Blockly.JavaScript.ORDER_ATOMIC);
+  var value_sec = block.getFieldValue('sec');
  var code = [
    `_fukidashi(String(${value_say}), ${value_sec});`,
    ''
--- a/index.html
+++ b/index.html
@ -4,10 +4,9 @@
 <head>
  <meta charset="UTF-8" />

-  <!-- <link rel="stylesheet" href="./lib/prettify_desert.css"> -->
-  <link rel="stylesheet" href="./lib/dracula-prism.min.css">
+  <link rel="stylesheet" href="./node_modules/dracula-prism/dist/css/dracula-prism.min.css">
  </link>
-  <link rel="stylesheet" href="./lib/prism_line-numbers.css">
+  <link rel="stylesheet" href="./node_modules/prismjs/plugins/line-numbers/prism-line-numbers.min.css">
  </link>
  <link rel="stylesheet" href="./fonts/css/all.min.css">
  </link>
@ -663,16 +662,28 @@
        </value>
      </block>
      <label text="音声コマンド認識" web-line="4.0" web-line-width="200"></label>
+      <!-- <block type="oc_speechcommands_init">
+        <value name="custom_model">
+          <shadow type="text">
+            <field name="TEXT"></field>
+          </shadow>
+        </value>
+      </block> -->
      <block type="oc_speechcommands_init">
+        <field name="classlabels" id="aV;:;wdjQ;:3+(Bx8Z!$">ラベル</field>
        <value name="custom_model">
          <shadow type="text">
            <field name="TEXT"></field>
          </shadow>
        </value>
      </block>
-      <block type="oc_speechcommand_listen">
+      <!-- <block type="oc_speechcommand_listen">
        <field name="classlabels" id="-aysulrCq~BT0?GQL|V:">ラベル</field>
        <field name="scores" id="#?-HvxDFqQ#vb+swl_k:">スコア</field>
+      </block> -->
+      <block type="oc_speechcommand_listen">
+        <field name="scores" id="|!AWY]V:il;fu;lRwDC*">スコア</field>
+        <field name="probabilityThreshold">0.75</field>
      </block>
      <label text="_" web-line="4.0" web-line-width="200"></label>
    </category>
@ -769,11 +780,7 @@
            <field name="TEXT">コンニチワ！</field>
          </shadow>
        </value>
-        <value name="sec">
-          <shadow type="math_number">
-            <field name="NUM">2</field>
-          </shadow>
-        </value>
+        <field name="sec">2</field>
      </block>
      <block type="ugj_event_answer">
        <value name="question">
@ -1034,13 +1041,16 @@
  <script src="./node_modules/blockly/python_compressed.js"></script>
  <script src="./node_modules/blockly/blocks_compressed.js"></script>
  <script src="./node_modules/blockly/msg/ja.js"></script>
+  <script src="./node_modules/@blockly/field-slider/dist/index.js"></script>
  <script src="./lib/custom-dialog.js"></script>
-  <script src="./blocks.js"></script>
-  <script src="./elutil.js"></script>
+  <script src="./blocks/blocks.js"></script>
+  <script src="./apptools.js"></script>
  <script src="./index.js"></script>
-  <script src="./lib/beautify.min.js"></script>
-  <!-- <script src="./lib/prettify.js"></script> -->
-  <script src="./lib/prism.js"></script>
+  <script src="./node_modules/js-beautify/js/lib/beautify.js"></script>
+  <script src="./node_modules/prismjs/prism.js"></script>
+  <script src="./node_modules/prismjs/plugins/line-numbers/prism-line-numbers.min.js"></script>
+  <script src="./node_modules/prismjs/plugins/toolbar/prism-toolbar.min.js"></script>
+  <script src="./node_modules/prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
 </body>

 </html>
--- a/lib/beautify.min.js
+++ b/lib/beautify.min.js
--- a/lib/dracula-prism.min.css
+++ b/lib/dracula-prism.min.css
--- a/lib/prism.js
+++ b/lib/prism.js
--- a/lib/prism_line-numbers.css
+++ b/lib/prism_line-numbers.css
@ -1,41 +0,0 @@
-pre[class*="language-"].line-numbers {
-    position: relative;
-    padding-left: 3.8em;
-    counter-reset: linenumber;
-}
-
-pre[class*="language-"].line-numbers>code {
-    position: relative;
-    white-space: inherit;
-}
-
-.line-numbers .line-numbers-rows {
-    position: absolute;
-    pointer-events: none;
-    top: 0;
-    font-size: 100%;
-    left: -3.8em;
-    width: 3em;
-    /* works for line-numbers below 1000 lines */
-    letter-spacing: -1px;
-    border-right: 1px solid #999;
-
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-
-}
-
-.line-numbers-rows>span {
-    display: block;
-    counter-increment: linenumber;
-}
-
-.line-numbers-rows>span:before {
-    content: counter(linenumber);
-    color: #999;
-    display: block;
-    padding-right: 0.8em;
-    text-align: right;
-}
--- a/package-lock.json
+++ b/package-lock.json
@ -9,16 +9,20 @@
      "version": "0.1.9",
      "license": "ISC",
      "dependencies": {
+        "@blockly/field-slider": "^4.0.3",
        "@ocoge.club/pigpio": "file:local_modules/pigpio",
        "@tensorflow-models/blazeface": "^0.0.7",
        "@tensorflow-models/knn-classifier": "^1.2.4",
        "@tensorflow-models/mobilenet": "^2.1.0",
        "@tensorflow-models/speech-commands": "^0.5.4",
        "@tensorflow/tfjs-node": "^4.1.0",
-        "axios": "^1.2.1",
+        "axios": "^1.2.2",
        "blockly": "^9.2.0",
+        "dracula-prism": "^2.1.13",
+        "js-beautify": "^1.14.7",
        "node-abi": "^3.30.0",
-        "nodemailer": "^6.8.0"
+        "nodemailer": "^6.8.0",
+        "prismjs": "^1.29.0"
      },
      "devDependencies": {
        "@electron-forge/cli": "^6.0.4",
@ -28,8 +32,8 @@
      }
    },
    "local_modules/pigpio": {
+      "name": "@ocoge.club/pigpio",
      "version": "0.0.1",
-      "hasInstallScript": true,
      "license": "MIT",
      "dependencies": {
        "bindings": "^1.5.0",
@ -41,6 +45,17 @@
      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-1.7.2.tgz",
      "integrity": "sha512-ibPK3iA+vaY1eEjESkQkM0BbCqFOaZMiXRTtdB0u7b4djtY6JnsjvPdUHVMg6xQt3B8fpTTWHI9A+ADjM9frzg=="
    },
+    "node_modules/@blockly/field-slider": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@blockly/field-slider/-/field-slider-4.0.3.tgz",
+      "integrity": "sha512-jbTEp4pHf+WG8eac3czUW+CvE+IKa8poZ97Jd3l+QPfeKuljWt9YYQ6x+7iOBx135kpHAZXUmPbQtRCjZA5oCw==",
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "peerDependencies": {
+        "blockly": "^9.2.0"
+      }
+    },
    "node_modules/@electron-forge/cli": {
      "version": "6.0.4",
      "resolved": "https://registry.npmjs.org/@electron-forge/cli/-/cli-6.0.4.tgz",
@ -1269,9 +1284,9 @@
      }
    },
    "node_modules/axios": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.2.1.tgz",
-      "integrity": "sha512-I88cFiGu9ryt/tfVEi4kX2SITsvDddTajXTOFmt2uK1ZVA8LytjtdeyefdQWEf5PU8w+4SSJDoYnggflB5tW4A==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.2.2.tgz",
+      "integrity": "sha512-bz/J4gS2S3I7mpN/YZfGFTqhXTYzRho8Ay38w2otuuDR322KzFIWm/4W2K6gIwvWaws5n+mnb7D1lN9uD+QH6Q==",
      "dependencies": {
        "follow-redirects": "^1.15.0",
        "form-data": "^4.0.0",
@ -1768,6 +1783,15 @@
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
    },
+    "node_modules/config-chain": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
+      "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==",
+      "dependencies": {
+        "ini": "^1.3.4",
+        "proto-list": "~1.2.1"
+      }
+    },
    "node_modules/console-control-strings": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
@ -2036,6 +2060,52 @@
        "node": ">=12"
      }
    },
+    "node_modules/dracula-prism": {
+      "version": "2.1.13",
+      "resolved": "https://registry.npmjs.org/dracula-prism/-/dracula-prism-2.1.13.tgz",
+      "integrity": "sha512-mgm8Nr/X0RGUz/wpha88dKN/xw0QIGK8BQmWXrzgtOp9be+qcKiFEa2J5SQ3+/WNvL5sPPtNQXPL+Vy//Q8+dg=="
+    },
+    "node_modules/editorconfig": {
+      "version": "0.15.3",
+      "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz",
+      "integrity": "sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==",
+      "dependencies": {
+        "commander": "^2.19.0",
+        "lru-cache": "^4.1.5",
+        "semver": "^5.6.0",
+        "sigmund": "^1.0.1"
+      },
+      "bin": {
+        "editorconfig": "bin/editorconfig"
+      }
+    },
+    "node_modules/editorconfig/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+    },
+    "node_modules/editorconfig/node_modules/lru-cache": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
+      "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
+      "dependencies": {
+        "pseudomap": "^1.0.2",
+        "yallist": "^2.1.2"
+      }
+    },
+    "node_modules/editorconfig/node_modules/semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/editorconfig/node_modules/yallist": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+      "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A=="
+    },
    "node_modules/electron": {
      "version": "22.0.0",
      "resolved": "https://registry.npmjs.org/electron/-/electron-22.0.0.tgz",
@ -3377,8 +3447,7 @@
    "node_modules/ini": {
      "version": "1.3.8",
      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
-      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
-      "dev": true
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
    },
    "node_modules/interpret": {
      "version": "3.1.1",
@ -3546,6 +3615,76 @@
      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
      "dev": true
    },
+    "node_modules/js-beautify": {
+      "version": "1.14.7",
+      "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.14.7.tgz",
+      "integrity": "sha512-5SOX1KXPFKx+5f6ZrPsIPEY7NwKeQz47n3jm2i+XeHx9MoRsfQenlOP13FQhWvg8JRS0+XLO6XYUQ2GX+q+T9A==",
+      "dependencies": {
+        "config-chain": "^1.1.13",
+        "editorconfig": "^0.15.3",
+        "glob": "^8.0.3",
+        "nopt": "^6.0.0"
+      },
+      "bin": {
+        "css-beautify": "js/bin/css-beautify.js",
+        "html-beautify": "js/bin/html-beautify.js",
+        "js-beautify": "js/bin/js-beautify.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/js-beautify/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/js-beautify/node_modules/glob": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-8.0.3.tgz",
+      "integrity": "sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^5.0.1",
+        "once": "^1.3.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/js-beautify/node_modules/minimatch": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.2.tgz",
+      "integrity": "sha512-bNH9mmM9qsJ2X4r2Nat1B//1dJVcn3+iBLa3IgqJ7EbGaDNepL9QSHOxN4ng33s52VMMhhIfgCYDk3C4ZmlDAg==",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/js-beautify/node_modules/nopt": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-6.0.0.tgz",
+      "integrity": "sha512-ZwLpbTgdhuZUnZzjd7nb1ZV+4DoiC6/sfiVKok72ym/4Tlf+DFdlHYmT2JPmcNNWV6Pi3SDf1kT+A4r9RTuT9g==",
+      "dependencies": {
+        "abbrev": "^1.0.0"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+      }
+    },
    "node_modules/jsdom": {
      "version": "20.0.3",
      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-20.0.3.tgz",
@ -4804,6 +4943,14 @@
        "node": ">= 0.8.0"
      }
    },
+    "node_modules/prismjs": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/progress": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
@ -4831,11 +4978,21 @@
        "node": ">=10"
      }
    },
+    "node_modules/proto-list": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
+      "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA=="
+    },
    "node_modules/proxy-from-env": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
    },
+    "node_modules/pseudomap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
+      "integrity": "sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ=="
+    },
    "node_modules/psl": {
      "version": "1.9.0",
      "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@ -5346,6 +5503,11 @@
        "node": ">=8"
      }
    },
+    "node_modules/sigmund": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
+      "integrity": "sha512-fCvEXfh6NWpm+YSuY2bpXb/VIihqWA6hLsgboC+0nl71Q7N7o2eaCW8mJa/NLvQhs6jpd3VZV4UiUQlV6+lc8g=="
+    },
    "node_modules/signal-exit": {
      "version": "3.0.7",
      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
@ -6152,6 +6314,11 @@
    }
  },
  "dependencies": {
+    "@blockly/field-slider": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@blockly/field-slider/-/field-slider-4.0.3.tgz",
+      "integrity": "sha512-jbTEp4pHf+WG8eac3czUW+CvE+IKa8poZ97Jd3l+QPfeKuljWt9YYQ6x+7iOBx135kpHAZXUmPbQtRCjZA5oCw=="
+    },
    "@electron-forge/cli": {
      "version": "6.0.4",
      "resolved": "https://registry.npmjs.org/@electron-forge/cli/-/cli-6.0.4.tgz",
@ -7104,9 +7271,9 @@
      "dev": true
    },
    "axios": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.2.1.tgz",
-      "integrity": "sha512-I88cFiGu9ryt/tfVEi4kX2SITsvDddTajXTOFmt2uK1ZVA8LytjtdeyefdQWEf5PU8w+4SSJDoYnggflB5tW4A==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.2.2.tgz",
+      "integrity": "sha512-bz/J4gS2S3I7mpN/YZfGFTqhXTYzRho8Ay38w2otuuDR322KzFIWm/4W2K6gIwvWaws5n+mnb7D1lN9uD+QH6Q==",
      "requires": {
        "follow-redirects": "^1.15.0",
        "form-data": "^4.0.0",
@ -7479,6 +7646,15 @@
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
    },
+    "config-chain": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
+      "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==",
+      "requires": {
+        "ini": "^1.3.4",
+        "proto-list": "~1.2.1"
+      }
+    },
    "console-control-strings": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
@ -7666,6 +7842,48 @@
        "webidl-conversions": "^7.0.0"
      }
    },
+    "dracula-prism": {
+      "version": "2.1.13",
+      "resolved": "https://registry.npmjs.org/dracula-prism/-/dracula-prism-2.1.13.tgz",
+      "integrity": "sha512-mgm8Nr/X0RGUz/wpha88dKN/xw0QIGK8BQmWXrzgtOp9be+qcKiFEa2J5SQ3+/WNvL5sPPtNQXPL+Vy//Q8+dg=="
+    },
+    "editorconfig": {
+      "version": "0.15.3",
+      "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz",
+      "integrity": "sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==",
+      "requires": {
+        "commander": "^2.19.0",
+        "lru-cache": "^4.1.5",
+        "semver": "^5.6.0",
+        "sigmund": "^1.0.1"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+        },
+        "lru-cache": {
+          "version": "4.1.5",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
+          "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
+          "requires": {
+            "pseudomap": "^1.0.2",
+            "yallist": "^2.1.2"
+          }
+        },
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
+        },
+        "yallist": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+          "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A=="
+        }
+      }
+    },
    "electron": {
      "version": "22.0.0",
      "resolved": "https://registry.npmjs.org/electron/-/electron-22.0.0.tgz",
@ -8696,8 +8914,7 @@
    "ini": {
      "version": "1.3.8",
      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
-      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
-      "dev": true
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
    },
    "interpret": {
      "version": "3.1.1",
@ -8814,6 +9031,55 @@
      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
      "dev": true
    },
+    "js-beautify": {
+      "version": "1.14.7",
+      "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.14.7.tgz",
+      "integrity": "sha512-5SOX1KXPFKx+5f6ZrPsIPEY7NwKeQz47n3jm2i+XeHx9MoRsfQenlOP13FQhWvg8JRS0+XLO6XYUQ2GX+q+T9A==",
+      "requires": {
+        "config-chain": "^1.1.13",
+        "editorconfig": "^0.15.3",
+        "glob": "^8.0.3",
+        "nopt": "^6.0.0"
+      },
+      "dependencies": {
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "glob": {
+          "version": "8.0.3",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-8.0.3.tgz",
+          "integrity": "sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==",
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^5.0.1",
+            "once": "^1.3.0"
+          }
+        },
+        "minimatch": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.2.tgz",
+          "integrity": "sha512-bNH9mmM9qsJ2X4r2Nat1B//1dJVcn3+iBLa3IgqJ7EbGaDNepL9QSHOxN4ng33s52VMMhhIfgCYDk3C4ZmlDAg==",
+          "requires": {
+            "brace-expansion": "^2.0.1"
+          }
+        },
+        "nopt": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/nopt/-/nopt-6.0.0.tgz",
+          "integrity": "sha512-ZwLpbTgdhuZUnZzjd7nb1ZV+4DoiC6/sfiVKok72ym/4Tlf+DFdlHYmT2JPmcNNWV6Pi3SDf1kT+A4r9RTuT9g==",
+          "requires": {
+            "abbrev": "^1.0.0"
+          }
+        }
+      }
+    },
    "jsdom": {
      "version": "20.0.3",
      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-20.0.3.tgz",
@ -9744,6 +10010,11 @@
      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
      "integrity": "sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w=="
    },
+    "prismjs": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q=="
+    },
    "progress": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
@ -9765,11 +10036,21 @@
        "retry": "^0.12.0"
      }
    },
+    "proto-list": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
+      "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA=="
+    },
    "proxy-from-env": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
    },
+    "pseudomap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
+      "integrity": "sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ=="
+    },
    "psl": {
      "version": "1.9.0",
      "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@ -10139,6 +10420,11 @@
      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
      "dev": true
    },
+    "sigmund": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
+      "integrity": "sha512-fCvEXfh6NWpm+YSuY2bpXb/VIihqWA6hLsgboC+0nl71Q7N7o2eaCW8mJa/NLvQhs6jpd3VZV4UiUQlV6+lc8g=="
+    },
    "signal-exit": {
      "version": "3.0.7",
      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
--- a/package.json
+++ b/package.json
@ -28,16 +28,20 @@
    "electron": "^22.0.0"
  },
  "dependencies": {
+    "@blockly/field-slider": "^4.0.3",
    "@ocoge.club/pigpio": "file:local_modules/pigpio",
    "@tensorflow-models/blazeface": "^0.0.7",
    "@tensorflow-models/knn-classifier": "^1.2.4",
    "@tensorflow-models/mobilenet": "^2.1.0",
    "@tensorflow-models/speech-commands": "^0.5.4",
    "@tensorflow/tfjs-node": "^4.1.0",
-    "axios": "^1.2.1",
+    "axios": "^1.2.2",
    "blockly": "^9.2.0",
+    "dracula-prism": "^2.1.13",
+    "js-beautify": "^1.14.7",
    "node-abi": "^3.30.0",
-    "nodemailer": "^6.8.0"
+    "nodemailer": "^6.8.0",
+    "prismjs": "^1.29.0"
  },
  "config": {
    "forge": {