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

components/PromptEntry.tsx

@@ -5,14 +5,16 @@ interface PromptEntryProps {
     className: string
 }
 
-const PromptEntry = (props: PromptEntryProps) => {  
+export default function PromptEntry({
+    prompt,
+    className,
+}: PromptEntryProps) {  
+
     return (
       <>
-        <p className={props.className}>
-            {props.prompt}
+        <p className={className}>
+            {prompt}
         </p>
       </>
     )
   }
-  
-  export default PromptEntry

components/PromptPanel.tsx

@@ -1,34 +1,44 @@
 import PromptEntry from './PromptEntry'
 
 import { PromptInput } from "../types";
+import {useRef} from 'react';
+
 interface PromptPanelProps {
     prompts: PromptInput[];
     addPrompt: (prompt: string) => void;
 }
 
-const PromptPanel = (props: PromptPanelProps) => {
-    const prompts = props.prompts;
-    const addPrompt = props.addPrompt;
+export default function PromptPanel({
+    prompts,
+    addPrompt,
+}: PromptPanelProps) {
+
+    const inputPrompt = useRef(null);
 
     return (
         <>
-            <main className="w-2/3 min-h-screen p-4">
-                <div className="pl-20 pt-10">
-                    {prompts.map((prompt, index) => (
-                        <PromptEntry prompt={prompt.prompt} className={promptEntryClassNames[index]} key={index} />
+            <main className="w-2/3 min-h-screen">
+                <div className="pl-20">
+                    <div className="h-[80vh] flex flex-col justify-around pt-[5vh]">
+                        {prompts.slice(-6).map((prompt, index) => (
+                            <PromptEntry prompt={index == 5 ? "UP NEXT: " + prompt.prompt : prompt.prompt} className={promptEntryClassNames[index]} key={index} />
                         ))}
+                    </div>
 
                     <form onSubmit={(e) => {
                         e.preventDefault();
                         const prompt = e.currentTarget.prompt.value;
                         addPrompt(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"
+                            ref={inputPrompt}
                             type="text"
                             id="prompt"
                             name="prompt"
-                            placeholder="What do you want to hear?"
+                            placeholder="What do you want to hear next?"
+                            autoComplete="off"
                         />
                     </form>
                 </div>
@@ -37,13 +47,14 @@ const PromptPanel = (props: PromptPanelProps) => {
     )
 }
 
-export default 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: "pb-32 text-lg text-gray-400",
-    1: "pb-32 text-xl text-gray-300",
-    2: "pb-32 text-3xl text-white",
-    3: "pb-32 text-m text-gray-400",
+    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",
+    5: "font-normal text-m text-gray-300 text-opacity-60",
 }

components/SpectrogramViewer.tsx

@@ -73,7 +73,7 @@ export default function SpectrogramViewer({
           start={[-3, 0, 1]} // Starting point, can be an array or a vec3
           end={[3, 0, 1]} // Ending point, can be an array or a vec3
           mid={[0, -0.8, 0.4]} // Optional control point, can be an array or a vec3
-          color="#aa3333" // Default
+          color="#DD1C1A" // Default
           lineWidth={5} // In pixels (default)
           dashed={false} // Default
         /> */}

pages/index.tsx

@@ -13,6 +13,10 @@ 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"},
 ];
 
 const defaultInferenceResults = [
@@ -125,7 +129,7 @@ export default function Home() {
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <div className="bg-sky-900 flex flex-row min-h-screen text-white">
+      <div className="bg-[#0A2342] flex flex-row min-h-screen text-white">
         <div className="w-1/3 min-h-screen">
           <ThreeCanvas
             paused={paused}