app.py

import gradio as gr

# Function to dynamically create Gradio UI elements for preview
def generate_ui_preview(components):
    # A function to be linked to the dynamically created interface
    def mock_fn(*args):
        return args
    
    inputs = []
    for component in components:
        label = component.get('label', 'No Label')
        field_type = component['type']
        
        if field_type == "Textbox":
            placeholder = component.get('placeholder', '')
            inputs.append(gr.Textbox(label=label, placeholder=placeholder))
        elif field_type == "Number":
            min_value = component.get('min_value', 0)
            max_value = component.get('max_value', 100)
            inputs.append(gr.Number(label=label, minimum=min_value, maximum=max_value))
        elif field_type == "Dropdown":
            choices = component.get('choices', ['Option 1', 'Option 2'])
            inputs.append(gr.Dropdown(label=label, choices=choices))
        elif field_type == "Slider":
            min_value = component.get('min_value', 0)
            max_value = component.get('max_value', 100)
            inputs.append(gr.Slider(label=label, minimum=min_value, maximum=max_value))
        elif field_type == "Checkbox":
            inputs.append(gr.Checkbox(label=label))
    
    if len(inputs) > 0:
        return gr.Interface(fn=mock_fn, inputs=inputs, outputs=inputs).launch(prevent_thread_lock=True)
    else:
        return "No components added yet."

# Function to handle dynamic field addition
def add_field(component_type, field_label, placeholder_text, min_value, max_value, choices, components):
    new_component = {"type": component_type, "label": field_label}
    
    if component_type == "Textbox":
        new_component["placeholder"] = placeholder_text
    elif component_type in ["Number", "Slider"]:
        new_component["min_value"] = min_value
        new_component["max_value"] = max_value
    elif component_type == "Dropdown":
        new_component["choices"] = choices.split(',')
        
    components.append(new_component)
    return components, components

# Function to update the visibility of specific options based on the component type
def update_visibility(component_type):
    return (
        gr.update(visible=component_type == "Textbox"),
        gr.update(visible=component_type in ["Slider", "Number"]),
        gr.update(visible=component_type == "Dropdown"),
        gr.update(visible=component_type in ["Slider", "Number"])
    )

# Gradio UI for designing the interface with live preview
def ui():
    with gr.Blocks() as demo:
        with gr.Column():
            gr.Markdown("### Gradio UI Designer")
            interface_name = gr.Textbox(label="Interface Name", placeholder="Enter the interface name")
            
            # Components UI
            component_type = gr.Dropdown(choices=["Textbox", "Number", "Dropdown", "Slider", "Checkbox"], label="Field Type")
            field_label = gr.Textbox(label="Field Label", placeholder="Enter field label")
            placeholder_text = gr.Textbox(label="Placeholder (for Textbox)", visible=False)
            min_value = gr.Number(label="Min Value (for Slider/Number)", value=0, visible=False)
            max_value = gr.Number(label="Max Value (for Slider/Number)", value=100, visible=False)
            choices = gr.Textbox(label="Choices (comma separated for Dropdown)", visible=False)
            
            # Components list to track fields
            components_list = gr.State([])

            # Add field button and component preview
            add_button = gr.Button("Add Field")
            component_preview = gr.JSON(label="Component List")
            
            # Live UI preview
            preview_button = gr.Button("Preview UI")
            ui_preview = gr.HTML(label="UI Preview will appear here")

            add_button.click(
                add_field, 
                inputs=[component_type, field_label, placeholder_text, min_value, max_value, choices, components_list], 
                outputs=[component_preview, components_list]
            )
            
            # Update visibility based on the field type
            component_type.change(
                update_visibility, 
                inputs=[component_type], 
                outputs=[placeholder_text, min_value, choices, max_value]
            )
            
            # Preview the dynamically generated UI
            preview_button.click(
                generate_ui_preview, 
                inputs=[components_list], 
                outputs=[ui_preview]
            )
            
            # Preview and generate code button
            generate_button = gr.Button("Generate Code")
            generated_code = gr.Code(label="Generated Code")
            
            generate_button.click(
                lambda interface_name, components: generate_gradio_code(interface_name, components), 
                inputs=[interface_name, components_list], 
                outputs=generated_code
            )
    
    return demo

# Launch the Gradio app
if __name__ == "__main__":
    ui().launch()