app.py

import gradio as gr

def update_ui(code):
    try:
        # Directly return the code wrapped in a div for styling
        return f"""
        <div style="border: 1px solid #ccc; padding: 10px; height: 400px; width: 100%; 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)
        
        # 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('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
        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; }
                        #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();
                            }
                        }

                        // Start the game
                        init();
                    </script>
                    """, "Snake Game"),
                ]

                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=update_ui, inputs=code, outputs=code_input)

    return demo

if __name__ == "__main__":
    demo = interface()
    demo.launch()