Hugging Face's logo

Spaces:
tiahchia
/
learningspaces
Running

App Files Community
tiahchia commited on
Commit
2d5d7e4
·
verified ·
1 Parent(s): c799faa

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +22 -54
app.py CHANGED
@@ -1,62 +1,25 @@
1
  import gradio as gr
2
 
3
- # Function to render HTML/CSS/JS code
4
- def run_web_code(code):
5
- return f"""<iframe
6
- style="width:100%; height:400px; border:1px solid #ccc; border-radius:10px;"
7
- srcdoc="{code.replace('"', '&quot;').replace('\n', ' ')}"
8
- ></iframe>"""
9
-
10
- # Default starter template
11
- starter_code = """<!DOCTYPE html>
12
- <html>
13
- <head>
14
- <style>
15
- body { font-family: Arial; background-color: #f0f8ff; color: #333; }
16
- h1 { color: #ff6f61; text-align:center; }
17
- button { background-color: #ff6f61; color: white; padding: 10px 20px; border: none; border-radius: 5px; }
18
- </style>
19
- </head>
20
- <body>
21
- <h1>Hello World!</h1>
22
- <button onclick="alert('You clicked me!')">Click Me!</button>
23
- </body>
24
- </html>"""
25
-
26
- # Gradio Interface
27
- with gr.Blocks() as demo:
28
- gr.Markdown("## 🎨 Fun Web Code Playground")
29
- with gr.Row():
30
- code_input = gr.Textbox(
31
- lines=20,
32
- value=starter_code,
33
- label="Type your HTML/CSS/JS here",
34
- placeholder="Start coding..."
35
- )
36
- output_frame = gr.HTML(label="Output")
37
-
38
- run_button = gr.Button("Run Code")
39
- run_button.click(run_web_code, inputs=code_input, outputs=output_frame)
40
-
41
- demo.launch()
42
- import gradio as gr
43
-
44
  def run_web_code(code):
45
  # Escape quotes and newlines safely
46
  safe_code = code.replace('"', '&quot;').replace('\n', ' ')
47
- return f"""<iframe
48
- style="width:100%; height:400px; border:1px solid #ccc; border-radius:10px;"
49
- srcdoc="{safe_code}"
50
- ></iframe>"""
 
 
 
 
51
 
52
- # Default starter template
53
  starter_code = """<!DOCTYPE html>
54
  <html>
55
  <head>
56
  <style>
57
- body { font-family: Arial; background-color: #f0f8ff; color: #333; }
58
  h1 { color: #ff6f61; text-align:center; }
59
- button { background-color: #ff6f61; color: white; padding: 10px 20px; border: none; border-radius: 5px; }
 
60
  </style>
61
  </head>
62
  <body>
@@ -65,18 +28,23 @@ button { background-color: #ff6f61; color: white; padding: 10px 20px; border: no
65
  </body>
66
  </html>"""
67
 
68
- with gr.Blocks() as demo:
69
- gr.Markdown("## 🎨 Fun Web Code Playground")
 
 
 
 
70
  with gr.Row():
71
  code_input = gr.Textbox(
72
  lines=20,
73
  value=starter_code,
74
  label="Type your HTML/CSS/JS here",
75
- placeholder="Start coding..."
 
76
  )
77
  output_frame = gr.HTML(label="Output")
78
-
79
- run_button = gr.Button("Run Code")
80
- run_button.click(run_web_code, inputs=code_input, outputs=output_frame)
81
 
82
  demo.launch()
 
1
  import gradio as gr
2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3
  def run_web_code(code):
4
  # Escape quotes and newlines safely
5
  safe_code = code.replace('"', '&quot;').replace('\n', ' ')
6
+ # Build iframe using normal string concatenation
7
+ iframe_html = (
8
+ '<iframe '
9
+ 'style="width:100%; height:400px; border:1px solid #ccc; border-radius:10px; background:white;" '
10
+ 'srcdoc="' + safe_code + '">'
11
+ '</iframe>'
12
+ )
13
+ return iframe_html
14
 
 
15
  starter_code = """<!DOCTYPE html>
16
  <html>
17
  <head>
18
  <style>
19
+ body { font-family: 'Poppins', sans-serif; background-color: #f0f8ff; color: #333; }
20
  h1 { color: #ff6f61; text-align:center; }
21
+ button { background-color: #ff6f61; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; }
22
+ button:hover { background-color: #ff8a75; }
23
  </style>
24
  </head>
25
  <body>
 
28
  </body>
29
  </html>"""
30
 
31
+ with gr.Blocks(css="""
32
+ body { background: linear-gradient(to right, #ffe8d6, #ffd6d6); font-family: 'Poppins', sans-serif; }
33
+ .gr-row { gap: 20px; }
34
+ .gr-textbox { border-radius: 10px; font-family: monospace; }
35
+ """) as demo:
36
+ gr.Markdown("## 🎨 Fun Web Code Playground - Live Preview")
37
  with gr.Row():
38
  code_input = gr.Textbox(
39
  lines=20,
40
  value=starter_code,
41
  label="Type your HTML/CSS/JS here",
42
+ placeholder="Start coding...",
43
+ interactive=True
44
  )
45
  output_frame = gr.HTML(label="Output")
46
+
47
+ # Live update whenever code_input changes
48
+ code_input.change(run_web_code, inputs=code_input, outputs=output_frame)
49
 
50
  demo.launch()