Merge branch 'main' of github.com:hmartiro/riffusion-app
This commit is contained in:
commit
89bedca20b
|
@ -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;
|
|
@ -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",
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue