🚀

Hugging Face Spacesで、自分のAIアプリを無償で公開する

2024/05/07に公開

TensorFlow

Streamlit

Hugging Face

tech

目的

最近、簡単なAIアプリを構築することを自分でやったり、人に教えたりする機会が増えています。

せっかくなら構築したものを公開できるところまでいきたいと考えているのですが、数年前にHerokuが無償で使えなくなり、その代替として有名なPythonAnywhereやRenderなども検討したのですが、AIアプリ用としては次の点で上手くいきませんでした

PythonAnywhereは、そもそもTensorflowがインストールできない
Renderは、tensorflow-cpuがインストールはできるけど、無償だとメモリー不足になってしまう
といった感じでした。（無償で対応できる方法知っている方いたら、ぜひ教えてください。）

何か使えるサービスがないかと探していたのですが、HuggingFaceのSpacesというサービスが、Streamlit + AIを簡単に使えそうという情報をゲットしましたので、そちらを試してみました。（本来は、Djangoを使いたかったので、若干悔いは残りますが）

準備

HuggingFaceのSpacesというサービスを使います。
https://huggingface.co/spaces

HuggingFaceのアカウントが必要なので、まずは会員登録しましょう。

会員登録後に、自身のユーザーアイコンからSettingsを選び、「Access Tokens」のメニューから、「New token」のボタンを押下して、トークンを作成しましょう。

ローカル開発環境

Windows環境にて、Visual Studio Codeを使って開発しています。

Dockerを使ってもいいのですが、そんなに複雑な環境が必要なわけではないので、virtualenvを使っています。

python -m venv myenv

Set-ExecutionPolicy RemoteSigned -Scope Process

.\myenv\Scripts\activate

1点、Windows特有なのかわかりませんが、ファイルのPathに日本語が入っているとTensorflowのモデルをロードするところでエラーになるという事象があります。

色々と試みたのですが、解消する手段がわからず、日本語が入らない場所でやりましょう。

手順

HuggingFaceSpacesでの操作

Spacesにアクセスし、「Create new Space」をクリックします。
https://huggingface.co/spaces
Space nameに好きな名前を入れます。（こちらが今後repo_nameになります）
Select the Space SDKで「Streamlit」を選んで、Create Spaceを押下します。

ローカル開発環境にClone

HuggingFaceSpacesのGitHubからCloneします。

user_nameとtokenおよび、repo_nameに各自の値を入れてください。

git clone https://<user_name>:<token>@huggingface.co/spaces/<user_name>/<repo_name>

ちなみに、上記で「Create new Space」した後にでてくるWelcome画面の手順でやると、Push時のパスワード入力でエラーになるので、上記のCloneの仕方をしましょう。

ここで作成されたrepo_nameフォルダに移動し、requirements.txtを次の通り作成します。

streamlit==1.34.0
tensorflow==2.12.0
Pillow==9.5.0

その後、pip install -r requirements.txtをしましょう。

プログラム作成

1.事前にMNISTで学習したモデルを作成しておきます。

MNISTを今更学習するのは面倒ください、という方は次のColabファイルからmodel.h5をダウンロードしておいてください。

ご自身で作られた方も、model.h5という名称で、repo_nameフォルダ直下に保存しておいてください。

2.このモデルを呼び出すStreamlitファイルを作成します。

コードは非常にシンプルなので、コメント以上に特筆すべき点もないのですが、streamlitのfile_uploaderやimageといった機能を使った上で、読み込んだ画像をTensorflowのモデルで予測しているという流れです。

app.py

import os

import streamlit as st
from PIL import Image

from tensorflow.keras.models import load_model
from tensorflow.keras.preprocessing.image import load_img
from tensorflow.keras.preprocessing.image import img_to_array

def main():

    st.title("AI MNIST")
    file = st.file_uploader('画像をアップロードしてください.', type=['jpg', 'jpeg', 'png'])

    if file:
        st.markdown(f'{file.name} をアップロードしました.')

        img_path = os.path.join(file.name)
        # 画像を保存する
        with open(img_path, 'wb') as f:
            f.write(file.read())
            
        # 保存した画像を表示
        img = Image.open(img_path)
        st.image(img)

        # 画像をArray形式に変換
        img = load_img(img_path, target_size=(28, 28), color_mode = 'grayscale')
        img_array = img_to_array(img)
        img_array = img_array.reshape((1, 28, 28))
        img_array = img_array/255        

        # 保存したモデルを呼び出し
        model_path = os.path.join('model.h5')
        model = load_model(model_path)
        result = model.predict(img_array)

        prediction = result.argmax()

        st.text_area("これは:", prediction, height=20)

if __name__ == '__main__':
    main()

3.ここまで作成していると、次のようなフォルダ構成になっていると思います。

今更ですが、Streamlitは、1つのPythonファイルだけで動くのがすごいですよね。

Djangoのように、ファイルを分けているものと比べると、差が際立ちます。もちろん、どちらがいい悪いではないですが。

ローカルで試行

さて、ここまで来たら次のコマンドでStreamlitを起動しましょう。

streamlit run app.py

まずは画像アップロード前の画面。

そこに、画像をアップロードすると、次のように結果を示してくれます。

HuggingFaceSpacesにPush

ローカルで試行して正しく動いたら、あとは、GitコマンドでPushしましょう。

git add .
git commit -m "First Commit"
git push

Pushを実行して、https://huggingface.co/spaces/<user_name>/<repo_name>に移動すると、環境が構築されていきます。

「Application Startup」が表示され、少し待つと、Streamlitが起動します。