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

components/PromptEntry.tsx

@@ -2,12 +2,13 @@ import { NextComponentType } from 'next'
 
 interface PromptEntryProps {
     prompt: string
+    className: string
 }
 
 const PromptEntry = (props: PromptEntryProps) => {  
     return (
       <>
-        <p className="pb-32 text-lg text-gray-400">
+        <p className={props.className}>
             {props.prompt}
         </p>
       </>

components/PromptPanel.tsx

@@ -3,7 +3,7 @@ import PromptEntry from './PromptEntry'
 import { PromptInput } from "../types";
 interface PromptPanelProps {
     prompts: PromptInput[];
-    addPrompt: (prompt: string, seed: number) => void;
+    addPrompt: (prompt: string) => void;
 }
 
 const PromptPanel = (props: PromptPanelProps) => {
@@ -14,27 +14,36 @@ const PromptPanel = (props: PromptPanelProps) => {
         <>
             <main className="w-2/3 min-h-screen p-4">
                 <div className="pl-20 pt-10">
-                    <PromptEntry prompt={"yo"}/>
-                    <p className="pb-32 text-xl text-gray-300">
-                        Taylor Swift singing with a tropical beat
-                    </p>
-                    <p className="pb-32 text-3xl text-white">Justin Bieber Anger Rap</p>
-                    <p className="pb-32 text-m text-gray-400">
-                        new york city rap, with a dust storm, cinematic score, dramatic,
-                        composition, tons of energy, brutalistic
-                    </p>
+                    {prompts.map((prompt, index) => (
+                        <PromptEntry prompt={prompt.prompt} className={promptEntryClassNames[index]} key={index} />
+                    ))}
+
+                    <form onSubmit={(e) => {
+                        e.preventDefault();
+                        const prompt = e.currentTarget.prompt.value;
+                        addPrompt(prompt);
+                    }}>
+                        <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"
+                            type="text"
+                            id="prompt"
+                            name="prompt"
+                            placeholder="What do you want to hear?"
+                        />
+                    </form>
                 </div>
             </main>
-
-            <input
-                className="fixed z-90 bottom-20 right-40 w-1/2 h-12 pl-3 text-xl text-black"
-                type="text"
-                id="prompt"
-                name="prompt"
-                placeholder="What do you want to hear?"
-            />
         </>
     )
 }
 
 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.
+// 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",
+}

pages/index.tsx

@@ -11,8 +11,8 @@ import { InferenceResult, PromptInput } from "../types";
 import * as Tone from "tone";
 
 const defaultPromptInputs = [
-  { prompt: "A jazz pianist playing a classical concerto", seed: 10 },
-  { prompt: "Taylor Swift singing with a tropical beat", seed: 10 },
+  { prompt: "A jazz pianist playing a classical concerto"},
+  { prompt: "Taylor Swift singing with a tropical beat"},
 ];
 
 const defaultInferenceResults = [
@@ -101,8 +101,8 @@ export default function Home() {
 
         <PromptPanel
           prompts={promptInputs}
-          addPrompt={(prompt: string, seed: number) => {
-            setPromptInputs([...promptInputs, { prompt: prompt, seed: seed }]);
+          addPrompt={(prompt: string) => {
+            setPromptInputs([...promptInputs, { prompt: prompt}]);
           }}
         />
 

types.ts

@@ -1,6 +1,6 @@
 export interface PromptInput {
     prompt: string;
-    seed: number;
+    seed?: number;
     denoising?: number;
     guidance?: number;
 }