import gradio as gr
def update_ui(code):
try:
# Strip out scripts and handle them separately to avoid security issues
from bs4 import BeautifulSoup
soup = BeautifulSoup(code, 'html.parser')
scripts = soup.find_all('script')
for script in scripts:
script.decompose() # Remove script tags from HTML to prevent direct execution
# Rebuild HTML without scripts for direct rendering
html_content = str(soup)
# Collect script content
js_content = '\n'.join([script.string for script in scripts if script.string])
# Return HTML wrapped in a div and scripts in a way that Gradio can handle
return f"""
{html_content}
""", 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/JS 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]
)
# Example codes remain the same, but ensure the snake game is full HTML
with gr.Accordion("HTML/CSS/JS Code Examples", open=False):
with gr.Column():
example_buttons = []
example_codes = [
# ... (other examples remain unchanged)
("""
""", "Snake Game"),
]
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()