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

UI improvements 

DRY, button updates, and hooking up /about
This commit is contained in:
Seth Forsgren 2022-12-02 10:50:56 -08:00
parent c10a1c584b
commit a4be650d20
4 changed files with 28 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
components/Info.tsx
View File

@ -20,9 +20,9 @@ export default function Info(){
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 (
@ -77,23 +77,36 @@ 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&apos;s Riff 🎸
</button>
</div>
</div>
</ModalContainer>

4
components/Pause.tsx
View File

@ -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 (

26
components/PromptEntry.tsx
View File

@ -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:

2
components/PromptPanel.tsx
View File

@ -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"