はじめに
Claudeとの会話を通して作ったアプリについて、その会話の内容をまとめてもらって記事にしました。これでざっくりデプロイまで持っていけるはず。改良は、またClaudeと会話しながら各ファイルを修正して、再度プッシュすればOK。
この記事では、Python + Streamlitを使用して画像処理アプリを作成し、公開するまでの手順を解説します。具体例として、植生(植物)を解析するアプリケーションを使用します。
1. 環境構築
1.1 必要なツール
必要なツール一覧:
- Python 3.10以上
- Git
- Visual Studio Code(推奨)
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
- Streamlit Cloudでデプロイ:
- https://share.streamlit.io にアクセス
- GitHubアカウントでログイン
- "New app"をクリック
- リポジトリとブランチを選択
- デプロイボタンをクリック
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
トラブルシューティング
もし初めてのプッシュの場合:
git remote add origin https://github.com/ユーザー名/リポジトリ名.git
もしコンフリクトが発生した場合:
- プルして最新の変更を取得:
git pull origin main
- コンフリクトを解決し、再度コミットとプッシュを行う:
git add . git commit -m "Resolve merge conflicts" git push origin main
認証に関する注意
コマンドライン以外の方法
GitHubデスクトップアプリケーションを使用する場合:
- 変更したファイルを選択
- コミットメッセージを入力
- "Push origin" ボタンをクリック