|
|
---
|
|
|
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
|
|
|
```
|
|
|
|
|
|
|
