WIP promptEntry and formatting

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={"A Jazz pianist playing a classical concreto"}/>
-                    <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} />
+                    ))}
                 </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?"
-            />
+            <form onSubmit={(e) => {
+                e.preventDefault();
+                const prompt = e.currentTarget.prompt.value;
+                addPrompt(prompt);
+            }}>
+                <input
+                    className="fixed z-90 bottom-20 right-1/4 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>
         </>
     )
 }
 
 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

@@ -9,8 +9,8 @@ import Pause from "../components/Pause";
 import { InferenceResult, PromptInput } from "../types";
 
 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"},
 ];
 
 export default function Home() {
@@ -37,8 +37,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;
 }