Update app.py

app.py

@@ -1,51 +1,160 @@
 import gradio as gr
 
-def snake_game():
-    return """
-    <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();
+def update_ui(code):
+    try:
+        # Wrap the user-provided code in a styled container
+        return f"""
+        <div style="border: 1px solid #ccc; padding: 10px; height: 400px; overflow: auto;">
+            {code}
+        </div>
+        """, None
+    except Exception as e:
+        return "", str(e)
+
+def interface():
+    with gr.Blocks() as demo:
+        gr.Markdown("# Learn Frontend UI")
+        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")
+                error_output = gr.Textbox(label="Error", interactive=False)
+        
+        # JavaScript execution handling
+        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>
+                `;
             }
-        }
+            """
+        )
+
+        # Add example section
+        with gr.Accordion("HTML/CSS/JS Code Examples", open=False):
+            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"),
+                    ("""
+                    <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; display: flex; justify-content: center; align-items: center; height: 100%; background-color: #000; }
+                        #gameCanvas { border: 1px solid #fff; }
+                    </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;
+
+                        function gameLoop() {
+                            requestAnimationFrame(gameLoop);
+                            if (++count < 4) return;
+                            count = 0;
+                            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;
+                                }
+                            });
+                            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 = '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);
+                    </script>
+                    """, "Snake Game"),
+                ]
 
-        // Start the game
-        init();
-    </script>
-    """
+                for code, label in example_codes:
+                    button = gr.Button(label)
+                    example_buttons.append(button)
+                    button.click(fn=lambda x=code: x, outputs=code_input)
 
-with gr.Blocks() as demo:
-    gr.HTML(snake_game(), elem_id="snake-game-block")
+    return demo
 
-demo.launch()
+if __name__ == "__main__":
+    demo = interface()
+    demo.launch()