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"""
{workflow_name}
{html_content}
"""
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("""
🚀 Open Full Editor
""")
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="