work on a new approach: generate small chunks of a story instead of big one

src/app/main.tsx

@@ -11,6 +11,7 @@ import { getStory } from "./queries/getStory"
 import { BottomBar } from "./interface/bottom-bar"
 import { Page } from "./interface/page"
 import { LLMResponse } from "@/types"
+import { joinWords } from "@/lib/joinWords"
 
 export default function Main() {
   const [_isPending, startTransition] = useTransition()
@@ -50,14 +51,7 @@ export default function Main() {
       try {
         llmResponse = await getStory({
           preset,
-          prompt: [
-            `${userStoryPrompt}`,
-
-            // not necessary + it confuses the LLM if we use custom 
-            // + the LLM may reject some of the styles
-            // stylePrompt ? `in the following context: ${stylePrompt}` : ''
-
-          ].map(x => x.trim()).filter(x => x).join(", "),
+          prompt: joinWords([ userStoryPrompt ]),
           nbTotalPanels
         })
         console.log("LLM responded:", llmResponse)
@@ -70,11 +64,11 @@ export default function Main() {
         for (let p = 0; p < nbTotalPanels; p++) {
           llmResponse.push({
             panel: p,
-            instructions: [
+            instructions: joinWords([
               stylePrompt,
               userStoryPrompt,
               `${".".repeat(p)}`,
-            ].map(x => x.trim()).filter(x => x).join(", "),
+            ]),
             caption: "(Sorry, LLM generation failed: using degraded mode)"
           })
         }
@@ -89,15 +83,15 @@ export default function Main() {
       }
 
       // new experimental prompt: let's drop the user prompt, and only use the style
-      const lightPanelPromptPrefix = preset.imagePrompt(limitedStylePrompt).map(x => x.trim()).filter(x => x).join(", ")
+      const lightPanelPromptPrefix = joinWords(preset.imagePrompt(limitedStylePrompt))
 
       // this prompt will be used if the LLM generation failed
-      const degradedPanelPromptPrefix = [
+      const degradedPanelPromptPrefix = joinWords([
         ...preset.imagePrompt(limitedStylePrompt),
 
         // we re-inject the story, then
-        userStoryPrompt.trim(),
-      ].filter(x => x).join(", ")
+        userStoryPrompt
+      ])
 
       const newPanels: string[] = []
       const newCaptions: string[] = []
@@ -105,7 +99,7 @@ export default function Main() {
       console.log("Panel prompts for SDXL:")
       for (let p = 0; p < nbTotalPanels; p++) {
         newCaptions.push(llmResponse[p]?.caption.trim() || "...")
-        const newPanel = [
+        const newPanel = joinWords([
 
           // what we do here is that ideally we give full control to the LLM for prompting,
           // unless there was a catastrophic failure, in that case we preserve the original prompt
@@ -113,8 +107,8 @@ export default function Main() {
           ? lightPanelPromptPrefix
           : degradedPanelPromptPrefix,
 
-          llmResponse[p]?.instructions || ""
-        ].map(x => x.trim()).filter(x => x).join(", ")
+          llmResponse[p]?.instructions
+        ])
         newPanels.push(newPanel)
         console.log(newPanel)
       }

src/app/queries/getStory.ts

@@ -37,7 +37,7 @@ export const getStory = async ({
       role: "user",
       content: `The story is: ${prompt}`,
     }
-  ]) + "[{"
+  ]) + "\n[{"
 
 
   let result = ""

src/app/queries/getStoryContinuation.ts

@@ -0,0 +1,96 @@
+
+import { dirtyLLMJsonParser } from "@/lib/dirtyLLMJsonParser"
+import { dirtyCaptionCleaner } from "@/lib/dirtyCaptionCleaner"
+
+import { predict } from "./predict"
+import { Preset } from "../engine/presets"
+import { LLMResponse } from "@/types"
+import { cleanJson } from "@/lib/cleanJson"
+import { createZephyrPrompt } from "@/lib/createZephyrPrompt"
+
+export const getStoryContinuation = async ({
+  preset,
+  prompt = "",
+  nbTotalPanels = 2,
+  previousCaptions = [],
+}: {
+  preset: Preset;
+  prompt: string;
+  nbTotalPanels: number;
+  previousCaptions: string[];
+}): Promise<LLMResponse> => {
+  // throw new Error("Planned maintenance")
+  
+  // In case you need to quickly debug the RENDERING engine you can uncomment this:
+  // return mockLLMResponse
+
+  const previousCaptionsTemplate = previousCaptions.length
+    ? `To help you, here are the previous panels and their captions (note: if you see an anomaly here eg. no caption or the same description repeated multiple times, do not hesitate to fix the story): ${JSON.stringify(previousCaptions, null, 2)}`
+    : ''
+
+  const query = createZephyrPrompt([
+    {
+      role: "system",
+      content: [
+        `You are a writer specialized in ${preset.llmPrompt}`,
+        `Please write detailed drawing instructions and a short (2-3 sentences long) speech caption for the next ${nbTotalPanels} panels of a new story, but keep it open-ended (it will be continued and expanded later). Please make sure each of those ${nbTotalPanels} panels include info about character gender, age, origin, clothes, colors, location, lights, etc.`,
+        `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 narrative captions, don't add your own comments. The captions must be captivating, smart, entertaining. Be straight to the point, and never reply things like "Sure, I can.." etc. Reply using valid JSON.`
+      ].filter(item => item).join("\n")
+    },
+    {
+      role: "user",
+      content: `The story is about: ${prompt}.${previousCaptionsTemplate}`,
+    }
+  ]) + "\n[{"
+
+
+  let result = ""
+
+  try {
+    // console.log(`calling predict(${query}, ${nbTotalPanels})`)
+    result = `${await predict(query, nbTotalPanels) || ""}`.trim()
+    if (!result.length) {
+      throw new Error("empty result!")
+    }
+  } catch (err) {
+    // console.log(`prediction of the story failed, trying again..`)
+    try {
+      result = `${await predict(query+".", nbTotalPanels) || ""}`.trim()
+      if (!result.length) {
+        throw new Error("empty result!")
+      }
+    } catch (err) {
+      console.error(`prediction of the story failed again 💩`)
+      throw new Error(`failed to generate the story ${err}`)
+    }
+  }
+
+  // console.log("Raw response from LLM:", result)
+  const tmp = cleanJson(result)
+  
+  let llmResponse: LLMResponse = []
+
+  try {
+    llmResponse = dirtyLLMJsonParser(tmp)
+  } catch (err) {
+    // console.log(`failed to read LLM response: ${err}`)
+    // console.log(`original response was:`, result)
+
+      // in case of failure here, it might be because the LLM hallucinated a completely different response,
+      // such as markdown. There is no real solution.. but we can try a fallback:
+
+    llmResponse = (
+      tmp.split("*")
+      .map(item => item.trim())
+      .map((cap, i) => ({
+        panel: i,
+        caption: cap,
+        instructions: cap,
+      }))
+    )
+  }
+
+  return llmResponse.map(res => dirtyCaptionCleaner(res))
+}

src/lib/createZephyrPrompt.ts

@@ -7,7 +7,6 @@
   /**
    * Formats the messages for the chat with the LLM model in the style of a pirate.
    * @param messages - Array of message objects with role and content.
-   * @param systemMessage - The system's initial instructions, defaulted to a friendly pirate-style chatbot.
    * @returns The formatted chat prompt.
    */
   export function createZephyrPrompt(messages: Message[]): string {

src/lib/joinWords.ts

@@ -0,0 +1,6 @@
+// clean a list of words (which may be null, undefined or empty)
+// into one clean string of separator-divided (by default comma-separated) words
+// the words will be trimmed, and empty elements will be removed
+export function joinWords(inputs: any[] = [], separator = ", "): string {
+  return inputs.map(x => `${x || ""}`.trim()).filter(x => x).join(separator)
+}