Hugging Face's logo

Spaces:
broadfield-dev
/
UI_learn_js
Running

App Files Community
broadfield-dev commited on
Commit
a2201d6
·
verified ·
1 Parent(s): 57765d8

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +69 -64
app.py CHANGED
@@ -2,28 +2,11 @@ import gradio as gr
2
 
3
  def update_ui(code):
4
  try:
5
- # Strip out scripts and handle them separately to avoid security issues
6
- from bs4 import BeautifulSoup
7
-
8
- soup = BeautifulSoup(code, 'html.parser')
9
- scripts = soup.find_all('script')
10
- for script in scripts:
11
- script.decompose() # Remove script tags from HTML to prevent direct execution
12
-
13
- # Rebuild HTML without scripts for direct rendering
14
- html_content = str(soup)
15
-
16
- # Collect script content
17
- js_content = '\n'.join([script.string for script in scripts if script.string])
18
-
19
- # Return HTML wrapped in a div and scripts in a way that Gradio can handle
20
  return f"""
21
  <div style="border: 1px solid #ccc; padding: 10px; height: 400px; overflow: auto;">
22
- {html_content}
23
  </div>
24
- <script>
25
- {js_content}
26
- </script>
27
  """, None
28
  except Exception as e:
29
  return "", str(e)
@@ -37,63 +20,85 @@ def interface():
37
  ui_preview = gr.HTML(label="UI Preview")
38
  error_output = gr.Textbox(label="Error", interactive=False)
39
 
 
40
  code_input.change(
41
  fn=update_ui,
42
  inputs=code_input,
43
  outputs=[ui_preview, error_output]
44
  )
45
 
46
- # Example codes remain the same, but ensure the snake game is full HTML
47
  with gr.Accordion("HTML/CSS/JS Code Examples", open=False):
48
  with gr.Column():
49
  example_buttons = []
50
  example_codes = [
51
- # ... (other examples remain unchanged)
 
 
52
  ("""
53
- <!DOCTYPE html>
54
- <html lang="en">
55
- <head>
56
- <meta charset="UTF-8">
57
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
58
- <style>
59
- body { margin: 0; padding: 0; }
60
- #gameCanvas { border: 1px solid black; }
61
- </style>
62
- </head>
63
- <body>
64
- <canvas id="gameCanvas" width="400" height="400"></canvas>
65
- <script>
66
- let canvas = document.getElementById('gameCanvas');
67
- let ctx = canvas.getContext('2d');
68
- let snake = [{x: 10, y: 10}];
69
- let food = {x: 15, y: 15};
70
- let gameLoop;
71
- function init() {
72
- gameLoop = setInterval(game, 100);
73
- }
74
- function game() {
75
- ctx.clearRect(0, 0, canvas.width, canvas.height);
76
- snake.unshift({x: snake[0].x, y: snake[0].y});
77
- snake[0].x += 1; // Simple movement for demonstration
78
- if(snake[0].x > 39) snake[0].x = 0; // Wrap around
79
- ctx.fillStyle = "green";
80
- snake.forEach(part => {
81
- ctx.fillRect(part.x * 10, part.y * 10, 10, 10);
82
- });
83
- ctx.fillStyle = "red";
84
- ctx.fillRect(food.x * 10, food.y * 10, 10, 10);
85
- if(snake[0].x == food.x && snake[0].y == food.y) {
86
- food.x = Math.floor(Math.random() * 40);
87
- food.y = Math.floor(Math.random() * 40);
88
- } else {
89
- snake.pop();
90
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
91
  }
92
- // Start the game
93
- init();
94
- </script>
95
- </body>
96
- </html>
97
  """, "Snake Game"),
98
  ]
99
 
 
2
 
3
  def update_ui(code):
4
  try:
5
+ # Directly return the code wrapped in a div for styling
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6
  return f"""
7
  <div style="border: 1px solid #ccc; padding: 10px; height: 400px; overflow: auto;">
8
+ {code}
9
  </div>
 
 
 
10
  """, None
11
  except Exception as e:
12
  return "", str(e)
 
20
  ui_preview = gr.HTML(label="UI Preview")
21
  error_output = gr.Textbox(label="Error", interactive=False)
22
 
23
+ # Instead of using _js, we'll directly handle the JavaScript with Python
24
  code_input.change(
25
  fn=update_ui,
26
  inputs=code_input,
27
  outputs=[ui_preview, error_output]
28
  )
29
 
30
+ # Add example section
31
  with gr.Accordion("HTML/CSS/JS Code Examples", open=False):
32
  with gr.Column():
33
  example_buttons = []
34
  example_codes = [
35
+ ('<h1>Hello World</h1>', "Basic Heading"),
36
+ ('<p style="color: red;">This is a paragraph.</p>', "Styled Paragraph"),
37
+ ('<button onclick="alert(\'Button clicked!\')">Click me</button>', "Interactive Button"),
38
  ("""
39
+ <style>
40
+ .box {
41
+ width: 100px;
42
+ height: 100px;
43
+ background-color: blue;
44
+ }
45
+ </style>
46
+ <div class="box"></div>
47
+ """, "CSS Box"),
48
+ ("""
49
+ <style>
50
+ .container {
51
+ display: flex;
52
+ justify-content: space-between;
53
+ }
54
+ </style>
55
+ <div class="container">
56
+ <div style="background-color: red; width: 50px; height: 50px;"></div>
57
+ <div style="background-color: green; width: 50px; height: 50px;"></div>
58
+ </div>
59
+ """, "Flexbox Layout"),
60
+ ("""
61
+ <style>
62
+ body { margin: 0; padding: 0; }
63
+ #gameCanvas { border: 1px solid black; }
64
+ </style>
65
+ <canvas id="gameCanvas" width="400" height="400"></canvas>
66
+ <script>
67
+ let canvas = document.getElementById('gameCanvas');
68
+ let ctx = canvas.getContext('2d');
69
+ let snake = [{x: 10, y: 10}];
70
+ let food = {x: 15, y: 15};
71
+ let gameLoop;
72
+
73
+ function init() {
74
+ gameLoop = setInterval(game, 100);
75
+ }
76
+
77
+ function game() {
78
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
79
+ snake.unshift({x: snake[0].x, y: snake[0].y});
80
+ snake[0].x += 1; // Simple movement for demonstration
81
+ if(snake[0].x > 39) snake[0].x = 0; // Wrap around
82
+
83
+ ctx.fillStyle = "green";
84
+ snake.forEach(part => {
85
+ ctx.fillRect(part.x * 10, part.y * 10, 10, 10);
86
+ });
87
+
88
+ ctx.fillStyle = "red";
89
+ ctx.fillRect(food.x * 10, food.y * 10, 10, 10);
90
+
91
+ if(snake[0].x == food.x && snake[0].y == food.y) {
92
+ food.x = Math.floor(Math.random() * 40);
93
+ food.y = Math.floor(Math.random() * 40);
94
+ } else {
95
+ snake.pop();
96
  }
97
+ }
98
+
99
+ // Start the game
100
+ init();
101
+ </script>
102
  """, "Snake Game"),
103
  ]
104