Spaces:
Sleeping
Sleeping
| import gradio as gr | |
| import re | |
| def update_ui(code): | |
| try: | |
| # Extract HTML and CSS | |
| html_content = re.search(r'<html[^>]*>[\s\S]*<\/html>', code, re.IGNORECASE) | |
| if html_content: | |
| html_content = html_content.group(0) | |
| else: | |
| # If no <html> tag, assume all is HTML content | |
| html_content = code | |
| # Extract CSS if present in a <style> tag | |
| css_content = re.search(r'<style[^>]*>[\s\S]*?<\/style>', code, re.IGNORECASE) | |
| css_string = '' | |
| if css_content: | |
| css_string = css_content.group(0) | |
| # Remove <style> tags for direct application | |
| css_only = re.sub(r'<style>|<\/style>', '', css_string) if css_string else '' | |
| # Combine HTML with CSS for preview | |
| ui_output = f""" | |
| <style>{css_only}</style> | |
| {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 = [ | |
| ('<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() |