working to allow ppl to pick the layout

package-lock.json

@@ -53,6 +53,7 @@
         "tailwind-merge": "^1.13.2",
         "tailwindcss": "3.3.3",
         "tailwindcss-animate": "^1.0.6",
+        "tesseract.js": "^4.1.2",
         "ts-node": "^10.9.1",
         "typescript": "5.1.6",
         "usehooks-ts": "^2.9.1",
@@ -4236,6 +4237,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/bmp-js": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/bmp-js/-/bmp-js-0.1.0.tgz",
+      "integrity": "sha512-vHdS19CnY3hwiNdkaqk93DvjVLfbEcI8mys4UjuWrlX1haDmroo8o4xCzh4wD6DGV6HxRCyauwhHRqMTfERtjw=="
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -6078,6 +6084,11 @@
       "resolved": "https://registry.npmjs.org/hyphen/-/hyphen-1.6.6.tgz",
       "integrity": "sha512-XtqmnT+b9n5MX+MsqluFAVTIenbtC25iskW0Z+jLd+awfhA+ZbWKWQMIvLJccGoa2bM1R6juWJ27cZxIFOmkWw=="
     },
+    "node_modules/idb-keyval": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-6.2.1.tgz",
+      "integrity": "sha512-8Sb3veuYCyrZL+VBt9LJfZjLUPWVvqn8tG28VqYNFCo43KHcKuq+b4EiXGeuaLAQWL2YmyDgMp2aSpH9JHsEQg=="
+    },
     "node_modules/ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -6249,6 +6260,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-electron": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/is-electron/-/is-electron-2.2.2.tgz",
+      "integrity": "sha512-FO/Rhvz5tuw4MCWkpMzHFKWD2LsfHzIb7i6MdPYZ/KW7AlxawyLkqdy+jPZP1WubqEADE3O4FUENlJHDfQASRg=="
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -7028,6 +7044,14 @@
         "wrappy": "1"
       }
     },
+    "node_modules/opencollective-postinstall": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz",
+      "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==",
+      "bin": {
+        "opencollective-postinstall": "index.js"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.3",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
@@ -8138,6 +8162,34 @@
         "node": ">=6"
       }
     },
+    "node_modules/tesseract.js": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/tesseract.js/-/tesseract.js-4.1.2.tgz",
+      "integrity": "sha512-riCr/rbwt0siIf/HiC0W2J/6ndbEcRWVZvwTxeDRPgMwP4douBLYq7i4NgMigWAmJea7GA0r3XGLa2GknRYmPA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "bmp-js": "^0.1.0",
+        "idb-keyval": "^6.2.0",
+        "is-electron": "^2.2.2",
+        "is-url": "^1.2.4",
+        "node-fetch": "^2.6.9",
+        "opencollective-postinstall": "^2.0.3",
+        "regenerator-runtime": "^0.13.3",
+        "tesseract.js-core": "^4.0.4",
+        "wasm-feature-detect": "^1.2.11",
+        "zlibjs": "^0.3.1"
+      }
+    },
+    "node_modules/tesseract.js-core": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/tesseract.js-core/-/tesseract.js-core-4.0.4.tgz",
+      "integrity": "sha512-MJ+vtktjAaT0681uPl6TDUPhbRbpD/S9emko5rtorgHRZpQo7R3BG7h+3pVHgn1KjfNf1bvnx4B7KxEK8YKqpg=="
+    },
+    "node_modules/tesseract.js/node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+    },
     "node_modules/text-segmentation": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
@@ -8603,6 +8655,11 @@
         "node": ">= 6"
       }
     },
+    "node_modules/wasm-feature-detect": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/wasm-feature-detect/-/wasm-feature-detect-1.5.1.tgz",
+      "integrity": "sha512-GHr23qmuehNXHY4902/hJ6EV5sUANIJC3R/yMfQ7hWDg3nfhlcJfnIL96R2ohpIwa62araN6aN4bLzzzq5GXkg=="
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -8752,6 +8809,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/zlibjs": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/zlibjs/-/zlibjs-0.3.1.tgz",
+      "integrity": "sha512-+J9RrgTKOmlxFSDHo0pI1xM6BLVUv+o0ZT9ANtCxGkjIVCCUdx9alUF8Gm+dGLKbkkkidWIHFDZHDMpfITt4+w==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/zod": {
       "version": "3.21.4",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.21.4.tgz",

package.json

@@ -54,6 +54,7 @@
     "tailwind-merge": "^1.13.2",
     "tailwindcss": "3.3.3",
     "tailwindcss-animate": "^1.0.6",
+    "tesseract.js": "^4.1.2",
     "ts-node": "^10.9.1",
     "typescript": "5.1.6",
     "usehooks-ts": "^2.9.1",

src/app/engine/presets.ts

@@ -1,4 +1,5 @@
 import { FontName, actionman, komika, vtc } from "@/lib/fonts"
+import { pick } from "@/lib/pick"
 import { NextFontWithVariable } from "next/dist/compiled/@next/font"
 
 export type ComicFamily =
@@ -12,6 +13,7 @@ export type ComicColor =
   | "monochrome"
 
 export interface Preset {
+  id: string
   label: string
   family: ComicFamily
   color: ComicColor
@@ -24,7 +26,18 @@ export interface Preset {
 // ATTENTION!! negative prompts are not supported by the VideoChain API yet
 
 export const presets: Record<string, Preset> = {
+  random: {
+    id: "random",
+    label: "Random style",
+    family: "european",
+    color: "color",
+    font: "actionman",
+    llmPrompt: "",
+    imagePrompt: (prompt: string) => [],
+    negativePrompt: () => [],
+  },
   japanese_manga: {
+    id: "japanese_manga",
     label: "Japanese",
     family: "asian",
     color: "grayscale",
@@ -51,6 +64,7 @@ export const presets: Record<string, Preset> = {
     ],
   },
   franco_belgian: {
+    id: "franco_belgian",
     label: "Franco-Belgian",
     family: "european",
     color: "color",
@@ -75,6 +89,7 @@ export const presets: Record<string, Preset> = {
     ],
   },
   american_comic_90: {
+    id: "american_comic_90",
     label: "American (modern)",
     family: "american",
     color: "color",
@@ -134,6 +149,7 @@ export const presets: Record<string, Preset> = {
   },
   */
   american_comic_50: {
+    id: "american_comic_50",
     label: "American (1950)",
     family: "american",
     color: "color",
@@ -194,6 +210,7 @@ export const presets: Record<string, Preset> = {
 
   
   flying_saucer: {
+    id: "flying_saucer",
     label: "Flying saucer",
     family: "european",
     color: "color",
@@ -224,6 +241,7 @@ export const presets: Record<string, Preset> = {
   },
  
   humanoid: {
+    id: "humanoid",
     label: "Humanoid",
     family: "european",
     color: "color",
@@ -251,7 +269,8 @@ export const presets: Record<string, Preset> = {
       "3D render"
     ],
   },
-  milou: {
+  haddock: {
+    id: "haddock",
     label: "Haddock",
     family: "european",
     color: "color",
@@ -282,6 +301,7 @@ export const presets: Record<string, Preset> = {
     ],
   },
   armorican: {
+    id: "armorican",
     label: "Armorican",
     family: "european",
     color: "monochrome",
@@ -312,6 +332,7 @@ export const presets: Record<string, Preset> = {
     ],
   },
   render: {
+    id: "render",
     label: "3D Render",
     family: "european",
     color: "color",
@@ -385,6 +406,11 @@ export const presets: Record<string, Preset> = {
 
 export type PresetName = keyof typeof presets
 
-export const defaultPreset: PresetName = "japanese_manga"
+export const defaultPreset: PresetName = "random"
+
+export const getPreset = (preset?: PresetName): Preset => presets[preset || defaultPreset] || presets[defaultPreset]
 
-export const getPreset = (preset?: PresetName): Preset => presets[preset || defaultPreset] || presets[defaultPreset]
+export const getRandomPreset = (): Preset => {
+  const presetName = pick(Object.keys(presets).filter(preset => preset !== "random")) as PresetName
+  return getPreset(presetName)
+}

src/app/interface/panel/index.tsx

@@ -11,9 +11,9 @@ import { useStore } from "@/app/store"
 import { cn } from "@/lib/utils"
 import { getInitialRenderedScene } from "@/lib/getInitialRenderedScene"
 import { Progress } from "@/app/interface/progress"
-import { see } from "@/app/engine/caption"
-import { writeIntoBubble } from "@/lib/writeIntoBubble"
-// import { Bubble } from "./bubble"
+
+// import { see } from "@/app/engine/caption"
+// import { replaceTextInSpeechBubbles } from "@/lib/replaceTextInSpeechBubbles"
 
 export function Panel({
   panel,
@@ -26,10 +26,12 @@ export function Panel({
   width?: number
   height?: number
  }) {
+  const ref = useRef<HTMLImageElement>(null)
   const font = useStore(state => state.font)
   const preset = useStore(state => state.preset)
   const setGeneratingImages = useStore(state => state.setGeneratingImages)
 
+  const [imageWithText, setImageWithText] = useState("")
   const panels = useStore(state => state.panels)
   const prompt = panels[panel] || ""
 
@@ -190,20 +192,27 @@ export function Panel({
     `print:border-[1.5px] print:shadow-none`,
   )
 
-  const [newMask, setNewMask] = useState("")
 
+  /*
+  text detection (doesn't work)
   useEffect(() => {
-    const transformMask = async () => {
-      if (rendered.maskUrl) {
-        const imgSrc = await writeIntoBubble(
-          rendered.maskUrl,
-          "LOREM IPSUM! Dolor sit amet.."
-        )
-        setNewMask(imgSrc)
+    const fn = async () => {
+      if (!rendered.assetUrl || !ref.current) {
+        return
+      }
+
+      const result = await replaceTextInSpeechBubbles(
+        rendered.assetUrl,
+        "Lorem ipsum dolor sit amet, dolor ipsum. Sit amet? Ipsum! Dolor!!!"
+      )
+      if (result) {
+        setImageWithText(result)
       }
     }
-    transformMask()
-  }, [rendered.maskUrl])
+    fn()
+
+  }, [rendered.assetUrl, ref.current])
+  */
 
 
   if (prompt && !rendered.assetUrl) {
@@ -211,7 +220,7 @@ export function Panel({
       <div className={cn(
         frameClassName,
         `flex flex-col items-center justify-center`,
-        className
+        className,
       )}>
        <Progress isLoading />
       </div>
@@ -224,20 +233,15 @@ export function Panel({
       { "grayscale": preset.color === "grayscale" },
       className
     )}>
-        {rendered.assetUrl && <img
-          src={rendered.assetUrl}
+        {rendered.assetUrl &&
+        <img
+          ref={ref}
+          src={imageWithText || rendered.assetUrl}
           width={width}
           height={height}
           alt={rendered.alt}
-          className="h-full max-w-fit print:w-full print:object-cover"
+          className="w-full object-cover md:h-full md:max-w-fit print:w-full print:object-cover"
         />}
-
-
-
-      {/*<Bubble className="absolute top-4 left-4">
-        Hello, world!
-      </Bubble>
-      */}
     </div>
   )
 }

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

@@ -1,6 +1,8 @@
 "use client"
 
-import { useState } from "react"
+import { useEffect, useState } from "react"
+import { useSearchParams } from "next/navigation"
+import Image from "next/image"
 
 import {
   Select,
@@ -11,27 +13,67 @@ import {
 } from "@/components/ui/select"
 import { Label } from "@/components/ui/label"
 import { cn } from "@/lib/utils"
-import { FontName, fontList, fonts } from "@/lib/fonts"
+import { FontName, defaultFont, fontList, fonts } from "@/lib/fonts"
 import { Input } from "@/components/ui/input"
-import { defaultPreset, getPreset, presets } from "@/app/engine/presets"
+import { PresetName, defaultPreset, getPreset, getRandomPreset, presets } from "@/app/engine/presets"
 import { useStore } from "@/app/store"
 import { Button } from "@/components/ui/button"
+import { LayoutName, allLayoutLabels, allLayouts, defaultLayout } from "@/app/layouts"
 
-export function TopMenu() {
-  const font = useStore(state => state.font)
-  const setFont = useStore(state => state.setFont)
+import layoutPreview0 from "../../../../public/layouts/layout0.jpg"
+import layoutPreview1 from "../../../../public/layouts/layout1.jpg"
+import layoutPreview2 from "../../../../public/layouts/layout2.jpg"
+import layoutPreview3 from "../../../../public/layouts/layout3.jpg"
+import { StaticImageData } from "next/image"
 
-  const preset = useStore(state => state.preset)
-  const setPreset = useStore(state => state.setPreset)
+const layoutIcons: Partial<Record<LayoutName, StaticImageData>> = {
+  Layout0: layoutPreview0,
+  Layout1: layoutPreview1,
+  Layout2: layoutPreview2,
+  Layout3: layoutPreview3
+}
 
+export function TopMenu() {
+   // const font = useStore(state => state.font)
+  // const setFont = useStore(state => state.setFont)
+  const preset = useStore(state => state.preset)
   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 generate = useStore(state => state.generate)
 
   const isGeneratingStory = useStore(state => state.isGeneratingStory)
   const atLeastOnePanelIsBusy = useStore(state => state.atLeastOnePanelIsBusy)
   const isBusy = isGeneratingStory || atLeastOnePanelIsBusy
 
-  const [draft, setDraft] = useState("")
+  const searchParams = useSearchParams()
+
+  const requestedPreset = (searchParams.get('preset') as PresetName) || defaultPreset
+  const requestedFont = (searchParams.get('font') as FontName) || defaultFont
+  const requestedPrompt = (searchParams.get('prompt') as string) || ""
+  const requestedLayout = (searchParams.get('prompt') as LayoutName) || defaultLayout
+
+  const [draftPrompt, setDraftPrompt] = useState(requestedPrompt)
+  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
+    if (!isBusy && (promptChanged || presetChanged || layoutChanged)) {
+      generate(draftPrompt, draftPreset, draftLayout)
+    }
+  }
+
+  useEffect(() => {
+    const layoutChanged = draftLayout !== layout
+    if (layoutChanged && !isBusy) {
+      setLayout(draftLayout)
+    }
+  }, [layout, draftLayout, isBusy])
+    
   return (
     <div className={cn(
       `print:hidden`,
@@ -44,18 +86,20 @@ export function TopMenu() {
       `space-y-2 md:space-y-0 md:space-x-3 lg:space-x-6`
     )}>
       <div className="flex flex-row space-x-6 md:space-x-3">
-        <div className={cn(
+      <div className={cn(
           `transition-all duration-200 ease-in-out`,
           `flex flex-row items-center justify-start space-x-3 font-mono w-1/2 md:w-auto`
           )}>
-          <Label className="flex text-sm md:w-24">Preset:</Label>
+
+          {/* <Label className="flex text-xs md:text-sm md:w-24">Style:</Label> */}
+
           <Select
             defaultValue={defaultPreset}
-            onValueChange={(value) => { setPreset(getPreset(value as FontName)) }}
+            onValueChange={(value) => { setDraftPreset(value as PresetName) }}
             disabled={isBusy}
             >
             <SelectTrigger className="flex-grow">
-              <SelectValue className="text-sm" placeholder="Type" />
+              <SelectValue className="text-xs md:text-sm" placeholder="Style" />
             </SelectTrigger>
             <SelectContent>
               {Object.entries(presets).map(([key, preset]) =>
@@ -64,18 +108,57 @@ export function TopMenu() {
             </SelectContent>
           </Select>
         </div>
+        <div className={cn(
+          `transition-all duration-200 ease-in-out`,
+          `flex flex-row items-center justify-start space-x-3 font-mono w-1/2 md:w-auto`
+          )}>
+
+          {/* <Label className="flex text-xs md:text-sm md:w-24">Style:</Label> */}
+
+          <Select
+            defaultValue={defaultLayout}
+            onValueChange={(value) => { setDraftLayout(value as LayoutName) }}
+            disabled={isBusy}
+            >
+            <SelectTrigger className="flex-grow">
+              <SelectValue className="text-xs md:text-sm" placeholder="Layout" />
+            </SelectTrigger>
+            <SelectContent>
+              {Object.keys(allLayouts).map(key =>
+                <SelectItem key={key} value={key} className="w-full">
+                  <div className="space-x-6 flex flex-row items-center justify-between font-mono">
+                    <div className="flex">{
+                      (allLayoutLabels as any)[key]
+                    }</div>
+                 
+                      {(layoutIcons as any)[key]
+                        ? <Image
+                            className="rounded-sm opacity-75"
+                            src={(layoutIcons as any)[key]}
+                            width={20}
+                            height={18}
+                            alt={key}
+                        /> : null}
+              
+                  </div>
+                </SelectItem>
+              )}
+            </SelectContent>
+          </Select>
+        </div>
+        {/*
         <div className={cn(
           `transition-all duration-200 ease-in-out`,
           `flex flex-row items-center space-x-3 font-mono w-1/2 md:w-auto md:hidden`
         )}>
-          <Label className="flex text-sm md:w-24">Font:</Label>
+          <Label className="flex text-xs md:text-sm md:w-24">Font:</Label>
           <Select
             defaultValue={fontList.includes(preset.font) ? preset.font : "cartoonist"}
             onValueChange={(value) => { setFont(value as FontName) }}
             disabled={atLeastOnePanelIsBusy}
             >
             <SelectTrigger className="flex-grow">
-              <SelectValue className="text-sm" placeholder="Type" />
+              <SelectValue className="text-xs md:text-sm" placeholder="Type" />
             </SelectTrigger>
             <SelectContent>
               {Object.keys(fonts)
@@ -89,6 +172,7 @@ export function TopMenu() {
             </SelectContent>
           </Select>
         </div>
+          */}
       </div>
       <div className={cn(
           `transition-all duration-200 ease-in-out`,
@@ -99,39 +183,32 @@ export function TopMenu() {
           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)
+            setDraftPrompt(e.target.value)
           }}
           onKeyDown={({ key }) => {
-            if (isBusy) {
-              return
-            }
             if (key === 'Enter') {
-              if (draft.trim() !== prompt.trim()) {
-                setPrompt(draft.trim())
-              }
+              handleSubmit()
             }
           }}
-          value={draft}
+          value={draftPrompt}
          />
         <Button
           onClick={() => {
-            if (isBusy) {
-              return
-            }
-            if (draft.trim() !== prompt.trim()) {
-              setPrompt(draft.trim())
-            }
+            handleSubmit()
           }}
-          disabled={!draft?.trim().length || isBusy}
+          disabled={!draftPrompt?.trim().length || isBusy}
         >
           Generate
         </Button>
       </div>
+      {/*
+        Let's add this feature later, because right now people
+        are confused about why they can't activate it
       <div className={cn(
           `transition-all duration-200 ease-in-out`,
           `hidden md:flex flex-row items-center space-x-3 font-mono w-full md:w-auto`
       )}>
-        <Label className="flex text-sm w-24">Font:</Label>
+        <Label className="flex text-xs md:text-sm w-24">Font:</Label>
         <Select
           defaultValue={fontList.includes(preset.font) ? preset.font : "actionman"}
           onValueChange={(value) => { setFont(value as FontName) }}
@@ -139,7 +216,7 @@ export function TopMenu() {
           disabled={true}
           >
           <SelectTrigger className="flex-grow">
-            <SelectValue className="text-sm" placeholder="Type" />
+            <SelectValue className="text-xs md:text-sm" placeholder="Type" />
           </SelectTrigger>
           <SelectContent>
             {Object.keys(fonts)
@@ -153,6 +230,7 @@ export function TopMenu() {
           </SelectContent>
         </Select>
       </div>
+              */}
     </div>
   )
 }

src/app/layouts/index.tsx

@@ -4,6 +4,41 @@ import { Panel } from "@/app/interface/panel"
 import { pick } from "@/lib/pick"
 import { Grid } from "@/app/interface/grid"
 
+export function Layout0() {
+  return (
+    <Grid className="grid-cols-2 grid-rows-2">
+      <div className="bg-stone-100 col-span-1 row-span-1">
+        <Panel
+          panel={0}
+          width={1024}
+          height={1024}
+        />
+      </div>
+      <div className="bg-zinc-100  col-span-1 row-span-1">
+        <Panel
+          panel={1}
+          width={1024}
+          height={1024}
+        />
+      </div>
+      <div className="bg-gray-100  col-span-1 row-span-1">
+        <Panel
+          panel={2}
+          width={1024}
+          height={1024}
+        />
+      </div>
+      <div className="bg-slate-100 col-span-1 row-span-1">
+        <Panel
+          panel={3}
+          width={1024}
+          height={1024}
+        />
+      </div>
+    </Grid>
+  )
+}
+
 export function Layout1() {
   return (
     <Grid className="grid-cols-2 grid-rows-3">
@@ -39,7 +74,7 @@ export function Layout1() {
   )
 }
 
-export function Layout2() {
+export function Layout2_todo() {
   return (
     <Grid className="grid-cols-2 grid-rows-3">
       <div className="bg-gray-100 row-span-3 col-span-1">
@@ -74,7 +109,7 @@ export function Layout2() {
   )
 }
 
-export function Layout3() {
+export function Layout3_todo() {
   return (
     <Grid className="grid-cols-5 grid-rows-2">
       <div className="bg-zinc-100 col-span-3">
@@ -111,7 +146,7 @@ export function Layout3() {
   )
 }
 
-export function Layout4() {
+export function Layout4_todo() {
   return (
     <Grid className="grid-cols-2 grid-rows-3">
       <div className="bg-slate-100 row-span-2">
@@ -147,7 +182,7 @@ export function Layout4() {
 }
 
 
-export function Layout5() {
+export function Layout2() {
   return (
     <Grid className="grid-cols-3 grid-rows-2">
       <div className="bg-zinc-100 col-span-1 row-span-1">
@@ -182,7 +217,7 @@ export function Layout5() {
   )
 }
 
-export function Layout6() {
+export function Layout3() {
   return (
     <Grid className="grid-cols-3 grid-rows-2">
       <div className="bg-zinc-100 col-span-2 row-span-1">
@@ -217,19 +252,36 @@ export function Layout6() {
   )
 }
 
-// export const layouts = { Layout1, Layout2, Layout3, Layout4, Layout5, Layout6 }
-export const allLayouts = { 
+// export const layouts = { Layout1, Layout2_todo, Layout3_todo, Layout4_todo, Layout2, Layout3 }
+export const allLayouts = {
+  random: <></>,
+  Layout0,
   Layout1,
-  Layout5,
-  Layout6 
+  Layout2,
+  Layout3 
+}
+
+export const allLayoutLabels = {
+  random: "Random layout",
+  Layout0: "Layout 0",
+  Layout1: "Layout 1",
+  Layout2: "Layout 2",
+  Layout3: "Layout 3",
 }
 
 export type LayoutName = keyof typeof allLayouts 
 
-export function getRandomLayoutName(): LayoutName {
-  return pick(Object.keys(allLayouts) as LayoutName[]) as LayoutName
+export const defaultLayout: LayoutName = "random"
+
+export type LayoutCategory = "square" | "fluid"
+
+export const nonRandomLayouts = Object.keys(allLayouts).filter(layout => layout !== "random")
+
+export const getRandomLayoutName = (): LayoutName => {
+  return pick(nonRandomLayouts) as LayoutName
 }
 
 export function getRandomLayoutNames(): LayoutName[] {
-  return Object.keys(allLayouts).sort(() => Math.random() - 0.5) as LayoutName[]
-}
+  return nonRandomLayouts.sort(() => Math.random() - 0.5) as LayoutName[]
+}
+

src/app/main.tsx

@@ -1,13 +1,10 @@
 "use client"
 
-import { useEffect, useRef, useState, useTransition } from "react"
-import { useSearchParams } from "next/navigation"
-
-import { PresetName, defaultPreset, getPreset } from "@/app/engine/presets"
+import { useEffect, useState, useTransition } from "react"
 
 import { cn } from "@/lib/utils"
 import { TopMenu } from "./interface/top-menu"
-import { FontName, defaultFont, fonts } from "@/lib/fonts"
+import { fonts } from "@/lib/fonts"
 import { getRandomLayoutName } from "./layouts"
 import { useStore } from "./store"
 import { Zoom } from "./interface/zoom"
@@ -17,23 +14,13 @@ import { Page } from "./interface/page"
 
 export default function Main() {
   const [_isPending, startTransition] = useTransition()
-  const searchParams = useSearchParams()
-
-  const requestedPreset = (searchParams.get('preset') as PresetName) || defaultPreset
-  const requestedFont = (searchParams.get('font') as FontName) || defaultFont
-  const requestedPrompt = (searchParams.get('prompt') as string) || ""
 
   const isGeneratingStory = useStore(state => state.isGeneratingStory)
   const setGeneratingStory = useStore(state => state.setGeneratingStory)
 
   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 setLayouts = useStore(state => state.setLayouts)
 
@@ -43,18 +30,6 @@ export default function Main() {
 
   const [waitABitMore, setWaitABitMore] = useState(false)
 
-  // 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(() => {
@@ -64,14 +39,6 @@ export default function Main() {
       setWaitABitMore(false)
       setGeneratingStory(true)
 
-      const newLayouts = [
-        getRandomLayoutName(),
-        getRandomLayoutName(),
-      ]
-
-      console.log("using layouts " + newLayouts)
-      setLayouts(newLayouts)
-
       try {
 
         const llmResponse = await getStory({ preset, prompt })

src/app/ocr.tsx

@@ -0,0 +1,3 @@
+"use client"
+
+import { createWorker } from "tesseract.js"

src/app/store/index.ts

@@ -3,8 +3,8 @@
 import { create } from "zustand"
 
 import { FontName } from "@/lib/fonts"
-import { Preset, getPreset } from "@/app/engine/presets"
-import { LayoutName, getRandomLayoutNames } from "../layouts"
+import { Preset, PresetName, getPreset, getRandomPreset } from "@/app/engine/presets"
+import { LayoutName, getRandomLayoutName, getRandomLayoutNames } from "../layouts"
 import html2canvas from "html2canvas"
 
 export const useStore = create<{
@@ -14,6 +14,7 @@ export const useStore = create<{
   nbFrames: number
   panels: string[]
   captions: Record<string, string>
+  layout: LayoutName
   layouts: LayoutName[]
   zoomLevel: number
   page: HTMLDivElement
@@ -25,6 +26,7 @@ export const useStore = create<{
   setFont: (font: FontName) => void
   setPreset: (preset: Preset) => void
   setPanels: (panels: string[]) => void
+  setLayout: (layout: LayoutName) => void
   setLayouts: (layouts: LayoutName[]) => void
   setCaption: (panelId: number, caption: string) => void
   setZoomLevel: (zoomLevel: number) => void
@@ -34,6 +36,7 @@ export const useStore = create<{
   setGeneratingText: (isGeneratingText: boolean) => void
   pageToImage: () => Promise<string>
   download: () => Promise<void>
+  generate: (prompt: string, presetName: PresetName, layoutName: LayoutName) => void
 }>((set, get) => ({
   prompt: "",
   font: "actionman",
@@ -41,6 +44,7 @@ export const useStore = create<{
   nbFrames: 1,
   panels: [],
   captions: {},
+  layout: "Layout1",
   layouts: getRandomLayoutNames(),
   zoomLevel: 60,
   page: undefined as unknown as HTMLDivElement,
@@ -53,9 +57,6 @@ export const useStore = create<{
     if (prompt === existingPrompt) { return }
     set({
       prompt,
-      layouts: getRandomLayoutNames(),
-      panels: [],
-      captions: {},
     })
   },
   setFont: (font: FontName) => {
@@ -63,9 +64,6 @@ export const useStore = create<{
     if (font === existingFont) { return }
     set({
       font,
-      layouts: getRandomLayoutNames(),
-      panels: [],
-      captions: {}
     })
   },
   setPreset: (preset: Preset) => {
@@ -73,9 +71,6 @@ export const useStore = create<{
     if (preset.label === existingPreset.label) { return }
     set({
       preset,
-      layouts: getRandomLayoutNames(),
-      panels: [],
-      captions: {}
     })
   },
   setNbFrames: (nbFrames: number) => {
@@ -83,9 +78,6 @@ export const useStore = create<{
     if (nbFrames === existingNbFrames) { return }
     set({
       nbFrames,
-      layouts: getRandomLayoutNames(),
-      panels: [],
-      captions: {}
     })
   },
   setPanels: (panels: string[]) => set({ panels }),
@@ -97,6 +89,16 @@ export const useStore = create<{
       }
     })
   },
+  setLayout: (layoutName: LayoutName) => {
+    const layout = layoutName === "random"
+      ? getRandomLayoutName()
+      : layoutName
+
+    set({
+      layout,
+      layouts: [layout, layout]
+    })
+  },
   setLayouts: (layouts: LayoutName[]) => set({ layouts }),
   setZoomLevel: (zoomLevel: number) =>  set({ zoomLevel }),
   setPage: (page: HTMLDivElement) => {
@@ -144,5 +146,20 @@ export const useStore = create<{
     } else {
       window.open(data)
     }
+  },
+  generate: (prompt: string, presetName: PresetName, layoutName: LayoutName) => {
+    const layout = layoutName === "random"
+      ? getRandomLayoutName()
+      : layoutName
+    set({
+      prompt,
+      panels: [],
+      captions: {},
+      preset: presetName === "random"
+        ? getRandomPreset()
+        : getPreset(presetName),
+      layout,
+      layouts: [layout, layout],
+    })
   }
 }))

src/lib/computePercentage.ts

@@ -0,0 +1,4 @@
+export function computePercentage(input: string | number) {
+  // TODO something
+  return 0
+}

src/lib/loadImageToCanvas.ts

@@ -0,0 +1,28 @@
+export async function loadImageToCanvas(imageBase64: string): Promise<HTMLCanvasElement> {
+  return new Promise((resolve, reject) => {
+    // create a new image object
+    let img = new Image();
+    // specify a function to run when the image is fully loaded
+    img.onload = () => {
+      // create a canvas element
+      let canvas = document.createElement('canvas');
+      canvas.width = img.width;
+      canvas.height = img.height;
+      // get the context of the canvas
+      let ctx = canvas.getContext('2d');
+      if (ctx) {
+        // draw the image into the canvas
+        ctx.drawImage(img, 0, 0);
+        // resolve the promise with the canvas
+        resolve(canvas);
+      } else {
+        reject('Error creating the context of canvas');
+      }
+    };
+    // specify a function to run when the image could not be loaded
+    img.onerror = () => {
+      reject('Image could not be loaded');
+    };
+    img.src = imageBase64; // must be a data;image/.... prefixed URL string
+  });
+}

src/lib/replaceTextInSpeechBubbles.ts

@@ -0,0 +1,98 @@
+"use client"
+
+import { createWorker } from "tesseract.js"
+import { loadImageToCanvas } from "./loadImageToCanvas";
+
+export async function replaceTextInSpeechBubbles(image: string, customText: string) {
+  console.log('creating OCR worker to find bubbles inside', image);
+
+  const worker = await createWorker({
+    logger: (info) => {
+      console.log(info)
+    },
+  });
+
+  const canvas = await loadImageToCanvas(image)
+ 
+  const ctx = canvas.getContext('2d')!;
+
+  try {
+    await worker.load();
+    await worker.loadLanguage('eng');
+    await worker.initialize('eng');
+
+    const { data } = await worker.recognize(canvas);
+    const lines = data.lines || [];
+
+    // Draw the lines on the image
+    ctx.fillStyle = "white";
+
+    lines.forEach((line) => {
+      ctx.fillRect(line.bbox.x0, line.bbox.y0, line.bbox.x1 - line.bbox.x0, line.bbox.y1 - line.bbox.y0);
+      
+      const bubbleWidth = line.bbox.x1 - line.bbox.x0;
+      const bubbleHeight = line.bbox.y1 - line.bbox.y0;
+      let fontSize = 18;
+      ctx.font = `${fontSize}px Arial`;
+
+      /*
+      while (
+        ctx.measureText(customText).width > bubbleWidth || fontSize * 1.2 // line height
+         > bubbleHeight) {
+        fontSize -= 1;
+        ctx.font = `${fontSize}px Arial`;
+      }
+      
+      const lines = wrapText(ctx, customText, line.bbox.x0, line.bbox.y0, bubbleWidth, fontSize);
+      
+      ctx.fillStyle = "black";
+      lines.forEach((text, i) => {
+        ctx.fillText(text, line.bbox.x0, line.bbox.y0 + (i * fontSize * 1.2));
+      });
+      */
+    })
+
+    await worker.terminate();
+
+    // Convert the Canvas to image data
+    const imgAsDataURL = canvas.toDataURL('image/png');
+
+    if (typeof window !== "undefined") {
+      const foo = (window as any)
+      if (!foo.debugJujul) {
+        foo.debugJujul = []
+      }
+      foo.debugJujul.push({
+        lines
+      })
+    }
+    console.log("lines:", lines)
+
+    return imgAsDataURL;
+
+  } catch (err) {
+    console.error(err);
+  }
+  return "";
+}
+
+function wrapText(context: CanvasRenderingContext2D, text: string, x: number, y: number, maxWidth: number, lineHeight: number) {
+  const words = text.split(' ');
+  let line = '';
+  const lines = [];
+
+  for(let n = 0; n < words.length; n++) {
+    let testLine = line + words[n] + ' ';
+    let metrics = context.measureText(testLine);
+    let testWidth = metrics.width;
+    if (testWidth > maxWidth && n > 0) {
+      lines.push(line);
+      line = words[n] + ' ';
+    }
+    else {
+      line = testLine;
+    }
+  }
+  lines.push(line);
+  return lines;
+}

src/lib/writeIntoBubble.ts

@@ -1,115 +0,0 @@
-/*
-I have a PNG image which contains a colored shape (roughly in the shape of a speech bubble), surrounded by white
-
-Please write a TypeScript function (it should work in the browser) to:
-
-1. replace all the white pixels with a transparent PNG pixel
-2.  replace all the colored pixels with a white pixel
-3. write some input text into the colored shape
-4. Make sure line returns are handled
-5. It should have some padding (eg. 20px)
-6. use Comic Sans MS
-
-You can use the canvas for your operation. The signature should be something like:
-
-- Please adjust the font size, based on the available number of pixels inside the bubble, taking some margin into account. 
-- The text should not be below 8px
-- If there is not enough room to display it without going outside the shape, then crop the text.
-- in other words, NEVER write outside the shape!
-
-The function should be something like:
-
-writeIntoBubble(image: string, text: string): Promise<string>
-*/
-
-export async function writeIntoBubble(image: string, text: string): Promise<string> {
-  const padding = 20;  // Pixels
-  return new Promise((resolve, reject) => {
-    const img = new Image();
-    img.onload = () => {
-      const physicalWidth = img.width;
-      const physicalHeight = img.height;
-      const canvas = document.createElement('canvas');
-      const ctx = canvas.getContext('2d');
-      if (!ctx) {
-        reject('Unable to get canvas context');
-        return;
-      }
-      canvas.width = physicalWidth;
-      canvas.height = physicalHeight;
-      ctx.drawImage(img, 0, 0, physicalWidth, physicalHeight);
-
-      const imageData = ctx.getImageData(0, 0, physicalWidth, physicalHeight);
-      const data = imageData.data;
-
-      let minX = physicalWidth, minY = physicalHeight, maxX = 0, maxY = 0;
-
-      for (let y = 0; y < physicalHeight; y++) {
-        for (let x = 0; x < physicalWidth; x++) {
-          const i = (y * physicalWidth + x) * 4;
-          if (data[i] !== 255 || data[i + 1] !== 255 || data[i + 2] !== 255) {
-            minX = Math.min(minX, x);
-            minY = Math.min(minY, y);
-            maxX = Math.max(maxX, x);
-            maxY = Math.max(maxY, y);
-            data[i] = data[i + 1] = data[i + 2] = 255;
-            data[i + 3] = 255;
-          } else {
-            data[i + 3] = 0;
-          }
-        }
-      }
-
-      ctx.putImageData(imageData, 0, 0);
-
-      ctx.save();
-      ctx.setTransform(1, 0, 0, 1, 0, 0);  // Reset transforms to handle padding correctly
-
-      const textX = minX + padding;
-      const textY = minY  + padding;
-      const textWidth = (maxX - minX) - 2 * padding;
-      const textHeight = (maxY - minY) - 2 * padding;
-
-      ctx.restore();
-
-      ctx.rect(textX, textY, textWidth, textHeight);
-      ctx.clip();  // Clip outside of the region
-
-      let fontSize = 20;  // Start with a large size
-      let lines = [];
-      do {
-        ctx.font = `${fontSize}px Comic Sans MS`;
-        lines = wrapText(ctx, text, textWidth);
-        fontSize -= 2;  // Reduce size and try again if text doesn't fit
-      } while(lines.length > textHeight / fontSize && fontSize > 8);
-      ctx.font = `${fontSize}px Comic Sans MS`;
-
-      lines.forEach((line, i) => ctx.fillText(line, textX, textY + padding + i * fontSize));
-
-      resolve(canvas.toDataURL());
-    };
-    img.onerror = reject;
-    img.src = image;
-  });
-}
-
-// Function to wrap text into lines that fit inside a specified width
-function wrapText(context: CanvasRenderingContext2D, text: string, maxWidth: number): string[] {
-  const words = text.split(' ');
-  const lines = [];
-  let line = '';
-
-  for (let n = 0; n < words.length; n++) {
-    const testLine = line + words[n] + ' ';
-    const metrics = context.measureText(testLine);
-    const testWidth = metrics.width;
-    if (testWidth > maxWidth && n > 0) {
-      lines.push(line);
-      line = words[n] + ' ';
-    } else {
-      line = testLine;
-    }
-  }
-  lines.push(line);
-  return lines;
-}

src/lib/writeIntoBubbles.ts

@@ -1,65 +0,0 @@
-import { loadImage } from "./loadImage"
-import { writeIntoBubble } from "./writeIntoBubble"
-
-export async function writeIntoBubbles(image: string, texts: string[]): Promise<string> {
-  const loadImg = await loadImage(image);
-  
-  const canvas = document.createElement('canvas');
-  const context = canvas.getContext('2d');
-  
-  canvas.width = loadImg.width;
-  canvas.height = loadImg.height;
-  context?.drawImage(loadImg, 0, 0, loadImg.width, loadImg.height);
-  
-  const untouchedImageData = context?.getImageData(0, 0, loadImg.width, loadImg.height);
-  if (!untouchedImageData) {
-    throw new Error("untouchedImageData is invalid")
-  }
-  const colorSet = new Set<string>(); // This is the unique color container
-  
-  for(let i = 0; i < untouchedImageData?.data.length; i += 4){
-    const r = untouchedImageData?.data[i];
-    const g = untouchedImageData?.data[i+1];
-    const b = untouchedImageData?.data[i+2];
-    const colorString = `rgb(${r},${g},${b})`;
-    
-    if(!colorSet.has(colorString)){
-      colorSet.add(colorString);
-      var newCanvas = document.createElement('canvas');
-      newCanvas.width = loadImg.width;
-      newCanvas.height = loadImg.height;
-      
-      var newContext = newCanvas.getContext('2d');
-      newContext?.drawImage(loadImg, 0, 0, loadImg.width, loadImg.height);
-      var newImageData = newContext?.getImageData(0, 0, loadImg.width, loadImg.height);
-      if (!newImageData) {
-        throw new Error("newImageData is invalid")
-      }
-
-      for(let j = 0; j < newImageData?.data.length; j += 4){
-        const _r = newImageData?.data[j];
-        const _g = newImageData?.data[j+1];
-        const _b = newImageData?.data[j+2];
-        const _colorString = `rgb(${_r},${_g},${_b})`;
-        
-        if(_colorString !== colorString){
-          newImageData?.data.set([0,0,0,0], j);
-        }
-      }
-
-      newContext?.putImageData(newImageData as ImageData, 0, 0);
-
-      let imageBase64 = newCanvas.toDataURL();
-
-      if(texts.length > 0){
-        let text = texts.shift() as string;
-        if (imageBase64 != '') {
-          const processedBase64 = await writeIntoBubble(imageBase64, text);
-          const newImg = await loadImage(processedBase64);
-          context?.drawImage(newImg, 0, 0, loadImg.width, loadImg.height);
-        }
-      }
-    }
-  }
-  return canvas.toDataURL();
-}