Mirrors
/
riffusion-app
mirror of https://github.com/riffusion/riffusion-app.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Progress towards a reset X

This commit is contained in:
Hayk Martiros 2022-12-12 22:28:14 -08:00
parent 6d688cd462
commit fd8273f2ba
4 changed files with 152 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/AudioPlayer.tsx
View File

@ -20,7 +20,6 @@ export default function AudioPlayer({
inferenceResults, inferenceResults,
nowPlayingCallback, nowPlayingCallback,
}: AudioPlayerProps) { }: AudioPlayerProps) {
// TODO(hayk): Rename
const [tonePlayer, setTonePlayer] = useState<Tone.Player>(null); const [tonePlayer, setTonePlayer] = useState<Tone.Player>(null);
const [numClipsPlayed, setNumClipsPlayed] = useState(0); const [numClipsPlayed, setNumClipsPlayed] = useState(0);

167
components/PromptEntry.tsx
View File

@ -1,88 +1,99 @@
import { NextComponentType } from 'next' import { PlayingState } from "../types";
import { PlayingState } from '../types' import { IoMdClose } from "react-icons/io";
interface PromptEntryProps { interface PromptEntryProps {
prompt: string prompt: string;
index: number index: number;
className: string className: string;
playingState: PlayingState playingState: PlayingState;
resetCallback: () => void;
} }
export default function PromptEntry({ export default function PromptEntry({
prompt, prompt,
index, index,
className, className,
playingState, playingState,
resetCallback,
}: PromptEntryProps) { }: PromptEntryProps) {
const getPromptCopy = (prompt: string) => {
const getPromptCopy = (prompt: string) => { switch (playingState) {
switch (playingState) { case PlayingState.UNINITIALIZED:
case PlayingState.UNINITIALIZED: case PlayingState.SAME_PROMPT:
case PlayingState.SAME_PROMPT: switch (index) {
switch (index) { case 0:
case 0: return prompt;
return prompt case 1:
case 1: return prompt;
return prompt case 2:
case 2: if (prompt == " " || prompt == "") {
return prompt return <span className="text-slate-600">{"<enter prompt>"}</span>;
case 3: } else {
if (prompt == " " || prompt == "") { return prompt;
return "..." }
} case 3:
else { if (prompt == " " || prompt == "") {
return prompt return "...";
} } else {
case 4: return prompt;
if (prompt == " " || prompt == "") { }
return "UP NEXT: Anything you want" case 4:
} if (prompt == " " || prompt == "") {
else { return "UP NEXT: Anything you want";
return "UP NEXT: " + prompt } else {
} return "UP NEXT: " + prompt;
default: { }
console.log("UNHANDLED default") default: {
return prompt console.log("UNHANDLED default");
} return prompt;
} }
case PlayingState.TRANSITION: }
switch (index) { case PlayingState.TRANSITION:
case 0: switch (index) {
return prompt case 0:
case 1: return prompt;
return prompt case 1:
case 2: return prompt;
return prompt case 2:
case 3: return prompt;
return prompt case 3:
case 4: if (prompt == " " || prompt == "") {
if (prompt == " " || prompt == "") { return "< enter prompt >";
return "..." } else {
} return prompt;
else { }
return prompt case 4:
} if (prompt == " " || prompt == "") {
case 5: return "...";
if (prompt == " " || prompt == "") { } else {
return "UP NEXT: Anything you want" return prompt;
} }
else { case 5:
return "UP NEXT: " + prompt if (prompt == " " || prompt == "") {
} return "UP NEXT: Anything you want";
default: { } else {
console.log("UNHANDLED default") return "UP NEXT: " + prompt;
return prompt }
} default: {
} console.log("UNHANDLED default");
return prompt;
}
} }
} }
};
return (
return ( <div className="flex">
<> <p className={className}>{getPromptCopy(prompt)}</p>
<p className={className}> {/* TODO(hayk): Re-enable this when it's working. */}
{getPromptCopy(prompt)} {/* {index == 2 ? (
</p> <IoMdClose
</> className="w-6 h-6 ml-2 text-gray-400"
) onClick={() => {
resetCallback();
}}
/>
) : null} */}
</div>
);
} }

69
components/PromptPanel.tsx
View File

@ -9,6 +9,7 @@ interface PromptPanelProps {
nowPlayingResult: InferenceResult; nowPlayingResult: InferenceResult;
appState: AppState; appState: AppState;
changePrompt: (prompt: string, index: number) => void; changePrompt: (prompt: string, index: number) => void;
resetCallback: () => void;
} }
export default function PromptPanel({ export default function PromptPanel({
@ -17,20 +18,23 @@ export default function PromptPanel({
nowPlayingResult, nowPlayingResult,
appState, appState,
changePrompt, changePrompt,
resetCallback,
}: PromptPanelProps) { }: PromptPanelProps) {
const inputPrompt = useRef(null); const inputPrompt = useRef(null);
var playingState: PlayingState var playingState: PlayingState;
const getDisplayPrompts = () => { const getDisplayPrompts = () => {
var displayPrompts = []; var displayPrompts = [];
if (nowPlayingResult == null) { if (nowPlayingResult == null) {
playingState = PlayingState.UNINITIALIZED playingState = PlayingState.UNINITIALIZED;
} else if (nowPlayingResult.input.start.prompt == nowPlayingResult.input.end.prompt) { } else if (
playingState = PlayingState.SAME_PROMPT nowPlayingResult.input.start.prompt == nowPlayingResult.input.end.prompt
) {
playingState = PlayingState.SAME_PROMPT;
} else { } else {
playingState = PlayingState.TRANSITION playingState = PlayingState.TRANSITION;
} }
// Add the last 4 prompts from playedResults // Add the last 4 prompts from playedResults
@ -38,7 +42,9 @@ export default function PromptPanel({
const playedResults = inferenceResults.filter((r) => r.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) // 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); 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 // filter playedResultsAlpha to include only results where playedResultsAlpha.input.start.prompt is not the same as playedResultsAlpha.input.end.prompt
const playedResultsAlphaTransition = playedResultsAlpha.filter( const playedResultsAlphaTransition = playedResultsAlpha.filter(
@ -46,7 +52,8 @@ export default function PromptPanel({
); );
// select the last 4 results // select the last 4 results
const lastPlayedResultsAlphaTransition = playedResultsAlphaTransition.slice(-4); const lastPlayedResultsAlphaTransition =
playedResultsAlphaTransition.slice(-4);
// add the most recent end prompts to the displayPrompts // add the most recent end prompts to the displayPrompts
lastPlayedResultsAlphaTransition.forEach((result) => { lastPlayedResultsAlphaTransition.forEach((result) => {
@ -80,12 +87,15 @@ export default function PromptPanel({
}); });
// if playingState == PlayingState.SAME_PROMPT or playingState == PlayingState.UNINITIALIZED, remove the first prompt from displayPrompts // if playingState == PlayingState.SAME_PROMPT or playingState == PlayingState.UNINITIALIZED, remove the first prompt from displayPrompts
if (playingState == PlayingState.SAME_PROMPT || playingState == PlayingState.UNINITIALIZED) { if (
playingState == PlayingState.SAME_PROMPT ||
playingState == PlayingState.UNINITIALIZED
) {
displayPrompts.shift(); displayPrompts.shift();
} }
return displayPrompts; return displayPrompts;
} };
const getPromptEntryClassName = (index: number) => { const getPromptEntryClassName = (index: number) => {
switch (playingState) { switch (playingState) {
@ -94,7 +104,6 @@ export default function PromptPanel({
case PlayingState.SAME_PROMPT: case PlayingState.SAME_PROMPT:
if (appState != AppState.TRANSITION) { if (appState != AppState.TRANSITION) {
return promptEntryClassNames_5_0[index]; return promptEntryClassNames_5_0[index];
} else { } else {
switch (nowPlayingResult.input.alpha) { switch (nowPlayingResult.input.alpha) {
case 0: case 0:
@ -126,15 +135,13 @@ export default function PromptPanel({
// These states are reached if alpha is greater than 1 but the new inference is not ready // These states are reached if alpha is greater than 1 but the new inference is not ready
if (appState != AppState.TRANSITION) { if (appState != AppState.TRANSITION) {
return promptEntryClassNames_5_0[index]; return promptEntryClassNames_5_0[index];
} } else if (playingState == PlayingState.SAME_PROMPT) {
else if (playingState == PlayingState.SAME_PROMPT) {
return promptEntryClassNames_5_1[index]; return promptEntryClassNames_5_1[index];
} } else {
else {
return promptEntryClassNames_6_1[index]; return promptEntryClassNames_6_1[index];
} }
} }
} };
return ( return (
<> <>
@ -148,6 +155,7 @@ export default function PromptPanel({
index={index} index={index}
key={index} key={index}
playingState={playingState} playingState={playingState}
resetCallback={resetCallback}
/> />
))} ))}
</div> </div>
@ -214,7 +222,7 @@ const promptEntryClassNameDict = {
23: "font-bold text-5xl text-white", // starter for 2 "start" 23: "font-bold text-5xl text-white", // starter for 2 "start"
24: "font-bold text-5xl text-white", 24: "font-bold text-5xl text-white",
25: "font-bold text-4xl text-white", // 75% 25: "font-bold text-4xl text-white", // 75%
26: "font-semibold text-4xl text-white", // 50% 26: "font-semibold text-4xl text-white", // 50%
27: "font-medium text-3xl text-gray-100 text-opacity-90", // 25% 27: "font-medium text-3xl text-gray-100 text-opacity-90", // 25%
28: "font-normal text-2xl text-gray-100 text-opacity-80", 28: "font-normal text-2xl text-gray-100 text-opacity-80",
@ -228,7 +236,7 @@ const promptEntryClassNameDict = {
35: "font-normal text-base text-gray-100 text-opacity-60", // starter for 4 when "staging" 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" 36: "font-normal text-base text-gray-100 text-opacity-60", // starter for 4 and 5 "Up Next"
} };
// ClassNames below // ClassNames below
// Note that 6_0 and 5_25 are never reached in current stucture // Note that 6_0 and 5_25 are never reached in current stucture
@ -239,15 +247,16 @@ const promptEntryClassNames_5_0 = {
2: promptEntryClassNameDict[23], // This is the start and end prompt 2: promptEntryClassNameDict[23], // This is the start and end prompt
3: promptEntryClassNameDict[31], // This is the staged prompt 3: promptEntryClassNameDict[31], // This is the staged prompt
4: promptEntryClassNameDict[36], // This is the UP NEXT prompt 4: promptEntryClassNameDict[36], // This is the UP NEXT prompt
} };
const promptEntryClassNames_5_25 = { // This is not reached unless user has poor connection or delayed server response const promptEntryClassNames_5_25 = {
// This is not reached unless user has poor connection or delayed server response
0: promptEntryClassNameDict[7], 0: promptEntryClassNameDict[7],
1: promptEntryClassNameDict[15], 1: promptEntryClassNameDict[15],
2: promptEntryClassNameDict[23], // This is the start and end prompt 2: promptEntryClassNameDict[23], // This is the start and end prompt
3: promptEntryClassNameDict[31], // This is the staged prompt 3: promptEntryClassNameDict[31], // This is the staged prompt
4: promptEntryClassNameDict[36], // This is the UP NEXT prompt 4: promptEntryClassNameDict[36], // This is the UP NEXT prompt
} };
const promptEntryClassNames_5_50 = { const promptEntryClassNames_5_50 = {
0: promptEntryClassNameDict[6], 0: promptEntryClassNameDict[6],
@ -255,7 +264,7 @@ const promptEntryClassNames_5_50 = {
2: promptEntryClassNameDict[22], 2: promptEntryClassNameDict[22],
3: promptEntryClassNameDict[30], 3: promptEntryClassNameDict[30],
4: promptEntryClassNameDict[36], 4: promptEntryClassNameDict[36],
} };
const promptEntryClassNames_5_75 = { const promptEntryClassNames_5_75 = {
0: promptEntryClassNameDict[5], 0: promptEntryClassNameDict[5],
@ -263,7 +272,7 @@ const promptEntryClassNames_5_75 = {
2: promptEntryClassNameDict[21], 2: promptEntryClassNameDict[21],
3: promptEntryClassNameDict[29], 3: promptEntryClassNameDict[29],
4: promptEntryClassNameDict[36], 4: promptEntryClassNameDict[36],
} };
const promptEntryClassNames_5_1 = { const promptEntryClassNames_5_1 = {
0: promptEntryClassNameDict[4], 0: promptEntryClassNameDict[4],
@ -271,17 +280,17 @@ const promptEntryClassNames_5_1 = {
2: promptEntryClassNameDict[20], 2: promptEntryClassNameDict[20],
3: promptEntryClassNameDict[28], 3: promptEntryClassNameDict[28],
4: promptEntryClassNameDict[36], 4: promptEntryClassNameDict[36],
} };
const promptEntryClassNames_6_0 = { // This is not reached unless user has poor connection or delayed server response const promptEntryClassNames_6_0 = {
// This is not reached unless user has poor connection or delayed server response
0: promptEntryClassNameDict[3], 0: promptEntryClassNameDict[3],
1: promptEntryClassNameDict[11], 1: promptEntryClassNameDict[11],
2: promptEntryClassNameDict[19], 2: promptEntryClassNameDict[19],
3: promptEntryClassNameDict[27], 3: promptEntryClassNameDict[27],
4: promptEntryClassNameDict[35], 4: promptEntryClassNameDict[35],
5: promptEntryClassNameDict[36], 5: promptEntryClassNameDict[36],
} };
const promptEntryClassNames_6_25 = { const promptEntryClassNames_6_25 = {
0: promptEntryClassNameDict[3], 0: promptEntryClassNameDict[3],
@ -290,7 +299,7 @@ const promptEntryClassNames_6_25 = {
3: promptEntryClassNameDict[27], 3: promptEntryClassNameDict[27],
4: promptEntryClassNameDict[35], 4: promptEntryClassNameDict[35],
5: promptEntryClassNameDict[36], 5: promptEntryClassNameDict[36],
} };
const promptEntryClassNames_6_50 = { const promptEntryClassNames_6_50 = {
0: promptEntryClassNameDict[2], 0: promptEntryClassNameDict[2],
@ -299,7 +308,7 @@ const promptEntryClassNames_6_50 = {
3: promptEntryClassNameDict[26], 3: promptEntryClassNameDict[26],
4: promptEntryClassNameDict[34], 4: promptEntryClassNameDict[34],
5: promptEntryClassNameDict[36], 5: promptEntryClassNameDict[36],
} };
const promptEntryClassNames_6_75 = { const promptEntryClassNames_6_75 = {
0: promptEntryClassNameDict[1], 0: promptEntryClassNameDict[1],
@ -308,7 +317,7 @@ const promptEntryClassNames_6_75 = {
3: promptEntryClassNameDict[25], 3: promptEntryClassNameDict[25],
4: promptEntryClassNameDict[33], 4: promptEntryClassNameDict[33],
5: promptEntryClassNameDict[36], 5: promptEntryClassNameDict[36],
} };
const promptEntryClassNames_6_1 = { const promptEntryClassNames_6_1 = {
0: promptEntryClassNameDict[0], 0: promptEntryClassNameDict[0],
@ -317,4 +326,4 @@ const promptEntryClassNames_6_1 = {
3: promptEntryClassNameDict[24], 3: promptEntryClassNameDict[24],
4: promptEntryClassNameDict[32], 4: promptEntryClassNameDict[32],
5: promptEntryClassNameDict[36], 5: promptEntryClassNameDict[36],
} };

24
pages/index.tsx
View File

@ -205,6 +205,29 @@ export default function Home() {
}); });
}; };
// 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 = () => {
console.log("RESET");
setPromptInputs([
promptInputs[0],
promptInputs[1],
promptInputs[2],
{ prompt: "" },
{ prompt: "" },
{ prompt: "" },
]);
if (nowPlayingResult == null) {
setInferenceResults([]);
}
// const counter = nowPlayingResult ? nowPlayingResult.counter : -1;
// setInferenceResults(inferenceResults.filter((r) => r.counter <= counter));
// setNowPlayingResult(null);
};
return ( return (
<> <>
<PageHead /> <PageHead />
@ -246,6 +269,7 @@ export default function Home() {
newPromptInputs[index].prompt = prompt; newPromptInputs[index].prompt = prompt;
setPromptInputs(newPromptInputs); setPromptInputs(newPromptInputs);
}} }}
resetCallback={resetCallback}
/> />
<Pause paused={paused} setPaused={setPaused} /> <Pause paused={paused} setPaused={setPaused} />