Spaces:
Running
Running
Update app.py
Browse files
app.py
CHANGED
|
@@ -39,3 +39,44 @@ with gr.Blocks() as demo:
|
|
| 39 |
run_button.click(run_web_code, inputs=code_input, outputs=output_frame)
|
| 40 |
|
| 41 |
demo.launch()
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 39 |
run_button.click(run_web_code, inputs=code_input, outputs=output_frame)
|
| 40 |
|
| 41 |
demo.launch()
|
| 42 |
+
import gradio as gr
|
| 43 |
+
|
| 44 |
+
def run_web_code(code):
|
| 45 |
+
# Escape quotes and newlines safely
|
| 46 |
+
safe_code = code.replace('"', '"').replace('\n', ' ')
|
| 47 |
+
return f"""<iframe
|
| 48 |
+
style="width:100%; height:400px; border:1px solid #ccc; border-radius:10px;"
|
| 49 |
+
srcdoc="{safe_code}"
|
| 50 |
+
></iframe>"""
|
| 51 |
+
|
| 52 |
+
# Default starter template
|
| 53 |
+
starter_code = """<!DOCTYPE html>
|
| 54 |
+
<html>
|
| 55 |
+
<head>
|
| 56 |
+
<style>
|
| 57 |
+
body { font-family: Arial; background-color: #f0f8ff; color: #333; }
|
| 58 |
+
h1 { color: #ff6f61; text-align:center; }
|
| 59 |
+
button { background-color: #ff6f61; color: white; padding: 10px 20px; border: none; border-radius: 5px; }
|
| 60 |
+
</style>
|
| 61 |
+
</head>
|
| 62 |
+
<body>
|
| 63 |
+
<h1>Hello World!</h1>
|
| 64 |
+
<button onclick="alert('You clicked me!')">Click Me!</button>
|
| 65 |
+
</body>
|
| 66 |
+
</html>"""
|
| 67 |
+
|
| 68 |
+
with gr.Blocks() as demo:
|
| 69 |
+
gr.Markdown("## 🎨 Fun Web Code Playground")
|
| 70 |
+
with gr.Row():
|
| 71 |
+
code_input = gr.Textbox(
|
| 72 |
+
lines=20,
|
| 73 |
+
value=starter_code,
|
| 74 |
+
label="Type your HTML/CSS/JS here",
|
| 75 |
+
placeholder="Start coding..."
|
| 76 |
+
)
|
| 77 |
+
output_frame = gr.HTML(label="Output")
|
| 78 |
+
|
| 79 |
+
run_button = gr.Button("Run Code")
|
| 80 |
+
run_button.click(run_web_code, inputs=code_input, outputs=output_frame)
|
| 81 |
+
|
| 82 |
+
demo.launch()
|