import gradio as gr import re def update_ui(code): try: # Extract HTML and CSS html_content = re.search(r']*>[\s\S]*<\/html>', code, re.IGNORECASE) if html_content: html_content = html_content.group(0) else: # If no tag, assume all is HTML content html_content = code # Extract CSS if present in a {html_content} """ 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 = [ ('

Hello World

', "Basic Heading"), ('

This is a paragraph.

', "Styled Paragraph"), ('', "Interactive Button"), ("""

""", "CSS Box"), ("""

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