| # 🏗️ システムアーキテクチャ | |
| ## 🎯 システム概要 | |
| **FastAPI Django Main Live**は、**AI協働開発**により構築された自動成長型Webアプリケーションです。 | |
| ### 🌟 核心コンセプト | |
| - **動的機能拡張**: AIの指示だけで新機能を自動追加 | |
| - **命名規則による自動統合**: 特定の名前を使うだけで機能統合 | |
| - **プラグイン式アーキテクチャ**: 既存機能に影響せずに機能追加 | |
| - **ゼロ設定ファイル**: 複雑な設定なしで即座に動作 | |
| ## 🏢 アーキテクチャ全体像 | |
| ``` | |
| ┌─────────────────────────────────────────────────────────┐ | |
| │ 🌐 Web ブラウザ │ | |
| └─────────────────────┬───────────────────────────────────┘ | |
| │ HTTP/WebSocket | |
| ┌─────────────────────┴───────────────────────────────────┐ | |
| │ 🚀 FastAPI Core │ | |
| │ ┌─────────────────┬─────────────────┬─────────────────┐ │ | |
| │ │ 📊 Gradio │ 🔄 Django │ 🤖 AI Core │ │ | |
| │ │ WebUI │ Backend │ OpenAI/Groq │ │ | |
| │ └─────────────────┴─────────────────┴─────────────────┘ │ | |
| └─────────────────────┬───────────────────────────────────┘ | |
| │ | |
| ┌─────────────────────┴───────────────────────────────────┐ | |
| │ 🔄 動的ルーターインポートシステム │ | |
| │ ┌─────────────────────────────────────────────────────┐ │ | |
| │ │ controllers/ スキャナー (mysite/routers/gradio.py) │ │ | |
| │ │ • gradio_interface 自動検出 │ │ | |
| │ │ • router 自動検出 │ │ | |
| │ │ • 新機能の即座統合 │ │ | |
| │ └─────────────────────────────────────────────────────┘ │ | |
| └─────────────────────┬───────────────────────────────────┘ | |
| │ | |
| ┌─────────────────────┴───────────────────────────────────┐ | |
| │ 📦 機能モジュール群 │ | |
| │ ┌─────────────────┬─────────────────┬─────────────────┐ │ | |
| │ │ 🏠 ContBK │ 🐙 GitHub │ 🖼️ RPA │ │ | |
| │ │ ダッシュボード │ Issue 作成 │ 画像取得 │ │ | |
| │ └─────────────────┼─────────────────┼─────────────────┤ │ | |
| │ │ 💬 AI Chat │ 📊 Database │ 🔧 Debug │ │ | |
| │ │ OpenInterpreter│ 操作 │ VS Code連携 │ │ | |
| │ └─────────────────┴─────────────────┴─────────────────┘ │ | |
| └─────────────────────┬───────────────────────────────────┘ | |
| │ | |
| ┌─────────────────────┴───────────────────────────────────┐ | |
| │ 💾 データ層 │ | |
| │ ┌─────────────────┬─────────────────┬─────────────────┐ │ | |
| │ │ 📝 SQLite │ 📂 ファイル │ 🌐 外部API │ │ | |
| │ │ 各種DB │ システム │ GitHub/Groq │ │ | |
| │ └─────────────────┴─────────────────┴─────────────────┘ │ | |
| └─────────────────────────────────────────────────────────┘ | |
| ``` | |
| ## 🔄 動的インポートシステム（核心技術） | |
| ### 📍 自動検出の仕組み | |
| #### 1. ディレクトリスキャン | |
| ```python | |
| # mysite/routers/gradio.py | |
| def include_gradio_interfaces(): | |
| package_dir = "controllers" # スキャン対象 | |
| # controllers/ 配下をすべて探索 | |
| for root, dirs, files in os.walk(package_dir): | |
| for file in files: | |
| if file.endswith('.py'): | |
| # Python モジュール自動インポート | |
| module = importlib.import_module(module_path) | |
| # gradio_interface オブジェクト検出 | |
| if hasattr(module, 'gradio_interface'): | |
| # 自動でWebUIに統合 | |
| interfaces[tab_name] = module.gradio_interface | |
| ``` | |
| #### 2. 命名規則による自動統合 | |
| ```python | |
| # ✅ 自動検出される例 | |
| gradio_interface = gr.Interface(...) # 必須の名前 | |
| router = APIRouter() # 必須の名前 | |
| # ❌ 検出されない例 | |
| interface = gr.Interface(...) # 名前が違う | |
| my_router = APIRouter() # 名前が違う | |
| ``` | |
| #### 3. 即座の機能統合 | |
| - サーバー再起動不要 | |
| - 新しいタブが自動表示 | |
| - 既存機能への影響なし | |
| ## 🛠️ 技術スタック詳細 | |
| ### 🎨 フロントエンド層 | |
| ``` | |
| 🌐 Gradio WebUI | |
| ├── 📊 Blocks Layout Engine | |
| ├── 🎯 Component System (Textbox, Button, etc.) | |
| ├── 📱 Responsive Design | |
| └── ⚡ Real-time Updates | |
| ``` | |
| ### ⚙️ バックエンド層 | |
| ``` | |
| 🚀 FastAPI Framework | |
| ├── 🔄 Django Integration | |
| ├── 📡 RESTful API | |
| ├── 🔌 WebSocket Support | |
| └── 🛡️ Middleware Stack | |
| ``` | |
| ### 🤖 AI統合層 | |
| ``` | |
| 🧠 AI Engine | |
| ├── 🤖 OpenInterpreter (Code Execution) | |
| ├── ⚡ Groq API (LLM Inference) | |
| ├── 🧩 GitHub Copilot (Code Generation) | |
| └── 💬 Natural Language Processing | |
| ``` | |
| ### 🔧 自動化層 | |
| ``` | |
| 🤖 RPA System | |
| ├── 🎭 Playwright (Browser Automation) | |
| ├── 📸 Screenshot Capture | |
| ├── 🖼️ Image Collection | |
| └── 📊 Execution History | |
| ``` | |
| ### 💾 データ層 | |
| ``` | |
| 📊 Database Layer | |
| ├── 💬 chat_history.db (チャット履歴) | |
| ├── 🤖 rpa_history.db (RPA実行記録) | |
| ├── 📝 conversation_history.db (会話記録) | |
| └── 📋 prompts.db (プロンプト管理) | |
| ``` | |
| ## 📁 ディレクトリ構造と責務 | |
| ### 🎯 核心ディレクトリ | |
| ``` | |
| fastapi_django_main_live/ | |
| ├── app.py # 🚀 メインアプリケーション | |
| ├── mysite/ # 🔄 Django統合・ルーティング | |
| │ └── routers/gradio.py # ⭐ 動的インポートエンジン | |
| ├── controllers/ # 📦 機能モジュール群 | |
| │ ├── gra_01_chat/ # 💬 基本チャット | |
| │ ├── gra_02_openInterpreter/ # 🤖 AI統合 | |
| │ ├── contbk_unified_dashboard.py # 🏠 統合ダッシュボード | |
| │ ├── conversation_logger.py # 📝 会話記録 | |
| │ └── github_issue_creator.py # 🐙 Issue作成 | |
| └── contbk/ # 🔧 高度な機能群 | |
| └── gra_12_rpa/ # 🖼️ RPA・画像取得 | |
| ``` | |
| ### 📋 機能別ディレクトリ | |
| ``` | |
| controllers/gra_XX_功能名/ # Gradio UI機能 | |
| ├── __init__.py # パッケージ初期化 | |
| ├── main.py # メイン実装 | |
| └── gradio_interface # ⭐ 必須オブジェクト | |
| routers/api_XX_功能名.py # FastAPI エンドポイント | |
| └── router # ⭐ 必須オブジェクト | |
| ``` | |
| ## 🔌 プラグイン式機能追加システム | |
| ### 🎯 新機能追加フロー | |
| #### 1. AI指示による要求 | |
| ``` | |
| ユーザー: 「天気予報機能を追加して」 | |
| ``` | |
| #### 2. AI による自動実装 | |
| ```python | |
| # controllers/gra_13_weather/weather.py を自動生成 | |
| import gradio as gr | |
| import requests | |
| def get_weather(city): | |
| # 天気API呼び出し | |
| return f"{city}の天気: 晴れ" | |
| # この名前でないと自動統合されない | |
| gradio_interface = gr.Interface( | |
| fn=get_weather, | |
| inputs=gr.Textbox(label="都市名"), | |
| outputs=gr.Textbox(label="天気"), | |
| title="🌤️ 天気予報" | |
| ) | |
| ``` | |
| #### 3. 自動統合・即座利用 | |
| - `controllers/` にファイル配置 | |
| - 動的スキャナーが自動検出 | |
| - WebUIタブに即座表示 | |
| - ユーザーがすぐに利用可能 | |
| ### 🔄 自動統合の流れ | |
| ```mermaid | |
| graph TD | |
| A[AI指示受信] --> B[コード自動生成] | |
| B --> C[controllers/配下に配置] | |
| C --> D[動的スキャナーが検出] | |
| D --> E[gradio_interface 確認] | |
| E --> F[WebUIタブ自動追加] | |
| F --> G[即座に利用可能] | |
| ``` | |
| ## 🔐 セキュリティアーキテクチャ | |
| ### 🛡️ 多層防御システム | |
| ``` | |
| 🔐 Security Layers | |
| ├── 🌐 Web Layer (HTTPS, CORS) | |
| ├── 🔑 Auth Layer (Environment Variables) | |
| ├── 🛡️ App Layer (Input Validation) | |
| ├── 💾 Data Layer (SQLite Encryption) | |
| └── 🔧 Debug Layer (Dev-only Access) | |
| ``` | |
| ### 🔑 認証・認可 | |
| - **環境変数**: 機密情報の安全管理 | |
| - **パスワード認証**: OpenInterpreter 保護 | |
| - **GitHub CLI**: 自動認証 | |
| - **デバッグ環境**: 開発時のみアクセス | |
| ## 📊 パフォーマンス設計 | |
| ### ⚡ 高速化技術 | |
| - **非同期処理**: `async/await` による並行処理 | |
| - **動的ロード**: 必要な機能のみ読み込み | |
| - **キャッシュ**: 重複処理の削減 | |
| - **軽量DB**: SQLite による高速データアクセス | |
| ### 📈 スケーラビリティ | |
| - **モジュラー設計**: 機能の独立性 | |
| - **プラグイン式**: 無制限の機能拡張 | |
| - **自動統合**: 設定ファイル不要 | |
| - **メモリ効率**: リソース使用量最適化 | |
| ## 🔄 データフロー | |
| ### 📊 主要なデータの流れ | |
| #### 1. ユーザー入力 → AI処理 | |
| ``` | |
| ブラウザ → FastAPI → OpenInterpreter → AI処理 → レスポンス | |
| ``` | |
| #### 2. 機能追加フロー | |
| ``` | |
| AI指示 → コード生成 → ファイル配置 → 自動検出 → UI統合 | |
| ``` | |
| #### 3. データ永続化 | |
| ``` | |
| ユーザー操作 → アプリ処理 → SQLite保存 → 履歴管理 | |
| ``` | |
| ## 🚀 拡張性設計 | |
| ### 🔮 将来の拡張可能性 | |
| #### 技術拡張 | |
| - **PostgreSQL**: より高性能なデータベース | |
| - **Redis**: キャッシュ・セッション管理 | |
| - **Docker**: コンテナ化 | |
| - **Kubernetes**: オーケストレーション | |
| #### 機能拡張 | |
| - **多言語対応**: 国際化 | |
| - **モバイルアプリ**: React Native連携 | |
| - **クラウド統合**: AWS/Azure連携 | |
| - **エンタープライズ**: 大規模運用対応 | |
| ### 💡 設計原則 | |
| #### 1. **Keep It Simple** | |
| - 複雑さよりもわかりやすさ | |
| - 設定ファイルよりも命名規則 | |
| - ドキュメントよりも直感的操作 | |
| #### 2. **Convention over Configuration** | |
| - 決まった場所に決まった名前で配置 | |
| - 自動検出による設定レス | |
| - 一貫性のある命名規則 | |
| #### 3. **AI-First Design** | |
| - AIによる自動生成を前提 | |
| - 自然言語での操作 | |
| - 人間とAIの協働最適化 | |
| --- | |
| **アーキテクト**: GitHub Copilot AI + miyataken999 | |
| **設計思想**: AI協働による自動成長システム | |
| **最終更新**: 2025年06月11日 | |
| > 🏗️ **このアーキテクチャは、AIと人間が協働して設計した革新的なシステムです。技術的な完璧さだけでなく、使いやすさと拡張性を両立しています。** | |