🐰

gradio 使ってみた（１）

2023/07/04に公開

Python

gradio の調査（１）

調査した趣旨

Twitter 終了説の時に流れてきたツイートで、
Streamlit VS gradio

というツイートがありました。

Streamlit は

デザイン、シンプルでイケてる
初学者にも優しい
ほしい機能は一通りある（気がする）
とにかく簡単なのでサクッとアプリ作成できる

など、メリットがあります。
しかし、データのアップロード制限（50 MB）という、
機械学習に向いていそうで大容量データが扱えないというデメリットが大きいと感じました。
画像系の処理はたまに処理が遅く感じることもあります。

そこで、Streamlit に対抗できるか、gradio？！を調べていきます。

gradio 企画、第一弾

まずは使ってみる、をやります。

第二弾は、画像処理系のアプリを作成予定です。
Streamlit との戦いをお披露目したいと思います。

About gradio

公式ページからまとめました。僕なりに日本語バージョン作りました。

躊躇するな、使おう
シェアしよう、簡単だ
Hugging Face Spaces でリンクを共有できるゾ

上記の 3 つを実際に体験します。
お手元に Google Colab のご準備を。

これが本当の Quick Strart

Hello World レシピ（公式サイト Getting Started より）

手順

Google Colab の Notebook を準備
gradio をインストール

!pip install gradio

Python コードをコピペ

# demo
import gradio as gr

def greet(name):
    return "Hello " + name + "!"

demo = gr.Interface(fn=greet, inputs="text", outputs="text")

demo.launch()

セル実行

完成イメージはこちら。
Google Colab で完結したものを体感せよ。

localhost へのアクセスで、より web アプリ感を体感せよ。

手順

躊躇するな、使おうで用意したコードを変更

# 変更点はこれだけ
demo.launch(share=True)

# demo
import gradio as gr

def greet(name):
    return "Hello " + name + "!"

demo = gr.Interface(fn=greet, inputs="text", outputs="text")

# share=True と指定すると 72 時間リンクをシェアできる
demo.launch(share=True)

セル実行

完成イメージはこちら。
Google Colab で完結したものを体感せよ。
先ほどと違うのは、localhost ではなくなったことを体感せよ。

Google Colab のリンクをクリックして、共有せよ。
なお、僕にはこの実験を手伝ってくれるお友達がいないので、多分共有できているはず、という体で進めます。

手順

Hugging Face アカウントを作成

Hugging Face 画面上の　Space ＞ Create New Space をクリック

Space 作成
今回はデモなので、かしこまった設定はなしで進めます。

こんな感じに設定しました。

Hugging Face にコードを push

Google Colab で作成したコードを　.py としてダウンロードして、Hugging Face の手順に沿って
以下のコマンドを実行しました。
重要なスクショ（エビデンス）をキャプチャ撮るのを忘れたので、この手順で再現できるかを試していただけると幸いです。

git init
git add . 
git commit -m "first commit"
git push

初回はユーザー名とパスワードを入力します。

pip install gradio

は、requirements.txt を作成しました。

また以下のコードはビルドエラーが出るため、変更しました。

# 変更前 share=True を削除
demo.launch(share=True)
# 変更後
demo.launch()

使ったコードもこちらに添付します。
このままコピーすれば、デプロイ一発でいけるかと思います。

# -*- coding: utf-8 -*-
"""sample_gradio.ipynb

Automatically generated by Colaboratory.

Original file is located at
    https://colab.research.google.com/drive/12UbmNo8dhYLpIZzAySjm8tcPXlyp8Z0M
"""


# demo
import gradio as gr

def greet(name):
    return "Hello " + name + "!"

demo = gr.Interface(fn=greet, inputs="text", outputs="text")

demo.launch()

Hugging Face のページでデプロイを確認

こちらでみなさま、アプリ使えますでしょうか？
僕の私用 PC と社用 PC で確認したところ、うまく使用できました！

念のため、スクショを添付します。

そして、エラーなく正常に動作したコードはこちらで確認できると思います。

さいごに

がっつり画像処理アプリを作成したかったのですが、平日にできる限界というものがありました。

第一弾は、「まずは使ってみよう」。

第二弾は、「画像処理アプリ」を Streamlit と gradio で作成して比較しようと思います。
その過程で、web スクレイピングなども紹介できればと思います！！

参考

おまけ

gradio のデモページをこちらに添付します。

Streamlit VS gradio は続く。。。