fixed various issues

package-lock.json

@@ -9,7 +9,6 @@
       "version": "0.0.0",
       "dependencies": {
         "@huggingface/inference": "^2.6.1",
-        "@photo-sphere-viewer/core": "^5.1.7",
         "@radix-ui/react-accordion": "^1.1.2",
         "@radix-ui/react-avatar": "^1.0.3",
         "@radix-ui/react-checkbox": "^1.0.4",
@@ -45,17 +44,17 @@
         "react": "18.2.0",
         "react-circular-progressbar": "^2.1.0",
         "react-dom": "18.2.0",
-        "react-virtualized": "^9.22.5",
+        "react-virtualized-auto-sizer": "^1.0.20",
         "sbd": "^1.0.19",
         "styled-components": "^6.0.7",
         "tailwind-merge": "^1.13.2",
         "tailwindcss": "3.3.3",
         "tailwindcss-animate": "^1.0.6",
-        "temp-dir": "^3.0.0",
         "ts-node": "^10.9.1",
         "typescript": "5.1.6",
         "usehooks-ts": "^2.9.1",
-        "uuid": "^9.0.0"
+        "uuid": "^9.0.0",
+        "zustand": "^4.4.1"
       },
       "devDependencies": {
         "@types/qs": "^6.9.7",
@@ -2459,14 +2458,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/@photo-sphere-viewer/core": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/@photo-sphere-viewer/core/-/core-5.3.0.tgz",
-      "integrity": "sha512-gIRJ/ODTVkiYKUoWPg2zThNYbf4RiwJfw0h302lRjaLsmFK20RaXknmHdtQsfNp5DU2J/tBZ5NOnXfMNr3GmlQ==",
-      "dependencies": {
-        "three": "^0.155.0"
-      }
-    },
     "node_modules/@radix-ui/number": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.1.tgz",
@@ -4282,9 +4273,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001523",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001523.tgz",
-      "integrity": "sha512-I5q5cisATTPZ1mc588Z//pj/Ox80ERYDfR71YnvY7raS/NOk8xXlZcB0sF7JdqaV//kOaa6aus7lRfpdnt1eBA==",
+      "version": "1.0.30001524",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001524.tgz",
+      "integrity": "sha512-Jj917pJtYg9HSJBF95HVX3Cdr89JUyLT4IZ8SvM5aDRni95swKgYi3TgYLH5hnGfPE/U1dg6IfZ50UsIlLkwSA==",
       "funding": [
         {
           "type": "opencollective",
@@ -4908,15 +4899,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/dom-helpers": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
-      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
-      "dependencies": {
-        "@babel/runtime": "^7.8.7",
-        "csstype": "^3.0.2"
-      }
-    },
     "node_modules/dom-serializer": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -4969,9 +4951,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.502",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.502.tgz",
-      "integrity": "sha512-xqeGw3Gr6o3uyHy/yKjdnDQHY2RQvXcGC2cfHjccK1IGkH6cX1WQBN8EeC/YpwPhGkBaikDTecJ8+ssxSVRQlw=="
+      "version": "1.4.503",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.503.tgz",
+      "integrity": "sha512-LF2IQit4B0VrUHFeQkWhZm97KuJSGF2WJqq1InpY+ECpFRkXd8yTIaTtJxsO0OKDmiBYwWqcrNaXOurn2T2wiA=="
     },
     "node_modules/emoji-regex": {
       "version": "10.2.1",
@@ -5054,14 +5036,14 @@
       }
     },
     "node_modules/es-iterator-helpers": {
-      "version": "1.0.13",
-      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.13.tgz",
-      "integrity": "sha512-LK3VGwzvaPWobO8xzXXGRUOGw8Dcjyfk62CsY/wfHN75CwsJPbuypOYJxK6g5RyEL8YDjIWcl6jgd8foO6mmrA==",
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.14.tgz",
+      "integrity": "sha512-JgtVnwiuoRuzLvqelrvN3Xu7H9bu2ap/kQ2CrM62iidP8SKuD99rWU3CJy++s7IVL2qb/AjXPGR/E7i9ngd/Cw==",
       "dependencies": {
         "asynciterator.prototype": "^1.0.0",
         "call-bind": "^1.0.2",
         "define-properties": "^1.2.0",
-        "es-abstract": "^1.21.3",
+        "es-abstract": "^1.22.1",
         "es-set-tostringtag": "^2.0.1",
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.2.1",
@@ -5623,15 +5605,16 @@
       }
     },
     "node_modules/flat-cache": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
-      "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.1.0.tgz",
+      "integrity": "sha512-OHx4Qwrrt0E4jEIcI5/Xb+f+QmJYNj2rrK8wiIdQOIrB9WrrJL8cjZvXdXuBTkkEwEqLycb5BeZDV1o2i9bTew==",
       "dependencies": {
-        "flatted": "^3.1.0",
+        "flatted": "^3.2.7",
+        "keyv": "^4.5.3",
         "rimraf": "^3.0.2"
       },
       "engines": {
-        "node": "^10.12.0 || >=12.0.0"
+        "node": ">=12.0.0"
       }
     },
     "node_modules/flatted": {
@@ -6438,6 +6421,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ=="
+    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -6473,6 +6461,14 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/keyv": {
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.3.tgz",
+      "integrity": "sha512-QCiSav9WaX1PgETJ+SpNnx2PRRapJ/oRSXM4VO5OGYGSjrxbKPVFVhB3l2OCbLCk329N8qyAtsJjSjvVBWzEug==",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
     "node_modules/language-subtag-registry": {
       "version": "0.3.22",
       "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz",
@@ -7302,11 +7298,6 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
-    "node_modules/react-lifecycles-compat": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
-    },
     "node_modules/react-remove-scroll": {
       "version": "2.5.5",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
@@ -7374,29 +7365,13 @@
         }
       }
     },
-    "node_modules/react-virtualized": {
-      "version": "9.22.5",
-      "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.5.tgz",
-      "integrity": "sha512-YqQMRzlVANBv1L/7r63OHa2b0ZsAaDp1UhVNEdUaXI8A5u6hTpA5NYtUueLH2rFuY/27mTGIBl7ZhqFKzw18YQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.7.2",
-        "clsx": "^1.0.4",
-        "dom-helpers": "^5.1.3",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.7.2",
-        "react-lifecycles-compat": "^3.0.4"
-      },
+    "node_modules/react-virtualized-auto-sizer": {
+      "version": "1.0.20",
+      "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.20.tgz",
+      "integrity": "sha512-OdIyHwj4S4wyhbKHOKM1wLSj/UDXm839Z3Cvfg2a9j+He6yDa6i5p0qQvEiCnyQlGO/HyfSnigQwuxvYalaAXA==",
       "peerDependencies": {
-        "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0",
-        "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0"
-      }
-    },
-    "node_modules/react-virtualized/node_modules/clsx": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
-      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
-      "engines": {
-        "node": ">=6"
+        "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0-rc",
+        "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0-rc"
       }
     },
     "node_modules/read-cache": {
@@ -8065,14 +8040,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/temp-dir": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-3.0.0.tgz",
-      "integrity": "sha512-nHc6S/bwIilKHNRgK/3jlhDoIHcp45YgyiwcAk46Tr0LfEqGBVpmiAyuiuxeVE44m3mXnEeVhaipLOEWmH+Njw==",
-      "engines": {
-        "node": ">=14.16"
-      }
-    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -8097,11 +8064,6 @@
         "node": ">=0.8"
       }
     },
-    "node_modules/three": {
-      "version": "0.155.0",
-      "resolved": "https://registry.npmjs.org/three/-/three-0.155.0.tgz",
-      "integrity": "sha512-sNgCYmDijnIqkD/bMfk+1pHg3YzsxW7V2ChpuP6HCQ8NiZr3RufsXQr8M3SSUMjW4hG+sUk7YbyuY0DncaDTJQ=="
-    },
     "node_modules/tiny-inflate": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
@@ -8475,6 +8437,14 @@
         }
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/usehooks-ts": {
       "version": "2.9.1",
       "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-2.9.1.tgz",
@@ -8675,6 +8645,33 @@
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
+    },
+    "node_modules/zustand": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.4.1.tgz",
+      "integrity": "sha512-QCPfstAS4EBiTQzlaGP1gmorkh/UL1Leaj2tdj+zZCZ/9bm0WS7sI2wnfD5lpOszFqWJ1DcPnGoY8RDL61uokw==",
+      "dependencies": {
+        "use-sync-external-store": "1.2.0"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
     }
   }
 }

package.json

@@ -10,7 +10,6 @@
   },
   "dependencies": {
     "@huggingface/inference": "^2.6.1",
-    "@photo-sphere-viewer/core": "^5.1.7",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-avatar": "^1.0.3",
     "@radix-ui/react-checkbox": "^1.0.4",
@@ -46,17 +45,17 @@
     "react": "18.2.0",
     "react-circular-progressbar": "^2.1.0",
     "react-dom": "18.2.0",
-    "react-virtualized": "^9.22.5",
+    "react-virtualized-auto-sizer": "^1.0.20",
     "sbd": "^1.0.19",
     "styled-components": "^6.0.7",
     "tailwind-merge": "^1.13.2",
     "tailwindcss": "3.3.3",
     "tailwindcss-animate": "^1.0.6",
-    "temp-dir": "^3.0.0",
     "ts-node": "^10.9.1",
     "typescript": "5.1.6",
     "usehooks-ts": "^2.9.1",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.0",
+    "zustand": "^4.4.1"
   },
   "devDependencies": {
     "@types/qs": "^6.9.7",

src/app/engine/presets.ts

@@ -100,8 +100,8 @@ export const presets: Record<string, Preset> = {
       "3D render"
     ],
   },
-  sanglier: {
-    label: "Sanglier",
+  armorican: {
+    label: "Armorican",
     family: "european",
     color: "monochrome",
     font: "paeteround",

src/app/engine/render.ts

@@ -54,6 +54,11 @@ export async function newRender({
         segmentation: "disabled", // one day we will remove this param, to make it automatic
         width,
         height,
+
+        // no need to upscale right now as we generate tiny panels
+        // maybe later we can provide an "export" button to PDF
+        upscalingFactor: 1,
+
         cache: "ignore"
       } as Partial<RenderRequest>),
       cache: 'no-store',

src/app/interface/panel/index.tsx

@@ -1,36 +1,40 @@
 "use client"
 
 import { useEffect, useRef, useState, useTransition } from "react"
-
-import { Preset } from "@/app/engine/presets"
+// import AutoSizer from "react-virtualized-auto-sizer"
 
 import { RenderedScene } from "@/types"
+
+import { getRender, newRender } from "@/app/engine/render"
+import { useStore } from "@/app/store"
+
 import { cn } from "@/lib/utils"
-import { FontName } from "@/lib/fonts"
-import { getRender, newRender } from "../../engine/render"
 import { getInitialRenderedScene } from "@/lib/getInitialRenderedScene"
+import { Progress } from "@/app/interface/progress"
 // import { Bubble } from "./bubble"
 
-export default function Panel({
-  prompt = "",
-  font,
-  preset,
+export function Panel({
+  panel,
   className = "",
   width = 1,
   height = 1,
   delay = 0,
 }: {
-  prompt?: string
-  font: FontName
-  preset: Preset
+  panel: number
   className?: string
   width?: number
   height?: number
   delay?: number
  }) {
+  const font = useStore(state => state.font)
+  const preset = useStore(state => state.preset)
+  const setGeneratingImages = useStore(state => state.setGeneratingImages)
+  const panelGenerationStatus = useStore(state => state.panelGenerationStatus)
+  const isLoading = panelGenerationStatus[panel] || false
+  const panels = useStore(state => state.panels)
+  const prompt = panels[panel] || ""
 
   const [_isPending, startTransition] = useTransition()
-  const [isLoading, setLoading] = useState<boolean>(false)
   const [rendered, setRendered] = useState<RenderedScene>(getInitialRenderedScene())
   const renderedRef = useRef<RenderedScene>()
 
@@ -42,15 +46,20 @@ export default function Panel({
     startTransition(async () => {
       // console.log("Panel prompt: "+ prompt)
       if (!prompt?.length) { return }
+      if (isLoading) { return }
 
       console.log("Loading panel..")
-      setLoading(true)
 
       // console.log("calling:\nconst newRendered = await newRender({ prompt, preset, width, height })")
       console.log({
-        prompt, preset, width, height
+        panel, prompt, width, height
       })
 
+      console.log("")
+      // important: update the status, and clear the scene
+      setGeneratingImages(panel, true)
+      setRendered(getInitialRenderedScene())
+
       const newRendered = await newRender({ prompt, width, height })
 
       if (newRendered) {
@@ -67,12 +76,11 @@ export default function Panel({
           error: "failed to fetch the data",
           segments: []
         })
-
-        setLoading(false)
+        setGeneratingImages(panel, false)
         return
       }
     })
-  }, [prompt, font, preset])
+  }, [prompt, font, width, height])
 
 
   const checkStatus = () => {
@@ -84,6 +92,7 @@ export default function Panel({
         return
       }
       try {
+        setGeneratingImages(panel, true)
         // console.log(`Checking job status API for job ${renderedRef.current?.renderId}`)
         const newRendered = await getRender(renderedRef.current.renderId)
         // console.log("got a response!", newRendered)
@@ -91,7 +100,7 @@ export default function Panel({
         if (JSON.stringify(renderedRef.current) !== JSON.stringify(newRendered)) {
           console.log("updated panel:", newRendered)
           setRendered(renderedRef.current = newRendered)
-          setLoading(true)
+          setGeneratingImages(panel, true)
         }
         // console.log("status:", newRendered.status)
 
@@ -100,7 +109,7 @@ export default function Panel({
           timeoutRef.current = setTimeout(checkStatus, 1000)
         } else {
           console.log("panel finished!")
-          setLoading(false)
+          setGeneratingImages(panel, false)
         }
       } catch (err) {
         console.error(err)
@@ -119,16 +128,27 @@ export default function Panel({
     }
   }, [])
 
+  if (isLoading) {
+    return (
+      <div className={cn(
+        `w-full h-full flex flex-col items-center justify-center`,
+        className
+      )}>
+       <Progress isLoading />
+      </div>
+    )
+  }
+
   return (
     <div className={cn(
       `w-full h-full`,
-      preset.color === "grayscale" ? "grayscale" : "",
+      { "grayscale": preset.color === "grayscale" },
       className
     )}>
-      {rendered.assetUrl ? <img
+      {rendered.assetUrl && <img
         src={rendered.assetUrl}
         className="w-full h-full object-cover"
-      /> : null}
+      />}
 
       {/*<Bubble className="absolute top-4 left-4">
         Hello, world!

src/app/interface/progress/index.tsx

@@ -9,7 +9,7 @@ export function Progress({
   className = "",
 }: {
   isLoading: boolean
-  resetKey: string
+  resetKey?: string
   className?: string
 }) {
   const timeoutRef = useRef<any>()
@@ -43,7 +43,7 @@ export function Progress({
 
   return (
     <div className={cn(
-      `fixed flex w-10 h-10 top-16 right-6 z-50`,
+      `flex w-10 h-10`,
       `animation-all duration-300 text-md`,
       isLoading
         ? `scale-100 opacity-100`

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

@@ -11,26 +11,22 @@ import { Label } from "@/components/ui/label"
 import { cn } from "@/lib/utils"
 import { FontName, fontList, fonts } from "@/lib/fonts"
 import { Input } from "@/components/ui/input"
-import { Preset, PresetName, presets } from "@/app/engine/presets"
+import { defaultPreset, getPreset, presets } from "@/app/engine/presets"
 import { useState } from "react"
+import { useStore } from "@/app/store"
+
+export function TopMenu() {
+  const font = useStore(state => state.font)
+  const setFont = useStore(state => state.setFont)
+
+  const preset = useStore(state => state.preset)
+  const setPreset = useStore(state => state.setPreset)
+
+  const prompt = useStore(state => state.prompt)
+  const setPrompt = useStore(state => state.setPrompt)
+
+  const atLeastOnePanelIsBusy = useStore(state => state.atLeastOnePanelIsBusy)
 
-export function TopMenu({
-  defaultPreset,
-  preset,
-  onChangePreset,
-  font,
-  onChangeFont,
-  prompt,
-  onChangePrompt,
-}: {
-  defaultPreset: PresetName
-  preset: Preset
-  onChangePreset: (newPresetName: PresetName) => void
-  font: FontName
-  onChangeFont: (newFontName: FontName) => void
-  prompt: string
-  onChangePrompt: (newPrompt: string) => void
-}) {
   const [draft, setDraft] = useState("")
   return (
     <div className={cn(
@@ -45,7 +41,9 @@ export function TopMenu({
         <Label className="flex text-sm">Select a preset:</Label>
         <Select
           defaultValue={defaultPreset}
-          onValueChange={(value) => { onChangePreset(value as FontName) }}>
+          onValueChange={(value) => { setPreset(getPreset(value as FontName)) }}
+          disabled={atLeastOnePanelIsBusy}
+          >
           <SelectTrigger className="w-[180px]">
             <SelectValue className="text-sm" placeholder="Type" />
           </SelectTrigger>
@@ -60,18 +58,21 @@ export function TopMenu({
         <Input
           placeholder="Story"
           className="w-full bg-neutral-300 text-neutral-800 dark:bg-neutral-300 dark:text-neutral-800"
+          disabled={atLeastOnePanelIsBusy}
           onChange={(e) => {
             setDraft(e.target.value)
           }}
           onBlur={(e) => {
             if (draft !== prompt) {
-              onChangePrompt(draft)
+              if (draft.trim() !== prompt.trim()) {
+                setPrompt(draft.trim())
+              }
             }
           }}
           onKeyDown={({ key }) => {
             if (key === 'Enter') {
               if (draft.trim() !== prompt.trim()) {
-                onChangePrompt(draft.trim())
+                setPrompt(draft.trim())
               }
             }
           }}
@@ -82,7 +83,9 @@ export function TopMenu({
         <Label className="flex text-sm">Font:</Label>
         <Select
           defaultValue={fontList.includes(preset.font) ? preset.font : "cartoonist"}
-          onValueChange={(value) => { onChangeFont(value as FontName) }}>
+          onValueChange={(value) => { setFont(value as FontName) }}
+          disabled={atLeastOnePanelIsBusy}
+          >
           <SelectTrigger className="w-[144px]">
             <SelectValue className="text-sm" placeholder="Type" />
           </SelectTrigger>

src/app/layouts/index.tsx

@@ -0,0 +1,160 @@
+import { Panel } from "@/app/interface/panel"
+import { pick } from "@/lib/pick"
+import { useStore } from "@/app/store"
+
+export function Layout1() {
+  return (
+    <div
+      // the "fixed" width ensure our comic keeps a consistent ratio
+      className="grid grid-cols-2 grid-rows-3 gap-4 w-[1160px] h-screen">
+      <div className="bg-stone-100">
+        <Panel
+          panel={0}
+          width={1024}
+          height={512}
+        />
+      </div>
+      <div className="bg-zinc-100 row-span-2">
+        <Panel
+          panel={1}
+          width={1024}
+          height={1024}
+        />
+      </div>
+      <div className="bg-gray-100 row-span-2 col-span-1">
+        <Panel
+          panel={2}
+          width={1024}
+          height={1024}
+        />
+      </div>
+      <div className="bg-slate-100">
+        <Panel
+          panel={3}
+          width={1024}
+          height={512}
+        />
+      </div>
+    </div>
+  )
+}
+
+export function Layout2() {
+  return (
+    <div
+      // the "fixed" width ensure our comic keeps a consistent ratio
+      className="grid grid-cols-2 grid-rows-3 gap-4 w-[1160px] h-screen">
+      <div className="bg-gray-100 row-span-2 col-span-1">
+        <Panel
+          panel={0}
+          width={1024}
+          height={1024}
+        />
+      </div>
+      <div className="bg-slate-100">
+        <Panel
+          panel={1}
+          width={1024}
+          height={512}
+        />
+      </div>
+      <div className="bg-stone-100">
+        <Panel
+          panel={2}
+          width={1024}
+          height={512}
+        />
+      </div>
+      <div className="bg-zinc-100 row-span-2">
+        <Panel
+          panel={3}
+          width={1024}
+          height={1024}
+        />
+      </div>
+    </div>
+  )
+}
+
+export function Layout3() {
+  return (
+    <div
+      // the "fixed" width ensure our comic keeps a consistent ratio
+      className="grid grid-cols-2 grid-rows-3 gap-4 w-[1160px] h-screen">
+      <div className="bg-zinc-100 row-span-2">
+        <Panel
+          panel={0}
+          width={1024}
+          height={1024}
+        />
+      </div>
+      <div className="bg-stone-100">
+        <Panel
+          panel={1}
+          width={1024}
+          height={512}
+        />
+      </div>
+      <div className="bg-slate-100">
+        <Panel
+          panel={2}
+          width={1024}
+          height={512}
+        />
+      </div>
+      <div className="bg-gray-100 row-span-2 col-span-1">
+        <Panel
+          panel={3}
+          width={1024}
+          height={1024}
+        />
+      </div>
+    </div>
+  )
+}
+
+export function Layout4() {
+  return (
+    <div
+      // the "fixed" width ensure our comic keeps a consistent ratio
+      className="grid grid-cols-2 grid-rows-3 gap-4 w-[1160px] h-screen">
+      <div className="bg-slate-100">
+        <Panel
+          panel={0}
+          width={1024}
+          height={512}
+        />
+      </div>
+      <div className="bg-gray-100 row-span-2 col-span-1">
+        <Panel
+          panel={1}
+          width={1024}
+          height={1024}
+        />
+      </div>
+      <div className="bg-zinc-100 row-span-2">
+        <Panel
+          panel={2}
+          width={1024}
+          height={1024}
+        />
+      </div>
+      <div className="bg-stone-100">
+        <Panel
+          panel={3}
+          width={1024}
+          height={512}
+        />
+      </div>
+    </div>
+  )
+}
+
+export const layouts = { Layout1, Layout2, Layout3, Layout4 }
+
+export type LayoutName = keyof typeof layouts 
+
+export function getRandomLayoutName(): LayoutName {
+  return pick(Object.keys(layouts) as LayoutName[]) as LayoutName
+}
+

src/app/main.tsx

@@ -1,112 +1,76 @@
 "use client"
 
-import { useState, useTransition } from "react"
-import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import { useEffect, useTransition } from "react"
+import { useSearchParams } from "next/navigation"
 
-import "react-virtualized/styles.css" // only needs to be imported once
-
-import { Preset, PresetName, defaultPreset, getPreset } from "@/app/engine/presets"
+import { PresetName, defaultPreset, getPreset } from "@/app/engine/presets"
 
 import { cn } from "@/lib/utils"
 import { TopMenu } from "./interface/top-menu"
-import { FontName } from "@/lib/fonts"
-import Panel from "./interface/panel"
+import { FontName, defaultFont } from "@/lib/fonts"
+import { getRandomLayoutName, layouts } from "./layouts"
+import { useStore } from "./store"
 
 export default function Main() {
   const [_isPending, startTransition] = useTransition()
-  const [isLoading, setLoading] = useState<boolean>()
-
-  const router = useRouter()
-  const pathname = usePathname()
   const searchParams = useSearchParams()
 
   const requestedPreset = (searchParams.get('preset') as PresetName) || defaultPreset
-  const [preset, setPreset] = useState<Preset>(getPreset(requestedPreset))
+  const requestedFont = (searchParams.get('font') as FontName) || defaultFont
+  const requestedPrompt = (searchParams.get('prompt') as string) || ""
 
-  const [font, setFont] = useState<FontName>("cartoonist")
+  const font = useStore(state => state.font)
+  const setFont = useStore(state => state.setFont)
 
-  const requestedPrompt = (searchParams.get('prompt') as string) || ""
-  const [prompt, setPrompt] = useState<string>(requestedPrompt)
-  const [panelPrompts, setPanelPrompts] = useState<string[]>([])
-  
-  const handleChangeFont = (newFont: FontName) => {
-    setFont(newFont)
-  }
+  const preset = useStore(state => state.preset)
+  const setPreset = useStore(state => state.setPreset)
+
+  const prompt = useStore(state => state.prompt)
+  const setPrompt = useStore(state => state.setPrompt)
+
+  const layout = useStore(state => state.layout)
+  const setLayout = useStore(state => state.setLayout)
 
-  const handleChangePreset = (newPresetName: PresetName) => {
-    setPreset(getPreset(newPresetName))
-  }
+  const setPanels = useStore(state => state.setPanels)
 
-  const handleChangePrompt = (newPrompt: string) => {
-    setPrompt(newPrompt)
+  // react to URL params
+  useEffect(() => {
+    if (requestedPreset && requestedPreset !== preset.label) { setPreset(getPreset(requestedPreset)) }
+  }, [requestedPreset])
+
+  useEffect(() => {
+    if (requestedFont && requestedFont !== font) { setFont(requestedFont) }
+  }, [requestedFont])
+
+  useEffect(() => {
+    if (requestedPrompt && requestedPrompt !== prompt) { setPrompt(requestedPrompt) }
+  }, [requestedPrompt])
+
+  // react to prompt changes
+  useEffect(() => {
+    if (!prompt) { return }
+
+    const newLayout = getRandomLayoutName()
+    console.log("using layout " + newLayout)
+    setLayout(newLayout)
 
     // TODO call the LLM here!
-    const prompt = preset.imagePrompt(newPrompt).join(", ")
+    const panelPrompt = preset.imagePrompt(prompt).join(", ")
+
+    // what we want is for it to invent a small "story"
+    setPanels([ panelPrompt, panelPrompt, panelPrompt, panelPrompt ])
+  }, [prompt, preset]) // important: we need to react to preset changes too
 
-    setPanelPrompts([
-      prompt,
-      prompt,
-      prompt,
-      prompt
-    ])
-  }
+  const LayoutElement = (layouts as any)[layout]
 
   return (
     <div className={cn(
       ``
     )}>
-      <TopMenu
-        defaultPreset={defaultPreset}
-        preset={preset}
-        onChangePreset={handleChangePreset}
-        font={font}
-        onChangeFont={handleChangeFont}
-        prompt={prompt}
-        onChangePrompt={handleChangePrompt}
-      />
+      <TopMenu />
       <div className="flex flex-col items-center w-screen h-screen pt-16 overflow-y-scroll">
-          <div
-            // the "fixed" width ensure our comic keeps a consistent ratio
-            className="grid grid-cols-2 grid-rows-3 gap-4 w-[1160px] h-screen">
-            <div className="bg-stone-100">
-              <Panel
-                prompt={panelPrompts[0]}
-                font={font}
-                preset={preset}
-                width={1024}
-                height={512}
-              />
-            </div>
-            <div className="bg-zinc-100 row-span-2">
-              <Panel
-                prompt={panelPrompts[1]}
-                font={font}
-                preset={preset}
-                width={1024}
-                height={1024}
-              />
-            </div>
-            <div className="bg-gray-100 row-span-2 col-span-1">
-              <Panel
-                prompt={panelPrompts[2]}
-                font={font}
-                preset={preset}
-                width={1024}
-                height={1024}
-              />
-            </div>
-            <div className="bg-slate-100">
-              <Panel
-                prompt={panelPrompts[3]}
-                font={font}
-                preset={preset}
-                width={1024}
-                height={512}
-              />
-            </div>
-          </div>
-        </div>
+        <LayoutElement />
+      </div>
     </div>
-
   )
 }

src/app/store/index.ts

@@ -0,0 +1,57 @@
+"use client"
+import { create } from "zustand"
+
+import { FontName } from "@/lib/fonts"
+import { Preset, getPreset } from "@/app/engine/presets"
+import { LayoutName } from "../layouts"
+
+export const useStore = create<{
+  prompt: string
+  font: FontName
+  preset: Preset
+  panels: string[]
+  layout: LayoutName
+  isGeneratingLogic: boolean
+  panelGenerationStatus: Record<number, boolean>
+  isGeneratingText: boolean
+  atLeastOnePanelIsBusy: boolean
+  setPrompt: (prompt: string) => void
+  setFont: (font: FontName) => void
+  setPreset: (preset: Preset) => void
+  setPanels: (panels: string[]) => void
+  setLayout: (layout: LayoutName) => void
+  setGeneratingLogic: (isGeneratingLogic: boolean) => void
+  setGeneratingImages: (panelId: number, value: boolean) => void
+  setGeneratingText: (isGeneratingText: boolean) => void
+}>((set, get) => ({
+  prompt: "",
+  font: "cartoonist",
+  preset: getPreset("japanese_manga"),
+  panels: [],
+  layout: "Layout1",
+  isGeneratingLogic: false,
+  panelGenerationStatus: {},
+  isGeneratingText: false,
+  atLeastOnePanelIsBusy: false,
+  setPrompt: (prompt: string) => set({ prompt }),
+  setFont: (font: FontName) => set({ font }),
+  setPreset: (preset: Preset) => set({ preset }),
+  setPanels: (panels: string[]) => set({ panels }),
+  setLayout: (layout: LayoutName) => set({ layout }),
+  setGeneratingLogic: (isGeneratingLogic: boolean) => set({ isGeneratingLogic }),
+  setGeneratingImages: (panelId: number, value: boolean) => {
+
+    const panelGenerationStatus: Record<number, boolean> = {
+      ...get().panelGenerationStatus,
+      [panelId]: value
+    }
+
+    const atLeastOnePanelIsBusy = Object.values(panelGenerationStatus).includes(true)
+    
+    set({
+      panelGenerationStatus,
+      atLeastOnePanelIsBusy
+    })
+  },
+  setGeneratingText: (isGeneratingText: boolean) => set({ isGeneratingText }),
+}))

src/lib/fonts.ts

@@ -97,6 +97,8 @@ export const fontList = Object.keys(fonts)
 
 export type FontName = keyof typeof fonts
 
+export const defaultFont = "cartoonist" as FontName
+
 export const classNames = Object.values(fonts).map(font => font.className)
 
 export const className = classNames.join(" ")

src/types.ts

@@ -29,6 +29,14 @@ export interface RenderRequest {
   width: number // fixed at 1024 for now
   height: number // fixed at 512 for now
 
+  // upscaling factor
+  // 0: no upscaling
+  // 1: no upscaling
+  // 2: 2x larger
+  // 3: 3x larger
+  // 4x: 4x larger, up to 4096x4096 (warning: a PNG of this size can be 50 Mb!)
+  upscalingFactor: number
+
   projection: ProjectionMode
 
   cache: CacheMode