モデルの訓練が終わったら、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%だと言ったので、次はその答え合わせに移ります。