| | ---
|
| | tags: [gradio-custom-component, SimpleTextbox, workflow, builder, editor]
|
| | title: gradio_workflowbuilder
|
| | short_description: workflow builder
|
| | colorFrom: blue
|
| | colorTo: yellow
|
| | sdk: gradio
|
| | pinned: false
|
| | app_file: space.py
|
| | ---
|
| |
|
| | # `gradio_workflowbuilder`
|
| | <img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">
|
| |
|
| | workflow builder
|
| |
|
| | ## Installation
|
| |
|
| | ```bash
|
| | pip install gradio_workflowbuilder
|
| | ```
|
| |
|
| | ## Usage
|
| |
|
| | ```python
|
| | 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
|
| | )
|
| |
|
| | ```
|
| |
|
| | ## `WorkflowBuilder`
|
| |
|
| | ### Initialization
|
| |
|
| | <table>
|
| | <thead>
|
| | <tr>
|
| | <th align="left">name</th>
|
| | <th align="left" style="width: 25%;">type</th>
|
| | <th align="left">default</th>
|
| | <th align="left">description</th>
|
| | </tr>
|
| | </thead>
|
| | <tbody>
|
| | <tr>
|
| | <td align="left"><code>value</code></td>
|
| | <td align="left" style="width: 25%;">
|
| |
|
| | ```python
|
| | typing.Optional[typing.Dict[str, typing.Any]][
|
| | typing.Dict[str, typing.Any][str, typing.Any], None
|
| | ]
|
| | ```
|
| |
|
| | </td>
|
| | <td align="left"><code>None</code></td>
|
| | <td align="left">Default workflow data with nodes and edges</td>
|
| | </tr>
|
| |
|
| | <tr>
|
| | <td align="left"><code>label</code></td>
|
| | <td align="left" style="width: 25%;">
|
| |
|
| | ```python
|
| | typing.Optional[str][str, None]
|
| | ```
|
| |
|
| | </td>
|
| | <td align="left"><code>None</code></td>
|
| | <td align="left">Component label</td>
|
| | </tr>
|
| |
|
| | <tr>
|
| | <td align="left"><code>info</code></td>
|
| | <td align="left" style="width: 25%;">
|
| |
|
| | ```python
|
| | typing.Optional[str][str, None]
|
| | ```
|
| |
|
| | </td>
|
| | <td align="left"><code>None</code></td>
|
| | <td align="left">Additional component information</td>
|
| | </tr>
|
| |
|
| | <tr>
|
| | <td align="left"><code>show_label</code></td>
|
| | <td align="left" style="width: 25%;">
|
| |
|
| | ```python
|
| | typing.Optional[bool][bool, None]
|
| | ```
|
| |
|
| | </td>
|
| | <td align="left"><code>None</code></td>
|
| | <td align="left">Whether to show the label</td>
|
| | </tr>
|
| |
|
| | <tr>
|
| | <td align="left"><code>container</code></td>
|
| | <td align="left" style="width: 25%;">
|
| |
|
| | ```python
|
| | bool
|
| | ```
|
| |
|
| | </td>
|
| | <td align="left"><code>True</code></td>
|
| | <td align="left">Whether to use container styling</td>
|
| | </tr>
|
| |
|
| | <tr>
|
| | <td align="left"><code>scale</code></td>
|
| | <td align="left" style="width: 25%;">
|
| |
|
| | ```python
|
| | typing.Optional[int][int, None]
|
| | ```
|
| |
|
| | </td>
|
| | <td align="left"><code>None</code></td>
|
| | <td align="left">Relative width scale</td>
|
| | </tr>
|
| |
|
| | <tr>
|
| | <td align="left"><code>min_width</code></td>
|
| | <td align="left" style="width: 25%;">
|
| |
|
| | ```python
|
| | int
|
| | ```
|
| |
|
| | </td>
|
| | <td align="left"><code>160</code></td>
|
| | <td align="left">Minimum width in pixels</td>
|
| | </tr>
|
| |
|
| | <tr>
|
| | <td align="left"><code>visible</code></td>
|
| | <td align="left" style="width: 25%;">
|
| |
|
| | ```python
|
| | bool
|
| | ```
|
| |
|
| | </td>
|
| | <td align="left"><code>True</code></td>
|
| | <td align="left">Whether component is visible</td>
|
| | </tr>
|
| |
|
| | <tr>
|
| | <td align="left"><code>elem_id</code></td>
|
| | <td align="left" style="width: 25%;">
|
| |
|
| | ```python
|
| | typing.Optional[str][str, None]
|
| | ```
|
| |
|
| | </td>
|
| | <td align="left"><code>None</code></td>
|
| | <td align="left">HTML element ID</td>
|
| | </tr>
|
| |
|
| | <tr>
|
| | <td align="left"><code>elem_classes</code></td>
|
| | <td align="left" style="width: 25%;">
|
| |
|
| | ```python
|
| | typing.Optional[typing.List[str]][
|
| | typing.List[str][str], None
|
| | ]
|
| | ```
|
| |
|
| | </td>
|
| | <td align="left"><code>None</code></td>
|
| | <td align="left">CSS classes</td>
|
| | </tr>
|
| |
|
| | <tr>
|
| | <td align="left"><code>render</code></td>
|
| | <td align="left" style="width: 25%;">
|
| |
|
| | ```python
|
| | bool
|
| | ```
|
| |
|
| | </td>
|
| | <td align="left"><code>True</code></td>
|
| | <td align="left">Whether to render immediately</td>
|
| | </tr>
|
| | </tbody></table>
|
| |
|
| |
|
| | ### Events
|
| |
|
| | | name | description |
|
| | |:-----|:------------|
|
| | | `change` | Triggered when the value of the WorkflowBuilder changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input. |
|
| | | `input` | This listener is triggered when the user changes the value of the WorkflowBuilder. |
|
| |
|
| |
|
| |
|
| | ### User function
|
| |
|
| | The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
|
| |
|
| | - When used as an Input, the component only impacts the input signature of the user function.
|
| | - When used as an output, the component only impacts the return signature of the user function.
|
| |
|
| | The code snippet below is accurate in cases where the component is used as both an input and an output.
|
| |
|
| |
|
| |
|
| | ```python
|
| | def predict(
|
| | value: typing.Dict[str, typing.Any][str, typing.Any]
|
| | ) -> typing.Dict[str, typing.Any][str, typing.Any]:
|
| | return value
|
| | ```
|
| |
|
| |
|
