app.py

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])
    
    return demo

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