Alert if the audio player is ahead of inference inputs

components/AudioPlayer.tsx

@@ -8,6 +8,7 @@ interface AudioPlayerProps {
   paused: boolean;
   inferenceResults: InferenceResult[];
   nowPlayingCallback: (result: InferenceResult, playerTime: number) => void;
+  playerIsBehindCallback: (isBehind: boolean) => void;
 }
 
 /**
@@ -19,13 +20,13 @@ export default function AudioPlayer({
   paused,
   inferenceResults,
   nowPlayingCallback,
+  playerIsBehindCallback,
 }: AudioPlayerProps) {
   const [tonePlayer, setTonePlayer] = useState<Tone.Player>(null);
 
   const [numClipsPlayed, setNumClipsPlayed] = useState(0);
   const [prevNumClipsPlayed, setPrevNumClipsPlayed] = useState(0);
 
-  // TODO(hayk): What is this?
   const [resultCounter, setResultCounter] = useState(0);
 
   // On load, create a player synced to the tone transport
@@ -46,20 +47,9 @@ export default function AudioPlayer({
 
       // Set up a callback to increment numClipsPlayed at the edge of each clip
       const bufferLength = player.sampleTime * player.buffer.length;
-      // console.log(bufferLength, result.duration_s);
 
       // TODO(hayk): Set this callback up to vary each time using duration_s
       Tone.Transport.scheduleRepeat((time) => {
-        // TODO(hayk): Edge of clip callback
-        // console.log(
-        //   "Edge of clip, t = ",
-        //   Tone.Transport.getSecondsAtTime(time),
-        //   ", bufferLength = ",
-        //   bufferLength,
-        //   ", tone transport seconds = ",
-        //   Tone.Transport.seconds
-        // );
-
         setNumClipsPlayed((n) => n + 1);
       }, bufferLength);
 
@@ -99,13 +89,16 @@ export default function AudioPlayer({
 
     if (maxResultCounter < resultCounter) {
       console.info(
-        "not picking a new result, none available",
+        "No new result available, looping previous clip",
         resultCounter,
         maxResultCounter
       );
+      playerIsBehindCallback(true);
       return;
     }
 
+    playerIsBehindCallback(false);
+
     const result = inferenceResults.find(
       (r: InferenceResult) => r.counter == resultCounter
     );

components/FallingBehindWarning.tsx

@@ -0,0 +1,12 @@
+export default function FallingBehindWarning() {
+  return (
+    <div
+      className="fixed z-20 bottom-8 md:bottom-8 left-12 md:left-12 bg-yellow-50 border border-yellow-600 text-yellow-700 px-4 py-3 rounded"
+      role="alert"
+    >
+      <span className="block sm:inline mr-8">
+        <b>Uh oh!</b> The GPU server is behind.
+      </span>
+    </div>
+  );
+}

pages/index.tsx

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useState } from "react";
 import * as Tone from "tone";
 
 import AudioPlayer from "../components/AudioPlayer";
+import FallingBehindWarning from "../components/FallingBehindWarning";
 import PageHead from "../components/PageHead";
 import Share from "../components/Share";
 import Settings from "../components/Settings";
@@ -213,6 +214,13 @@ export default function Home() {
     });
   };
 
+  // Track from the audio player whether we're behind on having new inference results,
+  // in order to display an alert.
+  const [playerIsBehind, setPlayerIsBehind] = useState(false);
+  const playerIsBehindCallback = (isBehind: boolean) => {
+    setPlayerIsBehind(isBehind);
+  };
+
   // TODO(hayk): This is not done yet but it's supposed to clear out future state and prompts
   // and allow the user to immediately start a new prompt.
   const resetCallback = () => {
@@ -258,6 +266,8 @@ export default function Home() {
           </div>
         </div>
 
+        {playerIsBehind ? <FallingBehindWarning /> : null}
+
         <div className="brightness-50	md:filter-none w-full z-0 md:w-1/3 min-h-screen">
           <ThreeCanvas
             paused={paused}
@@ -283,6 +293,7 @@ export default function Home() {
           paused={paused}
           inferenceResults={inferenceResults}
           nowPlayingCallback={nowPlayingCallback}
+          playerIsBehindCallback={playerIsBehindCallback}
         />
 
         <PromptPanel