the number of pages can now be controlled by the

.env

@@ -14,7 +14,7 @@ RENDERING_ENGINE="INFERENCE_API"
 LLM_ENGINE="INFERENCE_API"
 
 # set this to control the number of pages
-MAX_NB_PAGES=1
+MAX_NB_PAGES=2
 
 # Set to "true" to create artificial delays and smooth out traffic
 NEXT_PUBLIC_ENABLE_RATE_LIMITER="false"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbilcke/comic-factory",
-  "version": "0.0.0",
+  "version": "1.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/app/interface/about/index.tsx

@@ -1,8 +1,14 @@
+import { useState } from "react"
+
 import { Button } from "@/components/ui/button"
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
-import { useState } from "react"
+
 import { Login } from "../login"
 
+const APP_NAME = `AI Comic Factory`
+const APP_VERSION = `1.1`
+const APP_RELEASE_DATE = `March 2024`
+
 export function About() {
   const [isOpen, setOpen] = useState(false)
 
@@ -10,34 +16,34 @@ export function About() {
     <Dialog open={isOpen} onOpenChange={setOpen}>
       <DialogTrigger asChild>
         <Button variant="outline">
-          <span className="hidden md:inline">AI-Comic-Factory 1.0</span>
-          <span className="inline md:hidden">Version 1.0</span>
+          <span className="hidden md:inline">{APP_NAME.replaceAll(" ", "-")} {APP_VERSION}</span>
+          <span className="inline md:hidden">Version {APP_VERSION}</span>
         </Button>
       </DialogTrigger>
-      <DialogContent className="sm:max-w-[425px] md:max-w-[600px]">
+      <DialogContent className="w-full sm:max-w-[500px] md:max-w-[600px] overflow-y-scroll h-[100vh] sm:h-[550px]">
         <DialogHeader>
-          <DialogTitle>AI Comic Factory 1.0</DialogTitle>
+          <DialogTitle>{APP_NAME} {APP_VERSION}</DialogTitle>
           <DialogDescription className="w-full text-center text-2xl font-bold text-stone-700">
-            AI Comic Factory 1.0 (March 2024 Update)
+          {APP_NAME} {APP_VERSION} ({APP_RELEASE_DATE})
           </DialogDescription>
         </DialogHeader>
         <div className="grid gap-4 py-4 text-stone-700 text-sm md:text-base xl:text-lg">
           <p className="">
-            The AI Comic Factory generates stories using AI in a few clicks.
+            The {APP_NAME} generates stories using AI in a few clicks.
           </p>
           <p>
-            App is free for Hugging Face users 👉 <Login />
-         </p>
-         <p className="pt-2 pb-2">
-           Are you an artist? Learn <a className="text-stone-600 underline" href="https://huggingface.co/spaces/jbilcke-hf/ai-comic-factory/discussions/402#654ab848fa25dfb780aa19fb" target="_blank">how to use your own art style</a>
-         </p>
-         <p>
-         👉 Default AI model used for stories is <a className="text-stone-600 underline" href="https://huggingface.co/HuggingFaceH4/zephyr-7b-beta" target="_blank">Zephyr-7b-beta</a>
-         </p>
-         <p>
-         👉 Default AI model used for drawing is <a className="text-stone-600 underline" href="https://huggingface.co/stabilityai/stable-diffusion-xl-base-1.0" target="_blank">SDXL</a> by Stability AI
-        </p>
-        <p className="pt-2 pb-2">
+            The app is free for Hugging Face users 👉 <Login />
+          </p>
+          <p className="pt-2 pb-2">
+            Are you an artist? Learn <a className="text-stone-600 underline" href="https://huggingface.co/spaces/jbilcke-hf/ai-comic-factory/discussions/402#654ab848fa25dfb780aa19fb" target="_blank">how to use your own art style</a>
+          </p>
+          <p>
+          👉 Default AI model used for stories is <a className="text-stone-600 underline" href="https://huggingface.co/HuggingFaceH4/zephyr-7b-beta" target="_blank">Zephyr-7b-beta</a>
+          </p>
+          <p>
+          👉 Default AI model used for drawing is <a className="text-stone-600 underline" href="https://huggingface.co/stabilityai/stable-diffusion-xl-base-1.0" target="_blank">SDXL</a> by Stability AI
+          </p>
+          <p className="pt-2 pb-2">
            This is an open-source project, see the <a className="text-stone-600 underline" href="https://huggingface.co/spaces/jbilcke-hf/ai-comic-factory/blob/main/README.md" target="_blank">README</a> for more info.
          </p>
         </div>

src/app/interface/bottom-bar/bottom-bar.tsx

@@ -14,13 +14,16 @@ import { localStorageKeys } from "../settings-dialog/localStorageKeys"
 import { defaultSettings } from "../settings-dialog/defaultSettings"
 
 function BottomBar() {
-  const download = useStore(state => state.download)
+  // deprecated, as HTML-to-bitmap didn't work that well for us
+  // const page = useStore(state => state.page)
+  // const download = useStore(state => state.download)
+  // const pageToImage = useStore(state => state.pageToImage)
+
   const isGeneratingStory = useStore(state => state.isGeneratingStory)
   const prompt = useStore(state => state.prompt)
   const panelGenerationStatus = useStore(state => state.panelGenerationStatus)
-  const page = useStore(state => state.page)
+
   const preset = useStore(state => state.preset)
-  const pageToImage = useStore(state => state.pageToImage)
 
   const allStatus = Object.values(panelGenerationStatus)
   const remainingImages = allStatus.reduce((acc, s) => (acc + (s ? 1 : 0)), 0)

src/app/interface/page/index.tsx

@@ -6,11 +6,13 @@ import { allLayoutAspectRatios, allLayouts } from "@/app/layouts"
 import { useStore } from "@/app/store"
 import { cn } from "@/lib/utils"
 
-export function Page({ page }: { page: number}) {
+export function Page({ page }: { page: number }) {
   const zoomLevel = useStore(state => state.zoomLevel)
   const layouts = useStore(state => state.layouts)
 
-  const layout = layouts[page]
+  // attention: here we use a fallback to layouts[0]
+  // if no predetermined layout exists for this page number
+  const layout = layouts[page] || layouts[0]
 
   const LayoutElement = (allLayouts as any)[layout]
   const aspectRatio = ((allLayoutAspectRatios as any)[layout] as string) || "aspect-[250/297]"
@@ -28,19 +30,16 @@ export function Page({ page }: { page: number}) {
     // Layout4: currentNbPanelsPerPage
   }
 
-  const currentNbPanels = ((allLayoutsNbPanels as any)[layout] as number) || currentNbPanelsPerPage
+  // it's a bit confusing and too rigid we can't change the layouts for each panel,
+  // I should refactor this
+  const panelsPerPage = ((allLayoutsNbPanels as any)[layout] as number) || currentNbPanelsPerPage
 
+
+  // I think we should deprecate this part
+  // this was used to keep track of the page HTML element,
+  // for use with a HTML-to-bitmap library
+  // but the CSS layout wasn't followed properly and it depended on the zoom level
   /*
-  const [canLoad, setCanLoad] = useState(false)
-  useEffect(() => {
-    if (prompt?.length) {
-      setCanLoad(false)
-      setTimeout(() => {
-        setCanLoad(true)
-      }, page * 4000)
-    }
-  }, [prompt])
-  */
 
   const setPage = useStore(state => state.setPage)
   const pageRef = useRef<HTMLDivElement>(null)
@@ -50,18 +49,13 @@ export function Page({ page }: { page: number}) {
     if (!element) { return }
     setPage(element)
   }, [pageRef.current])
-  
-  /*
-  console.log("PAGE DEBUG:", {
-    currentNbPages,
-    maxNbPages,
-    "currentNbPages < maxNbPages": currentNbPages < maxNbPages,
-  })
   */
- 
+
+
   return (
     <div
-      ref={pageRef}
+      // deprecated
+      // ref={pageRef}
       className={cn(
         `w-full`,
         `print:w-screen`,
@@ -86,14 +80,16 @@ export function Page({ page }: { page: number}) {
         // marginLeft: `${zoomLevel > 100 ? `100`}`
       }}
       >
-       <LayoutElement page={page} nbPanels={currentNbPanels} />
+       <LayoutElement page={page} nbPanels={panelsPerPage} />
       </div>
       {currentNbPages > 1 &&
         <p className="w-full text-center pt-4 font-sans text-2xs font-semibold text-stone-600">
-          Page {page + 1}
+          {page + 1}/{maxNbPages}
           {/*
-          alternative style:
-          Page {page + 1} / {nbPages}
+          alternative styles:
+          Page {page + 1}
+          Page {page + 1} / {maxNbPages}
+          {page + 1} / {maxNbPages}
           */}
         </p>}
     </div>

src/app/interface/panel/index.tsx

@@ -44,11 +44,12 @@ export function Panel({
   // index of the panel in the whole app
   const panelIndex = page * nbPanels + panel
 
-  // console.log("debug:", { page, nbPanels, panel })
+
   // the panel Id must be unique across all pages
   const panelId = `${panelIndex}`
 
-  // console.log("panelId: " + panelId)
+  // console.log(`panel/index.tsx: <Panel panelId=${panelId}> rendered again!`)
+
 
   const [mouseOver, setMouseOver] = useState(false)
   const ref = useRef<HTMLImageElement>(null)
@@ -94,6 +95,18 @@ export function Panel({
   
   let delay = enableRateLimiter ? (1000 + (500 * panelIndex)) : 1000
 
+  /*
+  console.log("panel/index.tsx: DEBUG: " + JSON.stringify({
+    page,
+    nbPanels,
+    panel,
+    panelIndex,
+    panelId,
+    revision,
+    renderedScenes: Object.keys(renderedScenes),
+  }, null, 2))
+  */
+
   // Let's be gentle with Replicate or else they will believe they are under attack
   if (renderingModelVendor === "REPLICATE") {
     delay += 8000
@@ -117,6 +130,7 @@ export function Panel({
     nbFrames: number
     revision: number
   }) => {
+    console.log(`panel/index.tsx: startImageGeneration(${JSON.stringify({ prompt, width, height, nbFrames, revision }, null, 2)})`)
     if (!prompt?.length) { return }
 
     // important: update the status, and clear the scene
@@ -133,7 +147,7 @@ export function Panel({
         // atrocious and very, very, very, very, very, very, very ugly hack for the Inference API
         // as apparently "use_cache: false" doesn't work, or doesn't do what we want it to do
         let cacheInvalidationHack = ""
-        const nbMaxRevisions = 10
+        const nbMaxRevisions = 20
         for (let i = 0; i < revision && revision < nbMaxRevisions; i++) {
           const j =  Math.random() 
           cacheInvalidationHack += j < 0.3 ? "_" : j < 0.6 ? "," : "-"

src/app/interface/settings-dialog/index.tsx

@@ -87,35 +87,35 @@ export function SettingsDialog() {
       <DialogTrigger asChild>
         <Button className="space-x-1 md:space-x-2">
           <div>
-            <span className="hidden md:inline">Custom models</span>
+            <span className="hidden md:inline">Settings</span>
           </div>
         </Button> 
       </DialogTrigger>
-      <DialogContent className="w-full sm:max-w-[500px] md:max-w-[700px] overflow-y-auto h-max-[100vh] md:h-max-[80vh]">
+      <DialogContent className="w-full sm:max-w-[500px] md:max-w-[700px]">
         <DialogHeader>
           <DialogDescription className="w-full text-center text-lg font-bold text-stone-800">
-            Custom Models
+            Settings
           </DialogDescription>
         </DialogHeader>
-        {
-        // isConfigReady && <Field>
-        // <Label>Maximum number of pages: {userDefinedMaxNumberOfPages}</Label>
-        // <Slider
-        //   min={1}
-        //   max={maxNbPages}
-        //   step={1}
-        //   onValueChange={(value: any) => {
-        //     let numericValue = Number(value[0])
-        //     numericValue = !isNaN(value[0]) && isFinite(value[0]) ? numericValue : 0
-        //     numericValue = Math.min(maxNbPages, Math.max(1, numericValue))
-        //     setUserDefinedMaxNumberOfPages(numericValue)
-        //   }}
-        //   defaultValue={[userDefinedMaxNumberOfPages]}
-        //   value={[userDefinedMaxNumberOfPages]}
-        // />
-        // </Field>
+        <div className="overflow-y-scroll h-[75vh] md:h-[70vh]">
+        {isConfigReady && <Field>
+          <Label>(new!) Control the number of pages: {userDefinedMaxNumberOfPages}</Label>
+          <Slider
+            min={1}
+            max={maxNbPages}
+            step={1}
+            onValueChange={(value: any) => {
+              let numericValue = Number(value[0])
+              numericValue = !isNaN(value[0]) && isFinite(value[0]) ? numericValue : 0
+              numericValue = Math.min(maxNbPages, Math.max(1, numericValue))
+              setUserDefinedMaxNumberOfPages(numericValue)
+            }}
+            defaultValue={[userDefinedMaxNumberOfPages]}
+            value={[userDefinedMaxNumberOfPages]}
+          />
+        </Field>
         }
-        <div className="grid gap-4 py-1 space-y-1 text-stone-800">
+        <div className="grid gap-4 pt-8 pb-1 space-y-1 text-stone-800">
           <Field>
             <Label>Image rendering provider:</Label>
             <p className="pt-2 pb-3 text-base italic text-zinc-600">
@@ -301,6 +301,8 @@ export function SettingsDialog() {
             </p>
         </div>
 
+        </div>
+
         <DialogFooter>
           <Button type="submit" onClick={() => setOpen(false)}>Close</Button>
         </DialogFooter>

src/app/interface/sign-up-cta/sign-up-cta.tsx

@@ -7,7 +7,7 @@ function SignUpCTA() {
   return (
     <div className={cn(
       `print:hidden`,
-      `fixed flex flex-col items-center bottom-8 top-28 right-2 md:top-17 md:right-6 z-10`,
+      `fixed flex flex-col items-center bottom-24 top-28 right-2 md:top-17 md:right-6 z-10`,
     )}>
       <div className="font-bold text-sm pb-2 text-stone-600 bg-stone-50  dark:text-stone-600 dark:bg-stone-50 p-1 rounded-sm">
         anonymous users can generate 1 comic.<br/> <span

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

@@ -51,6 +51,9 @@ export function TopMenu() {
   const setShowCaptions = useStore(state => state.setShowCaptions)
   const showCaptions = useStore(state => state.showCaptions)
 
+  const currentNbPages = useStore(state => state.currentNbPages)
+  const setCurrentNbPages = useStore(state => state.setCurrentNbPages)
+
   const generate = useStore(state => state.generate)
 
   const isGeneratingStory = useStore(state => state.isGeneratingStory)
@@ -102,7 +105,7 @@ export function TopMenu() {
       setShowAuthWall(true)
       return
     }
-    
+
     const promptChanged = draftPrompt.trim() !== prompt.trim()
     const presetChanged = draftPreset !== preset.id
     const layoutChanged = draftLayout !== layout

src/app/main.tsx

@@ -1,11 +1,14 @@
 "use client"
 
-import { Suspense, useEffect, useState, useTransition } from "react"
+import { Suspense, useEffect, useRef, useState, useTransition } from "react"
+import { useLocalStorage } from "usehooks-ts"
 
 import { cn } from "@/lib/utils"
 import { fonts } from "@/lib/fonts"
 import { GeneratedPanel } from "@/types"
 import { joinWords } from "@/lib/joinWords"
+import { useDynamicConfig } from "@/lib/useDynamicConfig"
+import { Button } from "@/components/ui/button"
 
 import { TopMenu } from "./interface/top-menu"
 import { useStore } from "./store"
@@ -13,12 +16,10 @@ import { Zoom } from "./interface/zoom"
 import { BottomBar } from "./interface/bottom-bar"
 import { Page } from "./interface/page"
 import { getStoryContinuation } from "./queries/getStoryContinuation"
-import { useDynamicConfig } from "@/lib/useDynamicConfig"
-import { useLocalStorage } from "usehooks-ts"
 import { localStorageKeys } from "./interface/settings-dialog/localStorageKeys"
 import { defaultSettings } from "./interface/settings-dialog/defaultSettings"
-import { Button } from "@/components/ui/button"
 import { SignUpCTA } from "./interface/sign-up-cta"
+import { sleep } from "@/lib/sleep"
 
 export default function Main() {
   const [_isPending, startTransition] = useTransition()
@@ -31,10 +32,9 @@ export default function Main() {
   const preset = useStore(s => s.preset)
   const prompt = useStore(s => s.prompt)
 
-  const currentNbPanelsPerPage = useStore(s => s.currentNbPanelsPerPage)
-  const maxNbPanelsPerPage = useStore(s => s.maxNbPanelsPerPage)
   const currentNbPages = useStore(s => s.currentNbPages)
   const maxNbPages = useStore(s => s.maxNbPages)
+  const previousNbPanels = useStore(s => s.previousNbPanels)
   const currentNbPanels = useStore(s => s.currentNbPanels)
   const maxNbPanels = useStore(s => s.maxNbPanels)
 
@@ -42,10 +42,14 @@ export default function Main() {
   const setMaxNbPanelsPerPage = useStore(s => s.setMaxNbPanelsPerPage)
   const setCurrentNbPages = useStore(s => s.setCurrentNbPages)
   const setMaxNbPages = useStore(s => s.setMaxNbPages)
-  const setCurrentNbPanels = useStore(s => s.setCurrentNbPanels)
-  const setMaxNbPanels = useStore(s => s.setMaxNbPanels)
 
+  const panels = useStore(s => s.panels)
   const setPanels = useStore(s => s.setPanels)
+
+  // do we need those?
+  const renderedScenes = useStore(s => s.renderedScenes)
+  const captions = useStore(s => s.captions)
+
   const setCaptions = useStore(s => s.setCaptions)
 
   const zoomLevel = useStore(s => s.zoomLevel)
@@ -57,6 +61,35 @@ export default function Main() {
     defaultSettings.userDefinedMaxNumberOfPages
   )
   
+  const numberOfPanels = Object.keys(panels).length
+  const panelGenerationStatus = useStore(state => state.panelGenerationStatus)
+  const allStatus = Object.values(panelGenerationStatus)
+  const numberOfPendingGenerations = allStatus.reduce((acc, s) => (acc + (s ? 1 : 0)), 0)
+
+  const hasAtLeastOnePage = numberOfPanels > 0
+
+  const hasNoPendingGeneration =
+    numberOfPendingGenerations === 0
+
+  const hasStillMorePagesToGenerate =
+    currentNbPages < maxNbPages
+
+  const showNextPageButton =
+    hasAtLeastOnePage &&
+    hasNoPendingGeneration &&
+    hasStillMorePagesToGenerate
+  
+  /*
+  console.log("<Main>: " + JSON.stringify({
+    currentNbPages,
+    hasAtLeastOnePage,
+    numberOfPendingGenerations,
+    hasNoPendingGeneration,
+    hasStillMorePagesToGenerate,
+    showNextPageButton
+  }, null, 2))
+  */
+  
   useEffect(() => {
     if (maxNbPages !== userDefinedMaxNumberOfPages) {
       setMaxNbPages(userDefinedMaxNumberOfPages)
@@ -64,6 +97,14 @@ export default function Main() {
   }, [maxNbPages, userDefinedMaxNumberOfPages])
 
 
+  const ref = useRef({
+    existingPanels: [] as GeneratedPanel[],
+    newPanelsPrompts: [] as string[],
+    newCaptions: [] as string[],
+    prompt: "",
+    preset: "",
+  })
+
   useEffect(() => {
     if (isConfigReady) {
 
@@ -76,15 +117,30 @@ export default function Main() {
 
   // react to prompt changes
   useEffect(() => {
+    // console.log(`main.tsx: asked to re-generate!!`)
     if (!prompt) { return }
 
+    // if the prompt or preset changed, we clear the cache
+    // this part is important, otherwise when trying to change the prompt
+    // we wouldn't still have remnants of the previous comic
+    // in the data sent to the LLM (also the page cursor would be wrong)
+    if (
+      prompt !== ref.current.prompt || 
+      preset?.label !== ref.current.preset) {
+      // console.log("overwriting ref.current!")
+      ref.current = {
+        existingPanels: [],
+        newPanelsPrompts: [],
+        newCaptions: [],
+        prompt,
+        preset: preset?.label || "",
+      }
+    }
+
     startTransition(async () => {
       setWaitABitMore(false)
       setGeneratingStory(true)
 
-      // I don't think we are going to need a rate limiter on the LLM part anymore
-      const enableRateLimiter = false // `${process.env.NEXT_PUBLIC_ENABLE_RATE_LIMITER}`  === "true"
-
       const [stylePrompt, userStoryPrompt] = prompt.split("||").map(x => x.trim())
 
       // we have to limit the size of the prompt, otherwise the rest of the style won't be followed
@@ -95,25 +151,30 @@ export default function Main() {
       }
     
       // new experimental prompt: let's drop the user prompt, and only use the style
-      const lightPanelPromptPrefix = joinWords(preset.imagePrompt(limitedStylePrompt))
+      const lightPanelPromptPrefix: string = joinWords(preset.imagePrompt(limitedStylePrompt))
     
       // this prompt will be used if the LLM generation failed
-      const degradedPanelPromptPrefix = joinWords([
+      const degradedPanelPromptPrefix: string = joinWords([
         ...preset.imagePrompt(limitedStylePrompt),
     
         // we re-inject the story, then
         userStoryPrompt
       ])
 
-      let existingPanels: GeneratedPanel[] = []
-      const newPanelsPrompts: string[] = []
-      const newCaptions: string[] = []
-
       // we always generate panels 2 by 2
       const nbPanelsToGenerate = 2
 
+      /*
+      console.log("going to call getStoryContinuation based on: " + JSON.stringify({
+        previousNbPanels,
+        currentNbPanels,
+        nbPanelsToGenerate,
+        "ref.current:": ref.current,
+      }, null, 2))
+      */
+    
       for (
-        let currentPanel = 0;
+        let currentPanel = previousNbPanels;
         currentPanel < currentNbPanels;
         currentPanel += nbPanelsToGenerate
       ) {
@@ -124,48 +185,55 @@ export default function Main() {
             userStoryPrompt,
             nbPanelsToGenerate,
             maxNbPanels,
-            existingPanels,
+
+            // existing panels are critical here: this is how we can
+            // continue over an existing story
+            existingPanels: ref.current.existingPanels,
           })
-          console.log("LLM generated some new panels:", candidatePanels)
+          // console.log("LLM generated some new panels:", candidatePanels)
 
-          existingPanels.push(...candidatePanels)
+          ref.current.existingPanels.push(...candidatePanels)
+          // console.log("ref.current.existingPanels.push(...candidatePanels) successful, now we have ref.current.existingPanels = ", ref.current.existingPanels)
 
-          console.log(`Converting the ${nbPanelsToGenerate} new panels into image prompts..`)
+          // console.log(`main.tsx: converting the ${nbPanelsToGenerate} new panels into image prompts..`)
          
           const startAt = currentPanel
           const endAt = currentPanel + nbPanelsToGenerate
           for (let p = startAt; p < endAt; p++) {
-            newCaptions.push(existingPanels[p]?.caption.trim() || "...")
+            ref.current.newCaptions.push(ref.current.existingPanels[p]?.caption.trim() || "...")
             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
-              existingPanels[p]?.instructions
+              ref.current.existingPanels[p]?.instructions
               ? lightPanelPromptPrefix
               : degradedPanelPromptPrefix,
     
-              existingPanels[p]?.instructions
+              ref.current.existingPanels[p]?.instructions || ""
             ])
-            newPanelsPrompts.push(newPanel)
+            ref.current.newPanelsPrompts.push(newPanel)
 
-            console.log(`Image prompt for panel ${p} => "${newPanel}"`)
+            console.log(`main.tsx: image prompt for panel ${p} => "${newPanel}"`)
           }
 
           // update the frontend
           // console.log("updating the frontend..")
-          setCaptions(newCaptions)
-          setPanels(newPanelsPrompts)    
+          setCaptions(ref.current.newCaptions)
+          setPanels(ref.current.newPanelsPrompts)    
 
           setGeneratingStory(false)
         } catch (err) {
-          console.log("failed to generate the story, aborting here")
+          console.log("main.tsx: LLM generation failed:", err)
           setGeneratingStory(false)
           break
         }
         if (currentPanel > (currentNbPanels / 2)) {
-          console.log("good, we are half way there, hold tight!")
+          console.log("main.tsx: we are halfway there, hold tight!")
           // setWaitABitMore(true)
         }
+        
+        // we could sleep here if we want to
+        // await sleep(1000)
       }
    
       /*
@@ -176,7 +244,13 @@ export default function Main() {
       */
  
     })
-  }, [prompt, preset?.label, currentNbPanels, maxNbPanels]) // important: we need to react to preset changes too
+  }, [
+    prompt,
+    preset?.label,
+    previousNbPanels,
+    currentNbPanels,
+    maxNbPanels
+  ]) // important: we need to react to preset changes too
 
   return (
     <Suspense>
@@ -205,11 +279,13 @@ export default function Main() {
             {Array(currentNbPages).fill(0).map((_, i) => <Page key={i} page={i} />)}
           </div>
           {
-          // currentNbPages < maxNbPages &&
-          //   <div className="flex flex-col space-y-2 pt-2 pb-6 text-gray-600 dark:text-gray-600">
-          //     <div>Happy with your story?</div>
-          //     <div>You can <Button>Add page {currentNbPages + 1} 👀</Button></div>
-          //   </div>
+          showNextPageButton &&
+            <div className="flex flex-col space-y-2 pt-2 pb-6 text-gray-600 dark:text-gray-600">
+              <div>Happy with your story?</div>
+              <div>You can <Button onClick={() => {
+                setCurrentNbPages(currentNbPages + 1)
+              }}>Add page {currentNbPages + 1} 👀</Button></div>
+            </div>
           }
         </div>
       </div>

src/app/queries/getStoryContinuation.ts

@@ -2,20 +2,21 @@ import { Preset } from "../engine/presets"
 import { GeneratedPanel } from "@/types"
 import { predictNextPanels } from "./predictNextPanels"
 import { joinWords } from "@/lib/joinWords"
+import { sleep } from "@/lib/sleep"
 
 export const getStoryContinuation = async ({
   preset,
   stylePrompt = "",
   userStoryPrompt = "",
-  nbPanelsToGenerate = 2,
-  maxNbPanels = 4,
+  nbPanelsToGenerate,
+  maxNbPanels,
   existingPanels = [],
 }: {
   preset: Preset;
   stylePrompt?: string;
   userStoryPrompt?: string;
-  nbPanelsToGenerate?: number;
-  maxNbPanels?: number;
+  nbPanelsToGenerate: number;
+  maxNbPanels: number;
   existingPanels?: GeneratedPanel[];
 }): Promise<GeneratedPanel[]> => {
 
@@ -63,6 +64,7 @@ export const getStoryContinuation = async ({
         caption: "(Sorry, LLM generation failed: using degraded mode)"
       })
     }
+    await sleep(2000)
     // console.error(err)
   } finally {
     return panels

src/app/queries/predictNextPanels.ts

@@ -11,14 +11,14 @@ import { sleep } from "@/lib/sleep"
 export const predictNextPanels = async ({
   preset,
   prompt = "",
-  nbPanelsToGenerate = 2,
-  maxNbPanels = 4,
+  nbPanelsToGenerate,
+  maxNbPanels,
   existingPanels = [],
 }: {
   preset: Preset;
   prompt: string;
-  nbPanelsToGenerate?: number;
-  maxNbPanels?: number;
+  nbPanelsToGenerate: number;
+  maxNbPanels: number;
   existingPanels: GeneratedPanel[];
 }): Promise<GeneratedPanel[]> => {
   // console.log("predictNextPanels: ", { prompt, nbPanelsToGenerate })

src/app/store/index.ts

@@ -16,6 +16,7 @@ export const useStore = create<{
   maxNbPanelsPerPage: number
   currentNbPages: number
   maxNbPages: number
+  previousNbPanels: number
   currentNbPanels: number
   maxNbPanels: number
   panels: string[]
@@ -36,6 +37,7 @@ export const useStore = create<{
   setMaxNbPanelsPerPage: (maxNbPanelsPerPage: number) => void
   setCurrentNbPages: (currentNbPages: number) => void
   setMaxNbPages: (maxNbPages: number) => void
+  setPreviousNbPanels: (previousNbPanels: number) => void
   setCurrentNbPanels: (currentNbPanels: number) => void
   setMaxNbPanels: (maxNbPanels: number) => void
   
@@ -53,12 +55,19 @@ export const useStore = create<{
   setCaptions: (captions: string[]) => void
   setPanelCaption: (newCaption: string, index: number) => void
   setZoomLevel: (zoomLevel: number) => void
-  setPage: (page: HTMLDivElement) => void
+
   setGeneratingStory: (isGeneratingStory: boolean) => void
   setGeneratingImages: (panelId: string, value: boolean) => void
   setGeneratingText: (isGeneratingText: boolean) => void
-  pageToImage: () => Promise<string>
-  download: () => Promise<void>
+  
+  // I think we should deprecate those three functions
+  // this was used to keep track of the page HTML element,
+  // for use with a HTML-to-bitmap library
+  // but the CSS layout wasn't followed properly and it depended on the zoom level
+  // pageToImage: () => Promise<string>
+  // download: () => Promise<void>
+  // setPage: (page: HTMLDivElement) => void
+
   generate: (prompt: string, presetName: PresetName, layoutName: LayoutName) => void
 }>((set, get) => ({
   prompt: "",
@@ -69,6 +78,7 @@ export const useStore = create<{
   maxNbPanelsPerPage: 4,
   currentNbPages: 1,
   maxNbPages: 1,
+  previousNbPanels: 0,
   currentNbPanels: 4,
   maxNbPanels: 4,
 
@@ -77,16 +87,22 @@ export const useStore = create<{
   upscaleQueue: {} as Record<string, RenderedScene>,
   renderedScenes: {} as Record<string, RenderedScene>,
   showCaptions: false,
+
+  // deprecated?
   layout: defaultLayout,
-  layouts: [defaultLayout, defaultLayout],
+
+  layouts: [defaultLayout, defaultLayout, defaultLayout, defaultLayout],
+
   zoomLevel: 60,
+
+  // deprecated?
   page: undefined as unknown as HTMLDivElement,
+
   isGeneratingStory: false,
   panelGenerationStatus: {},
   isGeneratingText: false,
   atLeastOnePanelIsBusy: false,
 
-
   setCurrentNbPanelsPerPage: (currentNbPanelsPerPage: number) => {
     const { currentNbPages } = get()
     set({
@@ -102,10 +118,41 @@ export const useStore = create<{
     })
   },
   setCurrentNbPages: (currentNbPages: number) => {
-    const { currentNbPanelsPerPage } = get()
-    set({
+    const state = get()
+
+    const newCurrentNumberOfPages = Math.min(state.maxNbPages, currentNbPages)
+    
+    const newCurrentNbPanels = state.currentNbPanelsPerPage * newCurrentNumberOfPages
+
+    /*
+    console.log(`setCurrentNbPages(${currentNbPages}): ${JSON.stringify({
+      "state.maxNbPages": state.maxNbPages,
       currentNbPages,
-      currentNbPanels: currentNbPanelsPerPage * currentNbPages
+      newCurrentNumberOfPages,
+      "state.currentNbPanelsPerPage": state.currentNbPanelsPerPage,
+      newCurrentNbPanels,
+      "state.currentNbPanels": state.currentNbPanels,
+      "state.previousNbPanels": state.previousNbPanels,
+      previousNbPanels:
+      newCurrentNbPanels > state.currentNbPanels ? state.currentNbPanels :
+      newCurrentNbPanels < state.currentNbPanels ? 0 :
+      state.previousNbPanels,
+
+    }, null, 2)}`)
+    */
+
+    set({
+      // we keep the previous number of panels for convenience
+      // so if we are adding a new panel,
+      // state.currentNbPanels gets copied to state.previousNbPanels
+      previousNbPanels:
+        newCurrentNbPanels > state.currentNbPanels ? state.currentNbPanels :
+        newCurrentNbPanels < state.currentNbPanels ? 0 :
+        state.previousNbPanels,
+
+      currentNbPanels: newCurrentNbPanels,
+      currentNbPages: newCurrentNumberOfPages,
+  
     })
   },
   setMaxNbPages: (maxNbPages: number) => {
@@ -115,8 +162,40 @@ export const useStore = create<{
       maxNbPanels: maxNbPanelsPerPage * maxNbPages,
     })
   },
+  setPreviousNbPanels: (previousNbPanels: number) => {
+    set({
+      previousNbPanels
+    })
+  },
   setCurrentNbPanels: (currentNbPanels: number) => {
+    const state = get()
+
+
+    /*
+    console.log(`setCurrentNbPanels(${currentNbPanels}): ${JSON.stringify({
+      "state.maxNbPages": state.maxNbPages,
+      "state.currentNbPages": state.currentNbPages,
+      currentNbPanels,
+      "state.currentNbPanelsPerPage": state.currentNbPanelsPerPage,
+      "state.currentNbPanels": state.currentNbPanels,
+      "state.previousNbPanels": state.previousNbPanels,
+      previousNbPanels:
+      currentNbPanels > state.currentNbPanels ? state.currentNbPanels :
+        currentNbPanels < state.currentNbPanels ? 0 :
+        state.previousNbPanels,
+
+    }, null, 2)}`)
+    */
+
     set({
+      // we keep the previous number of panels for convenience
+      // so if we are adding a new panel,
+      // state.currentNbPanels gets copied to state.previousNbPanels
+      previousNbPanels:
+        currentNbPanels > state.currentNbPanels ? state.currentNbPanels :
+        currentNbPanels < state.currentNbPanels ? 0 :
+        state.previousNbPanels,
+      
       currentNbPanels,
     })
   },
@@ -200,35 +279,37 @@ export const useStore = create<{
     })
   },
   setLayout: (layoutName: LayoutName) => {
-
-    const { currentNbPages } = get()
-
-    const layout = layoutName === "random"
-    ? getRandomLayoutName()
-    : layoutName
+    const { maxNbPages, currentNbPanelsPerPage } = get()
 
     const layouts: LayoutName[] = []
-    for (let i = 0; i < currentNbPages; i++) {
+    for (let i = 0; i < maxNbPages; i++) {
       layouts.push(
         layoutName === "random"
           ? getRandomLayoutName()
-          : layoutName
-      )
-
-      // TODO: update the number of total panels here!
+          : layoutName)
     }
 
     set({
-      layout,
+      // changing the layout isn't a free pass to generate tons of panels at once,
+      // so we reset pretty much everything
+      previousNbPanels: 0,
+      currentNbPages: 1,
+      currentNbPanels: currentNbPanelsPerPage,
+      panels: [],
+      captions: [],
+      upscaleQueue: {},
+      renderedScenes: {},
+      isGeneratingStory: false,
+      panelGenerationStatus: {},
+      isGeneratingText: false,
+      atLeastOnePanelIsBusy: false,
+
       layouts,
+      layout: layouts[0],
     })
   },
   setLayouts: (layouts: LayoutName[]) => set({ layouts }),
   setZoomLevel: (zoomLevel: number) =>  set({ zoomLevel }),
-  setPage: (page: HTMLDivElement) => {
-    if (!page) { return }
-    set({ page })
-  },
   setGeneratingStory: (isGeneratingStory: boolean) => set({ isGeneratingStory }),
   setGeneratingImages: (panelId: string, value: boolean) => {
     const panelGenerationStatus: Record<string, boolean> = {
@@ -244,6 +325,16 @@ export const useStore = create<{
     })
   },
   setGeneratingText: (isGeneratingText: boolean) => set({ isGeneratingText }),
+
+  // I think we should deprecate those three functions
+  // this was used to keep track of the page HTML element,
+  // for use with a HTML-to-bitmap library
+  // but the CSS layout wasn't followed properly and it depended on the zoom level
+  /*
+  setPage: (page: HTMLDivElement) => {
+    if (!page) { return }
+    set({ page })
+  },
   pageToImage: async () => {
     const { page } = get()
     if (!page) { return "" }
@@ -271,33 +362,37 @@ export const useStore = create<{
       window.open(data)
     }
   },
+  */
   generate: (prompt: string, presetName: PresetName, layoutName: LayoutName) => {
-
-    const { currentNbPages } = get()
-    
-    const layout = layoutName === "random"
-    ? getRandomLayoutName()
-    : layoutName
+    const { maxNbPages, currentNbPanelsPerPage } = get()
 
     const layouts: LayoutName[] = []
-    for (let i = 0; i < currentNbPages; i++) {
+    for (let i = 0; i < maxNbPages; i++) {
       layouts.push(
         layoutName === "random"
           ? getRandomLayoutName()
-          : layoutName
-      )
-
-      // TODO: update the number of total panels here!
+          : layoutName)
     }
 
     set({
-      prompt,
+      // we reset pretty much everything
+      previousNbPanels: 0,
+      currentNbPages: 1,
+      currentNbPanels: currentNbPanelsPerPage,
       panels: [],
       captions: [],
+      upscaleQueue: {},
+      renderedScenes: {},
+      isGeneratingStory: false,
+      panelGenerationStatus: {},
+      isGeneratingText: false,
+      atLeastOnePanelIsBusy: false,
+
+      prompt,
       preset: presetName === "random"
         ? getRandomPreset()
         : getPreset(presetName),
-      layout,
+      layout: layouts[0],
       layouts,
     })
   }