Update app.py

app.py

@@ -2,7 +2,7 @@ import gradio as gr
 
 def update_ui(code):
     try:
-        # Wrap the user-provided code in a styled container
+        # Directly return the code wrapped in a div for styling
         return f"""
         <div style="border: 1px solid #ccc; padding: 10px; height: 400px; overflow: auto;">
             {code}
@@ -20,34 +20,11 @@ def interface():
                 ui_preview = gr.HTML(label="UI Preview")
                 error_output = gr.Textbox(label="Error", interactive=False)
         
-        # JavaScript execution handling
+        # Instead of using _js, we'll directly handle the JavaScript with Python
         code_input.change(
             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('script');
-                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>
-                `;
-            }
-            """
+            outputs=[ui_preview, error_output]
         )
 
         # Add example section
@@ -82,68 +59,45 @@ def interface():
                     """, "Flexbox Layout"),
                     ("""
                     <style>
-                        body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100%; background-color: #000; }
-                        #gameCanvas { border: 1px solid #fff; }
+                        body { margin: 0; padding: 0; }
+                        #gameCanvas { border: 1px solid black; }
                     </style>
                     <canvas id="gameCanvas" width="400" height="400"></canvas>
                     <script>
-                        const canvas = document.getElementById('gameCanvas');
-                        const ctx = canvas.getContext('2d');
-                        const grid = 20;
-                        let count = 0;
-                        let snake = {
-                            x: grid * 5,
-                            y: grid * 5,
-                            dx: grid,
-                            dy: 0,
-                            cells: [],
-                            maxCells: 4
-                        };
-                        let apple = {x: 0, y: 0};
-                        let score = 0;
+                        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 gameLoop() {
-                            requestAnimationFrame(gameLoop);
-                            if (++count < 4) return;
-                            count = 0;
+                        function game() {
                             ctx.clearRect(0, 0, canvas.width, canvas.height);
-                            snake.x += snake.dx;
-                            snake.y += snake.dy;
-                            if (snake.x < 0) snake.x = canvas.width - grid;
-                            else if (snake.x >= canvas.width) snake.x = 0;
-                            if (snake.y < 0) snake.y = canvas.height - grid;
-                            else if (snake.y >= canvas.height) snake.y = 0;
-                            snake.cells.unshift({x: snake.x, y: snake.y});
-                            if (snake.cells.length > snake.maxCells) snake.cells.pop();
-                            ctx.fillStyle = 'red';
-                            ctx.fillRect(apple.x, apple.y, grid - 1, grid - 1);
-                            ctx.fillStyle = 'green';
-                            snake.cells.forEach(function(cell, index) {
-                                ctx.fillRect(cell.x, cell.y, grid - 1, grid - 1);
-                                if (index !== 0 && cell.x === snake.x && cell.y === snake.y) {
-                                    snake.maxCells = 4;
-                                    score = 0;
-                                }
+                            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);
                             });
-                            if (snake.x === apple.x && snake.y === apple.y) {
-                                snake.maxCells++;
-                                score++;
-                                apple.x = Math.floor(Math.random() * 20) * grid;
-                                apple.y = Math.floor(Math.random() * 20) * grid;
+
+                            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();
                             }
-                            ctx.fillStyle = 'white';
-                            ctx.font = '20px Arial';
-                            ctx.fillText('Score: ' + score, 10, 20);
                         }
-                        document.addEventListener('keydown', function(e) {
-                            if (e.which === 37 && snake.dx === 0) { snake.dx = -grid; snake.dy = 0; }
-                            else if (e.which === 38 && snake.dy === 0) { snake.dx = 0; snake.dy = -grid; }
-                            else if (e.which === 39 && snake.dx === 0) { snake.dx = grid; snake.dy = 0; }
-                            else if (e.which === 40 && snake.dy === 0) { snake.dx = 0; snake.dy = grid; }
-                        });
-                        apple.x = Math.floor(Math.random() * 20) * grid;
-                        apple.y = Math.floor(Math.random() * 20) * grid;
-                        requestAnimationFrame(gameLoop);
+
+                        // Start the game
+                        init();
                     </script>
                     """, "Snake Game"),
                 ]