File size: 4,855 Bytes
3f10e1f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 |
import gradio as gr
from gradio_workflowbuilder import WorkflowBuilder
import json
def export_workflow(workflow_data):
"""Export workflow as formatted JSON"""
if not workflow_data:
return "No workflow to export"
return json.dumps(workflow_data, indent=2)
# Create the main interface
with gr.Blocks(
title="🎨 Visual Workflow Builder",
theme=gr.themes.Soft(),
css="""
.main-container { max-width: 1600px; margin: 0 auto; }
.workflow-section { margin-bottom: 2rem; }
.button-row { display: flex; gap: 1rem; justify-content: center; margin: 1rem 0; }
.component-description {
padding: 24px;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
border-radius: 12px;
border-left: 4px solid #3b82f6;
margin: 16px 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.component-description p {
margin: 10px 0;
line-height: 1.6;
color: #374151;
}
.base-description {
font-size: 17px;
font-weight: 600;
color: #1e293b;
}
.base-description strong {
color: #3b82f6;
font-weight: 700;
}
.feature-description {
font-size: 16px;
color: #1e293b;
font-weight: 500;
}
.customization-note {
font-size: 15px;
color: #64748b;
font-style: italic;
}
.sample-intro {
font-size: 15px;
color: #1e293b;
font-weight: 600;
margin-top: 16px;
border-top: 1px solid #e2e8f0;
padding-top: 16px;
}
"""
) as demo:
with gr.Column(elem_classes=["main-container"]):
gr.Markdown("""
# 🎨 Visual Workflow Builder
**Create sophisticated workflows with drag and drop simplicity.**
""")
# Simple description section with styling
gr.HTML("""
<div class="component-description">
<p class="base-description">Base custom component powered by <strong>svelteflow</strong>.</p>
<p class="feature-description">Create custom workflows.</p>
<p class="customization-note">You can customise the nodes as well as the design of the workflow.</p>
<p class="sample-intro">Here is a sample:</p>
</div>
""")
# Main workflow builder section
with gr.Column(elem_classes=["workflow-section"]):
workflow_builder = WorkflowBuilder(
label="🎨 Visual Workflow Designer",
info="Drag components from the sidebar → Connect nodes by dragging from output (right) to input (left) → Click nodes to edit properties"
)
# Export section below the workflow
gr.Markdown("## 💾 Export Workflow")
with gr.Row():
with gr.Column():
export_output = gr.Code(
language="json",
label="Workflow Configuration",
lines=10
)
# Action button
with gr.Row(elem_classes=["button-row"]):
export_btn = gr.Button("💾 Export JSON", variant="primary", size="lg")
# Instructions
with gr.Accordion("📖 How to Use", open=False):
gr.Markdown("""
### 🚀 Getting Started
1. **Add Components**: Drag items from the left sidebar onto the canvas
2. **Connect Nodes**: Drag from the blue circle on the right of a node to the left circle of another
3. **Edit Properties**: Click any node to see its editable properties on the right panel
4. **Organize**: Drag nodes around to create a clean workflow layout
5. **Delete**: Use the ✕ button on nodes or click the red circle on connections
### 🎯 Component Types
- **📥 Inputs**: Text fields, file uploads, number inputs
- **⚙️ Processing**: Language models, text processors, conditionals
- **📤 Outputs**: Text displays, file exports, charts
- **🔧 Tools**: API calls, data transformers, validators
### 💡 Pro Tips
- **Collapsible Panels**: Use the arrow buttons to hide/show sidebars
- **Live Updates**: Properties update in real-time as you edit
- **Export Options**: Get JSON config for your workflow
""")
# Event handlers
export_btn.click(
fn=export_workflow,
inputs=[workflow_builder],
outputs=[export_output]
)
if __name__ == "__main__":
demo.launch(
server_name="0.0.0.0",
show_error=True
)
|