update

app.py

@@ -1,42 +1,37 @@
 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"
+# 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
     
-    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}')
+    inputs = []
+    for component in components:
+        label = component.get('label', 'No Label')
         field_type = component['type']
         
         if field_type == "Textbox":
             placeholder = component.get('placeholder', '')
-            code += f"    input_{i} = gr.Textbox(label='{label}', placeholder='{placeholder}')\n"
+            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)
-            code += f"    input_{i} = gr.Number(label='{label}', minimum={min_value}, maximum={max_value})\n"
+            inputs.append(gr.Number(label=label, minimum=min_value, maximum=max_value))
         elif field_type == "Dropdown":
             choices = component.get('choices', ['Option 1', 'Option 2'])
-            code += f"    input_{i} = gr.Dropdown(label='{label}', choices={choices})\n"
+            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)
-            code += f"    input_{i} = gr.Slider(label='{label}', minimum={min_value}, maximum={max_value})\n"
+            inputs.append(gr.Slider(label=label, minimum=min_value, maximum=max_value))
         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"
+            inputs.append(gr.Checkbox(label=label))
     
-    return code
+    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):
@@ -62,7 +57,7 @@ def update_visibility(component_type):
         gr.update(visible=component_type in ["Slider", "Number"])
     )
 
-# Gradio UI for designing the interface
+# Gradio UI for designing the interface with live preview
 def ui():
     with gr.Blocks() as demo:
         with gr.Column():
@@ -83,6 +78,10 @@ def ui():
             # 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, 
@@ -97,12 +96,19 @@ def ui():
                 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(
-                generate_gradio_code, 
+                lambda interface_name, components: generate_gradio_code(interface_name, components), 
                 inputs=[interface_name, components_list], 
                 outputs=generated_code
             )