app.py

import gradio as gr
import json

# Function to generate Gradio code dynamically
def generate_gradio_code(interface_name, components):
    code = f"import gradio as gr\n\n"
    code += f"def {interface_name.lower()}_interface(*args):\n"
    code += f"    # Your processing logic here\n"
    code += f"    return args\n\n"
    
    code += f"with gr.Blocks() as {interface_name.lower()}:\n"
    code += f"    inputs = []\n"
    
    for i, component in enumerate(components):
        label = component.get('label', f'Field {i+1}')
        field_type = component['type']
        
        if field_type == "Textbox":
            placeholder = component.get('placeholder', '')
            code += f"    input_{i} = gr.Textbox(label='{label}', placeholder='{placeholder}')\n"
        elif field_type == "Number":
            min_value = component.get('min_value', 0)
            max_value = component.get('max_value', 100)
            code += f"    input_{i} = gr.Number(label='{label}', minimum={min_value}, maximum={max_value})\n"
        elif field_type == "Dropdown":
            choices = component.get('choices', ['Option 1', 'Option 2'])
            code += f"    input_{i} = gr.Dropdown(label='{label}', choices={choices})\n"
        elif field_type == "Slider":
            min_value = component.get('min_value', 0)
            max_value = component.get('max_value', 100)
            code += f"    input_{i} = gr.Slider(label='{label}', minimum={min_value}, maximum={max_value})\n"
        elif field_type == "Checkbox":
            code += f"    input_{i} = gr.Checkbox(label='{label}')\n"
        
        code += f"    inputs.append(input_{i})\n"

    code += f"    outputs = gr.Textbox(label='Output')\n"
    code += f"    gr.Interface(fn={interface_name.lower()}_interface, inputs=inputs, outputs=outputs).launch()\n"
    
    return code

# Gradio UI for designing the interface
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([])

            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 gr.JSON.update(value=components), components
            
            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"])
                )
            
            add_button = gr.Button("Add Field")
            component_preview = gr.JSON(label="Component List")

            # Linking the add field button
            add_button.click(add_field, 
                             inputs=[component_type, field_label, placeholder_text, min_value, max_value, choices, components_list], 
                             outputs=[component_preview, components_list])
            
            component_type.change(update_visibility, inputs=[component_type], 
                                  outputs=[placeholder_text, min_value, choices, max_value])
            
            # Preview and generate code button
            generate_button = gr.Button("Generate Code")
            generated_code = gr.Code(label="Generated Code")
            
            def generate_code(interface_name, components):
                return generate_gradio_code(interface_name, components)
            
            generate_button.click(generate_code, inputs=[interface_name, components_list], outputs=generated_code)
    
    return demo

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