update

app.py

@@ -1,120 +1,248 @@
 import gradio as gr
+import json
+import re
 
-# 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
+# Utility functions
+def sanitize_name(name):
+    return re.sub(r'\W|^(?=\d)', '_', name).lower()
+
+def validate_input(component):
+    if component['type'] in ['Number', 'Slider']:
+        min_value = float(component.get('min_value', 0))
+        max_value = float(component.get('max_value', 100))
+        if min_value >= max_value:
+            return False, "Min value must be less than max value"
+    elif component['type'] in ['Dropdown', 'Radio']:
+        if not component.get('choices'):
+            return False, f"{component['type']} must have at least one choice"
+    return True, ""
+
+# Core functionality
+def generate_gradio_code(interface_name, components):
+    sanitized_name = sanitize_name(interface_name)
+    code = f"import gradio as gr\n\n"
+    code += f"def {sanitized_name}_interface(*args):\n"
+    code += f"    # Your processing logic here\n"
+    code += f"    results = [arg for arg in args]\n"
+    code += f"    return results\n\n"
     
-    inputs = []
-    for component in components:
-        label = component.get('label', 'No Label')
+    code += f"with gr.Blocks() as {sanitized_name}:\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', '')
-            inputs.append(gr.Textbox(label=label, placeholder=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)
-            inputs.append(gr.Number(label=label, minimum=min_value, maximum=max_value))
+            code += f"    input_{i} = gr.Number(label='{label}', value=0, minimum={min_value}, maximum={max_value})\n"
         elif field_type == "Dropdown":
             choices = component.get('choices', ['Option 1', 'Option 2'])
-            inputs.append(gr.Dropdown(label=label, choices=choices))
+            choices_str = json.dumps(choices)
+            code += f"    input_{i} = gr.Dropdown(label='{label}', choices={choices_str})\n"
         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))
+            code += f"    input_{i} = gr.Slider(label='{label}', minimum={min_value}, maximum={max_value})\n"
         elif field_type == "Checkbox":
-            inputs.append(gr.Checkbox(label=label))
+            code += f"    input_{i} = gr.Checkbox(label='{label}')\n"
+        elif field_type == "Radio":
+            choices = component.get('choices', ['Option 1', 'Option 2'])
+            choices_str = json.dumps(choices)
+            code += f"    input_{i} = gr.Radio(label='{label}', choices={choices_str})\n"
+        
+        code += f"    inputs.append(input_{i})\n"
+
+    code += f"    outputs = [gr.Textbox(label='Output {i+1}') for i in range(len(inputs))]\n"
+    code += f"    gr.Interface(fn={sanitized_name}_interface, inputs=inputs, outputs=outputs).launch()\n"
     
-    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."
+    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(',')
-        
+        new_component["min_value"] = float(min_value) if min_value else 0
+        new_component["max_value"] = float(max_value) if max_value else 100
+    elif component_type in ["Dropdown", "Radio"]:
+        choices_list = [choice.strip() for choice in choices.split(',') if choice.strip()]
+        if not choices_list:
+            choices_list = ['Option 1', 'Option 2']
+        new_component["choices"] = choices_list
+    
+    is_valid, error_message = validate_input(new_component)
+    if not is_valid:
+        return components, components, gr.update(visible=True, value=error_message)
+    
     components.append(new_component)
-    return components, components
+    return components, components, gr.update(visible=True, value="Field added successfully!")
 
-# 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 ["Dropdown", "Radio"]),
         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")
+def edit_field(index, component_type, field_label, placeholder_text, min_value, max_value, choices, components):
+    try:
+        index = int(index)
+        if 0 <= index < len(components):
+            new_component = {"type": component_type, "label": field_label}
             
-            # 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)
+            if component_type == "Textbox":
+                new_component["placeholder"] = placeholder_text
+            elif component_type in ["Number", "Slider"]:
+                new_component["min_value"] = float(min_value) if min_value else 0
+                new_component["max_value"] = float(max_value) if max_value else 100
+            elif component_type in ["Dropdown", "Radio"]:
+                choices_list = [choice.strip() for choice in choices.split(',') if choice.strip()]
+                if not choices_list:
+                    choices_list = ['Option 1', 'Option 2']
+                new_component["choices"] = choices_list
             
-            # 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")
+            is_valid, error_message = validate_input(new_component)
+            if not is_valid:
+                return components, components, gr.update(visible=True, value=error_message)
             
-            # Live UI preview
-            preview_button = gr.Button("Preview UI")
-            ui_preview = gr.HTML(label="UI Preview will appear here")
+            components[index] = new_component
+            return components, components, gr.update(visible=True, value="Field updated successfully!")
+        else:
+            return components, components, gr.update(visible=True, value="Invalid field index")
+    except ValueError:
+        return components, components, gr.update(visible=True, value="Invalid index. Please enter a number.")
 
-            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")
+def delete_field(index, components):
+    try:
+        index = int(index)
+        if 0 <= index < len(components):
+            del components[index]
+            return components, components, gr.update(visible=True, value="Field deleted successfully!")
+        else:
+            return components, components, gr.update(visible=True, value="Invalid field index")
+    except ValueError:
+        return components, components, gr.update(visible=True, value="Invalid index. Please enter a number.")
+
+def save_design(interface_name, components):
+    design = {
+        "interface_name": interface_name,
+        "components": components
+    }
+    filename = f"{sanitize_name(interface_name)}_design.json"
+    with open(filename, 'w') as f:
+        json.dump(design, f, indent=2)
+    return gr.update(visible=True, value=f"Design saved to {filename}")
+
+def load_design(file):
+    if file is None:
+        return None, [], gr.update(visible=True, value="No file selected")
+    
+    try:
+        design = json.load(file)
+        interface_name = design.get("interface_name", "")
+        components = design.get("components", [])
+        return interface_name, components, gr.update(visible=True, value="Design loaded successfully!")
+    except json.JSONDecodeError:
+        return None, [], gr.update(visible=True, value="Invalid JSON file")
+
+def ui():
+    with gr.Blocks() as demo:
+        gr.Markdown("# Gradio UI Designer")
+        gr.Markdown("Design your Gradio interface by adding and customizing fields. Generate code with a single click!")
+        
+        with gr.Row():
+            with gr.Column(scale=2):
+                interface_name = gr.Textbox(label="Interface Name", placeholder="Enter the interface name")
+                
+                with gr.Group():
+                    gr.Markdown("### Add/Edit Field")
+                    component_type = gr.Dropdown(
+                        choices=["Textbox", "Number", "Dropdown", "Slider", "Checkbox", "Radio"],
+                        label="Field Type"
+                    )
+                    field_label = gr.Textbox(label="Field Label", placeholder="Enter field label")
+                    placeholder_text = gr.Textbox(
+                        label="Placeholder (for Textbox)",
+                        visible=False,
+                        placeholder="Enter placeholder text"
+                    )
+                    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/Radio)",
+                        visible=False,
+                        placeholder="e.g., Option 1, Option 2"
+                    )
+                
+                components_list = gr.State([])
+                add_button = gr.Button("Add Field")
+                edit_index = gr.Number(label="Field Index to Edit/Delete", value=0)
+                edit_button = gr.Button("Edit Field")
+                delete_button = gr.Button("Delete Field")
+                
+                feedback = gr.Textbox(label="Feedback", visible=True)
             
-            generate_button.click(
-                lambda interface_name, components: generate_gradio_code(interface_name, components), 
-                inputs=[interface_name, components_list], 
-                outputs=generated_code
-            )
+            with gr.Column(scale=3):
+                components_display = gr.JSON(label="Component List")
+                generated_code = gr.Code(label="Generated Code", language="python")
+                generate_button = gr.Button("Generate Code")
+        
+        with gr.Row():
+            save_button = gr.Button("Save Design")
+            load_button = gr.UploadButton("Load Design", file_types=[".json"])
+        
+        # Event handlers
+        component_type.change(
+            update_visibility,
+            inputs=[component_type],
+            outputs=[placeholder_text, min_value, choices, max_value]
+        )
+        
+        add_button.click(
+            add_field,
+            inputs=[component_type, field_label, placeholder_text, min_value, max_value, choices, components_list],
+            outputs=[components_display, components_list, feedback]
+        )
+        
+        edit_button.click(
+            edit_field,
+            inputs=[edit_index, component_type, field_label, placeholder_text, min_value, max_value, choices, components_list],
+            outputs=[components_display, components_list, feedback]
+        )
+        
+        delete_button.click(
+            delete_field,
+            inputs=[edit_index, components_list],
+            outputs=[components_display, components_list, feedback]
+        )
+        
+        generate_button.click(
+            generate_gradio_code,
+            inputs=[interface_name, components_list],
+            outputs=generated_code
+        )
+        
+        save_button.click(
+            save_design,
+            inputs=[interface_name, components_list],
+            outputs=[feedback]
+        )
+        
+        load_button.upload(
+            load_design,
+            inputs=[load_button],
+            outputs=[interface_name, components_list, feedback]
+        )
     
     return demo
 
 # Launch the Gradio app
 if __name__ == "__main__":
-    ui().launch()
+    ui().launch()