Spaces:

SREAL
/

MS1-V

Running

App Files Files Community

SREAL commited on Jan 6

Commit

3616304

verified ·

1 Parent(s): 6664b21

Update index.html

Browse files

Files changed (1) hide show

index.html +417 -18

index.html CHANGED Viewed

@@ -1,19 +1,418 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MS1-V</title>
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            overflow: hidden;
+            background: #000;
+            font-family: 'Orbitron', sans-serif;
+        }
+        canvas {
+            position: fixed;
+            top: 0;
+            left: 0;
+        }
+        .title-screen {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: #000;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            color: #0ff;
+            text-align: center;
+            z-index: 20;
+            transition: opacity 1s ease-in-out;
+        }
+        .title-screen h1 {
+            font-size: 5em;
+            margin-bottom: 20px;
+        }
+        .title-screen button {
+            padding: 15px 30px;
+            background: rgba(0, 255, 255, 0.2);
+            border: 2px solid #0ff;
+            color: #0ff;
+            cursor: pointer;
+            font-size: 1.2em;
+            border-radius: 10px;
+            transition: all 0.3s;
+        }
+        .title-screen button:hover {
+            background: #0ff;
+            color: #000;
+        }
+        .interface {
+            position: fixed;
+            top: 20px;
+            left: 20px;
+            background: rgba(0, 0, 0, 0.8);
+            border: 2px solid #0ff;
+            padding: 20px;
+            color: #0ff;
+            z-index: 10;
+            display: none;
+            border-radius: 15px;
+            backdrop-filter: blur(5px);
+        }
+        .controls {
+            margin-top: 15px;
+            display: flex;
+            gap: 10px;
+        }
+        .controls button {
+            flex: 1;
+            padding: 12px;
+            background: rgba(0, 255, 255, 0.2);
+            border: 1px solid #0ff;
+            color: #0ff;
+            cursor: pointer;
+            transition: all 0.3s;
+            border-radius: 8px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        .controls button:hover {
+            background: #0ff;
+            color: #000;
+        }
+        .toggle-button {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            padding: 12px 20px;
+            background: rgba(0, 255, 255, 0.2);
+            color: #0ff;
+            border: 1px solid #0ff;
+            cursor: pointer;
+            z-index: 10;
+            border-radius: 8px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        .toggle-button:hover {
+            background: #0ff;
+            color: #000;
+        }
+        .track-list {
+            margin-top: 20px;
+        }
+        .track-list select {
+            padding: 10px;
+            background: rgba(0, 255, 255, 0.2);
+            border: 1px solid #0ff;
+            color: #0ff;
+            border-radius: 8px;
+            width: 100%;
+        }
+    </style>
+</head>
+<body>
+    <div class="title-screen" id="titleScreen">
+        <h1>MS1-V</h1>
+        <button id="startButton">Start</button>
+    </div>
+    <button class="toggle-button">Controls</button>
+    <div class="interface">
+        <input type="file" id="audioFile" accept="audio/*">
+        <div class="track-list">
+            <label for="trackSelect">Select Track:</label>
+            <select id="trackSelect">
+                <option value="">Select a track</option>
+                <option value="track1.mp3">Track 1</option>
+                <option value="track2.mp3">Track 2</option>
+                <option value="track3.mp3">Track 3</option>
+            </select>
+        </div>
+        <div class="controls">
+            <button id="play">Play</button>
+            <button id="pause">Pause</button>
+            <button id="stop">Stop</button>
+        </div>
+    </div>
+    <script>
+        const scene = new THREE.Scene();
+        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000);
+        const renderer = new THREE.WebGLRenderer({ antialias: true });
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        document.body.appendChild(renderer.domElement);
+        let isDragging = false;
+        let previousMousePosition = { x: 0, y: 0 };
+        let cameraAngle = { x: 0, y: 0 };
+        const cameraDistance = 100;
+        document.addEventListener('mousedown', (e) => {
+            isDragging = true;
+            previousMousePosition = { x: e.clientX, y: e.clientY };
+        });
+        document.addEventListener('mousemove', (e) => {
+            if (!isDragging) return;
+            const deltaMove = {
+                x: e.clientX - previousMousePosition.x,
+                y: e.clientY - previousMousePosition.y
+            };
+            cameraAngle.x += deltaMove.y * 0.005;
+            cameraAngle.y += deltaMove.x * 0.005;
+            cameraAngle.x = Math.max(-Math.PI/2, Math.min(Math.PI/2, cameraAngle.x));
+            previousMousePosition = { x: e.clientX, y: e.clientY };
+        });
+        document.addEventListener('mouseup', () => {
+            isDragging = false;
+        });
+        const lineMaterial = new THREE.LineBasicMaterial({
+            color: 0x00ffff,
+            transparent: true,
+            opacity: 0.3,
+            blending: THREE.AdditiveBlending
+        });
+        function createBassPattern(frequency, intensity) {
+            const pattern = new THREE.Group();
+            const geometry = new THREE.TorusKnotGeometry(10 * intensity, 2, 100, 16);
+            const material = new THREE.MeshBasicMaterial({
+                color: 0x00ffff,
+                wireframe: true,
+                transparent: true,
+                opacity: intensity
+            });
+            const torusKnot = new THREE.Mesh(geometry, material);
+            pattern.add(torusKnot);
+            for(let i = 0; i < 3; i++) {
+                const sphereGeo = new THREE.SphereGeometry(5 * intensity, 32, 32);
+                const sphereMat = new THREE.MeshBasicMaterial({
+                    color: 0x00ffff,
+                    wireframe: true,
+                    transparent: true,
+                    opacity: intensity * 0.5
+                });
+                const sphere = new THREE.Mesh(sphereGeo, sphereMat);
+                sphere.position.setFromSphericalCoords(
+                    20 * intensity,
+                    i * Math.PI * 2/3,
+                    frequency * Math.PI
+                );
+                pattern.add(sphere);
+            }
+            return pattern;
+        }
+        function createParticleSystem(count, size, spread) {
+            const geometry = new THREE.BufferGeometry();
+            const positions = new Float32Array(count * 3);
+            const colors = new Float32Array(count * 3);
+            const scales = new Float32Array(count);
+            for(let i = 0; i < count * 3; i += 3) {
+                positions[i] = (Math.random() - 0.5) * spread;
+                positions[i + 1] = (Math.random() - 0.5) * spread;
+                positions[i + 2] = (Math.random() - 0.5) * spread;
+                scales[i/3] = Math.random();
+            }
+            geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+            geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+            geometry.setAttribute('scale', new THREE.BufferAttribute(scales, 1));
+            const material = new THREE.PointsMaterial({
+                size: size,
+                vertexColors: true,
+                blending: THREE.AdditiveBlending,
+                transparent: true,
+                opacity: 0.8,
+            });
+            const particles = new THREE.Points(geometry, material);
+            const lines = new THREE.LineSegments(new THREE.BufferGeometry(), lineMaterial);
+            return { particles, lines };
+        }
+        const innerSystem = createParticleSystem(3000, 0.5, 80);
+        const midSystem = createParticleSystem(4000, 0.3, 150);
+        const outerSystem = createParticleSystem(5000, 0.2, 200);
+        const bassSystem = createParticleSystem(2000, 1.0, 100);
+        let bassPattern = null;
+        [innerSystem, midSystem, outerSystem, bassSystem].forEach(system => {
+            scene.add(system.particles);
+            scene.add(system.lines);
+        });
+        camera.position.z = cameraDistance;
+        function updateParticleSystem(system, frequencyData, baseIndex, scale, bass, time) {
+            const positions = system.particles.geometry.attributes.position.array;
+            const colors = system.particles.geometry.attributes.color.array;
+            const scales = system.particles.geometry.attributes.scale.array;
+            const evolutionFactor = Math.sin(time * 0.0005) * 0.5 + 0.5;
+            const linePositions = [];
+            const lineIndices = [];
+            for(let i = 0; i < positions.length; i += 3) {
+                const freqIndex = (baseIndex + Math.floor(i/30)) % frequencyData.length;
+                const frequency = frequencyData[freqIndex] / 255;
+                const angle = (i/3) * 0.1 + time * 0.001;
+                const radius = scale * (0.5 + 0.5 * frequency);
+                if(bass > 0.7) {
+                    const bassImpact = Math.pow(bass - 0.7, 2);
+                    positions[i] = Math.cos(angle) * radius * Math.sin(angle * 2 + evolutionFactor) * (1 + bassImpact);
+                    positions[i + 1] = Math.sin(angle) * radius * Math.cos(angle * 3 + evolutionFactor) * (1 + bassImpact);
+                    positions[i + 2] = Math.cos(angle * 2) * radius * Math.sin(angle + evolutionFactor) * (1 + bassImpact);
+                } else {
+                    positions[i] *= 1 + frequency * 0.02 * (1 + evolutionFactor);
+                    positions[i + 1] *= 1 + frequency * 0.02 * (1 + evolutionFactor);
+                    positions[i + 2] *= 1 + frequency * 0.02 * (1 + evolutionFactor);
+                }
+                const distance = Math.sqrt(positions[i]**2 + positions[i+1]**2 + positions[i+2]**2);
+                if(distance > scale) {
+                    positions[i] *= scale/distance;
+                    positions[i+1] *= scale/distance;
+                    positions[i+2] *= scale/distance;
+                }
+                colors[i] = Math.sin(frequency * Math.PI + bass + evolutionFactor) * 0.5 + 0.5;
+                colors[i + 1] = Math.cos(frequency * Math.PI * 0.5 + bass + evolutionFactor) * 0.5 + 0.5;
+                colors[i + 2] = frequency + bass * 0.5;
+                scales[i/3] = frequency * (2 + bass * 2) * (1 + evolutionFactor);
+                if(i % 9 === 0) {
+                    linePositions.push(positions[i], positions[i+1], positions[i+2]);
+                    if(linePositions.length > 6) {
+                        lineIndices.push(linePositions.length/3 - 2, linePositions.length/3 - 1);
+                    }
+                }
+            }
+            const lineGeometry = new THREE.BufferGeometry();
+            lineGeometry.setAttribute('position', new THREE.Float32BufferAttribute(linePositions, 3));
+            lineGeometry.setIndex(lineIndices);
+            system.lines.geometry.dispose();
+            system.lines.geometry = lineGeometry;
+            system.particles.geometry.attributes.position.needsUpdate = true;
+            system.particles.geometry.attributes.color.needsUpdate = true;
+            system.particles.geometry.attributes.scale.needsUpdate = true;
+        }
+        let audioContext, audioAnalyser, audioSource;
+        let audioElement = new Audio();
+        document.getElementById('audioFile').addEventListener('change', function(event) {
+            audioElement.src = URL.createObjectURL(event.target.files[0]);
+        });
+        document.getElementById('trackSelect').addEventListener('change', function(event) {
+            audioElement.src = event.target.value;
+        });
+        document.getElementById('startButton').addEventListener('click', () => {
+            document.getElementById('titleScreen').style.opacity = 0;
+            setTimeout(() => {
+                document.getElementById('titleScreen').style.display = 'none';
+            }, 1000);
+        });
+        document.getElementById('play').addEventListener('click', () => audioElement.play());
+        document.getElementById('pause').addEventListener('click', () => audioElement.pause());
+        document.getElementById('stop').addEventListener('click', () => {
+            audioElement.pause();
+            audioElement.currentTime = 0;
+        });
+        document.querySelector('.toggle-button').addEventListener('click', () => {
+            const interfaceDiv = document.querySelector('.interface');
+            interfaceDiv.style.display = interfaceDiv.style.display === 'none' ? 'block' : 'none';
+        });
+        audioElement.addEventListener('play', () => {
+            audioContext = new (window.AudioContext || window.webkitAudioContext)();
+            audioSource = audioContext.createMediaElementSource(audioElement);
+            audioAnalyser = audioContext.createAnalyser();
+            audioSource.connect(audioAnalyser);
+            audioAnalyser.connect(audioContext.destination);
+            audioAnalyser.fftSize = 2048;
+            const bufferLength = audioAnalyser.frequencyBinCount;
+            const dataArray = new Uint8Array(bufferLength);
+            function animate() {
+                requestAnimationFrame(animate);
+                const time = Date.now();
+                audioAnalyser.getByteFrequencyData(dataArray);
+                const bass = Math.max(...dataArray.slice(0, 10)) / 255;
+                const mid = Math.max(...dataArray.slice(10, 100)) / 255;
+                const treble = Math.max(...dataArray.slice(100, 200)) / 255;
+                camera.position.x = cameraDistance * Math.sin(cameraAngle.y) * Math.cos(cameraAngle.x);
+                camera.position.y = cameraDistance * Math.sin(cameraAngle.x);
+                camera.position.z = cameraDistance * Math.cos(cameraAngle.y) * Math.cos(cameraAngle.x);
+                camera.lookAt(scene.position);
+                if(bass > 0.7) {
+                    if(!bassPattern) {
+                        bassPattern = createBassPattern(bass, bass - 0.7);
+                        scene.add(bassPattern);
+                    }
+                    bassPattern.scale.set(1 + bass, 1 + bass, 1 + bass);
+                    bassPattern.rotation.x += 0.02;
+                    bassPattern.rotation.y += 0.03;
+                } else if(bassPattern) {
+                    scene.remove(bassPattern);
+                    bassPattern = null;
+                }
+                updateParticleSystem(innerSystem, dataArray, 0, 80, bass, time);
+                updateParticleSystem(midSystem, dataArray, 100, 150, bass, time);
+                updateParticleSystem(outerSystem, dataArray, 200, 200, bass, time);
+                updateParticleSystem(bassSystem, dataArray.slice(0, 10), 0, 100 * bass, bass, time);
+                innerSystem.particles.rotation.y += 0.003 * (1 + bass * 0.5);
+                midSystem.particles.rotation.x += 0.002 * (1 + mid * 0.5);
+                outerSystem.particles.rotation.z += 0.001 * (1 + treble * 0.5);
+                if(bassSystem.particles) {
+                    bassSystem.particles.rotation.y -= 0.005 * (1 + bass);
+                }
+                renderer.render(scene, camera);
+            }
+            animate();
+        });
+        window.addEventListener('resize', () => {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        });
+    </script>
+</body>
 </html>