settings buildout

components/DebugView.tsx

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

components/Info.tsx

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

components/Settings.tsx

@@ -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">
+                    <p className="label-text-alt">
-                      <input type="range" min="0" max="100" value="40" className="range" />
+                      <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>
+                      {/* <input type="range" min="0" max="100" value="40" className="range" /> */}
-                      <br></br>
 
                       {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>
+  )
 }

components/Share.tsx

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

pages/index.tsx

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