| | import gradio as gr
|
| | import json
|
| | import os
|
| | from datetime import datetime
|
| |
|
| |
|
| |
|
| |
|
| | def load_page_builder():
|
| | """Load the main page builder HTML"""
|
| | with open('index.html', 'r', encoding='utf-8') as f:
|
| | return f.read()
|
| |
|
| | def save_workflow(workflow_name, html_content, css_content):
|
| | """Save workflow to JSON file"""
|
| | if not workflow_name:
|
| | return "❌ ワークフロー名を入力してください"
|
| |
|
| | workflows_dir = 'workflows'
|
| | os.makedirs(workflows_dir, exist_ok=True)
|
| |
|
| | workflow_data = {
|
| | 'name': workflow_name,
|
| | 'html': html_content,
|
| | 'css': css_content,
|
| | 'created_at': datetime.now().isoformat(),
|
| | 'updated_at': datetime.now().isoformat()
|
| | }
|
| |
|
| | filename = f"{workflows_dir}/{workflow_name}_{datetime.now().strftime('%Y%m%d_%H%M%S')}.json"
|
| |
|
| | with open(filename, 'w', encoding='utf-8') as f:
|
| | json.dump(workflow_data, f, ensure_ascii=False, indent=2)
|
| |
|
| | return f"✅ ワークフロー保存完了: {filename}"
|
| |
|
| | def load_workflows():
|
| | """Load list of saved workflows"""
|
| | workflows_dir = 'workflows'
|
| | if not os.path.exists(workflows_dir):
|
| | return []
|
| |
|
| | workflows = []
|
| | for filename in os.listdir(workflows_dir):
|
| | if filename.endswith('.json'):
|
| | with open(f"{workflows_dir}/{filename}", 'r', encoding='utf-8') as f:
|
| | data = json.load(f)
|
| | workflows.append({
|
| | 'filename': filename,
|
| | 'name': data.get('name', 'Unknown'),
|
| | 'created_at': data.get('created_at', 'Unknown')
|
| | })
|
| |
|
| | return workflows
|
| |
|
| | def export_html(workflow_name, html_content, css_content):
|
| | """Export complete HTML file"""
|
| | full_html = f"""<!DOCTYPE html>
|
| | <html lang="ja">
|
| | <head>
|
| | <meta charset="UTF-8">
|
| | <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| | <title>{workflow_name}</title>
|
| | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css">
|
| | <style>{css_content}</style>
|
| | </head>
|
| | <body>
|
| | {html_content}
|
| | <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
| | </body>
|
| | </html>"""
|
| |
|
| | output_dir = 'exports'
|
| | os.makedirs(output_dir, exist_ok=True)
|
| |
|
| | filename = f"{output_dir}/{workflow_name}_{datetime.now().strftime('%Y%m%d_%H%M%S')}.html"
|
| |
|
| | with open(filename, 'w', encoding='utf-8') as f:
|
| | f.write(full_html)
|
| |
|
| | return filename
|
| |
|
| |
|
| | with gr.Blocks(title="🚀 API Workflow Builder", theme=gr.themes.Soft()) as app:
|
| | gr.Markdown("""
|
| | # 🚀 API Workflow Builder
|
| |
|
| | Visual page builder with drag-and-drop interface powered by GrapeJS.
|
| | Create API workflow screens without coding!
|
| |
|
| | ## ✨ Features
|
| | - 📦 Drag & Drop page builder
|
| | - 🔌 API integration blocks
|
| | - 💾 Save workflows to JSON/Supabase
|
| | - 📥 Export as HTML file
|
| | - 🎨 Visual styling editor
|
| | """)
|
| |
|
| | with gr.Tab("📝 Page Builder"):
|
| | gr.Markdown("""
|
| | ### Visual Editor
|
| |
|
| | **Note**: Due to Gradio limitations, the full GrapeJS editor works best when opened in a separate window.
|
| |
|
| | Click the button below to open the full editor in a new tab:
|
| | """)
|
| |
|
| | gr.Markdown("""
|
| | <a href="https://kenken999.github.io/api-workflow-builder/" target="_blank"
|
| | style="display:inline-block; padding:15px 30px; background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
| | color:white; text-decoration:none; border-radius:8px; font-weight:bold; margin:20px 0;">
|
| | 🚀 Open Full Editor
|
| | </a>
|
| | """)
|
| |
|
| | gr.Markdown("""
|
| | ### Alternative: Localhost Setup
|
| |
|
| | For full functionality with API integration, run locally:
|
| |
|
| | ```bash
|
| | # Clone the repository
|
| | git clone https://huggingface.co/spaces/kenken999/api-workflow-builder
|
| | cd api-workflow-builder
|
| |
|
| | # Open index.html in your browser
|
| | # Or serve with a local server:
|
| | python -m http.server 8000
|
| | # Then visit: http://localhost:8000/index.html
|
| | ```
|
| |
|
| | ### 使い方
|
| | 1. 左サイドバーから要素をドラッグ＆ドロップ
|
| | 2. 右サイドバーでスタイルをカスタマイズ
|
| | 3. ヘッダーの「保存」ボタンでSupabaseに保存
|
| | 4. 下の「エクスポート」タブからHTMLファイルをダウンロード
|
| | """)
|
| |
|
| | with gr.Tab("💾 Workflows"):
|
| | gr.Markdown("### 保存されたワークフロー")
|
| |
|
| | with gr.Row():
|
| | workflow_name_input = gr.Textbox(
|
| | label="ワークフロー名",
|
| | placeholder="my-workflow"
|
| | )
|
| | save_btn = gr.Button("💾 保存", variant="primary")
|
| |
|
| | save_status = gr.Textbox(label="保存ステータス", interactive=False)
|
| |
|
| | gr.Markdown("### ワークフロー一覧")
|
| | workflows_list = gr.JSON(label="保存済みワークフロー")
|
| |
|
| | refresh_btn = gr.Button("🔄 更新")
|
| |
|
| |
|
| | refresh_btn.click(
|
| | fn=lambda: load_workflows(),
|
| | outputs=workflows_list
|
| | )
|
| |
|
| | with gr.Tab("📥 Export"):
|
| | gr.Markdown("### HTMLエクスポート")
|
| |
|
| | with gr.Row():
|
| | export_name = gr.Textbox(
|
| | label="ファイル名",
|
| | placeholder="my-page"
|
| | )
|
| | html_input = gr.Textbox(
|
| | label="HTML Content",
|
| | placeholder="<div>...</div>",
|
| | lines=5
|
| | )
|
| | css_input = gr.Textbox(
|
| | label="CSS Content",
|
| | placeholder=".class { ... }",
|
| | lines=5
|
| | )
|
| |
|
| | export_btn = gr.Button("📥 HTMLエクスポート", variant="primary")
|
| | export_result = gr.File(label="ダウンロード")
|
| |
|
| | export_btn.click(
|
| | fn=export_html,
|
| | inputs=[export_name, html_input, css_input],
|
| | outputs=export_result
|
| | )
|
| |
|
| | with gr.Tab("⚙️ Settings"):
|
| | gr.Markdown("### API設定")
|
| |
|
| | with gr.Row():
|
| | with gr.Column():
|
| | supabase_url = gr.Textbox(
|
| | label="Supabase URL",
|
| | value="https://rootomzbucovwdqsscqd.supabase.co"
|
| | )
|
| | supabase_key = gr.Textbox(
|
| | label="Supabase Anon Key",
|
| | value="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
|
| | type="password"
|
| | )
|
| |
|
| | with gr.Column():
|
| | api_base_url = gr.Textbox(
|
| | label="API Base URL",
|
| | value="https://your-api.com",
|
| | placeholder="https://api.example.com"
|
| | )
|
| | api_auth_type = gr.Dropdown(
|
| | label="認証タイプ",
|
| | choices=["None", "Bearer Token", "API Key", "Basic Auth"],
|
| | value="None"
|
| | )
|
| |
|
| | save_config_btn = gr.Button("💾 設定保存", variant="primary")
|
| | config_status = gr.Textbox(label="保存ステータス", interactive=False)
|
| |
|
| | with gr.Tab("📚 Documentation"):
|
| | gr.Markdown("""
|
| | ## 📖 ドキュメント
|
| |
|
| | ### 🎯 概要
|
| | API Workflow Builderは、ドラッグ＆ドロップでAPIワークフロー画面を作成できるノーコードツールです。
|
| |
|
| | ### 🚀 クイックスタート
|
| |
|
| | 1. **Page Builderタブ**を開く
|
| | 2. 左サイドバーから要素をドラッグ
|
| | 3. キャンバスにドロップして配置
|
| | 4. スタイルをカスタマイズ
|
| | 5. 保存またはエクスポート
|
| |
|
| | ### 📦 利用可能なブロック
|
| |
|
| | #### Shop11 API カテゴリ
|
| | - **地金チェック削除**: 商品IDで地金チェックを削除
|
| | - **査定タイトル生成**: 商品IDから査定タイトルを生成
|
| | - **メール送信**: メール通知を送信
|
| | - **商品検索**: キーワードで商品を検索
|
| | - **商品データテーブル**: 商品データを検索・表示
|
| | - **顧客検索テーブル**: 顧客情報を検索・表示
|
| | - **査定検索テーブル**: 査定データを検索・表示
|
| | - **商品登録フォーム**: 新規商品を登録
|
| |
|
| | ### 🔌 API連携
|
| |
|
| | すべてのAPIブロックは自動的にSupabaseにログを保存します。
|
| |
|
| | ```javascript
|
| | // API呼び出し例
|
| | fetch('/api/your-endpoint', {
|
| | method: 'POST',
|
| | headers: { 'Content-Type': 'application/json' },
|
| | body: JSON.stringify(data)
|
| | })
|
| | .then(res => res.json())
|
| | .then(data => {
|
| | // Supabaseログ保存
|
| | saveApiLogToSupabase('API名', endpoint, request, response, 'success');
|
| | });
|
| | ```
|
| |
|
| | ### 💾 データ保存
|
| |
|
| | ページデータは以下の形式でSupabaseに保存されます：
|
| |
|
| | ```json
|
| | {
|
| | "name": "page-name",
|
| | "html_content": "<div>...</div>",
|
| | "css_content": ".class {...}",
|
| | "components_json": {...},
|
| | "created_at": "2026-02-23T...",
|
| | "updated_at": "2026-02-23T..."
|
| | }
|
| | ```
|
| |
|
| | ### 🎨 カスタマイズ
|
| |
|
| | 新しいブロックを追加するには：
|
| |
|
| | 1. `index.html`の`blockManager.add()`に新しいブロックを登録
|
| | 2. `api-functions.js`にAPI呼び出し関数を追加
|
| | 3. イベントリスナーに`data-action`を登録
|
| |
|
| | ### 🔐 セキュリティ
|
| |
|
| | - Supabase RLSポリシーで行レベルセキュリティを設定
|
| | - API Keyは環境変数で管理
|
| | - CSRF Tokenを使用したAPI保護
|
| |
|
| | ### 📊 技術スタック
|
| |
|
| | - **Frontend**: GrapeJS, Bootstrap, jQuery
|
| | - **Backend**: Gradio (Python)
|
| | - **Database**: Supabase (PostgreSQL)
|
| | - **Hosting**: Hugging Face Spaces
|
| |
|
| | ### 🐛 トラブルシューティング
|
| |
|
| | **ブロックがドラッグできない**
|
| | - ブラウザのキャッシュをクリア
|
| | - ページをリロード
|
| |
|
| | **APIエラー**
|
| | - ネットワークタブでHTTPステータス確認
|
| | - Supabase接続情報を確認
|
| |
|
| | **保存できない**
|
| | - RLSポリシーを確認
|
| | - ブラウザコンソールのエラーログをチェック
|
| |
|
| | ### 📝 ライセンス
|
| |
|
| | MIT License
|
| |
|
| | ### 👤 作者
|
| |
|
| | Created for visual API workflow automation.
|
| |
|
| | ### 🔗 リンク
|
| |
|
| | - [GitHub Repository](https://github.com/your-repo)
|
| | - [Supabase Docs](https://supabase.com/docs)
|
| | - [GrapeJS Docs](https://grapesjs.com/docs/)
|
| | """)
|
| |
|
| |
|
| | if __name__ == "__main__":
|
| | app.launch(
|
| | server_name="0.0.0.0",
|
| | server_port=7860,
|
| | share=False,
|
| | show_error=True
|
| | )
|
| |
|
