Spaces:

1hitonline
/

flaskdockernew

Sleeping

App Files Files Community

MySafeCode commited on Jan 30

Commit

1e2288a

verified ·

1 Parent(s): 4d36f3c

Update app.py

Browse files

Files changed (1) hide show

app.py +286 -351

app.py CHANGED Viewed

@@ -1,5 +1,5 @@
 #!/usr/bin/env python3
-# shader_to_pygame.py - WebGL shader → PyGame streaming
 import os
 import pygame
 import numpy as np
@@ -7,17 +7,16 @@ import time
 import threading
 from flask import Flask, Response
-# Setup
 os.environ['SDL_VIDEODRIVER'] = 'dummy'
 os.environ['PYGAME_HIDE_SUPPORT_PROMPT'] = '1'
 PORT = int(os.getenv('PORT', 7860))
-WIDTH, HEIGHT = 800, 600  # Larger for shader demo
 app = Flask(__name__)
-# Mode: 0 = Shader, 1 = PyGame
-current_mode = 0
 frame_data = {
     "pixels": None,
     "frame_id": 0,
@@ -29,329 +28,103 @@ def index():
     return '''<!DOCTYPE html>
 <html>
 <head>
-    <title>Shader → PyGame Demo</title>
     <style>
         body { margin: 0; padding: 20px; background: #000; color: white; font-family: monospace; text-align: center; }
-        canvas {
-            border: 3px solid #0af;
-            background: black;
-            display: block;
-            margin: 20px auto;
-            image-rendering: pixelated;
-        }
-        .mode-indicator {
-            position: absolute;
-            top: 20px;
-            left: 20px;
-            background: rgba(0, 0, 0, 0.7);
-            padding: 10px;
-            border-radius: 8px;
-            font-size: 14px;
-        }
-        .controls {
-            margin: 20px;
-        }
-        button {
-            background: linear-gradient(45deg, #ff0080, #00ff80);
-            color: white;
-            border: none;
-            padding: 12px 24px;
-            margin: 8px;
-            border-radius: 25px;
-            cursor: pointer;
-            font-family: monospace;
-            font-weight: bold;
-            transition: all 0.3s;
-        }
-        button:hover {
-            transform: scale(1.05);
-            box-shadow: 0 0 20px #0af;
-        }
     </style>
 </head>
 <body>
-    <div class="mode-indicator" id="modeIndicator">🎨 MODE: <span id="modeText">WEBGL SHADER</span></div>
-    <h1 style="background: linear-gradient(45deg, #ff0080, #00ff80, #8000ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
-        ⚡ SHADER → PYGAME DEMO
-    </h1>
     <canvas id="canvas" width="800" height="600"></canvas>
-    <div class="controls">
-        <button onclick="switchToShader()">🎨 WebGL Shader</button>
-        <button onclick="switchToPyGame()">🎮 PyGame Stream</button>
-        <button onclick="toggleFullscreen()">📺 Fullscreen</button>
-        <button onclick="takeScreenshot()">📸 Screenshot</button>
-    </div>
     <script>
-        console.log('🚀 Starting Shader → PyGame Demo');
         const canvas = document.getElementById('canvas');
-        const gl = canvas.getContext('webgl2') || canvas.getContext('webgl');
-        let shaderProgram = null;
-        let mode = 0; // 0 = Shader, 1 = PyGame
-        let timeUniform = 0;
-        let mouseX = 0, mouseY = 0;
         let frameCount = 0;
-        if (!gl) {
-            alert('WebGL not supported! Using canvas fallback.');
-            document.getElementById('modeText').textContent = 'CANVAS FALLBACK';
-        } else {
-            console.log('✅ WebGL initialized');
-            initWebGL();
-        }
-        // ===== WEBGL SHADER SETUP =====
-        function initWebGL() {
-            // Vertex shader - simple fullscreen quad
-            const vsSource = `
-                attribute vec2 aPosition;
-                varying vec2 vUv;
-                void main() {
-                    vUv = aPosition * 0.5 + 0.5;
-                    gl_Position = vec4(aPosition, 0.0, 1.0);
-                }
-            `;
-            // Fragment shader - FLASHY EFFECTS!
-            const fsSource = `
-                precision highp float;
-                varying vec2 vUv;
-                uniform float uTime;
-                uniform vec2 uMouse;
-                uniform int uMode;
-                // Hash function for randomness
-                float hash(float n) { return fract(sin(n) * 43758.5453); }
-                // Noise function
-                float noise(vec2 p) {
-                    vec2 ip = floor(p);
-                    vec2 u = fract(p);
-                    u = u*u*(3.0-2.0*u);
-                    float res = mix(
-                        mix(hash(ip.x+57.0*ip.y), hash(ip.x+58.0+57.0*ip.y), u.x),
-                        mix(hash(ip.x+57.0*(ip.y+1.0)), hash(ip.x+58.0+57.0*(ip.y+1.0)), u.x),
-                        u.y
-                    );
-                    return res;
-                }
-                // Plasma effect
-                vec3 plasma(vec2 uv, float time) {
-                    float v = 0.0;
-                    v += sin(uv.x * 10.0 + time);
-                    v += sin(uv.y * 10.0 + time * 1.3);
-                    v += sin(uv.x * 20.0 + uv.y * 15.0 + time * 0.7);
-                    v += sin(sqrt(uv.x*uv.x + uv.y*uv.y) * 5.0 + time);
-                    vec3 color;
-                    color.r = sin(v * 3.14159);
-                    color.g = sin(v * 3.14159 + 2.094);
-                    color.b = sin(v * 3.14159 + 4.188);
-                    return color;
                 }
-                // Fractal noise
-                float fbm(vec2 p) {
-                    float value = 0.0;
-                    float amplitude = 0.5;
-                    float frequency = 1.0;
-                    for (int i = 0; i < 6; i++) {
-                        value += amplitude * noise(p * frequency);
-                        amplitude *= 0.5;
-                        frequency *= 2.0;
-                    }
-                    return value;
                 }
-                // Main shader
-                void main() {
-                    vec2 uv = vUv;
-                    vec2 center = vec2(0.5, 0.5);
-                    float dist = distance(uv, center);
-                    // Mouse interaction
-                    vec2 mouse = uMouse;
-                    float mouseDist = distance(uv, mouse);
-                    // Time-based animations
-                    float t = uTime * 0.5;
-                    float pulse = sin(t) * 0.5 + 0.5;
-                    float spin = t * 2.0;
-                    // Choose effect based on time
-                    int effect = int(mod(uTime / 5.0, 4.0));
-                    vec3 color = vec3(0.0);
-                    if (effect == 0) {
-                        // RAINBOW SWIRL
-                        float angle = atan(uv.y - center.y, uv.x - center.x) + spin;
-                        float radius = dist * 3.0;
-                        color = 0.5 + 0.5 * cos(angle + vec3(0, 2, 4) + radius);
-                        // Add pulsing circles
-                        float circles = sin(dist * 20.0 - t * 3.0) * 0.5 + 0.5;
-                        color += circles * 0.3;
-                    } else if (effect == 1) {
-                        // FIRE EFFECT
-                        vec2 q = vec2(fbm(uv + t * 0.5), fbm(uv + vec2(1.0)));
-                        vec2 r = vec2(fbm(uv + 4.0*q + vec2(1.7, 9.2) + 0.15*t),
-                                     fbm(uv + 4.0*q + vec2(8.3, 2.8) + 0.126*t));
-                        float f = fbm(uv + 4.0*r);
-                        color = mix(
-                            vec3(1.0, 0.1, 0.0),
-                            vec3(1.0, 0.8, 0.0),
-                            clamp(f*f*4.0, 0.0, 1.0)
-                        );
-                        color = mix(
-                            color,
-                            vec3(0.0, 0.0, 0.1),
-                            clamp(length(q), 0.0, 1.0)
-                        );
-                    } else if (effect == 2) {
-                        // ELECTRIC GRID
-                        uv *= 10.0;
-                        vec2 grid = abs(fract(uv - 0.5) - 0.5) / fwidth(uv);
-                        float line = min(grid.x, grid.y);
-                        color = vec3(1.0 - smoothstep(0.0, 1.0, line));
-                        color *= vec3(0.0, 1.0, 1.0);
-                        // Animate grid
-                        uv += sin(t + uv.yx * 2.0) * 0.1;
-                        vec2 grid2 = abs(fract(uv - 0.5) - 0.5) / fwidth(uv);
-                        float line2 = min(grid2.x, grid2.y);
-                        color += vec3(1.0, 0.0, 1.0) * (1.0 - smoothstep(0.0, 1.0, line2));
-                    } else {
-                        // GALAXY/STARFIELD
-                        vec2 p = (uv - 0.5) * 2.0;
-                        p.x *= 800.0 / 600.0;
-                        // Starfield
-                        float stars = 0.0;
-                        for (int i = 0; i < 50; i++) {
-                            vec2 starPos = vec2(
-                                hash(float(i) * 1.337),
-                                hash(float(i) * 2.718)
-                            );
-                            float starSize = hash(float(i) * 3.141) * 0.002;
-                            float starBright = sin(t * 2.0 + float(i)) * 0.5 + 0.5;
-                            stars += starBright * starSize / length(p - (starPos - 0.5) * 2.0);
-                        }
-                        // Nebula clouds
-                        float clouds = fbm(p * 2.0 + t * 0.1);
-                        clouds = pow(clouds, 3.0);
-                        color = vec3(stars * 0.5) +
-                                clouds * vec3(0.8, 0.3, 1.0) +
-                                clouds * clouds * vec3(0.1, 0.5, 0.8);
-                    }
-                    // Mouse interaction glow
-                    float mouseGlow = 0.1 / (mouseDist + 0.05);
-                    color += vec3(mouseGlow * 0.5, mouseGlow, mouseGlow * 0.8);
-                    // Vignette
-                    color *= 1.0 - dist * 0.5;
-                    // Add scanlines
-                    color *= 0.9 + 0.1 * sin(uv.y * 800.0 + t * 10.0);
-                    gl_FragColor = vec4(color, 1.0);
-                }
-            `;
-            // Compile shaders
-            const vertexShader = gl.createShader(gl.VERTEX_SHADER);
-            gl.shaderSource(vertexShader, vsSource);
-            gl.compileShader(vertexShader);
-            const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
-            gl.shaderSource(fragmentShader, fsSource);
-            gl.compileShader(fragmentShader);
-            // Check for errors
-            if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
-                console.error('Vertex shader error:', gl.getShaderInfoLog(vertexShader));
-                return;
             }
-            if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
-                console.error('Fragment shader error:', gl.getShaderInfoLog(fragmentShader));
-                return;
-            }
-            // Create program
-            shaderProgram = gl.createProgram();
-            gl.attachShader(shaderProgram, vertexShader);
-            gl.attachShader(shaderProgram, fragmentShader);
-            gl.linkProgram(shaderProgram);
-            if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
-                console.error('Shader program error:', gl.getProgramInfoLog(shaderProgram));
-                return;
-            }
-            // Set up vertices for fullscreen quad
-            const vertices = new Float32Array([
-                -1, -1, 1, -1, -1, 1,
-                -1, 1, 1, -1, 1, 1
-            ]);
-            const vertexBuffer = gl.createBuffer();
-            gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
-            gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
-            const positionAttrib = gl.getAttribLocation(shaderProgram, 'aPosition');
-            gl.vertexAttribPointer(positionAttrib, 2, gl.FLOAT, false, 0, 0);
-            gl.enableVertexAttribArray(positionAttrib);
-            console.log('✅ WebGL shader program created');
-        }
-        // ===== RENDER LOOP =====
-        function renderShader(time) {
-            if (!gl || !shaderProgram) return;
-            gl.useProgram(shaderProgram);
-            // Set uniforms
-            const timeUniform = gl.getUniformLocation(shaderProgram, 'uTime');
-            const mouseUniform = gl.getUniformLocation(shaderProgram, 'uMouse');
-            const modeUniform = gl.getUniformLocation(shaderProgram, 'uMode');
-            gl.uniform1f(timeUniform, time * 0.001); // Convert to seconds
-            gl.uniform2f(mouseUniform, mouseX / 800, 1.0 - mouseY / 600); // Flip Y
-            gl.uniform1i(modeUniform, mode);
-            // Draw
-            gl.drawArrays(gl.TRIANGLES, 0, 6);
             frameCount++;
-            if (frameCount % 60 === 0) {
-                console.log(`Shader FPS: ${frameCount}`);
-                frameCount = 0;
-            }
         }
-        function renderPyGame() {
-            // Use canvas 2D for PyGame frames
-            const ctx = canvas.getContext('2d');
             fetch('/pygame_frame')
                 .then(r => r.arrayBuffer())
                 .then(buffer => {
@@ -367,78 +140,59 @@ def index():
                     }
                     ctx.putImageData(imageData, 0, 0);
-                });
         }
-        function render() {
-            if (mode === 0) {
-                renderShader(performance.now());
             } else {
-                renderPyGame();
             }
             requestAnimationFrame(render);
         }
         // ===== CONTROLS =====
-        function switchToShader() {
-            mode = 0;
-            document.getElementById('modeText').textContent = 'WEBGL SHADER';
             document.getElementById('modeText').style.color = '#0af';
-            console.log('Switched to WebGL shader');
         }
         function switchToPyGame() {
-            mode = 1;
             document.getElementById('modeText').textContent = 'PYGAME STREAM';
             document.getElementById('modeText').style.color = '#ff3366';
-            console.log('Switched to PyGame stream');
         }
-        function toggleFullscreen() {
-            if (!document.fullscreenElement) {
-                canvas.requestFullscreen().catch(err => {
-                    console.error('Fullscreen error:', err);
-                });
             } else {
-                document.exitFullscreen();
             }
-        }
-        function takeScreenshot() {
-            const link = document.createElement('a');
-            link.download = `screenshot-${Date.now()}.png`;
-            link.href = canvas.toDataURL();
-            link.click();
-            console.log('Screenshot saved');
-        }
-        // ===== EVENT HANDLERS =====
-        canvas.addEventListener('mousemove', (e) => {
-            const rect = canvas.getBoundingClientRect();
-            mouseX = e.clientX - rect.left;
-            mouseY = e.clientY - rect.top;
-        });
-        canvas.addEventListener('click', (e) => {
-            // Create ripple effect on click
-            console.log(`Click at ${mouseX}, ${mouseY}`);
-        });
-        // Start with shader
-        switchToShader();
-        // Start rendering
-        render();
-        console.log('🎮 Demo ready! Click buttons to switch modes.');
     </script>
 </body>
 </html>'''
 @app.route('/pygame_frame')
 def pygame_frame():
-    """PyGame rendering endpoint"""
     with frame_data["lock"]:
         if frame_data["pixels"] is not None:
             return Response(
@@ -447,6 +201,187 @@ def pygame_frame():
                 headers={'Cache-Control': 'no-cache'}
             )
-    # Return black frame
     black = np.zeros((HEIGHT, WIDTH, 3), dtype=np.uint8).tobytes()
-    return Response(black, mimetype='application/octet-stream')

 #!/usr/bin/env python3
+# complete_fixed_demo.py - Fixed with PyGame init and animation
 import os
 import pygame
 import numpy as np
 import threading
 from flask import Flask, Response
+# ===== CRITICAL FIXES =====
 os.environ['SDL_VIDEODRIVER'] = 'dummy'
 os.environ['PYGAME_HIDE_SUPPORT_PROMPT'] = '1'
 PORT = int(os.getenv('PORT', 7860))
+WIDTH, HEIGHT = 800, 600
 app = Flask(__name__)
+# Shared state
 frame_data = {
     "pixels": None,
     "frame_id": 0,
     return '''<!DOCTYPE html>
 <html>
 <head>
+    <title>Complete Demo</title>
     <style>
         body { margin: 0; padding: 20px; background: #000; color: white; font-family: monospace; text-align: center; }
+        canvas { border: 3px solid #0af; background: black; display: block; margin: 20px auto; }
+        .mode { background: #222; padding: 15px; border-radius: 8px; display: inline-block; margin: 10px; }
     </style>
 </head>
 <body>
+    <h1 style="color: #0af;">⚡ Complete Demo</h1>
+    <div class="mode" id="mode">Mode: <span id="modeText">Loading...</span></div>
     <canvas id="canvas" width="800" height="600"></canvas>
     <script>
         const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+        let mode = 'pygame'; // 'canvas' or 'pygame'
+        let lastTime = 0;
         let frameCount = 0;
+        // ===== CANVAS EFFECTS =====
+        function drawCanvasEffect(currentTime) {
+            const delta = (currentTime - lastTime) / 1000;
+            lastTime = currentTime;
+            // Clear with fade effect
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
+            ctx.fillRect(0, 0, 800, 600);
+            // Time in seconds
+            const t = currentTime / 1000;
+            // Draw multiple rotating shapes
+            for (let i = 0; i < 20; i++) {
+                const angle = t * (1 + i * 0.2);
+                const radius = 50 + i * 15;
+                const x = 400 + Math.cos(angle) * radius;
+                const y = 300 + Math.sin(angle) * radius;
+                const size = 10 + Math.sin(t * 3 + i) * 8;
+                // Rainbow colors
+                const hue = (t * 50 + i * 18) % 360;
+                ctx.fillStyle = `hsl(${hue}, 100%, 60%)`;
+                // Different shapes
+                if (i % 3 === 0) {
+                    // Circle
+                    ctx.beginPath();
+                    ctx.arc(x, y, size, 0, Math.PI * 2);
+                    ctx.fill();
+                } else if (i % 3 === 1) {
+                    // Square
+                    ctx.fillRect(x - size, y - size, size * 2, size * 2);
+                } else {
+                    // Triangle
+                    ctx.beginPath();
+                    ctx.moveTo(x, y - size);
+                    ctx.lineTo(x - size, y + size);
+                    ctx.lineTo(x + size, y + size);
+                    ctx.closePath();
+                    ctx.fill();
                 }
+                // Connecting lines
+                if (i > 0) {
+                    const prevAngle = t * (1 + (i - 1) * 0.2);
+                    const prevX = 400 + Math.cos(prevAngle) * radius;
+                    const prevY = 300 + Math.sin(prevAngle) * radius;
+                    ctx.beginPath();
+                    ctx.moveTo(prevX, prevY);
+                    ctx.lineTo(x, y);
+                    ctx.strokeStyle = `hsla(${hue}, 100%, 60%, 0.5)`;
+                    ctx.lineWidth = 2;
+                    ctx.stroke();
                 }
             }
+            // Center pulsing circle
+            const pulseSize = 30 + Math.sin(t * 5) * 15;
+            ctx.fillStyle = `hsl(${t * 100 % 360}, 100%, 60%)`;
+            ctx.beginPath();
+            ctx.arc(400, 300, pulseSize, 0, Math.PI * 2);
+            ctx.fill();
+            // Add text
+            ctx.fillStyle = 'white';
+            ctx.font = 'bold 24px monospace';
+            ctx.textAlign = 'center';
+            ctx.fillText('CANVAS EFFECTS DEMO', 400, 50);
+            ctx.font = '16px monospace';
+            ctx.fillText(`Frame: ${frameCount} | Time: ${t.toFixed(1)}s`, 400, 80);
             frameCount++;
         }
+        // ===== PYGAME STREAM =====
+        function loadPyGameFrame() {
             fetch('/pygame_frame')
                 .then(r => r.arrayBuffer())
                 .then(buffer => {
                     }
                     ctx.putImageData(imageData, 0, 0);
+                    // Add overlay text
+                    ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
+                    ctx.font = 'bold 24px monospace';
+                    ctx.textAlign = 'center';
+                    ctx.fillText('PYGAME STREAM', 400, 50);
+                })
+                .catch(err => console.error('PyGame error:', err));
         }
+        // ===== RENDER LOOP =====
+        function render(currentTime) {
+            if (mode === 'canvas') {
+                drawCanvasEffect(currentTime);
             } else {
+                loadPyGameFrame();
             }
             requestAnimationFrame(render);
         }
         // ===== CONTROLS =====
+        function switchToCanvas() {
+            mode = 'canvas';
+            document.getElementById('modeText').textContent = 'CANVAS EFFECTS';
             document.getElementById('modeText').style.color = '#0af';
         }
         function switchToPyGame() {
+            mode = 'pygame';
             document.getElementById('modeText').textContent = 'PYGAME STREAM';
             document.getElementById('modeText').style.color = '#ff3366';
         }
+        // Auto-switch every 5 seconds
+        setInterval(() => {
+            if (mode === 'canvas') {
+                switchToPyGame();
             } else {
+                switchToCanvas();
             }
+        }, 5000);
+        // Initialize
+        switchToCanvas();
+        requestAnimationFrame(render);
     </script>
 </body>
 </html>'''
 @app.route('/pygame_frame')
 def pygame_frame():
+    """PyGame animation endpoint"""
     with frame_data["lock"]:
         if frame_data["pixels"] is not None:
             return Response(
                 headers={'Cache-Control': 'no-cache'}
             )
+    # Fallback
     black = np.zeros((HEIGHT, WIDTH, 3), dtype=np.uint8).tobytes()
+    return Response(black, mimetype='application/octet-stream')
+def pygame_animation():
+    """PyGame animation with proper initialization"""
+    print("🎬 Starting PyGame animation...")
+    try:
+        # ===== FIX 1: Proper PyGame initialization =====
+        pygame.init()
+        # Initialize display (CRITICAL for headless)
+        pygame.display.init()
+        pygame.display.set_mode((1, 1), pygame.HIDDEN)  # Hidden window
+        print("✅ PyGame display initialized")
+        # Create surface
+        surface = pygame.Surface((WIDTH, HEIGHT))
+        print(f"✅ Surface created: {WIDTH}x{HEIGHT}")
+    except Exception as e:
+        print(f"❌ PyGame init failed: {e}")
+        import traceback
+        traceback.print_exc()
+        return
+    # ===== FIX 2: Animated objects =====
+    particles = []
+    for _ in range(100):
+        particles.append({
+            'x': np.random.randint(0, WIDTH),
+            'y': np.random.randint(0, HEIGHT),
+            'dx': np.random.uniform(-3, 3),
+            'dy': np.random.uniform(-3, 3),
+            'size': np.random.randint(2, 10),
+            'color': (
+                np.random.randint(50, 255),
+                np.random.randint(50, 255),
+                np.random.randint(50, 255)
+            ),
+            'life': np.random.randint(100, 300),
+            'type': np.random.choice(['circle', 'square', 'triangle'])
+        })
+    # Rotating geometric shapes
+    shapes = []
+    for i in range(8):
+        shapes.append({
+            'angle': i * np.pi / 4,
+            'radius': 100 + i * 20,
+            'speed': 0.5 + i * 0.1,
+            'size': 15 + i * 5,
+            'color': (
+                (i * 32) % 256,
+                (i * 64) % 256,
+                (i * 96) % 256
+            )
+        })
+    print(f"✅ Created {len(particles)} particles and {len(shapes)} shapes")
+    frame_id = 0
+    start_time = time.time()
+    while True:
+        frame_start = time.time()
+        # ===== FIX 3: Time-based animation =====
+        elapsed = time.time() - start_time
+        # Clear with gradient
+        for y in range(HEIGHT):
+            color = int(20 + y / HEIGHT * 30)
+            pygame.draw.line(surface, (color, color, color + 20),
+                           (0, y), (WIDTH, y))
+        # Draw rotating shapes
+        for shape in shapes:
+            shape['angle'] += shape['speed'] * 0.05
+            x = WIDTH // 2 + np.cos(shape['angle']) * shape['radius']
+            y = HEIGHT // 2 + np.sin(shape['angle']) * shape['radius']
+            # Draw shape
+            if np.random.random() < 0.3:  # 30% chance of triangle
+                points = [
+                    (x, y - shape['size']),
+                    (x - shape['size'], y + shape['size']),
+                    (x + shape['size'], y + shape['size'])
+                ]
+                pygame.draw.polygon(surface, shape['color'], points)
+            else:
+                pygame.draw.circle(surface, shape['color'],
+                                 (int(x), int(y)), shape['size'])
+            # Connect shapes with lines
+            pygame.draw.circle(surface, (255, 255, 255, 100),
+                             (int(x), int(y)), shape['size'], 2)
+        # Update and draw particles
+        for p in particles:
+            p['x'] += p['dx']
+            p['y'] += p['dy']
+            p['life'] -= 1
+            # Bounce or respawn
+            if (p['x'] < 0 or p['x'] > WIDTH or
+                p['y'] < 0 or p['y'] > HEIGHT or
+                p['life'] <= 0):
+                p['x'] = np.random.randint(0, WIDTH)
+                p['y'] = np.random.randint(0, HEIGHT)
+                p['dx'] = np.random.uniform(-3, 3)
+                p['dy'] = np.random.uniform(-3, 3)
+                p['life'] = np.random.randint(100, 300)
+                p['color'] = (
+                    np.random.randint(50, 255),
+                    np.random.randint(50, 255),
+                    np.random.randint(50, 255)
+                )
+            # Draw particle with trail
+            for i in range(3):
+                trail_x = p['x'] - p['dx'] * i * 0.3
+                trail_y = p['y'] - p['dy'] * i * 0.3
+                trail_size = p['size'] * (1 - i * 0.3)
+                trail_alpha = 200 - i * 60
+                pygame.draw.circle(
+                    surface,
+                    (*p['color'], trail_alpha),
+                    (int(trail_x), int(trail_y)),
+                    int(trail_size)
+                )
+        # Add frame info
+        font = pygame.font.Font(None, 28)
+        info = [
+            f"Frame: {frame_id}",
+            f"Time: {elapsed:.1f}s",
+            f"FPS: {int(1/(time.time()-frame_start)) if frame_id>0 else 0}",
+            f"Particles: {len(particles)}"
+        ]
+        for i, text in enumerate(info):
+            text_surface = font.render(text, True, (255, 255, 200))
+            surface.blit(text_surface, (10, 10 + i * 30))
+        # Convert to NumPy array
+        pixels = pygame.surfarray.pixels3d(surface)
+        # Update shared memory
+        with frame_data["lock"]:
+            frame_data["pixels"] = pixels.copy()
+            frame_data["frame_id"] = frame_id
+        frame_id += 1
+        # Log every 30 frames
+        if frame_id % 30 == 0:
+            current_fps = 1 / (time.time() - frame_start) if frame_id > 0 else 0
+            print(f"📊 Frame {frame_id} | FPS: {current_fps:.1f}")
+        # ===== FIX 4: Frame rate control =====
+        frame_time = time.time() - frame_start
+        target_time = 1/30  # 30 FPS
+        if frame_time < target_time:
+            time.sleep(target_time - frame_time)
+# Start PyGame thread
+threading.Thread(target=pygame_animation, daemon=True).start()
+# Wait for initialization
+print("⏳ Waiting for PyGame to start...")
+time.sleep(3)
+print("🌐 Starting Flask server...")
+print(f"📡 Port: {PORT}")
+print("="*60)
+if __name__ == "__main__":
+    app.run(host='0.0.0.0', port=PORT, threaded=True, use_reloader=False)