added timer, replaced middots and fixed css issues on small devices

README.md

@@ -12,17 +12,27 @@ the frontend is written using pure HTML/CSS/JS with no external dependencies. it
 
 ## inference
 
-infinifi consists of two parts, the inference server and the web server. 5 audio clips are generated each time an inference request is received from the web server. the web server will request for an inference every set interval. after the request is made, it polls the inference server until the audio is generated and available for download. it then downloads the 5 generated clips and saves it locally. at most 10 clips are saved at a time.
-
-when the inference server is down, the web server will recycle saved clips until it is back up again.
-
-## requirements
-
-- python >= 3.10 (tested with python 3.12 only)
+infinifi consists of two parts, the inference server and the web server. the two servers are connected via a websocket connection. whenever the web server requires new audio clips to be generated, it sends a "generate" message to the inference server, which triggers the generation on the inference server. when the generation is done, the inference server sends back the audio in mp3 format back to the web server over websocket. once the web server receives the mp3 data, it saves them locally as mp3 files.
 
 ## running it yourself
 
-i have recently changed the networking between the web server and the inference server. at the moment, the inference happens on fal infrastructure (`fal_app.py`), and i have yet to update the standalone inference server code `inference_server.py` to match the new architecture.
+you are welcome to self host infinifi. to get started, make sure that: 
+
+- you are using python 3.9/3.10;
+- port 8001 (used by the inference server) is free.
+
+then follow the steps below:
+
+1. install `torch==2.1.0`
+2. install deps from both `requirements-inference.txt` and `requirements-server.txt`
+3. run the inference server: `python inference_server.py`
+4. run the web server: `fastapi run server.py --port ${ANY_PORT_NUMBER}`
+
+you can also run the inference server and the web server on separate machines. to let the web server know where to connect to the inference server, specify the `INFERENCE_SERVER_WS_URL` environment variable when running the web server:
+
+```
+INFERENCE_SERVER_WS_URL=ws://2.3.1.4:1938 fastapi run server.py --port ${ANY_PORT_NUMBER}
+```
 
 ## feature requests
 

listener_counter.py

@@ -1,19 +0,0 @@
-import threading
-
-
-class ListenerCounter:
-    def __init__(self) -> None:
-        self.__listener = set()
-        self.__lock = threading.Lock()
-
-    def add_listener(self, listener_id: str):
-        with self.__lock:
-            self.__listener.add(listener_id)
-
-    def remove_listener(self, listener_id: str):
-        with self.__lock:
-            self.__listener.discard(listener_id)
-
-    def count(self) -> int:
-        with self.__lock:
-            return len(self.__listener)

requirements-server.txt

@@ -1,4 +1,2 @@
-fastapi==0.115.5
-websockets==14.1
-logger==1.4
-Requests==2.32.3
+fastapi==0.111.1
+websocket_client==1.8.0

server.py

@@ -4,14 +4,9 @@ from time import sleep
 import requests
 
 from contextlib import asynccontextmanager
-from fastapi import (
-    FastAPI,
-    WebSocket,
-    status,
-)
+from fastapi import FastAPI, WebSocket, WebSocketDisconnect, status
 from fastapi.responses import FileResponse
 from fastapi.staticfiles import StaticFiles
-from listener_counter import ListenerCounter
 from logger import log_info, log_warn
 from websocket_connection_manager import WebSocketConnectionManager
 
@@ -22,7 +17,7 @@ t = None
 inference_url = ""
 api_key = ""
 ws_connection_manager = WebSocketConnectionManager()
-listener_counter = ListenerCounter()
+active_listeners = set()
 
 
 @asynccontextmanager
@@ -145,24 +140,24 @@ async def ws_endpoint(ws: WebSocket):
     else:
         await ws.close()
         ws_connection_manager.disconnect(ws)
-        return
 
-    await ws_connection_manager.broadcast(f"{listener_counter.count()}")
+    await ws_connection_manager.broadcast(f"{len(active_listeners)}")
 
     try:
         while True:
             msg = await ws.receive_text()
-            match msg:
-                case "listening":
-                    listener_counter.add_listener(addr)
-                    await ws_connection_manager.broadcast(f"{listener_counter.count()}")
-                case "paused":
-                    listener_counter.remove_listener(addr)
-                    await ws_connection_manager.broadcast(f"{listener_counter.count()}")
-    except:
-        listener_counter.remove_listener(addr)
+
+            if msg == "playing":
+                active_listeners.add(addr)
+                await ws_connection_manager.broadcast(f"{len(active_listeners)}")
+            elif msg == "paused":
+                active_listeners.discard(addr)
+                await ws_connection_manager.broadcast(f"{len(active_listeners)}")
+
+    except WebSocketDisconnect:
+        active_listeners.discard(addr)
         ws_connection_manager.disconnect(ws)
-        await ws_connection_manager.broadcast(f"{listener_counter.count()}")
+        await ws_connection_manager.broadcast(f"{len(active_listeners)}")
 
 
 app.mount("/", StaticFiles(directory="web", html=True), name="web")

start-server.sh

@@ -1,2 +1,2 @@
 #!/bin/sh
-INFERENCE_SERVER_URL=SERVER_URL API_KEY=FAL_API_KEY nohup uvicorn server:app --host 0.0.0.0 --port 443 --ssl-keyfile /path/to/ssl/private/key/file --ssl-certfile /path/to/ssl/cert/file > server.log 2> server.err < /dev/null &
+uvicorn server:app --host 0.0.0.0 --port 443 --ssl-keyfile private.key.pem --ssl-certfile domain.cert.pem > server.log 2> server.err < /dev/null

tmp/server.py

@@ -1,166 +0,0 @@
-import threading
-import os
-from time import sleep
-import requests
-
-from contextlib import asynccontextmanager
-from fastapi import (
-    FastAPI,
-    WebSocket,
-    status,
-)
-from fastapi.responses import FileResponse
-from fastapi.staticfiles import StaticFiles
-from listener_counter import ListenerCounter
-from logger import log_info, log_warn
-from websocket_connection_manager import WebSocketConnectionManager
-
-# the index of the current audio track from 0 to 9
-current_index = -1
-# the timer that periodically advances the current audio track
-t = None
-inference_url = ""
-api_key = ""
-ws_connection_manager = WebSocketConnectionManager()
-listener_counter = ListenerCounter()
-
-
-@asynccontextmanager
-async def lifespan(app: FastAPI):
-    global ws, inference_url, api_key
-
-    inference_url = os.environ.get("INFERENCE_SERVER_URL")
-    api_key = os.environ.get("API_KEY")
-
-    if not inference_url:
-        inference_url = "http://localhost:8001"
-
-    advance()
-
-    yield
-
-    if t:
-        t.cancel()
-
-
-def generate_new_audio():
-    if not inference_url:
-        return
-
-    global current_index
-
-    offset = 0
-    if current_index == 0:
-        offset = 5
-    elif current_index == 5:
-        offset = 0
-    else:
-        return
-
-    log_info("requesting new audio...")
-
-    try:
-        requests.post(
-            f"{inference_url}/generate",
-            headers={"Authorization": f"key {api_key}"},
-        )
-    except:
-        log_warn(
-            "inference server potentially unreachable. recycling cached audio for now."
-        )
-        return
-
-    is_available = False
-    while not is_available:
-        try:
-            res = requests.post(
-                f"{inference_url}/clips/0",
-                stream=True,
-                headers={"Authorization": f"key {api_key}"},
-            )
-        except:
-            log_warn(
-                "inference server potentially unreachable. recycling cached audio for now."
-            )
-            return
-
-        if res.status_code != status.HTTP_200_OK:
-            print(res.status_code)
-            print("still generating...")
-            sleep(30)
-            continue
-
-        print("inference complete! downloading new clips")
-
-        is_available = True
-        with open(f"{offset}.mp3", "wb") as f:
-            for chunk in res.iter_content(chunk_size=128):
-                f.write(chunk)
-
-    for i in range(4):
-        res = requests.post(
-            f"{inference_url}/clips/{i + 1}",
-            stream=True,
-            headers={"Authorization": f"key {api_key}"},
-        )
-
-        if res.status_code != status.HTTP_200_OK:
-            continue
-
-        with open(f"{i + 1 + offset}.mp3", "wb") as f:
-            for chunk in res.iter_content(chunk_size=128):
-                f.write(chunk)
-
-    log_info("audio generated.")
-
-
-def advance():
-    global current_index, t
-
-    if current_index == 9:
-        current_index = 0
-    else:
-        current_index = current_index + 1
-    threading.Thread(target=generate_new_audio).start()
-
-    t = threading.Timer(60, advance)
-    t.start()
-
-
-app = FastAPI(lifespan=lifespan)
-
-
-@app.get("/current.mp3")
-def get_current_audio():
-    return FileResponse(f"{current_index}.mp3")
-
-
-@app.websocket("/ws")
-async def ws_endpoint(ws: WebSocket):
-    await ws_connection_manager.connect(ws)
-
-    addr = ""
-    if ws.client:
-        addr, _ = ws.client
-    else:
-        await ws.close()
-        ws_connection_manager.disconnect(ws)
-        return
-
-    try:
-        while True:
-            msg = await ws.receive_text()
-            match msg:
-                case "listening":
-                    listener_counter.add_listener(addr)
-                    await ws_connection_manager.broadcast(f"{listener_counter.count()}")
-                case "paused":
-                    listener_counter.remove_listener(addr)
-                    await ws_connection_manager.broadcast(f"{listener_counter.count()}")
-    except:
-        listener_counter.remove_listener(addr)
-        ws_connection_manager.disconnect(ws)
-        await ws_connection_manager.broadcast(f"{listener_counter.count()}")
-
-
-app.mount("/", StaticFiles(directory="web", html=True), name="web")

web/index.html

@@ -31,7 +31,11 @@
 				</div>
 
 				<div class="status-bar">
-					<p id="listener-count">0 person tuned in</p>
+					<div id="listener-stats-container">
+						<p id="timer-display-label">joined HH:MM</p>
+						<p class="status-bar-listener-separator">&middot;</p>
+						<p id="listener-count">0 person tuned in</p>
+					</div>					
 					<div id="volume-slider-container">
 						<output id="current-volume-label" for="volume-slider">100%</output>
 						<input id="volume-slider" type="range" min="0" max="100" step="1" />
@@ -45,21 +49,21 @@
 				<p id="notification-body">make milo meow 100 times</p>
 			</aside>
 
-			<img id="cat" src="./images/cat.gif">
+			<img id="cat" src="./images/cat-0.png">
 			<img id="eeping-cat" src="./images/eeping-cat.png">
 			<img id="heart" src="./images/heart.png">
 		</div>
 
 		<footer>
-			made by&nbsp<a href="https://kennethnym.com" target="_blank">kennethnym</a>&nbsp;&lt;3 · powered by
-			<a class="fal-link" href="https://fal.ai" target="_blank">
+			made by&nbsp<a href="https://kennethnym.com">kennethnym</a>&nbsp;&lt;3 &middot; powered by
+			<a class="fal-link" href="https://fal.ai">
 				<picture>
 					<source srcset="./images/fal-logo-light.svg" media="(prefers-color-scheme: light)" />
 					<source srcset="./images/fal-logo-dark.svg" media="(prefers-color-scheme: dark)" />
 					<img class="fal-logo" fill="none" src="./images/fal-logo-dark.svg">
 				</picture>
 			</a>
-      ·
+      &middot;
 			<a target="_blank" rel="noopener noreferrer" href="https://github.com/kennethnym/infinifi">github</a>
 		</footer>
 

web/script.js

@@ -11,6 +11,7 @@ const heartImg = document.getElementById("heart");
 const volumeSlider = document.getElementById("volume-slider");
 const currentVolumeLabel = document.getElementById("current-volume-label");
 const listenerCountLabel = document.getElementById("listener-count");
+const timerDisplayLabel = document.getElementById("timer-display-label");
 const notificationContainer = document.getElementById("notification");
 const notificationTitle = document.getElementById("notification-title");
 const notificationBody = document.getElementById("notification-body");
@@ -22,8 +23,6 @@ const achievementUnlockedAudio = document.getElementById(
 	"achievement-unlocked-audio",
 );
 
-const ws = initializeWebSocket();
-
 let isPlaying = false;
 let isFading = false;
 let currentAudio;
@@ -31,6 +30,9 @@ let maxVolume = 100;
 let currentVolume = 0;
 let saveVolumeTimeout = null;
 let meowCount = 0;
+let ws = connectToWebSocket();
+
+const joinedTime = new Date();
 
 function playAudio() {
 	// add a random query parameter at the end to prevent browser caching
@@ -38,13 +40,17 @@ function playAudio() {
 	currentAudio.onplay = () => {
 		isPlaying = true;
 		playBtn.innerText = "pause";
-		updateClientStatus({ isListening: true });
+		if (ws) {
+			ws.send("playing");
+		}
 	};
 	currentAudio.onpause = () => {
 		isPlaying = false;
 		currentVolume = 0;
 		playBtn.innerText = "play";
-		updateClientStatus({ isListening: false });
+		if (ws) {
+			ws.send("paused");
+		}
 	};
 	currentAudio.onended = () => {
 		currentVolume = 0;
@@ -104,31 +110,67 @@ function fadeOut() {
 	}, CROSSFADE_INTERVAL_MS);
 }
 
+function animateCat() {
+	let current = 0;
+	setInterval(() => {
+		if (current === 3) {
+			current = 0;
+		} else {
+			current += 1;
+		}
+		catImg.src = `./images/cat-${current}.png`;
+	}, 500);
+}
+
 /**
  * Allow audio to be played/paused using the space bar
  */
 function enableSpaceBarControl() {
-	let isDown = false;
 	document.addEventListener("keydown", (event) => {
-		if (isDown) return;
 		if (event.code === "Space") {
-			isDown = true;
 			playBtn.classList.add("button-active");
+			playBtn.dispatchEvent(new MouseEvent("mousedown"));
 			clickAudio.play();
 		}
 	});
 	document.addEventListener("keyup", (event) => {
-		isDown = false;
 		if (event.code === "Space") {
 			playBtn.classList.remove("button-active");
 			clickReleaseAudio.play();
-			if (isPlaying) {
-				pauseAudio();
-			} else {
-				playAudio();
-			}
 		}
 	});
+	document.addEventListener("keypress", (event) => {
+		if (event.code === "Space") {
+			playBtn.click();
+		}
+	});
+}
+
+function connectToWebSocket() {
+	const ws = new WebSocket(
+		`${location.protocol === "https:" ? "wss:" : "ws:"}//${location.host}/ws`,
+	);
+	ws.onmessage = (event) => {
+		console.log(event.data);
+
+		if (typeof event.data !== "string") {
+			return;
+		}
+
+		const listenerCountStr = event.data;
+		const listenerCount = Number.parseInt(listenerCountStr);
+		if (Number.isNaN(listenerCount)) {
+			return;
+		}
+
+		if (listenerCount <= 1) {
+			listenerCountLabel.innerText = `${listenerCount} person tuned in`;
+		} else {
+			listenerCountLabel.innerText = `${listenerCount} ppl tuned in`;
+		}
+	};
+
+	return ws;
 }
 
 function changeVolume(volume) {
@@ -190,47 +232,33 @@ function showNotification(title, content, duration) {
 	}, duration);
 }
 
-function updateListenerCountLabel(newCount) {
-	if (newCount <= 1) {
-		listenerCountLabel.innerText = `${newCount} person tuned in`;
-	} else {
-		listenerCountLabel.innerText = `${newCount} ppl tuned in`;
+function dateToHumanTime(dateVal, includeSeconds = false) {
+	// Extract hours, minutes
+	let hours = dateVal.getHours();
+	let minutes = dateVal.getMinutes();
+	let seconds = dateVal.getSeconds();
+
+	// Add leading zeros if the values are less than 10
+	hours = hours < 10 ? '0' + hours : hours;
+	minutes = minutes < 10 ? '0' + minutes : minutes;
+	seconds = seconds < 10 ? '0' + seconds : seconds;
+
+	// Combine into HH:MM format
+	if (includeSeconds) {
+		return `${hours}:${minutes}:${seconds}`;
 	}
+	return `${hours}:${minutes}`;
 }
 
-async function updateClientStatus(status) {
-	if (status.isListening) {
-		ws.send("listening");
-	} else {
-		ws.send("paused");
-	}
+function loadTimerDisplay() {
+	const now = new Date();
+	timerDisplayLabel.innerText = `${dateToHumanTime(now)} | joined ${dateToHumanTime(joinedTime)}`;
+
+	// seconds until next full minutes 
+	// + 1 seconds to ensure non null value
+	setTimeout(loadTimerDisplay, (61 - now.getSeconds()) * 1000);
 }
 
-function initializeWebSocket() {
-	const ws = new WebSocket(
-		`${location.protocol === "https:" ? "wss:" : "ws:"}//${location.host}/ws`,
-	);
-
-	ws.onmessage = (event) => {
-		if (typeof event.data !== "string") {
-			return;
-		}
-
-		const listenerCount = Number.parseInt(event.data);
-		if (Number.isNaN(listenerCount)) {
-			return;
-		}
-
-		updateListenerCountLabel(listenerCount);
-	};
-
-	return ws;
-}
-
-window.addEventListener("beforeunload", (e) => {
-	updateClientStatus({ isListening: false });
-});
-
 playBtn.onmousedown = () => {
 	clickAudio.play();
 	document.addEventListener(
@@ -290,6 +318,16 @@ meowAudio.onplay = () => {
 // don't wanna jumpscare ppl
 achievementUnlockedAudio.volume = 0.05;
 
+window.addEventListener("offline", () => {
+	ws = null;
+});
+
+window.addEventListener("online", () => {
+	ws = connectToWebSocket();
+});
+
 loadMeowCount();
 loadInitialVolume();
+animateCat();
 enableSpaceBarControl();
+loadTimerDisplay();

web/style.css

@@ -115,18 +115,39 @@ a {
   left: 0;
   right: 0;
   z-index: -10;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
   padding: 2rem;
   z-index: 0;
   color: var(--text);
 }
 
-.status-bar > #listener-count {
+@media (min-width: 460px){
+  .status-bar{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+.status-bar #listener-stats-container {
+  padding-right: 0.5rem;
+}
+
+.status-bar #listener-stats-container > * {
+  display: inline-block;
   margin: 0;
   opacity: 0.8;
-  padding-right: 1rem;
+  padding-right: 0.5rem;
+}
+
+@media (max-width: 650px) {
+  .status-bar #listener-stats-container > * {
+    display: block;
+    margin-bottom: 0.5rem;
+  }
+
+  .status-bar #listener-stats-container .status-bar-listener-separator {
+    display: none;
+  }
 }
 
 .header {