Update app.py

app.py

@@ -25,29 +25,7 @@ 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
@@ -121,11 +99,33 @@ 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)
+                    button.click(fn=lambda x=code: x, outputs=code_input,js=js_in)
                     #button.click(fn=update_ui, inputs=code, outputs=code_input)
 
     return demo