import gradio as gr
import re

def update_ui(code):
    try:
        # This is a simplistic approach. In reality, you'd parse HTML and CSS to render UI.
        html_pattern = r'<[^>]+>'
        css_pattern = r'{[^}]*}'
        
        html = re.findall(html_pattern, code)
        css = re.findall(css_pattern, code)
        
        # For demonstration, we'll just combine HTML and CSS into one string.
        ui_output = ''.join(html) + ''.join(css)
        return ui_output, 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 here", language="html")
            with gr.Column():
                ui_preview = gr.HTML(label="UI Preview")
                error_output = gr.Textbox(label="Error", interactive=False)
        
        code_input.change(fn=update_ui, inputs=code_input, outputs=[ui_preview, error_output])
        with gr.Accordion("HTML/CSS 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"),
                ]

                for code, label in example_codes:
                    button = gr.Button(label)
                    example_buttons.append(button)
                    button.click(fn=lambda x=code: x, outputs=code_input)
    return demo

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