PythonとStreamlitで画像処理アプリを公開した覚書 - 植生解析アプリ

作ったアプリ
GitHub Repository

はじめに

Claudeとの会話を通して作ったアプリについて、その会話の内容をまとめてもらって記事にしました。これでざっくりデプロイまで持っていけるはず。改良は、またClaudeと会話しながら各ファイルを修正して、再度プッシュすればOK。

この記事では、Python + Streamlitを使用して画像処理アプリを作成し、公開するまでの手順を解説します。具体例として、植生(植物)を解析するアプリケーションを使用します。

1. 環境構築

1.1 必要なツール

必要なツール一覧:

1.2 プロジェクトの初期化

プロジェクトの作成と環境設定を行います:

# プロジェクトディレクトリの作成
mkdir vegetation-analysis
cd vegetation-analysis

# 仮想環境の作成
python -m venv venv

# 仮想環境の有効化
# Windows:
venv\Scripts\activate
# Mac/Linux:
source venv/bin/activate

# 必要なパッケージのインストール
pip install streamlit numpy opencv-python-headless pandas Pillow

1.3 プロジェクト構造

VScodeで、作ったフォルダにファイルを作っていけばよい 基本的なプロジェクト構造は以下のようになります:

vegetation-analysis/
│
├── app.py                 # メインアプリケーション
├── requirements.txt       # 依存関係
├── .streamlit/           
│   └── config.toml       # Streamlit設定
├── README.md             # プロジェクト説明
└── .gitignore           # Git除外設定

2. アプリケーションの作成

2.1 基本構造

app.pyの基本構造を作成します:

import streamlit as st
import numpy as np
import cv2
import pandas as pd

def main():
    st.title("アプリケーション名")
    
    # ファイルアップロード
    uploaded_file = st.file_uploader("画像をアップロード")
    
    if uploaded_file:
        # 画像処理
        process_image(uploaded_file)

if __name__ == "__main__":
    main()

2.2 設定ファイル

.streamlit/config.tomlに以下の設定を追加します:

[theme]
primaryColor="#4CAF50"
backgroundColor="#FFFFFF"
secondaryBackgroundColor="#F0F2F6"
textColor="#262730"

[server]
enableCORS=false
enableXsrfProtection=true

[browser]
gatherUsageStats=false

[deprecation]
showfileUploaderEncoding=false

requirements.txtに必要なライブラリを記述:

streamlit==1.31.0
numpy==1.26.3
opencv-python-headless==4.9.0.80
pandas==2.2.0
Pillow==10.2.0

.gitignoreでGitで追跡しないファイルやディレクトリを指定:

__pycache__/
*.py[cod]
*$py.class
*.so
.Python
venv/
ENV/

# IDE
.idea/
.vscode/
*.swp
*.swo

# OS
.DS_Store
Thumbs.db

# App specific
uploads/
*.log
.env

3. パフォーマンスの最適化

例えば、以下のような内容をapp.pyに追加しても良い。

3.1 メモリ使用量の最適化

メモリ使用量を最適化するためのポイント:

  • 画像のリサイズ
  • 不要なメモリの解放
  • 効率的なデータ型の使用

画像リサイズの実装例:

def resize_if_needed(image: np.ndarray, max_size: int = 1024) -> np.ndarray:
    h, w = image.shape[:2]
    if max(h, w) > max_size:
        scale = max_size / max(h, w)
        new_size = (int(w * scale), int(h * scale))
        return cv2.resize(image, new_size, interpolation=cv2.INTER_AREA)
    return image

3.2 キャッシュの活用

Streamlitのキャッシュ機能を使用して処理を最適化:

@st.cache_data
def process_image(image):
    # 画像処理のコード
    return result

4. デプロイ方法

Streamlit Cloudでのデプロイ

1. GitHubにコードをプッシュします:

git init
git add .
git commit -m "Initial commit"
git remote add origin <your-repository-url>
git push -u origin main
  1. Streamlit Cloudでデプロイ:
    1. https://share.streamlit.io にアクセス
    2. GitHubアカウントでログイン
    3. "New app"をクリック
    4. リポジトリとブランチを選択
    5. デプロイボタンをクリック

5. トラブルシューティング

よくある問題と解決方法:

メモリエラーの対処

  • 画像サイズの制限を設定
  • バッチ処理を小さく分割
  • 適切なメモリ解放の実装

処理速度の改善

  • キャッシュ機能の活用
  • 処理の並列化を検討
  • 画像サイズの最適化

デプロイ時の問題解決

  • requirements.txtの内容確認
  • ログの詳細確認
  • 環境変数の適切な設定

まとめ

Streamlitを使用することで、Pythonの画像処理アプリケーションを簡単にWeb化し、公開することができます。最適化とデプロイの手順を適切に行うことで、安定したアプリケーションを提供することが可能です。

GitHubへの変更の反映手順

1. 現在の変更を確認

まず、どのファイルが変更されたかを確認します:

git status

2. 変更をステージング

変更したファイルをステージングエリアに追加します:

# 特定のファイルを追加する場合
git add app.py

# または、すべての変更を追加する場合
git add .

3. コミットの作成

変更内容をコミットします:

git commit -m "Add multilingual support and help section
- Add language selection (English, Spanish, Japanese)
- Add help section with usage instructions
- Improve UI text management with translations dictionary"

4. リモートの変更を取得(推奨)

プッシュする前に、リモートの変更を取得することをお勧めします:

git pull origin main

5. 変更をプッシュ

変更をGitHubにプッシュします:

git push origin main

トラブルシューティング

もし初めてのプッシュの場合:

  1. GitHubリポジトリとローカルリポジトリを関連付ける:
git remote add origin https://github.com/ユーザー名/リポジトリ名.git

もしコンフリクトが発生した場合:

  1. プルして最新の変更を取得:
git pull origin main
  1. コンフリクトを解決し、再度コミットとプッシュを行う:
git add .
git commit -m "Resolve merge conflicts"
git push origin main

認証に関する注意

  • GitHubでは、パスワードの代わりにPersonal Access Token(PAT)を使用する必要があります
  • まだ設定していない場合は、GitHubの設定から新しいトークンを生成してください

コマンドライン以外の方法

GitHubデスクトップアプリケーションを使用する場合:

  1. 変更したファイルを選択
  2. コミットメッセージを入力
  3. "Push origin" ボタンをクリック

参考リンク

Streamlit公式ドキュメント