Gradioを使ってWatson Studio上で画像認識の仕組みを10分で作る手順

# ここで作るもの
IBM Cloudから、画像認識を行う「Visual Recognition」が無くなってから、もうすぐ１年が経ちます。廃止後、GoogleのTeachable Machineなど様々な手段で画像認識の仕組みを作ってきました。
最近、機械学習アプリを手軽に作れる「Gradio」が人気ですので、IBM CloudのWatson Studioの「Jupyterノートブック」を使い、画像認識の仕組みを、10分くらいで立ち上げてみましょう。

<画面ショット>
猫の写真をアップロードし、「送信」ボタンをクリックすることで、画像認識結果が右側に表示されます。
![スクリーンショット 2022-10-11 14.02.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/d06bdc2a-47f1-9250-9ae6-e9570d9df97c.png)

猫の写真は、「ぱくたそ」のものを使いました。https://www.pakutaso.com/photo/81501.html

## 元ネタ
Python上で機械学習アプリをサクッと作れる「Gradio」の以下のチュートリアルにあるサンプルコードそのままでは、Watson Studio上のノートブックではエラーになるため、アレンジしています。なお、画像認識モデルは、Hugging Face Hub のモデルを使っています。

Image Classification with Vision Transformers
https://gradio.app/image_classification_with_vision_transformers/

Gradioに限らず、公開されているサンプルコードがお使いの環境でそのまま動かないことがあるため、必要に応じてアレンジを加えることが必要です。

# 環境用意
IBM Cloudのアカウント作成を行い、Watson Studio環境の用意しましょう。
## IBM Cloudの用意
https://www.ibm.com/jp-ja/cloud/free にアクセスし、アカウント作成を行います。クレジットカードもしくはデビットカードが必要です。デビットカードは、色々試した結果、Visaデビット推奨です。ゆうちょ銀行など身近なところで作れます。

## Watson Studioの起動
Watson Studioのライトプランの環境を作ります。
1. IBM Cloudの[カタログ](https://cloud.ibm.com/catalog)にアクセスします。
1. 画面左側の「カテゴリ」の「AI/機械学習」をクリックします。
1. 「Watson Studio」　をクリックします。
1. 「ライトプラン」をクリックします。ライトプランは、1人のユーザーに対して、毎月、最小スペックで20時間分のデータ分析やアプリ実行環境を利用することができます。
1. 「以下のご使用条件を読み、同意します」にチェックを入れます。
1. 「作成」をクリックします。

## Watson Studioへのアクセス
1. [リソースリスト](https://cloud.ibm.com/resources)の「AI/機械学習」に、作成したWatson Studio環境が表示されますので、クリックします。
1. 「Launch in IBM Cloud Pak for Data」をクリックします。
1. 「Build and manage ML models」と表示された場合は、「X」もしくは「Cancel(キャンセル)」をクリックします。
1. 「プロジェクト」を新規作成します。
1. 「空のプロジェクトを作成」をクリックします。
1. 「新規プロジェクト」画面で、「プロジェクト名」の入力、ストレージの指定を行い、「作成」をクリックします。

## 「資産」の新規作成による、ノートブックの作成
プロジェクト画面で、「資産」タブに移動し、「新規資産」をクリックします。
![スクリーンショット 2022-10-11 13.44.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/abd41a5d-e5c3-943b-4386-914f1d360d3b.png)
「コード・エディター」 >> 「Jupyter ノートブック・エディター」をクリックします。
![スクリーンショット 2022-10-11 13.44.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/7d1669e1-582f-88c1-14cf-2f68d104be45.png)
「新規 Notebook」画面で、下図のように「ブランク」を選び、「名前」を入力します。「ランタイムの選択」では、4GB RAMの仮想マシンを選ぶことで、無料枠を最大時間で利用することができます。(月20時間)
![スクリーンショット 2022-10-11 13.45.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/f802d953-ed91-f77b-bc2a-d43a937e3184.png)

# Notebook上で、画像認識の仕組みを作る
Jupyte Notebook環境では、コードを書く場所を「セル」と言います。Jupyter Notebookの基本操作については、東京大学の[Pythonプログラミング入門](https://utokyo-ipp.github.io/appendix/1-jupyter-notebook.html)等の教材をご覧になると良いかと思います。

下図のように、Notebookにコードを記述します。
![スクリーンショット 2022-10-11 15.04.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/a5213c61-57ec-4730-9fe7-965a76b35018.png)

1つ目のセル
```
!pip install --upgrade gradio
```
2つ目のセル
```
import gradio as gr

demo = gr.Interface.load("huggingface/google/vit-base-patch16-224")
demo.launch(share=True)
```
セルにコードを書いた後、上から順に「▶︎Run」ボタンをクリックし、実行します。
実行することで、「Running on public URL」に、gradio.appを表示されたURLが表示されるのでクリックしましょう。このURLは、「Sharing demos」と言い、72時間有効な共有URLで、xxxxx.gradio.app となっていますが、プロキシになっており、今回の場合はGradioを実行している、「IBM Cloud」の「Watson Studio」で処理が実行されます。

画像をアップロードし、「送信」をクリックすることで、読み込んだモデル「huggingface/google/vit-base-patch16-224」による画像認識結果が画面右側に表示されます。

![スクリーンショット 2022-10-11 15.18.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/ff924277-6f05-873b-1057-74408fa765ca.png)

## Gradioの「Sharing demos」に簡単な認証機能を追加する
いわば、ベーシック認証のようなものを追加することができます。

2つ目のセルを次のように改造します。share=Trueの後に、auth=("ユーザー名","パスワード") として追加しています。
```
import gradio as gr

demo = gr.Interface.load("huggingface/google/vit-base-patch16-224")
demo.launch(share=True, auth=("my", "password"))
```
表示された、「Running on public URL」のURLをクリックします。

ログイン画面が表示されます。
![スクリーンショット 2022-10-11 15.24.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/15db66b0-6e8a-f0cd-55c7-442879034257.png)
ここでは、USERNAMEにはmy、PASSWORDにはpassword と入力し、「送信」をクリックすることで、アプリの画面が表示されます。
![スクリーンショット 2022-10-11 15.18.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/ff924277-6f05-873b-1057-74408fa765ca.png)

# まとめ
Gradioを使うことで、Watson StudioでもWebアプリをささっと手軽に作ることができ、動作確認やデモンストレーションができることを確認しました。Watson Studioでモデルを開発し、GradioでWebアプリとして動作確認やデモンストレーションを行うと良いでしょう。

最終的には、サービスとして常時稼働させる場合は、IBM Cloud Virtual Server for VPC等で仮想サーバーを用意し、その上で開発したモデルとGradioでWebアプリとして動かす方が良いです。

# ランタイムの停止
Watson Studioでは、一度動かしたまま放置するとランタイム(仮想環境)が動き続けるため、用が無くなり次第、ランタイムを停止する必要があります。そうしないとあっという間に、無料枠を使い切ってしまいます。

プロジェクト画面の「管理」タブで、下図のように「環境」をクリックし、稼働中のランタイムを選び、「ランタイムの停止」をクリックします。ランタイムを停止すれば、無料枠を放置して使い切ることを防ぐことができますし、課金した場合でも、不要な課金を防ぐことができます。
![スクリーンショット 2022-10-11 15.41.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/302f5d1f-f244-cb9a-e13c-486a7d4019c8.png)