背景

Lobe.ai は Computer Vision (画像処理) に特化したモデルの作成が非常に容易に出来る無料のアプリケーションです。現時点では Image Classification のみを扱います。
モデルの作成や実行にクラウドは不要で、ローカルのコンピューターで動きます。勿論、作成したモデルをファイルとして取り出す事もできますので、クラウド上に展開する事も出来ます。
学習時などに GPU も対応していますが、必須ではありません😊

Lobe.ai:
https://www.lobe.ai/
- ベータ版です

どんな種類の Computer Vision のモデルの作成が出来るかは、この example のサイトをご覧ください。

必要なモノ

• Windows 10 or Windows 11。Macも可
  • https://www.lobe.ai/docs/tips/tips
• メールアドレス
  • Lobe の登録に必要
  • 氏名/メールアドレス/国は、Lobeの更新情報を届けるためにのみ使われます。勿論、その購読を停止させる事も出来ます。
  • https://www.lobe.ai/docs/tips/tips
• Azure Subscription
  • お持ちでない場合は、こちらから無料版をどうぞ!
  • https://azure.microsoft.com/ja-jp/free/
• (オプション) Azure Storage Explorer
  • https://azure.microsoft.com/ja-jp/features/storage-explorer/

扱わない事

この記事はPC/macのマウスとキーボード操作の出来る中高生でも扱える事を目指しています。プログラミングを必須としません。

• コーディング
• TypeScript の自動展開のための CI/CDの仕組みの実装

手順

1. lobe.ai のダウンロード と インストール

Lobe の トップ画面の[Download]ボタンから、アプリケーションのダウンロードを行います。
Lobeのインストーラーは 331MB あります。

Lobe自体がベータ版であるという事もあり。その際にユーザー名やメールアドレスなどの登録が必要です。

ダウンロード後、lobe.exe 起動して、インストールを行ってください。

インストールが成功すると、スタートメニューに表示されます。

2. データの準備

今回は、Microsoft Learn で用意されているデータを使います。

2.1. データのダウンロード

GitHub のデータを zip でダウンロードします。

[Code] - [Download Zip] で。

22MB ありますね。

Zip ファイルを右クリックして、展開します。

展開後に以下のフォルダまで移動します。

data - image-classification

training-images.zip ファイルをzip 解凍します。

Apple, Banana, Orange のフォルダーが出来ています。それぞれのフォルダーの中に、画像ファイルが入っています。

test-fruit に入っている画像は、学習用には使いません。作成したモデルのテスト用に使います。

3. Lobe で学習実行

いよいよ Lobe のアプリケーションで画像分類を実行します。

3.1. lobeを起動します

3.2. New Project をクリックして、プロジェクトを作成します

3.3. Project に名前を付けます

画面左上の [Untitled] をクリックして、任意の名前を付けます。例えば「フルーツ判定」とか。

3.4. 画面右上の [import] ボタンで、先ほど展開した画像ファイルを取り込みます

フォルダー毎取り込みますので、Dataset を選択します。

Choose Dataset をクリックします。

先ほど zip 展開した、training-images フォルダーを選択します。

各画像のラベル名をどう設定するかを選べます。ここではフォルダー名をそのまま使いますので Label using Folder Nameを選択して、Import を押します。

即座に画像が取り込まれて、ラベル毎の画像を確認できます。
そして、実はこのインポート処理の際に、学習も自動的に行われます!

私の手元の Surface Laptop 3 では、取り込み時間は1秒にも満たないです。この程度ですと GPU 不要なのが解りますよね😊

4. テスト

ローカルで作成したモデルの品質の確認も出来ます。

Use に移動します。

ここでは Images を選択します。先ほどダウンロードしたファイルの中のテスト画像を使います。
test-fruit の中にあるファイルの一つですね。

最初のファイルをドラッグアンドドロップしたら、画面左下に Apple と判定してくれました!
素晴らしい😊

しかも、画面右側のチェックボックスのアイコンで、テスト用に確認した画像を、データセットに加えることが出来るんですね!
Active Learning もやりやすくなっています。

別テストデータでも試してみてください。

5. Web アプリ の作成と展開

作成したモデルをWebアプリケーションにしてみましょう。今回は Web Server側での処理は全くせず、Webブラウザーの内部で処理を簡潔させます。Single Page Application の方式ですね。

5.1. モデルの Export

Use 画面の上の Export を選択すると、下の画面の様なプロジェクトの種類を選択できます。
先のプロジェクトのテンプレートがある TensorFlow.js を選択します。

出力先のフォルダーを選択する画面が表示されます。任意のフォルダーを作成して、選択します。
エクスポート中の画面です。

数分でエクスポート完了です。
以下の様に相当数のファイルが出来ています。

5.2. Starter プロジェクトの選択

先ほどのモデルを使う Webアプリケーションを作成します。ここでは Web App を選択します。

以下のWebサイトが表示されます。

先ほどと同様 Download Zip で、ファイルをダウンロードします。

Zip ファイルを任意の場所に展開します。

5.3. 動作確認

ローカル環境で動作確認をします。
まだ クラウド は出てきませんね😊

ここに Getting Started のドキュメントがありますので、この通りに実行します。

5.3.1. NodeJS のインストール

もし、自分のPCに NodeJS がインストールされていない場合は、以下よりインストールしてください。
この Starter プロジェクトは、Node の 17.0.1 だと正常に起動しません。14.18.1 LTS を使ってください。

5.3.2. Yarn のインストール

Yarn は NodeJS のプログラムで使用する追加モジュールを管理してくれるパッケージャーの種類のツールです。

その後、Yarn のインストールを行います。

ドキュメントにある通り、コマンドプロンプトから、以下のコマンドを実行します。

npm install -g yarn

メチャクチャ早く終わります😊

5.3.3. Web アプリケーションの起動

先ほどダウンロードした Starter プロジェクトのファイルがあるフォルダーに移動します。

ファイルパスのあるエリアで cmd と入力し、エンターキーを押します。

そのフォルダーでコマンドプロンプトが起動します。

Webアプリケーションをそのまま動かします。この時点では、Lobeで作成したモデルは使いません。
先のドキュメントの通り、yarn を使ってWebアプリケーションが使うモジュールをダウンロードしてきます。以下のコマンドを実行します。

yarn install

私の環境ですと、ファイルのダウンロードに 1分くらいかかりました。

その後、以下のコマンドでローカル実行を行います。

yarn start

ブラザーが起動して、アプリケーションが動きます。
ブラウザーに自分のPCのカメラへのアクセスを許可すると、カメラに移っているもので、組み込み済みのモデルでの画像処理が行われます。画面左下に Thumb Down などと表示されていますので、親指の上げ下げを判定するモデルのようですね。

5.4. 作成したモデルの組み込み

いよいよ自分で作成したモデルを使いましょう。

先ほどの Web アプリケーションの public/model フォルダーに、Lobe からエクスポートしたファイルをコピーします。
既存の model ファイルの名前を変更して、新たにmodelフォルダーを作成します。

ファイルをコピーします。

再度ローカルでWebアプリケーションを起動します。先ほどと同じですね。

アプリケーションの起動に少し時間はかかります。モデルのファイルが多いので。今度は画面左下に Apple などと表示されていますね!
起動すると、画面左上のアイコンからローカルの画像を使ってのテストが出来ます。

無事、Apple の判定が出来ました😊

6. Static Web アプリへの展開

Starter の Web アプリケーションは React で、かつ TypeScript で書かれています。Build をする事で JavaScriptに展開されます。
まずは、ローカルのPCで行います。

6.1. Build

以下のコマンドで build を行います。

npm run build

これで、新たに build フォルダーが出来ます。そのフォルダーの中に、htmlとJavaScriptのファイルが出来ています。

参考:
https://create-react-app.dev/docs/deployment#static-server

6. Web Server へのアップロード

ここで便利な Cloud のサービスを使います。Azure Storage Account を使います。
OneDriveやGoogleDrive などはそのままですと静的なWebサイトのホスティングとしては使えませんのでご注意ください。私も勘違いしていました😅

以下のドキュメントを参考にして、Azure の Portal にログインをしてストレージアカウントを作成してください。

ストレージ アカウントを作成する:
https://docs.microsoft.com/ja-jp/azure/storage/common/storage-account-create?toc=%2Fazure%2Fstorage%2Fblobs%2Ftoc.json&tabs=azure-portal

その後、こちらの手順に従って、静的なWebサイトの機能を有効化します。

Azure Storage での静的 Web サイト ホスティング:
https://docs.microsoft.com/ja-jp/azure/storage/blobs/storage-blob-static-website

こんな感じ。

後は、ファイルをアップロードするだけです。
ここでは、Azure Storage Explorer を使います。

7. Web サイトへのアクセス

Azure Storage Account の プライマリ エンドポイント にブラウザーからアクセスします。
ファイルサイズがそこそこ大きいので、アクセスしてから表示が完全に終わるまで、若干時間がかかります。30秒程度ですかね。時々画面右上の歯車マークなどを触って刺激を与えると良いかもしれません。

私の環境は、このURLです。
暫く残しておきますね。ある日突然、私の都合で、アクセスできなくなります😊

https://dahatakestorage.z11.web.core.windows.net/

動きました!

8. CDNの有効化 (オプション)

この手順はやらなくても大丈夫です。

Azure Storage Account も相当数のアクセス処理を捌いてくれますが、ほぼ追加料金なしでそのアクセス数を爆増させ、かつ、全世界規模でのCache を有効化できるのが CDN です。
ですので、ほぼ無条件で有効化する事を強くおススメします。

Azure CDN に移動します。
ここで 新しいエンドポイント を新規作成します。

私は以下の様にセットしてみました。

[作成] ボタンを押して CDN の作成を行います。数分待ちます。

完了すると、以下の画面の様に作成された CDN が確認できます。

CDN経由でのURLを簡単に取得します。
そのために、エンドポイント に表示されている作成したCDNをクリックし、以下のCDNの画面に移動します。
画面右上の エンドポイントのホスト名 の文字列をコピーします。それをブラウザーのURL蘭に貼り付けます。

CDN作成後に、使えるようになるまで、10分程度かかります! これは、利用しているサービス毎に異なります。

Azure CDN Standard from Microsoft プロファイルの場合、通常、反映は 10 分以内で完了します。

CDN エンドポイントをテストする:
https://docs.microsoft.com/ja-jp/azure/cdn/cdn-add-to-web-app#test-the-cdn-endpoint

CDN経由は、このURLですね。

https://dahatake-lobe.azureedge.net/

以下の様にCDN経由でも使えるようになりました。

まとめ

慣れてしまえば、ものの10分で学習から展開までの作業が出来ます。
LobeのStarter プロジェクトには、スマートフォン向けのものなどがあったり、扱いませんでしたが 特定のDeep Learning のフレームワークに依存しない ONNX モデルの作成も出来ます。

楽しんでチャレンジしてみてください!