Merge branch 'main' of github.com:hmartiro/riffusion-app

This commit is contained in:
Hayk Martiros 2022-11-24 17:19:38 -08:00
commit 89bedca20b
3 changed files with 32 additions and 26 deletions

View File

@ -1,19 +1,19 @@
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
import { Fragment, useState } from "react"; import { Fragment, useState } from "react";
import { FiSliders } from "react-icons/fi"; import { FiInfo } from "react-icons/fi";
const Settings = () => { const Info = () => {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
return ( return (
<> <>
<button <button
title="Settings" title="Info"
className="fixed z-90 top-8 right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg className="fixed z-90 top-8 right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg
flex justify-center items-center text-black text-2xl hover:bg-sky-500 hover:drop-shadow-2xl" flex justify-center items-center text-black text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
onClick={() => setOpen(true)} onClick={() => setOpen(true)}
> >
<FiSliders /> <FiInfo />
</button> </button>
<Transition appear show={open} as={Fragment}> <Transition appear show={open} as={Fragment}>
@ -52,14 +52,16 @@ const Settings = () => {
> >
<div className="my-8 inline-block w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all"> <div className="my-8 inline-block w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
<Dialog.Title <Dialog.Title
as="h3" as="h1"
className="text-lg font-medium leading-6 text-gray-900" className="text-2xl font-medium leading-6 text-gray-900 pb-1"
> >
Settings Welcome to Riffusion
</Dialog.Title> </Dialog.Title>
<div className="mt-2"> <div className="mt-2">
<p className="text-sm text-gray-500"> <p className="text-sm text-gray-500">
Here are some knobs for you to tweak. Riffusion is a fine-tuned Stable Diffusion model that generates spectrogram images from any text prompt. <br></br>
<br></br>
These images are then converted into music. <br></br>
</p> </p>
</div> </div>
@ -69,7 +71,7 @@ const Settings = () => {
className="inline-flex justify-center rounded-md border border-transparent bg-sky-100 px-4 py-2 text-sm font-medium text-sky-800 hover:bg-sky-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2" className="inline-flex justify-center rounded-md border border-transparent bg-sky-100 px-4 py-2 text-sm font-medium text-sky-800 hover:bg-sky-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2"
onClick={() => setOpen(false)} onClick={() => setOpen(false)}
> >
Wicked! Let's Riff 🎸
</button> </button>
</div> </div>
</div> </div>
@ -81,4 +83,4 @@ const Settings = () => {
); );
}; };
export default Settings; export default Info;

View File

@ -6,11 +6,13 @@ import {useRef} from 'react';
interface PromptPanelProps { interface PromptPanelProps {
prompts: PromptInput[]; prompts: PromptInput[];
addPrompt: (prompt: string) => void; addPrompt: (prompt: string) => void;
changeUpNextPrompt: (prompt: string) => void;
} }
export default function PromptPanel({ export default function PromptPanel({
prompts, prompts,
addPrompt, addPrompt,
changeUpNextPrompt,
}: PromptPanelProps) { }: PromptPanelProps) {
const inputPrompt = useRef(null); const inputPrompt = useRef(null);
@ -19,7 +21,7 @@ export default function PromptPanel({
<> <>
<main className="w-2/3 min-h-screen"> <main className="w-2/3 min-h-screen">
<div className="pl-20"> <div className="pl-20">
<div className="h-[80vh] flex flex-col justify-around pt-[5vh]"> <div className="h-[80vh] flex flex-col justify-around pt-[5vh] pr-5">
{prompts.slice(-6).map((prompt, index) => ( {prompts.slice(-6).map((prompt, index) => (
<PromptEntry prompt={index == 5 ? "UP NEXT: " + prompt.prompt : prompt.prompt} className={promptEntryClassNames[index]} key={index} /> <PromptEntry prompt={index == 5 ? "UP NEXT: " + prompt.prompt : prompt.prompt} className={promptEntryClassNames[index]} key={index} />
))} ))}
@ -28,16 +30,17 @@ export default function PromptPanel({
<form onSubmit={(e) => { <form onSubmit={(e) => {
e.preventDefault(); e.preventDefault();
const prompt = e.currentTarget.prompt.value; const prompt = e.currentTarget.prompt.value;
addPrompt(prompt); changeUpNextPrompt(prompt);
inputPrompt.current.value = ''; inputPrompt.current.value = '';
}}> }}>
<input <input
className="fixed z-90 bottom-20 w-1/2 h-12 pl-3 text-xl text-black rounded-lg border-sky-500 border-2" className="fixed z-90 bottom-20 w-1/2 h-12 pl-3 text-xl text-black rounded-lg border-sky-400 border-4 focus:outline-none focus:border-sky-500"
ref={inputPrompt} ref={inputPrompt}
type="text" type="text"
id="prompt" id="prompt"
name="prompt" name="prompt"
placeholder="What do you want to hear next?" placeholder="What do you want to hear next?"
maxLength={150}
autoComplete="off" autoComplete="off"
/> />
</form> </form>
@ -48,13 +51,12 @@ export default function PromptPanel({
} }
// WIP manner of passing ideal font of each promptEntry based on where it is in the promptPanel. Could be done better with a map or something. // WIP manner of passing ideal font of each promptEntry based on where it is in the promptPanel. Could be done better with a map or something.
// option to use flexbox, but maybe want just static positioning instead <div className="h-screen flex flex-col justify-evenly">
// need not just order, but some context of where we are in time, and when that prompt will be primary (some global step state) // need not just order, but some context of where we are in time, and when that prompt will be primary (some global step state)
const promptEntryClassNames = { const promptEntryClassNames = {
0: "font-light text-sm text-gray-400 text-opacity-40", 0: "font-light text-sm text-gray-400 text-opacity-40",
1: "font-normal text-m text-gray-300 text-opacity-60", 1: "font-normal text-m text-gray-300 text-opacity-60",
2: "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 3: "font-bold text-5xl text-white", // This is the primary prompt
4: "font-medium text-2xl text-gray-200 text-opacity-80", 4: "font-medium text-2xl text-gray-200 text-opacity-80", // This is prompt it is transitioning to
5: "font-normal text-m text-gray-300 text-opacity-60", 5: "font-normal text-m text-gray-300 text-opacity-60",
} }

View File

@ -3,7 +3,7 @@ import { useEffect, useState, useRef } from "react";
import ThreeCanvas from "../components/ThreeCanvas"; import ThreeCanvas from "../components/ThreeCanvas";
import PromptPanel from "../components/PromptPanel"; import PromptPanel from "../components/PromptPanel";
import Settings from "../components/Settings"; import Info from "../components/Info";
import Pause from "../components/Pause"; import Pause from "../components/Pause";
import { InferenceResult, PromptInput } from "../types"; import { InferenceResult, PromptInput } from "../types";
@ -11,15 +11,12 @@ import { InferenceResult, PromptInput } from "../types";
import * as Tone from "tone"; import * as Tone from "tone";
const defaultPromptInputs = [ const defaultPromptInputs = [
{ prompt: "A jazz pianist playing a classical concerto" }, { prompt: "A jazz pianist playing a classical concerto"},
{ prompt: "Taylor Swift singing with a tropical beat" }, { prompt: "Country singer and a techno DJ"},
{ prompt: "A typewriter in the bahamas" }, { prompt: "A typewriter in they style of K-Pop"},
{ prompt: "Justin Bieber anger rap" }, { prompt: "Boy band with a tropical beat "},
{ { prompt: "..."},
prompt: { prompt: "Anything you want"},
"New york city rap, with a dust storm, cinematic score, dramatic, composition",
},
{ prompt: "Jack Johnson playing a harmonica in the 1920s" },
]; ];
const defaultInferenceResults = [ const defaultInferenceResults = [
@ -210,9 +207,14 @@ export default function Home() {
addPrompt={(prompt: string) => { addPrompt={(prompt: string) => {
setPromptInputs([...promptInputs, { prompt: prompt }]); setPromptInputs([...promptInputs, { prompt: prompt }]);
}} }}
changeUpNextPrompt={(prompt: string) => {
const newPromptInputs = [...promptInputs];
newPromptInputs[newPromptInputs.length - 1].prompt = prompt;
setPromptInputs(newPromptInputs);
}}
/> />
<Settings /> <Info />
<Pause paused={paused} setPaused={setPaused} /> <Pause paused={paused} setPaused={setPaused} />
</div> </div>