Spaces:

build-small-hackathon
/

LoFinity

Running on Zero

App Files Files Community

eloigil6 commited on 25 days ago

Commit

e4d14af

1 Parent(s): 7abeea5

Initial implementation of the project structure and core functionality.

Browse files

Files changed (7) hide show

.claude/launch.json +12 -0
.gitignore +5 -0
app.py +61 -0
frontend/index.html +27 -0
frontend/main.js +254 -0
frontend/style.css +52 -0
requirements.txt +2 -0

.claude/launch.json ADDED Viewed

	@@ -0,0 +1,12 @@

+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "lofinity",
+      "runtimeExecutable": ".venv/bin/python",
+      "runtimeArgs": ["app.py"],
+      "port": 7860,
+      "autoPort": false
+    }
+  ]
+}

.gitignore ADDED Viewed

	@@ -0,0 +1,5 @@

+.venv/
+.cache/
+__pycache__/
+*.pyc
+.DS_Store

app.py ADDED Viewed

	@@ -0,0 +1,61 @@

+"""LoFinity — a vending machine that dispenses endless chill beats.
+Gradio Server backend: serves the Three.js frontend and exposes the
+generation API. The audio engine is stubbed until stage 4 (MusicGen).
+"""
+import math
+import struct
+import uuid
+import wave
+from pathlib import Path
+from fastapi.responses import FileResponse
+from fastapi.staticfiles import StaticFiles
+from gradio import FileData
+from gradio.server import Server
+ROOT = Path(__file__).parent
+FRONTEND = ROOT / "frontend"
+SONGS_DIR = ROOT / ".cache" / "songs"
+SONGS_DIR.mkdir(parents=True, exist_ok=True)
+app = Server(title="LoFinity")
+@app.api(name="generate_song", concurrency_limit=1)
+def generate_song(prompt: str) -> dict:
+    """Stub engine: returns a short audible tone so the full
+    frontend -> queue -> file pipeline can be exercised before
+    MusicGen is wired in."""
+    sample_rate = 22050
+    seconds = 2.0
+    frames = bytearray()
+    for i in range(int(sample_rate * seconds)):
+        t = i / sample_rate
+        fade = min(1.0, t * 4, (seconds - t) * 4)
+        sample = int(0.25 * fade * 32767 * math.sin(2 * math.pi * 220 * t))
+        frames += struct.pack("<h", sample)
+    out = SONGS_DIR / f"{uuid.uuid4().hex}.wav"
+    with wave.open(str(out), "wb") as w:
+        w.setnchannels(1)
+        w.setsampwidth(2)
+        w.setframerate(sample_rate)
+        w.writeframes(bytes(frames))
+    return {
+        "title": f"Demo Tape — {prompt[:32] or 'untitled'}",
+        "audio": FileData(path=str(out)),
+    }
+@app.get("/")
+async def homepage():
+    return FileResponse(FRONTEND / "index.html")
+app.mount("/static", StaticFiles(directory=FRONTEND), name="static")
+if __name__ == "__main__":
+    app.launch(show_error=True, allowed_paths=[str(SONGS_DIR)])

frontend/index.html ADDED Viewed

	@@ -0,0 +1,27 @@

+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>LoFinity</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;800&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="/static/style.css" />
+  <script type="importmap">
+    {
+      "imports": {
+        "three": "https://cdn.jsdelivr.net/npm/three@0.180.0/build/three.module.js"
+      }
+    }
+  </script>
+</head>
+<body>
+  <div id="title-overlay">
+    <h1 id="title">LoFinity</h1>
+    <p id="subtitle">chill beats, freshly vended</p>
+  </div>
+  <canvas id="scene"></canvas>
+  <script type="module" src="/static/main.js"></script>
+</body>
+</html>

frontend/main.js ADDED Viewed

	@@ -0,0 +1,254 @@

+// LoFinity — 3D scene. Stage 1: sky intro + camera descent to a
+// placeholder ground scene (the real low-poly world lands in stage 2).
+import * as THREE from "three";
+// ---------------------------------------------------------------------------
+// Renderer / scene / camera
+// ---------------------------------------------------------------------------
+const canvas = document.getElementById("scene");
+const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
+renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+renderer.setSize(window.innerWidth, window.innerHeight);
+const scene = new THREE.Scene();
+scene.fog = new THREE.Fog(0xbfe3ff, 80, 380);
+const camera = new THREE.PerspectiveCamera(
+  55,
+  window.innerWidth / window.innerHeight,
+  0.1,
+  1000
+);
+// The camera stays put; we animate what it looks at.
+const CAMERA_POS = new THREE.Vector3(0, 5.5, 24);
+const LOOK_SKY = new THREE.Vector3(0, 90, -60);
+const LOOK_SCENE = new THREE.Vector3(0, 3, 0);
+camera.position.copy(CAMERA_POS);
+camera.lookAt(LOOK_SKY);
+window.addEventListener("resize", () => {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+});
+// ---------------------------------------------------------------------------
+// Sky: big inverted dome with a vertical anime-blue gradient
+// ---------------------------------------------------------------------------
+const skyMaterial = new THREE.ShaderMaterial({
+  side: THREE.BackSide,
+  depthWrite: false,
+  uniforms: {
+    topColor: { value: new THREE.Color(0x1547a8) },
+    horizonColor: { value: new THREE.Color(0xbfe3ff) },
+  },
+  vertexShader: /* glsl */ `
+    varying vec3 vWorldPosition;
+    void main() {
+      vWorldPosition = (modelMatrix * vec4(position, 1.0)).xyz;
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    }
+  `,
+  fragmentShader: /* glsl */ `
+    uniform vec3 topColor;
+    uniform vec3 horizonColor;
+    varying vec3 vWorldPosition;
+    void main() {
+      float h = clamp(normalize(vWorldPosition).y, 0.0, 1.0);
+      vec3 color = mix(horizonColor, topColor, pow(h, 0.55));
+      gl_FragColor = vec4(color, 1.0);
+    }
+  `,
+});
+scene.add(new THREE.Mesh(new THREE.SphereGeometry(450, 32, 16), skyMaterial));
+// ---------------------------------------------------------------------------
+// Lights
+// ---------------------------------------------------------------------------
+scene.add(new THREE.HemisphereLight(0xcfe8ff, 0x7ec850, 0.9));
+const sun = new THREE.DirectionalLight(0xfff4e0, 1.6);
+sun.position.set(40, 80, 30);
+scene.add(sun);
+// ---------------------------------------------------------------------------
+// Clouds: puffy clusters of flattened, flat-shaded icospheres
+// ---------------------------------------------------------------------------
+const cloudMaterial = new THREE.MeshLambertMaterial({
+  color: 0xffffff,
+  flatShading: true,
+});
+function makeCloud() {
+  const cloud = new THREE.Group();
+  const puffs = 5 + Math.floor(Math.random() * 4);
+  for (let i = 0; i < puffs; i++) {
+    const r = 3.5 + Math.random() * 4.5;
+    const puff = new THREE.Mesh(new THREE.IcosahedronGeometry(r, 1), cloudMaterial);
+    puff.position.set(
+      (i - puffs / 2) * (r * 0.9) + (Math.random() - 0.5) * 3,
+      (Math.random() - 0.5) * 2.5,
+      (Math.random() - 0.5) * 4
+    );
+    puff.scale.y = 0.55;
+    cloud.add(puff);
+  }
+  return cloud;
+}
+const clouds = [];
+for (let i = 0; i < 12; i++) {
+  const cloud = makeCloud();
+  cloud.position.set(
+    -140 + Math.random() * 280,
+    32 + Math.random() * 50,
+    -160 + Math.random() * 110
+  );
+  const s = 0.7 + Math.random() * 1.1;
+  cloud.scale.setScalar(s);
+  cloud.userData.speed = 0.5 + Math.random() * 0.8;
+  clouds.push(cloud);
+  scene.add(cloud);
+}
+// ---------------------------------------------------------------------------
+// Ground + placeholder props (replaced by the real scene in stage 2)
+// ---------------------------------------------------------------------------
+const ground = new THREE.Mesh(
+  new THREE.CircleGeometry(320, 48),
+  new THREE.MeshLambertMaterial({ color: 0x6abe4f })
+);
+ground.rotation.x = -Math.PI / 2;
+scene.add(ground);
+// Distant mountains
+const mountainMaterial = new THREE.MeshLambertMaterial({
+  color: 0x4d8a4a,
+  flatShading: true,
+});
+for (let i = 0; i < 7; i++) {
+  const h = 24 + Math.random() * 26;
+  const mountain = new THREE.Mesh(new THREE.ConeGeometry(h * 1.4, h, 5), mountainMaterial);
+  mountain.position.set(-180 + i * 60 + (Math.random() - 0.5) * 25, h / 2 - 2, -190);
+  mountain.rotation.y = Math.random() * Math.PI;
+  scene.add(mountain);
+}
+// Placeholder vending machine: a friendly blue box
+const vending = new THREE.Group();
+const body = new THREE.Mesh(
+  new THREE.BoxGeometry(2.4, 4.2, 1.8),
+  new THREE.MeshLambertMaterial({ color: 0x6db9e8 })
+);
+body.position.y = 2.1;
+const front = new THREE.Mesh(
+  new THREE.BoxGeometry(1.6, 3.0, 0.1),
+  new THREE.MeshLambertMaterial({ color: 0xeaf6ff })
+);
+front.position.set(-0.2, 2.5, 0.92);
+vending.add(body, front);
+vending.position.set(-3.5, 0, 0);
+scene.add(vending);
+// Placeholder bench
+const benchMaterial = new THREE.MeshLambertMaterial({ color: 0x4a90c2 });
+const bench = new THREE.Group();
+const seat = new THREE.Mesh(new THREE.BoxGeometry(4, 0.25, 1.2), benchMaterial);
+seat.position.y = 1;
+const back = new THREE.Mesh(new THREE.BoxGeometry(4, 1.1, 0.2), benchMaterial);
+back.position.set(0, 1.7, -0.5);
+bench.add(seat, back);
+bench.position.set(3, 0, 1);
+scene.add(bench);
+// Placeholder tree
+const tree = new THREE.Group();
+const trunk = new THREE.Mesh(
+  new THREE.CylinderGeometry(0.4, 0.6, 5, 7),
+  new THREE.MeshLambertMaterial({ color: 0x8a5a33, flatShading: true })
+);
+trunk.position.y = 2.5;
+tree.add(trunk);
+const leafMaterial = new THREE.MeshLambertMaterial({ color: 0x4caf3f, flatShading: true });
+for (let i = 0; i < 4; i++) {
+  const leaves = new THREE.Mesh(new THREE.IcosahedronGeometry(2.2 - i * 0.3, 1), leafMaterial);
+  leaves.position.set((Math.random() - 0.5) * 1.6, 5.2 + i * 1.2, (Math.random() - 0.5) * 1.6);
+  tree.add(leaves);
+}
+tree.position.set(-9, 0, -4);
+scene.add(tree);
+// ---------------------------------------------------------------------------
+// Intro: hold on the sky, then ease the gaze down to the scene
+// ---------------------------------------------------------------------------
+const HOLD_MS = 2800; // sky time after everything has loaded
+const DESCENT_MS = 3400;
+const intro = { phase: "loading", t0: 0 };
+const lookTarget = LOOK_SKY.clone();
+window.addEventListener("load", () => {
+  setTimeout(() => {
+    intro.phase = "descending";
+    intro.t0 = performance.now();
+    document.getElementById("title-overlay").classList.add("hidden");
+  }, HOLD_MS);
+});
+const easeInOutCubic = (t) =>
+  t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+// ---------------------------------------------------------------------------
+// Render loop
+// ---------------------------------------------------------------------------
+const clock = new THREE.Clock();
+function animate() {
+  requestAnimationFrame(animate);
+  const elapsed = clock.getElapsedTime();
+  const dt = clock.getDelta();
+  for (const cloud of clouds) {
+    cloud.position.x += cloud.userData.speed * 0.016;
+    if (cloud.position.x > 160) cloud.position.x = -160;
+  }
+  if (intro.phase === "descending") {
+    const t = Math.min((performance.now() - intro.t0) / DESCENT_MS, 1);
+    lookTarget.lerpVectors(LOOK_SKY, LOOK_SCENE, easeInOutCubic(t));
+    if (t >= 1) intro.phase = "idle";
+  } else if (intro.phase === "idle") {
+    // Gentle lofi sway
+    camera.position.x = CAMERA_POS.x + Math.sin(elapsed * 0.25) * 0.25;
+    camera.position.y = CAMERA_POS.y + Math.sin(elapsed * 0.4) * 0.12;
+  }
+  camera.lookAt(lookTarget);
+  renderer.render(scene, camera);
+}
+animate();
+// ---------------------------------------------------------------------------
+// Backend bridge (stub check — UI hooks come with the vending machine modal)
+// ---------------------------------------------------------------------------
+import("https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js")
+  .then(async ({ Client }) => {
+    const client = await Client.connect(window.location.origin);
+    window.lofinity = {
+      generate: async (prompt) => {
+        const result = await client.predict("/generate_song", { prompt });
+        return result.data[0];
+      },
+    };
+    console.log("[LoFinity] backend connected — try: await lofinity.generate('rainy night')");
+  })
+  .catch((err) => console.warn("[LoFinity] backend not reachable:", err));

frontend/style.css ADDED Viewed

	@@ -0,0 +1,52 @@

+html,
+body {
+  margin: 0;
+  height: 100%;
+  overflow: hidden;
+  background: #0e2a63;
+}
+#scene {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+#title-overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  z-index: 10;
+  opacity: 1;
+  transition: opacity 1.4s ease;
+}
+#title-overlay.hidden {
+  opacity: 0;
+}
+#title {
+  font-family: "Baloo 2", sans-serif;
+  font-weight: 800;
+  font-size: clamp(3rem, 10vw, 7rem);
+  color: #ffffff;
+  margin: 0;
+  letter-spacing: 0.04em;
+  text-shadow: 0 4px 24px rgba(20, 60, 140, 0.45);
+}
+#subtitle {
+  font-family: "Baloo 2", sans-serif;
+  font-weight: 600;
+  font-size: clamp(1rem, 2.4vw, 1.4rem);
+  color: rgba(255, 255, 255, 0.85);
+  margin: 0.4rem 0 0;
+  letter-spacing: 0.12em;
+  text-transform: lowercase;
+}

requirements.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ # gradio itself is provided by the Space SDK (sdk_version in README.md).
2	+ # Stage 4 will add: transformers, torch, scipy (MusicGen) + ollama client.