5_1_4 推論 その1

モデルの訓練が終わったら、Promiseのthen()メソッドに渡される無名関数で、<ul>要素のクリックに関するイベントリスナーを設定します。

 console.log('モデルの訓練完了');

 // <ul>要素がクリックされたら、
 document.getElementById('data-select').addEventListener('click', (e) => {
             tf.tidy(() => {
                         // e.targetはクリックされた<a>要素
                         // クリックされた<a>要素のカスタムデータ属性を調べ、値を得る
                         const lengthVal = Number.parseInt((e.target.dataset["value1"]), 10); // がく片の長さ
                         const widthVal = Number(e.target.dataset["value2"]); // がく片の幅
                         // tf.TensorFlowオブジェクトに変換する
                         const data = tf.tensor2d([lengthVal, widthVal], [1, 2]);
                         // 訓練済みモデルで推論し、結果を得る
                         const predictOut = model.predict(data);
                         // 結果は確率の配列
                         predictOut.print(); // 例:[[0.1198563, 0.8801436],] -> versicolorの確率が高いと予測している

実際にクリックされる<a>要素は<ul>要素の子要素なので、<a>要素のクリックイベントは、<ul>要素でキャッチできます。どの<a>要素がクリックされたかは、リスナー関数に渡されるイベントオブジェクトのtargetプロパティで特定できます。

また5個ある<a>要素では、data-*属性を使ってカスタム属性を設定しているので、e.target.dataset[“value1”]や
e.target.dataset[“value2”]という方法で、推論に使用するがく片の長さと幅の値にアクセスできます。

<ul id="data-select">
  <li><a href="javascript:void(0)" data-value1="5.4" data-value2="3.0" data-value3="1">[5.4, 3.0] versicolor</a></li>
  <li><a href="javascript:void(0)" data-value1="4.8" data-value2="3.0" data-value3="0">[4.8, 3.0] satosa</a></li>
  <li><a href="javascript:void(0)" data-value1="5.1" data-value2="2.5" data-value3="1">[5.1, 2.5] versicolor</a></li>
  <li><a href="javascript:void(0)" data-value1="5.5" data-value2="4.2" data-value3="0">[5.5, 4.2] satosa</a></li>
  <li><a href="javascript:void(0)" data-value1="6.2" data-value2="3.4" data-value3="2">[6.2, 3.4] virginica</a></li>
</ul>

がく片の長さと幅の値が分かったら、それをtf.Tensorオブジェクトに変換し、モデルのpredict()メソッドに渡して推測させます。predict()から返されるtf.Tensorオブジェクト(predictOut)は、2つの数値を持っています。これは実は、確率に見なせる数値です。

// 結果は確率の配列
predictOut.print(); // 例:[[0.1198563, 0.8801436],] -> versicolorの確率が高いと予測している

たとえば、上から3つめの<a href=”javascript:void(0)” data-value1=”5.1″ data-value2=”2.5″ data-value3=”1″>[5.1, 2.5] versicolor</a>要素をクリックし、predictOut.print()が[[0.1198563, 0.8801436],]を出力した場合で言うと、

[5.1, 2.5]がsatosaである確率は0.1198563で、versicolorである確率は0.8801436だと、モデルは推測したのです。この2つの数値を足すと0.9999999になります。

predictOutがなぜそうである確率(蓋然性)と見なせるのかを理解するには、モデルの構築に指定した中身を理解する必要があり、しかも大学程度の数学の知識が必要になります。

モデルは、上から3つめのボタンのクリックで、[5.1, 2.5]がversicolorである確率は88%だと言ったので、次はその答え合わせに移ります。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA