Spaces:

tiahchia
/

learningspaces

Running

App Files Files Community

tiahchia commited on Nov 1, 2025

Commit

cc730d7

verified ·

1 Parent(s): 2e59aad

Update app.py

Browse files

Files changed (1) hide show

app.py +33 -36

app.py CHANGED Viewed

@@ -1,40 +1,36 @@
 import gradio as gr
-# Python runner
 def run_python(code):
     try:
         local_vars = {}
         exec(code, {}, local_vars)
-        # Convert output dict to readable string
         return "\n".join(f"{k} = {v}" for k, v in local_vars.items())
     except Exception as e:
         return str(e)
-# Web runner (HTML/CSS/JS)
 def run_web(code):
     safe_code = code.replace('"', '&quot;').replace('\n', ' ')
-    return (
-        '<iframe style="width:100%; height:400px; border:1px solid #ccc; border-radius:10px; background:white;" '
-        'srcdoc="' + safe_code + '">'
-        '</iframe>'
     )
-# Main runner that switches based on language
 def run_code(code, lang):
     if lang == "Python":
         return run_python(code)
     else:
         return run_web(code)
-# Starter templates
 starter_web = """<!DOCTYPE html>
 <html>
 <head>
 <style>
-body { font-family: 'Poppins', sans-serif; background-color: #f0f8ff; color: #333; }
-h1 { color: #ff6f61; text-align:center; }
-button { background-color: #ff6f61; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; }
-button:hover { background-color: #ff8a75; }
 </style>
 </head>
 <body>
@@ -44,39 +40,40 @@ button:hover { background-color: #ff8a75; }
 </html>"""
 starter_python = """# Try some Python code
-a = 5
-b = 10
-c = a + b
-c"""
-# Gradio interface
 with gr.Blocks(css="""
-    body { background: linear-gradient(to right, #ffe8d6, #ffd6d6); font-family: 'Poppins', sans-serif; }
-    .gr-row { gap: 20px; }
-    .gr-textbox { border-radius: 10px; font-family: monospace; }
 """) as demo:
-    gr.Markdown("## 🎨 Fun Code Playground - Python + Web Live Preview")
-    # Language selector
-    lang_selector = gr.Radio(choices=["Python", "Web (HTML/CSS/JS)"], value="Web (HTML/CSS/JS)", label="Select Language")
     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")
-    # Update starter template when language changes
     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 on code change
     code_input.change(run_code, inputs=[code_input, lang_selector], outputs=output_frame)
 demo.launch()

 import gradio as gr
 def run_python(code):
     try:
         local_vars = {}
         exec(code, {}, local_vars)
         return "\n".join(f"{k} = {v}" for k, v in local_vars.items())
     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)
     else:
         return run_web(code)
 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>
 <body>
 </html>"""
 starter_python = """# Try some Python code
+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()