hacky but functional panel shifting with alpha changes
This commit is contained in:
Seth Forsgren
parent
a90deb0cf2
commit
12b8f48a82
|
|
@ -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,
|
||||
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 (
|
||||
<>
|
||||
<p className={className}>
|
||||
{index + " " + prompt}
|
||||
{/* {prompt == "" ? index == 5 ? "UP NEXT: Anything you want" + prompt : "..." : index == 5 ? "UP NEXT: " + prompt : prompt} */}
|
||||
{getPromptCopy(prompt)}
|
||||
</p>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
@ -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 (
|
||||
<>
|
||||
<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">
|
||||
<div className="h-[80vh] flex flex-col justify-around pt-[10vh] pr-5">
|
||||
{getDisplayPrompts().map((prompt, index) => (
|
||||
<PromptEntry
|
||||
prompt={prompt.prompt + " " + prompt.transitionCounter}
|
||||
className={promptEntryClassNames[index]}
|
||||
prompt={prompt.prompt + " "}
|
||||
className={getPromptEntryClassName(index)}
|
||||
index={index}
|
||||
key={index}
|
||||
playingState={playingState}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -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],
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
9
types.ts
9
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",
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue