Update app.py

app.py

@@ -2,9 +2,28 @@ import gradio as gr
 
 def update_ui(code):
     try:
-        # Wrap the code in a secure iframe to run JavaScript safely
+        # Strip out scripts and handle them separately to avoid security issues
+        from bs4 import BeautifulSoup
+        
+        soup = BeautifulSoup(code, 'html.parser')
+        scripts = soup.find_all('script')
+        for script in scripts:
+            script.decompose()  # Remove script tags from HTML to prevent direct execution
+        
+        # Rebuild HTML without scripts for direct rendering
+        html_content = str(soup)
+        
+        # Collect script content
+        js_content = '\n'.join([script.string for script in scripts if script.string])
+        
+        # Return HTML wrapped in a div and scripts in a way that Gradio can handle
         return f"""
-        <iframe srcdoc='{code}' style="border: 1px solid #ccc; padding: 10px; height: 400px; width: 100%;"></iframe>
+        <div style="border: 1px solid #ccc; padding: 10px; height: 400px; overflow: auto;">
+            {html_content}
+        </div>
+        <script>
+            {js_content}
+        </script>
         """, None
     except Exception as e:
         return "", str(e)
@@ -18,14 +37,13 @@ def interface():
                 ui_preview = gr.HTML(label="UI Preview")
                 error_output = gr.Textbox(label="Error", interactive=False)
         
-        # Handle JavaScript execution by using an iframe
         code_input.change(
             fn=update_ui, 
             inputs=code_input, 
             outputs=[ui_preview, error_output]
         )
 
-        # Add example section
+        # Example codes remain the same, but ensure the snake game is full HTML
         with gr.Accordion("HTML/CSS/JS Code Examples", open=False):
             with gr.Column():
                 example_buttons = []