Hugging Face's logo

Spaces:
1hitonline
/
flaskdockernew
Sleeping

App Files Community
MySafeCode commited on
Commit
8424eb1
·
verified ·
1 Parent(s): 42f531a

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +96 -248
app.py CHANGED
@@ -1,266 +1,114 @@
1
  #!/usr/bin/env python3
2
- # simple_canvas_animation.py - HTML5 Canvas + Minimal Flask
 
 
3
  import time
4
- import os
5
- from flask import Flask
6
 
7
- PORT = int(os.getenv('PORT', 7860))
 
 
8
 
9
  app = Flask(__name__)
10
 
11
- HTML = '''<!DOCTYPE html>
12
- <html>
13
- <head>
14
- <title>Simple Canvas Animation</title>
15
- <style>
16
- body { margin: 0; padding: 20px; background: #111; color: white; font-family: Arial; text-align: center; }
17
- canvas { border: 3px solid #0af; background: black; display: block; margin: 20px auto; }
18
- .controls { margin: 20px; }
19
- button { background: #0af; color: white; border: none; padding: 10px 20px; margin: 5px; border-radius: 5px; cursor: pointer; }
20
- button:hover { background: #08c; }
21
- </style>
22
- </head>
23
- <body>
24
- <h1>🎨 HTML5 Canvas Animation</h1>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
25
 
26
- <canvas id="canvas" width="800" height="600"></canvas>
 
 
 
 
 
 
 
 
 
 
 
 
 
27
 
28
- <div class="controls">
29
- <button onclick="startAnimation()">Start</button>
30
- <button onclick="stopAnimation()">Stop</button>
31
- <button onclick="changePattern()">Change Pattern</button>
32
- </div>
33
 
34
- <div style="color: #888; margin-top: 20px;">
35
- <p>Pure HTML5 Canvas + JavaScript - No Flask data transfer needed</p>
36
- <p>Everything runs in your browser!</p>
37
- </div>
38
 
39
- <script>
40
- const canvas = document.getElementById('canvas');
41
- const ctx = canvas.getContext('2d');
42
- let animationId = null;
43
- let pattern = 1;
44
- let time = 0;
45
 
46
- // Bouncing balls
47
- const balls[];
48
- for (let i = 0; i < 10; i++) {
49
- balls.push({
50
- x: Math.random() * canvas.width,
51
- y: Math.random() * canvas.height,
52
- dx: (Math.random() - 0.5) * 8,
53
- dy: (Math.random() - 0.5) * 8,
54
- radius: 10 + Math.random() * 20,
55
- color: `hsl(${Math.random() * 360}, 100%, 60%)`,
56
- trail: []
57
- });
58
- }
59
 
60
- function drawPattern1() {
61
- // Clear with gradient
62
- const gradient = ctx.createRadialGradient(
63
- canvas.width/2, canvas.height/2, 0,
64
- canvas.width/2, canvas.height/2, Math.max(canvas.width, canvas.height)/2
65
- );
66
- gradient.addColorStop(0, 'rgba(20, 20, 40, 0.8)');
67
- gradient.addColorStop(1, 'rgba(0, 0, 20, 1)');
68
- ctx.fillStyle = gradient;
69
- ctx.fillRect(0, 0, canvas.width, canvas.height);
70
-
71
- // Update and draw balls
72
- balls.forEach(ball => {
73
- // Update position
74
- ball.x += ball.dx;
75
- ball.y += ball.dy;
76
-
77
- // Bounce off walls
78
- if (ball.x - ball.radius < 0 || ball.x + ball.radius > canvas.width) {
79
- ball.dx = -ball.dx;
80
- }
81
- if (ball.y - ball.radius < 0 || ball.y + ball.radius > canvas.height) {
82
- ball.dy = -ball.dy;
83
- }
84
-
85
- // Add to trail
86
- ball.trail.push({x: ball.x, y: ball.y});
87
- if (ball.trail.length > 20) ball.trail.shift();
88
-
89
- // Draw trail
90
- ball.trail.forEach((pos, i) => {
91
- const alpha = i / ball.trail.length;
92
- ctx.beginPath();
93
- ctx.arc(pos.x, pos.y, ball.radius * alpha, 0, Math.PI * 2);
94
- ctx.fillStyle = ball.color.replace(')', `, ${alpha})`).replace('hsl', 'hsla');
95
- ctx.fill();
96
- });
97
-
98
- // Draw ball
99
- ctx.beginPath();
100
- ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
101
- ctx.fillStyle = ball.color;
102
- ctx.fill();
103
- ctx.strokeStyle = 'white';
104
- ctx.lineWidth = 2;
105
- ctx.stroke();
106
- });
107
- }
108
 
109
- function drawPattern2() {
110
- // Clear
111
- ctx.fillStyle = 'rgba(0, 10, 20, 0.1)';
112
- ctx.fillRect(0, 0, canvas.width, canvas.height);
113
-
114
- time += 0.05;
115
-
116
- // Draw rotating pattern
117
- const centerX = canvas.width / 2;
118
- const centerY = canvas.height / 2;
119
-
120
- for (let i = 0; i < 20; i++) {
121
- const angle = time + i * Math.PI / 10;
122
- const radius = 50 + i * 15;
123
- const x = centerX + Math.cos(angle) * radius;
124
- const y = centerY + Math.sin(angle) * radius;
125
- const size = 10 + Math.sin(time * 2 + i) * 5;
126
-
127
- // Gradient color
128
- const hue = (time * 20 + i * 18) % 360;
129
- ctx.fillStyle = `hsl(${hue}, 100%, 60%)`;
130
-
131
- ctx.beginPath();
132
- ctx.arc(x, y, size, 0, Math.PI * 2);
133
- ctx.fill();
134
-
135
- // Connecting lines
136
- if (i > 0) {
137
- const prevAngle = time + (i - 1) * Math.PI / 10;
138
- const prevX = centerX + Math.cos(prevAngle) * radius;
139
- const prevY = centerY + Math.sin(prevAngle) * radius;
140
-
141
- ctx.beginPath();
142
- ctx.moveTo(prevX, prevY);
143
- ctx.lineTo(x, y);
144
- ctx.strokeStyle = `hsla(${hue}, 100%, 60%, 0.5)`;
145
- ctx.lineWidth = 2;
146
- ctx.stroke();
147
- }
148
- }
149
-
150
- // Draw center circle
151
- ctx.beginPath();
152
- ctx.arc(centerX, centerY, 30, 0, Math.PI * 2);
153
- ctx.fillStyle = `hsl(${time * 50 % 360}, 100%, 60%)`;
154
- ctx.fill();
155
- ctx.strokeStyle = 'white';
156
- ctx.lineWidth = 3;
157
- ctx.stroke();
158
- }
159
 
160
- function drawPattern3() {
161
- // Clear with subtle fade
162
- ctx.fillStyle = 'rgba(10, 5, 20, 0.2)';
163
- ctx.fillRect(0, 0, canvas.width, canvas.height);
164
-
165
- time += 0.03;
166
-
167
- // Draw wave pattern
168
- for (let x = 0; x < canvas.width; x += 20) {
169
- for (let y = 0; y < canvas.height; y += 20) {
170
- const wave = Math.sin(x * 0.02 + time) * Math.cos(y * 0.02 + time);
171
- const size = 5 + wave * 10;
172
-
173
- const hue = (x + y + time * 100) % 360;
174
- const saturation = 70 + wave * 30;
175
- const lightness = 40 + wave * 20;
176
-
177
- ctx.fillStyle = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
178
-
179
- ctx.beginPath();
180
- ctx.arc(x, y, size, 0, Math.PI * 2);
181
- ctx.fill();
182
- }
183
- }
184
-
185
- // Draw moving text
186
- ctx.font = 'bold 48px Arial';
187
- ctx.textAlign = 'center';
188
- ctx.textBaseline = 'middle';
189
-
190
- const text = 'HTML5 CANVAS';
191
- const textX = canvas.width / 2;
192
- const textY = canvas.height / 2;
193
-
194
- // Text shadow/glow
195
- for (let i = 0; i < 10; i++) {
196
- const offset = Math.sin(time + i) * 5;
197
- ctx.fillStyle = `hsla(${i * 36}, 100%, 60%, 0.2)`;
198
- ctx.fillText(text, textX + offset, textY + offset);
199
- }
200
-
201
- // Main text
202
- ctx.fillStyle = `hsl(${time * 50 % 360}, 100%, 60%)`;
203
- ctx.fillText(text, textX, textY);
204
- }
205
 
206
- function animate() {
207
- switch(pattern) {
208
- case 1: drawPattern1(); break;
209
- case 2: drawPattern2(); break;
210
- case 3: drawPattern3(); break;
211
- }
212
-
213
- // Add FPS counter
214
- ctx.font = '16px monospace';
215
- ctx.fillStyle = 'white';
216
- ctx.textAlign = 'left';
217
- ctx.fillText(`Pattern: ${pattern}`, 10, 20);
218
- ctx.fillText(`Time: ${time.toFixed(1)}s`, 10, 40);
219
-
220
- animationId = requestAnimationFrame(animate);
221
- }
222
 
223
- function startAnimation() {
224
- if (!animationId) {
225
- animate();
226
- console.log('Animation started');
227
- }
228
- }
229
-
230
- function stopAnimation() {
231
- if (animationId) {
232
- cancelAnimationFrame(animationId);
233
- animationId = null;
234
- console.log('Animation stopped');
235
- }
236
- }
237
-
238
- function changePattern() {
239
- pattern = pattern % 3 + 1;
240
- console.log(`Changed to pattern ${pattern}`);
241
- }
242
-
243
- // Initialize with pattern 1
244
- drawPattern1();
245
- console.log('Ready! Click Start to animate');
246
- </script>
247
- </body>
248
- </html>'''
249
 
250
- @app.route('/')
251
- def index():
252
- return HTML
253
-
254
- def main():
255
- print("="*60)
256
- print("🎨 HTML5 Canvas Animation Server")
257
- print("="*60)
258
- print(f"📡 Port: {PORT}")
259
- print("✨ Everything runs in browser - no data transfer needed!")
260
- print("🎬 3 different animation patterns")
261
- print("="*60)
262
-
263
- app.run(host='0.0.0.0', port=PORT, threaded=True, use_reloader=False)
264
 
265
- if __name__ == "__main__":
266
- main()
 
1
  #!/usr/bin/env python3
2
+ # simplest_pipeline.py - Minimal PyGame to Flask
3
+ import pygame
4
+ import numpy as np
5
  import time
6
+ from flask import Flask, Response
 
7
 
8
+ # Setup
9
+ os.environ['SDL_VIDEODRIVER'] = 'dummy'
10
+ WIDTH, HEIGHT = 400, 300
11
 
12
  app = Flask(__name__)
13
 
14
+ # Global variable - simplest shared memory
15
+ current_frame = None
16
+ frame_count = 0
17
+
18
+ @app.route('/')
19
+ def index():
20
+ return '''
21
+ <!DOCTYPE html>
22
+ <html>
23
+ <body>
24
+ <canvas id="canvas" width="400" height="300"></canvas>
25
+ <script>
26
+ const canvas = document.getElementById('canvas');
27
+ const ctx = canvas.getContext('2d');
28
+
29
+ function loadFrame() {
30
+ fetch('/frame')
31
+ .then(r => r.arrayBuffer())
32
+ .then(buffer => {
33
+ const imageData = new ImageData(400, 300);
34
+ const rgba = imageData.data;
35
+ const rgb = new Uint8Array(buffer);
36
+
37
+ for (let i = 0, j = 0; i < rgba.length; i += 4, j += 3) {
38
+ rgba[i] = rgb[j];
39
+ rgba[i + 1] = rgb[j + 1];
40
+ rgba[i + 2] = rgb[j + 2];
41
+ rgba[i + 3] = 255;
42
+ }
43
+
44
+ ctx.putImageData(imageData, 0, 0);
45
+ });
46
+ }
47
+
48
+ setInterval(loadFrame, 33);
49
+ </script>
50
+ </body>
51
+ </html>
52
+ '''
53
+
54
+ @app.route('/frame')
55
+ def get_frame():
56
+ global current_frame, frame_count
57
 
58
+ if current_frame is not None:
59
+ return Response(
60
+ current_frame,
61
+ mimetype='application/octet-stream',
62
+ headers={'Cache-Control': 'no-cache'}
63
+ )
64
+
65
+ # Return black frame
66
+ black = np.zeros((HEIGHT, WIDTH, 3), dtype=np.uint8).tobytes()
67
+ return Response(black, mimetype='application/octet-stream')
68
+
69
+ # PyGame render function
70
+ def pygame_loop():
71
+ global current_frame, frame_count
72
 
73
+ pygame.init()
74
+ surface = pygame.Surface((WIDTH, HEIGHT))
 
 
 
75
 
76
+ # Simple bouncing ball
77
+ x, y = 200, 150
78
+ dx, dy = 3, 2
 
79
 
80
+ while True:
81
+ # Clear
82
+ surface.fill((20, 20, 40))
 
 
 
83
 
84
+ # Update ball
85
+ x += dx
86
+ y += dy
 
 
 
 
 
 
 
 
 
 
87
 
88
+ if x < 20 or x > 380:
89
+ dx = -dx
90
+ if y < 20 or y > 280:
91
+ dy = -dy
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
92
 
93
+ # Draw ball
94
+ pygame.draw.circle(surface, (255, 100, 100), (int(x), int(y)), 20)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
95
 
96
+ # Add text
97
+ font = pygame.font.Font(None, 24)
98
+ text = font.render(f"Frame: {frame_count}", True, (255, 255, 255))
99
+ surface.blit(text, (10, 10))
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
100
 
101
+ # Convert to bytes
102
+ pixel_array = pygame.surfarray.pixels3d(surface)
103
+ current_frame = pixel_array.tobytes()
104
+ frame_count += 1
 
 
 
 
 
 
 
 
 
 
 
 
105
 
106
+ print(f"🎬 PyGame frame {frame_count}")
107
+ time.sleep(1/30)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
108
 
109
+ # Start PyGame in a thread
110
+ import threading
111
+ threading.Thread(target=pygame_loop, daemon=True).start()
 
 
 
 
 
 
 
 
 
 
 
112
 
113
+ # Start Flask
114
+ app.run(host='0.0.0.0', port=7860)