🚀 Auto-deploy from GitHub Actions

.devcontainer/devcontainer.json

@@ -42,5 +42,5 @@
       }
     }
   },
-  "remoteUser": "vscode"
+  "remoteUser": "root"
 }

.env.example

@@ -7,6 +7,12 @@ postgre_user=your_postgres_username
 postgre_pass=your_postgres_password
 postgre_host=your_postgres_host
 postgre_url=postgresql://user:pass@host/db?sslmode=require
+DATABASE_URL=sqlite:///./app.db
+DB_HOST=localhost
+DB_PORT=5432
+DB_NAME=your_database_name
+DB_USER=your_username
+DB_PASSWORD=your_password
 
 # API Keys
 api_key=your_groq_api_key
@@ -66,6 +72,8 @@ TOOL_KIT_DIR=usage
 # Google Cloud Service Account Credentials
 # Store as separate JSON file and reference path here
 GOOGLE_APPLICATION_CREDENTIALS=path/to/your/service-account-key.json
+# Alternative: Store JSON content directly in environment variable
+GOOGLE_APPLICATION_CREDENTIALS_CONTENT=your_service_account_json_content
 
 # HuggingFace Configuration
 HF_DATASETS_TRUST_REMOTE_CODE=0
@@ -76,4 +84,22 @@ CPU_CORES=2
 MEMORY=16Gi
 PERSISTANT_STORAGE_ENABLED=false
 TQDM_POSITION=-1
-TQDM_MININTERVAL=1
+TQDM_MININTERVAL=1
+
+# Django Settings
+DJANGO_SECRET_KEY=change-this-to-a-random-secret-key
+DJANGO_DEBUG=True
+DJANGO_ALLOWED_HOSTS=localhost,127.0.0.1
+
+# FastAPI Settings
+FASTAPI_HOST=0.0.0.0
+FASTAPI_PORT=8000
+FASTAPI_DEBUG=True
+
+# Security
+JWT_SECRET_KEY=change-this-to-a-random-jwt-secret
+JWT_ALGORITHM=HS256
+JWT_ACCESS_TOKEN_EXPIRE_MINUTES=30
+
+# External APIs
+API_KEY=your-api-key-here

FOLDER_STRUCTURE.md

@@ -0,0 +1,386 @@
+# 📁 プロジェクト構成ガイド
+
+このドキュメントでは、`fastapi_django_main_live` プロジェクトのフォルダ構成について詳しく説明します。
+
+## 🏗️ 概要
+
+このプロジェクトは、FastAPI、Django、Gradio、そして各種AI/ML ツールを統合したマルチフレームワーク開発環境です。
+
+```
+fastapi_django_main_live/
+├── 🌐 Webアプリケーション層
+├── 🤖 AI/ML統合層  
+├── 💾 データベース層
+├── 🔧 開発・運用ツール層
+└── 📚 ドキュメント・リソース層
+```
+
+---
+
+## 📂 ルートディレクトリ構成
+
+### 🚀 **メインアプリケーションファイル**
+
+| ファイル | 説明 | 用途 |
+|---------|------|------|
+| `app.py` | メインアプリケーションエントリーポイント | FastAPI/Django統合起動 |
+| `manage.py` | Django管理コマンド | Django標準管理ツール |
+| `app_debug_server.py` | デバッグ用サーバー | 開発時のデバッグサーバー |
+
+### ⚙️ **設定・構成ファイル**
+
+| ファイル | 説明 | 用途 |
+|---------|------|------|
+| `Makefile` | プロジェクト管理コマンド | 開発・運用の自動化 |
+| `docker-compose.yml` | Docker構成 | コンテナ化環境 |
+| `Dockerfile` | Dockerイメージ定義 | アプリケーションコンテナ |
+| `pyproject.toml` | Python依存関係管理 | Poetry設定 |
+| `requirements.txt` | pip依存関係 | パッケージ管理 |
+| `pytest.ini` | テスト設定 | pytest構成 |
+
+### 🔐 **環境・認証ファイル**
+
+| ファイル | 説明 | 用途 |
+|---------|------|------|
+| `.env` | 環境変数設定 | API キー、DB接続情報等 |
+| `.env.example` | 環境変数テンプレート | 設定例 |
+| `fix_secrets.sh` | シークレット修正スクリプト | セキュリティ設定 |
+
+### 💾 **データベースファイル**
+
+| ファイル | 説明 | 用途 |
+|---------|------|------|
+| `prompts.db` | プロンプト管理用SQLite | プロンプト履歴・テンプレート |
+| `chat_history.db` | チャット履歴用SQLite | 会話履歴保存 |
+| `users.db` | ユーザー情報用SQLite | ユーザー管理 |
+
+---
+
+## 🏢 **メインアプリケーション構造**
+
+### 🌐 `mysite/` - Django メインサイト
+Djangoプロジェクトのコア部分
+
+```
+mysite/
+├── settings.py      # Django設定
+├── urls.py          # URLルーティング
+├── asgi.py          # ASGI設定
+├── wsgi.py          # WSGI設定
+├── libs/            # 共通ライブラリ
+├── routers/         # FastAPIルーター
+├── config/          # 設定管理
+├── database/        # データベース操作
+└── interpreter/     # インタープリター機能
+```
+
+### 🎮 `controllers/` - Gradio コントローラー
+各種Gradioインターフェースの実装
+
+```
+controllers/
+├── gra_01_chat/              # チャット機能
+├── gra_02_openInterpreter/   # OpenInterpreter統合
+├── gra_03_programfromdoc/    # ドキュメントからプログラム生成
+├── gra_04_database/          # データベース操作UI
+├── gra_05_files/             # ファイル操作
+├── gra_07_html/              # HTML生成
+├── gra_08_hasula/            # Hasula機能
+├── gra_09_weather/           # 天気情報
+├── gra_10_frontend/          # フロントエンド生成
+└── gra_11_multimodal/        # マルチモーダル機能
+```
+
+### 📱 `apps/` - Django アプリケーション
+業務固有のDjangoアプリケーション
+
+```
+apps/
+├── buyback/              # 買取システム
+├── clothing_project/     # 衣類プロジェクト
+├── diamond_project/      # ダイヤモンドプロジェクト
+├── gold_price_project/   # 金価格プロジェクト
+├── metal_assessment/     # 金属査定
+├── mainapi/              # メインAPI
+└── mydjangoapp/          # 汎用Djangoアプリ
+```
+
+---
+
+## 🤖 **AI/ML 統合層**
+
+### 🧠 `AutoPrompt/` - プロンプト最適化
+自動プロンプト生成・最適化システム
+
+```
+AutoPrompt/
+├── optimization_pipeline.py  # 最適化パイプライン
+├── run_pipeline.py           # 実行スクリプト
+├── config/                   # 設定ファイル
+├── prompts/                  # プロンプトテンプレート
+├── estimator/                # 推定器
+└── eval/                     # 評価システム
+```
+
+### 🦙 `LLaMA-Factory/` - LLM ファインチューニング
+LLaMAモデルのファインチューニング環境
+
+```
+LLaMA-Factory/
+├── src/                      # ソースコード
+├── data/                     # 学習データ
+├── examples/                 # 使用例
+├── evaluation/               # 評価スクリプト
+└── scripts/                  # ��行スクリプト
+```
+
+### 👶 `babyagi/` - 自律AIエージェント
+BabyAGI実装とカスタマイズ
+
+```
+babyagi/
+├── babyagi.py               # メインエージェント
+├── classic/                 # クラシック版
+├── babycoder/               # コーディング特化
+├── extensions/              # 拡張機能
+└── tools/                   # ツール群
+```
+
+### 🔍 `open-interpreter/` - オープンインタープリター
+コード実行・解釈システム
+
+```
+open-interpreter/
+├── interpreter/             # インタープリターコア
+├── docs/                   # ドキュメント
+└── examples/               # 使用例
+```
+
+### 🏗️ `gpt-engineer/` - AI コード生成
+GPTベースのコード生成システム
+
+```
+gpt-engineer/
+├── gpt_engineer/           # コア機能
+├── projects/               # 生成プロジェクト
+└── benchmark/              # ベンチマーク
+```
+
+---
+
+## 💾 **データ・ストレージ層**
+
+### 🗄️ `chroma/` - ベクトルデータベース
+埋め込みベクトル保存・検索
+
+```
+chroma/
+├── chroma.sqlite3          # ChromaDB データベース
+└── [collection-id]/        # コレクションデータ
+```
+
+### 📊 `workspace/` - ワークスペース
+プロジェクト固有のワークスペース
+
+### 🗃️ `static/` & `staticfiles/` - 静的ファイル
+```
+static/          # 開発用静的ファイル
+staticfiles/     # 本番用静的ファイル
+├── css/         # スタイルシート
+├── js/          # JavaScript
+├── images/      # 画像ファイル
+└── admin/       # Django管理画面用
+```
+
+---
+
+## 🔧 **開発・運用ツール層**
+
+### 🐳 **コンテナ化**
+- `Dockerfile` - アプリケーションコンテナ
+- `docker-compose.yml` - マルチコンテナ構成
+- `.dockerignore` - Docker除外ファイル
+
+### 🔄 **CI/CD**
+```
+.github/
+├── workflows/              # GitHub Actions
+├── ISSUE_TEMPLATE/         # Issue テンプレート
+└── PULL_REQUEST_TEMPLATE/  # PR テンプレート
+```
+
+### 🛠️ **開発環境**
+```
+.devcontainer/
+├── devcontainer.json       # VS Code 開発コンテナ設定
+└── Dockerfile             # 開発用コンテナ
+```
+
+### 🧪 `tests/` - テストスイート
+```
+tests/
+├── test_*.py              # 各種テストファイル
+├── test_folders*/         # テスト用データ
+└── fixtures/              # テスト固定データ
+```
+
+---
+
+## 📝 **設定・コマンド詳細**
+
+### 🎯 **Makefileコマンド**
+
+| コマンド | 説明 | 用途 |
+|---------|------|------|
+| `make app` | メインアプリ起動 | FastAPI/Django サーバー開始 |
+| `make dev` | 開発モード起動 | ホットリロード有効 |
+| `make debug` | デバッグモード起動 | ブレークポイント使用可能 |
+| `make test` | テスト実行 | 全テストスイート実行 |
+| `make clean` | クリーンアップ | 一時ファイル削除 |
+| `make docker-up` | Docker起動 | コンテナ環境開始 |
+
+### 🌍 **環境変数 (.env)**
+
+| 変数 | 説明 | 例 |
+|------|------|-----|
+| `GROQ_API_KEY` | GroqAI APIキー | `gsk_...` |
+| `DATABASE_URL` | データベースURL | `sqlite:///./app.db` |
+| `SPACE_ID` | Hugging Face Space ID | `username/space-name` |
+| `WEBHOOK_URL` | Google Chat Webhook | `https://chat.googleapis.com/...` |
+
+### 🗄️ **データベーススキーマ**
+
+#### `prompts.db`
+```sql
+CREATE TABLE prompts (
+    id INTEGER PRIMARY KEY,
+    title TEXT NOT NULL,
+    content TEXT NOT NULL,
+    created_at TIMESTAMP,
+    updated_at TIMESTAMP
+);
+```
+
+#### `chat_history.db`
+```sql
+CREATE TABLE history (
+    id INTEGER PRIMARY KEY,
+    role TEXT NOT NULL,
+    type TEXT,
+    content TEXT NOT NULL,
+    timestamp TIMESTAMP
+);
+```
+
+---
+
+## 🚀 **クイックスタート**
+
+### 1. 環境セットアップ
+```bash
+# 依存関係インストール
+make requirements
+
+# 環境変数設定
+cp .env.example .env
+# .env ファイルを編集してAPIキーを設定
+```
+
+### 2. アプリケーション起動
+```bash
+# 開発モードで起動
+make dev
+
+# または通常モードで起動
+make app
+```
+
+### 3. 主要URL
+- **メインアプリ**: http://localhost:7860
+- **Django管理**: http://localhost:7860/admin
+- **API文書**: http://localhost:7860/docs
+
+---
+
+## 📚 **主要機能**
+
+### 🎨 **Gradio インターフェース**
+- チャット機能 (`gra_01_chat`)
+- プログラム自動生成 (`gra_03_programfromdoc`)
+- データベース操作UI (`gra_04_database`)
+- ファイル処理 (`gra_05_files`)
+
+### 🤖 **AI 統合**
+- OpenInterpreter によるコード実行
+- LLaMA ファインチューニング
+- プロンプト自動最適化
+- BabyAGI 自律エージェント
+
+### 💼 **業務アプリケーション**
+- 買取システム (`buyback`)
+- ��属査定システム (`metal_assessment`)
+- 価格管理システム (`gold_price_project`)
+
+---
+
+## 🔍 **トラブルシューティング**
+
+### よくある問題
+
+1. **データベース接続エラー**
+   ```bash
+   # データベース初期化
+   python manage.py migrate
+   ```
+
+2. **依存関係エラー**
+   ```bash
+   # 依存関係再インストール
+   make clean
+   make requirements
+   ```
+
+3. **ポート競合**
+   ```bash
+   # 使用中ポートの確認
+   lsof -i :7860
+   ```
+
+---
+
+## 📈 **開発ガイドライン**
+
+### 🏗️ **新機能追加**
+1. `controllers/gra_XX_newfeature/` に新しいGradioインターフェースを作成
+2. `apps/newapp/` に新しいDjangoアプリを作成
+3. `mysite/routers/` にFastAPIルーターを追加
+
+### 🧪 **テスト**
+```bash
+# 特定テスト実行
+pytest tests/test_specific.py
+
+# カバレッジ付きテスト
+pytest --cov=mysite tests/
+```
+
+### 📦 **デプロイ**
+```bash
+# Docker イメージビルド
+make docker-build
+
+# コンテナ起動
+make docker-up
+```
+
+---
+
+## 📞 **サポート**
+
+- 📖 **ドキュメント**: `/docs/` フォルダ参照
+- 🐛 **バグ報告**: GitHub Issues
+- 💡 **機能要求**: GitHub Discussions
+
+---
+
+*最終更新: 2025年6月11日*

app/Http/controller/test_folders/prompt

@@ -1,83 +1,32 @@
-
-# 社員がプロフィールを登録・公開し、お互いに参照できるシステム
-
-## 機能
-
-## LINEのクレーム対応システムの作成
-- クレームがあった用語をAPIでナレッジに登録するシステム
-- APIキー agentキーをいれ
-- 否定語に対する　文言に隊しての設定をする
-
-### ユーザー登録
-
-- ユーザー登録画面で、ユーザー名とパスワードを入力して登録ボタンを押すことにより、新規ユーザーを登録することができる。
-- ユーザー名は、既存のユーザーと重複してはいけない。
-- ユーザー登録に成功したら、ログイン済み状態として、ユーザー一覧画面へ遷移する。
-
-### ログイン
-
-- ログイン画面で、ユーザー名とパスワードを入力してログインボタンを押すことにより、ログインすることができる。
-- ログインに成功したら、ユーザー一覧画面へ遷移する。
-
-### チーム一覧・作成
-
-- チームの一覧が、チームの作成日時降順で表示される。
-- チーム名を入力して作成ボタンを押すと、チームが作成される。
-- チームの作成後、本画面が再表示される。
-
-### プロフィール編集
-
-- 自身の`所属チーム`・`プロフィール`・`タグ`を編集できる。
-- 所属チームは、既存チームからの選択式とする。
-- プロフィールは自由入力とする。
-- タグは自由入力で、複数入力できるようにする。
-
-### ユーザー一覧・検索
-
-- デフォルトでは全てのユーザーが一覧表示される。
-- 検索条件を入力して検索ボタンを押すと、検索条件がプロフィールに部分一致するユーザーのみにフィルタリングできる。
-- 一覧は、ユーザー登録日時の降順で表示される。
-- 表示内容は、`ユーザー名`・`プロフィール`で、`プロフィール`は先頭10文字と三点リーダーを表示する。
-- ユーザー名をクリックすると、そのユーザーのユーザー詳細画面へ遷移する。
-- `チーム一覧へ`をクリックすると、チーム一覧画面へ遷移する。
-
-### ユーザー詳細画面
-
-- 特定のユーザーの、`ユーザー名`・`所属チーム`・`プロフィール`・`タグ`が表示される。
-- プロフィールの表示はマークダウンに対応させる。
-- `一覧へ`リンクをクリックすると、ユーザー一覧画面へ遷移する。
-
-## あなたが作成するもの
-
-バックエンドのプログラム一式を作成してください。
-フロントエンドのプログラムは不要です。
-
-- `/api`ディレクトリ以下に作成。
-- Python/FastAPI/SQLAlchemyを使う。
-- DBはSQLiteを使う。
-- 必要に応じて外部ライブラリを使う。
-- クラウドや外部サービス(外部API)は使わない。
-- .gitignoreを含めること。
-- バックエンド
-@app.post("
-def lumbda_function():
-
-gradio_interface でメイン関数から読み込めるようにして
-
-googleappsscript
-ラインの画像検索システム
-
-ファイルは１ファイルで作成して。
-１ファイル１機能で難しくしたくない
-
-1,lineからデータがくる
-2,doPostで取得
-3.typeがイメージの場合はドライブに保存
-4,保存したデータをS3にアップロード
-5.データはシークレットから取得
-6,plantumlでフローの作成
-7,システムドキュメントの作成
-
-gradio は gradio_interface というBlock名で作成
-fastapiはrouter の作成
-
+# gradio で miiboのナレッジに登録する画面の作成
+  gradio_interface interfacec name
+
+# fastapi
+  gradio apiに接続するAPI
+  router で作成
+
+1ファイルで作成
+仕様書の作成
+plantumlで図にする
+
+#sample fastapi
+import requests
+import json
+import os
+
+from fastapi import APIRouter, HTTPException
+from gradio_client import Client
+
+router = APIRouter(prefix="/gradio", tags=["gradio"])
+@router.get("/route/gradio")
+
+def get_senario(id,res):
+    table = "LOG"
+    client = Client("kenken999/fastapi_django_main_live")
+    result = client.predict(
+            message="Hello!!",
+            request=0.95,
+            param_3=512,
+            api_name="/chat"
+    )
+    return result

cache/user_config.yaml

@@ -1,6 +1,6 @@
 cache_dir: null
 lang: en
-last_model: DeepSeekCoder-33B-Chat
+last_model: Aya-23-8B-Chat
 path_dict:
   Falcon-180B: tiiuae/falcon-180b
   LLaMA3-70B-Chat: meta-llama/Meta-Llama-3-70B-Instruct

contbk/gra_03_programfromdocgas/programfromdocAI.py

@@ -0,0 +1,330 @@
+import sys
+import os
+sys.path.append('/workspaces/fastapi_django_main_live')
+
+import gradio as gr
+from mysite.libs.utilities import chat_with_interpreter, completion, process_file, no_process_file
+from interpreter import interpreter
+import mysite.interpreter.interpreter_config  # インポートするだけで設定が適用されます
+import sqlite3
+import os
+from datetime import datetime
+from typing import List, Tuple, Optional
+
+# データベース設定
+DB_PATH = "prompts.db"
+
+def init_db():
+    """プロンプトデータベースの初期化"""
+    try:
+        conn = sqlite3.connect(DB_PATH)
+        cursor = conn.cursor()
+        
+        cursor.execute('''
+            CREATE TABLE IF NOT EXISTS prompts (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                title TEXT NOT NULL,
+                url TEXT,
+                content TEXT NOT NULL,
+                created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+            )
+        ''')
+        
+        # デフォルトプロンプトの追加（初回のみ）
+        cursor.execute('SELECT COUNT(*) FROM prompts')
+        if cursor.fetchone()[0] == 0:
+            default_prompt = """# gradio で miiboのナレッジに登録する画面の作成
+  gradio_interface interfacec name
+
+# fastapi
+  gradio apiに接続するAPI
+  router で作成
+
+1ファイルで作成
+仕様書の作成
+plantumlで図にする
+
+#sample fastapi
+import requests
+import json
+import os
+
+from fastapi import APIRouter, HTTPException
+from gradio_client import Client
+
+router = APIRouter(prefix="/gradio", tags=["gradio"])
+@router.get("/route/gradio")
+
+def get_senario(id,res):
+    table = "LOG"
+    client = Client("kenken999/fastapi_django_main_live")
+    result = client.predict(
+            message="Hello!!",
+            request=0.95,
+            param_3=512,
+            api_name="/chat"
+    )
+    return result
+"""
+            cursor.execute(
+                'INSERT INTO prompts (title, url, content) VALUES (?, ?, ?)',
+                ('デフォルト：Gradio + FastAPI作成', 'https://example.com', default_prompt)
+            )
+        
+        conn.commit()
+        conn.close()
+        print("✅ データベース初期化完了")
+    except Exception as e:
+        print(f"❌ データベース初期化エラー: {e}")
+
+def save_prompt(title: str, url: str, content: str) -> str:
+    """プロンプトを保存"""
+    try:
+        if not title.strip() or not content.strip():
+            return "❌ タイトルとプロンプト内容は必須です"
+            
+        conn = sqlite3.connect(DB_PATH)
+        cursor = conn.cursor()
+        
+        cursor.execute(
+            'INSERT INTO prompts (title, url, content) VALUES (?, ?, ?)',
+            (title.strip(), url.strip(), content.strip())
+        )
+        
+        conn.commit()
+        conn.close()
+        print(f"✅ プロンプト保存: {title}")
+        return f"✅ プロンプト '{title}' を保存しました！"
+    except Exception as e:
+        print(f"❌ 保存エラー: {e}")
+        return f"❌ エラー: {str(e)}"
+
+def get_prompts() -> List[Tuple]:
+    """全プロンプトを取得"""
+    try:
+        conn = sqlite3.connect(DB_PATH)
+        cursor = conn.cursor()
+        
+        cursor.execute('SELECT id, title, url, created_at FROM prompts ORDER BY created_at DESC')
+        prompts = cursor.fetchall()
+        
+        conn.close()
+        print(f"✅ プロンプト取得: {len(prompts)}件")
+        return prompts
+    except Exception as e:
+        print(f"❌ プロンプト取得エラー: {e}")
+        return []
+
+def get_prompt_content(prompt_id: int) -> str:
+    """指定IDのプロンプト内容を取得"""
+    try:
+        conn = sqlite3.connect(DB_PATH)
+        cursor = conn.cursor()
+        
+        cursor.execute('SELECT content FROM prompts WHERE id = ?', (prompt_id,))
+        result = cursor.fetchone()
+        
+        conn.close()
+        return result[0] if result else ""
+    except Exception as e:
+        print(f"❌ プロンプト内容取得エラー: {e}")
+        return ""
+
+def delete_prompt(prompt_id: int) -> str:
+    """プロンプトを削除"""
+    try:
+        conn = sqlite3.connect(DB_PATH)
+        cursor = conn.cursor()
+        
+        cursor.execute('DELETE FROM prompts WHERE id = ?', (prompt_id,))
+        
+        if cursor.rowcount > 0:
+            conn.commit()
+            conn.close()
+            print(f"✅ プロンプト削除: ID {prompt_id}")
+            return "✅ プロンプトを削除しました"
+        else:
+            conn.close()
+            return "❌ プロンプトが見つかりません"
+    except Exception as e:
+        print(f"❌ 削除エラー: {e}")
+        return f"❌ 削除エラー: {str(e)}"
+
+# データベース初期化
+print("🗄️ データベースを初期化中...")
+init_db()
+
+def get_prompt_choices():
+    """プロンプト一覧のchoicesを取得"""
+    prompts = get_prompts()
+    choices = []
+    for prompt in prompts:
+        id_, title, url, created_at = prompt
+        display_text = f"[{id_}] {title} ({created_at[:10]})"
+        choices.append((display_text, str(id_)))
+    return choices
+
+def refresh_prompt_dropdown():
+    """プロンプトドロップダウンを更新"""
+    choices = get_prompt_choices()
+    return gr.Dropdown(choices=choices, label="📋 保存済みプロンプト一覧", value=None)
+
+# Gradioインターフェース作成
+with gr.Blocks(title="🚀 プロンプト管理 & コード生成", theme=gr.themes.Soft()) as gradio_interface:
+    gr.Markdown("# 🚀 プロンプト管理 & ドキュメントからコード生成")
+    
+    with gr.Tabs():
+        # タブ1: プロンプト管理
+        with gr.TabItem("📝 プロンプト管理"):
+            gr.Markdown("## プロンプトの保存・管理")
+            
+            with gr.Row():
+                with gr.Column(scale=1):
+                    # プロンプト保存フォーム
+                    save_title = gr.Textbox(label="📋 タイトル", placeholder="例: FastAPI + Gradio作成プロンプト")
+                    save_url = gr.Textbox(label="🔗 参考URL (任意)", placeholder="https://example.com")
+                    save_content = gr.Textbox(
+                        label="📝 プロンプト内容", 
+                        lines=10,
+                        placeholder="プロンプトの内容を入力してください..."
+                    )
+                    save_btn = gr.Button("💾 プロンプトを保存", variant="primary")
+                    save_status = gr.Textbox(label="保存結果", interactive=False)
+                
+                with gr.Column(scale=1):
+                    # プロンプト一覧
+                    prompt_dropdown = gr.Dropdown(
+                        choices=get_prompt_choices(), 
+                        label="📋 保存済みプロンプト一覧",
+                        interactive=True
+                    )
+                    refresh_btn = gr.Button("🔄 一覧を更新")
+                    load_btn = gr.Button("📥 選択したプロンプトを読み込み", variant="secondary")
+                    delete_btn = gr.Button("🗑️ 選択したプロンプトを削除", variant="stop")
+                    delete_status = gr.Textbox(label="削除結果", interactive=False)
+        
+        # タブ2: コード生成
+        with gr.TabItem("⚡ コード生成"):
+            gr.Markdown("## ドキュメントからコード生成")
+            
+            with gr.Row():
+                with gr.Column():
+                    # ファイルアップロード
+                    input_file = gr.File(label="📄 ドキュメントファイル")
+                    
+                    # プロンプト表示・編集エリア
+                    current_prompt = gr.Textbox(
+                        label="📝 現在のプロンプト", 
+                        lines=15,
+                        value="",
+                        placeholder="上のタブでプロンプトを選択するか、直接入力してください..."
+                    )
+                    
+                with gr.Column():
+                    # 生成設定
+                    folder_name = gr.Textbox(label="📁 出力フォルダ名", value="generated_code")
+                    github_token = gr.Textbox(label="🔑 GitHub Token (任意)", type="password", value="")
+                    
+                    # 生成ボタン
+                    generate_btn = gr.Button("🚀 コード生成実行", variant="primary", size="lg")
+                    
+                    # 結果表示
+                    result_output = gr.Textbox(label="📤 生成結果", lines=10, interactive=False)
+    
+    # イベントハンドラー
+    def handle_save_prompt(title, url, content):
+        result = save_prompt(title, url, content)
+        # 保存後に一覧を更新
+        updated_dropdown = refresh_prompt_dropdown()
+        print(f"💾 保存後の一覧更新完了")
+        return result, updated_dropdown
+    
+    def handle_refresh_list():
+        updated_dropdown = refresh_prompt_dropdown()
+        print(f"🔄 一覧更新: ドロップダウンを更新")
+        return updated_dropdown
+    
+    def handle_load_prompt(selected_prompt):
+        print(f"📥 プロンプト読み込み要求: {selected_prompt}")
+        if selected_prompt:
+            try:
+                prompt_id = selected_prompt.split(']')[0][1:]  # [1] から ] までを取得してIDを抽出
+                print(f"🔍 抽出されたID: {prompt_id}")
+                content = get_prompt_content(int(prompt_id))
+                print(f"📄 取得した内容の長さ: {len(content)} 文字")
+                print(f"📄 内容のプレビュー: {content[:100]}...")
+                return content
+            except Exception as e:
+                print(f"❌ プロンプト読み込みエラー: {e}")
+                return ""
+        return ""
+    
+    def handle_delete_prompt(selected_prompt):
+        if selected_prompt:
+            try:
+                prompt_id = selected_prompt.split(']')[0][1:]  # IDを抽出
+                result = delete_prompt(int(prompt_id))
+                # 削除後に一覧を更新
+                updated_dropdown = refresh_prompt_dropdown()
+                print(f"🗑️ 削除後の一覧更新完了")
+                return result, updated_dropdown
+            except Exception as e:
+                print(f"❌ プロンプト削除エラー: {e}")
+                return f"❌ エラー: {str(e)}", refresh_prompt_dropdown()
+        return "❌ プロンプトが選択されていません", refresh_prompt_dropdown()
+    
+    def handle_generate_code(file, prompt, folder, token):
+        if not prompt.strip():
+            return "❌ プロンプトが入力されていません"
+        try:
+            return process_file(file, prompt, folder, token)
+        except Exception as e:
+            return f"❌ コード生成エラー: {str(e)}"
+    
+    # イベント接続
+    save_btn.click(
+        handle_save_prompt,
+        inputs=[save_title, save_url, save_content],
+        outputs=[save_status, prompt_dropdown]
+    )
+    
+    refresh_btn.click(
+        handle_refresh_list,
+        outputs=[prompt_dropdown]
+    )
+    
+    load_btn.click(
+        handle_load_prompt,
+        inputs=[prompt_dropdown],
+        outputs=[current_prompt]
+    )
+    
+    # ドロップダウンの選択変更時も自動読み込み
+    prompt_dropdown.change(
+        handle_load_prompt,
+        inputs=[prompt_dropdown],
+        outputs=[current_prompt]
+    )
+    
+    delete_btn.click(
+        handle_delete_prompt,
+        inputs=[prompt_dropdown],
+        outputs=[delete_status, prompt_dropdown]
+    )
+    
+    generate_btn.click(
+        handle_generate_code,
+        inputs=[input_file, current_prompt, folder_name, github_token],
+        outputs=[result_output]
+    )
+
+# スタンドアロン実行用
+if __name__ == "__main__":
+    print("🚀 プロンプト管理システムを起動中...")
+    gradio_interface.launch(
+        server_name="0.0.0.0",
+        server_port=0,  # 自動でポートを選択
+        share=False,
+        debug=True
+    )

contbk/gra_03_programfromdocgas/programfromdocAI_backup.py

@@ -0,0 +1,287 @@
+import gradio as gr
+from mysite.libs.utilities import chat_with_interpreter, completion, process_file, no_process_file
+from interpreter import interpreter
+import mysite.interpreter.interpreter_config  # インポートするだけで設定が適用されます
+import sqlite3
+import os
+from datetime import datetime
+from typing import List, Tuple, Optional
+
+# データベース設定
+DB_PATH = "prompts.db"
+
+def init_db():
+    """プロンプトデータベースの初期化"""
+    conn = sqlite3.connect(DB_PATH)
+    cursor = conn.cursor()
+    
+    cursor.execute('''
+        CREATE TABLE IF NOT EXISTS prompts (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            title TEXT NOT NULL,
+            url TEXT,
+            content TEXT NOT NULL,
+            created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+            updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+        )
+    ''')
+    
+    # デフォルトプロンプトの追加（初回のみ）
+    cursor.execute('SELECT COUNT(*) FROM prompts')
+    if cursor.fetchone()[0] == 0:
+        default_prompt = """# gradio で miiboのナレッジに登録する画面の作成
+  gradio_interface interfacec name
+
+# fastapi
+  gradio apiに接続するAPI
+  router で作成
+
+1ファイルで作成
+仕様書の作成
+plantumlで図にする
+
+#sample fastapi
+import requests
+import json
+import os
+
+from fastapi import APIRouter, HTTPException
+from gradio_client import Client
+
+router = APIRouter(prefix="/gradio", tags=["gradio"])
+@router.get("/route/gradio")
+
+def get_senario(id,res):
+    table = "LOG"
+    client = Client("kenken999/fastapi_django_main_live")
+    result = client.predict(
+            message="Hello!!",
+            request=0.95,
+            param_3=512,
+            api_name="/chat"
+    )
+    return result
+"""
+        cursor.execute(
+            'INSERT INTO prompts (title, url, content) VALUES (?, ?, ?)',
+            ('デフォルト：Gradio + FastAPI作成', 'https://example.com', default_prompt)
+        )
+    
+    conn.commit()
+    conn.close()
+
+def save_prompt(title: str, url: str, content: str) -> str:
+    """プロンプトを保存"""
+    try:
+        conn = sqlite3.connect(DB_PATH)
+        cursor = conn.cursor()
+        
+        cursor.execute(
+            'INSERT INTO prompts (title, url, content) VALUES (?, ?, ?)',
+            (title, url, content)
+        )
+        
+        conn.commit()
+        conn.close()
+        return f"✅ プロンプト '{title}' を保存しました！"
+    except Exception as e:
+        return f"❌ エラー: {str(e)}"
+
+def get_prompts() -> List[Tuple]:
+    """全プロンプトを取得"""
+    try:
+        conn = sqlite3.connect(DB_PATH)
+        cursor = conn.cursor()
+        
+        cursor.execute('SELECT id, title, url, created_at FROM prompts ORDER BY created_at DESC')
+        prompts = cursor.fetchall()
+        
+        conn.close()
+        return prompts
+    except Exception as e:
+        print(f"プロンプト取得エラー: {e}")
+        return []
+
+def get_prompt_content(prompt_id: int) -> str:
+    """指定IDのプロンプト内容を取得"""
+    try:
+        conn = sqlite3.connect(DB_PATH)
+        cursor = conn.cursor()
+        
+        cursor.execute('SELECT content FROM prompts WHERE id = ?', (prompt_id,))
+        result = cursor.fetchone()
+        
+        conn.close()
+        return result[0] if result else ""
+    except Exception as e:
+        print(f"プロンプト内容取得エラー: {e}")
+        return ""
+
+def delete_prompt(prompt_id: int) -> str:
+    """プロンプトを削除"""
+    try:
+        conn = sqlite3.connect(DB_PATH)
+        cursor = conn.cursor()
+        
+        cursor.execute('DELETE FROM prompts WHERE id = ?', (prompt_id,))
+        
+        if cursor.rowcount > 0:
+            conn.commit()
+            conn.close()
+            return "✅ プロンプトを削除しました"
+        else:
+            conn.close()
+            return "❌ プロンプトが見つかりません"
+    except Exception as e:
+        return f"❌ 削除エラー: {str(e)}"
+
+# データベース初期化
+init_db()
+
+def load_prompt_from_db(prompt_id):
+    """選択されたプロンプトを読み込み"""
+    if prompt_id:
+        content = get_prompt_content(int(prompt_id))
+        return content
+    return ""
+
+def refresh_prompt_list():
+    """プロンプト一覧を更新"""
+    prompts = get_prompts()
+    choices = []
+    for prompt in prompts:
+        id_, title, url, created_at = prompt
+        display_text = f"[{id_}] {title} ({created_at[:10]})"
+        choices.append((display_text, str(id_)))
+    return gr.Dropdown(choices=choices, label="📋 保存済みプロンプト一覧", value=None)
+
+# Gradioインターフェース作成
+with gr.Blocks(title="🚀 プロンプト管理 & コード生成") as gradio_interface:
+    gr.Markdown("# 🚀 プロンプト管理 & ドキュメントからコード生成")
+    
+    with gr.Tabs():
+        # タブ1: プロンプト管理
+        with gr.TabItem("📝 プロンプト管理"):
+            gr.Markdown("## プロンプトの保存・管理")
+            
+            with gr.Row():
+                with gr.Column(scale=1):
+                    # プロンプト保存フォーム
+                    save_title = gr.Textbox(label="📋 タイトル", placeholder="例: FastAPI + Gradio作成プロンプト")
+                    save_url = gr.Textbox(label="🔗 参考URL (任意)", placeholder="https://example.com")
+                    save_content = gr.Textbox(
+                        label="📝 プロンプト内容", 
+                        lines=10,
+                        placeholder="プロンプトの内容を入力してください..."
+                    )
+                    save_btn = gr.Button("💾 プロンプトを保存", variant="primary")
+                    save_status = gr.Textbox(label="保存結果", interactive=False)
+                
+                with gr.Column(scale=1):
+                    # プロンプト一覧
+                    prompt_dropdown = gr.Dropdown(
+                        choices=[], 
+                        label="📋 保存済みプロンプト一覧",
+                        interactive=True
+                    )
+                    refresh_btn = gr.Button("🔄 一覧を更新")
+                    load_btn = gr.Button("📥 選択したプロンプトを読み込み", variant="secondary")
+                    delete_btn = gr.Button("🗑️ 選択したプロンプトを削除", variant="stop")
+                    delete_status = gr.Textbox(label="削除結果", interactive=False)
+        
+        # タブ2: コード生成
+        with gr.TabItem("⚡ コード生成"):
+            gr.Markdown("## ドキュメントからコード生成")
+            
+            with gr.Row():
+                with gr.Column():
+                    # ファイルアップロード
+                    input_file = gr.File(label="📄 ドキュメントファイル")
+                    
+                    # プロンプト表示・編集エリア
+                    current_prompt = gr.Textbox(
+                        label="📝 現在のプロンプト", 
+                        lines=15,
+                        value="",
+                        placeholder="上のタブでプロンプトを選択するか、直接入力してください..."
+                    )
+                    
+                with gr.Column():
+                    # 生成設定
+                    folder_name = gr.Textbox(label="📁 出力フォルダ名", value="generated_code")
+                    github_token = gr.Textbox(label="🔑 GitHub Token (任意)", type="password", value="")
+                    
+                    # 生成ボタン
+                    generate_btn = gr.Button("🚀 コード生成実行", variant="primary", size="lg")
+                    
+                    # 結果表示
+                    result_output = gr.Textbox(label="📤 生成結果", lines=10, interactive=False)
+    
+    # イベントハンドラー
+    def handle_save_prompt(title, url, content):
+        if not title.strip() or not content.strip():
+            return "❌ タイトルとプロンプト内容は必須です"
+        return save_prompt(title, url, content)
+    
+    def handle_refresh_list():
+        prompts = get_prompts()
+        choices = []
+        for prompt in prompts:
+            id_, title, url, created_at = prompt
+            display_text = f"[{id_}] {title} ({created_at[:10]})"
+            choices.append((display_text, str(id_)))
+        return gr.Dropdown(choices=choices, value=None)
+    
+    def handle_load_prompt(selected_prompt):
+        if selected_prompt:
+            prompt_id = selected_prompt.split(']')[0][1:]  # [1] から ] までを取得してIDを抽出
+            content = get_prompt_content(int(prompt_id))
+            return content
+        return ""
+    
+    def handle_delete_prompt(selected_prompt):
+        if selected_prompt:
+            prompt_id = selected_prompt.split(']')[0][1:]  # IDを抽出
+            return delete_prompt(int(prompt_id))
+        return "❌ プロンプトが選択されていません"
+    
+    def handle_generate_code(file, prompt, folder, token):
+        if not prompt.strip():
+            return "❌ プロンプトが入力されていません"
+        return process_file(file, prompt, folder, token)
+    
+    # イベント接続
+    save_btn.click(
+        handle_save_prompt,
+        inputs=[save_title, save_url, save_content],
+        outputs=[save_status]
+    )
+    
+    refresh_btn.click(
+        handle_refresh_list,
+        outputs=[prompt_dropdown]
+    )
+    
+    load_btn.click(
+        handle_load_prompt,
+        inputs=[prompt_dropdown],
+        outputs=[current_prompt]
+    )
+    
+    delete_btn.click(
+        handle_delete_prompt,
+        inputs=[prompt_dropdown],
+        outputs=[delete_status]
+    )
+    
+    generate_btn.click(
+        handle_generate_code,
+        inputs=[input_file, current_prompt, folder_name, github_token],
+        outputs=[result_output]
+    )
+    
+    # ページ読み込み時にプロンプト一覧を初期化
+    gradio_interface.load(
+        handle_refresh_list,
+        outputs=[prompt_dropdown]
+    )

contbk/gra_03_programfromdocgas/programfromdocAI_fixed.py

@@ -0,0 +1,298 @@
+import gradio as gr
+from mysite.libs.utilities import chat_with_interpreter, completion, process_file, no_process_file
+from interpreter import interpreter
+import mysite.interpreter.interpreter_config  # インポートするだけで設定が適用されます
+import sqlite3
+import os
+from datetime import datetime
+from typing import List, Tuple, Optional
+
+# データベース設定
+DB_PATH = "prompts.db"
+
+def init_db():
+    """プロンプトデータベースの初期化"""
+    try:
+        conn = sqlite3.connect(DB_PATH)
+        cursor = conn.cursor()
+        
+        cursor.execute('''
+            CREATE TABLE IF NOT EXISTS prompts (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                title TEXT NOT NULL,
+                url TEXT,
+                content TEXT NOT NULL,
+                created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+            )
+        ''')
+        
+        # デフォルトプロンプトの追加（初回のみ）
+        cursor.execute('SELECT COUNT(*) FROM prompts')
+        if cursor.fetchone()[0] == 0:
+            default_prompt = """# gradio で miiboのナレッジに登録する画面の作成
+  gradio_interface interfacec name
+
+# fastapi
+  gradio apiに接続するAPI
+  router で作成
+
+1ファイルで作成
+仕様書の作成
+plantumlで図にする
+
+#sample fastapi
+import requests
+import json
+import os
+
+from fastapi import APIRouter, HTTPException
+from gradio_client import Client
+
+router = APIRouter(prefix="/gradio", tags=["gradio"])
+@router.get("/route/gradio")
+
+def get_senario(id,res):
+    table = "LOG"
+    client = Client("kenken999/fastapi_django_main_live")
+    result = client.predict(
+            message="Hello!!",
+            request=0.95,
+            param_3=512,
+            api_name="/chat"
+    )
+    return result
+"""
+            cursor.execute(
+                'INSERT INTO prompts (title, url, content) VALUES (?, ?, ?)',
+                ('デフォルト：Gradio + FastAPI作成', 'https://example.com', default_prompt)
+            )
+        
+        conn.commit()
+        conn.close()
+        print("✅ データベース初期化完了")
+    except Exception as e:
+        print(f"❌ データベース初期化エラー: {e}")
+
+def save_prompt(title: str, url: str, content: str) -> str:
+    """プロンプトを保存"""
+    try:
+        if not title.strip() or not content.strip():
+            return "❌ タイトルとプロンプト内容は必須です"
+            
+        conn = sqlite3.connect(DB_PATH)
+        cursor = conn.cursor()
+        
+        cursor.execute(
+            'INSERT INTO prompts (title, url, content) VALUES (?, ?, ?)',
+            (title.strip(), url.strip(), content.strip())
+        )
+        
+        conn.commit()
+        conn.close()
+        print(f"✅ プロンプト保存: {title}")
+        return f"✅ プロンプト '{title}' を保存しました！"
+    except Exception as e:
+        print(f"❌ 保存エラー: {e}")
+        return f"❌ エラー: {str(e)}"
+
+def get_prompts() -> List[Tuple]:
+    """全プロンプトを取得"""
+    try:
+        conn = sqlite3.connect(DB_PATH)
+        cursor = conn.cursor()
+        
+        cursor.execute('SELECT id, title, url, created_at FROM prompts ORDER BY created_at DESC')
+        prompts = cursor.fetchall()
+        
+        conn.close()
+        print(f"✅ プロンプト取得: {len(prompts)}件")
+        return prompts
+    except Exception as e:
+        print(f"❌ プロンプト取得エラー: {e}")
+        return []
+
+def get_prompt_content(prompt_id: int) -> str:
+    """指定IDのプロンプト内容を取得"""
+    try:
+        conn = sqlite3.connect(DB_PATH)
+        cursor = conn.cursor()
+        
+        cursor.execute('SELECT content FROM prompts WHERE id = ?', (prompt_id,))
+        result = cursor.fetchone()
+        
+        conn.close()
+        return result[0] if result else ""
+    except Exception as e:
+        print(f"❌ プロンプト内容取得エラー: {e}")
+        return ""
+
+def delete_prompt(prompt_id: int) -> str:
+    """プロンプトを削除"""
+    try:
+        conn = sqlite3.connect(DB_PATH)
+        cursor = conn.cursor()
+        
+        cursor.execute('DELETE FROM prompts WHERE id = ?', (prompt_id,))
+        
+        if cursor.rowcount > 0:
+            conn.commit()
+            conn.close()
+            print(f"✅ プロンプト削除: ID {prompt_id}")
+            return "✅ プロンプトを削除しました"
+        else:
+            conn.close()
+            return "❌ プロンプトが見つかりません"
+    except Exception as e:
+        print(f"❌ 削除エラー: {e}")
+        return f"❌ 削除エラー: {str(e)}"
+
+# データベース初期化
+print("🗄️ データベースを初期化中...")
+init_db()
+
+def refresh_prompt_list():
+    """プロンプト一覧を更新"""
+    prompts = get_prompts()
+    choices = []
+    for prompt in prompts:
+        id_, title, url, created_at = prompt
+        display_text = f"[{id_}] {title} ({created_at[:10]})"
+        choices.append((display_text, str(id_)))
+    return choices
+
+# Gradioインターフェース作成
+with gr.Blocks(title="🚀 プロンプト管理 & コード生成", theme=gr.themes.Soft()) as gradio_interface:
+    gr.Markdown("# 🚀 プロンプト管理 & ドキュメントからコード生成")
+    
+    with gr.Tabs():
+        # タブ1: プロンプト管理
+        with gr.TabItem("📝 プロンプト管理"):
+            gr.Markdown("## プロンプトの保存・管理")
+            
+            with gr.Row():
+                with gr.Column(scale=1):
+                    # プロンプト保存フォーム
+                    save_title = gr.Textbox(label="📋 タイトル", placeholder="例: FastAPI + Gradio作成プロンプト")
+                    save_url = gr.Textbox(label="🔗 参考URL (任意)", placeholder="https://example.com")
+                    save_content = gr.Textbox(
+                        label="📝 プロンプト内容", 
+                        lines=10,
+                        placeholder="プロンプトの内容を入力してください..."
+                    )
+                    save_btn = gr.Button("💾 プロンプトを保存", variant="primary")
+                    save_status = gr.Textbox(label="保存結果", interactive=False)
+                
+                with gr.Column(scale=1):
+                    # プロンプト一覧
+                    prompt_dropdown = gr.Dropdown(
+                        choices=[], 
+                        label="📋 保存済みプロンプト一覧",
+                        interactive=True
+                    )
+                    refresh_btn = gr.Button("🔄 一覧を更新")
+                    load_btn = gr.Button("📥 選択したプロンプトを読み込み", variant="secondary")
+                    delete_btn = gr.Button("🗑️ 選択したプロンプトを削除", variant="stop")
+                    delete_status = gr.Textbox(label="削除結果", interactive=False)
+        
+        # タブ2: コード生成
+        with gr.TabItem("⚡ コード生成"):
+            gr.Markdown("## ドキュメントからコード生成")
+            
+            with gr.Row():
+                with gr.Column():
+                    # ファイルアップロード
+                    input_file = gr.File(label="📄 ドキュメントファイル")
+                    
+                    # プロンプト表示・編集エリア
+                    current_prompt = gr.Textbox(
+                        label="📝 現在のプロンプト", 
+                        lines=15,
+                        value="",
+                        placeholder="上のタブでプロンプトを選択するか、直接入力してください..."
+                    )
+                    
+                with gr.Column():
+                    # 生成設定
+                    folder_name = gr.Textbox(label="📁 出力フォルダ名", value="generated_code")
+                    github_token = gr.Textbox(label="🔑 GitHub Token (任意)", type="password", value="")
+                    
+                    # 生成ボタン
+                    generate_btn = gr.Button("🚀 コード生成実行", variant="primary", size="lg")
+                    
+                    # 結果表示
+                    result_output = gr.Textbox(label="📤 生成結果", lines=10, interactive=False)
+    
+    # イベントハンドラー
+    def handle_save_prompt(title, url, content):
+        result = save_prompt(title, url, content)
+        return result
+    
+    def handle_refresh_list():
+        choices = refresh_prompt_list()
+        return gr.Dropdown(choices=choices, value=None)
+    
+    def handle_load_prompt(selected_prompt):
+        if selected_prompt:
+            try:
+                prompt_id = selected_prompt.split(']')[0][1:]  # [1] から ] までを取得してIDを抽出
+                content = get_prompt_content(int(prompt_id))
+                return content
+            except Exception as e:
+                print(f"❌ プロンプト読み込みエラー: {e}")
+                return ""
+        return ""
+    
+    def handle_delete_prompt(selected_prompt):
+        if selected_prompt:
+            try:
+                prompt_id = selected_prompt.split(']')[0][1:]  # IDを抽出
+                return delete_prompt(int(prompt_id))
+            except Exception as e:
+                print(f"❌ プロンプト削除エラー: {e}")
+                return f"❌ エラー: {str(e)}"
+        return "❌ プロンプトが選択されていません"
+    
+    def handle_generate_code(file, prompt, folder, token):
+        if not prompt.strip():
+            return "❌ プロンプトが入力されていません"
+        try:
+            return process_file(file, prompt, folder, token)
+        except Exception as e:
+            return f"❌ コード生成エラー: {str(e)}"
+    
+    # イベント接続
+    save_btn.click(
+        handle_save_prompt,
+        inputs=[save_title, save_url, save_content],
+        outputs=[save_status]
+    )
+    
+    refresh_btn.click(
+        handle_refresh_list,
+        outputs=[prompt_dropdown]
+    )
+    
+    load_btn.click(
+        handle_load_prompt,
+        inputs=[prompt_dropdown],
+        outputs=[current_prompt]
+    )
+    
+    delete_btn.click(
+        handle_delete_prompt,
+        inputs=[prompt_dropdown],
+        outputs=[delete_status]
+    )
+    
+    generate_btn.click(
+        handle_generate_code,
+        inputs=[input_file, current_prompt, folder_name, github_token],
+        outputs=[result_output]
+    )
+    
+    # ページ読み込み時にプロンプト一覧を初期化
+    gradio_interface.load(
+        handle_refresh_list,
+        outputs=[prompt_dropdown]
+    )

contbk/gra_03_programfromdocs/lavelo.py

@@ -0,0 +1,357 @@
+import gradio as gr
+from mysite.libs.utilities import chat_with_interpreter, completion, process_file,no_process_file
+from interpreter import interpreter
+import mysite.interpreter.interpreter_config  # インポートするだけで設定が適用されます
+import duckdb
+import gradio as gr
+import psycopg2
+from dataclasses import dataclass, field
+from typing import List, Optional, Tuple
+from mysite.interpreter.process import no_process_file,process_file,process_nofile
+#from controllers.gra_04_database.rides import test_set_lide
+import requests
+import sqlite3
+import os
+from datetime import datetime
+
+# データベース設定
+DB_PATH = "prompts.db"
+
+def init_db():
+    """プロンプトデータベースの初期化"""
+    try:
+        conn = sqlite3.connect(DB_PATH)
+        cursor = conn.cursor()
+        
+        cursor.execute('''
+            CREATE TABLE IF NOT EXISTS prompts (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                title TEXT NOT NULL,
+                url TEXT,
+                content TEXT NOT NULL,
+                created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+            )
+        ''')
+        
+        # デフォルトプロンプトの追加（初回のみ）
+        cursor.execute('SELECT COUNT(*) FROM prompts')
+        if cursor.fetchone()[0] == 0:
+            default_prompts = [
+                ("社員プロフィールシステム", "", val),
+                ("FastAPI + SQLAlchemy", "", "FastAPIとSQLAlchemyを使用したAPIの作成\n- ユーザー管理\n- 認証機能\n- CRUD操作"),
+                ("Gradio Interface", "", "Gradioインターフェースの作成\n- ファイルアップロード\n- チャット機能\n- データ表示"),
+            ]
+            
+            for title, url, content in default_prompts:
+                cursor.execute(
+                    'INSERT INTO prompts (title, url, content) VALUES (?, ?, ?)',
+                    (title, url, content)
+                )
+        
+        conn.commit()
+        conn.close()
+        print("✅ プロンプトデータベース初期化完了")
+        
+    except Exception as e:
+        print(f"❌ データベース初期化エラー: {e}")
+
+def save_prompt(title: str, content: str) -> str:
+    """プロンプトを保存"""
+    try:
+        if not title.strip() or not content.strip():
+            return "❌ タイトルと内容は必須です"
+        
+        conn = sqlite3.connect(DB_PATH)
+        cursor = conn.cursor()
+        
+        cursor.execute(
+            'INSERT INTO prompts (title, url, content) VALUES (?, ?, ?)',
+            (title.strip(), "", content.strip())
+        )
+        
+        conn.commit()
+        conn.close()
+        print(f"✅ プロンプト保存: {title}")
+        return f"✅ プロンプト「{title}」を保存しました"
+        
+    except Exception as e:
+        print(f"❌ プロンプト保存エラー: {e}")
+        return f"❌ 保存エラー: {e}"
+
+def get_prompts() -> List[Tuple]:
+    """全プロンプトを取得"""
+    try:
+        conn = sqlite3.connect(DB_PATH)
+        cursor = conn.cursor()
+        
+        cursor.execute('SELECT id, title, created_at FROM prompts ORDER BY created_at DESC')
+        prompts = cursor.fetchall()
+        
+        conn.close()
+        print(f"✅ プロンプト取得: {len(prompts)}件")
+        return prompts
+    except Exception as e:
+        print(f"❌ プロンプト取得エラー: {e}")
+        return []
+
+def get_prompt_content(prompt_id: int) -> str:
+    """指定IDのプロンプト内容を取得"""
+    try:
+        conn = sqlite3.connect(DB_PATH)
+        cursor = conn.cursor()
+        
+        cursor.execute('SELECT content FROM prompts WHERE id = ?', (prompt_id,))
+        result = cursor.fetchone()
+        
+        conn.close()
+        
+        if result:
+            print(f"✅ プロンプト内容取得: ID {prompt_id}")
+            return result[0]
+        else:
+            print(f"❌ プロンプトが見つかりません: ID {prompt_id}")
+            return ""
+            
+    except Exception as e:
+        print(f"❌ プロンプト内容取得エラー: {e}")
+        return ""
+
+def delete_prompt(prompt_id: int) -> str:
+    """プロンプトを削除"""
+    try:
+        conn = sqlite3.connect(DB_PATH)
+        cursor = conn.cursor()
+        
+        cursor.execute('DELETE FROM prompts WHERE id = ?', (prompt_id,))
+        
+        if cursor.rowcount > 0:
+            conn.commit()
+            conn.close()
+            print(f"✅ プロンプト削除: ID {prompt_id}")
+            return f"✅ プロンプト ID {prompt_id} を削除しました"
+        else:
+            conn.close()
+            return f"❌ プロンプト ID {prompt_id} が見つかりません"
+            
+    except Exception as e:
+        print(f"❌ プロンプト削除エラー: {e}")
+        return f"❌ 削���エラー: {e}"
+
+def update_prompt_display():
+    """プロンプト一覧の表示を更新"""
+    prompts = get_prompts()
+    if prompts:
+        # テーブル形式でデータを準備
+        table_data = []
+        for prompt_id, title, created_at in prompts:
+            # 日時の表示を短くする
+            date_str = created_at[:16] if created_at else ""
+            table_data.append([prompt_id, title, date_str])
+        return table_data
+    return []
+
+val = """
+# 社員がプロフィールを登録・公開し、お互いに参照できるシステム
+
+## 機能
+
+## LINEのクレーム対応システムの作成
+- クレームがあった用語をAPIでナレッジに登録するシステム
+- APIキー agentキーをいれ
+- 否定語に対する　文言に隊しての設定をする
+
+### ユーザー登録
+
+- ユーザー登録画面で、ユーザー名とパスワードを入力して登録ボタンを押すことにより、新規ユーザーを登録することができる。
+- ユーザー名は、既存のユーザーと重複してはいけない。
+- ユーザー登録に成功したら、ログイン済み状態として、ユーザー一覧画面へ遷移する。
+
+### ログイン
+
+- ログイン画面で、ユーザー名とパスワードを入力してログインボタンを押すことにより、ログインすることができる。
+- ログインに成功したら、ユーザー一覧画面へ遷移する。
+
+### チーム一覧・作成
+
+- チームの一覧が、チームの作成日時降順で表示される。
+- チーム名を入力して作成ボタンを押すと、チームが作成される。
+- チームの作成後、本画面が再表示される。
+
+### プロフィール編集
+
+- 自身の`所属チーム`・`プロフィール`・`タグ`を編集できる。
+- 所属チームは、既存チームからの選択式とする。
+- プロフィールは自由入力とする。
+- タグは自由入力で、複数入力できるようにする。
+
+### ユーザー一覧・検索
+
+- デフォルトでは全てのユーザーが一覧表示される。
+- 検索条件を入力して検索ボタンを押すと、検索条件がプロフィールに部分一致するユーザーのみにフィルタリングできる。
+- 一覧は、ユーザー登録日時の降順で表示される。
+- 表示内容は、`ユーザー名`・`プロフィール`で、`プロフィール`は先頭10文字と三点リーダーを表示する。
+- ユーザー名をクリックすると、そのユーザーのユーザー詳細画面へ遷移する。
+- `チーム一覧へ`をクリックすると、チーム一覧画面へ遷移する。
+
+### ユーザー詳細画面
+
+- 特定のユーザーの、`ユーザー名`・`所属チーム`・`プロフィール`・`タグ`が表示される。
+- プロフィールの表示はマークダウンに対応させる。
+- `一覧へ`リンクをクリックすると、ユーザー一覧画面へ遷移する。
+
+## あなたが作成するもの
+
+バックエンドのプログラム一式を作成してください。
+フロントエンドのプログラムは不要です。
+
+- `/api`ディレクトリ以下に作成。
+- Python/FastAPI/SQLAlchemyを使う。
+- DBはSQLiteを使う。
+- 必要に応じて外部ライブラリを使う。
+- クラウドや外部サービス(外部API)は使わない。
+- .gitignoreを含めること。
+- バックエンド
+@app.post("
+def lumbda_function():
+
+gradio_interface でメイン関数から読み込めるようにして
+
+googleappsscript
+ラインの画像検索システム
+
+ファイルは１ファイルで作成して。
+１ファイル１機能で難しくしたくない
+
+1,lineからデータがくる
+2,doPostで取得
+3.typeがイメージの場合はドライブに保存
+4,保存したデータをS3にアップロード
+5.データはシークレットから取得
+6,plantumlでフローの作成
+7,システムドキュメントの作成
+
+gradio は gradio_interface というBlock名で作成
+fastapiはrouter の作成
+
+"""
+
+def send_to_google_chat(message: str):
+    webhook_url = 'https://chat.googleapis.com/v1/spaces/AAAANwDF_KE/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=qSigSPSbTINJITgO30iGKnyeY48emcUJd9LST7FBLLY'
+    headers = {'Content-Type': 'application/json; charset=UTF-8'}
+    data = {'text': message}
+    response = requests.post(webhook_url, headers=headers, json=data)
+    response.raise_for_status()
+
+def process_file_and_notify(*args, **kwargs):
+    result = process_nofile(*args, **kwargs)
+    send_to_google_chat(result)
+    
+    # プロンプト実行後、内容をデータベースに保存
+    try:
+        prompt_content = args[0] if args else ""
+        if prompt_content.strip():
+            # 実行されたプロンプトのタイトルを生成（最初の行または最初の50文字）
+            title_lines = prompt_content.strip().split('\n')
+            title = title_lines[0][:50] if title_lines[0] else "実行されたプロンプト"
+            if title.startswith('#'):
+                title = title[1:].strip()
+            
+            save_prompt(f"実行履歴: {title}", prompt_content)
+    except Exception as e:
+        print(f"実行履歴保存エラー: {e}")
+    
+    return result
+
+def load_prompt_to_textbox(evt: gr.SelectData):
+    """テーブルクリック時にプロンプト内容をテキストボックスに読み込む"""
+    try:
+        if evt.index is not None and len(evt.index) >= 2:
+            # テーブルの行インデックスから prompt_id を取得
+            prompts = get_prompts()
+            if evt.index[0] < len(prompts):
+                prompt_id = prompts[evt.index[0]][0]  # 最初の列がID
+                content = get_prompt_content(prompt_id)
+                return content
+    except Exception as e:
+        print(f"プロンプト読み込みエラー: {e}")
+    return ""
+
+# データベース初期化
+init_db()
+
+with gr.Blocks() as gradio_interface:
+    gr.Markdown("# プロンプト管理システム")
+    
+    with gr.Row():
+        with gr.Column(scale=1):
+            gr.Markdown("## 📚 プロンプト一覧")
+            
+            # プロンプト一覧テーブル
+            prompt_table = gr.Dataframe(
+                headers=["ID", "タイトル", "作成日時"],
+                datatype=["number", "str", "str"],
+                value=update_prompt_display(),
+                interactive=False,
+                height=300
+            )
+            
+            # 更新ボタン
+            refresh_btn = gr.Button("🔄 一覧更新", variant="secondary")
+            
+            # プロンプト保存エリア
+            gr.Markdown("## 💾 プロンプト保存")
+            with gr.Row():
+                save_title = gr.Textbox(label="タイトル", placeholder="プロンプトのタイトルを入力")
+                save_btn = gr.Button("💾 保存", variant="primary")
+            save_result = gr.Textbox(label="保存結果", interactive=False)
+        
+        with gr.Column(scale=2):
+            gr.Markdown("## ⚡ プロンプト実行")
+            
+            # メインのプロンプト入力エリア
+            prompt_input = gr.Textbox(
+                label="プロンプト内容", 
+                lines=15,
+                value=val,
+                placeholder="プロンプトを入力するか、左の一覧からクリックして選択してください"
+            )
+            
+            with gr.Row():
+                folder_name = gr.Textbox(label="フォルダ名", value="test_folders")
+                github_token = gr.Textbox(label="GitHub Token", value="***********************", type="password")
+            
+            execute_btn = gr.Button("🚀 実行", variant="primary", size="lg")
+            result_output = gr.Textbox(label="実行結果", lines=10, interactive=False)
+    
+    # イベントハンドラー
+    prompt_table.select(
+        fn=load_prompt_to_textbox,
+        outputs=prompt_input
+    )
+    
+    refresh_btn.click(
+        fn=update_prompt_display,
+        outputs=prompt_table
+    )
+    
+    save_btn.click(
+        fn=lambda title, content: save_prompt(title, content),
+        inputs=[save_title, prompt_input],
+        outputs=save_result
+    ).then(
+        fn=update_prompt_display,
+        outputs=prompt_table
+    ).then(
+        fn=lambda: "",
+        outputs=save_title
+    )
+    
+    execute_btn.click(
+        fn=process_file_and_notify,
+        inputs=[prompt_input, folder_name, github_token],
+        outputs=result_output
+    ).then(
+        fn=update_prompt_display,
+        outputs=prompt_table
+    )

contbk/gra_10_frontend/__init__.py

@@ -0,0 +1,2 @@
+# Frontend Framework Generator
+# This module automatically generates React and Vue.js components based on AI instructions

contbk/gra_10_frontend/frontend_generator.py

@@ -0,0 +1,442 @@
+import gradio as gr
+import os
+import json
+from pathlib import Path
+
+def generate_react_component(component_name, props_description, styling_preference):
+    """
+    React コンポーネントを動的生成する関数
+    """
+    if not component_name:
+        return "コンポーネント名を入力してください", "", ""
+    
+    # React コンポーネントの基本構造を生成
+    react_jsx = f"""import React, {{ useState, useEffect }} from 'react';
+import './{{component_name}}.css';
+
+const {component_name} = (props) => {{
+    const [data, setData] = useState(null);
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {{
+        // コンポーネント初期化処理
+        console.log('{component_name} component mounted');
+    }}, []);
+
+    const handleAction = () => {{
+        setLoading(true);
+        // AI が生成したアクション処理
+        setTimeout(() => {{
+            setLoading(false);
+            console.log('Action completed');
+        }}, 1000);
+    }};
+
+    return (
+        <div className="{component_name.lower()}-container">
+            <div className="header">
+                <h2>{component_name}</h2>
+                <p>{{props_description}}</p>
+            </div>
+            
+            <div className="content">
+                {{loading ? (
+                    <div className="loading">Loading...</div>
+                ) : (
+                    <div className="main-content">
+                        <button 
+                            onClick={{handleAction}}
+                            className="action-button"
+                            disabled={{loading}}
+                        >
+                            Execute Action
+                        </button>
+                    </div>
+                )}}
+            </div>
+        </div>
+    );
+}};
+
+export default {component_name};"""
+
+    # CSS スタイルを生成
+    css_styles = f""".{component_name.lower()}-container {{
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    background: {get_background_color(styling_preference)};
+}}
+
+.header {{
+    text-align: center;
+    margin-bottom: 30px;
+}}
+
+.header h2 {{
+    color: {get_text_color(styling_preference)};
+    font-size: 2rem;
+    margin-bottom: 10px;
+}}
+
+.header p {{
+    color: {get_secondary_color(styling_preference)};
+    font-size: 1.1rem;
+}}
+
+.content {{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}}
+
+.action-button {{
+    background: {get_primary_color(styling_preference)};
+    color: white;
+    border: none;
+    padding: 12px 24px;
+    border-radius: 6px;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}}
+
+.action-button:hover {{
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}}
+
+.action-button:disabled {{
+    opacity: 0.6;
+    cursor: not-allowed;
+}}
+
+.loading {{
+    padding: 20px;
+    text-align: center;
+    font-style: italic;
+    color: {get_secondary_color(styling_preference)};
+}}
+
+@media (max-width: 768px) {{
+    .{component_name.lower()}-container {{
+        margin: 10px;
+        padding: 15px;
+    }}
+    
+    .header h2 {{
+        font-size: 1.5rem;
+    }}
+}}"""
+
+    # パッケージ.json の設定
+    package_json = {
+        "name": f"{component_name.lower()}-component",
+        "version": "1.0.0",
+        "description": f"AI generated React component: {component_name}",
+        "main": f"{component_name}.jsx",
+        "dependencies": {
+            "react": "^18.2.0",
+            "react-dom": "^18.2.0"
+        },
+        "devDependencies": {
+            "@vitejs/plugin-react": "^4.0.0",
+            "vite": "^4.0.0"
+        },
+        "scripts": {
+            "dev": "vite",
+            "build": "vite build",
+            "preview": "vite preview"
+        },
+        "ai_generated": True,
+        "created_by": "AI Auto-Generation System",
+        "component_description": props_description
+    }
+
+    return (
+        f"✅ React component '{component_name}' generated successfully!",
+        react_jsx,
+        css_styles,
+        json.dumps(package_json, indent=2)
+    )
+
+def get_background_color(style):
+    styles = {
+        "Modern": "#ffffff",
+        "Dark": "#1a1a1a", 
+        "Colorful": "#f0f8ff",
+        "Minimal": "#fafafa"
+    }
+    return styles.get(style, "#ffffff")
+
+def get_text_color(style):
+    styles = {
+        "Modern": "#2c3e50",
+        "Dark": "#ffffff",
+        "Colorful": "#2c3e50", 
+        "Minimal": "#333333"
+    }
+    return styles.get(style, "#2c3e50")
+
+def get_primary_color(style):
+    styles = {
+        "Modern": "#3498db",
+        "Dark": "#e74c3c",
+        "Colorful": "#9b59b6",
+        "Minimal": "#95a5a6"
+    }
+    return styles.get(style, "#3498db")
+
+def get_secondary_color(style):
+    styles = {
+        "Modern": "#7f8c8d",
+        "Dark": "#bdc3c7",
+        "Colorful": "#34495e",
+        "Minimal": "#666666"
+    }
+    return styles.get(style, "#7f8c8d")
+
+def generate_vue_component(component_name, props_description, styling_preference):
+    """
+    Vue.js コンポーネントを動的生成する関数
+    """
+    if not component_name:
+        return "コンポーネント名を入力してください", ""
+    
+    vue_component = f"""<template>
+  <div class="{component_name.lower()}-container">
+    <div class="header">
+      <h2>{component_name}</h2>
+      <p>{props_description}</p>
+    </div>
+    
+    <div class="content">
+      <div v-if="loading" class="loading">
+        Loading...
+      </div>
+      <div v-else class="main-content">
+        <button 
+          @click="handleAction"
+          class="action-button"
+          :disabled="loading"
+        >
+          Execute Action
+        </button>
+        
+        <div v-if="result" class="result">
+          {{{{ result }}}}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {{ ref, onMounted }} from 'vue'
+
+export default {{
+  name: '{component_name}',
+  props: {{
+    initialData: {{
+      type: Object,
+      default: () => ({{}})
+    }}
+  }},
+  setup(props) {{
+    const loading = ref(false)
+    const result = ref(null)
+    const data = ref(props.initialData)
+
+    const handleAction = async () => {{
+      loading.value = true
+      try {{
+        // AI が生成したアクション処理
+        await new Promise(resolve => setTimeout(resolve, 1000))
+        result.value = 'Action completed successfully!'
+      }} catch (error) {{
+        result.value = 'Action failed: ' + error.message
+      }} finally {{
+        loading.value = false
+      }}
+    }}
+
+    onMounted(() => {{
+      console.log('{component_name} component mounted')
+    }})
+
+    return {{
+      loading,
+      result,
+      data,
+      handleAction
+    }}
+  }}
+}}
+</script>
+
+<style scoped>
+.{component_name.lower()}-container {{
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  background: {get_background_color(styling_preference)};
+}}
+
+.header {{
+  text-align: center;
+  margin-bottom: 30px;
+}}
+
+.header h2 {{
+  color: {get_text_color(styling_preference)};
+  font-size: 2rem;
+  margin-bottom: 10px;
+}}
+
+.header p {{
+  color: {get_secondary_color(styling_preference)};
+  font-size: 1.1rem;
+}}
+
+.content {{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}}
+
+.action-button {{
+  background: {get_primary_color(styling_preference)};
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  border-radius: 6px;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}}
+
+.action-button:hover {{
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}}
+
+.action-button:disabled {{
+  opacity: 0.6;
+  cursor: not-allowed;
+}}
+
+.loading {{
+  padding: 20px;
+  text-align: center;
+  font-style: italic;
+  color: {get_secondary_color(styling_preference)};
+}}
+
+.result {{
+  margin-top: 20px;
+  padding: 15px;
+  border-radius: 6px;
+  background: rgba(52, 152, 219, 0.1);
+  color: {get_text_color(styling_preference)};
+  text-align: center;
+}}
+
+@media (max-width: 768px) {{
+  .{component_name.lower()}-container {{
+    margin: 10px;
+    padding: 15px;
+  }}
+  
+  .header h2 {{
+    font-size: 1.5rem;
+  }}
+}}
+</style>"""
+
+    return f"✅ Vue component '{component_name}' generated successfully!", vue_component
+
+# AI指示による自動検出のための必須オブジェクト
+with gr.Blocks(title="Frontend Framework Generator") as gradio_interface:
+    gr.Markdown("# 🚀 Frontend Framework Auto-Generator")
+    gr.Markdown("AIがReact・Vue.jsコンポーネントを自動生成します")
+    
+    with gr.Tab("⚛️ React Generator"):
+        gr.Markdown("### React Component Generator")
+        
+        with gr.Row():
+            react_name = gr.Textbox(
+                label="Component Name",
+                placeholder="MyAwesomeComponent",
+                value="WeatherWidget"
+            )
+            react_props = gr.Textbox(
+                label="Component Description", 
+                placeholder="天気情報を表示するウィジェット",
+                value="Interactive weather information display"
+            )
+            react_style = gr.Dropdown(
+                label="Styling Preference",
+                choices=["Modern", "Dark", "Colorful", "Minimal"],
+                value="Modern"
+            )
+        
+        react_generate_btn = gr.Button("Generate React Component", variant="primary")
+        
+        with gr.Row():
+            react_status = gr.Textbox(label="Generation Status", interactive=False)
+        
+        with gr.Tabs():
+            with gr.Tab("JSX Code"):
+                react_jsx_output = gr.Code(label="React Component", language="javascript")
+            with gr.Tab("CSS Styles"):
+                react_css_output = gr.Code(label="CSS Styles", language="css")
+            with gr.Tab("Package.json"):
+                react_package_output = gr.Code(label="Package Configuration", language="json")
+    
+    with gr.Tab("🔧 Vue.js Generator"):
+        gr.Markdown("### Vue.js Component Generator")
+        
+        with gr.Row():
+            vue_name = gr.Textbox(
+                label="Component Name",
+                placeholder="MyVueComponent", 
+                value="DataDashboard"
+            )
+            vue_props = gr.Textbox(
+                label="Component Description",
+                placeholder="データ可視化ダッシュボード",
+                value="Interactive data visualization dashboard"
+            )
+            vue_style = gr.Dropdown(
+                label="Styling Preference",
+                choices=["Modern", "Dark", "Colorful", "Minimal"],
+                value="Modern"
+            )
+        
+        vue_generate_btn = gr.Button("Generate Vue Component", variant="primary")
+        
+        with gr.Row():
+            vue_status = gr.Textbox(label="Generation Status", interactive=False)
+        
+        vue_output = gr.Code(label="Vue.js Component", language="javascript")
+    
+    # Event bindings
+    react_generate_btn.click(
+        fn=generate_react_component,
+        inputs=[react_name, react_props, react_style],
+        outputs=[react_status, react_jsx_output, react_css_output, react_package_output]
+    )
+    
+    vue_generate_btn.click(
+        fn=generate_vue_component,
+        inputs=[vue_name, vue_props, vue_style], 
+        outputs=[vue_status, vue_output]
+    )
+
+# テスト用のスタンドアロン実行（コメントアウト - 自動検出システムとの競合を防ぐため）
+# if __name__ == "__main__":
+#     gradio_interface.launch()

contbk/gra_11_multimodal/__init__.py

@@ -0,0 +1,2 @@
+# Multimodal UI Generator
+# This module converts images to frontend code using AI analysis

contbk/gra_11_multimodal/image_to_ui.py

@@ -0,0 +1,1421 @@
+import gradio as gr
+import base64
+import io
+from PIL import Image
+import json
+import re
+
+def analyze_image_and_generate_ui(image, description, framework_choice):
+    """
+    アップロードされた画像を解析してUIコードを自動生成
+    """
+    if image is None:
+        return "画像をアップロードしてください", "", "", ""
+    
+    # 画像解析（実際のAIモデルの代わりにルールベースで実装）
+    analysis_result = analyze_ui_elements(image)
+    
+    # 選択されたフレームワークに応じてコード生成
+    if framework_choice == "React":
+        status, jsx_code, css_code = generate_react_from_analysis(analysis_result, description)
+        return status, jsx_code, css_code, ""
+    elif framework_choice == "Vue":
+        status, vue_code = generate_vue_from_analysis(analysis_result, description)
+        return status, vue_code, "", ""
+    elif framework_choice == "HTML/CSS":
+        status, html_code, css_code = generate_html_from_analysis(analysis_result, description)
+        return status, html_code, css_code, ""
+    else:
+        return "フレームワークを選択してください", "", "", ""
+
+def analyze_ui_elements(image):
+    """
+    画像からUI要素を動的に検出・分析
+    実際の画像コンテンツに基づいてUIパターンを決定
+    """
+    import numpy as np
+    from collections import Counter
+    
+    width, height = image.size
+    
+    # より詳細な画像分析
+    analysis = {
+        "image_size": (width, height),
+        "aspect_ratio": width / height,
+        "detected_elements": [],
+        "color_scheme": "modern",
+        "layout_type": "grid" if width > height else "vertical"
+    }
+    
+    # カラーパレット抽出
+    image_array = np.array(image)
+    if len(image_array.shape) == 3:
+        # カラー画像の場合
+        pixels = image_array.reshape(-1, 3)
+        # 主要な色を抽出（K-means的なアプローチの簡易版）
+        unique_colors = []
+        for i in range(0, len(pixels), max(1, len(pixels)//100)):  # サンプリング
+            color = pixels[i]
+            unique_colors.append(tuple(color))
+        
+        color_counts = Counter(unique_colors)
+        dominant_colors = color_counts.most_common(5)
+        
+        # 主要色に基づいてテーマ決定
+        avg_r = sum([color[0][0] * color[1] for color in dominant_colors]) / sum([color[1] for color in dominant_colors])
+        avg_g = sum([color[0][1] * color[1] for color in dominant_colors]) / sum([color[1] for color in dominant_colors])
+        avg_b = sum([color[0][2] * color[1] for color in dominant_colors]) / sum([color[1] for color in dominant_colors])
+        
+        # HSVベースの分析
+        max_rgb = max(avg_r, avg_g, avg_b)
+        min_rgb = min(avg_r, avg_g, avg_b)
+        saturation = (max_rgb - min_rgb) / max_rgb if max_rgb > 0 else 0
+        
+    else:
+        # グレースケール画像
+        avg_r = avg_g = avg_b = np.mean(image_array)
+        saturation = 0
+    
+    # 明度計算
+    brightness = (avg_r + avg_g + avg_b) / 3
+    
+    # 画像の複雑さを分析（エッジ検出的アプローチ）
+    grayscale = image.convert('L')
+    gray_array = np.array(grayscale)
+    
+    # 簡易エッジ検出
+    edges = 0
+    for i in range(1, gray_array.shape[0]-1):
+        for j in range(1, gray_array.shape[1]-1):
+            grad_x = abs(int(gray_array[i+1, j]) - int(gray_array[i-1, j]))
+            grad_y = abs(int(gray_array[i, j+1]) - int(gray_array[i, j-1]))
+            if grad_x + grad_y > 50:  # エッジ閾値
+                edges += 1
+    
+    complexity = edges / (width * height)
+    
+    # 動的テーマ決定
+    if brightness < 60:
+        analysis["theme"] = "dark"
+        analysis["bg_color"] = f"#1a1a1a"
+        analysis["text_color"] = "#ffffff"
+        analysis["accent_color"] = f"#{int(avg_r*0.8):02x}{int(avg_g*0.8):02x}{int(avg_b*0.8):02x}"
+    elif brightness > 200:
+        analysis["theme"] = "light" 
+        analysis["bg_color"] = "#ffffff"
+        analysis["text_color"] = "#333333"
+        analysis["accent_color"] = f"#{int(avg_r*0.6):02x}{int(avg_g*0.6):02x}{int(avg_b*0.6):02x}"
+    else:
+        analysis["theme"] = "modern"
+        analysis["bg_color"] = f"#{int(255-brightness*0.3):02x}{int(255-brightness*0.3):02x}{int(255-brightness*0.2):02x}"
+        analysis["text_color"] = "#2c3e50"
+        analysis["accent_color"] = f"#{int(avg_r):02x}{int(avg_g):02x}{int(avg_b):02x}"
+    
+    # 複雑さに基づくレイアウト決定
+    if complexity > 0.1:
+        analysis["layout_type"] = "complex_grid"
+        analysis["components"] = ["header", "sidebar", "main_content", "footer", "cards"]
+    elif complexity > 0.05:
+        analysis["layout_type"] = "standard_grid"
+        analysis["components"] = ["header", "navigation", "content_grid", "footer"]
+    else:
+        analysis["layout_type"] = "simple"
+        analysis["components"] = ["header", "main_content", "actions"]
+    
+    # 色の彩度に基づく動的要素決定
+    if saturation > 0.5:
+        analysis["ui_style"] = "vibrant"
+        analysis["has_animations"] = True
+        analysis["gradient_style"] = "bold"
+    elif saturation > 0.2:
+        analysis["ui_style"] = "balanced"
+        analysis["has_animations"] = True
+        analysis["gradient_style"] = "subtle"
+    else:
+        analysis["ui_style"] = "minimal"
+        analysis["has_animations"] = False
+        analysis["gradient_style"] = "monochrome"
+    
+    # アスペクト比に基づくコンポーネント配置
+    if width > height * 1.5:
+        analysis["layout_orientation"] = "horizontal"
+        analysis["nav_style"] = "horizontal"
+    elif height > width * 1.5:
+        analysis["layout_orientation"] = "vertical"
+        analysis["nav_style"] = "vertical"
+    else:
+        analysis["layout_orientation"] = "square"
+        analysis["nav_style"] = "compact"
+    
+    # 動的UI要素リスト生成
+    base_elements = ["header", "navigation"]
+    
+    if complexity > 0.08:
+        base_elements.extend(["sidebar", "search", "filters"])
+    if saturation > 0.3:
+        base_elements.extend(["hero_section", "call_to_action"])
+    if width > 800:
+        base_elements.extend(["content_grid", "cards"])
+    else:
+        base_elements.extend(["content_list"])
+        
+    analysis["detected_elements"] = [
+        {"type": elem, "confidence": min(0.9, complexity + saturation + 0.3)}
+        for elem in base_elements
+    ]
+    
+    # メタデータ追加
+    analysis["complexity_score"] = complexity
+    analysis["saturation_score"] = saturation
+    analysis["brightness_score"] = brightness / 255
+    analysis["dominant_color"] = f"#{int(avg_r):02x}{int(avg_g):02x}{int(avg_b):02x}"
+    
+    return analysis
+
+def generate_card_components(analysis, card_count=4):
+    """動的なカードコンポーネント文字列を生成"""
+    theme = analysis.get("theme", "modern")
+    complexity = analysis.get("complexity_score", 0.05)
+    ui_style = analysis.get("ui_style", "minimal")
+    accent_color = analysis.get("accent_color", "#007bff")
+    
+    cards = []
+    
+    # 複雑さに基づいてカードの内容を動的生成
+    card_types = [
+        {
+            "title": f"{theme.title()} Dashboard",
+            "description": f"Image complexity: {complexity:.2f} - {ui_style} style interface",
+            "action": "dashboard",
+            "icon": "📊"
+        },
+        {
+            "title": "Smart Analytics",
+            "description": f"AI-detected layout: {analysis.get('layout_type', 'grid')}",
+            "action": "analytics", 
+            "icon": "🔍"
+        },
+        {
+            "title": "Dynamic Controls",
+            "description": f"Theme: {theme} | Animations: {analysis.get('has_animations', False)}",
+            "action": "controls",
+            "icon": "⚙️"
+        },
+        {
+            "title": "Visual Elements",
+            "description": f"Dominant color: {analysis.get('dominant_color', '#333')}",
+            "action": "visual",
+            "icon": "🎨"
+        },
+        {
+            "title": "User Interface",
+            "description": f"Navigation: {analysis.get('nav_style', 'horizontal')}",
+            "action": "interface",
+            "icon": "🖥️"
+        },
+        {
+            "title": "Content Layout",
+            "description": f"Aspect ratio: {analysis.get('aspect_ratio', 1):.2f}",
+            "action": "layout",
+            "icon": "📱"
+        }
+    ]
+    
+    for i in range(min(card_count, len(card_types))):
+        card = card_types[i]
+        card_jsx = f"""
+                    <div className="feature-card dynamic-card-{i}">
+                        <div className="card-icon">{card['icon']}</div>
+                        <h3>{card['title']}</h3>
+                        <p>{card['description']}</p>
+                        <button 
+                            onClick={{() => handleAction('{card['action']}')}}
+                            disabled={{isLoading}}
+                            className="action-button"
+                            style={{{{background: '{accent_color}'}}}}
+                        >
+                            {{isLoading ? 'Processing...' : 'Execute'}}
+                        </button>
+                    </div>"""
+        cards.append(card_jsx)
+    
+    return ''.join(cards)
+
+def generate_react_from_analysis(analysis, description):
+    """
+    分析結果からReactコンポーネントを動的生成
+    """
+    component_name = "ImageGeneratedComponent"
+    
+    # 分析結果から動的値を取得
+    theme = analysis.get("theme", "modern")
+    bg_color = analysis.get("bg_color", "#f8f9fa")
+    text_color = analysis.get("text_color", "#333333")
+    accent_color = analysis.get("accent_color", "#007bff")
+    ui_style = analysis.get("ui_style", "minimal")
+    has_animations = analysis.get("has_animations", False)
+    complexity = analysis.get("complexity_score", 0.05)
+    layout_type = analysis.get("layout_type", "grid")
+    
+    # 動的グラデーション
+    gradient_bg = f"linear-gradient(135deg, {accent_color}, {bg_color})"
+    if theme == "dark":
+        gradient_bg = f"linear-gradient(135deg, #2c3e50, #34495e)"
+    elif theme == "light":
+        gradient_bg = f"linear-gradient(135deg, #ecf0f1, #bdc3c7)"
+    
+    # 複雑さに基づくレイアウト決定
+    grid_columns = "repeat(auto-fit, minmax(300px, 1fr))" if complexity > 0.1 else "repeat(auto-fit, minmax(250px, 1fr))"
+    card_count = 6 if complexity > 0.08 else 4 if complexity > 0.05 else 2
+    
+    # 動的カードコンポーネント生成
+    dynamic_cards = generate_card_components(analysis, card_count)
+    
+    # アニメーション用CSS
+    animation_styles = ""
+    if has_animations:
+        animation_styles = """
+            @keyframes fadeInUp {
+                from { opacity: 0; transform: translateY(30px); }
+                to { opacity: 1; transform: translateY(0); }
+            }
+            @keyframes slideInLeft {
+                from { opacity: 0; transform: translateX(-50px); }
+                to { opacity: 1; transform: translateX(0); }
+            }
+            .animate-fade { animation: fadeInUp 0.6s ease-out; }
+            .animate-slide { animation: slideInLeft 0.4s ease-out; }
+        """
+    
+    jsx_template = f"""import React, {{ useState, useEffect }} from 'react';
+import './ImageGeneratedComponent.css';
+
+const {component_name} = () => {{
+    const [activeTab, setActiveTab] = useState('home');
+    const [isLoading, setIsLoading] = useState(false);
+    const [analysisData, setAnalysisData] = useState(null);
+
+    useEffect(() => {{
+        // 画像分析データをシミュレート
+        setAnalysisData({{
+            theme: '{theme}',
+            complexity: {complexity:.3f},
+            uiStyle: '{ui_style}',
+            layoutType: '{layout_type}',
+            dominantColor: '{analysis.get("dominant_color", "#333")}',
+            hasAnimations: {str(has_animations).lower()}
+        }});
+    }}, []);
+
+    const handleAction = (action) => {{
+        setIsLoading(true);
+        console.log(`Executing AI-detected action: ${{action}}`);
+        
+        // AIが画像から推定したアクション処理
+        setTimeout(() => {{
+            setIsLoading(false);
+            console.log(`Action completed: ${{action}}`);
+        }}, 1000 + Math.random() * 2000);
+    }};
+
+    const tabs = ['home', 'features', 'analytics', 'settings'];
+
+    return (
+        <div className="image-generated-container">
+            <header className="app-header {('animate-fade' if has_animations else '')}">
+                <h1>AI Generated {theme.title()} UI</h1>
+                <p className="description">{description}</p>
+                {{analysisData && (
+                    <div className="analysis-info">
+                        <span>Complexity: {complexity:.2f}</span>
+                        <span>Style: {ui_style}</span>
+                        <span>Layout: {layout_type}</span>
+                    </div>
+                )}}
+            </header>
+
+            <nav className="app-navigation {('animate-slide' if has_animations else '')}">
+                {{tabs.map(tab => (
+                    <button
+                        key={{tab}}
+                        onClick={{() => setActiveTab(tab)}}
+                        className={{`nav-button ${{activeTab === tab ? 'active' : ''}}`}}
+                    >
+                        {{tab.charAt(0).toUpperCase() + tab.slice(1)}}
+                    </button>
+                ))}}
+            </nav>
+
+            <main className="app-main">
+                <div className="content-grid" style={{{{
+                    gridTemplateColumns: '{grid_columns}',
+                    gap: '{("2rem" if complexity > 0.1 else "1.5rem")}'
+                }}}}>
+                    {dynamic_cards}
+                </div>
+                
+                {{theme === 'dark' && (
+                    <div className="dark-mode-indicator">
+                        🌙 Dark theme detected from image
+                    </div>
+                )}}
+                
+                {{complexity > 0.1 && (
+                    <div className="complexity-notice">
+                        ⚡ High complexity interface - Advanced features enabled
+                    </div>
+                )}}
+            </main>
+
+            <footer className="app-footer">
+                <p>Generated by AI from image analysis • Theme: {theme} • Style: {ui_style}</p>
+                <small>Complexity Score: {complexity:.3f} | Animations: {{analysis.get("has_animations", False)}}</small>
+            </footer>
+        </div>
+    );
+}};
+
+export default {component_name};"""
+
+    # 動的CSS生成
+    css_template = f""".image-generated-container {{
+    min-height: 100vh;
+    background: {bg_color};
+    color: {text_color};
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    transition: all 0.3s ease;
+}}
+
+{animation_styles}
+
+.app-header {{
+    text-align: center;
+    padding: 40px 20px;
+    background: {gradient_bg};
+    color: white;
+    border-bottom: 3px solid {accent_color};
+}}
+
+.app-header h1 {{
+    font-size: {("3rem" if complexity > 0.1 else "2.5rem")};
+    margin-bottom: 10px;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+}}
+
+.description {{
+    font-size: 1.1rem;
+    margin: 10px 0;
+    opacity: 0.9;
+}}
+
+.analysis-info {{
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin-top: 15px;
+    font-size: 0.9rem;
+}}
+
+.analysis-info span {{
+    background: rgba(255,255,255,0.2);
+    padding: 5px 12px;
+    border-radius: 15px;
+    backdrop-filter: blur(10px);
+}}
+
+.app-navigation {{
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    padding: 20px;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    flex-wrap: wrap;
+}}
+
+.nav-button {{
+    padding: 12px 24px;
+    border: none;
+    border-radius: 25px;
+    background: transparent;
+    color: {text_color};
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-weight: 500;
+    font-size: 1rem;
+}}
+
+.nav-button:hover,
+.nav-button.active {{
+    background: {accent_color};
+    color: white;
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+}}
+
+.app-main {{
+    max-width: {("1400px" if complexity > 0.1 else "1200px")};
+    margin: 0 auto;
+    padding: 40px 20px;
+}}
+
+.content-grid {{
+    display: grid;
+    margin-top: 30px;
+}}
+
+.feature-card {{
+    background: {("linear-gradient(135deg, #fff, #f8f9fa)" if theme == "light" else "#2c3e50" if theme == "dark" else "white")};
+    padding: 30px;
+    border-radius: 15px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, {("0.3" if theme == "dark" else "0.1")});
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    border: 1px solid {accent_color}22;
+}}
+
+.feature-card:hover {{
+    transform: translateY(-8px);
+    box-shadow: 0 15px 35px rgba(0, 0, 0, {("0.4" if theme == "dark" else "0.15")});
+}}
+
+.card-icon {{
+    font-size: 2.5rem;
+    margin-bottom: 15px;
+    display: block;
+}}
+
+.feature-card h3 {{
+    color: {accent_color};
+    margin-bottom: 15px;
+    font-size: 1.5rem;
+}}
+
+.feature-card p {{
+    color: {text_color}88;
+    line-height: 1.6;
+    margin-bottom: 20px;
+}}
+
+.action-button {{
+    background: {accent_color};
+    color: white;
+    border: none;
+    padding: 12px 25px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    margin-top: 15px;
+    font-size: 1rem;
+}}
+
+.action-button:hover {{
+    transform: translateY(-2px);
+    box-shadow: 0 8px 20px {accent_color}66;
+    filter: brightness(110%);
+}}
+
+.action-button:disabled {{
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
+}}
+
+.dark-mode-indicator,
+.complexity-notice {{
+    text-align: center;
+    padding: 15px;
+    margin: 30px 0;
+    background: {accent_color}11;
+    border-radius: 10px;
+    border-left: 4px solid {accent_color};
+}}
+
+.app-footer {{
+    text-align: center;
+    padding: 30px;
+    background: {bg_color};
+    border-top: 1px solid {accent_color}22;
+    margin-top: 50px;
+}}
+
+.app-footer small {{
+    display: block;
+    margin-top: 10px;
+    opacity: 0.7;
+}}
+
+@media (max-width: 768px) {{
+    .app-navigation {{
+        flex-direction: column;
+        align-items: center;
+    }}
+    
+    .content-grid {{
+        grid-template-columns: 1fr !important;
+    }}
+    
+    .app-header h1 {{
+        font-size: 2rem;
+    }}
+    
+    .analysis-info {{
+        flex-direction: column;
+        gap: 10px;
+    }}
+}}"""
+
+    # プレースホルダーの置換
+    jsx_code = jsx_template
+    css_code = css_template
+
+    return f"✅ Dynamic React component generated! Theme: {theme}, Complexity: {complexity:.2f}, Style: {ui_style}", jsx_code, css_code
+
+def generate_vue_from_analysis(analysis, description):
+    """
+    分析結果からVue.jsコンポーネントを動的生成
+    """
+    
+    # 分析結果から動的値を取得
+    theme = analysis.get("theme", "modern")
+    bg_color = analysis.get("bg_color", "#f8f9fa")
+    text_color = analysis.get("text_color", "#333333")
+    accent_color = analysis.get("accent_color", "#42b883")
+    ui_style = analysis.get("ui_style", "minimal")
+    has_animations = analysis.get("has_animations", False)
+    complexity = analysis.get("complexity_score", 0.05)
+    layout_type = analysis.get("layout_type", "grid")
+    components = analysis.get("components", ["header", "main_content"])
+    
+    # 複雑さに基づいて機能を動的生成
+    features = []
+    feature_templates = [
+        {
+            "title": f"{theme.title()} Dashboard",
+            "description": f"Image complexity: {complexity:.2f} - {ui_style} style",
+            "action": "dashboard",
+            "variant": "primary",
+            "icon": "📊"
+        },
+        {
+            "title": "Smart Analytics", 
+            "description": f"Layout: {layout_type} | Theme: {theme}",
+            "action": "analytics",
+            "variant": "secondary",
+            "icon": "🔍"
+        },
+        {
+            "title": "Dynamic Controls",
+            "description": f"Animations: {has_animations} | Style: {ui_style}",
+            "action": "controls", 
+            "variant": "primary",
+            "icon": "⚙️"
+        },
+        {
+            "title": "Visual Elements",
+            "description": f"Color: {analysis.get('dominant_color', '#333')}",
+            "action": "visual",
+            "variant": "accent",
+            "icon": "🎨"
+        }
+    ]
+    
+    # 複雑さに基づいて表示する機能数を決定
+    feature_count = 4 if complexity > 0.08 else 3 if complexity > 0.05 else 2
+    features = feature_templates[:feature_count]
+    
+    # アニメーション設定
+    transition_class = "transition-all duration-300" if has_animations else ""
+    
+    vue_template = f"""<template>
+  <div class="image-generated-container">
+    <header class="app-header {transition_class}">
+      <h1>AI Generated {theme.title()} Vue UI</h1>
+      <p class="description">{description}</p>
+      <div class="analysis-info" v-if="analysisData">
+        <span>Complexity: {{{{ analysisData.complexity.toFixed(2) }}}}</span>
+        <span>Style: {{{{ analysisData.uiStyle }}}}</span>
+        <span>Layout: {{{{ analysisData.layoutType }}}}</span>
+      </div>
+    </header>
+
+    <nav class="app-navigation {transition_class}">
+      <button
+        v-for="tab in tabs"
+        :key="tab"
+        @click="setActiveTab(tab)"
+        :class="['nav-button', {{ active: activeTab === tab }}]"
+        :style="tabButtonStyle"
+      >
+        {{{{ tab.charAt(0).toUpperCase() + tab.slice(1) }}}}
+      </button>
+    </nav>
+
+    <main class="app-main">
+      <div class="content-grid" :style="gridStyle">
+        <div 
+          v-for="feature in features"
+          :key="feature.id"
+          :class="['feature-card', '{transition_class}', `card-${{feature.variant}}`]"
+        >
+          <div class="card-icon">{{{{ feature.icon }}}}</div>
+          <h3>{{{{ feature.title }}}}</h3>
+          <p>{{{{ feature.description }}}}</p>
+          <button 
+            @click="handleAction(feature.action)"
+            :disabled="isLoading"
+            :class="['action-button', feature.variant]"
+            :style="getButtonStyle(feature.variant)"
+          >
+            {{{{ isLoading ? 'Processing...' : 'Execute' }}}}
+          </button>
+        </div>
+      </div>
+      
+      <div v-if="theme === 'dark'" class="theme-indicator">
+        🌙 Dark theme detected from image analysis
+      </div>
+      
+      <div v-if="complexity > 0.1" class="complexity-notice">
+        ⚡ High complexity interface - Advanced features enabled
+      </div>
+    </main>
+
+    <footer class="app-footer">
+      <p>Generated by AI from image analysis using Vue.js</p>
+      <small>Theme: {theme} | Style: {ui_style} | Complexity: {{{{ complexity.toFixed(3) }}}}</small>
+    </footer>
+  </div>
+</template>
+
+<script>
+import {{ ref, reactive, computed, onMounted }} from 'vue'
+
+export default {{
+  name: 'ImageGeneratedComponent',
+  setup() {{
+    const activeTab = ref('home')
+    const isLoading = ref(false)
+    const complexity = ref({complexity})
+    
+    const tabs = ['home', 'features', 'analytics', 'settings']
+    
+    const analysisData = reactive({{
+      theme: '{theme}',
+      complexity: {complexity},
+      uiStyle: '{ui_style}',
+      layoutType: '{layout_type}',
+      dominantColor: '{analysis.get("dominant_color", "#333")}',
+      hasAnimations: {str(has_animations).lower()}
+    }})
+    
+    const features = reactive({features})
+
+    const gridStyle = computed(() => ({{
+      gridTemplateColumns: '{("repeat(auto-fit, minmax(300px, 1fr))" if complexity > 0.1 else "repeat(auto-fit, minmax(250px, 1fr))")}',
+      gap: '{("2rem" if complexity > 0.1 else "1.5rem")}'
+    }}))
+    
+    const tabButtonStyle = computed(() => ({{
+      padding: '12px 24px',
+      borderRadius: '25px',
+      border: 'none',
+      backgroundColor: 'transparent',
+      color: '{text_color}',
+      cursor: 'pointer',
+      transition: 'all 0.3s ease',
+      fontWeight: '500'
+    }}))
+
+    const setActiveTab = (tab) => {{
+      activeTab.value = tab
+    }}
+
+    const handleAction = (action) => {{
+      isLoading.value = true
+      console.log(`Executing AI-detected action: ${{action}}`)
+      
+      setTimeout(() => {{
+        isLoading.value = false
+        console.log(`Action completed: ${{action}}`)
+      }}, 1000 + Math.random() * 2000)
+    }}
+    
+    const getButtonStyle = (variant) => {{
+      const baseStyle = {{
+        border: 'none',
+        padding: '12px 25px',
+        borderRadius: '8px',
+        cursor: 'pointer',
+        fontWeight: '600',
+        transition: 'all 0.3s ease',
+        marginTop: '15px',
+        color: 'white'
+      }}
+      
+      switch(variant) {{
+        case 'primary':
+          return {{ ...baseStyle, background: '{accent_color}' }}
+        case 'secondary':
+          return {{ ...baseStyle, background: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)', color: '#8b4513' }}
+        case 'accent':
+          return {{ ...baseStyle, background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' }}
+        default:
+          return {{ ...baseStyle, background: '{accent_color}' }}
+      }}
+    }}
+
+    onMounted(() => {{
+      console.log('Vue component mounted with analysis data:', analysisData)
+    }})
+
+    return {{
+      activeTab,
+      isLoading,
+      complexity,
+      tabs,
+      features,
+      analysisData,
+      gridStyle,
+      tabButtonStyle,
+      setActiveTab,
+      handleAction,
+      getButtonStyle
+    }}
+  }}
+}}
+</script>
+
+<style scoped>
+.image-generated-container {{
+  min-height: 100vh;
+  background: {bg_color};
+  color: {text_color};
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}}
+
+{("@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }" if has_animations else "")}
+{(".transition-all { animation: fadeInUp 0.6s ease-out; }" if has_animations else "")}
+
+.app-header {{
+  text-align: center;
+  padding: 40px 20px;
+  background: linear-gradient(135deg, {accent_color} 0%, #35495e 100%);
+  color: white;
+  border-bottom: 3px solid {accent_color};
+}}
+
+.app-header h1 {{
+  font-size: {("3rem" if complexity > 0.1 else "2.5rem")};
+  margin-bottom: 10px;
+  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+}}
+
+.description {{
+  font-size: 1.1rem;
+  margin: 10px 0;
+  opacity: 0.9;
+}}
+
+.analysis-info {{
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  margin-top: 15px;
+  font-size: 0.9rem;
+  flex-wrap: wrap;
+}}
+
+.analysis-info span {{
+  background: rgba(255,255,255,0.2);
+  padding: 5px 12px;
+  border-radius: 15px;
+  backdrop-filter: blur(10px);
+}}
+
+.app-navigation {{
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  padding: 20px;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  flex-wrap: wrap;
+}}
+
+.nav-button:hover,
+.nav-button.active {{
+  background: {accent_color} !important;
+  color: white !important;
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+}}
+
+.app-main {{
+  max-width: {("1400px" if complexity > 0.1 else "1200px")};
+  margin: 0 auto;
+  padding: 40px 20px;
+}}
+
+.content-grid {{
+  display: grid;
+  margin-top: 30px;
+}}
+
+.feature-card {{
+  background: {("linear-gradient(135deg, #fff, #f8f9fa)" if theme == "light" else "#2c3e50" if theme == "dark" else "white")};
+  padding: 30px;
+  border-radius: 15px;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, {("0.3" if theme == "dark" else "0.1")});
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  border: 1px solid {accent_color}22;
+}}
+
+.feature-card:hover {{
+  transform: translateY(-8px);
+  box-shadow: 0 15px 35px rgba(0, 0, 0, {("0.4" if theme == "dark" else "0.15")});
+}}
+
+.card-icon {{
+  font-size: 2.5rem;
+  margin-bottom: 15px;
+  display: block;
+}}
+
+.feature-card h3 {{
+  color: {accent_color};
+  margin-bottom: 15px;
+  font-size: 1.5rem;
+}}
+
+.feature-card p {{
+  color: {text_color}88;
+  line-height: 1.6;
+  margin-bottom: 20px;
+}}
+
+.action-button:hover {{
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(66, 184, 131, 0.4);
+  filter: brightness(110%);
+}}
+
+.action-button:disabled {{
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+}}
+
+.theme-indicator,
+.complexity-notice {{
+  text-align: center;
+  padding: 15px;
+  margin: 30px 0;
+  background: {accent_color}11;
+  border-radius: 10px;
+  border-left: 4px solid {accent_color};
+}}
+
+.app-footer {{
+  text-align: center;
+  padding: 30px;
+  background: {bg_color};
+  border-top: 1px solid {accent_color}22;
+  margin-top: 50px;
+}}
+
+.app-footer small {{
+  display: block;
+  margin-top: 10px;
+  opacity: 0.7;
+}}
+
+@media (max-width: 768px) {{
+  .app-navigation {{
+    flex-direction: column;
+    align-items: center;
+  }}
+  
+  .content-grid {{
+    grid-template-columns: 1fr !important;
+  }}
+  
+  .app-header h1 {{
+    font-size: 2rem;
+  }}
+  
+  .analysis-info {{
+    flex-direction: column;
+    gap: 10px;
+  }}
+}}
+</style>"""
+
+    return f"✅ Dynamic Vue.js component generated! Theme: {theme}, Complexity: {complexity:.2f}, Style: {ui_style}", vue_template
+
+def generate_html_from_analysis(analysis, description):
+    """
+    分析結果からHTML/CSSを動的生成
+    """
+    
+    # 分析結果から動的値を取得
+    theme = analysis.get("theme", "modern")
+    bg_color = analysis.get("bg_color", "#f8f9fa")
+    text_color = analysis.get("text_color", "#333333")
+    accent_color = analysis.get("accent_color", "#007bff")
+    ui_style = analysis.get("ui_style", "minimal")
+    has_animations = analysis.get("has_animations", False)
+    complexity = analysis.get("complexity_score", 0.05)
+    layout_type = analysis.get("layout_type", "grid")
+    
+    # 複雑さに基づいて機能カードを生成
+    feature_cards = []
+    feature_data = [
+        {
+            "title": f"{theme.title()} Dashboard",
+            "description": f"Image complexity: {complexity:.2f} - {ui_style} style",
+            "action": "dashboard",
+            "icon": "📊"
+        },
+        {
+            "title": "Smart Analytics",
+            "description": f"Layout: {layout_type} | Theme: {theme}",
+            "action": "analytics", 
+            "icon": "🔍"
+        },
+        {
+            "title": "Dynamic Controls",
+            "description": f"Animations: {has_animations} | Navigation: {analysis.get('nav_style', 'horizontal')}",
+            "action": "controls",
+            "icon": "⚙️"
+        },
+        {
+            "title": "Visual Elements",
+            "description": f"Dominant color: {analysis.get('dominant_color', '#333')} | Brightness: {analysis.get('brightness_score', 0.5):.2f}",
+            "action": "visual",
+            "icon": "🎨"
+        }
+    ]
+    
+    # 複雑さに基づいてカード数を決定
+    card_count = 4 if complexity > 0.08 else 3 if complexity > 0.05 else 2
+    
+    for i, feature in enumerate(feature_data[:card_count]):
+        card_html = f"""
+                <div class="feature-card dynamic-card-{i}" data-feature="{feature['action']}">
+                    <div class="card-icon">{feature['icon']}</div>
+                    <h3>{feature['title']}</h3>
+                    <p>{feature['description']}</p>
+                    <button class="action-button" onclick="handleAction('{feature['action']}', this)">
+                        Execute
+                    </button>
+                </div>"""
+        feature_cards.append(card_html)
+    
+    # グリッドスタイル
+    grid_columns = "repeat(auto-fit, minmax(300px, 1fr))" if complexity > 0.1 else "repeat(auto-fit, minmax(250px, 1fr))"
+    
+    html_template = f"""<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Generated {theme.title()} UI</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body data-theme="{theme}" data-complexity="{complexity:.3f}">
+    <div class="image-generated-container">
+        <header class="app-header {('animate-fade' if has_animations else '')}">
+            <h1>AI Generated {theme.title()} HTML UI</h1>
+            <p class="description">{description}</p>
+            <div class="analysis-info">
+                <span>Complexity: {complexity:.2f}</span>
+                <span>Style: {ui_style}</span>
+                <span>Layout: {layout_type}</span>
+            </div>
+        </header>
+
+        <nav class="app-navigation {('animate-slide' if has_animations else '')}">
+            <button class="nav-button active" onclick="setActiveTab('home', this)">Home</button>
+            <button class="nav-button" onclick="setActiveTab('features', this)">Features</button>
+            <button class="nav-button" onclick="setActiveTab('analytics', this)">Analytics</button>
+            <button class="nav-button" onclick="setActiveTab('settings', this)">Settings</button>
+        </nav>
+
+        <main class="app-main">
+            <div class="content-grid" style="grid-template-columns: {grid_columns}; gap: {('2rem' if complexity > 0.1 else '1.5rem')};">
+                {''.join(feature_cards)}
+            </div>
+            
+            {('<div class="theme-indicator">🌙 Dark theme detected from image analysis</div>' if theme == 'dark' else '')}
+            {('<div class="complexity-notice">⚡ High complexity interface - Advanced features enabled</div>' if complexity > 0.1 else '')}
+        </main>
+
+        <footer class="app-footer">
+            <p>Generated by AI from image analysis using HTML/CSS</p>
+            <small>Theme: {theme} | Style: {ui_style} | Complexity: {complexity:.3f}</small>
+        </footer>
+    </div>
+
+    <script>
+        // グローバル変数
+        let isLoading = false;
+        let analysisData = {{
+            theme: '{theme}',
+            complexity: {complexity},
+            uiStyle: '{ui_style}',
+            layoutType: '{layout_type}',
+            dominantColor: '{analysis.get("dominant_color", "#333")}',
+            hasAnimations: {str(has_animations).lower()}
+        }};
+        
+        function setActiveTab(tab, button) {{
+            // すべてのボタンからactiveクラスを削除
+            document.querySelectorAll('.nav-button').forEach(btn => {{
+                btn.classList.remove('active');
+            }});
+            
+            // クリックされたボタンにactiveクラスを追加
+            button.classList.add('active');
+            
+            console.log('Active tab:', tab);
+            console.log('Analysis data:', analysisData);
+        }}
+        
+        function handleAction(action, button) {{
+            if (isLoading) return;
+            
+            isLoading = true;
+            const originalText = button.textContent;
+            button.disabled = true;
+            button.textContent = 'Processing...';
+            button.style.opacity = '0.6';
+            
+            console.log(`Executing AI-detected action: ${{action}}`);
+            
+            // AIが画像から推定したアクション処理
+            const processingTime = 1000 + Math.random() * 2000;
+            setTimeout(() => {{
+                isLoading = false;
+                button.disabled = false;
+                button.textContent = originalText;
+                button.style.opacity = '1';
+                console.log(`Action completed: ${{action}}`);
+                
+                // 視覚的フィードバック
+                const card = button.closest('.feature-card');
+                card.style.transform = 'scale(1.05)';
+                setTimeout(() => {{
+                    card.style.transform = '';
+                }}, 200);
+            }}, processingTime);
+        }}
+        
+        // 動的インタラクション
+        function addDynamicEffects() {{
+            const cards = document.querySelectorAll('.feature-card');
+            cards.forEach((card, index) => {{
+                card.addEventListener('mouseenter', () => {{
+                    if (analysisData.hasAnimations) {{
+                        card.style.transform = 'translateY(-10px) scale(1.02)';
+                        card.style.boxShadow = '0 20px 40px rgba(0,0,0,0.15)';
+                    }}
+                }});
+                
+                card.addEventListener('mouseleave', () => {{
+                    card.style.transform = '';
+                    card.style.boxShadow = '';
+                }});
+            }});
+        }}
+        
+        // ページ読み込み時の初期化
+        document.addEventListener('DOMContentLoaded', () => {{
+            console.log('HTML UI initialized with analysis data:', analysisData);
+            addDynamicEffects();
+            
+            // テーマに基づく動的スタイル調整
+            if (analysisData.theme === 'dark') {{
+                document.body.classList.add('dark-theme');
+            }}
+            
+            // 複雑さに基づく動的調整
+            if (analysisData.complexity > 0.1) {{
+                document.body.classList.add('high-complexity');
+            }}
+        }});
+    </script>
+</body>
+</html>"""
+
+    # 動的CSS生成
+    css_template = f""".image-generated-container {{
+    min-height: 100vh;
+    background: {bg_color};
+    color: {text_color};
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    transition: all 0.3s ease;
+}}
+
+{("@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }" if has_animations else "")}
+{("@keyframes slideInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } }" if has_animations else "")}
+{(".animate-fade { animation: fadeInUp 0.6s ease-out; }" if has_animations else "")}
+{(".animate-slide { animation: slideInLeft 0.4s ease-out; }" if has_animations else "")}
+
+.app-header {{
+    text-align: center;
+    padding: 40px 20px;
+    background: linear-gradient(135deg, {accent_color} 0%, {bg_color} 100%);
+    color: white;
+    border-bottom: 3px solid {accent_color};
+}}
+
+.app-header h1 {{
+    font-size: {("3rem" if complexity > 0.1 else "2.5rem")};
+    margin-bottom: 10px;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+}}
+
+.description {{
+    font-size: 1.1rem;
+    margin: 10px 0;
+    opacity: 0.9;
+}}
+
+.analysis-info {{
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin-top: 15px;
+    font-size: 0.9rem;
+    flex-wrap: wrap;
+}}
+
+.analysis-info span {{
+    background: rgba(255,255,255,0.2);
+    padding: 5px 12px;
+    border-radius: 15px;
+    backdrop-filter: blur(10px);
+}}
+
+.app-navigation {{
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    padding: 20px;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    flex-wrap: wrap;
+}}
+
+.nav-button {{
+    padding: 12px 24px;
+    border: none;
+    border-radius: 25px;
+    background: transparent;
+    color: {text_color};
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-weight: 500;
+    font-size: 1rem;
+}}
+
+.nav-button:hover,
+.nav-button.active {{
+    background: {accent_color};
+    color: white;
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+}}
+
+.app-main {{
+    max-width: {("1400px" if complexity > 0.1 else "1200px")};
+    margin: 0 auto;
+    padding: 40px 20px;
+}}
+
+.content-grid {{
+    display: grid;
+    margin-top: 30px;
+}}
+
+.feature-card {{
+    background: {("linear-gradient(135deg, #fff, #f8f9fa)" if theme == "light" else "#2c3e50" if theme == "dark" else "white")};
+    padding: 30px;
+    border-radius: 15px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, {("0.3" if theme == "dark" else "0.1")});
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    border: 1px solid {accent_color}22;
+    cursor: pointer;
+}}
+
+.feature-card:hover {{
+    transform: translateY(-8px);
+    box-shadow: 0 15px 35px rgba(0, 0, 0, {("0.4" if theme == "dark" else "0.15")});
+}}
+
+.card-icon {{
+    font-size: 2.5rem;
+    margin-bottom: 15px;
+    display: block;
+}}
+
+.feature-card h3 {{
+    color: {accent_color};
+    margin-bottom: 15px;
+    font-size: 1.5rem;
+}}
+
+.feature-card p {{
+    color: {text_color}88;
+    line-height: 1.6;
+    margin-bottom: 20px;
+}}
+
+.action-button {{
+    background: {accent_color};
+    color: white;
+    border: none;
+    padding: 12px 25px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    margin-top: 15px;
+    font-size: 1rem;
+    width: 100%;
+}}
+
+.action-button:hover {{
+    transform: translateY(-2px);
+    box-shadow: 0 8px 20px {accent_color}66;
+    filter: brightness(110%);
+}}
+
+.action-button:disabled {{
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
+}}
+
+.theme-indicator,
+.complexity-notice {{
+    text-align: center;
+    padding: 15px;
+    margin: 30px 0;
+    background: {accent_color}11;
+    border-radius: 10px;
+    border-left: 4px solid {accent_color};
+}}
+
+.app-footer {{
+    text-align: center;
+    padding: 30px;
+    background: {bg_color};
+    border-top: 1px solid {accent_color}22;
+    margin-top: 50px;
+}}
+
+.app-footer small {{
+    display: block;
+    margin-top: 10px;
+    opacity: 0.7;
+}}
+
+/* テーマ固有のスタイル */
+.dark-theme .feature-card {{
+    background: #34495e;
+    color: #ecf0f1;
+}}
+
+.high-complexity .feature-card {{
+    border-width: 2px;
+}}
+
+.high-complexity .action-button {{
+    background: linear-gradient(135deg, {accent_color}, #8e44ad);
+}}
+
+@media (max-width: 768px) {{
+    .app-navigation {{
+        flex-direction: column;
+        align-items: center;
+    }}
+    
+    .content-grid {{
+        grid-template-columns: 1fr !important;
+    }}
+    
+    .app-header h1 {{
+        font-size: 2rem;
+    }}
+    
+    .analysis-info {{
+        flex-direction: column;
+        gap: 10px;
+    }}
+}}"""
+
+    return f"✅ Dynamic HTML/CSS generated! Theme: {theme}, Complexity: {complexity:.2f}, Style: {ui_style}", html_template, css_template
+
+# AI指示による自動検出のための必須オブジェクト
+with gr.Blocks(title="Multimodal UI Generator") as gradio_interface:
+    gr.Markdown("# 🖼️ Multimodal UI Code Generator")
+    gr.Markdown("画像をアップロードしてフロントエンドコードを自動生成します")
+    
+    with gr.Row():
+        with gr.Column(scale=1):
+            image_input = gr.Image(
+                label="UI Design Image",
+                type="pil",
+                height=400
+            )
+            
+            description_input = gr.Textbox(
+                label="Implementation Details",
+                placeholder="このUIの機能や動作について説明してください...",
+                lines=4,
+                value="モダンなダッシュボード画面を作成"
+            )
+            
+            framework_choice = gr.Radio(
+                label="Target Framework",
+                choices=["React", "Vue", "HTML/CSS"],
+                value="React"
+            )
+            
+            generate_btn = gr.Button("Generate UI Code", variant="primary", size="lg")
+        
+        with gr.Column(scale=2):
+            status_output = gr.Textbox(label="Generation Status", interactive=False)
+            
+            with gr.Tabs():
+                with gr.Tab("Primary Code"):
+                    primary_code_output = gr.Code(label="Main Component Code")
+                    
+                with gr.Tab("Styles"):
+                    css_code_output = gr.Code(label="CSS Styles", language="css")
+                    
+                with gr.Tab("Additional Files"):
+                    additional_output = gr.Code(label="Additional Configuration")
+    
+    # Event binding
+    generate_btn.click(
+        fn=analyze_image_and_generate_ui,
+        inputs=[image_input, description_input, framework_choice],
+        outputs=[status_output, primary_code_output, css_code_output, additional_output]
+    )
+    
+    # サンプル例
+    gr.Examples(
+        examples=[
+            [None, "シンプルなログイン画面", "React"],
+            [None, "データ可視化ダッシュボード", "Vue"],
+            [None, "商品一覧ページ", "HTML/CSS"]
+        ],
+        inputs=[image_input, description_input, framework_choice]
+    )
+
+# テスト用のスタンドアロン実行（コメントアウト - 自動検出システムとの競合を防ぐため）
+# if __name__ == "__main__":
+#     gradio_interface.launch()

contbk/gra_11_multimodal/image_to_ui_fixed.py

@@ -0,0 +1,795 @@
+import gradio as gr
+import base64
+import io
+from PIL import Image
+import json
+import re
+
+def analyze_image_and_generate_ui(image, description, framework_choice):
+    """
+    アップロードされた画像を解析してUIコードを自動生成
+    """
+    if image is None:
+        return "画像をアップロードしてください", "", "", ""
+    
+    # 画像解析（実際のAIモデルの代わりにルールベースで実装）
+    analysis_result = analyze_ui_elements(image)
+    
+    # 選択されたフレームワークに応じてコード生成
+    if framework_choice == "React":
+        status, jsx_code, css_code = generate_react_from_analysis(analysis_result, description)
+        return status, jsx_code, css_code, ""
+    elif framework_choice == "Vue":
+        status, vue_code = generate_vue_from_analysis(analysis_result, description)
+        return status, vue_code, "", ""
+    elif framework_choice == "HTML/CSS":
+        status, html_code, css_code = generate_html_from_analysis(analysis_result, description)
+        return status, html_code, css_code, ""
+    else:
+        return "フレームワークを選択してください", "", "", ""
+
+def analyze_ui_elements(image):
+    """
+    画像からUI要素を検出（簡易版実装）
+    実際の実装では、YOLOやCNNベースのモデルを使用
+    """
+    width, height = image.size
+    
+    # 基本的な画像分析
+    analysis = {
+        "image_size": (width, height),
+        "aspect_ratio": width / height,
+        "detected_elements": [],
+        "color_scheme": "modern",
+        "layout_type": "grid" if width > height else "vertical"
+    }
+    
+    # 画像の明度から背景色を推定
+    grayscale = image.convert('L')
+    pixels = list(grayscale.getdata())
+    avg_brightness = sum(pixels) / len(pixels)
+    
+    if avg_brightness < 85:
+        analysis["theme"] = "dark"
+        analysis["bg_color"] = "#1a1a1a"
+        analysis["text_color"] = "#ffffff"
+    elif avg_brightness > 200:
+        analysis["theme"] = "light"
+        analysis["bg_color"] = "#ffffff" 
+        analysis["text_color"] = "#333333"
+    else:
+        analysis["theme"] = "modern"
+        analysis["bg_color"] = "#f8f9fa"
+        analysis["text_color"] = "#2c3e50"
+    
+    # UI要素の検出（簡易版）
+    analysis["detected_elements"] = [
+        {"type": "header", "confidence": 0.9},
+        {"type": "button", "confidence": 0.8},
+        {"type": "card", "confidence": 0.7},
+        {"type": "navigation", "confidence": 0.6}
+    ]
+    
+    return analysis
+
+def generate_react_from_analysis(analysis, description):
+    """
+    分析結果からReactコンポーネントを生成
+    """
+    component_name = "ImageGeneratedComponent"
+    
+    # Template strings to avoid f-string complexity
+    jsx_template = """import React, { useState } from 'react';
+import './ImageGeneratedComponent.css';
+
+const COMPONENT_NAME = () => {
+    const [activeTab, setActiveTab] = useState('home');
+    const [isLoading, setIsLoading] = useState(false);
+
+    const handleAction = (action) => {
+        setIsLoading(true);
+        // AIが画像から推定したアクション処理
+        setTimeout(() => {
+            setIsLoading(false);
+            console.log(`Executed action: ${action}`);
+        }, 1000);
+    };
+
+    return (
+        <div className="image-generated-container">
+            <header className="app-header">
+                <h1>AI Generated UI</h1>
+                <p>DESCRIPTION_PLACEHOLDER</p>
+            </header>
+
+            <nav className="app-navigation">
+                {['home', 'features', 'about'].map(tab => (
+                    <button
+                        key={tab}
+                        onClick={() => setActiveTab(tab)}
+                        className={`nav-button ${activeTab === tab ? 'active' : ''}`}
+                    >
+                        {tab.charAt(0).toUpperCase() + tab.slice(1)}
+                    </button>
+                ))}
+            </nav>
+
+            <main className="app-main">
+                <div className="content-grid">
+                    <div className="feature-card">
+                        <h3>Feature 1</h3>
+                        <p>AIが画像から検出した機能</p>
+                        <button 
+                            onClick={() => handleAction('feature1')}
+                            disabled={isLoading}
+                            className="action-button"
+                        >
+                            {isLoading ? 'Processing...' : 'Execute'}
+                        </button>
+                    </div>
+                    
+                    <div className="feature-card">
+                        <h3>Feature 2</h3>
+                        <p>画像解析に基づく機能</p>
+                        <button 
+                            onClick={() => handleAction('feature2')}
+                            disabled={isLoading}
+                            className="action-button secondary"
+                        >
+                            {isLoading ? 'Processing...' : 'Execute'}
+                        </button>
+                    </div>
+                </div>
+            </main>
+
+            <footer className="app-footer">
+                <p>Generated by AI from image analysis</p>
+            </footer>
+        </div>
+    );
+};
+
+export default COMPONENT_NAME;"""
+
+    css_template = """.image-generated-container {
+    min-height: 100vh;
+    background: BG_COLOR_PLACEHOLDER;
+    color: TEXT_COLOR_PLACEHOLDER;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.app-header {
+    text-align: center;
+    padding: 40px 20px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+}
+
+.app-header h1 {
+    font-size: 2.5rem;
+    margin-bottom: 10px;
+}
+
+.app-navigation {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    padding: 20px;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+}
+
+.nav-button {
+    padding: 10px 20px;
+    border: none;
+    border-radius: 25px;
+    background: transparent;
+    color: TEXT_COLOR_PLACEHOLDER;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-weight: 500;
+}
+
+.nav-button:hover,
+.nav-button.active {
+    background: #667eea;
+    color: white;
+    transform: translateY(-2px);
+}
+
+.app-main {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 40px 20px;
+}
+
+.content-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 30px;
+    margin-top: 30px;
+}
+
+.feature-card {
+    background: white;
+    padding: 30px;
+    border-radius: 15px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease;
+}
+
+.feature-card:hover {
+    transform: translateY(-5px);
+}
+
+.feature-card h3 {
+    color: #2c3e50;
+    margin-bottom: 15px;
+    font-size: 1.5rem;
+}
+
+.action-button {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    padding: 12px 25px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    margin-top: 15px;
+}
+
+.action-button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
+}
+
+.action-button.secondary {
+    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
+    color: #8b4513;
+}
+
+.action-button:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.app-footer {
+    text-align: center;
+    padding: 30px;
+    background: BG_COLOR_PLACEHOLDER;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    margin-top: 50px;
+}
+
+@media (max-width: 768px) {
+    .app-navigation {
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    .content-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .app-header h1 {
+        font-size: 2rem;
+    }
+}"""
+
+    # Replace placeholders
+    jsx_code = jsx_template.replace("COMPONENT_NAME", component_name)
+    jsx_code = jsx_code.replace("DESCRIPTION_PLACEHOLDER", description)
+    
+    css_code = css_template.replace("BG_COLOR_PLACEHOLDER", analysis['bg_color'])
+    css_code = css_code.replace("TEXT_COLOR_PLACEHOLDER", analysis['text_color'])
+
+    return "✅ React component generated from image analysis!", jsx_code, css_code
+
+def generate_vue_from_analysis(analysis, description):
+    """
+    分析結果からVue.jsコンポーネントを生成
+    """
+    vue_template = """<template>
+  <div class="image-generated-container">
+    <header class="app-header">
+      <h1>AI Generated Vue UI</h1>
+      <p>DESCRIPTION_PLACEHOLDER</p>
+    </header>
+
+    <nav class="app-navigation">
+      <button
+        v-for="tab in tabs"
+        :key="tab"
+        @click="activeTab = tab"
+        :class="['nav-button', { active: activeTab === tab }]"
+      >
+        {{ tab.charAt(0).toUpperCase() + tab.slice(1) }}
+      </button>
+    </nav>
+
+    <main class="app-main">
+      <div class="content-grid">
+        <div 
+          v-for="feature in features"
+          :key="feature.id"
+          class="feature-card"
+        >
+          <h3>{{ feature.title }}</h3>
+          <p>{{ feature.description }}</p>
+          <button 
+            @click="handleAction(feature.action)"
+            :disabled="isLoading"
+            :class="['action-button', feature.variant]"
+          >
+            {{ isLoading ? 'Processing...' : 'Execute' }}
+          </button>
+        </div>
+      </div>
+    </main>
+
+    <footer class="app-footer">
+      <p>Generated by AI from image analysis using Vue.js</p>
+    </footer>
+  </div>
+</template>
+
+<script>
+import { ref, reactive } from 'vue'
+
+export default {
+  name: 'ImageGeneratedComponent',
+  setup() {
+    const activeTab = ref('home')
+    const isLoading = ref(false)
+    
+    const tabs = ['home', 'features', 'about']
+    
+    const features = reactive([
+      {
+        id: 1,
+        title: 'Feature 1',
+        description: 'AIが画像から検出した機能',
+        action: 'feature1',
+        variant: 'primary'
+      },
+      {
+        id: 2, 
+        title: 'Feature 2',
+        description: '画像解析に基づく機能',
+        action: 'feature2',
+        variant: 'secondary'
+      }
+    ])
+
+    const handleAction = (action) => {
+      isLoading.value = true
+      setTimeout(() => {
+        isLoading.value = false
+        console.log(`Executed action: ${action}`)
+      }, 1000)
+    }
+
+    return {
+      activeTab,
+      isLoading,
+      tabs,
+      features,
+      handleAction
+    }
+  }
+}
+</script>
+
+<style scoped>
+.image-generated-container {
+  min-height: 100vh;
+  background: BG_COLOR_PLACEHOLDER;
+  color: TEXT_COLOR_PLACEHOLDER;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.app-header {
+  text-align: center;
+  padding: 40px 20px;
+  background: linear-gradient(135deg, #42b883 0%, #35495e 100%);
+  color: white;
+}
+
+.app-header h1 {
+  font-size: 2.5rem;
+  margin-bottom: 10px;
+}
+
+.app-navigation {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  padding: 20px;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+}
+
+.nav-button {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 25px;
+  background: transparent;
+  color: TEXT_COLOR_PLACEHOLDER;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-weight: 500;
+}
+
+.nav-button:hover,
+.nav-button.active {
+  background: #42b883;
+  color: white;
+  transform: translateY(-2px);
+}
+
+.app-main {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 40px 20px;
+}
+
+.content-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 30px;
+  margin-top: 30px;
+}
+
+.feature-card {
+  background: white;
+  padding: 30px;
+  border-radius: 15px;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+}
+
+.feature-card:hover {
+  transform: translateY(-5px);
+}
+
+.feature-card h3 {
+  color: #2c3e50;
+  margin-bottom: 15px;
+  font-size: 1.5rem;
+}
+
+.action-button {
+  border: none;
+  padding: 12px 25px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  margin-top: 15px;
+  color: white;
+}
+
+.action-button.primary {
+  background: linear-gradient(135deg, #42b883 0%, #35495e 100%);
+}
+
+.action-button.secondary {
+  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
+  color: #8b4513;
+}
+
+.action-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(66, 184, 131, 0.4);
+}
+
+.action-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.app-footer {
+  text-align: center;
+  padding: 30px;
+  background: BG_COLOR_PLACEHOLDER;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  margin-top: 50px;
+}
+
+@media (max-width: 768px) {
+  .app-navigation {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .content-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .app-header h1 {
+    font-size: 2rem;
+  }
+}
+</style>"""
+
+    vue_code = vue_template.replace("DESCRIPTION_PLACEHOLDER", description)
+    vue_code = vue_code.replace("BG_COLOR_PLACEHOLDER", analysis['bg_color'])
+    vue_code = vue_code.replace("TEXT_COLOR_PLACEHOLDER", analysis['text_color'])
+
+    return "✅ Vue.js component generated from image analysis!", vue_code
+
+def generate_html_from_analysis(analysis, description):
+    """
+    分析結果からHTML/CSSを生成
+    """
+    html_template = """<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Generated UI</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="image-generated-container">
+        <header class="app-header">
+            <h1>AI Generated HTML UI</h1>
+            <p>DESCRIPTION_PLACEHOLDER</p>
+        </header>
+
+        <nav class="app-navigation">
+            <button class="nav-button active" onclick="setActiveTab('home')">Home</button>
+            <button class="nav-button" onclick="setActiveTab('features')">Features</button>
+            <button class="nav-button" onclick="setActiveTab('about')">About</button>
+        </nav>
+
+        <main class="app-main">
+            <div class="content-grid">
+                <div class="feature-card">
+                    <h3>Feature 1</h3>
+                    <p>AIが画像から検出した機能</p>
+                    <button class="action-button" onclick="handleAction('feature1')">
+                        Execute
+                    </button>
+                </div>
+                
+                <div class="feature-card">
+                    <h3>Feature 2</h3>
+                    <p>画像解析に基づく機能</p>
+                    <button class="action-button secondary" onclick="handleAction('feature2')">
+                        Execute
+                    </button>
+                </div>
+            </div>
+        </main>
+
+        <footer class="app-footer">
+            <p>Generated by AI from image analysis using HTML/CSS</p>
+        </footer>
+    </div>
+
+    <script>
+        function setActiveTab(tab) {
+            // すべてのボタンからactiveクラスを削除
+            document.querySelectorAll('.nav-button').forEach(btn => {
+                btn.classList.remove('active');
+            });
+            
+            // クリックされたボタンにactiveクラスを追加
+            event.target.classList.add('active');
+            
+            console.log('Active tab:', tab);
+        }
+        
+        function handleAction(action) {
+            const button = event.target;
+            button.disabled = true;
+            button.textContent = 'Processing...';
+            
+            // AIが画像から推定したアクション処理
+            setTimeout(() => {
+                button.disabled = false;
+                button.textContent = 'Execute';
+                console.log('Executed action:', action);
+            }, 1000);
+        }
+    </script>
+</body>
+</html>"""
+
+    css_template = """.image-generated-container {
+    min-height: 100vh;
+    background: BG_COLOR_PLACEHOLDER;
+    color: TEXT_COLOR_PLACEHOLDER;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.app-header {
+    text-align: center;
+    padding: 40px 20px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+}
+
+.app-header h1 {
+    font-size: 2.5rem;
+    margin-bottom: 10px;
+}
+
+.app-navigation {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    padding: 20px;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+}
+
+.nav-button {
+    padding: 10px 20px;
+    border: none;
+    border-radius: 25px;
+    background: transparent;
+    color: TEXT_COLOR_PLACEHOLDER;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-weight: 500;
+}
+
+.nav-button:hover,
+.nav-button.active {
+    background: #667eea;
+    color: white;
+    transform: translateY(-2px);
+}
+
+.app-main {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 40px 20px;
+}
+
+.content-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 30px;
+    margin-top: 30px;
+}
+
+.feature-card {
+    background: white;
+    padding: 30px;
+    border-radius: 15px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease;
+}
+
+.feature-card:hover {
+    transform: translateY(-5px);
+}
+
+.feature-card h3 {
+    color: #2c3e50;
+    margin-bottom: 15px;
+    font-size: 1.5rem;
+}
+
+.action-button {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    padding: 12px 25px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    margin-top: 15px;
+}
+
+.action-button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
+}
+
+.action-button.secondary {
+    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
+    color: #8b4513;
+}
+
+.action-button:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.app-footer {
+    text-align: center;
+    padding: 30px;
+    background: BG_COLOR_PLACEHOLDER;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    margin-top: 50px;
+}
+
+@media (max-width: 768px) {
+    .app-navigation {
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    .content-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .app-header h1 {
+        font-size: 2rem;
+    }
+}"""
+
+    html_code = html_template.replace("DESCRIPTION_PLACEHOLDER", description)
+    css_code = css_template.replace("BG_COLOR_PLACEHOLDER", analysis['bg_color'])
+    css_code = css_code.replace("TEXT_COLOR_PLACEHOLDER", analysis['text_color'])
+
+    return "✅ HTML/CSS generated from image analysis!", html_code, css_code
+
+# AI指示による自動検出のための必須オブジェクト
+with gr.Blocks(title="Multimodal UI Generator") as gradio_interface:
+    gr.Markdown("# 🖼️ Multimodal UI Code Generator")
+    gr.Markdown("画像をアップロードしてフロントエンドコードを自動生成します")
+    
+    with gr.Row():
+        with gr.Column(scale=1):
+            image_input = gr.Image(
+                label="UI Design Image",
+                type="pil",
+                height=400
+            )
+            
+            description_input = gr.Textbox(
+                label="Implementation Details",
+                placeholder="このUIの機能や動作について説明してください...",
+                lines=4,
+                value="モダンなダッシュボード画面を作成"
+            )
+            
+            framework_choice = gr.Radio(
+                label="Target Framework",
+                choices=["React", "Vue", "HTML/CSS"],
+                value="React"
+            )
+            
+            generate_btn = gr.Button("Generate UI Code", variant="primary", size="lg")
+        
+        with gr.Column(scale=2):
+            status_output = gr.Textbox(label="Generation Status", interactive=False)
+            
+            with gr.Tabs():
+                with gr.Tab("Primary Code"):
+                    primary_code_output = gr.Code(label="Main Component Code")
+                    
+                with gr.Tab("Styles"):
+                    css_code_output = gr.Code(label="CSS Styles", language="css")
+                    
+                with gr.Tab("Additional Files"):
+                    additional_output = gr.Code(label="Additional Configuration")
+    
+    # Event binding
+    generate_btn.click(
+        fn=analyze_image_and_generate_ui,
+        inputs=[image_input, description_input, framework_choice],
+        outputs=[status_output, primary_code_output, css_code_output, additional_output]
+    )
+    
+    # サンプル例
+    gr.Examples(
+        examples=[
+            [None, "シンプルなログイン画面", "React"],
+            [None, "データ可視化ダッシュボード", "Vue"],
+            [None, "商品一覧ページ", "HTML/CSS"]
+        ],
+        inputs=[image_input, description_input, framework_choice]
+    )
+
+# テスト用のスタンドアロン実行（コメントアウト - 自動検出システムとの競合を防ぐため）
+# if __name__ == "__main__":
+#     gradio_interface.launch()

controllers/gradio_interface.py

@@ -1,22 +1,201 @@
 import gradio as gr
-from llamafactory.webui.interface import create_ui
+import sys
+import os
 
-def create_gradio_interface():
-    """Gradio インターフェースを作成する"""
-    return create_ui()
+# LlamaFactoryのパスを追加
+llamafactory_path = '/workspaces/fastapi_django_main_live/LLaMA-Factory'
+sys.path.append(llamafactory_path)
 
-# Gradio インターフェースを作成
-with gr.Blocks() as gradio_interface:
-    # LlamaFactory UIを追加
-    llamafactory_demo = create_gradio_interface()
+def create_llamafactory_interface():
+    """LlamaFactory Gradio インターフェースを作成する"""
+    try:
+        # 作業ディレクトリをLlamaFactoryに変更
+        original_cwd = os.getcwd()
+        llamafactory_path = '/workspaces/fastapi_django_main_live/LLaMA-Factory'
+        os.chdir(llamafactory_path)
+        
+        # 環境変数を設定
+        os.environ['LLAMAFACTORY_HOME'] = llamafactory_path
+        os.environ['PYTHONPATH'] = f"{llamafactory_path}:{os.environ.get('PYTHONPATH', '')}"
+        
+        # 必要なファイルの存在確認
+        dataset_info_path = os.path.join(llamafactory_path, 'data', 'dataset_info.json')
+        if not os.path.exists(dataset_info_path):
+            print(f"⚠️ Dataset info file not found: {dataset_info_path}")
+            os.chdir(original_cwd)
+            with gr.Blocks() as missing_file_ui:
+                gr.Markdown("## ⚠️ Configuration Missing")
+                gr.Markdown(f"データセット情報ファイルが見つかりません: `{dataset_info_path}`")
+                gr.Markdown("LlamaFactoryの初期設定が必要です。")
+            return missing_file_ui
+        
+        print(f"✅ Found dataset info: {dataset_info_path}")
+        print(f"✅ Working directory: {os.getcwd()}")
+        
+        # LlamaFactoryのUIを作成
+        from llamafactory.webui.interface import create_ui
+        ui = create_ui()
+        
+        # 作業ディレクトリを元に戻す
+        os.chdir(original_cwd)
+        return ui
+        
+    except ImportError as e:
+        if 'original_cwd' in locals():
+            os.chdir(original_cwd)
+        print(f"LlamaFactory import error: {e}")
+        # フォールバック UI を作成
+        with gr.Blocks() as fallback_ui:
+            gr.Markdown("## ⚠️ LlamaFactory Unavailable")
+            gr.Markdown("LlamaFactoryモジュールが見つかりません。")
+            gr.Markdown("### 解決方法:")
+            gr.Markdown("1. LlamaFactoryの依存関係をインストール")
+            gr.Markdown("2. パスの設定を確認")
+            gr.Code("pip install -e /workspaces/fastapi_django_main_live/LLaMA-Factory", language="bash")
+        return fallback_ui
+    except Exception as e:
+        if 'original_cwd' in locals():
+            os.chdir(original_cwd)
+        print(f"LlamaFactory UI creation error: {e}")
+        with gr.Blocks() as error_ui:
+            gr.Markdown("## ❌ LlamaFactory Error")
+            gr.Markdown(f"エラー: {str(e)}")
+            gr.Markdown("### トラブルシューティング:")
+            gr.Markdown("1. LlamaFactoryのファイル構成を確認")
+            gr.Markdown("2. 必要な依存関係をインストール")
+            gr.Markdown("3. 権限設定を確認")
+            with gr.Code():
+                gr.Textbox(value=f"エラー詳細: {str(e)}", interactive=False)
+        return error_ui
+
+# メインGradio インターフェースを作成
+with gr.Blocks(title="🤖 AI Development Platform", theme=gr.themes.Soft()) as gradio_interface:
+    # ヘッダー
+    gr.Markdown("""
+    # 🤖 AI開発プラットフォーム
     
-    # LlamaFactory UIを現在のBlocksに統合
-    with gr.Row():
-        with gr.Column():
-            gr.HTML("""
-            <h2>🦙 LlamaFactory WebUI</h2>
-            <p>LlamaFactoryのWebUIインターフェースです</p>
-            """)
+    このプラットフォームでは、LlamaFactoryを使用してLLMのファインチューニングを行うことができます。
+    """)
     
-    # LlamaFactory UIをマウント
-    llamafactory_demo.render()
+    with gr.Tabs() as tabs:
+        # LlamaFactory タブ
+        with gr.TabItem("🦙 LlamaFactory WebUI"):
+            gr.Markdown("""
+            ## 🦙 LlamaFactory WebUI
+            
+            LLM（Large Language Models）のファインチューニングを行うためのWebインターフェースです。
+            
+            ### 主な機能:
+            - 🎯 **モデル訓練**: カスタムデータセットでLLMを訓練
+            - 📊 **データセット管理**: 訓練用データの管理・前処理
+            - ⚙️ **ハイパーパラメータ調整**: 学習パラメータの最適化
+            - 📈 **訓練監視**: リアルタイムでの訓練進捗確認
+            """)
+            
+            # LlamaFactory UIを統合
+            try:
+                llamafactory_ui = create_llamafactory_interface()
+                if llamafactory_ui:
+                    # LlamaFactory UIを現在のタブに埋め込み
+                    with gr.Group():
+                        gr.Markdown("### 🔧 LlamaFactory コントロールパネル")
+                        llamafactory_ui.render()
+            except Exception as e:
+                gr.Markdown(f"### ❌ LlamaFactory 読み込みエラー\n\n```\n{str(e)}\n```")
+        
+        # 情報タブ
+        with gr.TabItem("ℹ️ システム情報"):
+            gr.Markdown("""
+            ## 📋 システム情報
+            
+            ### 🔧 利用可能な機能:
+            - **LlamaFactory**: LLMファインチューニング
+            - **OpenInterpreter**: コード実行・解釈
+            - **AutoPrompt**: プロンプト自動最適化
+            - **BabyAGI**: 自律AIエージェント
+            
+            ### 🚀 クイックスタート:
+            1. 左側の「LlamaFactory WebUI」タブを選択
+            2. データセットを準備・アップロード
+            3. モデルとパラメータを設定
+            4. 訓練を開始
+            
+            ### 📞 サポート:
+            - 📖 ドキュメント: `/docs/` フォルダ
+            - 🐛 問題報告: GitHub Issues
+            """)
+            
+            # システム状態表示
+            with gr.Row():
+                with gr.Column():
+                    gr.Markdown("#### 🔍 システム状態")
+                    
+                    # 動的にシステム情報を取得
+                    def get_system_info():
+                        llamafactory_path = '/workspaces/fastapi_django_main_live/LLaMA-Factory'
+                        dataset_info_path = os.path.join(llamafactory_path, 'data', 'dataset_info.json')
+                        
+                        return f"""
+                        - **Python Version**: {sys.version.split()[0]}
+                        - **Current Directory**: {os.getcwd()}
+                        - **LlamaFactory Path**: {llamafactory_path}
+                        - **Dataset Info Exists**: {"✅ Yes" if os.path.exists(dataset_info_path) else "❌ No"}
+                        - **LlamaFactory Accessible**: {"✅ Yes" if os.path.exists(llamafactory_path) else "❌ No"}
+                        """
+                    
+                    system_status = get_system_info()
+                    gr.Markdown(system_status)
+                    
+                    # LlamaFactory セットアップボタン
+                    with gr.Row():
+                        setup_btn = gr.Button("🔧 LlamaFactory セットアップ確認", variant="secondary")
+                        
+                    setup_output = gr.Textbox(
+                        label="セットアップ結果", 
+                        lines=10, 
+                        interactive=False,
+                        visible=False
+                    )
+                    
+                    def check_llamafactory_setup():
+                        """LlamaFactoryのセットアップ状況をチェック"""
+                        result = []
+                        llamafactory_path = '/workspaces/fastapi_django_main_live/LLaMA-Factory'
+                        
+                        # 1. ディレクトリ存在確認
+                        if os.path.exists(llamafactory_path):
+                            result.append("✅ LlamaFactoryディレクトリが存在します")
+                        else:
+                            result.append("❌ LlamaFactoryディレクトリが見つかりません")
+                            return "\n".join(result), gr.update(visible=True)
+                        
+                        # 2. dataset_info.json確認
+                        dataset_info_path = os.path.join(llamafactory_path, 'data', 'dataset_info.json')
+                        if os.path.exists(dataset_info_path):
+                            result.append("✅ dataset_info.jsonが存在します")
+                        else:
+                            result.append("❌ dataset_info.jsonが見つかりません")
+                        
+                        # 3. 必要なディレクトリ確認
+                        required_dirs = ['src', 'data', 'examples']
+                        for dir_name in required_dirs:
+                            dir_path = os.path.join(llamafactory_path, dir_name)
+                            if os.path.exists(dir_path):
+                                result.append(f"✅ {dir_name}/ ディレクトリが存在します")
+                            else:
+                                result.append(f"❌ {dir_name}/ ディレクトリが見つかりません")
+                        
+                        # 4. モジュールインポート確認
+                        try:
+                            sys.path.append(llamafactory_path)
+                            import llamafactory
+                            result.append("✅ LlamaFactoryモジュールのインポートが可能です")
+                        except ImportError as e:
+                            result.append(f"❌ LlamaFactoryモジュールのインポートに失敗: {e}")
+                        
+                        return "\n".join(result), gr.update(visible=True)
+                    
+                    setup_btn.click(
+                        fn=check_llamafactory_setup,
+                        outputs=[setup_output, setup_output]
+                    )