From 12b8f48a8284755e0a7e2b560ae98c5965cfce7b Mon Sep 17 00:00:00 2001 From: Seth Forsgren Date: Wed, 30 Nov 2022 16:30:52 -0800 Subject: [PATCH] hacky but functional panel shifting with alpha changes --- components/PromptEntry.tsx | 107 +++++++++++++++++-- components/PromptPanel.tsx | 204 +++++++++++++++++++++++++++++++------ pages/index.tsx | 1 + types.ts | 9 +- 4 files changed, 283 insertions(+), 38 deletions(-) diff --git a/components/PromptEntry.tsx b/components/PromptEntry.tsx index 0c7b09b..e200e4e 100644 --- a/components/PromptEntry.tsx +++ b/components/PromptEntry.tsx @@ -1,23 +1,114 @@ import { NextComponentType } from 'next' +import { PlayingState } from '../types' interface PromptEntryProps { prompt: string index: number className: string + playingState: PlayingState } export default function PromptEntry({ prompt, index, className, -}: PromptEntryProps) { + playingState, +}: PromptEntryProps) { + + const getPromptCopy = (prompt: string) => { + switch (playingState) { + case PlayingState.UNINITIALIZED: + switch (index) { + case 0: + return prompt + case 1: + return prompt + case 2: + return prompt + case 3: + if (prompt == " " || prompt == "") { + return "..." + } + else { + return prompt + } + case 4: + if (prompt == " " || prompt == "") { + return "UP NEXT: Anything you want" + } + else { + return "UP NEXT: " + prompt + } + default: { + console.log("UNHANDLED default") + return prompt + } + } + case PlayingState.SAME_PROMPT: + switch (index) { + case 0: + return prompt + case 1: + return prompt + case 2: + return prompt + case 3: + if (prompt == " " || prompt == "") { + return "..." + } + else { + return prompt + } + case 4: + if (prompt == " " || prompt == "") { + return "UP NEXT: Anything you want" + } + else { + return "UP NEXT: " + prompt + } + default: { + console.log("UNHANDLED default") + return prompt + } + } + case PlayingState.TRANSITION: + switch (index) { + case 0: + return prompt + case 1: + return prompt + case 2: + return prompt + case 3: + return prompt + case 4: + if (prompt == " " || prompt == "") { + return "..." + } + else { + return prompt + } + case 5: + if (prompt == " " || prompt == "") { + return "UP NEXT: Anything you want" + } + else { + return "UP NEXT: " + prompt + } + default: { + console.log("UNHANDLED default") + return prompt + } + } + } + } + return ( - <> -

- {index + " " + prompt} - {/* {prompt == "" ? index == 5 ? "UP NEXT: Anything you want" + prompt : "..." : index == 5 ? "UP NEXT: " + prompt : prompt} */} -

- + <> +

+ {getPromptCopy(prompt)} +

+ ) - } +} diff --git a/components/PromptPanel.tsx b/components/PromptPanel.tsx index e617c3f..01fa1b5 100644 --- a/components/PromptPanel.tsx +++ b/components/PromptPanel.tsx @@ -1,33 +1,30 @@ import PromptEntry from "./PromptEntry"; -import { InferenceResult, PromptInput } from "../types"; +import { AppState, PlayingState, InferenceResult, PromptInput } from "../types"; import { useRef } from "react"; interface PromptPanelProps { prompts: PromptInput[]; inferenceResults: InferenceResult[]; nowPlayingResult: InferenceResult; + appState: AppState; changePrompt: (prompt: string, index: number) => void; } -enum PlayingState { - UNINITIALIZED = "UNINITIALIZED", - SAME_PROMPT = "SAME_PROMPT", - TRANSITION = "TRANSITION", -} - export default function PromptPanel({ prompts, inferenceResults, nowPlayingResult, + appState, changePrompt, }: PromptPanelProps) { const inputPrompt = useRef(null); + var playingState: PlayingState + const getDisplayPrompts = () => { var displayPrompts = []; - var playingState: PlayingState if (nowPlayingResult == null) { playingState = PlayingState.UNINITIALIZED } else if (nowPlayingResult.input.start.prompt == nowPlayingResult.input.end.prompt) { @@ -53,7 +50,7 @@ export default function PromptPanel({ // add the most recent end prompts to the displayPrompts lastPlayedResultsAlphaTransition.forEach((result) => { - displayPrompts.push({ prompt: result.input.end.prompt}); + displayPrompts.push({ prompt: result.input.end.prompt }); }); // Handle the case where there are less than 4 played results (i.e. the initial state) @@ -76,7 +73,7 @@ export default function PromptPanel({ lastPromptsCopy[index].transitionCounter = null; } }); - + // add the prompts to the displayPrompts lastPromptsCopy.forEach((p) => { displayPrompts.push(p); @@ -90,17 +87,68 @@ export default function PromptPanel({ return displayPrompts; } + const getPromptEntryClassName = (index: number) => { + switch (playingState) { + case PlayingState.UNINITIALIZED: + console.log("promptEntryClassNames_5_0") + return promptEntryClassNames_5_0[index]; + case PlayingState.SAME_PROMPT: + if (appState != AppState.TRANSITION) { + console.log("promptEntryClassNames_5_0") + return promptEntryClassNames_5_0[index]; + + } else { + switch (nowPlayingResult.input.alpha) { + case 0: + console.log("promptEntryClassNames_5_0") + return promptEntryClassNames_5_0[index]; + case 0.25: + console.log("UNHANDLED promptEntryClassNames_5_25") // this is never reached currently + case 0.5: + console.log("promptEntryClassNames_5_50") + return promptEntryClassNames_5_50[index]; + case 0.75: + console.log("promptEntryClassNames_5_75") + return promptEntryClassNames_5_75[index]; + case 1: + console.log("promptEntryClassNames_5_1") + return promptEntryClassNames_5_1[index]; + } + } + case PlayingState.TRANSITION: + switch (nowPlayingResult.input.alpha) { + case 0: + console.log("UNHANDLED promptEntryClassNames_6_0") // this is never reached currently + case 0.25: + console.log("promptEntryClassNames_6_25") + return promptEntryClassNames_6_25[index]; + case 0.5: + console.log("promptEntryClassNames_6_50") + return promptEntryClassNames_6_50[index]; + case 0.75: + console.log("promptEntryClassNames_6_75") + return promptEntryClassNames_6_75[index]; + case 1: + console.log("promptEntryClassNames_6_1") + return promptEntryClassNames_6_1[index]; + } + default: + console.log("UNHANDLED playingState: " + playingState) + } + } + return ( <>
-
+
{getDisplayPrompts().map((prompt, index) => ( ))}
@@ -132,20 +180,118 @@ export default function PromptPanel({ ); } -const promptEntryClassNames = { - 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-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 promptEntryClassNameDict = { + 0: "font-extralight text-xs text-gray-500 text-opacity-20", + 1: "font-extralight text-xs text-gray-400 text-opacity-20", + 2: "font-extralight text-sm text-gray-300 text-opacity-30", + 3: "font-extralight text-sm text-gray-200 text-opacity-30", + 4: "font-light text-sm text-gray-200 text-opacity-40", + 5: "font-light text-base text-gray-200 text-opacity-40", + 6: "font-light text-base text-gray-100 text-opacity-50", + 7: "font-light text-base text-gray-100 text-opacity-50", // starter for 0 -// 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 -// }; + 8: "font-light text-base text-gray-100 text-opacity-50", + 9: "font-light text-lg text-gray-100 text-opacity-50", + 10: "font-light text-lg text-gray-100 text-opacity-60", + 11: "font-normal text-lg text-gray-100 text-opacity-60", + 12: "font-normal text-xl text-gray-100 text-opacity-60", + 13: "font-normal text-xl text-gray-100 text-opacity-70", + 14: "font-normal text-xl text-gray-100 text-opacity-70", + 15: "font-normal text-xl text-gray-100 text-opacity-70", // starter for 1 + + 16: "font-medium text-2xl text-gray-100 text-opacity-80", // 0% + 17: "font-medium text-3xl text-gray-100 text-opacity-90", // 25% + 18: "font-semibold text-4xl text-white", // 50% + 19: "font-bold text-4xl text-white", // 75% + 20: "font-bold text-5xl text-white", + 21: "font-bold text-5xl text-white", + 22: "font-bold text-5xl text-white", + 23: "font-bold text-5xl text-white", // starter for 2 "start" + + 24: "font-bold text-5xl text-white", + 25: "font-bold text-4xl text-white", // 75% + 26: "font-semibold text-4xl text-white", // 50% + 27: "font-medium text-3xl text-gray-100 text-opacity-90", // 25% + 28: "font-normal text-2xl text-gray-100 text-opacity-80", + 29: "font-normal text-l text-gray-100 text-opacity-70", + 30: "font-normal text-l text-gray-100 text-opacity-70", + 31: "font-normal text-l text-gray-100 text-opacity-70", // starter for 3 "end" + + 32: "font-normal text-base text-gray-100 text-opacity-70", + 33: "font-normal text-base text-gray-100 text-opacity-60", + 34: "font-normal text-base text-gray-100 text-opacity-60", + 35: "font-normal text-base text-gray-100 text-opacity-60", // starter for 4 when "staging" + + 36: "font-normal text-base text-gray-100 text-opacity-60", // starter for 4 and 5 "Up Next" +} + +// ClassNames below +// Note that 6_0 and 5_25 are never reached in current stucture + +const promptEntryClassNames_5_0 = { + 0: promptEntryClassNameDict[7], + 1: promptEntryClassNameDict[15], + 2: promptEntryClassNameDict[23], // This is the start and end prompt + 3: promptEntryClassNameDict[31], // This is the staged prompt + 4: promptEntryClassNameDict[36], // This is the UP NEXT prompt +} + +const promptEntryClassNames_5_50 = { + 0: promptEntryClassNameDict[6], + 1: promptEntryClassNameDict[14], + 2: promptEntryClassNameDict[22], + 3: promptEntryClassNameDict[30], + 4: promptEntryClassNameDict[36], +} + +const promptEntryClassNames_5_75 = { + 0: promptEntryClassNameDict[5], + 1: promptEntryClassNameDict[13], + 2: promptEntryClassNameDict[21], + 3: promptEntryClassNameDict[29], + 4: promptEntryClassNameDict[36], +} + +const promptEntryClassNames_5_1 = { + 0: promptEntryClassNameDict[4], + 1: promptEntryClassNameDict[12], + 2: promptEntryClassNameDict[20], + 3: promptEntryClassNameDict[28], + 4: promptEntryClassNameDict[36], +} + +const promptEntryClassNames_6_25 = { + 0: promptEntryClassNameDict[3], + 1: promptEntryClassNameDict[11], + 2: promptEntryClassNameDict[19], + 3: promptEntryClassNameDict[27], + 4: promptEntryClassNameDict[35], + 5: promptEntryClassNameDict[36], +} + +const promptEntryClassNames_6_50 = { + 0: promptEntryClassNameDict[2], + 1: promptEntryClassNameDict[10], + 2: promptEntryClassNameDict[18], + 3: promptEntryClassNameDict[26], + 4: promptEntryClassNameDict[34], + 5: promptEntryClassNameDict[36], +} + +const promptEntryClassNames_6_75 = { + 0: promptEntryClassNameDict[1], + 1: promptEntryClassNameDict[9], + 2: promptEntryClassNameDict[17], + 3: promptEntryClassNameDict[25], + 4: promptEntryClassNameDict[33], + 5: promptEntryClassNameDict[36], +} + +const promptEntryClassNames_6_1 = { + 0: promptEntryClassNameDict[0], + 1: promptEntryClassNameDict[8], + 2: promptEntryClassNameDict[16], + 3: promptEntryClassNameDict[24], + 4: promptEntryClassNameDict[32], + 5: promptEntryClassNameDict[36], +} \ No newline at end of file diff --git a/pages/index.tsx b/pages/index.tsx index 3551597..f3a81bb 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -220,6 +220,7 @@ export default function Home() { prompts={promptInputs} inferenceResults={inferenceResults} nowPlayingResult={nowPlayingResult} + appState={appState} changePrompt={(prompt: string, index: number) => { const newPromptInputs = [...promptInputs]; newPromptInputs[index].prompt = prompt; diff --git a/types.ts b/types.ts index 05cd2b2..5481a09 100644 --- a/types.ts +++ b/types.ts @@ -36,9 +36,16 @@ export interface InferenceResult { duration_s: number; } -// High-level state of the interactive app +// High-level state of the app's inference call export enum AppState { UNINITIALIZED = "UNINITIALIZED", SAME_PROMPT = "SAME_PROMPT", TRANSITION = "TRANSITION", } + +// High-level state of the actively playing audio +export enum PlayingState { + UNINITIALIZED = "UNINITIALIZED", + SAME_PROMPT = "SAME_PROMPT", + TRANSITION = "TRANSITION", + }