Hugging Face's logo

Spaces:
broadfield-dev
/
UI_learn_js
Running

App Files Community
broadfield-dev commited on
Commit
51b32a0
·
verified ·
1 Parent(s): ccee031

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +31 -36
app.py CHANGED
@@ -2,7 +2,6 @@ import gradio as gr
2
 
3
  def update_ui(code):
4
  try:
5
- # We'll return the HTML with CSS, and let JavaScript be handled by the browser
6
  return f"""
7
  <div style="border: 1px solid #ccc; padding: 10px; height: 400px; overflow: auto;">
8
  {code}
@@ -20,30 +19,26 @@ def interface():
20
  ui_preview = gr.HTML(label="UI Preview")
21
  error_output = gr.Textbox(label="Error", interactive=False)
22
 
23
- # Use _js to handle JavaScript execution in the browser context
24
  code_input.change(
25
  fn=update_ui,
26
  inputs=code_input,
27
  outputs=[ui_preview, error_output],
28
- js="""
29
- function(code) {
30
- // Create a temporary div to parse the HTML/CSS/JS
31
  const tempDiv = document.createElement('div');
32
- tempDiv.innerHTML = code;
33
 
34
- // Handle JavaScript by creating new script elements
35
  const scripts = tempDiv.getElementsByTagName('script');
36
- const scriptContents = Array.from(scripts).map(script => {
37
  const newScript = document.createElement('script');
38
  newScript.textContent = script.textContent;
39
  document.body.appendChild(newScript);
40
- script.remove(); // Remove original script to avoid double execution
41
- return script.textContent;
42
- });
43
-
44
- // Return the HTML content without the script tags for Gradio to display
45
  return tempDiv.innerHTML;
46
- }
47
  """
48
  )
49
 
@@ -61,17 +56,17 @@ def interface():
61
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
62
  <title>Snake Game</title>
63
  <style>
64
- body {
65
  display: flex;
66
  justify-content: center;
67
  align-items: center;
68
  height: 100vh;
69
  background-color: #000;
70
  margin: 0;
71
- }
72
- #gameCanvas {
73
  border: 1px solid #fff;
74
- }
75
  </style>
76
  </head>
77
  <body>
@@ -81,18 +76,18 @@ def interface():
81
  const ctx = canvas.getContext('2d');
82
  const grid = 20;
83
  let count = 0;
84
- let snake = {
85
  x: grid * 5,
86
  y: grid * 5,
87
  dx: grid,
88
  dy: 0,
89
  cells: [],
90
  maxCells: 4
91
- };
92
- let apple = {x: 0, y: 0};
93
  let score = 0;
94
 
95
- function gameLoop() {
96
  requestAnimationFrame(gameLoop);
97
  if (++count < 4) return;
98
  count = 0;
@@ -103,34 +98,34 @@ def interface():
103
  else if (snake.x >= canvas.width) snake.x = 0;
104
  if (snake.y < 0) snake.y = canvas.height - grid;
105
  else if (snake.y >= canvas.height) snake.y = 0;
106
- snake.cells.unshift({x: snake.x, y: snake.y});
107
  if (snake.cells.length > snake.maxCells) snake.cells.pop();
108
  ctx.fillStyle = 'red';
109
  ctx.fillRect(apple.x, apple.y, grid - 1, grid - 1);
110
  ctx.fillStyle = 'green';
111
- snake.cells.forEach(function(cell, index) {
112
  ctx.fillRect(cell.x, cell.y, grid - 1, grid - 1);
113
- if (index !== 0 && cell.x === snake.x && cell.y === snake.y) {
114
  snake.maxCells = 4;
115
  score = 0;
116
- }
117
- });
118
- if (snake.x === apple.x && snake.y === apple.y) {
119
  snake.maxCells++;
120
  score++;
121
  apple.x = Math.floor(Math.random() * 20) * grid;
122
  apple.y = Math.floor(Math.random() * 20) * grid;
123
- }
124
  ctx.fillStyle = 'white';
125
  ctx.font = '20px Arial';
126
  ctx.fillText('Score: ' + score, 10, 20);
127
- }
128
- document.addEventListener('keydown', function(e) {
129
- if (e.which === 37 && snake.dx === 0) { snake.dx = -grid; snake.dy = 0; }
130
- else if (e.which === 38 && snake.dy === 0) { snake.dx = 0; snake.dy = -grid; }
131
- else if (e.which === 39 && snake.dx === 0) { snake.dx = grid; snake.dy = 0; }
132
- else if (e.which === 40 && snake.dy === 0) { snake.dx = 0; snake.dy = grid; }
133
- });
134
  apple.x = Math.floor(Math.random() * 20) * grid;
135
  apple.y = Math.floor(Math.random() * 20) * grid;
136
  requestAnimationFrame(gameLoop);
 
2
 
3
  def update_ui(code):
4
  try:
 
5
  return f"""
6
  <div style="border: 1px solid #ccc; padding: 10px; height: 400px; overflow: auto;">
7
  {code}
 
19
  ui_preview = gr.HTML(label="UI Preview")
20
  error_output = gr.Textbox(label="Error", interactive=False)
21
 
22
+ # Correctly using _js in the latest Gradio version
23
  code_input.change(
24
  fn=update_ui,
25
  inputs=code_input,
26
  outputs=[ui_preview, error_output],
27
+ _js=lambda code: f"""
28
+ (function() {{
 
29
  const tempDiv = document.createElement('div');
30
+ tempDiv.innerHTML = `{code}`;
31
 
 
32
  const scripts = tempDiv.getElementsByTagName('script');
33
+ Array.from(scripts).forEach(script => {{
34
  const newScript = document.createElement('script');
35
  newScript.textContent = script.textContent;
36
  document.body.appendChild(newScript);
37
+ script.remove();
38
+ }});
39
+
 
 
40
  return tempDiv.innerHTML;
41
+ }})();
42
  """
43
  )
44
 
 
56
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
57
  <title>Snake Game</title>
58
  <style>
59
+ body {{
60
  display: flex;
61
  justify-content: center;
62
  align-items: center;
63
  height: 100vh;
64
  background-color: #000;
65
  margin: 0;
66
+ }}
67
+ #gameCanvas {{
68
  border: 1px solid #fff;
69
+ }}
70
  </style>
71
  </head>
72
  <body>
 
76
  const ctx = canvas.getContext('2d');
77
  const grid = 20;
78
  let count = 0;
79
+ let snake = {{
80
  x: grid * 5,
81
  y: grid * 5,
82
  dx: grid,
83
  dy: 0,
84
  cells: [],
85
  maxCells: 4
86
+ }};
87
+ let apple = {{x: 0, y: 0}};
88
  let score = 0;
89
 
90
+ function gameLoop() {{
91
  requestAnimationFrame(gameLoop);
92
  if (++count < 4) return;
93
  count = 0;
 
98
  else if (snake.x >= canvas.width) snake.x = 0;
99
  if (snake.y < 0) snake.y = canvas.height - grid;
100
  else if (snake.y >= canvas.height) snake.y = 0;
101
+ snake.cells.unshift({{x: snake.x, y: snake.y}});
102
  if (snake.cells.length > snake.maxCells) snake.cells.pop();
103
  ctx.fillStyle = 'red';
104
  ctx.fillRect(apple.x, apple.y, grid - 1, grid - 1);
105
  ctx.fillStyle = 'green';
106
+ snake.cells.forEach(function(cell, index) {{
107
  ctx.fillRect(cell.x, cell.y, grid - 1, grid - 1);
108
+ if (index !== 0 && cell.x === snake.x && cell.y === snake.y) {{
109
  snake.maxCells = 4;
110
  score = 0;
111
+ }}
112
+ }});
113
+ if (snake.x === apple.x && snake.y === apple.y) {{
114
  snake.maxCells++;
115
  score++;
116
  apple.x = Math.floor(Math.random() * 20) * grid;
117
  apple.y = Math.floor(Math.random() * 20) * grid;
118
+ }}
119
  ctx.fillStyle = 'white';
120
  ctx.font = '20px Arial';
121
  ctx.fillText('Score: ' + score, 10, 20);
122
+ }}
123
+ document.addEventListener('keydown', function(e) {{
124
+ if (e.which === 37 && snake.dx === 0) {{ snake.dx = -grid; snake.dy = 0; }}
125
+ else if (e.which === 38 && snake.dy === 0) {{ snake.dx = 0; snake.dy = -grid; }}
126
+ else if (e.which === 39 && snake.dx === 0) {{ snake.dx = grid; snake.dy = 0; }}
127
+ else if (e.which === 40 && snake.dy === 0) {{ snake.dx = 0; snake.dy = grid; }}
128
+ }});
129
  apple.x = Math.floor(Math.random() * 20) * grid;
130
  apple.y = Math.floor(Math.random() * 20) * grid;
131
  requestAnimationFrame(gameLoop);