fix the dual prompting system

src/app/interface/top-menu/index.tsx

@@ -59,11 +59,15 @@ export function TopMenu() {
   const requestedPrompt = (searchParams?.get('prompt') as string) || ""
   const requestedLayout = (searchParams?.get('layout') as LayoutName) || defaultLayout
 
-  const [draftPrompt, setDraftPrompt] = useState(requestedPrompt)
+  const [draftPromptA, setDraftPromptA] = useState(requestedPrompt)
+  const [draftPromptB, setDraftPromptB] = useState(requestedPrompt)
+  const draftPrompt = `${draftPromptA}||${draftPromptB}`
+
   const [draftPreset, setDraftPreset] = useState<PresetName>(requestedPreset)
   const [draftLayout, setDraftLayout] = useState<LayoutName>(requestedLayout)
 
   const handleSubmit = () => {
+
     const promptChanged = draftPrompt.trim() !== prompt.trim()
     const presetChanged = draftPreset !== preset.id
     const layoutChanged = draftLayout !== layout
@@ -195,22 +199,38 @@ export function TopMenu() {
           `transition-all duration-200 ease-in-out`,
           `flex  flex-grow flex-col space-y-2 md:space-y-0 md:flex-row items-center md:space-x-3 font-mono w-full md:w-auto`
         )}>
+        <div className="flex flex-row flex-grow w-full">
           <div className="flex flex-row flex-grow w-full">
-        <Input
-          placeholder="Story"
-          className="w-full bg-neutral-300 text-neutral-800 dark:bg-neutral-300 dark:text-neutral-800 rounded-r-none"
-          // disabled={atLeastOnePanelIsBusy}
-          onChange={(e) => {
-            setDraftPrompt(e.target.value)
-          }}
-          onKeyDown={({ key }) => {
-            if (key === 'Enter') {
-              handleSubmit()
-            }
-          }}
-          value={draftPrompt}
-         />
-        <Button
+            <Input
+              placeholder="1. style and theme.."
+              className="w-1/2 bg-neutral-300 text-neutral-800 dark:bg-neutral-300 dark:text-neutral-800 rounded-r-none"
+              // disabled={atLeastOnePanelIsBusy}
+              onChange={(e) => {
+                setDraftPromptA(e.target.value)
+              }}
+              onKeyDown={({ key }) => {
+                if (key === 'Enter') {
+                  handleSubmit()
+                }
+              }}
+              value={draftPromptA}
+            />
+            <Input
+              placeholder="2. add a story.."
+              className="w-1/2 bg-neutral-300 text-neutral-800 dark:bg-neutral-300 dark:text-neutral-800 rounded-l-none rounded-r-none"
+              // disabled={atLeastOnePanelIsBusy}
+              onChange={(e) => {
+                setDraftPromptB(e.target.value)
+              }}
+              onKeyDown={({ key }) => {
+                if (key === 'Enter') {
+                  handleSubmit()
+                }
+              }}
+              value={draftPromptB}
+            />
+          </div>
+          <Button
           className={cn(
             `rounded-l-none cursor-pointer`,
             `transition-all duration-200 ease-in-out`,

src/app/main.tsx

@@ -45,8 +45,15 @@ export default function Main() {
 
       let llmResponse: LLMResponse = []
 
+      const [stylePrompt, userStoryPrompt] = prompt.split("||")
+
       try {
-        llmResponse = await getStory({ preset, prompt, nbTotalPanels })
+        llmResponse = await getStory({
+          preset,
+          prompt: [
+            `${userStoryPrompt}`,
+            stylePrompt ? `in the following context: ${stylePrompt}` : ''
+          ].filter(x => x).join(", "), nbTotalPanels })
         console.log("LLM responded:", llmResponse)
 
       } catch (err) {
@@ -66,14 +73,19 @@ export default function Main() {
 
       // we have to limit the size of the prompt, otherwise the rest of the style won't be followed
 
-      let limitedPrompt = prompt.slice(0, 77)
-      if (limitedPrompt.length !== prompt.length) {
-        console.log("Sorry folks, the prompt was cut to:", limitedPrompt)
+      let limitedStylePrompt = stylePrompt.slice(0, 77)
+      if (limitedStylePrompt.length !== stylePrompt.length) {
+        console.log("Sorry folks, the style prompt was cut to:", limitedStylePrompt)
       }
 
       // new experimental prompt: let's drop the user prompt!
       const lightPanelPromptPrefix = preset.imagePrompt("").filter(x => x).join(", ")
-      const degradedPanelPromptPrefix = preset.imagePrompt(limitedPrompt).filter(x => x).join(", ")
+
+      // this prompt will be used if the LLM generation failed
+      const degradedPanelPromptPrefix = [
+        ...preset.imagePrompt(limitedStylePrompt),
+        userStoryPrompt,
+      ].filter(x => x).join(", ")
 
       const newPanels: string[] = []
       const newCaptions: string[] = []

src/app/queries/getStory.ts

@@ -27,7 +27,7 @@ export const getStory = async ({
       role: "system",
       content: [
         `You are a writer specialized in ${preset.llmPrompt}`,
-        `Please write detailed drawing instructions and a one-sentence short caption for the ${nbTotalPanels} panels of a new silent story. Please make sure each of the ${nbTotalPanels} panels include info about character gender, age, origin, clothes, colors, location, lights, etc.`,
+        `Please write detailed drawing instructions and a one-sentence short caption for the ${nbTotalPanels} panels of a new silent story. Please make sure each of the ${nbTotalPanels} panels include info about character gender, age, origin, clothes, colors, location, lights, etc. Also include the main theme.`,
         `Give your response as a VALID JSON array like this: \`Array<{ panel: number; instructions: string; caption: string}>\`.`,
         // `Give your response as Markdown bullet points.`,
         `Be brief in your ${nbTotalPanels} instructions and captions, don't add your own comments. Be straight to the point, and never reply things like "Sure, I can.." etc. Reply using valid JSON.`