Spaces:

akhaliq
/

gradio-game

Running

App Files Files Community

akhaliq HF staff commited on 28 days ago

Commit

4552af7

verified ·

1 Parent(s): 4d71127

Update app.py

Browse files

Files changed (1) hide show

app.py +228 -257

app.py CHANGED Viewed

@@ -8,302 +8,273 @@ with demo:
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Autonomous Maze Game Demo</title>
     <style>
         body { margin: 0; overflow: hidden; }
-        #status {
             position: absolute;
             top: 10px;
             left: 10px;
             color: white;
             background: rgba(0, 0, 0, 0.7);
-            padding: 5px;
             font-family: Arial, sans-serif;
         }
     </style>
 </head>
 <body>
-    <div id="container"></div>
-    <div id="status">Status: In progress</div>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
     <script>
-        // Scene Setup
         const scene = new THREE.Scene();
         const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
         const renderer = new THREE.WebGLRenderer();
         renderer.setSize(window.innerWidth, window.innerHeight);
-        document.getElementById('container').appendChild(renderer.domElement);
-        // Lighting
-        const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444);
-        hemiLight.position.set(0, 20, 0);
-        scene.add(hemiLight);
-        const dirLight = new THREE.DirectionalLight(0xffffff);
-        dirLight.position.set(0, 20, 10);
-        scene.add(dirLight);
-        // Floor Texture
-        function createFloorTexture() {
-            const canvas = document.createElement('canvas');
-            canvas.width = 256;
-            canvas.height = 256;
-            const context = canvas.getContext('2d');
-            context.fillStyle = '#8B4513'; // Brown
-            context.fillRect(0, 0, 256, 256);
-            context.strokeStyle = '#FFFFFF';
-            context.lineWidth = 2;
-            for (let i = 0; i <= 16; i++) {
-                const pos = i * 16;
-                context.beginPath();
-                context.moveTo(pos, 0);
-                context.lineTo(pos, 256);
-                context.stroke();
-                context.beginPath();
-                context.moveTo(0, pos);
-                context.lineTo(256, pos);
-                context.stroke();
-            }
-            const texture = new THREE.CanvasTexture(canvas);
-            texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
-            texture.repeat.set(16, 16);
-            return texture;
         }
-        // Wall Texture
-        function createWallTexture() {
-            const canvas = document.createElement('canvas');
-            canvas.width = 64;
-            canvas.height = 64;
-            const context = canvas.getContext('2d');
-            context.fillStyle = '#808080'; // Gray
-            context.fillRect(0, 0, 64, 64);
-            context.fillStyle = '#A0A0A0';
-            for (let i = 0; i < 100; i++) {
-                const x = Math.random() * 64;
-                const y = Math.random() * 64;
-                context.fillRect(x, y, 2, 2);
-            }
-            return new THREE.CanvasTexture(canvas);
         }
-        // Floor
-        const floorTexture = createFloorTexture();
-        const floorGeometry = new THREE.PlaneGeometry(64, 64);
-        const floorMaterial = new THREE.MeshBasicMaterial({ map: floorTexture });
-        const floor = new THREE.Mesh(floorGeometry, floorMaterial);
-        floor.rotation.x = -Math.PI / 2;
-        scene.add(floor);
-        // Maze Generation
-        const gridSize = 16;
-        const cellSize = 4;
-        const maze = [];
-        for (let i = 0; i < gridSize; i++) {
-            maze[i] = [];
-            for (let j = 0; j < gridSize; j++) {
-                if (i === 0 || i === gridSize - 1 || j === 0 || j === gridSize - 1) {
-                    maze[i][j] = 1; // Walls on boundaries
-                } else if (i >= 6 && i <= 9 && j >= 6 && j <= 9) {
-                    maze[i][j] = 0; // Central open area
-                } else {
-                    maze[i][j] = Math.random() < 0.15 ? 1 : 0; // 15% chance of wall
-                }
             }
-        }
-        // Walls
-        const wallTexture = createWallTexture();
-        const wallGeometry = new THREE.BoxGeometry(cellSize, cellSize, cellSize);
-        const wallMaterial = new THREE.MeshBasicMaterial({ map: wallTexture });
-        for (let i = 0; i < gridSize; i++) {
-            for (let j = 0; j < gridSize; j++) {
-                if (maze[i][j] === 1) {
-                    const wall = new THREE.Mesh(wallGeometry, wallMaterial);
-                    wall.position.set((j - 7.5) * cellSize, cellSize / 2, (i - 7.5) * cellSize);
-                    scene.add(wall);
-                }
             }
-        }
-        // Flag
-        const flagGeometry = new THREE.BoxGeometry(1, 2, 1);
-        const flagMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 }); // Yellow
-        const flag = new THREE.Mesh(flagGeometry, flagMaterial);
-        flag.position.set(2, 1, 2); // Center of maze (8,8) translated to world coords
-        scene.add(flag);
-        // A* Pathfinding
-        function aStar(maze, start, goal) {
-            const openSet = [start];
-            const cameFrom = {};
-            const gScore = { [start]: 0 };
-            const fScore = { [start]: heuristic(start, goal) };
-            while (openSet.length > 0) {
-                let current = openSet.reduce((a, b) => fScore[a] < fScore[b] ? a : b);
-                if (current === goal) return reconstructPath(cameFrom, current);
-                openSet.splice(openSet.indexOf(current), 1);
-                for (let neighbor of getNeighbors(maze, current)) {
-                    let tentative_gScore = gScore[current] + 1;
-                    if (!(neighbor in gScore) || tentative_gScore < gScore[neighbor]) {
-                        cameFrom[neighbor] = current;
-                        gScore[neighbor] = tentative_gScore;
-                        fScore[neighbor] = gScore[neighbor] + heuristic(neighbor, goal);
-                        if (!openSet.includes(neighbor)) openSet.push(neighbor);
-                    }
-                }
             }
-            return [];
-        }
-        function heuristic(a, b) {
-            const [aRow, aCol] = a.split(',').map(Number);
-            const [bRow, bCol] = b.split(',').map(Number);
-            return Math.abs(aRow - bRow) + Math.abs(aCol - bCol);
         }
-        function getNeighbors(maze, node) {
-            const [row, col] = node.split(',').map(Number);
-            const neighbors = [];
-            if (row > 0 && maze[row - 1][col] === 0) neighbors.push(`${row - 1},${col}`);
-            if (row < 15 && maze[row + 1][col] === 0) neighbors.push(`${row + 1},${col}`);
-            if (col > 0 && maze[row][col - 1] === 0) neighbors.push(`${row},${col - 1}`);
-            if (col < 15 && maze[row][col + 1] === 0) neighbors.push(`${row},${col + 1}`);
-            return neighbors;
-        }
-        function reconstructPath(cameFrom, current) {
-            const path = [current];
-            while (current in cameFrom) {
-                current = cameFrom[current];
-                path.unshift(current);
-            }
-            return path;
-        }
-        // Soldiers
-        const loader = new THREE.GLTFLoader();
-        let soldiers = [];
-        let winner = null;
-        const moveSpeed = 5;
-        loader.load(
-            'https://threejs.org/examples/models/gltf/Soldier.glb',
-            (gltf) => {
-                const animations = gltf.animations;
-                for (let team = 0; team < 2; team++) {
-                    for (let i = 0; i < 3; i++) {
-                        const soldierClone = gltf.scene.clone();
-                        const mixer = new THREE.AnimationMixer(soldierClone);
-                        soldierClone.scale.set(2, 2, 2);
-                        const soldierObj = {
-                            mesh: soldierClone,
-                            mixer: mixer,
-                            team: team,
-                            path: [],
-                            idleAction: mixer.clipAction(THREE.AnimationClip.findByName(animations, 'Idle')),
-                            runAction: mixer.clipAction(THREE.AnimationClip.findByName(animations, 'Run')),
-                            activeAction: null
-                        };
-                        soldierObj.activeAction = soldierObj.idleAction;
-                        soldierObj.activeAction.play();
-                        // Color soldiers
-                        soldierClone.traverse((child) => {
-                            if (child.isMesh) {
-                                child.material = child.material.clone();
-                                child.material.color.set(team === 0 ? 0x0000ff : 0xff0000);
-                            }
-                        });
-                        // Random starting position
-                        let gridX, gridZ;
-                        do {
-                            gridZ = Math.floor(Math.random() * 16);
-                            gridX = team === 0 ? Math.floor(Math.random() * 8) : Math.floor(Math.random() * 8) + 8;
-                        } while (maze[gridZ][gridX] === 1);
-                        const worldX = (gridX - 7.5) * cellSize;
-                        const worldZ = (gridZ - 7.5) * cellSize;
-                        soldierClone.position.set(worldX, 0, worldZ);
-                        scene.add(soldierClone);
-                        // Path to flag
-                        const start = `${gridZ},${gridX}`;
-                        const goal = "8,8";
-                        const path = aStar(maze, start, goal);
-                        soldierObj.path = path.map(node => {
-                            const [row, col] = node.split(',').map(Number);
-                            return new THREE.Vector3((col - 7.5) * cellSize, 0, (row - 7.5) * cellSize);
-                        });
-                        soldiers.push(soldierObj);
-                    }
-                }
-            },
-            undefined,
-            (error) => console.error('Error loading soldier:', error)
-        );
-        // Camera and Controls
-        camera.position.set(0, 20, 30);
-        const controls = new THREE.OrbitControls(camera, renderer.domElement);
-        controls.target.set(0, 0, 0);
-        controls.update();
-        // Animation Loop
-        const clock = new THREE.Clock();
         function animate() {
             requestAnimationFrame(animate);
-            const delta = clock.getDelta();
-            if (!winner) {
-                for (let soldier of soldiers) {
-                    if (soldier.mesh.position.distanceTo(flag.position) < 1) {
-                        winner = soldier.team;
-                        document.getElementById('status').textContent = `Status: Team ${winner} wins!`;
-                        break;
-                    } else if (soldier.path.length > 0) {
-                        const target = soldier.path[0];
-                        const direction = target.clone().sub(soldier.mesh.position).normalize();
-                        const step = direction.multiplyScalar(moveSpeed * delta);
-                        soldier.mesh.position.add(step);
-                        const angle = Math.atan2(direction.x, direction.z);
-                        soldier.mesh.rotation.y = angle + Math.PI;
-                        if (soldier.mesh.position.distanceTo(target) < 0.5) {
-                            soldier.path.shift();
-                        }
-                        if (soldier.activeAction !== soldier.runAction) {
-                            soldier.activeAction.fadeOut(0.2);
-                            soldier.runAction.reset().fadeIn(0.2).play();
-                            soldier.activeAction = soldier.runAction;
-                        }
-                    } else {
-                        if (soldier.activeAction !== soldier.idleAction) {
-                            soldier.activeAction.fadeOut(0.2);
-                            soldier.idleAction.reset().fadeIn(0.2).play();
-                            soldier.activeAction = soldier.idleAction;
                         }
                     }
-                    soldier.mixer.update(delta);
-                }
             }
             renderer.render(scene, camera);
         }
         animate();
-        // Responsive Design
         window.addEventListener('resize', () => {
             camera.aspect = window.innerWidth / window.innerHeight;
             camera.updateProjectionMatrix();

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hugging Face Game with Sound</title>
     <style>
         body { margin: 0; overflow: hidden; }
+        canvas { display: block; }
+        #win-message {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 48px;
+            color: white;
+            background: rgba(0, 0, 0, 0.7);
+            padding: 20px;
+            display: none;
+            font-family: Arial, sans-serif;
+        }
+        #gpu-counter {
             position: absolute;
             top: 10px;
             left: 10px;
+            font-size: 24px;
             color: white;
             background: rgba(0, 0, 0, 0.7);
+            padding: 10px;
             font-family: Arial, sans-serif;
         }
+        #controls {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 20px;
+            color: white;
+            background: rgba(0, 0, 0, 0.8);
+            padding: 20px;
+            font-family: Arial, sans-serif;
+            text-align: center;
+            transition: opacity 1s;
+        }
     </style>
 </head>
 <body>
+    <div id="win-message">You Win!</div>
+    <div id="gpu-counter">GPUs Collected: 0 / 10</div>
+    <div id="controls">
+        <p>Controls:</p>
+        <p>W / Up Arrow: Forward</p>
+        <p>S / Down Arrow: Backward</p>
+        <p>A / Left Arrow: Left</p>
+        <p>D / Right Arrow: Right</p>
+        <p>Spacebar: Up</p>
+        <p>Shift: Down</p>
+        <p>Collect all GPUs to win!</p>
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
     <script>
+        // Scene setup
         const scene = new THREE.Scene();
         const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
         const renderer = new THREE.WebGLRenderer();
         renderer.setSize(window.innerWidth, window.innerHeight);
+        document.body.appendChild(renderer.domElement);
+        // Morning lighting
+        const directionalLight = new THREE.DirectionalLight(0xffe0b2, 1);
+        directionalLight.position.set(1, 1, 0.5).normalize();
+        scene.add(directionalLight);
+        const ambientLight = new THREE.AmbientLight(0x87ceeb, 0.5);
+        scene.add(ambientLight);
+        // Morning background
+        scene.background = new THREE.Color(0x87ceeb);
+        scene.fog = new THREE.Fog(0x87ceeb, 10, 100);
+        // Ground
+        const groundGeometry = new THREE.PlaneGeometry(100, 100);
+        const groundMaterial = new THREE.MeshLambertMaterial({ color: 0x8c8c8c });
+        const ground = new THREE.Mesh(groundGeometry, groundMaterial);
+        ground.rotation.x = -Math.PI / 2;
+        scene.add(ground);
+        // Realistic Buildings
+        const buildings = [];
+        const numBuildings = 50;
+        for (let i = 0; i < numBuildings; i++) {
+            const width = Math.random() * 5 + 2;
+            const height = Math.random() * 20 + 10;
+            const depth = Math.random() * 5 + 2;
+            const buildingGeometry = new THREE.BoxGeometry(width, height, depth);
+            const buildingMaterial = new THREE.MeshLambertMaterial({ color: 0xb0b0b0 });
+            const building = new THREE.Mesh(buildingGeometry, buildingMaterial);
+            building.position.x = Math.random() * 80 - 40;
+            building.position.y = height / 2;
+            building.position.z = Math.random() * 80 - 40;
+            scene.add(building);
+            buildings.push(building);
+        }
+        // Hugging Face Emoji
+        const emojiCanvas = document.createElement('canvas');
+        emojiCanvas.width = 256;
+        emojiCanvas.height = 256;
+        const emojiCtx = emojiCanvas.getContext('2d');
+        emojiCtx.font = '128px Arial';
+        emojiCtx.textAlign = 'center';
+        emojiCtx.textBaseline = 'middle';
+        emojiCtx.fillText('🤗', 128, 128);
+        const emojiTexture = new THREE.CanvasTexture(emojiCanvas);
+        const faceGeometry = new THREE.SphereGeometry(1, 32, 32);
+        const faceMaterial = new THREE.MeshLambertMaterial({ map: emojiTexture });
+        const face = new THREE.Mesh(faceGeometry, faceMaterial);
+        face.position.set(0, 5, 0);
+        scene.add(face);
+        face.velocity = new THREE.Vector3(0, 0, 0);
+        face.maxSpeed = 25;
+        face.acceleration = new THREE.Vector3(0, 0, 0);
+        face.friction = 0.95;
+        // "GPU" Texts
+        const canvas = document.createElement('canvas');
+        canvas.width = 128;
+        canvas.height = 128;
+        const ctx = canvas.getContext('2d');
+        ctx.font = '48px Arial';
+        ctx.fillStyle = 'white';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText('GPU', 64, 64);
+        const texture = new THREE.CanvasTexture(canvas);
+        const gpuSprites = [];
+        const totalGPUs = 10;
+        let collectedGPUs = 0;
+        for (let i = 0; i < totalGPUs; i++) {
+            const spriteMaterial = new THREE.SpriteMaterial({ map: texture });
+            const sprite = new THREE.Sprite(spriteMaterial);
+            sprite.scale.set(2, 2, 1);
+            sprite.position.set(Math.random() * 80 - 40, Math.random() * 20 + 10, Math.random() * 80 - 40);
+            scene.add(sprite);
+            gpuSprites.push(sprite);
         }
+        // Sound setup (Web Audio API)
+        const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+        // Background music (simple looping oscillator)
+        const bgOscillator = audioCtx.createOscillator();
+        const bgGain = audioCtx.createGain();
+        bgOscillator.type = 'sine';
+        bgOscillator.frequency.setValueAtTime(220, audioCtx.currentTime); // Low hum
+        bgGain.gain.setValueAtTime(0.1, audioCtx.currentTime); // Quiet volume
+        bgOscillator.connect(bgGain);
+        bgGain.connect(audioCtx.destination);
+        bgOscillator.start();
+        // GPU collect sound
+        function playCollectSound() {
+            const oscillator = audioCtx.createOscillator();
+            const gain = audioCtx.createGain();
+            oscillator.type = 'square';
+            oscillator.frequency.setValueAtTime(880, audioCtx.currentTime); // High pitch
+            gain.gain.setValueAtTime(0.3, audioCtx.currentTime);
+            gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.2);
+            oscillator.connect(gain);
+            gain.connect(audioCtx.destination);
+            oscillator.start();
+            oscillator.stop(audioCtx.currentTime + 0.2);
         }
+        // Clock for smooth animation
+        const clock = new THREE.Clock();
+        // Win condition and counter
+        const winMessage = document.getElementById('win-message');
+        const gpuCounter = document.getElementById('gpu-counter');
+        let gameWon = false;
+        // Controls instructions
+        const controlsDiv = document.getElementById('controls');
+        let controlsVisible = true;
+        setTimeout(() => {
+            if (controlsVisible) {
+                controlsDiv.style.opacity = '0';
+                setTimeout(() => controlsDiv.style.display = 'none', 1000);
+                controlsVisible = false;
             }
+        }, 5000); // Hide after 5 seconds
+        // Keyboard controls
+        const keys = {};
+        window.addEventListener('keydown', (e) => {
+            keys[e.key] = true;
+            if (controlsVisible) {
+                controlsDiv.style.opacity = '0';
+                setTimeout(() => controlsDiv.style.display = 'none', 1000);
+                controlsVisible = false;
             }
+        });
+        window.addEventListener('keyup', (e) => { keys[e.key] = false; });
+        function handleControls(deltaTime) {
+            const accel = 50;
+            face.acceleration.set(0, 0, 0);
+            if (keys['w'] || keys['ArrowUp']) face.acceleration.z = -accel;
+            if (keys['s'] || keys['ArrowDown']) face.acceleration.z = accel;
+            if (keys['a'] || keys['ArrowLeft']) face.acceleration.x = -accel;
+            if (keys['d'] || keys['ArrowRight']) face.acceleration.x = accel;
+            if (keys[' ']) face.acceleration.y = accel;
+            if (keys['Shift']) face.acceleration.y = -accel;
+            // Apply acceleration and friction
+            face.velocity.add(face.acceleration.clone().multiplyScalar(deltaTime));
+            face.velocity.multiplyScalar(face.friction);
+            face.velocity.clampLength(0, face.maxSpeed);
+            // Update position
+            face.position.add(face.velocity.clone().multiplyScalar(deltaTime));
+            // Face direction of movement
+            if (face.velocity.length() > 0.1) {
+                face.lookAt(face.position.clone().add(face.velocity));
             }
+            // Keep within bounds
+            face.position.x = Math.max(-50, Math.min(50, face.position.x));
+            face.position.z = Math.max(-50, Math.min(50, face.position.z));
+            face.position.y = Math.max(1, Math.min(50, face.position.y));
         }
+        // Animation loop
         function animate() {
             requestAnimationFrame(animate);
+            const deltaTime = clock.getDelta();
+            if (!gameWon) {
+                // Handle player controls
+                handleControls(deltaTime);
+                // Check for "GPU" collisions
+                gpuSprites.forEach((gpu, index) => {
+                    if (face.position.distanceTo(gpu.position) < 1) {
+                        scene.remove(gpu);
+                        gpuSprites.splice(index, 1);
+                        collectedGPUs++;
+                        gpuCounter.textContent = `GPUs Collected: ${collectedGPUs} / ${totalGPUs}`;
+                        playCollectSound(); // Play sound on collection
+                        if (collectedGPUs === totalGPUs) {
+                            gameWon = true;
+                            winMessage.style.display = 'block';
+                            face.velocity.set(0, 0, 0);
+                            bgOscillator.stop(); // Stop background music
                         }
                     }
+                });
             }
+            // Update camera
+            camera.position.set(face.position.x, face.position.y + 5, face.position.z - 10);
+            camera.lookAt(face.position);
+            // Render
             renderer.render(scene, camera);
         }
         animate();
+        // Handle window resize
         window.addEventListener('resize', () => {
             camera.aspect = window.innerWidth / window.innerHeight;
             camera.updateProjectionMatrix();