src/demo/space.py

import gradio as gr
from app import demo as app
import os

_docs = {'WorkflowBuilder': {'description': 'Professional Workflow Builder component with support for 25+ node types\ninspired by n8n and Langflow for AI agent development and MCP integration.', 'members': {'__init__': {'value': {'type': 'typing.Optional[typing.Dict[str, typing.Any]][\n    typing.Dict[str, typing.Any][str, typing.Any], None\n]', 'default': 'None', 'description': 'Default workflow data with nodes and edges'}, 'label': {'type': 'typing.Optional[str][str, None]', 'default': 'None', 'description': 'Component label'}, 'info': {'type': 'typing.Optional[str][str, None]', 'default': 'None', 'description': 'Additional component information'}, 'show_label': {'type': 'typing.Optional[bool][bool, None]', 'default': 'None', 'description': 'Whether to show the label'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'Whether to use container styling'}, 'scale': {'type': 'typing.Optional[int][int, None]', 'default': 'None', 'description': 'Relative width scale'}, 'min_width': {'type': 'int', 'default': '160', 'description': 'Minimum width in pixels'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'Whether component is visible'}, 'elem_id': {'type': 'typing.Optional[str][str, None]', 'default': 'None', 'description': 'HTML element ID'}, 'elem_classes': {'type': 'typing.Optional[typing.List[str]][\n    typing.List[str][str], None\n]', 'default': 'None', 'description': 'CSS classes'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'Whether to render immediately'}}, 'postprocess': {'value': {'type': 'typing.Dict[str, typing.Any][str, typing.Any]', 'description': None}}, 'preprocess': {'return': {'type': 'typing.Dict[str, typing.Any][str, typing.Any]', 'description': None}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': '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': {'type': None, 'default': None, 'description': 'This listener is triggered when the user changes the value of the WorkflowBuilder.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'WorkflowBuilder': []}}}

abs_path = os.path.join(os.path.dirname(__file__), "css.css")

with gr.Blocks(
    css=abs_path,
    theme=gr.themes.Default(
        font_mono=[
            gr.themes.GoogleFont("Inconsolata"),
            "monospace",
        ],
    ),
) as demo:
    gr.Markdown(
"""
# `gradio_workflowbuilder`

<div style="display: flex; gap: 7px;">
<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
</div>

workflow builder
""", elem_classes=["md-custom"], header_links=True)
    app.render()
    gr.Markdown(
"""
## 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
    )

```
""", elem_classes=["md-custom"], header_links=True)


    gr.Markdown("""
## `WorkflowBuilder`

### Initialization
""", elem_classes=["md-custom"], header_links=True)

    gr.ParamViewer(value=_docs["WorkflowBuilder"]["members"]["__init__"], linkify=[])


    gr.Markdown("### Events")
    gr.ParamViewer(value=_docs["WorkflowBuilder"]["events"], linkify=['Event'])




    gr.Markdown("""

### 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
```
""", elem_classes=["md-custom", "WorkflowBuilder-user-fn"], header_links=True)




    demo.load(None, js=r"""function() {
    const refs = {};
    const user_fn_refs = {
          WorkflowBuilder: [], };
    requestAnimationFrame(() => {

        Object.entries(user_fn_refs).forEach(([key, refs]) => {
            if (refs.length > 0) {
                const el = document.querySelector(`.${key}-user-fn`);
                if (!el) return;
                refs.forEach(ref => {
                    el.innerHTML = el.innerHTML.replace(
                        new RegExp("\\b"+ref+"\\b", "g"),
                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
                    );
                })
            }
        })

        Object.entries(refs).forEach(([key, refs]) => {
            if (refs.length > 0) {
                const el = document.querySelector(`.${key}`);
                if (!el) return;
                refs.forEach(ref => {
                    el.innerHTML = el.innerHTML.replace(
                        new RegExp("\\b"+ref+"\\b", "g"),
                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
                    );
                })
            }
        })
    })
}

""")

demo.launch()