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

Add code for fal.ai integration

server.py

@@ -15,15 +15,18 @@ current_index = -1
 # the timer that periodically advances the current audio track
 t = None
 inference_url = ""
+api_key = ""
 ws_connection_manager = WebSocketConnectionManager()
 active_listeners = set()
 
 
 @asynccontextmanager
 async def lifespan(app: FastAPI):
-    global ws, inference_url
+    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"
 
@@ -52,8 +55,10 @@ def generate_new_audio():
     log_info("requesting new audio...")
 
     try:
-        print(f"{inference_url}/generate")
-        requests.post(f"{inference_url}/generate")
+        requests.post(
+            f"{inference_url}/generate",
+            headers={"Authorization": f"key {api_key}"},
+        )
     except:
         log_warn(
             "inference server potentially unreachable. recycling cached audio for now."
@@ -63,7 +68,11 @@ def generate_new_audio():
     is_available = False
     while not is_available:
         try:
-            res = requests.post(f"{inference_url}/clips/0", stream=True)
+            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."
@@ -71,8 +80,9 @@ def generate_new_audio():
             return
 
         if res.status_code != status.HTTP_200_OK:
+            print(res.status_code)
             print("still generating...")
-            sleep(5)
+            sleep(30)
             continue
 
         print("inference complete! downloading new clips")
@@ -83,7 +93,11 @@ def generate_new_audio():
                 f.write(chunk)
 
     for i in range(4):
-        res = requests.post(f"{inference_url}/clips/{i + 1}", stream=True)
+        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

web/images/fal-logo-dark.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 89 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M52.308 3.07812H57.8465V4.92428H56.0003V6.77043H54.1541V10.4627H57.8465V12.3089H54.1541V25.232H52.308V27.0781H46.7695V25.232H48.6157V12.3089H46.7695V10.4627H48.6157V6.77043H50.4618V4.92428H52.308V3.07812Z" fill="#cdd6f4"></path><path d="M79.3849 23.3858H81.2311V25.232H83.0772V27.0781H88.6157V25.232H86.7695V23.3858H84.9234V4.92428H79.3849V23.3858Z" fill="#cdd6f4"></path><path d="M57.8465 14.155H59.6926V12.3089H61.5388V10.4627H70.7695V12.3089H74.4618V23.3858H76.308V25.232H78.1541V27.0781H72.6157V25.232H70.7695V23.3858H68.9234V14.155H67.0772V12.3089H65.2311V14.155H63.3849V23.3858H65.2311V25.232H67.0772V27.0781H61.5388V25.232H59.6926V23.3858H57.8465V14.155Z" fill="#cdd6f4"></path><path d="M67.0772 25.232V23.3858H68.9234V25.232H67.0772Z" fill="#cdd6f4"></path><rect opacity="0.22" x="7.38477" y="29.5391" width="2.46154" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.85" x="2.46094" y="19.6914" width="12.3077" height="2.46154" fill="#5F4CD9"></rect><rect x="4.92383" y="17.2305" width="9.84615" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.4" x="7.38477" y="27.0781" width="4.92308" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.7" y="22.1562" width="14.7692" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.5" x="7.38477" y="24.6133" width="7.38462" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.22" x="7.38477" y="12.3086" width="2.46154" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.85" x="2.46094" y="2.46094" width="12.3077" height="2.46154" fill="#5F4CD9"></rect><rect x="4.92383" width="9.84615" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.4" x="7.38477" y="9.84375" width="4.92308" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.7" y="4.92188" width="14.7692" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.5" x="7.38477" y="7.38281" width="7.38462" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.22" x="24.6152" y="29.5391" width="2.46154" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.85" x="19.6914" y="19.6914" width="12.3077" height="2.46154" fill="#5F4CD9"></rect><rect x="22.1543" y="17.2305" width="9.84615" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.4" x="24.6152" y="27.0781" width="4.92308" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.7" x="17.2305" y="22.1562" width="14.7692" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.5" x="24.6152" y="24.6133" width="7.38462" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.22" x="24.6152" y="12.3086" width="2.46154" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.85" x="19.6914" y="2.46094" width="12.3077" height="2.46154" fill="#5F4CD9"></rect><rect x="22.1543" width="9.84615" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.4" x="24.6152" y="9.84375" width="4.92308" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.7" x="17.2305" y="4.92188" width="14.7692" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.5" x="24.6152" y="7.38281" width="7.38462" height="2.46154" fill="#5F4CD9"></rect></svg>

web/images/fal-logo-light.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 89 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M52.308 3.07812H57.8465V4.92428H56.0003V6.77043H54.1541V10.4627H57.8465V12.3089H54.1541V25.232H52.308V27.0781H46.7695V25.232H48.6157V12.3089H46.7695V10.4627H48.6157V6.77043H50.4618V4.92428H52.308V3.07812Z" fill="currentColor"></path><path d="M79.3849 23.3858H81.2311V25.232H83.0772V27.0781H88.6157V25.232H86.7695V23.3858H84.9234V4.92428H79.3849V23.3858Z" fill="currentColor"></path><path d="M57.8465 14.155H59.6926V12.3089H61.5388V10.4627H70.7695V12.3089H74.4618V23.3858H76.308V25.232H78.1541V27.0781H72.6157V25.232H70.7695V23.3858H68.9234V14.155H67.0772V12.3089H65.2311V14.155H63.3849V23.3858H65.2311V25.232H67.0772V27.0781H61.5388V25.232H59.6926V23.3858H57.8465V14.155Z" fill="currentColor"></path><path d="M67.0772 25.232V23.3858H68.9234V25.232H67.0772Z" fill="currentColor"></path><rect opacity="0.22" x="7.38477" y="29.5391" width="2.46154" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.85" x="2.46094" y="19.6914" width="12.3077" height="2.46154" fill="#5F4CD9"></rect><rect x="4.92383" y="17.2305" width="9.84615" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.4" x="7.38477" y="27.0781" width="4.92308" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.7" y="22.1562" width="14.7692" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.5" x="7.38477" y="24.6133" width="7.38462" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.22" x="7.38477" y="12.3086" width="2.46154" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.85" x="2.46094" y="2.46094" width="12.3077" height="2.46154" fill="#5F4CD9"></rect><rect x="4.92383" width="9.84615" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.4" x="7.38477" y="9.84375" width="4.92308" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.7" y="4.92188" width="14.7692" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.5" x="7.38477" y="7.38281" width="7.38462" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.22" x="24.6152" y="29.5391" width="2.46154" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.85" x="19.6914" y="19.6914" width="12.3077" height="2.46154" fill="#5F4CD9"></rect><rect x="22.1543" y="17.2305" width="9.84615" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.4" x="24.6152" y="27.0781" width="4.92308" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.7" x="17.2305" y="22.1562" width="14.7692" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.5" x="24.6152" y="24.6133" width="7.38462" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.22" x="24.6152" y="12.3086" width="2.46154" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.85" x="19.6914" y="2.46094" width="12.3077" height="2.46154" fill="#5F4CD9"></rect><rect x="22.1543" width="9.84615" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.4" x="24.6152" y="9.84375" width="4.92308" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.7" x="17.2305" y="4.92188" width="14.7692" height="2.46154" fill="#5F4CD9"></rect><rect opacity="0.5" x="24.6152" y="7.38281" width="7.38462" height="2.46154" fill="#5F4CD9"></rect></svg>

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" />
@@ -51,7 +55,15 @@
 		</div>
 
 		<footer>
-			<span>made by kennethnym &lt;3 ·&nbsp;</span>
+			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");
@@ -31,6 +32,8 @@ 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
 	currentAudio = new Audio(`./current.mp3?t=${Date.now()}`);
@@ -229,6 +232,33 @@ function showNotification(title, content, duration) {
 	}, duration);
 }
 
+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}`;
+}
+
+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);
+}
+
 playBtn.onmousedown = () => {
 	clickAudio.play();
 	document.addEventListener(
@@ -300,3 +330,4 @@ loadMeowCount();
 loadInitialVolume();
 animateCat();
 enableSpaceBarControl();
+loadTimerDisplay();

web/style.css

@@ -72,9 +72,12 @@ main {
 
 footer {
   padding: 1rem 0;
-  display: flex;
   align-items: center;
   justify-content: center;
+  color: var(--text);
+  text-align: center;
+  text-wrap: nowrap;
+  overflow: auto;
 }
 @media (min-width: 768px) {
   footer {
@@ -82,11 +85,6 @@ footer {
   }
 }
 
-footer > span {
-  color: var(--text);
-  opacity: 0.5;
-}
-
 a {
   color: var(--link-accent);
 }
@@ -117,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 {
@@ -378,3 +397,12 @@ aside#notification > #notification-title {
     opacity: 0;
   }
 }
+
+.fal-logo {
+  vertical-align: bottom;
+  height: 1rem;
+}
+
+.fal-link {
+  text-decoration: none;
+}