Spaces:

tiahchia
/

learningspaces

Running

App Files Files Community

tiahchia commited on Nov 1, 2025

Commit

b0b7ebc

verified ·

1 Parent(s): a10fd3d

Update app.py

Browse files

Files changed (1) hide show

app.py +59 -42

app.py CHANGED Viewed

@@ -10,14 +10,10 @@ def run_python(code):
     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):
@@ -26,68 +22,89 @@ def run_code(code, lang):
     else:
         return run_web(code)
 starter_web = """<!DOCTYPE html>
 <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>
 <body>
 <h1>Hello World!</h1>
-<button onclick="alert('You clicked me!')">Click Me!</button>
 </body>
 </html>"""
-starter_python = """# Try some Python code
-a = 42
-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()

     except Exception as e:
         return str(e)
+# Web runner
 def run_web(code):
     safe_code = html.escape(code).replace('\n', ' ')
+    return f'<iframe style="width:100%; height:100%; border:none; border-radius:8px;" srcdoc="{safe_code}"></iframe>'
 # Main runner
 def run_code(code, lang):
     else:
         return run_web(code)
+starter_python = """# Python example
+a = 10
+b = 20
+sum = a + b
+sum"""
 starter_web = """<!DOCTYPE html>
 <html>
 <head>
 <style>
 body { font-family: 'Poppins', sans-serif; background:#fafafa; color:#333; }
 h1 { color:#ff6f61; text-align:center; }
 </style>
 </head>
 <body>
 <h1>Hello World!</h1>
 </body>
 </html>"""
 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; }
 .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; }
+#editor-container .CodeMirror { height:500px; border-radius:8px; }
 """) as demo:
+    gr.Markdown("<header>Fun Code Playground – Powered by Simple & Static</header>")
+    lang_selector = gr.Radio(["Python","Web (HTML/CSS/JS)"], value="Web (HTML/CSS/JS)", label="Select Language")
+    theme_toggle = gr.Button("Toggle Light/Dark Theme")
+    code_editor = gr.HTML(
+        f"""
+        <textarea id="editor">{starter_web}</textarea>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.14/codemirror.min.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.14/theme/dracula.min.css">
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.14/codemirror.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.14/mode/python/python.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.14/mode/htmlmixed/htmlmixed.min.js"></script>
+        <script>
+            window.editor = CodeMirror.fromTextArea(document.getElementById('editor'), {{
+                lineNumbers: true,
+                mode: "htmlmixed",
+                theme: "default",
+            }});
+            window.current_theme = "light";
+            function toggleTheme() {{
+                if(window.current_theme === "light") {{
+                    document.body.style.background = "#1e1e1e";
+                    document.body.style.color = "#f0f0f0";
+                    document.getElementById("editor-container").getElementsByClassName("CodeMirror")[0].CodeMirror.setOption("theme","dracula");
+                    window.current_theme = "dark";
+                }} else {{
+                    document.body.style.background = "#f5f6f8";
+                    document.body.style.color = "#222";
+                    document.getElementById("editor-container").getElementsByClassName("CodeMirror")[0].CodeMirror.setOption("theme","default");
+                    window.current_theme = "light";
+                }}
+            }}
+            window.toggleTheme = toggleTheme;
+        </script>
+        """,
+        elem_id="editor-container"
+    )
+    output_frame = gr.HTML(label="Output", elem_id="output-panel")
+    # Update editor template based on language
     def update_template(lang):
         return starter_python if lang=="Python" else starter_web
+    lang_selector.change(update_template, inputs=lang_selector, outputs=code_editor)
+    # Live output update
+    def live_update(code, lang):
+        return run_code(code, lang)
+    code_editor.change(live_update, inputs=[code_editor, lang_selector], outputs=output_frame)
+    # Connect theme toggle button
+    theme_toggle.click(None, [], [], _js="window.toggleTheme()")
 demo.launch()