prompt ordering and shifting improved

components/PromptEntry.tsx

@@ -15,7 +15,8 @@ export default function PromptEntry({
     return (
       <>
         <p className={className}>
-            {prompt == "" ? index == 5 ? "UP NEXT: Anything you want" + prompt : "..." : index == 5 ? "UP NEXT: " + prompt : prompt}
+            {index + " " + prompt}
+            {/* {prompt == "" ? index == 5 ? "UP NEXT: Anything you want" + prompt : "..." : index == 5 ? "UP NEXT: " + prompt : prompt} */}
         </p>
       </>
     )

components/PromptPanel.tsx

@@ -1,27 +1,103 @@
 import PromptEntry from "./PromptEntry";
 
-import { PromptInput } from "../types";
+import { InferenceResult, PromptInput } from "../types";
 import { useRef } from "react";
 
 interface PromptPanelProps {
   prompts: PromptInput[];
+  inferenceResults: InferenceResult[];
+  nowPlayingResult: InferenceResult;
   changePrompt: (prompt: string, index: number) => void;
 }
 
+enum PlayingState {
+  UNINITIALIZED = "UNINITIALIZED",
+  SAME_PROMPT = "SAME_PROMPT",
+  TRANSITION = "TRANSITION",
+}
+
 export default function PromptPanel({
   prompts,
+  inferenceResults,
+  nowPlayingResult,
   changePrompt,
 }: PromptPanelProps) {
   const inputPrompt = useRef(null);
 
+  const getDisplayPrompts = () => {
+    var displayPrompts = [];
+
+    var playingState: PlayingState
+    if (nowPlayingResult == null) {
+      playingState = PlayingState.UNINITIALIZED
+    } else if (nowPlayingResult.input.start.prompt == nowPlayingResult.input.end.prompt) {
+      playingState = PlayingState.SAME_PROMPT
+    } else {
+      playingState = PlayingState.TRANSITION
+    }
+
+    // Add the last 4 prompts from playedResults
+    // filter inferenceResults to only include results that have been played
+    const playedResults = inferenceResults.filter((r) => r.played);
+
+    // filter playedResults to include only results where alpha is 0.25 (the first alpha of a new transition)
+    const playedResultsAlpha = playedResults.filter((r) => r.input.alpha == 0.25);
+
+    // filter playedResultsAlpha to include only results where playedResultsAlpha.input.start.prompt is not the same as playedResultsAlpha.input.end.prompt
+    const playedResultsAlphaTransition = playedResultsAlpha.filter(
+      (r) => r.input.start.prompt != r.input.end.prompt
+    );
+
+    // select the last 4 results
+    const lastPlayedResultsAlphaTransition = playedResultsAlphaTransition.slice(-4);
+
+    // add the most recent end prompts to the displayPrompts
+    lastPlayedResultsAlphaTransition.forEach((result) => {
+      displayPrompts.push({ prompt: result.input.end.prompt});
+    });
+
+    // Handle the case where there are less than 4 played results (i.e. the initial state)
+    if (displayPrompts.length < 4) {
+      const promptsToAdd = prompts.slice(displayPrompts.length, 4);
+      displayPrompts = [...promptsToAdd, ...displayPrompts];
+    }
+
+    // Add in the upNext and staged prompts 
+    // select the last 2 prompts from prompts
+    const lastPrompts = prompts.slice(-2);
+
+    // make a copy of the lastPrompts with new pointers
+    const lastPromptsCopy = lastPrompts.map((p) => ({ ...p }));
+
+    // if any of the lastPrompts have a transitionCounter, replace them with "" because they are already represented in the displayPrompts
+    lastPromptsCopy.forEach((prompt, index) => {
+      if (prompt.transitionCounter != null) {
+        lastPromptsCopy[index].prompt = "";
+        lastPromptsCopy[index].transitionCounter = null;
+      }
+    });
+    
+    // add the prompts to the displayPrompts
+    lastPromptsCopy.forEach((p) => {
+      displayPrompts.push(p);
+    });
+
+    // if playingState == PlayingState.SAME_PROMPT or playingState == PlayingState.UNINITIALIZED, remove the first prompt from displayPrompts
+    if (playingState == PlayingState.SAME_PROMPT || playingState == PlayingState.UNINITIALIZED) {
+      displayPrompts.shift();
+    }
+
+    return displayPrompts;
+  }
+
   return (
     <>
       <main className="w-2/3 min-h-screen">
         <div className="pl-20">
           <div className="h-[80vh] flex flex-col justify-around pt-[5vh] pr-5">
-            {prompts.slice(-6).map((prompt, index) => (
+            {getDisplayPrompts().map((prompt, index) => (
               <PromptEntry
-                prompt={prompt.prompt}
+                prompt={prompt.prompt + " " + prompt.transitionCounter}
                 className={promptEntryClassNames[index]}
                 index={index}
                 key={index}
@@ -57,10 +133,19 @@ export default function PromptPanel({
 }
 
 const promptEntryClassNames = {
-  0: "font-light text-sm text-gray-400 text-opacity-40",
-  1: "font-normal text-m text-gray-300 text-opacity-60",
+  0: "font-medium text-xl text-gray-200 text-opacity-80",
+  1: "font-medium text-xl text-gray-200 text-opacity-80",
   2: "font-medium text-xl text-gray-200 text-opacity-80",
-  3: "font-bold text-5xl text-white", // This is the primary prompt
-  4: "font-medium text-3xl text-gray-100 text-opacity-80", // This is prompt it is transitioning to
-  5: "font-normal text-m text-gray-200 text-opacity-60", // This is the UP NEXT prompt
+  3: "font-medium text-xl text-gray-200 text-opacity-80",
+  4: "font-medium text-xl text-gray-200 text-opacity-80",
+  5: "font-medium text-xl text-gray-200 text-opacity-80",
 };
+
+// const promptEntryClassNames = {
+//   0: "font-light text-sm text-gray-400 text-opacity-40",
+//   1: "font-normal text-m text-gray-300 text-opacity-60",
+//   2: "font-medium text-xl text-gray-200 text-opacity-80",
+//   3: "font-bold text-5xl text-white", // This is the primary prompt
+//   4: "font-medium text-3xl text-gray-100 text-opacity-80", // This is prompt it is transitioning to
+//   5: "font-normal text-m text-gray-200 text-opacity-60", // This is the UP NEXT prompt
+// };

pages/index.tsx

@@ -46,9 +46,7 @@ export default function Home() {
   const [promptInputs, setPromptInputs] = useState<PromptInput[]>([]);
 
   // Model execution results
-  const [inferenceResults, setInferenceResults] = useState<InferenceResult[]>(
-    []
-  );
+  const [inferenceResults, setInferenceResults] = useState<InferenceResult[]>([]);
 
   // Currently playing result, from the audio player
   const [nowPlayingResult, setNowPlayingResult] = useState<InferenceResult>(null);
@@ -148,6 +146,7 @@ export default function Home() {
 
       result.counter = newCounter;
       result.input = input;
+      result.played = false;
 
       setAlpha(alpha + alphaVelocity);
 
@@ -164,6 +163,30 @@ export default function Home() {
     );
 
     setNowPlayingResult(result);
+
+    // find the first promptInput that matches the result.input.end.prompt and set it's transitionCounter to the result.counter if not already set
+    setPromptInputs((prevPromptInputs) => {
+      const newPromptInputs = [...prevPromptInputs];
+      const promptInputIndex = newPromptInputs.findIndex(
+        (p) => p.prompt == result.input.end.prompt
+      );
+      if (promptInputIndex >= 0) {
+        if (newPromptInputs[promptInputIndex].transitionCounter == null) {
+          newPromptInputs[promptInputIndex].transitionCounter = result.counter;
+        }
+      }
+      return newPromptInputs;
+    });
+
+    // set played state for the result to true
+    setInferenceResults((prevResults: InferenceResult[]) => {
+      return prevResults.map((r) => {
+        if (r.counter == result.counter) {
+          r.played = true;
+        }
+        return r
+      })
+    })
   };
 
   return (
@@ -195,6 +218,8 @@ export default function Home() {
 
         <PromptPanel
           prompts={promptInputs}
+          inferenceResults={inferenceResults}
+          nowPlayingResult={nowPlayingResult}
           changePrompt={(prompt: string, index: number) => {
             const newPromptInputs = [...promptInputs];
             newPromptInputs[index].prompt = prompt;

types.ts

@@ -3,6 +3,9 @@ export interface PromptInput {
     seed?: number;
     denoising?: number;
     guidance?: number;
+
+    // promptsInput is assigned a transitionCounter equal to the result.counter upon first being played
+    transitionCounter?: number;
 }
 
 export interface InferenceInput {
@@ -20,6 +23,9 @@ export interface InferenceResult {
 
     counter: number;
 
+    // Binary played status (true = played or playing, false = not played)
+    played: boolean;
+
     // URL of the image
     image: string;