Spaces:
Running
Running
Create app.py
Browse files
app.py
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import gradio as gr
|
| 2 |
+
|
| 3 |
+
# Function to render HTML/CSS/JS code
|
| 4 |
+
def run_web_code(code):
|
| 5 |
+
return f"""<iframe
|
| 6 |
+
style="width:100%; height:400px; border:1px solid #ccc; border-radius:10px;"
|
| 7 |
+
srcdoc="{code.replace('"', '"').replace('\n', ' ')}"
|
| 8 |
+
></iframe>"""
|
| 9 |
+
|
| 10 |
+
# Default starter template
|
| 11 |
+
starter_code = """<!DOCTYPE html>
|
| 12 |
+
<html>
|
| 13 |
+
<head>
|
| 14 |
+
<style>
|
| 15 |
+
body { font-family: Arial; background-color: #f0f8ff; color: #333; }
|
| 16 |
+
h1 { color: #ff6f61; text-align:center; }
|
| 17 |
+
button { background-color: #ff6f61; color: white; padding: 10px 20px; border: none; border-radius: 5px; }
|
| 18 |
+
</style>
|
| 19 |
+
</head>
|
| 20 |
+
<body>
|
| 21 |
+
<h1>Hello World!</h1>
|
| 22 |
+
<button onclick="alert('You clicked me!')">Click Me!</button>
|
| 23 |
+
</body>
|
| 24 |
+
</html>"""
|
| 25 |
+
|
| 26 |
+
# Gradio Interface
|
| 27 |
+
with gr.Blocks() as demo:
|
| 28 |
+
gr.Markdown("## 🎨 Fun Web Code Playground")
|
| 29 |
+
with gr.Row():
|
| 30 |
+
code_input = gr.Textbox(
|
| 31 |
+
lines=20,
|
| 32 |
+
value=starter_code,
|
| 33 |
+
label="Type your HTML/CSS/JS here",
|
| 34 |
+
placeholder="Start coding..."
|
| 35 |
+
)
|
| 36 |
+
output_frame = gr.HTML(label="Output")
|
| 37 |
+
|
| 38 |
+
run_button = gr.Button("Run Code")
|
| 39 |
+
run_button.click(run_web_code, inputs=code_input, outputs=output_frame)
|
| 40 |
+
|
| 41 |
+
demo.launch()
|