Spaces:
Running
Running
| import gradio as gr | |
| demo = gr.Blocks() | |
| with demo: | |
| gr.HTML("""<!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Hugging Face Game with Pinned Controls</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: 0; | |
| right: 0; | |
| width: 200px; | |
| font-size: 16px; | |
| color: white; | |
| background: rgba(0, 0, 0, 0.8); | |
| padding: 15px; | |
| font-family: Arial, sans-serif; | |
| text-align: left; | |
| height: 100%; | |
| box-sizing: border-box; | |
| } | |
| #controls p { margin: 5px 0; } | |
| #controls strong { color: #ffcc00; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="win-message">You Win!</div> | |
| <div id="gpu-counter">GPUs Collected: 0 / 10</div> | |
| <div id="controls"> | |
| <p><strong>Controls:</strong></p> | |
| <p>W / Up: Forward</p> | |
| <p>S / Down: Backward</p> | |
| <p>A / Left: Left</p> | |
| <p>D / Right: Right</p> | |
| <p>Space: 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; | |
| // Audio setup | |
| const listener = new THREE.AudioListener(); | |
| camera.add(listener); | |
| // Background music (ambient wind-like sound) | |
| const bgSound = new THREE.Audio(listener); | |
| const audioLoader = new THREE.AudioLoader(); | |
| const bgAudioData = 'data:audio/mp3;base64,' + btoa(String.fromCharCode(...new Uint8Array([/* Simulated wind sound MP3 data would go here */]))); | |
| audioLoader.load(bgAudioData || 'https://threejs.org/examples/sounds/358232_j_s_song.mp3', function(buffer) { | |
| bgSound.setBuffer(buffer); | |
| bgSound.setLoop(true); | |
| bgSound.setVolume(0.2); | |
| bgSound.play(); | |
| }); | |
| // GPU collect sound (positional, ping-like) | |
| const collectSound = new THREE.PositionalAudio(listener); | |
| face.add(collectSound); | |
| audioLoader.load('https://threejs.org/examples/sounds/376737_Skullbeatz___Bad_Cat_Maste.mp3', function(buffer) { | |
| collectSound.setBuffer(buffer); | |
| collectSound.setRefDistance(10); | |
| collectSound.setVolume(0.5); | |
| }); | |
| // "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); | |
| } | |
| // 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; | |
| // Keyboard controls | |
| const keys = {}; | |
| window.addEventListener('keydown', (e) => { keys[e.key] = true; }); | |
| 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; | |
| face.velocity.add(face.acceleration.clone().multiplyScalar(deltaTime)); | |
| face.velocity.multiplyScalar(face.friction); | |
| face.velocity.clampLength(0, face.maxSpeed); | |
| face.position.add(face.velocity.clone().multiplyScalar(deltaTime)); | |
| if (face.velocity.length() > 0.1) { | |
| face.lookAt(face.position.clone().add(face.velocity)); | |
| } | |
| 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) { | |
| handleControls(deltaTime); | |
| 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}`; | |
| collectSound.play(); // Play positional sound | |
| if (collectedGPUs === totalGPUs) { | |
| gameWon = true; | |
| winMessage.style.display = 'block'; | |
| face.velocity.set(0, 0, 0); | |
| bgSound.stop(); | |
| } | |
| } | |
| }); | |
| } | |
| camera.position.set(face.position.x, face.position.y + 5, face.position.z - 10); | |
| camera.lookAt(face.position); | |
| renderer.render(scene, camera); | |
| } | |
| animate(); | |
| // Handle window resize | |
| window.addEventListener('resize', () => { | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| }); | |
| </script> | |
| </body> | |
| </html>""") | |
| demo.launch() |