File size: 5,018 Bytes
10b722d
 
5b675bb
 
10b722d
 
5b675bb
10b722d
 
 
 
 
5b675bb
 
 
 
 
 
 
10b722d
5b675bb
 
 
10b722d
5b675bb
 
10b722d
5b675bb
 
 
10b722d
5b675bb
 
10b722d
5b675bb
10b722d
 
5b675bb
10b722d
 
3884c94
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5b675bb
10b722d
 
 
5b675bb
10b722d
 
5b675bb
 
 
 
 
 
 
 
 
 
10b722d
3884c94
5b675bb
 
10b722d
3884c94
 
 
 
 
5b675bb
3884c94
 
 
 
 
 
5b675bb
 
 
 
 
3884c94
 
 
 
 
5b675bb
10b722d
 
 
 
5b675bb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
import gradio as gr

# 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

# 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
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")

            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 and generate code button
            generate_button = gr.Button("Generate Code")
            generated_code = gr.Code(label="Generated Code")
            
            generate_button.click(
                generate_gradio_code, 
                inputs=[interface_name, components_list], 
                outputs=generated_code
            )
    
    return demo

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