Create app.py

app.py

@@ -0,0 +1,34 @@
+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()