Spaces:

tiahchia
/

learningspaces

Running

App Files Files Community

tiahchia commited on Nov 1, 2025

Commit

7463ba8

verified ·

1 Parent(s): 57c36d4

Update app.py

Browse files

Files changed (1) hide show

app.py +33 -64

app.py CHANGED Viewed

@@ -13,7 +13,7 @@ def run_python(code):
 # 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):
@@ -22,7 +22,6 @@ def run_code(code, lang):
     else:
         return run_web(code)
-# Starter templates
 starter_python = """# Python example
 a = 10
 b = 20
@@ -33,87 +32,57 @@ 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:#fff; 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")
-    # HTML button for theme toggle
-    gr.HTML("""
-    <button onclick="window.toggleTheme()" style="
-        background-color:#61dafb;
-        color:#fff;
-        padding:8px 16px;
-        border:none;
-        border-radius:6px;
-        cursor:pointer;
-        margin-bottom:10px;">
-    Toggle Light/Dark Theme
-    </button>
-    """)
-    # CodeMirror editor
-    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";
-            window.toggleTheme = function() {{
-                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";
-                }}
-            }};
-        </script>
-        """,
-        elem_id="editor-container"
     )
-    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_editor)
-    # Live output
-    def live_update(code, lang):
-        return run_code(code, lang)
-    code_editor.change(live_update, inputs=[code_editor, lang_selector], outputs=output_frame)
 demo.launch()

 # 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; background:#1e1e1e;" srcdoc="{safe_code}"></iframe>'
 # Main runner
 def run_code(code, lang):
     else:
         return run_web(code)
 starter_python = """# Python example
 a = 10
 b = 20
 <html>
 <head>
 <style>
+body { font-family: 'Poppins', sans-serif; background:#121212; color:#e0e0e0; }
+h1 { color:#d16ba5; text-align:center; }
+button { background-color:#d16ba5; color:#fff; padding:12px 24px; border:none; border-radius:6px; cursor:pointer;}
+button:hover { background-color:#e27db9; }
 </style>
 </head>
 <body>
 <h1>Hello World!</h1>
+<button onclick="alert('You clicked me!')">Click Me!</button>
 </body>
 </html>"""
 with gr.Blocks(css="""
+body { margin:0; padding:0; font-family:'Poppins', sans-serif; background:#121212; color:#e0e0e0; }
+header { background:#000000; padding:16px; color:#d16ba5; font-size:1.8em; 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:#1e1e1e; border-radius:8px; box-shadow:0 4px 8px rgba(0,0,0,0.5); height:500px; padding:10px; overflow:auto; }
 #editor-container .CodeMirror { height:500px; border-radius:8px; }
+.gr-textbox { font-family:'Fira Code', monospace; background:#1e1e1e; color:#e0e0e0; border:none; border-radius:8px; padding:16px; height:500px; overflow:auto; }
+.gr-radio { color:#e0e0e0; margin-top:16px; }
+button, .gr-button { background-color:#d16ba5 !important; color:#fff !important; border-radius:6px !important; }
 """) 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"
     )
+    # Editor + Output side by side
+    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")
+    # Starter template updater
     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()