s

app.py

@@ -1,61 +1,106 @@
 import gradio as gr
+import json
 
-# Function to generate Gradio code based on user inputs
-def generate_gradio_code(interface_name, num_fields, field_types, field_labels):
-    # Begin constructing the Gradio code
+# 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"    # Define what the function should return based on inputs\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 in range(num_fields):
-        field_type = field_types[i]
-        field_label = field_labels[i]
-        if field_type == "Text":
-            code += f"    input_{i} = gr.Textbox(label='{field_label}')\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":
-            code += f"    input_{i} = gr.Number(label='{field_label}')\n"
+            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":
-            code += f"    input_{i} = gr.Dropdown(label='{field_label}', choices=['Option 1', 'Option 2'])\n"
+            choices = component.get('choices', ['Option 1', 'Option 2'])
+            code += f"    input_{i} = gr.Dropdown(label='{label}', choices={choices})\n"
         elif field_type == "Slider":
-            code += f"    input_{i} = gr.Slider(label='{field_label}', minimum=0, maximum=100)\n"
+            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='{field_label}')\n"
+            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 user inputs
+# 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")
-            num_fields = gr.Number(label="Number of Fields", value=1, precision=0)
             
-            field_types = gr.Dropdown(choices=["Text", "Number", "Dropdown", "Slider", "Checkbox"], 
-                                      label="Field Types", interactive=True, multiselect=True)
-            field_labels = gr.Textbox(label="Field Labels", placeholder="Enter field labels separated by commas")
-
-            generate_button = gr.Button("Generate Code")
-            generated_code = gr.Code(label="Generated Gradio Code")
-
-        # Logic to generate code based on input
-        def on_generate(interface_name, num_fields, field_types, field_labels):
-            field_labels_list = field_labels.split(",")
-            return generate_gradio_code(interface_name, int(num_fields), field_types, field_labels_list)
+            # 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([])
 
-        generate_button.click(on_generate, inputs=[interface_name, num_fields, field_types, field_labels], 
-                              outputs=generated_code)
+            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()
+    ui().launch()