Spaces:

tiahchia
/

learningspaces

Running

App Files Files Community

tiahchia commited on Nov 1, 2025

Commit

a10fd3d

verified ·

1 Parent(s): cc730d7

Update app.py

Browse files

Files changed (1) hide show

app.py +40 -26

app.py CHANGED Viewed

@@ -1,5 +1,7 @@
 import gradio as gr
 def run_python(code):
     try:
         local_vars = {}
@@ -8,15 +10,16 @@ def run_python(code):
     except Exception as e:
         return str(e)
 def run_web(code):
-    safe_code = code.replace('"', '&quot;').replace('\n', ' ')
     iframe_html = (
-        '<iframe '
-        'style="width:100%; height:100%; border:none; border-radius:8px; background:#fff;" '
-        'srcdoc="' + safe_code + '"></iframe>'
     )
     return iframe_html
 def run_code(code, lang):
     if lang == "Python":
         return run_python(code)
@@ -27,9 +30,9 @@ starter_web = """<!DOCTYPE html>
 <html>
 <head>
 <style>
-body { font-family: 'Poppins', sans-serif; margin:0; padding:20px; background:#fafafa; color:#333; }
 h1 { color:#ff6f61; text-align:center; }
-button { background-color:#ff6f61; color:#fff; padding:12px 24px; border:none; border-radius:6px; cursor:pointer; transition: background 0.3s;}
 button:hover { background-color:#ff8a75; }
 </style>
 </head>
@@ -44,36 +47,47 @@ a = 42
 b = 58
 print("Sum is:", a + b)"""
 with gr.Blocks(css="""
-  body { margin: 0; padding: 0; font-family: 'Poppins', sans-serif; background: #f5f6f8; color: #222; }
-  header { background: #20232a; padding: 16px; color: #61dafb; font-size: 1.5em; text-align: center; }
-  .gradio-container { max-width: 1200px; margin: auto; padding: 20px; }
-  .gr-row { display: flex; gap: 20px; margin-top: 20px; }
-  .code-panel { flex: 1; }
-  .output-panel { flex: 1; background: #ffffff; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); height: 500px; }
-  .gr-textbox { font-family: 'Fira Code', monospace; background: #282c34; color: #abb2bf; border: none; border-radius: 8px; padding: 16px; height: 500px; overflow: auto; }
-  .gr-radio { margin-top: 16px; }
-  .theme-toggle { position: absolute; top: 16px; right: 16px; cursor: pointer; color: #61dafb; }
 """) as demo:
     header = gr.Markdown("<header>Fun Code Playground – Powered by Simple & Static</header>")
-    lang_selector = gr.Radio(choices=["Python", "Web (HTML/CSS/JS)"],
-                             value="Web (HTML/CSS/JS)", label="Select Language", css=".gr-radio { color: #222; }")
     with gr.Row():
-        code_input = gr.Textbox(lines=20,
-                                value=starter_web,
-                                label="Type your code here",
-                                placeholder="Start coding...",
-                                interactive=True,
-                                css=".gr-textbox { }")
-        output_frame = gr.HTML(label="Output", elem_id="output-panel", css=".output-panel { }")
     def update_template(lang):
-        return starter_python if lang == "Python" else starter_web
     lang_selector.change(update_template, inputs=lang_selector, outputs=code_input)
     code_input.change(run_code, inputs=[code_input, lang_selector], outputs=output_frame)
 demo.launch()

 import gradio as gr
+import html
+# Python runner
 def run_python(code):
     try:
         local_vars = {}
     except Exception as e:
         return str(e)
+# Web runner (HTML/CSS/JS)
 def run_web(code):
+    safe_code = html.escape(code).replace('\n', ' ')
     iframe_html = (
+        '<iframe style="width:100%; height:100%; border:none; border-radius:8px; background:#fff;" '
+        f'srcdoc="{safe_code}"></iframe>'
     )
     return iframe_html
+# Main runner
 def run_code(code, lang):
     if lang == "Python":
         return run_python(code)
 <html>
 <head>
 <style>
+body { font-family: 'Poppins', sans-serif; background:#fafafa; color:#333; }
 h1 { color:#ff6f61; text-align:center; }
+button { background-color:#ff6f61; color:#fff; padding:12px 24px; border:none; border-radius:6px; cursor:pointer;}
 button:hover { background-color:#ff8a75; }
 </style>
 </head>
 b = 58
 print("Sum is:", a + b)"""
+# Theme toggle handler
+def toggle_theme(current):
+    return "dark" if current=="light" else "light"
 with gr.Blocks(css="""
+body { margin:0; padding:0; font-family: 'Poppins', sans-serif; background: #f5f6f8; color:#222; }
+header { background:#20232a; padding:16px; color:#61dafb; font-size:1.5em; text-align:center; }
+.gradio-container { max-width:1200px; margin:auto; padding:20px; }
+.gr-row { display:flex; gap:20px; margin-top:20px; }
+.code-panel { flex:1; }
+.output-panel { flex:1; background:#ffffff; border-radius:8px; box-shadow:0 4px 8px rgba(0,0,0,0.1); height:500px; padding:10px; overflow:auto; }
+.theme-toggle { cursor:pointer; color:#61dafb; margin-bottom:10px; font-weight:bold; }
 """) as demo:
     header = gr.Markdown("<header>Fun Code Playground – Powered by Simple & Static</header>")
+    lang_selector = gr.Radio(
+        choices=["Python","Web (HTML/CSS/JS)"],
+        value="Web (HTML/CSS/JS)",
+        label="Select Language"
+    )
+    # Theme toggle
+    theme_toggle = gr.Button("Switch Theme (Light/Dark)", elem_id="theme-toggle")
     with gr.Row():
+        code_input = gr.Textbox(
+            lines=20,
+            value=starter_web,
+            label="Type your code here",
+            placeholder="Start coding...",
+            interactive=True
+        )
+        output_frame = gr.HTML(label="Output", elem_id="output-panel")
+    # Update starter template on language change
     def update_template(lang):
+        return starter_python if lang=="Python" else starter_web
     lang_selector.change(update_template, inputs=lang_selector, outputs=code_input)
+    # Live update
     code_input.change(run_code, inputs=[code_input, lang_selector], outputs=output_frame)
 demo.launch()