Merge branch 'main' of github.com:hmartiro/riffusion-app

components/Info.tsx

@@ -1,19 +1,19 @@
 import { Dialog, Transition } from "@headlessui/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);
 
   return (
     <>
       <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
           flex justify-center items-center text-black text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
         onClick={() => setOpen(true)}
       >
-        <FiSliders />
+        <FiInfo />
       </button>
 
       <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">
                 <Dialog.Title
-                  as="h3"
-                  className="text-lg font-medium leading-6 text-gray-900"
+                  as="h1"
+                  className="text-2xl font-medium leading-6 text-gray-900 pb-1"
                 >
-                  Settings
+                  Welcome to Riffusion
                 </Dialog.Title>
                 <div className="mt-2">
                   <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>
                 </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"
                     onClick={() => setOpen(false)}
                   >
-                    Wicked!
+                    Let's Riff 🎸
                   </button>
                 </div>
               </div>
@@ -81,4 +83,4 @@ const Settings = () => {
   );
 };
 
-export default Settings;
+export default Info;

components/PromptPanel.tsx

@@ -6,11 +6,13 @@ import {useRef} from 'react';
 interface PromptPanelProps {
     prompts: PromptInput[];
     addPrompt: (prompt: string) => void;
+    changeUpNextPrompt: (prompt: string) => void;
 }
 
 export default function PromptPanel({
     prompts,
     addPrompt,
+    changeUpNextPrompt,
 }: PromptPanelProps) {
 
     const inputPrompt = useRef(null);
@@ -19,7 +21,7 @@ export default function PromptPanel({
         <>
             <main className="w-2/3 min-h-screen">
                 <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) => (
                             <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) => {
                         e.preventDefault();
                         const prompt = e.currentTarget.prompt.value;
-                        addPrompt(prompt);
+                        changeUpNextPrompt(prompt);
                         inputPrompt.current.value = '';
                     }}>
                         <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}
                             type="text"
                             id="prompt"
                             name="prompt"
                             placeholder="What do you want to hear next?"
+                            maxLength={150}
                             autoComplete="off"
                         />
                     </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.
-// 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)
 const promptEntryClassNames = {
     0: "font-light text-sm text-gray-400 text-opacity-40",
     1: "font-normal text-m text-gray-300 text-opacity-60",
     2: "font-medium text-xl text-gray-200 text-opacity-80",
     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",
 }

pages/index.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState, useRef } from "react";
 
 import ThreeCanvas from "../components/ThreeCanvas";
 import PromptPanel from "../components/PromptPanel";
-import Settings from "../components/Settings";
+import Info from "../components/Info";
 import Pause from "../components/Pause";
 
 import { InferenceResult, PromptInput } from "../types";
@@ -11,15 +11,12 @@ import { InferenceResult, PromptInput } from "../types";
 import * as Tone from "tone";
 
 const defaultPromptInputs = [
-  { prompt: "A jazz pianist playing a classical concerto" },
-  { prompt: "Taylor Swift singing with a tropical beat" },
-  { prompt: "A typewriter in the bahamas" },
-  { prompt: "Justin Bieber anger rap" },
-  {
-    prompt:
-      "New york city rap, with a dust storm, cinematic score, dramatic, composition",
-  },
-  { prompt: "Jack Johnson playing a harmonica in the 1920s" },
+  { prompt: "A jazz pianist playing a classical concerto"},
+  { prompt: "Country singer and a techno DJ"},
+  { prompt: "A typewriter in they style of K-Pop"},
+  { prompt: "Boy band with a tropical beat "},
+  { prompt: "..."},
+  { prompt: "Anything you want"},
 ];
 
 const defaultInferenceResults = [
@@ -210,9 +207,14 @@ export default function Home() {
           addPrompt={(prompt: string) => {
             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} />
       </div>