無料 の Computer Vision アプリ Lobe.ai を使って、画像認識 の Web アプリの作成。まずはここから。

# 背景

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

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

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

https://www.lobe.ai/examples

# 必要なモノ

- 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 あります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/364df4f3-7a7f-cf2a-eebc-98b1d3207382.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/10934c8c-0cb3-5f0b-c974-d02c27dcc9a4.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/df44bcc4-9555-6d37-fe83-4259f26873de.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/22269814-f1d5-6ce4-2c70-dc1dc10e1a20.png)

## 2. データの準備

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

こちらのサイトにアクセスして、zip圧縮されたデータのダウンロードをします。

https://aka.ms/animal-images

Source:
https://microsoftlearning.github.io/AI-900-AIFundamentals/instructions/03a-classify-images.html

約 6MB あります。

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/4a97c3a8-aed5-bbdf-dd7d-4f15a8615817.png)

フォルダー名に日本語名が入っていると正常に動作しません。`C:\Work\`の様に作業用のフォルダを英語のみで作成して、そこにフォルダーごとファイルをコピーします。

**lion**, **giraffe**, **elephant** のフォルダーが出来ています。それぞれのフォルダーの中に、画像ファイルが入っています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/c8ab9897-3448-0028-e100-6197d23ff578.png)


## 3. Lobe で学習実行

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

- lobeを起動します
- `New Project` をクリックして、プロジェクトを作成します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/3612cf01-80b2-b587-8398-7ebd4e72a574.png)

- Project に名前を付けます

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/ddea93fd-e266-c5b5-8096-1c53bbeacfb0.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/c3da0448-ade6-7ba3-9912-a40fe504c131.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/b61ac42d-f761-c25c-2e3f-e92109e18c61.png)

`Choose Dataset` をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/2677003b-bdb4-2a16-848d-571ccb64d784.png)

ダウンロードした、`animals` フォルダーを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/ba325d8c-66b7-8590-f2eb-81c8dda53dd6.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/9deb59d4-1389-c064-9c56-575f5f57e0f4.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/ce5c7a3b-7501-6a2c-6fa4-cbed7033f7b9.png)

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

もし、学習が始まらない場合は以下を試してみてください。
- アプリケーションの再起動
- プロジェクトの再作成
- PCもしくはMacの再起動

## 4. テスト

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

`Use` に移動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/b7978554-869d-89b5-0f99-80a73eebb9a1.png)

| 項目 | 内容 |
| --- | --- |
| Images | ローカルにある画像ファイルを使う |
| Camera | PC についているカメラを使う  |
| Export | 作成したモデルをファイルとして出力する |

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/4b3a9a2e-9b99-13c5-e68f-a1578264eb36.png)

ここでは `Images` を選択します。

以下のサイトにアクセスして、画像ファイルをダウンロードします。
https://aka.ms/giraffe


ダウンロードしたファイルを画面にドラッグアンドドロップします。

画面左下に `Apple` と判定してくれました!
素晴らしい😊

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/3d378a64-952e-2a68-77e5-93932ae80ad1.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/d941bed8-ba84-a33b-82ee-9728078c1216.png)

別の画像ファイルでも試してみてください。

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

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

### 5.1. モデルの Export

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/971106f9-5584-4a9a-a5f7-32228be364dd.png)


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/8e27cd2a-7e5f-9071-0109-6a4430aed34b.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/b629c557-44ff-510d-13d6-7b270505ccb9.png)

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

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


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/490bb267-4c85-7d09-b616-bb7a25300b6a.png)

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

https://github.com/lobe/web-bootstrap

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/5854f19c-6555-5f4d-eb02-c0efc9cbced4.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/4eeac33e-8ae4-f87c-2711-cd15d42f1e95.png)


### 5.3. 動作確認

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

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

https://github.com/lobe/web-bootstrap#get-started

#### 5.3.1. NodeJS のインストール

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

https://nodejs.org/en/

#### 5.3.2. Yarn のインストール

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

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

https://yarnpkg.com/getting-started/install

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

```cmd
npm install -g yarn
```

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/2d88784d-6443-fe0a-47ba-d4ec33ab47af.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/46566a1a-658b-82a0-29e6-affcb575f26b.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/82876fb8-a801-e9a7-11fd-bd4702beb020.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/8ed1cdf1-3c60-3150-7b59-24d1855dad70.png)

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


```cmd
yarn install
```

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/0cc747e9-0176-7eb6-34a6-934d333c0681.png)

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

```cmd
yarn start
```

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/f3deae69-1567-7d7d-8848-0fc82e44d426.png)

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/8060f8bd-3be2-de5e-ca91-cf6ee4751198.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/311f49bc-40f4-f0b3-511a-dd0469dabc24.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/06ed3201-ab60-cb37-adc3-23b7fcc5298b.png)

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

## 6. Static Web アプリへの展開

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

### 6.1. Build

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

```cmd
npm run build
```

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/1586a4f7-4019-cce7-ccd1-0a8e0524a23c.png)

参考:
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

こんな感じ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/3bb51ede-5a66-ac9e-a6f4-9448a05c4ff0.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/000a32d8-3611-7a7a-b56b-a998a32f469d.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/e3092301-c478-26b0-ca40-de64fa8be474.png)

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

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

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

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/a93d12b7-69cd-6e5e-232b-ce8be4309dbb.png)

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

| 項目 | 内容 |
| -- | -- |
| CDNのプロファイル | Azure の内部で識別する名前 |
| 価格レベル | **標準 Microsoft** で。これで追加料金無し |
| CDN エンドポイント | これがブラウザーからアクセスする URL になります |
| 配信元のホスト名 | この Azure Storage Account の 静的Webサイト を選択します。|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/9d4255f0-ba77-6ef3-cd3b-fb371b69c596.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/fcf7da2f-b9d1-330d-1902-c409a27ff6b5.png)

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


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/b09af219-ae2b-596e-a155-a51968bb1a89.png)

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ですね。

```cmd
https://dahatake-lobe.azureedge.net/
```
# まとめ

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

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