AIアプリのフレームワークとしてのStreamlit / Gradio
StreamlitとGradioは、Python だけでインタラクティブな Web アプリを作れる体験の良さで人気のフレームワークです。
両者は「Python + 軽量コードで Web アプリ」という点で似ていますが、
- Streamlit = カスタマイズ性・複雑な UI/UX に強い
- Gradio = MLモデル公開・長期推論モデルの実行に強い
というフォーカスの違いがはっきりしています。この記事ではAIアプリを構築、社内運用する上でのそれぞれの強みやユースケースの解説をします。
Streamlitのユースケース ― “見せ方” と “運用耐性” を同時に叶える
Streamlitは、インタラクティブなWebアプリが簡単に構築できる手軽さとそのカスタマイズ性に強みがあります。社内で運用する業務用アプリを構築する際にも運用の中で発生する要望に応えるための柔軟性を備えている点で実運用に非常に向いているフレームワークです。
UI のカスタマイズ性
st.line_chart , st.button など標準ウィジェットに加え、streamlit‑extras や st‑chat などコミュニティ製コンポーネントが豊富に用意されています。
さらにCSS やテーマ API でブランドカラーを反映することができるため、レイアウトも自由にカスタマイズが可能です。
import streamlit as st
# Create a button
if st.button('Click me'):
st.write('Button clicked!')
# Customize layout and theme using CSS
st.markdown(
"""
<style>
.stButton>button {
background-color: #4CAF50;
color: white;
}
</style>
""",
unsafe_allow_html=True
)データ＋AI のハイブリッドアプリ
st.dataframe, st.altair_chart に Embedding や LLM 推論結果を重ね、「チャート付きチャットアプリ」 のような複合 UI も自然に実装することができます。Streamlitは、元々データサイエンティストがデータアプリを作るために構築をされているため、豊富な可視化ライブラリに対応しているためデータのプレゼンテーションを非常に得意としています。
更に、Chat アプリ向けストリーム更新 (st.chat_massage) のようにAIアプリのためのリアルタイム応答を実現するコンポーネントも充実してきているため、データとAIを組み合わせたハイブリッドなアプリを構築することが容易です。
import streamlit as st
import pandas as pd
import altair as alt
st.set_page_config(layout="wide")
col1, col2 = st.columns([1, 1])
data = pd.DataFrame({
'Category': ['A', 'B', 'C'],
'Value': [10, 20, 30],
'LLM Inference': ['Result A', 'Result B', 'Result C']
})
with col1:
# Display the data in a dataframe with improved styling
st.dataframe(data, use_container_width=True)
# Create a bar chart using Altair with enhanced styling
chart = alt.Chart(data).mark_bar(color='#4A90E2').encode(
x=alt.X('Category', axis=alt.Axis(labelAngle=0)),
y=alt.Y('Value', title='Value'),
tooltip=['Category', 'Value', 'LLM Inference'],
color=alt.Color('Category', legend=None)
).properties(
height=300
)
st.altair_chart(chart, use_container_width=True)
with col2:
st.title("Query About Data")
if "messages" not in st.session_state:
st.session_state.messages = []
for message in st.session_state.messages:
with st.chat_message(message["role"]):
st.markdown(message["content"])
prompt = st.chat_input("Enter your question")
if prompt:
with st.chat_message("user"):
st.markdown(prompt)
st.session_state.messages.append({"role": "user", "content": prompt})
with st.spinner("Getting response from OpenAI..."):
# call openai api
with st.chat_message("assistant"):
answer = "This is sample data with three categories (A, B, C) and their corresponding values (10, 20, 30)."
st.markdown(answer)
st.session_state.messages.append({"role": "assistant", "content": answer})実運用での信頼性
1:1 のスクリプト実行モデルを採用しているため、グローバル状態の競合を気にせずに実装を行うことができます。これによってコードに副作用が起こることが少なくなります。ユーザーの環境でのスクリプトの実行が閉じていることは、運用時の調査負荷などを軽減します。
一方で、MLモデルの長時間の推論や利用者のスケール時には実行管理を行いにくい弱みがあるため、長時間推論はFastAPI などの別APIで非同期処理を設計し、Streamlit側はポーリングやWebSocketで進捗表示を行う必要があります。
Streamlitが適したユースケース
- 社内ダッシュボード & AI アシスタント
- 複雑なフォーム入力や動的レポーティングを伴う業務ツール
- 企業ブランディングを反映した PoC からそのまま本番展開したいケース
Gradioのユースケース ― AI/MLモデル公開・長時間推論に強い
Gradioは、カスタマイズ性はStreamlitほど高くはありませんがAI/MLモデルを簡単にシェアすることに特化をしたフレームワークです。UIがシンプルな分、構築のためのAPIも非常に直感的で必要最小元のコンポーネントが用意されています。
特に、Streamlitでは公式から用意されていないような、画像生成や音声認識のモデルを実行するためのコンポーネントが用意されている点や、推論実行時の実行管理を簡易化するAPIはGradioの強みとなる機能です。
モデル I/O に特化したコンポーネント
画像・音声・ビデオストリームを1行でUI 化が可能です。gr.Audio, gr.Image など学習済みモデルのデモに最適なコンポーネントが用意されている。機械学習のモデルの実行に最適なコンポーネントを使用することで従来実装が複雑になるようなデモが簡単に構築できます。
以下のような音声を録音して書き起こすようなWebアプリでも数行のコードしか必要ありません。
import gradio as gr
def transcribe_audio(audio):
return "Audio has been recorded. In a real application, speech recognition would be performed here."
demo = gr.Interface(
fn=transcribe_audio,
inputs=gr.Audio(type="filepath"),
outputs="text",
title="Speech Recognition Demo",
description="Record audio with your microphone and convert it to text."
)
if __name__ == "__main__":
demo.launch()また、gr.Flagging によりユーザーフィードバックを自動蓄積するための、継続学習のループを追加実装なく構築が可能です。
自動生成されるFlagボタンを押すことで実行したモデルのInput/Outputを自動的に最適なファイル形式で .gradio/flagged 以下に保存してくれます。このようにMLモデルをデモしたり、チームで試してもらう際に必要な機能群が標準で用意されています。
Queue で“長い推論”をスマートに実行
Gradioアプリは、標準で数千人規模で同時アクセスに対応できるバックエンド非同期キューが組み込まれています。進捗バーを実装するためのコンポーネントも用意されているため、画像生成や音声変換のような数十秒～数分かかるタスクでもUXを損なわないリッチなアプリが構築できます。
以下のサンプルコードはキューを使って同時実行を2個までに制約しています。これによって、GPUが2個しかない環境にデプロイする際にユーザーが複数の実行をした場合にもコンピューティングリソースを制御することができます。
また、 gr.Progress を使うことでモデル実行中に進捗をリアルタイムにユーザーに示すことができます。
import gradio as gr
import time
def image_gen(prompt, progress=gr.Progress()):
progress(0, desc="Starting")
time.sleep(1)
progress(0.5)
time.sleep(1)
progress(1)
return "https://www.gradio.app/_app/immutable/assets/gradio.CHB5adID.svg"
with gr.Blocks() as demo:
prompt = gr.Textbox()
image = gr.Image()
generate_btn_1 = gr.Button("Generate Image via model 1")
generate_btn_2 = gr.Button("Generate Image via model 2")
generate_btn_3 = gr.Button("Generate Image via model 3")
generate_btn_1.click(image_gen, prompt, image, concurrency_limit=2, concurrency_id="gpu_queue")
generate_btn_2.click(image_gen, prompt, image, concurrency_id="gpu_queue")
generate_btn_3.click(image_gen, prompt, image, concurrency_id="gpu_queue")
demo.launch()即配布 & 即API化
Gradioで作成したアプリは、 demo.launch(share=True) と起動時にshareの引数をTrueにするだけでHuggingFaceに公開することができます。クラウドサービスにアクセスすることなく、手元のコードに少し変更をするだけで公開できるため、デモアプリを配布する手軽さはGradioの強力な特徴です。
さらに、Hugging Face Spacesや自社サーバーにホスティングをすることで、curl・Python・JavaScript クライアントから呼び出しを可能にするAPIを自動的に生成します。APIのI/Oは構築したデモアプリと一致しています。
このようにUIのカスタマイズ性は低い一方で、そのシンプルさを生かしてデモを共有するためのあらゆる作業を自動化しています。
一方で、公開された共有リンクは1週間有効なため、情報漏洩のリスクを気にする必要があります。上記の方法はあくまでもGradioの共有サーバーやHuggingFaceの仕組みを活用しているため、独自の認証やアクセスコントロールとの相性は悪いため、機密データを使用したアプリを社内で長期間運用する場合には、複雑なカスタマイズが必要になります。
Streamlitが適したユースケース
- 研究成果・モデルデモの迅速公開
- 画像生成 / 音声認識 / TTS など長期推論モデルのAIアプリ化
結論
StreamlitとGradioは、それぞれが所有するUIコンポーネントに加えて、AIアプリをチームに配布する際のアーキテクチャにも大きな違いがあります。それぞれの強みを理解してユースケースに合わせて選定することは、AIアプリを構築・活用していく際に非常に重要です。
どちらのフレームワークも手元でAI/MLモデルをWebアプリのインターフェースで試せるようにする役割からスタートしましたが、AIをチームで活用するシーンでは配布時の実行モデルを理解して適切に運用することが求められています。
ユースケースごとの使い分け
- Streamlit: 社内向けの複雑な業務用AIアプリの構築
- Gradio: AI/MLモデルの推論を組み込んだインタラクティブなAIデモアプリの構築