Spaces:
Sleeping
Sleeping
File size: 3,054 Bytes
a63fbfa ce7d6e1 a63fbfa ce7d6e1 a63fbfa 5bb1c00 a63fbfa |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
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() |