HuggingFace Space上でGradioでRAGのフロント画面をサクッと作る
背景
Databricks上でLLMやRAGのエンドポイントをサービングしているが、それを叩くチャット画面のようなアプリをサクッと作って試したいことってありますよね。
そういったML用途でのGUIを簡単に作成できるフレームワークとしてStreamlitやGradioが有名ですが、問題はそれをホストする環境です。ローカルPCだと他の人がアクセスできないし、わざわざAWS EC2を立ち上げるのも面倒だし、、、そんな悩みを解決してくれるのがHuggingFaceのSpaceというサービスです。
HuggingFace Spaceとは
Streamlit、Gradioなどで実装されたアプリを動かすためのホスティング環境です。
例えば、Spaceのお作法に則って、Gradioを使ってコードを書き、それをSpaceにCommit&Pushすると、それをGUIをWebアプリとしてホストしてくれます。CPUベースの軽めの環境なら無償で、GPUを使用したハイスペック環境なら有償でと、用途に応じてコンピュートリソースを選択できます。LLM用のチャットアプリ（しかもデモ用）なら、無償環境でも十分だと思います。
基本的にはPublicに誰でもアクセスできるのですが、Private機能もあり、特定のユーザーだけにアクセスを許可することも可能です。
手順
STEP１. HuggingFaceのユーザー登録
こちらからどうぞ。
STEP2. Spaceを新規作成
ログイン後、ホーム画面より「Spaces」をクリック。
Spaces画面にて、「Create New Space」をクリック。
必要項目を入力。例えばこんな感じで。なお、今回は、GradioでUIを実装するので、SDKの選択で、Gradioを選択します。入力後に「Create Space」ボタンをクリック。
Spaceが作成されました。
STEP3. app.pyの実装
app.pyはローカルPCで実装したから、GitでCommitしてSpaceにアップロードすることもできますが、それもめんどくさい場合は、ブラウザ上で直接作成することができます。
画面中段の「Create」リンクをクリック。
すると、エディターが開きます。
Gradioベースのコードを書きます。今回は、Databricksの公式サンプルをベースに、ラベルを日本語に書き換えました。「Commit New File to main」をクリックします。
STEP4. 環境変数などの設定
今回のコードでは、Databricks上のモデルサービングエンドポイントを叩くのですが、エンドポイントのアドレスと接続用の認証トークンを環境変数としてセットしており、下記のようにプログラムから取得しています。
local_token = os.getenv('API_TOKEN')
local_endpoint = os.getenv('API_ENDPOINT')
この二つの環境変数は「Setting」から設定可能です。
VariablesとSecretsがあります。
GradioをSDKとして使用する場合、どちらも上記のos.getenv()でアクセスできますが、よりセンシティブな情報はSecretsとして登録しておくのが良さそうです。詳細はこちら。
今回はこんな感じで設定しました。
STEP5. GUIのテスト
あとは「App」をクリックすると、下記のような画面が表示されます。
おまけ：Webページ埋め込み用のURLの取得方法
どこかのWebサイトに本チャット画面を埋め込みたい（iFrameみたいな感じで）場合は、以下のようにすると埋め込み用のURLを取得できます。
メニューから、「Embed This Space」をクリック。
色々な埋め込み用のURLやHTMLサンプルが表されます。
参考
Discussion