let's use two pages

.env

@@ -11,6 +11,8 @@ RENDERING_ENGINE="INFERENCE_API"
 # - OPENAI
 LLM_ENGINE="INFERENCE_API"
 
+NEXT_PUBLIC_MAX_NB_PAGES="2"
+
 # Not implemented for the Inference API yet - you can submit a PR if you have some ideas
 NEXT_PUBLIC_CAN_UPSCALE="false"
 

package-lock.json

@@ -60,7 +60,6 @@
         "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",
@@ -156,9 +155,9 @@
       }
     },
     "node_modules/@eslint-community/regexpp": {
-      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.9.1.tgz",
-      "integrity": "sha512-Y27x+MBLjXa+0JWDhykM3+JE+il3kHKAEqabfEWq3SDhZjLYb6/BHL/JKFnH3fe207JaXkyDo685Oc2Glt6ifA==",
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.10.0.tgz",
+      "integrity": "sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==",
       "engines": {
         "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
       }
@@ -236,11 +235,11 @@
       }
     },
     "node_modules/@humanwhocodes/config-array": {
-      "version": "0.11.11",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.11.tgz",
-      "integrity": "sha512-N2brEuAadi0CcdeMXUkhbZB84eskAc8MEX1By6qEchoVywSgXPIjou4rYsl0V3Hj0ZnuGycGCjdNgockbzeWNA==",
+      "version": "0.11.13",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
+      "integrity": "sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==",
       "dependencies": {
-        "@humanwhocodes/object-schema": "^1.2.1",
+        "@humanwhocodes/object-schema": "^2.0.1",
         "debug": "^4.1.1",
         "minimatch": "^3.0.5"
       },
@@ -261,9 +260,9 @@
       }
     },
     "node_modules/@humanwhocodes/object-schema": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
-      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz",
+      "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw=="
     },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.3",
@@ -300,9 +299,9 @@
       "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.19",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.19.tgz",
-      "integrity": "sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==",
+      "version": "0.3.20",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz",
+      "integrity": "sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -1630,21 +1629,21 @@
       }
     },
     "node_modules/@react-pdf/font": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/@react-pdf/font/-/font-2.3.6.tgz",
-      "integrity": "sha512-JYV+KmVyG2tPdpCK0/iFiBy1V7VHz2fETttKCgTRsLAo+w8RpM0pUGSAYROSuRl7yqbhiKGw/A24PYWhBReiOQ==",
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/@react-pdf/font/-/font-2.3.7.tgz",
+      "integrity": "sha512-NoCieWea6c1mCpDBoyjPbUEC1qXa+S/M7+8vYPZ71aTMgX7co3gQc2e6YKwrSQeQP+BsBq3LSVhjI2ETXfcytw==",
       "dependencies": {
         "@babel/runtime": "^7.20.13",
-        "@react-pdf/types": "^2.3.3",
+        "@react-pdf/types": "^2.3.4",
         "cross-fetch": "^3.1.5",
         "fontkit": "^2.0.2",
         "is-url": "^1.2.4"
       }
     },
     "node_modules/@react-pdf/image": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/@react-pdf/image/-/image-2.2.1.tgz",
-      "integrity": "sha512-f0+cEP6pSBmk8eS/wP2tMsJcv2c7xjzca6cr1kwcapr1nzkPrh6fMdEeFl6kR2/HlJK/JoHo+xxlzRiQ8V2lrw==",
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@react-pdf/image/-/image-2.2.2.tgz",
+      "integrity": "sha512-990JvRZuhsnHyAGd7gvmhfr+4/5PAHLH9IgDstaEDLEq2eFAIQFuNM7k3D6kjKgV1mM7Jqif3CWqrcHBF3jrJw==",
       "dependencies": {
         "@babel/runtime": "^7.20.13",
         "@react-pdf/png-js": "^2.2.0",
@@ -1652,18 +1651,18 @@
       }
     },
     "node_modules/@react-pdf/layout": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/@react-pdf/layout/-/layout-3.6.2.tgz",
-      "integrity": "sha512-YD3/tDC6p5XPCXI04zH79bgX8LytjxEYfeCtsIzEFk0A2VvIHoRnRRDZ2OhZmO5g112ykyjY8vn9//ubTt+Ktg==",
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/@react-pdf/layout/-/layout-3.6.3.tgz",
+      "integrity": "sha512-w6ACZ9o18Q5wbzsY9a4KW2Gqn6Drt3AN/kb/I6SBz/L7PAJ9rPQBIDq/s5qZJ+/WwWy33rcC8WC1givtDhjCHQ==",
       "dependencies": {
         "@babel/runtime": "^7.20.13",
         "@react-pdf/fns": "2.0.1",
-        "@react-pdf/image": "^2.2.1",
+        "@react-pdf/image": "^2.2.2",
         "@react-pdf/pdfkit": "^3.0.2",
         "@react-pdf/primitives": "^3.0.0",
-        "@react-pdf/stylesheet": "^4.1.7",
+        "@react-pdf/stylesheet": "^4.1.8",
         "@react-pdf/textkit": "^4.2.0",
-        "@react-pdf/types": "^2.3.3",
+        "@react-pdf/types": "^2.3.4",
         "@react-pdf/yoga": "^4.1.2",
         "cross-fetch": "^3.1.5",
         "emoji-regex": "^10.2.1",
@@ -1697,15 +1696,15 @@
       "integrity": "sha512-0HGcknrLNwyhxe+SZCBL29JY4M85mXKdvTZE9uhjNbADGgTc8wVnkc5+e4S/lDvugbVISXyuIhZnYwtK9eDnyQ=="
     },
     "node_modules/@react-pdf/render": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/@react-pdf/render/-/render-3.2.6.tgz",
-      "integrity": "sha512-nsd1sleWMzBdrYGv5BwChPgVwoTZilfdiadE5wQiblFqG1C7EYINadalnEl1tjldKAzofSPBLKJbnSGR5r2lIQ==",
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/@react-pdf/render/-/render-3.2.7.tgz",
+      "integrity": "sha512-fAgbbAAkVL0hpcf1vUJLHxuPjPBqZuq8nors7fCwvoatBBwOWP9fza7IDPeFKN7+ZOnfmIZzes8Kc/DNHzJohw==",
       "dependencies": {
         "@babel/runtime": "^7.20.13",
         "@react-pdf/fns": "2.0.1",
         "@react-pdf/primitives": "^3.0.0",
         "@react-pdf/textkit": "^4.2.0",
-        "@react-pdf/types": "^2.3.3",
+        "@react-pdf/types": "^2.3.4",
         "abs-svg-path": "^0.1.1",
         "color-string": "^1.5.3",
         "normalize-svg-path": "^1.1.0",
@@ -1714,17 +1713,17 @@
       }
     },
     "node_modules/@react-pdf/renderer": {
-      "version": "3.1.13",
-      "resolved": "https://registry.npmjs.org/@react-pdf/renderer/-/renderer-3.1.13.tgz",
-      "integrity": "sha512-vsQauiy63A2ORWmoYwG3qoBbs3IKlSEM6XxipesZUEohn9WH9LXiU+VN8k+W75KRwRNJnqGOVhSxAiBVUxc61Q==",
+      "version": "3.1.14",
+      "resolved": "https://registry.npmjs.org/@react-pdf/renderer/-/renderer-3.1.14.tgz",
+      "integrity": "sha512-Qk29uTamH6q+drK/YmiFbuQQ+yutesfIe+wyrsXFoUJUutIiDIaibO6zByMkhWb3M6CMt6NvG3NLHio1OF8U6Q==",
       "dependencies": {
         "@babel/runtime": "^7.20.13",
-        "@react-pdf/font": "^2.3.6",
-        "@react-pdf/layout": "^3.6.2",
+        "@react-pdf/font": "^2.3.7",
+        "@react-pdf/layout": "^3.6.3",
         "@react-pdf/pdfkit": "^3.0.2",
         "@react-pdf/primitives": "^3.0.0",
-        "@react-pdf/render": "^3.2.6",
-        "@react-pdf/types": "^2.3.3",
+        "@react-pdf/render": "^3.2.7",
+        "@react-pdf/types": "^2.3.4",
         "events": "^3.3.0",
         "object-assign": "^4.1.1",
         "prop-types": "^15.6.2",
@@ -1736,13 +1735,13 @@
       }
     },
     "node_modules/@react-pdf/stylesheet": {
-      "version": "4.1.7",
-      "resolved": "https://registry.npmjs.org/@react-pdf/stylesheet/-/stylesheet-4.1.7.tgz",
-      "integrity": "sha512-3n0Vg0XFszPyo0MpH75DkLRvsS4JOE0HzBH6XqFHDiquZDrC4mNgmMhZEbsOED+8xDGoCeVh8fLU3L6Tu0HWqg==",
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/@react-pdf/stylesheet/-/stylesheet-4.1.8.tgz",
+      "integrity": "sha512-/EuB9RBsH3YYRj8mwzImaul619MvX3rsHNF4h8LnlwDOuBehPA3L/fHrikfPqtJvHqK2ty3GXnkw0HG5SQpMzw==",
       "dependencies": {
         "@babel/runtime": "^7.20.13",
         "@react-pdf/fns": "2.0.1",
-        "@react-pdf/types": "^2.3.3",
+        "@react-pdf/types": "^2.3.4",
         "color-string": "^1.5.3",
         "hsl-to-hex": "^1.0.0",
         "media-engine": "^1.0.3",
@@ -1761,9 +1760,9 @@
       }
     },
     "node_modules/@react-pdf/types": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/@react-pdf/types/-/types-2.3.3.tgz",
-      "integrity": "sha512-I3BVu5vF0xxX6rvqZHt4gCjFAt6X+mak5bwYQyf6bm21IIMDXXBtgXqWEl1wosWizArox7fcN/XbEnysrf/8Dw=="
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/@react-pdf/types/-/types-2.3.4.tgz",
+      "integrity": "sha512-vGGz21BTE05EktBbotbd7fjC0Yi8A/lOSIpzd7L7aF1XY+vyIHlQVb35DWCipM1p/6XN4cr9etGAmm1e4Mtmjw=="
     },
     "node_modules/@react-pdf/yoga": {
       "version": "4.1.2",
@@ -1823,23 +1822,23 @@
       "integrity": "sha512-Dd0BYtWgnWJKwO1jkmTrzofjK2QXXcai0dmtzvIBhcA+RsG5h8R3xlyta0kGOZRNfL9GuRtb1knmPEhQrePCEw=="
     },
     "node_modules/@types/node-fetch": {
-      "version": "2.6.6",
-      "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.6.tgz",
-      "integrity": "sha512-95X8guJYhfqiuVVhRFxVQcf4hW/2bCuoPwDasMf/531STFoNoWTT7YDnWdXHEZKqAGUigmpG31r2FE70LwnzJw==",
+      "version": "2.6.8",
+      "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.8.tgz",
+      "integrity": "sha512-nnH5lV9QCMPsbEVdTb5Y+F3GQxLSw1xQgIydrb2gSfEavRPs50FnMr+KUaa+LoPSqibm2N+ZZxH7lavZlAT4GA==",
       "dependencies": {
         "@types/node": "*",
         "form-data": "^4.0.0"
       }
     },
     "node_modules/@types/prop-types": {
-      "version": "15.7.8",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.8.tgz",
-      "integrity": "sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ=="
+      "version": "15.7.9",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.9.tgz",
+      "integrity": "sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g=="
     },
     "node_modules/@types/qs": {
-      "version": "6.9.8",
-      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.8.tgz",
-      "integrity": "sha512-u95svzDlTysU5xecFNTgfFG5RUWu1A9P0VzgpcIiGZA9iraHOdSzcxMxQ55DyeRaGCSxQi7LxXDI4rzq/MYfdg==",
+      "version": "6.9.9",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.9.tgz",
+      "integrity": "sha512-wYLxw35euwqGvTDx6zfY1vokBFnsK0HNrzc6xNHchxfO2hpuRg74GbkEW7e3sSmPvj0TjCDT1VCa6OtHXnubsg==",
       "dev": true
     },
     "node_modules/@types/react": {
@@ -1861,17 +1860,17 @@
       }
     },
     "node_modules/@types/react-reconciler": {
-      "version": "0.28.5",
-      "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.5.tgz",
-      "integrity": "sha512-Qrwgl4NxNYH1oAJSJtlMGu95uaeMqrGiKzxwI90VvofBkJAj4GxcCAsJMZkwdR/qAxlm84YEXa8Fqu2xXk0arw==",
+      "version": "0.28.6",
+      "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.6.tgz",
+      "integrity": "sha512-NlilRDg7yjtFX568NA046OiHWbz5EKM1q5FSXi2GP7WKyU+Vem4NJQcG+ZaMiWotyPiYqkIb6NKJkFuplbchAA==",
       "dependencies": {
         "@types/react": "*"
       }
     },
     "node_modules/@types/react-virtualized": {
-      "version": "9.21.23",
-      "resolved": "https://registry.npmjs.org/@types/react-virtualized/-/react-virtualized-9.21.23.tgz",
-      "integrity": "sha512-8GX+P+nUl+c1qlyb3z0lQExQfoHPscBliZiBEUQ90PzMHY76XvkMawmKMyhvAUlCemhlEnvZdvWsyQAK5E/Jeg==",
+      "version": "9.21.26",
+      "resolved": "https://registry.npmjs.org/@types/react-virtualized/-/react-virtualized-9.21.26.tgz",
+      "integrity": "sha512-fUpUyQqF8PTrFmBZzE9PcdtPwL8xgqUdXmtrYadNgFDYwbKBl3Lz0khp+tZ7dyKIHUVDO9NDlgQx8q1+LIUk+A==",
       "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
@@ -1879,25 +1878,25 @@
       }
     },
     "node_modules/@types/sbd": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@types/sbd/-/sbd-1.0.3.tgz",
-      "integrity": "sha512-4rOX5JsLAEFrzOB0zvV2fG0lqwyNoo/TTYuQna/rjKi+ZHsN7s3BLfx70gsqGD6DM0j6Ha0QfneU/KspzMMeUg==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@types/sbd/-/sbd-1.0.4.tgz",
+      "integrity": "sha512-j/1NO9SzpSyh2dnQjcV6VVWQvXyoNFX9nniZs3AlqQEJ7LF0Kq2Go/b6N+BrdnC7P93gtKmZZqMHOD8L6lg0fg==",
       "dev": true
     },
     "node_modules/@types/scheduler": {
-      "version": "0.16.4",
-      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.4.tgz",
-      "integrity": "sha512-2L9ifAGl7wmXwP4v3pN4p2FLhD0O1qsJpvKmNin5VA8+UvNVb447UDaAEV6UdrkA+m/Xs58U1RFps44x6TFsVQ=="
+      "version": "0.16.5",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.5.tgz",
+      "integrity": "sha512-s/FPdYRmZR8SjLWGMCuax7r3qCWQw9QKHzXVukAuuIJkXkDRwp+Pu5LMIVFi0Fxbav35WURicYr8u1QsoybnQw=="
     },
     "node_modules/@types/stylis": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.1.tgz",
-      "integrity": "sha512-OSaMrXUKxVigGlKRrET39V2xdhzlztQ9Aqumn1WbCBKHOi9ry7jKSd7rkyj0GzmWaU960Rd+LpOFpLfx5bMQAg=="
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.2.tgz",
+      "integrity": "sha512-Rm17MsTpQQP5Jq4BF7CdrxJsDufoiL/q5IbJZYZmOZAJALyijgF7BzLgobXUqraNcQdqFYLYGeglDp6QzaxPpg=="
     },
     "node_modules/@types/uuid": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.5.tgz",
-      "integrity": "sha512-xfHdwa1FMJ082prjSJpoEI57GZITiQz10r3vEJCHa2khEFQjKy91aWKz6+zybzssCvXUwE1LQWgWVwZ4nYUvHQ=="
+      "version": "9.0.6",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.6.tgz",
+      "integrity": "sha512-BT2Krtx4xaO6iwzwMFUYvWBWkV2pr37zD68Vmp1CDV196MzczBRxuEpD6Pr395HAgebC/co7hOphs53r8V7jew=="
     },
     "node_modules/@typescript-eslint/parser": {
       "version": "5.62.0",
@@ -2012,9 +2011,9 @@
       "integrity": "sha512-d8XPSGjfyzlXC3Xx891DJRyZfqk5JU0BJrDQcsWomFIV1/BIzPW5HDH5iDdWpqWaav0YVIEzT1RHTwWr0FFshA=="
     },
     "node_modules/acorn": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
-      "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
+      "version": "8.11.2",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz",
+      "integrity": "sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==",
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2031,9 +2030,9 @@
       }
     },
     "node_modules/acorn-walk": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
-      "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.0.tgz",
+      "integrity": "sha512-FS7hV565M5l1R08MXqo8odwMTB02C2UqzB17RVgu9EyuYFBqJZ3/ZY97sQD5FewVu1UyDFc1yztUDrAwT0EypA==",
       "engines": {
         "node": ">=0.4.0"
       }
@@ -2255,9 +2254,9 @@
       }
     },
     "node_modules/ast-types-flow": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
-      "integrity": "sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag=="
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz",
+      "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ=="
     },
     "node_modules/asynciterator.prototype": {
       "version": "1.0.0",
@@ -2316,9 +2315,9 @@
       }
     },
     "node_modules/axe-core": {
-      "version": "4.8.2",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.2.tgz",
-      "integrity": "sha512-/dlp0fxyM3R8YW7MFzaHWXrf4zzbr0vaYb23VBFCl83R7nWNPg/yaQw2Dc8jzCMmDVLhSdzH8MjrsuIUuvX+6g==",
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.7.0.tgz",
+      "integrity": "sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==",
       "engines": {
         "node": ">=4"
       }
@@ -2391,11 +2390,6 @@
         "readable-stream": "^3.4.0"
       }
     },
-    "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",
@@ -2498,12 +2492,13 @@
       }
     },
     "node_modules/call-bind": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.5.tgz",
+      "integrity": "sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==",
       "dependencies": {
-        "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.0.2"
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.1",
+        "set-function-length": "^1.1.1"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -2534,9 +2529,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001549",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001549.tgz",
-      "integrity": "sha512-qRp48dPYSCYaP+KurZLhDYdVE+yEyht/3NlmcJgVQ2VMGt6JL36ndQ/7rgspdZsJuxDPFIo/OzBT2+GmIJ53BA==",
+      "version": "1.0.30001559",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001559.tgz",
+      "integrity": "sha512-cPiMKZgqgkg5LY3/ntGeLFUpi6tzddBNS58A4tnTgQw1zON7u2sZMU7SzOeVH4tj20++9ggL+V6FDOFMTaFFYA==",
       "funding": [
         {
           "type": "opencollective",
@@ -2988,9 +2983,9 @@
       }
     },
     "node_modules/cookies-next/node_modules/@types/node": {
-      "version": "16.18.58",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.58.tgz",
-      "integrity": "sha512-YGncyA25/MaVtQkjWW9r0EFBukZ+JulsLcVZBlGUfIb96OBMjkoRWwQo5IEWJ8Fj06Go3GHw+bjYDitv6BaGsA=="
+      "version": "16.18.60",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.60.tgz",
+      "integrity": "sha512-ZUGPWx5vKfN+G2/yN7pcSNLkIkXEvlwNaJEd4e0ppX7W2S8XAkdc/37hM4OUNJB9sa0p12AOvGvxL4JCPiz9DA=="
     },
     "node_modules/create-require": {
       "version": "1.1.1",
@@ -3027,9 +3022,9 @@
       }
     },
     "node_modules/crypto-js": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz",
-      "integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw=="
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
+      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
     },
     "node_modules/css-color-keywords": {
       "version": "1.0.0",
@@ -3308,14 +3303,14 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.554",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.554.tgz",
-      "integrity": "sha512-Q0umzPJjfBrrj8unkONTgbKQXzXRrH7sVV7D9ea2yBV3Oaogz991yhbpfvo2LMNkJItmruXTEzVpP9cp7vaIiQ=="
+      "version": "1.4.574",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.574.tgz",
+      "integrity": "sha512-bg1m8L0n02xRzx4LsTTMbBPiUd9yIR+74iPtS/Ao65CuXvhVZHP0ym1kSdDG3yHFDXqHQQBKujlN1AQ8qZnyFg=="
     },
     "node_modules/emoji-regex": {
-      "version": "10.2.1",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.2.1.tgz",
-      "integrity": "sha512-97g6QgOk8zlDRdgq1WxwgTMgEWGVAQvB5Fdpgc1MkNy56la5SKP9GsMXKDOdqwn90/41a8yPwIGk1Y6WVbeMQA=="
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz",
+      "integrity": "sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw=="
     },
     "node_modules/encoding": {
       "version": "0.1.13",
@@ -3357,25 +3352,25 @@
       }
     },
     "node_modules/es-abstract": {
-      "version": "1.22.2",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.2.tgz",
-      "integrity": "sha512-YoxfFcDmhjOgWPWsV13+2RNjq1F6UQnfs+8TftwNqtzlmFzEXvlUwdrNrYeaizfjQzRMxkZ6ElWMOJIFKdVqwA==",
+      "version": "1.22.3",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.3.tgz",
+      "integrity": "sha512-eiiY8HQeYfYH2Con2berK+To6GrK2RxbPawDkGq4UiCQQfZHb6wX9qQqkbpPqaxQFcl8d9QzZqo0tGE0VcrdwA==",
       "dependencies": {
         "array-buffer-byte-length": "^1.0.0",
         "arraybuffer.prototype.slice": "^1.0.2",
         "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
+        "call-bind": "^1.0.5",
         "es-set-tostringtag": "^2.0.1",
         "es-to-primitive": "^1.2.1",
         "function.prototype.name": "^1.1.6",
-        "get-intrinsic": "^1.2.1",
+        "get-intrinsic": "^1.2.2",
         "get-symbol-description": "^1.0.0",
         "globalthis": "^1.0.3",
         "gopd": "^1.0.1",
-        "has": "^1.0.3",
         "has-property-descriptors": "^1.0.0",
         "has-proto": "^1.0.1",
         "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0",
         "internal-slot": "^1.0.5",
         "is-array-buffer": "^3.0.2",
         "is-callable": "^1.2.7",
@@ -3385,7 +3380,7 @@
         "is-string": "^1.0.7",
         "is-typed-array": "^1.1.12",
         "is-weakref": "^1.0.2",
-        "object-inspect": "^1.12.3",
+        "object-inspect": "^1.13.1",
         "object-keys": "^1.1.1",
         "object.assign": "^4.1.4",
         "regexp.prototype.flags": "^1.5.1",
@@ -3399,7 +3394,7 @@
         "typed-array-byte-offset": "^1.0.0",
         "typed-array-length": "^1.0.4",
         "unbox-primitive": "^1.0.2",
-        "which-typed-array": "^1.1.11"
+        "which-typed-array": "^1.1.13"
       },
       "engines": {
         "node": ">= 0.4"
@@ -3430,24 +3425,24 @@
       }
     },
     "node_modules/es-set-tostringtag": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz",
-      "integrity": "sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.2.tgz",
+      "integrity": "sha512-BuDyupZt65P9D2D2vA/zqcI3G5xRsklm5N3xCwuiy+/vKy8i0ifdsQP1sLgO4tZDSCaQUSnmC48khknGMV3D2Q==",
       "dependencies": {
-        "get-intrinsic": "^1.1.3",
-        "has": "^1.0.3",
-        "has-tostringtag": "^1.0.0"
+        "get-intrinsic": "^1.2.2",
+        "has-tostringtag": "^1.0.0",
+        "hasown": "^2.0.0"
       },
       "engines": {
         "node": ">= 0.4"
       }
     },
     "node_modules/es-shim-unscopables": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz",
-      "integrity": "sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz",
+      "integrity": "sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==",
       "dependencies": {
-        "has": "^1.0.3"
+        "hasown": "^2.0.0"
       }
     },
     "node_modules/es-to-primitive": {
@@ -3630,25 +3625,25 @@
       }
     },
     "node_modules/eslint-plugin-import": {
-      "version": "2.28.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.28.1.tgz",
-      "integrity": "sha512-9I9hFlITvOV55alzoKBI+K9q74kv0iKMeY6av5+umsNwayt59fz692daGyjR+oStBQgx6nwR9rXldDev3Clw+A==",
-      "dependencies": {
-        "array-includes": "^3.1.6",
-        "array.prototype.findlastindex": "^1.2.2",
-        "array.prototype.flat": "^1.3.1",
-        "array.prototype.flatmap": "^1.3.1",
+      "version": "2.29.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.29.0.tgz",
+      "integrity": "sha512-QPOO5NO6Odv5lpoTkddtutccQjysJuFxoPS7fAHO+9m9udNHvTCPSAMW9zGAYj8lAIdr40I8yPCdUYrncXtrwg==",
+      "dependencies": {
+        "array-includes": "^3.1.7",
+        "array.prototype.findlastindex": "^1.2.3",
+        "array.prototype.flat": "^1.3.2",
+        "array.prototype.flatmap": "^1.3.2",
         "debug": "^3.2.7",
         "doctrine": "^2.1.0",
-        "eslint-import-resolver-node": "^0.3.7",
+        "eslint-import-resolver-node": "^0.3.9",
         "eslint-module-utils": "^2.8.0",
-        "has": "^1.0.3",
-        "is-core-module": "^2.13.0",
+        "hasown": "^2.0.0",
+        "is-core-module": "^2.13.1",
         "is-glob": "^4.0.3",
         "minimatch": "^3.1.2",
-        "object.fromentries": "^2.0.6",
-        "object.groupby": "^1.0.0",
-        "object.values": "^1.1.6",
+        "object.fromentries": "^2.0.7",
+        "object.groupby": "^1.0.1",
+        "object.values": "^1.1.7",
         "semver": "^6.3.1",
         "tsconfig-paths": "^3.14.2"
       },
@@ -3687,26 +3682,26 @@
       }
     },
     "node_modules/eslint-plugin-jsx-a11y": {
-      "version": "6.7.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.7.1.tgz",
-      "integrity": "sha512-63Bog4iIethyo8smBklORknVjB0T2dwB8Mr/hIC+fBS0uyHdYYpzM/Ed+YC8VxTjlXHEWFOdmgwcDn1U2L9VCA==",
-      "dependencies": {
-        "@babel/runtime": "^7.20.7",
-        "aria-query": "^5.1.3",
-        "array-includes": "^3.1.6",
-        "array.prototype.flatmap": "^1.3.1",
-        "ast-types-flow": "^0.0.7",
-        "axe-core": "^4.6.2",
-        "axobject-query": "^3.1.1",
+      "version": "6.8.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.8.0.tgz",
+      "integrity": "sha512-Hdh937BS3KdwwbBaKd5+PLCOmYY6U4f2h9Z2ktwtNKvIdIEu137rjYbcb9ApSbVJfWxANNuiKTD/9tOKjK9qOA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "aria-query": "^5.3.0",
+        "array-includes": "^3.1.7",
+        "array.prototype.flatmap": "^1.3.2",
+        "ast-types-flow": "^0.0.8",
+        "axe-core": "=4.7.0",
+        "axobject-query": "^3.2.1",
         "damerau-levenshtein": "^1.0.8",
         "emoji-regex": "^9.2.2",
-        "has": "^1.0.3",
-        "jsx-ast-utils": "^3.3.3",
-        "language-tags": "=1.0.5",
+        "es-iterator-helpers": "^1.0.15",
+        "hasown": "^2.0.0",
+        "jsx-ast-utils": "^3.3.5",
+        "language-tags": "^1.0.9",
         "minimatch": "^3.1.2",
-        "object.entries": "^1.1.6",
-        "object.fromentries": "^2.0.6",
-        "semver": "^6.3.0"
+        "object.entries": "^1.1.7",
+        "object.fromentries": "^2.0.7"
       },
       "engines": {
         "node": ">=4.0"
@@ -3720,14 +3715,6 @@
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
     },
-    "node_modules/eslint-plugin-jsx-a11y/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
     "node_modules/eslint-plugin-react": {
       "version": "7.33.2",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.33.2.tgz",
@@ -4070,6 +4057,14 @@
         "node": ">= 12.20"
       }
     },
+    "node_modules/formdata-node/node_modules/web-streams-polyfill": {
+      "version": "4.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-4.0.0-beta.3.tgz",
+      "integrity": "sha512-QW95TCTaHmsYfHDybGMwO5IJIM93I/6vTRk+daHTWFPhwh+C8Cg7j7XyKrwrj8Ib6vYXe0ocYNrmzY4xAAN6ug==",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -4139,14 +4134,14 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
-      "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.2.tgz",
+      "integrity": "sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==",
       "dependencies": {
-        "function-bind": "^1.1.1",
-        "has": "^1.0.3",
+        "function-bind": "^1.1.2",
         "has-proto": "^1.0.1",
-        "has-symbols": "^1.0.3"
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -4294,14 +4289,6 @@
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
       "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag=="
     },
-    "node_modules/has": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/has/-/has-1.0.4.tgz",
-      "integrity": "sha512-qdSAmqLF6209RFj4VVItywPMbm3vWylknmB3nvNiUIs72xAimcM8nVYxYr7ncvZq5qzk9MKIZR8ijqD/1QuYjQ==",
-      "engines": {
-        "node": ">= 0.4.0"
-      }
-    },
     "node_modules/has-bigints": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
@@ -4319,11 +4306,11 @@
       }
     },
     "node_modules/has-property-descriptors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
-      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz",
+      "integrity": "sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==",
       "dependencies": {
-        "get-intrinsic": "^1.1.1"
+        "get-intrinsic": "^1.2.2"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -4365,6 +4352,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/hasown": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
+      "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/hsl-to-hex": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/hsl-to-hex/-/hsl-to-hex-1.0.0.tgz",
@@ -4417,9 +4415,9 @@
       }
     },
     "node_modules/hyphen": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/hyphen/-/hyphen-1.7.0.tgz",
-      "integrity": "sha512-U5GRiJeEpXyDw1MqgZkig+TBzfWhXhwpE2aHmKuZAh/mzedvtPCXhaSDztJWhIhHUMe//D5nyGMGm5Jcb8tRdw=="
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/hyphen/-/hyphen-1.7.1.tgz",
+      "integrity": "sha512-fFMAldOO42EeYQnLTHB1YqXGpuMUm3CKgmU4IKuYQLGruTkVloWDVPA0E75SWwlNAXBQqtnAPk7wwzvebXYl5g=="
     },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
@@ -4432,11 +4430,6 @@
         "node": ">=0.10.0"
       }
     },
-    "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/ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -4507,12 +4500,12 @@
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
     },
     "node_modules/internal-slot": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz",
-      "integrity": "sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.6.tgz",
+      "integrity": "sha512-Xj6dv+PsbtwyPpEflsejS+oIZxmMlV44zAhG479uYu89MsjcYOhCFnNyKrkJrihbsiasQyY0afoCl/9BLR65bg==",
       "dependencies": {
-        "get-intrinsic": "^1.2.0",
-        "has": "^1.0.3",
+        "get-intrinsic": "^1.2.2",
+        "hasown": "^2.0.0",
         "side-channel": "^1.0.4"
       },
       "engines": {
@@ -4613,11 +4606,11 @@
       }
     },
     "node_modules/is-core-module": {
-      "version": "2.13.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.0.tgz",
-      "integrity": "sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==",
+      "version": "2.13.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
+      "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
       "dependencies": {
-        "has": "^1.0.3"
+        "hasown": "^2.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -4637,11 +4630,6 @@
         "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",
@@ -4889,9 +4877,9 @@
       }
     },
     "node_modules/jiti": {
-      "version": "1.20.0",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.20.0.tgz",
-      "integrity": "sha512-3TV69ZbrvV6U5DfQimop50jE9Dl6J8O1ja1dvBbMba/sZ3YBEQqJ2VZRoQPVnhlzjNtU1vaXRZVrVjU4qtm8yA==",
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz",
+      "integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==",
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -4961,9 +4949,9 @@
       }
     },
     "node_modules/konva": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/konva/-/konva-9.2.2.tgz",
-      "integrity": "sha512-Gyn5hQa/5+8pJvTn/IVyZWgum2otWXszuVCG/cevkAyKUFcmFv4tGbQhHFGtJPLQkGO+W6xfgRzyYIkNgKnPxA==",
+      "version": "9.2.3",
+      "resolved": "https://registry.npmjs.org/konva/-/konva-9.2.3.tgz",
+      "integrity": "sha512-oQ6VQ6kUL9IlhOGuEKKhxqnv6g/t8jZpVuWahQQ6hCqAsO8Ydi1zFGv7ef4EOq5GoPNq/d6Fyj/3i5Y/a5NooA==",
       "funding": [
         {
           "type": "patreon",
@@ -4985,11 +4973,14 @@
       "integrity": "sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w=="
     },
     "node_modules/language-tags": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.5.tgz",
-      "integrity": "sha512-qJhlO9cGXi6hBGKoxEG/sKZDAHD5Hnu9Hs4WbOY3pCWXDhw0N8x1NenNzm2EnNLkLkk7J2SdxAkDSbb6ftT+UQ==",
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.9.tgz",
+      "integrity": "sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==",
       "dependencies": {
-        "language-subtag-registry": "~0.3.2"
+        "language-subtag-registry": "^0.3.20"
+      },
+      "engines": {
+        "node": ">=0.10"
       }
     },
     "node_modules/legacy-swc-helpers": {
@@ -5293,9 +5284,9 @@
       }
     },
     "node_modules/node-abi": {
-      "version": "3.50.0",
-      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.50.0.tgz",
-      "integrity": "sha512-2Gxu7Eq7vnBIRfYSmqPruEllMM14FjOQFJSoqdGWthVn+tmwEXzmdPpya6cvvwf0uZA3F5N1fMFr9mijZBplFA==",
+      "version": "3.51.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.51.0.tgz",
+      "integrity": "sha512-SQkEP4hmNWjlniS5zdnfIXTk1x7Ome85RDzHlTbBtzE97Gfwz/Ipw4v/Ryk20DWIy3yCNVLVlGKApCnmvYoJbA==",
       "dependencies": {
         "semver": "^7.3.5"
       },
@@ -5391,9 +5382,9 @@
       }
     },
     "node_modules/object-inspect": {
-      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.0.tgz",
-      "integrity": "sha512-HQ4J+ic8hKrgIt3mqk6cVOVrW2ozL4KdvHlqpBv9vDYWx9ysAgENAdvy4FoGF+KFdhR7nQTNm5J0ctAeOwn+3g==",
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
+      "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -5500,9 +5491,9 @@
       }
     },
     "node_modules/openai": {
-      "version": "4.12.1",
-      "resolved": "https://registry.npmjs.org/openai/-/openai-4.12.1.tgz",
-      "integrity": "sha512-EAoUwm4dtiWvFwBhOCK/VfF8sj1ZU8+aAIJnfT4NyeTfrt1DM/6Gdd6fOZWTjBYryTAqu9Vpb5+9Wu6JMtm/gA==",
+      "version": "4.14.2",
+      "resolved": "https://registry.npmjs.org/openai/-/openai-4.14.2.tgz",
+      "integrity": "sha512-JGlm7mMC7J+cyQZnQMOH7daD9cBqqWqLtlBsejElEkgoehPrYfdyxSxIGICz5xk4YimbwI5FlLATSVojLtCKXQ==",
       "dependencies": {
         "@types/node": "^18.11.18",
         "@types/node-fetch": "^2.6.4",
@@ -5511,23 +5502,19 @@
         "digest-fetch": "^1.3.0",
         "form-data-encoder": "1.7.2",
         "formdata-node": "^4.3.2",
-        "node-fetch": "^2.6.7"
+        "node-fetch": "^2.6.7",
+        "web-streams-polyfill": "^3.2.1"
       },
       "bin": {
         "openai": "bin/cli"
       }
     },
     "node_modules/openai/node_modules/@types/node": {
-      "version": "18.18.5",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.18.5.tgz",
-      "integrity": "sha512-4slmbtwV59ZxitY4ixUZdy1uRLf9eSIvBWPQxNjhHYWEtn0FryfKpyS2cvADYXTayWdKEIsJengncrVvkI4I6A=="
-    },
-    "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"
+      "version": "18.18.8",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.18.8.tgz",
+      "integrity": "sha512-OLGBaaK5V3VRBS1bAkMVP2/W9B+H8meUfl866OrMNQqt7wDgdpWPp5o6gmIc9pB+lIQHSq4ZL8ypeH1vPxcPaQ==",
+      "dependencies": {
+        "undici-types": "~5.26.4"
       }
     },
     "node_modules/optionator": {
@@ -5880,9 +5867,9 @@
       }
     },
     "node_modules/punycode": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
-      "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
       "engines": {
         "node": ">=6"
       }
@@ -6393,6 +6380,20 @@
         "node": ">=10"
       }
     },
+    "node_modules/set-function-length": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.1.1.tgz",
+      "integrity": "sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==",
+      "dependencies": {
+        "define-data-property": "^1.1.1",
+        "get-intrinsic": "^1.2.1",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/set-function-name": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.1.tgz",
@@ -6541,9 +6542,9 @@
       }
     },
     "node_modules/streamx": {
-      "version": "2.15.1",
-      "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.15.1.tgz",
-      "integrity": "sha512-fQMzy2O/Q47rgwErk/eGeLu/roaFWV0jVsogDmrszM9uIw8L5OA+t+V93MgYlufNptfjmYR1tOMWhei/Eh7TQA==",
+      "version": "2.15.2",
+      "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.15.2.tgz",
+      "integrity": "sha512-b62pAV/aeMjUoRN2C/9F0n+G8AfcJjNC0zw/ZmOHeFsIe4m4GzjVW9m6VHXVjk536NbdU9JRwKMJRfkc+zUFTg==",
       "dependencies": {
         "fast-fifo": "^1.1.0",
         "queue-tick": "^1.0.1"
@@ -6877,34 +6878,6 @@
         "streamx": "^2.15.0"
       }
     },
-    "node_modules/tesseract.js": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/tesseract.js/-/tesseract.js-4.1.4.tgz",
-      "integrity": "sha512-iLjJjLWVNV4PApofEsd54Y1MbjhzpPxEzF8EjYmC2CLN4hrUqO5aTNTSbGA7/QjycKtAWHhn2YmDR+6GFwi2Zg==",
-      "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",
@@ -7165,6 +7138,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
+    },
     "node_modules/unicode-properties": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/unicode-properties/-/unicode-properties-1.4.1.tgz",
@@ -7330,11 +7308,6 @@
         "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",
@@ -7348,11 +7321,11 @@
       }
     },
     "node_modules/web-streams-polyfill": {
-      "version": "4.0.0-beta.3",
-      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-4.0.0-beta.3.tgz",
-      "integrity": "sha512-QW95TCTaHmsYfHDybGMwO5IJIM93I/6vTRk+daHTWFPhwh+C8Cg7j7XyKrwrj8Ib6vYXe0ocYNrmzY4xAAN6ug==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz",
+      "integrity": "sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==",
       "engines": {
-        "node": ">= 14"
+        "node": ">= 8"
       }
     },
     "node_modules/webidl-conversions": {
@@ -7438,12 +7411,12 @@
       }
     },
     "node_modules/which-typed-array": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.11.tgz",
-      "integrity": "sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==",
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.13.tgz",
+      "integrity": "sha512-P5Nra0qjSncduVPEAr7xhoF5guty49ArDTwzJ/yNuPIbZppyRxFQsRCWrocxIY+CnMVG+qfbU2FmDKyvSGClow==",
       "dependencies": {
         "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
+        "call-bind": "^1.0.4",
         "for-each": "^0.3.3",
         "gopd": "^1.0.1",
         "has-tostringtag": "^1.0.0"
@@ -7492,14 +7465,6 @@
         "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",
@@ -7509,9 +7474,9 @@
       }
     },
     "node_modules/zustand": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.4.3.tgz",
-      "integrity": "sha512-oRy+X3ZazZvLfmv6viIaQmtLOMeij1noakIsK/Y47PWYhT8glfXzQ4j0YcP5i0P0qI1A4rIB//SGROGyZhx91A==",
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.4.5.tgz",
+      "integrity": "sha512-jgIrBBLKncQW74PA2Lclct3gwD4aPughwGE4FqlXrv3rDqQox7JCn8rwUiFK6ygJcbBAvfTf8fF+ICg7HLD2FQ==",
       "dependencies": {
         "use-sync-external-store": "1.2.0"
       },

package.json

@@ -61,7 +61,6 @@
     "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

@@ -243,10 +243,10 @@ export const presets: Record<string, Preset> = {
     font: "actionman",
     llmPrompt: "new pulp science fiction",
     imagePrompt: (prompt: string) => [
-      `vintage color pulp comic panel`,
-      "40s",
+      `vintage science fiction`,
+      // "40s",
+      "color pulp comic panel",
       "1940",
-      "vintage science fiction",
       `${prompt}`,
       // "single panel",
       // "comic album"

src/app/globals.css

@@ -30,8 +30,9 @@ body {
 /* this is the trick to bypass the style={{}} attribute when printing */
 @media print {
   .comic-page[style] { width: 100vw !important; }
-}
 
+  @page { size: landscape }
+}
 
 .render-to-image .comic-panel {
   height: auto !important;

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

@@ -81,10 +81,10 @@ export function BottomBar() {
 #### Comic:
 ${uploadUrl
   ? (`![${prompt}](${uploadUrl})`)
-  : (`(please drag & drop your JPG image here)`)}
+  : (`(please drag & drop a capture of your comic here - we recommend you to print the PDF and convert it to JPG for best quality!)`)}
 `;
 
-    console.log("descriptionMd:", descriptionMd)
+    // console.log("descriptionMd:", descriptionMd)
 
     const params = new URLSearchParams({
       title: `[Comic] ${prompt}`,
@@ -140,6 +140,7 @@ ${uploadUrl
         // : null
       }
       </div>
+        {/*
         <div>
           <Button
             onClick={handlePrint}
@@ -160,6 +161,20 @@ ${uploadUrl
               remainingImages ? `${allStatus.length - remainingImages}/${allStatus.length} ⌛` : `Save`
             }</span>
            </Button>
+        </div>
+          */}
+          <div>
+          <Button
+            onClick={handlePrint}
+            disabled={!prompt?.length}
+          >
+            <span className="hidden md:inline">{
+            remainingImages ? `${allStatus.length - remainingImages}/${allStatus.length} panels ⌛` : `Save PDF`
+            }</span>
+            <span className="inline md:hidden">{
+              remainingImages ? `${allStatus.length - remainingImages}/${allStatus.length} ⌛` : `Save PDF`
+            }</span>
+           </Button>
         </div>
         <div>
           {

src/app/interface/page/index.tsx

@@ -1,15 +1,20 @@
-import { allLayoutAspectRatios, allLayouts } from "@/app/layouts"
+import { allLayoutAspectRatios, allLayouts, allLayoutsNbPanels } from "@/app/layouts"
 import { useStore } from "@/app/store"
 import { cn } from "@/lib/utils"
 import { useEffect, useRef } from "react"
 
-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 prompt = useStore(state => state.prompt)
 
-  const LayoutElement = (allLayouts as any)[layouts[page]]
-  const aspectRatio = ((allLayoutAspectRatios as any)[layouts[page]] as string) || "aspect-[250/297]"
+  const layout = layouts[page]
+
+  const LayoutElement = (allLayouts as any)[layout]
+  const aspectRatio = ((allLayoutAspectRatios as any)[layout] as string) || "aspect-[250/297]"
+
+  const nbPanels = ((allLayoutsNbPanels as any)[layout] as number) || 4
+
   /*
   const [canLoad, setCanLoad] = useState(false)
   useEffect(() => {
@@ -42,14 +47,15 @@ export function Page({ page }: { page: number }) {
         `shadow-2xl`,
         `print:shadow-none`,
         `print:border-0`,
-        `print:width-screen`
+        `print:width-screen`,
+        `print:break-after-all`
       )}
       style={{
         padding: `${Math.round((zoomLevel / 100) * 16)}px`
         // marginLeft: `${zoomLevel > 100 ? `100`}`
       }}
       >
-      <LayoutElement />
+      <LayoutElement page={page} nbPanels={nbPanels} />
     </div>
   )
 }

src/app/interface/panel/index.tsx

@@ -13,17 +13,36 @@ import { getInitialRenderedScene } from "@/lib/getInitialRenderedScene"
 import { Progress } from "@/app/interface/progress"
 
 export function Panel({
+  page,
+  nbPanels,
   panel,
   className = "",
   width = 1,
   height = 1,
 }: {
+  // page number of which the panel is
+  page: number
+
+  // the number of panels should be unique to each layout
+  nbPanels: number
+
+  // panel id, between 0 and (nbPanels - 1)
   panel: number
+
+
   className?: string
   width?: number
   height?: number
  }) {
-  const panelId = `${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)
 
   const [mouseOver, setMouseOver] = useState(false)
   const ref = useRef<HTMLImageElement>(null)
@@ -33,10 +52,10 @@ export function Panel({
   const setGeneratingImages = useStore(state => state.setGeneratingImages)
 
   const panels = useStore(state => state.panels)
-  const prompt = panels[panel] || ""
+  const prompt = panels[panelIndex] || ""
 
   const captions = useStore(state => state.captions)
-  const caption = captions[panel] || ""
+  const caption = captions[panelIndex] || ""
 
   const zoomLevel = useStore(state => state.zoomLevel)
   const showCaptions = useStore(state => state.showCaptions)
@@ -47,7 +66,7 @@ export function Panel({
   const renderedScenes = useStore(state => state.renderedScenes)
   const setRendered = useStore(state => state.setRendered)
 
-  const rendered = renderedScenes[panel] || getInitialRenderedScene()
+  const rendered = renderedScenes[panelIndex] || getInitialRenderedScene()
 
   const [revision, setRevision] = useState(0)
 
@@ -59,9 +78,9 @@ export function Panel({
   const timeoutRef = useRef<any>(null)
 
   const enableRateLimiter = `${process.env.NEXT_PUBLIC_ENABLE_RATE_LIMITER}`  === "true"
+ 
 
-  const delay = enableRateLimiter ? (1000 + (500 * panel)) : 1000
-
+  const delay = enableRateLimiter ? (1000 + (500 * panelIndex)) : 1000
 
   const startImageGeneration = ({ prompt, width, height, revision }: {
     prompt: string
@@ -85,7 +104,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 = 6
+        const nbMaxRevisions = 10
         for (let i = 0; i < revision && revision < nbMaxRevisions; i++) {
           const j =  Math.random() 
           cacheInvalidationHack += j < 0.3 ? "_" : j < 0.6 ? "," : "-"

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

@@ -54,10 +54,10 @@ export function TopMenu() {
   
   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('layout') as LayoutName) || defaultLayout
+  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('layout') as LayoutName) || defaultLayout
 
   const [draftPrompt, setDraftPrompt] = useState(requestedPrompt)
   const [draftPreset, setDraftPreset] = useState<PresetName>(requestedPreset)

src/app/layouts/index.tsx

@@ -3,12 +3,16 @@
 import { Panel } from "@/app/interface/panel"
 import { pick } from "@/lib/pick"
 import { Grid } from "@/app/interface/grid"
+import { LayoutProps } from "@/types"
+import { NB_PANELS_PER_PAGE } from "@/config"
 
-export function Layout0() {
+export function Layout0({ page, nbPanels }: LayoutProps) {
   return (
     <Grid className="grid-cols-2 grid-rows-2">
       <div className="bg-stone-100 col-span-1 row-span-1">
         <Panel
+          page={page}
+          nbPanels={nbPanels}
           panel={0}
           width={1024}
           height={1024}
@@ -16,6 +20,8 @@ export function Layout0() {
       </div>
       <div className="bg-zinc-100  col-span-1 row-span-1">
         <Panel
+          page={page}
+          nbPanels={nbPanels}
           panel={1}
           width={1024}
           height={1024}
@@ -23,6 +29,8 @@ export function Layout0() {
       </div>
       <div className="bg-gray-100  col-span-1 row-span-1">
         <Panel
+          page={page}
+          nbPanels={nbPanels}
           panel={2}
           width={1024}
           height={1024}
@@ -30,6 +38,8 @@ export function Layout0() {
       </div>
       <div className="bg-slate-100 col-span-1 row-span-1">
         <Panel
+          page={page}
+          nbPanels={nbPanels}
           panel={3}
           width={1024}
           height={1024}
@@ -39,11 +49,13 @@ export function Layout0() {
   )
 }
 
-export function Layout1() {
+export function Layout1({ page, nbPanels }: LayoutProps) {
   return (
     <Grid className="grid-cols-2 grid-rows-3">
       <div className="bg-stone-100">
         <Panel
+          page={page}
+          nbPanels={nbPanels}
           panel={0}
           width={1024}
           height={768}
@@ -51,6 +63,8 @@ export function Layout1() {
       </div>
       <div className="bg-zinc-100 row-span-2">
         <Panel
+          page={page}
+          nbPanels={nbPanels}
           panel={1}
           width={768}
           height={1024}
@@ -58,6 +72,8 @@ export function Layout1() {
       </div>
       <div className="bg-gray-100 row-span-2 col-span-1">
         <Panel
+          page={page}
+          nbPanels={nbPanels}
           panel={2}
           width={768}
           height={1024}
@@ -65,6 +81,8 @@ export function Layout1() {
       </div>
       <div className="bg-slate-100">
         <Panel
+          page={page}
+          nbPanels={nbPanels}
           panel={3}
           width={1024}
           height={768}
@@ -74,11 +92,13 @@ export function Layout1() {
   )
 }
 
-export function Layout2_todo() {
+export function Layout2_todo({ page, nbPanels }: LayoutProps) {
   return (
     <Grid className="grid-cols-2 grid-rows-3">
       <div className="bg-gray-100 row-span-3 col-span-1">
         <Panel
+          page={page}
+          nbPanels={nbPanels}
           panel={0}
           width={768}
           height={1024}
@@ -86,6 +106,8 @@ export function Layout2_todo() {
       </div>
       <div className="bg-slate-100">
         <Panel
+          page={page}
+          nbPanels={nbPanels}
           panel={1}
           width={1024}
           height={768}
@@ -93,6 +115,8 @@ export function Layout2_todo() {
       </div>
       <div className="bg-stone-100">
         <Panel
+          page={page}
+          nbPanels={nbPanels}
           panel={2}
           width={1024}
           height={768}
@@ -100,6 +124,8 @@ export function Layout2_todo() {
       </div>
       <div className="bg-zinc-100 row-span-1 col-span-1">
         <Panel
+          page={page}
+          nbPanels={nbPanels}
           panel={3}
           width={1024}
           height={768}
@@ -109,11 +135,13 @@ export function Layout2_todo() {
   )
 }
 
-export function Layout3_todo() {
+export function Layout3_todo({ page, nbPanels }: LayoutProps) {
   return (
     <Grid className="grid-cols-5 grid-rows-2">
       <div className="bg-zinc-100 col-span-3">
         <Panel
+          page={page}
+          nbPanels={nbPanels}
           panel={0}
           width={1024}
           height={768}
@@ -121,6 +149,8 @@ export function Layout3_todo() {
       </div>
       <div className="bg-zinc-100 col-span-2 row-span-2">
         <Panel
+          page={page}
+          nbPanels={nbPanels}
           panel={1}
           width={768}
           height={1024}
@@ -129,6 +159,8 @@ export function Layout3_todo() {
       <div className="col-span-3 grid grid-cols-2 gap-2">
         <div className="bg-stone-100">
           <Panel
+            page={page}
+            nbPanels={nbPanels}
             panel={2}
             width={768}
             height={758}
@@ -136,6 +168,8 @@ export function Layout3_todo() {
         </div>
         <div className="bg-slate-100">
           <Panel
+            page={page}
+            nbPanels={nbPanels}
             panel={3}
             width={768}
             height={758}
@@ -146,11 +180,13 @@ export function Layout3_todo() {
   )
 }
 
-export function Layout4_todo() {
+export function Layout4_todo({ page, nbPanels }: LayoutProps) {
   return (
     <Grid className="grid-cols-2 grid-rows-3">
       <div className="bg-slate-100 row-span-2">
         <Panel
+          page={page}
+          nbPanels={nbPanels}
           panel={0}
           width={768}
           height={1024}
@@ -158,6 +194,8 @@ export function Layout4_todo() {
       </div>
       <div className="bg-gray-100 row-span-1 col-span-1">
         <Panel
+          page={page}
+          nbPanels={nbPanels}
           panel={1}
           width={1024}
           height={768}
@@ -165,6 +203,8 @@ export function Layout4_todo() {
       </div>
       <div className="bg-zinc-100 row-span-2">
         <Panel
+          page={page}
+          nbPanels={nbPanels}
           panel={2}
           width={1024}
           height={768}
@@ -172,6 +212,8 @@ export function Layout4_todo() {
       </div>
       <div className="bg-stone-100">
         <Panel
+          page={page}
+          nbPanels={nbPanels}
           panel={3}
           width={768}
           height={1024}
@@ -182,11 +224,13 @@ export function Layout4_todo() {
 }
 
 
-export function Layout2() {
+export function Layout2({ page, nbPanels }: LayoutProps) {
   return (
     <Grid className="grid-cols-3 grid-rows-2">
       <div className="bg-zinc-100 col-span-1 row-span-1">
         <Panel
+          page={page}
+          nbPanels={nbPanels}
           panel={0}
           width={768}
           height={1024}
@@ -194,6 +238,8 @@ export function Layout2() {
       </div>
       <div className="bg-zinc-100 col-span-1 row-span-1">
         <Panel
+          page={page}
+          nbPanels={nbPanels}
           panel={1}
           width={768}
           height={1024}
@@ -201,6 +247,8 @@ export function Layout2() {
       </div>
       <div className="bg-stone-100 row-span-2 col-span-1">
         <Panel
+          page={page}
+          nbPanels={nbPanels}
           panel={2}
           width={512}
           height={1024}
@@ -208,6 +256,8 @@ export function Layout2() {
       </div>
       <div className="bg-slate-100 row-span-1 col-span-2">
         <Panel
+          page={page}
+          nbPanels={nbPanels}
           panel={3}
           width={1024}
           height={768}
@@ -217,11 +267,13 @@ export function Layout2() {
   )
 }
 
-export function Layout3() {
+export function Layout3({ page, nbPanels }: LayoutProps) {
   return (
     <Grid className="grid-cols-3 grid-rows-2">
       <div className="bg-zinc-100 col-span-2 row-span-1">
         <Panel
+          page={page}
+          nbPanels={nbPanels}
           panel={0}
           width={1024}
           height={768}
@@ -229,6 +281,8 @@ export function Layout3() {
       </div>
       <div className="bg-zinc-100 col-span-1 row-span-1">
         <Panel
+          page={page}
+          nbPanels={nbPanels}
           panel={1}
           width={768}
           height={1024}
@@ -236,6 +290,8 @@ export function Layout3() {
       </div>
       <div className="bg-stone-100 row-span-1 col-span-1">
         <Panel
+          page={page}
+          nbPanels={nbPanels}
           panel={2}
           width={768}
           height={1024}
@@ -243,6 +299,8 @@ export function Layout3() {
       </div>
       <div className="bg-slate-100 row-span-1 col-span-2">
         <Panel
+          page={page}
+          nbPanels={nbPanels}
           panel={3}
           width={1024}
           height={768}
@@ -253,11 +311,13 @@ export function Layout3() {
 }
 
 // squares + vertical
-export function Layout4() {
+export function Layout4({ page, nbPanels }: LayoutProps) {
   return (
     <Grid className="grid-cols-8 grid-rows-8">
       <div className="bg-zinc-100 col-start-1 col-end-7 row-start-1 row-end-3">
         <Panel
+          page={page}
+          nbPanels={nbPanels}
           panel={0}
           width={512}
           height={1024}
@@ -265,6 +325,8 @@ export function Layout4() {
       </div>
       <div className="bg-zinc-100 col-start-3 col-end-9 row-start-3 row-end-4">
         <Panel
+          page={page}
+          nbPanels={nbPanels}
           panel={1}
           width={1024}
           height={768}
@@ -272,6 +334,8 @@ export function Layout4() {
       </div>
       <div className="bg-stone-100 col-start-2 col-end-8 row-start-4 row-end-6">
         <Panel
+          page={page}
+          nbPanels={nbPanels}
           panel={2}
           width={768}
           height={1024}
@@ -279,6 +343,8 @@ export function Layout4() {
       </div>
       <div className="bg-slate-100 col-start-1 col-end-9 row-start-6 row-end-8">
         <Panel
+          page={page}
+          nbPanels={nbPanels}
           panel={3}
           width={1024}
           height={512}
@@ -289,11 +355,13 @@ export function Layout4() {
 }
 
 // squares + horizontal
-export function Layout5() {
+export function Layout5({ page, nbPanels }: LayoutProps) {
   return (
     <Grid className="grid-cols-4 grid-rows-4">
       <div className="bg-zinc-100">
         <Panel
+          page={page}
+          nbPanels={nbPanels}
           panel={0}
           width={1024}
           height={1024}
@@ -301,6 +369,8 @@ export function Layout5() {
       </div>
       <div className="bg-zinc-100">
         <Panel
+          page={page}
+          nbPanels={nbPanels}
           panel={1}
           width={1024}
           height={1024}
@@ -308,6 +378,8 @@ export function Layout5() {
       </div>
       <div className="bg-stone-100">
         <Panel
+          page={page}
+          nbPanels={nbPanels}
           panel={2}
           width={1024}
           height={1024}
@@ -315,6 +387,8 @@ export function Layout5() {
       </div>
       <div className="bg-slate-100">
         <Panel
+          page={page}
+          nbPanels={nbPanels}
           panel={3}
           width={1024}
           height={1024}
@@ -352,6 +426,15 @@ export const allLayoutAspectRatios = {
   // Layout4: "aspect-[1/3]",
 }
 
+export const allLayoutsNbPanels = {
+  // TODO: this is gonna be tricky to implement, but this should be unique / dynamic
+  Layout0: NB_PANELS_PER_PAGE,
+  Layout1: NB_PANELS_PER_PAGE,
+  Layout2: NB_PANELS_PER_PAGE,
+  Layout3: NB_PANELS_PER_PAGE,
+  // Layout4: NB_PANELS_PER_PAGE
+}
+
 export type LayoutName = keyof typeof allLayouts 
 
 export const defaultLayout: LayoutName = "Layout1"
@@ -367,4 +450,3 @@ export const getRandomLayoutName = (): LayoutName => {
 export function getRandomLayoutNames(): LayoutName[] {
   return nonRandomLayouts.sort(() => Math.random() - 0.5) as LayoutName[]
 }
-

src/app/layouts/new_layouts.tsx

@@ -1,273 +0,0 @@
-"use client"
-
-import { Panel } from "@/app/interface/panel"
-import { pick } from "@/lib/pick"
-import { Grid } from "@/app/interface/grid"
-
-export function Layout1() {
-  return (
-    <Grid className="grid-cols-2 grid-rows-4">
-      <div className="bg-stone-100">
-        <Panel
-          panel={0}
-          width={1024}
-          height={768}
-        />
-      </div>
-      <div className="bg-zinc-100 row-span-2">
-        <Panel
-          panel={1}
-          width={512}
-          height={1024}
-        />
-      </div>
-      <div className="bg-gray-100 row-span-2 col-span-1">
-        <Panel
-          panel={2}
-          width={512}
-          height={1024}
-        />
-      </div>
-      <div className="bg-slate-100">
-        <Panel
-          panel={3}
-          width={1024}
-          height={768}
-        />
-      </div>
-      <div className="bg-slate-100 row-span-1 col-span-2">
-        <Panel
-          panel={4}
-          width={1024}
-          height={768}
-        />
-      </div>
-    </Grid>
-  )
-}
-
-export function Layout2() {
-  return (
-    <Grid className="grid-cols-2 grid-rows-3">
-      <div className="bg-gray-100 row-span-2 col-span-1">
-        <Panel
-          panel={0}
-          width={768}
-          height={1024}
-        />
-      </div>
-      <div className="bg-gray-100 row-span-1 col-span-1">
-        <Panel
-          panel={1}
-          width={1024}
-          height={1024}
-        />
-      </div>
-      <div className="bg-slate-100">
-        <Panel
-          panel={2}
-          width={1024}
-          height={768}
-        />
-      </div>
-      <div className="bg-stone-100">
-        <Panel
-          panel={3}
-          width={1024}
-          height={768}
-        />
-      </div>
-      <div className="bg-zinc-100 row-span-1 col-span-1">
-        <Panel
-          panel={4}
-          width={1024}
-          height={768}
-        />
-      </div>
-    </Grid>
-  )
-}
-
-export function Layout3() {
-  return (
-    <Grid className="grid-cols-5 grid-rows-2">
-      <div className="bg-zinc-100 col-span-3">
-        <Panel
-          panel={0}
-          width={1024}
-          height={1024}
-        />
-      </div>
-      <div className="bg-gray-100 col-span-2 row-span-1">
-        <Panel
-          panel={1}
-          width={512}
-          height={1024}
-        />
-      </div>
-      <div className="bg-gray-100 col-span-2 row-span-1">
-        <Panel
-          panel={2}
-          width={512}
-          height={1024}
-        />
-      </div>
-      <div className="col-span-3 grid grid-cols-2 gap-2">
-        <div className="bg-stone-100">
-          <Panel
-            panel={3}
-            width={512}
-            height={1024}
-          />
-        </div>
-        <div className="bg-slate-100">
-          <Panel
-            panel={4}
-            width={512}
-            height={1024}
-          />
-        </div>
-      </div>
-    </Grid>
-  )
-}
-
-export function Layout4() {
-  return (
-    <Grid className="grid-cols-2 grid-rows-3">
-      <div className="bg-slate-100 row-span-2">
-        <Panel
-          panel={0}
-          width={768}
-          height={1024}
-        />
-      </div>
-      <div className="bg-gray-100 row-span-1 col-span-1">
-        <Panel
-          panel={1}
-          width={1024}
-          height={768}
-        />
-      </div>
-      <div className="bg-zinc-100 row-span-2">
-        <Panel
-          panel={2}
-          width={1024}
-          height={768}
-        />
-      </div>
-      <div className="bg-stone-100">
-        <Panel
-          panel={3}
-          width={768}
-          height={1024}
-        />
-      </div>
-    </Grid>
-  )
-}
-
-
-export function Layout5() {
-  return (
-    <Grid className="grid-cols-3 grid-rows-3">
-      <div className="bg-zinc-100 col-span-2 row-span-1">
-        <Panel
-          panel={0}
-          width={1024}
-          height={512}
-        />
-      </div>
-      <div className="bg-zinc-100 col-span-1 row-span-1">
-        <Panel
-          panel={1}
-          width={1024}
-          height={768}
-        />
-      </div>
-      <div className="bg-stone-100 row-span-1 col-span-1">
-        <Panel
-          panel={2}
-          width={768}
-          height={1024}
-        />
-      </div>
-      <div className="bg-slate-100 row-span-1 col-span-2">
-        <Panel
-          panel={3}
-          width={1024}
-          height={768}
-        />
-      </div>
-      <div className="bg-slate-100 row-span-1 col-span-3">
-        <Panel
-          panel={4}
-          width={1024}
-          height={1024}
-        />
-      </div>
-    </Grid>
-  )
-}
-
-export function Layout6() {
-  return (
-    <Grid className="grid-cols-3 grid-rows-3">
-      <div className="bg-zinc-100 col-span-2 row-span-1">
-        <Panel
-          panel={0}
-          width={1024}
-          height={512}
-        />
-      </div>
-      <div className="bg-zinc-100 col-span-1 row-span-1">
-        <Panel
-          panel={1}
-          width={768}
-          height={1024}
-        />
-      </div>
-      <div className="bg-stone-100 row-span-1 col-span-1">
-        <Panel
-          panel={2}
-          width={768}
-          height={1024}
-        />
-      </div>
-      <div className="bg-slate-100 row-span-2 col-span-2">
-        <Panel
-          panel={3}
-          width={1024}
-          height={1024}
-        />
-      </div>
-      <div className="bg-slate-100 row-span-1 col-span-1">
-        <Panel
-          panel={3}
-          width={768}
-          height={1024}
-        />
-      </div>
-    </Grid>
-  )
-}
-
-// export const layouts = { Layout1, Layout2, Layout3, Layout4, Layout5, Layout6 }
-export const allLayouts = { 
-   // Layout1, 
-   // Layout2,
-  //  Layout3,
-  // Layout4,
-   Layout5,
-  // Layout6 
- }
-
-export type LayoutName = keyof typeof allLayouts 
-
-export function getRandomLayoutName(): LayoutName {
-  return pick(Object.keys(allLayouts) as LayoutName[]) as LayoutName
-}
-
-export function getRandomLayoutNames(): LayoutName[] {
-  return Object.keys(allLayouts).sort(() => Math.random() - 0.5) as LayoutName[]
-}

src/app/main.tsx

@@ -22,7 +22,8 @@ export default function Main() {
   const preset = useStore(state => state.preset)
   const prompt = useStore(state => state.prompt)
 
-  const setLayouts = useStore(state => state.setLayouts)
+  const nbPages = useStore(state => state.nbPages)
+  const nbTotalPanels = useStore(state => state.nbTotalPanels)
 
   const setPanels = useStore(state => state.setPanels)
   const setCaptions = useStore(state => state.setCaptions)
@@ -42,12 +43,10 @@ export default function Main() {
       // 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 nbPanels = 4
-
       let llmResponse: LLMResponse = []
 
       try {
-        llmResponse = await getStory({ preset, prompt })
+        llmResponse = await getStory({ preset, prompt, nbTotalPanels })
         console.log("LLM responded:", llmResponse)
 
       } catch (err) {
@@ -55,7 +54,7 @@ export default function Main() {
         console.log("we are now switching to a degraded mode, using 4 similar panels")
         
         llmResponse = []
-        for (let p = 0; p < nbPanels; p++) {
+        for (let p = 0; p < nbTotalPanels; p++) {
           llmResponse.push({
             panel: p,
             instructions: `${prompt} ${".".repeat(p)}`,
@@ -78,7 +77,7 @@ export default function Main() {
       const newCaptions: string[] = []
       setWaitABitMore(true)
       console.log("Panel prompts for SDXL:")
-      for (let p = 0; p < nbPanels; p++) {
+      for (let p = 0; p < nbTotalPanels; p++) {
         newCaptions.push(llmResponse[p]?.caption || "...")
         const newPanel = [panelPromptPrefix, llmResponse[p]?.instructions || ""].map(chunk => chunk).join(", ")
         newPanels.push(newPanel)
@@ -94,7 +93,7 @@ export default function Main() {
       }, enableRateLimiter ? 12000 : 0)
  
     })
-  }, [prompt, preset?.label]) // important: we need to react to preset changes too
+  }, [prompt, preset?.label, nbTotalPanels]) // important: we need to react to preset changes too
 
   return (
     <div>
@@ -114,18 +113,14 @@ export default function Main() {
           <div
             className={cn(
               `comic-page`,
-              `flex flex-col md:flex-row md:space-x-16 md:items-center md:justify-start`,
+              `flex flex-col md:flex-row md:space-x-8 lg:space-x-12 xl:space-x-16 md:items-center md:justify-start print:space-x-4`,
             )}
             style={{
               width: `${zoomLevel}%`
             }}>
             <Page page={0} />
 
-            {/*
-            // we could support multiple pages here,
-            // but let's disable it for now
             <Page page={1} />
-            */}
           </div>
         </div>
       </div>

src/app/ocr.tsx

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

src/app/queries/getStory.ts

@@ -11,9 +11,11 @@ import { cleanJson } from "@/lib/cleanJson"
 export const getStory = async ({
   preset,
   prompt = "",
+  nbTotalPanels = 4,
 }: {
   preset: Preset;
   prompt: string;
+  nbTotalPanels: number;
 }): Promise<LLMResponse> => {
   // throw new Error("Planned maintenance")
   
@@ -25,10 +27,10 @@ export const getStory = async ({
       role: "system",
       content: [
         `You are a comic book author specialized in ${preset.llmPrompt}`,
-        `Please write detailed drawing instructions and a one-sentence short caption for the 4 panels of a new silent comic book page.`,
+        `Please write detailed drawing instructions and a one-sentence short caption for the ${nbTotalPanels} panels of a new silent comic book page.`,
         `Give your response as a VALID JSON array like this: \`Array<{ panel: number; instructions: string; caption: string}>\`.`,
         // `Give your response as Markdown bullet points.`,
-        `Be brief in your 4 instructions and captions, don't add your own comments. Be straight to the point, and never reply things like "Sure, I can.." etc. Reply using valid JSON.`
+        `Be brief in your ${nbTotalPanels} instructions and captions, don't add your own comments. Be straight to the point, and never reply things like "Sure, I can.." etc. Reply using valid JSON.`
       ].filter(item => item).join("\n")
     },
     {
@@ -41,14 +43,14 @@ export const getStory = async ({
   let result = ""
 
   try {
-    result = `${await predict(query) || ""}`.trim()
+    result = `${await predict(query, nbTotalPanels) || ""}`.trim()
     if (!result.length) {
       throw new Error("empty result!")
     }
   } catch (err) {
     console.log(`prediction of the story failed, trying again..`)
     try {
-      result = `${await predict(query+".") || ""}`.trim()
+      result = `${await predict(query+".", nbTotalPanels) || ""}`.trim()
       if (!result.length) {
         throw new Error("empty result!")
       }

src/app/queries/getStyle.ts

@@ -1,52 +0,0 @@
-import { createLlamaPrompt } from "@/lib/createLlamaPrompt"
-
-import { predict } from "./predict"
-import { Preset } from "../engine/presets"
-
-export const getStory = async ({
-  preset,
-  prompt = "",
-}: {
-  preset: Preset;
-  prompt: string;
-}) => {
-
-  const query = createLlamaPrompt([
-    {
-      role: "system",
-      content: [
-        `You are a comic book author specialized in ${preset.llmPrompt}`,
-        `You are going to be asked to write a comic book page, your mission is to answer a JSON array containing 4 items, to describe the page (one item per panel).`,
-        `Each array item should be a comic book panel caption the describe the environment, era, characters, objects, textures, lighting.`,
-        `Be brief in your caption don't add your own comments. Be straight to the point, and never reply things like "Sure, I can.." etc.`
-      ].filter(item => item).join("\n")
-    },
-    {
-      role: "user",
-      content: `The story is: ${prompt}`,
-    }
-  ])
-
-
-  let result = ""
-  try {
-    result = `${await predict(query) || ""}`.trim()
-    if (!result.length) {
-      throw new Error("empty result!")
-    }
-  } catch (err) {
-    console.log(`prediction of the story failed, trying again..`)
-    try {
-      result = `${await predict(query+".") || ""}`.trim()
-      if (!result.length) {
-        throw new Error("empty result!")
-      }
-    } catch (err) {
-      console.error(`prediction of the story failed again!`)
-      throw new Error(`failed to generate the story ${err}`)
-    }
-  }
-
-  const tmp = result // result.split("Caption:").pop() || result
-  return tmp.replaceAll("\n", ", ")
-}

src/app/queries/mockLLMResponse.ts

@@ -1,24 +1,43 @@
 import { LLMResponse } from "@/types"
 
-export const mockLLMResponse: LLMResponse = [
-  {
-    "panel": 1,
-    "instructions": "Close-up of cat's face, looking straight at reader with a smirk on its face",
-    "caption": "Feline mischief"
-  },
-  {
-    "panel": 2,
-    "instructions": "Medium shot of cat sniffing a glass of milk, with a surprised expression",
-    "caption": "Uh oh, what's this?"
-  },
-  {
-    "panel": 3,
-    "instructions": "Wide shot of cat knocking over the glass of milk, with a crazed look in its eyes",
-    "caption": "Cat-astrophe!"
-  },
-  {
-    "panel": 4,
-    "instructions": "Close-up of cat's face, looking satisfied with a milk moustache",
-    "caption": "Mission accomplished"
-  }
+export const mockLLMResponse: LLMResponse = [{
+  "panel": 1,
+  "instructions": "wide shot of detective walking towards a UFO crash site",
+  "caption": "Detective Jameson investigates a UFO crash in the desert"
+},
+{
+  "panel": 2,
+  "instructions": "close-up of detective's face, determined expression",
+  "caption": "He's been tracking this case for weeks"
+},
+{
+  "panel": 3,
+  "instructions": "medium shot of detective examining UFO debris",
+  "caption": "The evidence is scattered all over the desert"
+},
+{
+  "panel": 4,
+  "instructions": "close-up of strange symbol on UFO debris",
+  "caption": "But what does this symbol mean?"
+},
+{
+  "panel": 5,
+  "instructions": "wide shot of detective walking towards a strange rock formation",
+  "caption": "Jameson follows a trail that leads him deeper into the desert"
+},
+{
+  "panel": 6,
+  "instructions": "medium shot of detective discovering an alien body",
+  "caption": "He's not alone in the desert"
+},
+{
+  "panel": 7,
+  "instructions": "close-up of alien's face, eyes closed, peaceful expression",
+  "caption": "An alien life form, deceased"
+},
+{
+  "panel": 8,
+  "instructions": "wide shot of detective standing over the alien body, looking up at the sky",
+  "caption": "Jameson wonders, what other secrets lie beyond the stars?"
+}
 ]

src/app/queries/predictWithHuggingFace.ts

@@ -3,7 +3,7 @@
 import { HfInference, HfInferenceEndpoint } from "@huggingface/inference"
 import { LLMEngine } from "@/types"
 
-export async function predict(inputs: string): Promise<string> {
+export async function predict(inputs: string, nbPanels: number): Promise<string> {
   const hf = new HfInference(process.env.AUTH_HF_API_TOKEN)
 
   const llmEngine = `${process.env.LLM_ENGINE || ""}` as LLMEngine
@@ -12,6 +12,10 @@ export async function predict(inputs: string): Promise<string> {
 
   let hfie: HfInferenceEndpoint = hf
 
+  // we don't require a lot of token for our task
+  // but to be safe, let's count ~110 tokens per panel
+  const nbMaxNewTokens = nbPanels * 110
+
   switch (llmEngine) {
     case "INFERENCE_ENDPOINT":
       if (inferenceEndpoint) {
@@ -49,9 +53,7 @@ export async function predict(inputs: string): Promise<string> {
       inputs,
       parameters: {
         do_sample: true,
-        // we don't require a lot of token for our task
-        // but to be safe, let's count ~110 tokens per panel
-        max_new_tokens: 450, // 1150,
+        max_new_tokens: nbMaxNewTokens,
         return_full_text: false,
       }
     })) {

src/app/queries/predictWithOpenAI.ts

@@ -3,7 +3,7 @@
 import type { ChatCompletionMessage } from "openai/resources/chat"
 import OpenAI from "openai"
 
-export async function predict(inputs: string): Promise<string> {
+export async function predict(inputs: string, nbPanels: number): Promise<string> {
   const openaiApiKey = `${process.env.AUTH_OPENAI_API_KEY || ""}`
   const openaiApiBaseUrl = `${process.env.LLM_OPENAI_API_BASE_URL || "https://api.openai.com/v1"}`
   const openaiApiModel = `${process.env.LLM_OPENAI_API_MODEL || "gpt-3.5-turbo"}`
@@ -22,7 +22,8 @@ export async function predict(inputs: string): Promise<string> {
       messages: messages,
       stream: false,
       model: openaiApiModel,
-      temperature: 0.8
+      temperature: 0.8,
+      // TODO: use the nbPanels to define a max token limit
     })
 
     return res.choices[0].message.content || ""

src/app/store/index.ts

@@ -1,18 +1,20 @@
 "use client"
 
 import { create } from "zustand"
+import html2canvas from "html2canvas"
 
 import { FontName } from "@/lib/fonts"
 import { Preset, PresetName, defaultPreset, getPreset, getRandomPreset } from "@/app/engine/presets"
-import { LayoutName, defaultLayout, getRandomLayoutName, getRandomLayoutNames } from "../layouts"
-import html2canvas from "html2canvas"
 import { RenderedScene } from "@/types"
+import { LayoutName, defaultLayout, getRandomLayoutName } from "../layouts"
+import { MAX_NB_PAGES, NB_PANELS_PER_PAGE } from "@/config"
 
 export const useStore = create<{
   prompt: string
   font: FontName
   preset: Preset
-  nbFrames: number
+  nbPages: number
+  nbTotalPanels: number
   panels: string[]
   captions: string[]
   upscaleQueue: Record<string, RenderedScene>
@@ -49,7 +51,11 @@ export const useStore = create<{
   prompt: "",
   font: "actionman",
   preset: getPreset(defaultPreset),
-  nbFrames: 1,
+  nbPages: MAX_NB_PAGES,
+
+  // TODO: make this dynamic!
+  nbTotalPanels: NB_PANELS_PER_PAGE * MAX_NB_PAGES,
+
   panels: [],
   captions: [],
   upscaleQueue: {} as Record<string, RenderedScene>,
@@ -109,13 +115,6 @@ export const useStore = create<{
       preset,
     })
   },
-  setNbFrames: (nbFrames: number) => {
-    const existingNbFrames = get().nbFrames
-    if (nbFrames === existingNbFrames) { return }
-    set({
-      nbFrames,
-    })
-  },
   setPanels: (panels: string[]) => set({ panels }),
   setCaptions: (captions: string[]) => {
     set({
@@ -128,13 +127,27 @@ export const useStore = create<{
     })
   },
   setLayout: (layoutName: LayoutName) => {
+
+    const { nbPages } = get()
+
     const layout = layoutName === "random"
-      ? getRandomLayoutName()
-      : layoutName
+    ? getRandomLayoutName()
+    : layoutName
+
+    const layouts: LayoutName[] = []
+    for (let i = 0; i < nbPages; i++) {
+      layouts.push(
+        layoutName === "random"
+          ? getRandomLayoutName()
+          : layoutName
+      )
+
+      // TODO: update the number of total panels here!
+    }
 
     set({
       layout,
-      layouts: [layout, layout]
+      layouts,
     })
   },
   setLayouts: (layouts: LayoutName[]) => set({ layouts }),
@@ -186,9 +199,24 @@ export const useStore = create<{
     }
   },
   generate: (prompt: string, presetName: PresetName, layoutName: LayoutName) => {
+
+    const { nbPages } = get()
+    
     const layout = layoutName === "random"
-      ? getRandomLayoutName()
-      : layoutName
+    ? getRandomLayoutName()
+    : layoutName
+
+    const layouts: LayoutName[] = []
+    for (let i = 0; i < nbPages; i++) {
+      layouts.push(
+        layoutName === "random"
+          ? getRandomLayoutName()
+          : layoutName
+      )
+
+      // TODO: update the number of total panels here!
+    }
+
     set({
       prompt,
       panels: [],
@@ -197,7 +225,7 @@ export const useStore = create<{
         ? getRandomPreset()
         : getPreset(presetName),
       layout,
-      layouts: [layout, layout],
+      layouts,
     })
   }
 }))

src/config.ts

@@ -0,0 +1,6 @@
+import { getValidNumber } from "./lib/getValidNumber"
+
+export const MAX_NB_PAGES = getValidNumber(process.env.NEXT_PUBLIC_MAX_NB_PAGES, 1, 2, 1)
+
+// TODO: this one should be dynamic and depend upon the page layout type
+export const NB_PANELS_PER_PAGE = 4

src/lib/dirtyLLMJsonParser.ts

@@ -1,5 +1,6 @@
 import { LLMResponse } from "@/types"
 import { cleanJson } from "./cleanJson"
+import { parseBadJSON } from "./parseBadJSON"
 
 export function dirtyLLMJsonParser(input: string): LLMResponse {
 
@@ -9,7 +10,7 @@ export function dirtyLLMJsonParser(input: string): LLMResponse {
   // we only keep what's after the first [
   let jsonOrNot = cleanJson(input)
 
-  const jsonData = JSON.parse(jsonOrNot) as LLMResponse
+  const jsonData = parseBadJSON(jsonOrNot) as LLMResponse
 
   const results = jsonData.map((item, i) => {
     let panel = i

src/lib/dirtyLLMResponseCleaner.ts

@@ -18,11 +18,19 @@ export function dirtyLLMResponseCleaner(input: string) {
     .replaceAll("[2]", "")
     .replaceAll("[3]", "")
     .replaceAll("[4]", "")
+    .replaceAll("[5]", "")
+    .replaceAll("[6]", "")
+    .replaceAll("[7]", "")
+    .replaceAll("[8]", "")
     .replaceAll("[panel 0]", "")
     .replaceAll("[panel 1]", "")
     .replaceAll("[panel 2]", "")
     .replaceAll("[panel 3]", "")
     .replaceAll("[panel 4]", "")
+    .replaceAll("[panel 5]", "")
+    .replaceAll("[panel 6]", "")
+    .replaceAll("[panel 7]", "")
+    .replaceAll("[panel 8]", "")
   )
 
   // repair missing end of JSON array

src/lib/getValidNumber.ts

@@ -0,0 +1,10 @@
+export const getValidNumber = (something: any, minValue: number, maxValue: number, defaultValue: number) => {
+  const strValue = `${something || defaultValue}`
+  const numValue = Number(strValue)
+  const isValid = !isNaN(numValue) && isFinite(numValue)
+  if (!isValid) {
+    return defaultValue
+  }
+  return Math.max(minValue, Math.min(maxValue, numValue))
+ 
+}

src/lib/parseBadJSON.ts

@@ -0,0 +1,24 @@
+import { LLMResponse } from "@/types"
+
+export function parseBadJSON(jsonLikeString: string): LLMResponse {
+
+  try {
+    return JSON.parse(jsonLikeString) as LLMResponse
+  } catch (err) {
+    var regex = /\{\s*"panel":\s*(\d+),\s*"instructions"\s*:\s*"([^"]+)",\s*"caption":\s*"([^"]*)"\s*\}/gs;
+      
+    let results = [];
+    let match;
+    
+    while ((match = regex.exec(jsonLikeString)) !== null) {
+      let json = {
+        panel: Number(match[1]),
+        instructions: match[2],
+        caption: match[3]
+      };
+      results.push(json);
+    }
+    
+    return results as LLMResponse
+  }
+}

src/lib/replaceTextInSpeechBubbles.ts

@@ -1,98 +0,0 @@
-"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/types.ts

@@ -127,4 +127,9 @@ export type GetAppPostResponse = {
   success?: boolean
   error?: string
   post: Post
-}
+}
+
+export type LayoutProps = {
+  page: number
+  nbPanels: number
+}