猿でもわかるAIプログラミングシリーズ 🐵💻 StreamlitでAIのWebアプリを秒速作成


## StreamlitでAIのWebアプリを秒速作成する方法【実践＆コード付き】


## 🧩 1. はじめに：AIアプリを「秒で公開」したくないですか？

AIモデルを作ったけど、社内やクライアントにデモを見せたいとき、こんな課題はありませんか？

* Webアプリ化するには、フロントエンドの知識が必要
* FlaskやFastAPIだと地味に手間がかかる
* UIを作るのに時間を取られて、肝心のモデル改善が進まない

そんなあなたにおすすめなのが **Streamlit**。
Pythonだけで、**ノーHTML・ノーJS**で、数行コードを書くだけでインタラクティブなAIアプリを作れます。

本記事では、Streamlitの基本から、実際にAIモデルを組み込んだWebアプリの実装まで、実践的なノウハウを交えて解説します。

---

## 🔍 2. Streamlitとは？：データサイエンティストのためのWebフレームワーク

**Streamlit** は、Pythonスクリプトを書くだけで、**即座にWebアプリケーションを作れる**オープンソースのフレームワークです。

主な特徴：

* UIコンポーネント（ボタン、スライダー、画像表示など）を1行で記述可能
* データサイエンスや機械学習との親和性が高く、PandasやMatplotlibとの統合もスムーズ
* ローカルで即時プレビュー、`streamlit run app.py`で即起動

> 🛠️ 背景技術としては、内部的にFlask + Reactベースで動作しており、Pythonコードを書くだけでUIとバックエンドの両方を完結できます。

---

## ⚙️ 3. ハンズオン：画像分類AIアプリを作ってみよう！

今回は、事前学習済みの画像分類モデル（MobileNet）を使って、画像をアップロードするとカテゴリを判定するAI WebアプリをStreamlitで作ってみましょう。

### 📦 必要なライブラリ

```bash
pip install streamlit tensorflow pillow
```

### 📁 プロジェクト構成

```
streamlit_ai_app/
├── app.py
└── sample.jpg
```

### 🧠 コード全体（`app.py`）

```python
import streamlit as st
import tensorflow as tf
from tensorflow.keras.applications.mobilenet import preprocess_input, decode_predictions, MobileNet
from PIL import Image
import numpy as np

st.title("🧠 AIで画像分類してみよう！")
st.write("画像をアップロードすると、AIが何の画像か予測します。")

uploaded_file = st.file_uploader("画像をアップロード", type=["jpg", "png", "jpeg"])

if uploaded_file:
    image = Image.open(uploaded_file).convert('RGB')
    st.image(image, caption="アップロードされた画像", use_column_width=True)

    img = image.resize((224, 224))
    img_array = np.expand_dims(np.array(img), axis=0)
    img_array = preprocess_input(img_array)

    model = MobileNet(weights='imagenet')
    preds = model.predict(img_array)
    results = decode_predictions(preds, top=3)[0]

    st.subheader("🔍 予測結果")
    for i, (imagenet_id, label, prob) in enumerate(results):
        st.write(f"{i+1}. {label} ({prob:.2%})")
```

### ✅ 動作確認

```bash
streamlit run app.py
```

ブラウザが自動で開き、画像アップロードUIが表示されます。予測結果もリアルタイムで確認可能！

---

## 🧠 4. 実務でのコツ & よくあるハマりポイント

### 🧩 よくあるミスと回避策

| 問題                 | 原因                                     | 解決策                        |
| ------------------ | -------------------------------------- | -------------------------- |
| 画像をアップロードしても表示されない | `.convert('RGB')`しないとPILがうまく扱えない       | `.convert('RGB')`を必ず使う     |
| 毎回モデル読み込みが遅い       | `model = MobileNet(...)` を if 文内に書いている | モデルはアプリ起動時に一度だけ読み込むべし      |
| モデルの再読み込みで重くなる     | キャッシュ機構を使ってない                          | `@st.cache_resource` を使うと◎ |

### 💡 ワンポイントアドバイス

* **UIのリファクタ**: `st.sidebar` を活用すると、メインコンテンツがスッキリします。
* **業務応用例**:

  * 社内で文書をアップロード → AIで要約生成
  * 顧客レビューのテキスト → 感情分析結果をグラフ表示
  * 営業日報を入力 → AIがKPI達成確率を可視化

---

## 🚀 5. 応用例：複数モデル・複数タブ対応

Streamlitには `st.tabs` や `st.session_state` など、よりリッチなUIを作る機能もあります。

### ✨ UIをタブ分けする例：

```python
tab1, tab2 = st.tabs(["画像分類", "テキスト分類"])

with tab1:
    st.write("ここに画像分類ロジックを入れる")

with tab2:
    st.write("ここにテキスト分類モデルを入れる")
```

### 🧪 モデルを切り替える機能も追加可能：

```python
model_option = st.selectbox("使用するモデルを選択", ["MobileNet", "ResNet50"])
```

こうした工夫で、**PoCから業務実装まで拡張性の高いアプリ**が構築できます。

---

## 🧾 6. まとめ：StreamlitはAI開発者の秘密兵器

### ✅ メリット

* Pythonだけで完結、学習コストが低い
* データ可視化やAIモデルとシームレスに連携
* UIもサーバーも一体型で爆速開発が可能

### ❗ デメリット

* 高度なUIには限界あり（ReactやVueほどの自由度はない）
* 同時アクセスが多いとサーバー負荷が課題（社内向けツール向き）

### 🔭 今後の展望

* `streamlit-webrtc` で音声認識アプリも作れる
* `streamlit-docker` で簡単に本番環境へデプロイ

---

## 🧑‍💻 おわりに：まずは手を動かしてみよう！

Streamlitは、**機械学習エンジニアが最小の手間で価値を届ける**ための最高のツールの1つです。

PoC、社内ツール、クライアント向けのプレゼンなど、用途は無限大。
まずはこの記事を参考に、あなたのAIモデルをアプリ化してみませんか？


---

📌 Qiitaでのいいね・フォローお待ちしています！質問もお気軽にコメント欄へ！

---

（執筆者：フルスタックAIエンジニア / クラウドアーキテクト）