【事前学習】前回までの内容を再確認しておきましょう。

CNNによる画像分類
CNN Classification

Google CodeLabにある「CNNを使用した手書き数字認識」のチュートリアルを実践してみましょう。

Live Serverで実行する方法

VS Codeでは拡張機能を入れると、自分のPCのローカルファイルのウェブコンテンツを実行することができます。

1. VS Code の拡張機能「Live Server」を追加する。
2. index.html, data.js, script.js を同一フォルダに入れて、そのフォルダを VS Code で開く。
3. VS Code のフッター部分の右のほうに表示されている「Go Live」をクリックするとウェブコンテンツが実行される。

ニューラルネットの学習結果

入力データ

モデル概要

学習状況

Accuracy（正答率）

Confusion Matrix

※ 結果が表示されるまでしばらくお待ちください。

ローカルでの実行方法（旧方法）

1. 「2. Get set up」のページ内にあるコードをindex.htmlとして保存します。
2. チュートリアルではdata.jsを別ファイルとしてscriptタグでインポートしていますが、ここではローカルで実行できる様に、index.html内に直接埋め込みます。
1. 「3. Load the data」のページ内にある data.jsのリンクをクリックして開き、その全コードを表示させます。
2. index.html内の「<script src="data.js" type="module"></script>」の部分を消去して、その代わりに1)の全コードを<script></script>タグの間に挟んで貼り付けます。
3. 「import * as tf from '@tensorflow/tfjs';」の行を消去します。（既にインポートされているかつJavascriptモジュールではないので）
4. 「export class MnistData {」の「export」を消去します。（Javascriptモジュールではないので）
5. 長くなったコードを見やすくするために、VSCode上で「class MnistData {」の行の左端の∨の記号をクリックしこのクラスのコード部分を閉じます。
3. 同様に「3. Load the data」のページ内にある、チュートリアルでは script.jsとして保存するコードを、index.html内の「<script src="script.js" type="module"></script>」の部分を消去して、data.jsのコードに続くように貼り付けます。その際一行目の「import {MnistData} from './data.js';」を消去します。
4. この時点で実行して、Input Data Examples である手書き数字の画像が表示されることを確認します。
5. 「5. Define the model architecture」のページ内にあるCNNのモデルを構築する関数getModel()の全コードを、index.html内の「async function showExamples(data)」の後に貼り付けます。
6. 「6. Train the Model」のページ内にある「async function train(model, data)」の全コードを、index.html内の「function getModel()」の後に貼り付けます。
7. run()内の最後にもチュートリアルの指示通りコードを貼り付けます。
8. この時点で実行して、学習過程等の情報が表示されることを確認します。
9. 「7. Evaluate Our Model」のページ内にある「const classNames」から始まる全コードを、index.html内の「async function train(model, data)」の後に貼り付けます。
10. run()内の最後にもチュートリアルの指示通り２行のawait関数のコードを貼り付けます。
11. この時点で実行して、正答率の情報などが追加表示されることを確認します。

【事後学習】本日学んだ内容を再確認しておきましょう。

This site is powered by