import gradio as gr
import html
import io
from contextlib import redirect_stdout
# --- Python runner ---
def run_python(code):
f = io.StringIO()
try:
with redirect_stdout(f):
exec(code, {}, {})
except Exception as e:
f.write(str(e))
output = f.getvalue()
return f'{html.escape(output)}'
# --- Web runner (working sandbox-safe version) ---
def run_web(code):
# Wrap HTML fragment in full document if needed
if "
{code}
"""
# Escape quotes for safe embedding
safe_html = html_content.replace('"', """).replace("'", "'")
# Allow interactive content inside iframe safely
return f"""
"""
# --- JavaScript runner ---
def run_js(code):
return f''
# --- Bash runner (simulated) ---
def run_bash(code):
return f'$ {html.escape(code)}\nCommand simulated.'
# --- Main runner ---
def run_code(code, lang):
if lang == "Python":
return run_python(code)
elif lang == "JavaScript":
return run_js(code)
elif lang == "Bash":
return run_bash(code)
else:
return run_web(code)
# --- Starter templates ---
starter_python = """# Python example
print("Hello World!")
for i in range(5):
print(f"Line {i+1}")"""
starter_web = """
Hello, Rainbow World!
"""
starter_js = """// JavaScript example
console.log("Hello JavaScript!");
for(let i=0;i<5;i++){
console.log("Line "+(i+1));
}"""
starter_bash = """# Bash example
echo "Hello Bash!"
for i in {1..5}; do
echo "Line $i"
done"""
# --- Gradio app ---
with gr.Blocks(css="""
body {
margin:0; padding:0;
font-family:'Poppins', sans-serif;
overflow-x:hidden;
color:#e0e0e0;
background: linear-gradient(to bottom, #0a0a23, #1a0a3a, #00001a);
}
.gradio-container { max-width:1200px; margin:auto; padding:20px; }
.gr-column { display:flex; flex-direction: column; gap:8px !important; }
#editor-container, #output-panel {
width:100% !important;
margin:0 !important;
padding:8px !important;
border-radius:8px;
box-sizing:border-box;
}
#output-panel {
height:150px !important;
background:#1e1e1e;
color:#00ff00;
overflow:auto;
box-shadow:0 4px 8px rgba(0,0,0,0.5);
font-family: monospace;
}
#editor-container .CodeMirror {
height:300px !important;
min-height:300px !important;
font-family: monospace;
font-size:14px;
white-space: pre-wrap;
overflow-wrap: break-word;
border-radius:8px;
padding:8px !important;
}
.gr-radio { color:#e0e0e0; margin:0 0 8px 0 !important; font-size:0.95em; }
button, .gr-button { background-color:#F714C5 !important; color:#fff !important; border-radius:6px !important; padding:8px 16px !important; }
footer { display:none !important; }
header { background:#000000; padding:16px; color:#F714C5; font-size:1.4em; text-align:center; margin-top:20px; }
header img { vertical-align:middle; height:20px; margin-right:8px; }
canvas#particles { position:fixed; top:0; left:0; width:100%; height:100%; z-index:0; pointer-events:none; }
""") as demo:
# --- Particle background ---
gr.HTML("""
""")
# --- Header ---
gr.Markdown("""
𝙸'𝚖 𝚃𝚒𝚊𝚑 & 𝚝𝚑𝚒𝚜 𝚒𝚜 𝚖𝚢 𝚌𝚘𝚖𝚙𝚒𝚕𝚎𝚛, 𝚑𝚊𝚙𝚙𝚢 𝚌𝚘𝚍𝚒𝚗𝚐!
""")
# --- Language selector ---
lang_selector = gr.Radio(
choices=["Python", "Web (HTML/CSS/JS)", "JavaScript", "Bash"],
value="Web (HTML/CSS/JS)",
label="Select Language"
)
# --- Output above input ---
with gr.Column():
output_frame = gr.HTML(label="Output", elem_id="output-panel")
code_input = gr.Code(
value=starter_web,
language="html",
label="Type your code here",
interactive=True,
lines=15
)
render_button = gr.Button("Render")
# --- Footer ---
gr.Markdown("""
𝚂𝚒𝚖𝚙𝚕𝚎 & 𝚂𝚝𝚊𝚝𝚒𝚌
""")
# --- Update template on language change ---
def update_template(lang):
if lang == "Python":
return starter_python
elif lang == "JavaScript":
return starter_js
elif lang == "Bash":
return starter_bash
else:
return starter_web
lang_selector.change(update_template, inputs=lang_selector, outputs=code_input)
render_button.click(run_code, inputs=[code_input, lang_selector], outputs=output_frame)
demo.launch()