Hugging Face's logo

Spaces:
tiahchia
/
learningspaces
Running

App Files Community
tiahchia commited on
Commit
7914ef5
·
verified ·
1 Parent(s): 9ab2a4e

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +31 -20
app.py CHANGED
@@ -16,7 +16,30 @@ def run_python(code):
16
 
17
  # --- Web runner ---
18
  def run_web(code):
19
- return f'<iframe style="width:100%; height:100%; border:none; border-radius:8px; background:#1e1e1e;" srcdoc="{code}"></iframe>'
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20
 
21
  # --- JavaScript runner ---
22
  def run_js(code):
@@ -43,18 +66,10 @@ print("Hello World!")
43
  for i in range(5):
44
  print(f"Line {i+1}")"""
45
 
46
- starter_web = """<!DOCTYPE html>
47
- <html>
48
- <head>
49
- <style>
50
- body { font-family: monospace; background:#1e1e1e; color:#00ff00; }
51
- h1 { color:#F714C5; text-align:center; }
52
- </style>
53
- </head>
54
- <body>
55
- <h1>Hello World!</h1>
56
- </body>
57
- </html>"""
58
 
59
  starter_js = """// JavaScript example
60
  console.log("Hello JavaScript!");
@@ -144,14 +159,14 @@ canvas#particles { position:fixed; top:0; left:0; width:100%; height:100%; z-ind
144
  </h2>
145
  """)
146
 
147
- # --- Language selector with label ---
148
  lang_selector = gr.Radio(
149
  choices=["Python", "Web (HTML/CSS/JS)", "JavaScript", "Bash"],
150
  value="Web (HTML/CSS/JS)",
151
  label="Select Language"
152
  )
153
 
154
- # --- Vertical layout: output on top ---
155
  with gr.Column():
156
  output_frame = gr.HTML(label="Output", elem_id="output-panel")
157
  code_input = gr.Code(
@@ -162,7 +177,6 @@ canvas#particles { position:fixed; top:0; left:0; width:100%; height:100%; z-ind
162
  lines=15
163
  )
164
 
165
- # --- Render button ---
166
  render_button = gr.Button("Render")
167
 
168
  # --- Footer ---
@@ -173,7 +187,7 @@ canvas#particles { position:fixed; top:0; left:0; width:100%; height:100%; z-ind
173
  </header>
174
  """)
175
 
176
- # --- Update starter template on language change ---
177
  def update_template(lang):
178
  if lang == "Python":
179
  return starter_python
@@ -185,9 +199,6 @@ canvas#particles { position:fixed; top:0; left:0; width:100%; height:100%; z-ind
185
  return starter_web
186
 
187
  lang_selector.change(update_template, inputs=lang_selector, outputs=code_input)
188
-
189
- # --- Run code ---
190
  render_button.click(run_code, inputs=[code_input, lang_selector], outputs=output_frame)
191
 
192
  demo.launch()
193
-
 
16
 
17
  # --- Web runner ---
18
  def run_web(code):
19
+ # If user includes <html> or <!DOCTYPE>, use it as-is
20
+ if "<html" in code.lower() or "<!doctype" in code.lower():
21
+ html_content = code
22
+ else:
23
+ # Wrap fragment in a full HTML document
24
+ html_content = f"""
25
+ <!DOCTYPE html>
26
+ <html>
27
+ <head>
28
+ <style>
29
+ body {{
30
+ font-family: monospace;
31
+ background: #1e1e1e;
32
+ color: #00ff00;
33
+ padding: 20px;
34
+ }}
35
+ </style>
36
+ </head>
37
+ <body>
38
+ {code}
39
+ </body>
40
+ </html>
41
+ """
42
+ return f'<iframe style="width:100%; height:100%; border:none; border-radius:8px; background:#1e1e1e;" srcdoc="{html_content}"></iframe>'
43
 
44
  # --- JavaScript runner ---
45
  def run_js(code):
 
66
  for i in range(5):
67
  print(f"Line {i+1}")"""
68
 
69
+ starter_web = """<h1 style="background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
70
+ -webkit-background-clip: text; color: transparent;">
71
+ Hello, Rainbow World!
72
+ </h1>"""
 
 
 
 
 
 
 
 
73
 
74
  starter_js = """// JavaScript example
75
  console.log("Hello JavaScript!");
 
159
  </h2>
160
  """)
161
 
162
+ # --- Language selector ---
163
  lang_selector = gr.Radio(
164
  choices=["Python", "Web (HTML/CSS/JS)", "JavaScript", "Bash"],
165
  value="Web (HTML/CSS/JS)",
166
  label="Select Language"
167
  )
168
 
169
+ # --- Output above input ---
170
  with gr.Column():
171
  output_frame = gr.HTML(label="Output", elem_id="output-panel")
172
  code_input = gr.Code(
 
177
  lines=15
178
  )
179
 
 
180
  render_button = gr.Button("Render")
181
 
182
  # --- Footer ---
 
187
  </header>
188
  """)
189
 
190
+ # --- Update template on language change ---
191
  def update_template(lang):
192
  if lang == "Python":
193
  return starter_python
 
199
  return starter_web
200
 
201
  lang_selector.change(update_template, inputs=lang_selector, outputs=code_input)
 
 
202
  render_button.click(run_code, inputs=[code_input, lang_selector], outputs=output_frame)
203
 
204
  demo.launch()