Hugging Face's logo

Spaces:
broadfield-dev
/
UI_learn_js
Running

App Files Community
broadfield-dev commited on
Commit
3ab14b8
·
verified ·
1 Parent(s): fc3b76d

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +44 -145
app.py CHANGED
@@ -1,147 +1,46 @@
1
  import gradio as gr
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}
8
- </div>
9
- """, None
10
- except Exception as e:
11
- return "", str(e)
12
-
13
- def interface():
14
- with gr.Blocks() as demo:
15
- gr.Markdown("# Learn Frontend UI")
16
- with gr.Row():
17
- code_input = gr.Code(label="Write your HTML/CSS/JS here", language="html")
18
- with gr.Column():
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
-
45
- # Add example section
46
- with gr.Accordion("HTML/CSS/JS Code Examples", open=False):
47
- with gr.Column():
48
- example_buttons = []
49
- example_codes = [
50
- # ... (your existing examples here)
51
- ("""
52
- <!DOCTYPE html>
53
- <html lang="en">
54
- <head>
55
- <meta charset="UTF-8">
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>
73
- <canvas id="gameCanvas" width="400" height="400"></canvas>
74
- <script>
75
- const canvas = document.getElementById('gameCanvas');
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;
94
- ctx.clearRect(0, 0, canvas.width, canvas.height);
95
- snake.x += snake.dx;
96
- snake.y += snake.dy;
97
- if (snake.x < 0) snake.x = canvas.width - grid;
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);
132
- </script>
133
- </body>
134
- </html>
135
- """, "Snake Game"),
136
- ]
137
-
138
- for code, label in example_codes:
139
- button = gr.Button(label)
140
- example_buttons.append(button)
141
- button.click(fn=lambda x=code: x, outputs=code_input)
142
-
143
- return demo
144
-
145
- if __name__ == "__main__":
146
- demo = interface()
147
- demo.launch()
 
1
  import gradio as gr
2
 
3
+ def snake_game():
4
+ # This function will just return the HTML since no user input is needed for this simple demo
5
+ return f"""
6
+ <div id="gameCanvas" style="width:400px;height:400px;border:1px solid black;"></div>
7
+ <script>
8
+ // Insert the JavaScript code here (Remove the script tags as they're not needed within this context)
9
+ let canvas = document.getElementById('gameCanvas');
10
+ let ctx = canvas.getContext('2d');
11
+ let snake = [{x: 10, y: 10}];
12
+ let food = {{x: 15, y: 15}};
13
+ let gameLoop;
14
+
15
+ function init() {{
16
+ gameLoop = setInterval(game, 100);
17
+ }}
18
+
19
+ function game() {{
20
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
21
+ snake.unshift({{x: snake[0].x, y: snake[0].y}});
22
+ snake[0].x += 1;
23
+ ctx.fillStyle = "green";
24
+ snake.forEach(part => {{
25
+ ctx.fillRect(part.x * 10, part.y * 10, 10, 10);
26
+ }});
27
+
28
+ ctx.fillStyle = "red";
29
+ ctx.fillRect(food.x * 10, food.y * 10, 10, 10);
30
+
31
+ if(snake[0].x == food.x && snake[0].y == food.y) {{
32
+ food.x = Math.floor(Math.random() * 40);
33
+ food.y = Math.floor(Math.random() * 40);
34
+ }} else {{
35
+ snake.pop();
36
+ }}
37
+ }}
38
+
39
+ init();
40
+ </script>
41
+ """
42
+
43
+ with gr.Blocks() as demo:
44
+ gr.HTML(snake_game())
45
+
46
+ demo.launch()