Update app.py

app.py

@@ -25,7 +25,29 @@ def interface():
             fn=update_ui, 
             inputs=code_input, 
             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
@@ -99,33 +121,11 @@ def interface():
                     </script>
                     """, "Snake Game"),
                 ]
-                js_in="""
-                    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>
-                        `;
-                    }
-                    """
+
                 for code, label in example_codes:
                     button = gr.Button(label)
                     example_buttons.append(button)
-                    button.click(fn=lambda x=code: x, outputs=code_input,js=js_in)
+                    button.click(fn=lambda x=code: x, outputs=code_input)
                     #button.click(fn=update_ui, inputs=code, outputs=code_input)
 
     return demo