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

settings buildout

This commit is contained in:
Seth Forsgren 2022-12-12 10:28:49 -08:00
parent 01134dc364
commit dc6b84d6de
5 changed files with 52 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/DebugView.tsx
View File

@ -53,7 +53,7 @@ export default function DebugView({
open={open}
onClose={() => setOpen(false)}
as="div"
className="fixed inset-0 z-10"
className="fixed inset-0 z-20"
>
<ModalContainer>
<div className="px-4 text-center text-sm whitespace-nowrap h-[40rem] w-[70rem] overflow-x-scroll">

2
components/Info.tsx
View File

@ -38,7 +38,7 @@ export default function Info() {
<Transition appear show={open} as={Fragment}>
<Dialog
as="div"
className="fixed inset-0 z-10 overflow-y-auto"
className="fixed inset-0 z-20 overflow-y-auto"
onClose={() => setOpen(false)}
>
<div className="min-h-screen px-4 text-center">

60
components/Settings.tsx
View File

@ -20,9 +20,9 @@ export default function Settings() {
var classNameCondition = ""
if (open) {
classNameCondition = "fixed z-20 top-64 mt-4 right-4 md:top-68 md: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"
classNameCondition = "fixed z-20 top-44 right-4 md:top-48 md: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-20 top-64 mt-4 right-4 md:top-68 md: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"
classNameCondition = "fixed z-20 top-44 right-4 md:top-48 md: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 (
@ -38,7 +38,7 @@ export default function Settings() {
<Transition appear show={open} as={Fragment}>
<Dialog
as="div"
className="fixed inset-0 z-10 overflow-y-auto"
className="fixed inset-0 z-20 overflow-y-auto"
onClose={() => setOpen(false)}
>
<div className="min-h-screen px-4 text-center">
@ -78,22 +78,24 @@ export default function Settings() {
Settings
</Dialog.Title>
<div className="mt-4">
<p className="text-sm text-gray-500">
<input type="range" min="0" max="100" value="40" className="range" />
<p className="label-text-alt">
<label className="label">
Riffusion generates music from text prompts using a diffusion model. Try typing in your favorite artist or genre, and playing with the settings below to explore the latent space of sound.
</label>
<br></br>
<br></br>
{/* <input type="range" min="0" max="100" value="40" className="range" /> */}
{seedImageSelector()}
{denoisingSelector()}
</p>
</div>
<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);
}}
>
@ -102,12 +104,24 @@ export default function Settings() {
</span>
</button>
<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">
Tell me more
</span>
</button>
<button
type="button"
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 🎸
Apply changes 🎧
</button>
</div>
@ -125,10 +139,10 @@ export function seedImageSelector() {
return (
<div className="form-control w-full">
<label className="label">
<span className="label-text">Seed image</span>
<span className="label-text">Seed Image</span>
{/* <span className="label-text-alt">Chose your vibe</span> */}
</label>
<select className="select select-bordered">
<select className="select select-bordered select-sm">
<option disabled selected>Chose your vibe</option>
<option selected >Og Beat</option>
<option>Soul</option>
@ -141,4 +155,26 @@ export function seedImageSelector() {
</label>
</div>
)
}
export function denoisingSelector() {
return (
<div className="form-control w-full">
<label className="label">
<span className="label-text">Denoising</span>
{/* <span className="label-text-alt">Chose your vibe</span> */}
</label>
<select className="select select-bordered select-sm">
<option disabled selected>How wild to get</option>
<option selected >Keep it on beat (0.75)</option>
<option>Get a little crazy (0.8)</option>
<option>I'm feeling lucky (0.85)</option>
<option>What is tempo? (0.95)</option>
</select>
<label className="label">
<span className="label-text-alt">The higher the denoising, the more creative the output, and the more likely you are to get off beat.</span>
{/* <span className="label-text-alt">Alt label</span> */}
</label>
</div>
)
}

2
components/Share.tsx
View File

@ -126,7 +126,7 @@ export default function Share({
<Transition appear show={open} as={Fragment}>
<Dialog
as="div"
className="fixed inset-0 z-10 overflow-y-auto"
className="fixed inset-0 z-20 overflow-y-auto"
onClose={() => setOpen(false)}
>
<div className="min-h-screen px-4 text-center">

2
pages/index.tsx
View File

@ -243,7 +243,7 @@ export default function Home() {
nowPlayingResult={nowPlayingResult}
/>
<Info />
{/* <Info /> */}
<DebugView
promptInputs={promptInputs}