Hugging Face's logo

Spaces:
tiahchia
/
learningspaces
Running

App Files Community
tiahchia commited on
Commit
07f8bf6
·
verified ·
1 Parent(s): 7463ba8

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +17 -13
app.py CHANGED
@@ -6,14 +6,15 @@ def run_python(code):
6
  try:
7
  local_vars = {}
8
  exec(code, {}, local_vars)
 
9
  return "\n".join(f"{k} = {v}" for k, v in local_vars.items())
10
  except Exception as e:
11
  return str(e)
12
 
13
- # Web runner
14
  def run_web(code):
15
- safe_code = html.escape(code).replace('\n', ' ')
16
- return f'<iframe style="width:100%; height:100%; border:none; border-radius:8px; background:#1e1e1e;" srcdoc="{safe_code}"></iframe>'
17
 
18
  # Main runner
19
  def run_code(code, lang):
@@ -22,6 +23,7 @@ def run_code(code, lang):
22
  else:
23
  return run_web(code)
24
 
 
25
  starter_python = """# Python example
26
  a = 10
27
  b = 20
@@ -32,34 +34,33 @@ starter_web = """<!DOCTYPE html>
32
  <html>
33
  <head>
34
  <style>
35
- body { font-family: 'Poppins', sans-serif; background:#121212; color:#e0e0e0; }
36
  h1 { color:#d16ba5; text-align:center; }
37
- button { background-color:#d16ba5; color:#fff; padding:12px 24px; border:none; border-radius:6px; cursor:pointer;}
38
- button:hover { background-color:#e27db9; }
39
  </style>
40
  </head>
41
  <body>
42
  <h1>Hello World!</h1>
43
- <button onclick="alert('You clicked me!')">Click Me!</button>
44
  </body>
45
  </html>"""
46
 
47
  with gr.Blocks(css="""
 
48
  body { margin:0; padding:0; font-family:'Poppins', sans-serif; background:#121212; color:#e0e0e0; }
49
  header { background:#000000; padding:16px; color:#d16ba5; font-size:1.8em; text-align:center; }
50
  .gradio-container { max-width:1200px; margin:auto; padding:20px; }
51
  .gr-row { display:flex; gap:20px; margin-top:20px; }
52
  .code-panel { flex:1; }
53
- .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; }
54
  #editor-container .CodeMirror { height:500px; border-radius:8px; }
55
- .gr-textbox { font-family:'Fira Code', monospace; background:#1e1e1e; color:#e0e0e0; border:none; border-radius:8px; padding:16px; height:500px; overflow:auto; }
56
  .gr-radio { color:#e0e0e0; margin-top:16px; }
57
- button, .gr-button { background-color:#d16ba5 !important; color:#fff !important; border-radius:6px !important; }
 
58
  """) as demo:
59
 
60
  # Header
61
  gr.Markdown("<header>Fun Code Playground – Powered by Simple & Static</header>")
62
 
 
63
  lang_selector = gr.Radio(
64
  choices=["Python", "Web (HTML/CSS/JS)"],
65
  value="Web (HTML/CSS/JS)",
@@ -77,12 +78,15 @@ button, .gr-button { background-color:#d16ba5 !important; color:#fff !important;
77
  )
78
  output_frame = gr.HTML(label="Output", elem_id="output-panel")
79
 
80
- # Starter template updater
 
 
 
81
  def update_template(lang):
82
  return starter_python if lang == "Python" else starter_web
83
  lang_selector.change(update_template, inputs=lang_selector, outputs=code_input)
84
 
85
- # Live update
86
- code_input.change(run_code, inputs=[code_input, lang_selector], outputs=output_frame)
87
 
88
  demo.launch()
 
6
  try:
7
  local_vars = {}
8
  exec(code, {}, local_vars)
9
+ # Capture all print output if any
10
  return "\n".join(f"{k} = {v}" for k, v in local_vars.items())
11
  except Exception as e:
12
  return str(e)
13
 
14
+ # Web runner (HTML/CSS/JS)
15
  def run_web(code):
16
+ safe_code = html.escape(code).replace('\n', '<br>')
17
+ return f'<div style="font-family: monospace; white-space: pre-wrap;">{safe_code}</div>'
18
 
19
  # Main runner
20
  def run_code(code, lang):
 
23
  else:
24
  return run_web(code)
25
 
26
+ # Starter templates
27
  starter_python = """# Python example
28
  a = 10
29
  b = 20
 
34
  <html>
35
  <head>
36
  <style>
37
+ body { font-family: 'Poppins', sans-serif; background:#1e1e1e; color:#e0e0e0; }
38
  h1 { color:#d16ba5; text-align:center; }
 
 
39
  </style>
40
  </head>
41
  <body>
42
  <h1>Hello World!</h1>
 
43
  </body>
44
  </html>"""
45
 
46
  with gr.Blocks(css="""
47
+ /* Global Dark Theme */
48
  body { margin:0; padding:0; font-family:'Poppins', sans-serif; background:#121212; color:#e0e0e0; }
49
  header { background:#000000; padding:16px; color:#d16ba5; font-size:1.8em; text-align:center; }
50
  .gradio-container { max-width:1200px; margin:auto; padding:20px; }
51
  .gr-row { display:flex; gap:20px; margin-top:20px; }
52
  .code-panel { flex:1; }
53
+ .output-panel { flex:1; background:#1e1e1e; border-radius:8px; box-shadow:0 4px 8px rgba(0,0,0,0.5); height:500px; padding:16px; font-family: monospace; color: #00ff00; white-space: pre-wrap; overflow:auto; }
54
  #editor-container .CodeMirror { height:500px; border-radius:8px; }
 
55
  .gr-radio { color:#e0e0e0; margin-top:16px; }
56
+ button, .gr-button { background-color:#d16ba5 !important; color:#fff !important; border-radius:6px !important; padding:10px 20px !important; }
57
+ footer { display:none !important; } /* Hide Gradio footer */
58
  """) as demo:
59
 
60
  # Header
61
  gr.Markdown("<header>Fun Code Playground – Powered by Simple & Static</header>")
62
 
63
+ # Language selector
64
  lang_selector = gr.Radio(
65
  choices=["Python", "Web (HTML/CSS/JS)"],
66
  value="Web (HTML/CSS/JS)",
 
78
  )
79
  output_frame = gr.HTML(label="Output", elem_id="output-panel")
80
 
81
+ # Render button
82
+ render_button = gr.Button("Render")
83
+
84
+ # Update starter template on language change
85
  def update_template(lang):
86
  return starter_python if lang == "Python" else starter_web
87
  lang_selector.change(update_template, inputs=lang_selector, outputs=code_input)
88
 
89
+ # Run code when Render is clicked
90
+ render_button.click(run_code, inputs=[code_input, lang_selector], outputs=output_frame)
91
 
92
  demo.launch()