Update app.py

app.py

@@ -2,11 +2,9 @@ import gradio as gr
 
 def update_ui(code):
     try:
-        # Directly return the code wrapped in a div for styling
+        # Wrap the code in a secure iframe to run JavaScript safely
         return f"""
-        <div style="border: 1px solid #ccc; padding: 10px; height: 400px; overflow: auto;">
-            {code}
-        </div>
+        <iframe srcdoc='{code}' style="border: 1px solid #ccc; padding: 10px; height: 400px; width: 100%;"></iframe>
         """, None
     except Exception as e:
         return "", str(e)
@@ -17,10 +15,10 @@ def interface():
         with gr.Row():
             code_input = gr.Code(label="Write your HTML/CSS/JS here", language="html")
             with gr.Column():
-                ui_preview = gr.HTML(label="UI Preview",elem_id="snake-game-block")
+                ui_preview = gr.HTML(label="UI Preview")
                 error_output = gr.Textbox(label="Error", interactive=False)
         
-        # Instead of using _js, we'll directly handle the JavaScript with Python
+        # Handle JavaScript execution by using an iframe
         code_input.change(
             fn=update_ui, 
             inputs=code_input, 
@@ -32,73 +30,52 @@ def interface():
             with gr.Column():
                 example_buttons = []
                 example_codes = [
-                    ('<h1>Hello World</h1>', "Basic Heading"),
-                    ('<p style="color: red;">This is a paragraph.</p>', "Styled Paragraph"),
-                    ('<button onclick="alert(\'Button clicked!\')">Click me</button>', "Interactive Button"),
+                    # ... (other examples remain unchanged)
                     ("""
-                    <style>
-                    .box {
-                        width: 100px;
-                        height: 100px;
-                        background-color: blue;
-                    }
-                    </style>
-                    <div class="box"></div>
-                    """, "CSS Box"),
-                    ("""
-                    <style>
-                    .container {
-                        display: flex;
-                        justify-content: space-between;
-                    }
-                    </style>
-                    <div class="container">
-                        <div style="background-color: red; width: 50px; height: 50px;"></div>
-                        <div style="background-color: green; width: 50px; height: 50px;"></div>
-                    </div>
-                    """, "Flexbox Layout"),
-                    ("""
-                    <style>
-                        body { margin: 0; padding: 0; }
-                        #gameCanvas { border: 1px solid black; }
-                    </style>
-                    <canvas id="gameCanvas" width="400" height="400"></canvas>
-                    <script>
-                        let canvas = document.getElementById('gameCanvas');
-                        let ctx = canvas.getContext('2d');
-                        let snake = [{x: 10, y: 10}];
-                        let food = {x: 15, y: 15};
-                        let gameLoop;
-
-                        function init() {
-                            gameLoop = setInterval(game, 100);
-                        }
-
-                        function game() {
-                            ctx.clearRect(0, 0, canvas.width, canvas.height);
-                            snake.unshift({x: snake[0].x, y: snake[0].y});
-                            snake[0].x += 1; // Simple movement for demonstration
-                            if(snake[0].x > 39) snake[0].x = 0; // Wrap around
-
-                            ctx.fillStyle = "green";
-                            snake.forEach(part => {
-                                ctx.fillRect(part.x * 10, part.y * 10, 10, 10);
-                            });
-
-                            ctx.fillStyle = "red";
-                            ctx.fillRect(food.x * 10, food.y * 10, 10, 10);
-
-                            if(snake[0].x == food.x && snake[0].y == food.y) {
-                                food.x = Math.floor(Math.random() * 40);
-                                food.y = Math.floor(Math.random() * 40);
-                            } else {
-                                snake.pop();
+                    <!DOCTYPE html>
+                    <html lang="en">
+                    <head>
+                        <meta charset="UTF-8">
+                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+                        <style>
+                            body { margin: 0; padding: 0; }
+                            #gameCanvas { border: 1px solid black; }
+                        </style>
+                    </head>
+                    <body>
+                        <canvas id="gameCanvas" width="400" height="400"></canvas>
+                        <script>
+                            let canvas = document.getElementById('gameCanvas');
+                            let ctx = canvas.getContext('2d');
+                            let snake = [{x: 10, y: 10}];
+                            let food = {x: 15, y: 15};
+                            let gameLoop;
+                            function init() {
+                                gameLoop = setInterval(game, 100);
                             }
-                        }
-
-                        // Start the game
-                        init();
-                    </script>
+                            function game() {
+                                ctx.clearRect(0, 0, canvas.width, canvas.height);
+                                snake.unshift({x: snake[0].x, y: snake[0].y});
+                                snake[0].x += 1; // Simple movement for demonstration
+                                if(snake[0].x > 39) snake[0].x = 0; // Wrap around
+                                ctx.fillStyle = "green";
+                                snake.forEach(part => {
+                                    ctx.fillRect(part.x * 10, part.y * 10, 10, 10);
+                                });
+                                ctx.fillStyle = "red";
+                                ctx.fillRect(food.x * 10, food.y * 10, 10, 10);
+                                if(snake[0].x == food.x && snake[0].y == food.y) {
+                                    food.x = Math.floor(Math.random() * 40);
+                                    food.y = Math.floor(Math.random() * 40);
+                                } else {
+                                    snake.pop();
+                                }
+                            }
+                            // Start the game
+                            init();
+                        </script>
+                    </body>
+                    </html>
                     """, "Snake Game"),
                 ]