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: html_content = code # If no tag, assume all is HTML content # Extract CSS if present in a {html_content} """ return ui_output, js_only except Exception as e: return "", "" def interface(): with gr.Blocks() as demo: gr.Markdown("# Learn Frontend UI with Snake Game") with gr.Row(): code_input = gr.Code(label="Write your HTML/CSS/JS here", language="html") with gr.Column(): # Note: Gradio's HTML component doesn't directly support inline JS, so we use js= for interactivity ui_preview = gr.HTML(label="UI Preview") error_output = gr.Textbox(label="Error", interactive=False) # Here we use the js= parameter to inject the JavaScript code_input.change(fn=update_ui, inputs=code_input, outputs=[ui_preview, gr.HTML(js="")]) return demo if __name__ == "__main__": demo = interface() demo.launch()