UI improvements
DRY, button updates, and hooking up /about
This commit is contained in:
Seth Forsgren
parent
c10a1c584b
commit
a4be650d20
|
|
@ -15,21 +15,21 @@ align-items: center;
|
|||
justify-content: center;
|
||||
`;
|
||||
|
||||
export default function Info(){
|
||||
export default function Info() {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
var classNameCondition = ""
|
||||
if (open) {
|
||||
classNameCondition="fixed z-90 top-8 right-8 bg-sky-300 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
|
||||
classNameCondition = "fixed z-90 top-8 right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
|
||||
} else {
|
||||
classNameCondition="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-sky-900 text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
|
||||
classNameCondition = "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-sky-900 text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
title="Info"
|
||||
className= {classNameCondition}
|
||||
className={classNameCondition}
|
||||
onClick={() => setOpen(true)}
|
||||
>
|
||||
<FiInfo />
|
||||
|
|
@ -77,30 +77,43 @@ export default function Info(){
|
|||
>
|
||||
Welcome to Riffusion
|
||||
</Dialog.Title>
|
||||
<div className="mt-2">
|
||||
<div className="mt-4">
|
||||
<p className="text-sm text-gray-500">
|
||||
Riffusion is a fine-tuned Stable Diffusion model that
|
||||
generates spectrogram images from any text prompt. <br></br>
|
||||
Riffusion generates endless new jams from any text prompt. Try typing in your favorite artist or genre and you'll hear the music gradually transform.<br></br>
|
||||
<br></br>
|
||||
These images are then converted into music. <br></br>
|
||||
The diffusion model first creates images from your prompt, and then converts them into music. Learn more about surfing the latent space of sound below.<br></br>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<div className="mt-6">
|
||||
|
||||
<button
|
||||
className="relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-sky-500 group-hover:from-sky-600 group-hover:to-sky-500 hover:text-white"
|
||||
onClick={() => {
|
||||
window.open("/about", "_blank");
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
<span className="relative px-5 py-2 transition-all ease-in duration-75 bg-white rounded-md group-hover:bg-opacity-0">
|
||||
Surfing the what?
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex justify-center rounded-md border border-transparent bg-sky-300 px-4 py-2 text-sm font-medium text-sky-900 hover:bg-sky-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2"
|
||||
className="text-white bg-gradient-to-br from-purple-600 to-sky-500 hover:bg-gradient-to-bl font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
Let's Riff 🎸
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</ModalContainer>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -22,9 +22,9 @@ export default function Pause({
|
|||
|
||||
var classNameCondition = ""
|
||||
if (paused) {
|
||||
classNameCondition="fixed z-90 top-28 right-8 bg-sky-300 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
|
||||
classNameCondition="animate-pulse fixed z-90 top-28 right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl hover:bg-sky-500 focus:ring-4 focus:outline-none focus:ring-sky-600 hover:drop-shadow-2xl"
|
||||
} else {
|
||||
classNameCondition="fixed z-90 top-28 right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
|
||||
classNameCondition="fixed z-90 top-28 right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -18,32 +18,6 @@ export default function PromptEntry({
|
|||
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:
|
||||
|
|
|
|||
|
|
@ -152,7 +152,7 @@ export default function PromptPanel({
|
|||
}}
|
||||
>
|
||||
<input
|
||||
className="fixed w-1/2 h-12 pl-3 text-xl text-sky-900 rounded-lg border-sky-300 border-4 focus:outline-none focus:border-sky-500"
|
||||
className="fixed w-1/2 h-12 pl-3 text-xl text-sky-900 rounded-lg border-sky-700 border-4 hover:border-sky-600 focus:outline-none focus:border-sky-400"
|
||||
ref={inputPrompt}
|
||||
type="text"
|
||||
id="prompt"
|
||||
|
|
|
|||
Loading…
Reference in New Issue