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()