Spaces:

kenken999
/

api-workflow-builder

Paused

File size: 11,866 Bytes

import gradio as gr
import json
import os
from datetime import datetime

# Gradio App for API Workflow Builder
# Visual page builder with drag-and-drop interface

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

# Gradio Interface
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("🔄 更新")
        
        # Event handlers
        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/)

        """)

# Launch app
if __name__ == "__main__":
    app.launch(
        server_name="0.0.0.0",
        server_port=7860,
        share=False,
        show_error=True
    )