Update app.py

app.py

@@ -24,7 +24,30 @@ def interface():
         code_input.change(
             fn=update_ui, 
             inputs=code_input, 
-            outputs=[ui_preview, error_output]
+            outputs=[ui_preview, error_output],
+            js="""
+            function(code) {
+                // Create a temporary div to parse the HTML/CSS/JS
+                const tempDiv = document.createElement('div');
+                tempDiv.innerHTML = code;
+
+                // Handle JavaScript by creating new script elements
+                const scripts = tempDiv.querySelectorAll('scriptDebug');
+                scripts.forEach(script => {
+                    const newScript = document.createElement('script');
+                    newScript.textContent = script.textContent;
+                    document.body.appendChild(newScript);
+                    script.remove(); // Remove original script to avoid double execution
+                });
+
+                // Wrap the content in a styled div for better presentation
+                return `
+                    <div style="border: 1px solid #ccc; padding: 10px; height: 400px; overflow: auto;">
+                        ${tempDiv.innerHTML}
+                    </div>
+                `;
+            }
+            """
         )
         
         # Add example section
@@ -102,8 +125,8 @@ def interface():
                 for code, label in example_codes:
                     button = gr.Button(label)
                     example_buttons.append(button)
-                    #button.click(fn=lambda x=code: x, outputs=code_input)
-                    button.click(fn=update_ui, inputs=code, outputs=code_input)
+                    button.click(fn=lambda x=code: x, outputs=code_input)
+                    #button.click(fn=update_ui, inputs=code, outputs=code_input)
 
     return demo