slight UI redesign

.env

@@ -82,7 +82,7 @@ LLM_OPENAI_API_MODEL="gpt-4"
 LLM_HF_INFERENCE_ENDPOINT_URL=""
 
 # If you decided to use a Hugging Face Inference API model for the LLM engine
-# LLM_HF_INFERENCE_API_MODEL="meta-llama/Llama-2-70b-chat-hf"
+# LLM_HF_INFERENCE_API_MODEL="HuggingFaceH4/zephyr-7b-beta"
 LLM_HF_INFERENCE_API_MODEL="HuggingFaceH4/zephyr-7b-beta"
 
 # ----------- COMMUNITY SHARING (OPTIONAL) -----------

README.md

@@ -70,13 +70,13 @@ To customise a variable locally, you should create a `.env.local`
 
 ## The LLM API (Large Language Model)
 
-Currently the AI Comic Factory uses [Llama-2 70b](https://huggingface.co/blog/llama2) through an [Inference Endpoint](https://huggingface.co/docs/inference-endpoints/index).
+Currently the AI Comic Factory uses [zephyr-7b-beta](https://huggingface.co/HuggingFaceH4/zephyr-7b-beta) through an [Inference Endpoint](https://huggingface.co/docs/inference-endpoints/index).
 
 You have three options:
 
 ### Option 1: Use an Inference API model
 
-This is a new option added recently, where you can use one of the models from the Hugging Face Hub. By default we suggest to use CodeLlama 34b as it will provide better results than the 7b model.
+This is a new option added recently, where you can use one of the models from the Hugging Face Hub. By default we suggest to use [zephyr-7b-beta](https://huggingface.co/HuggingFaceH4/zephyr-7b-beta) as it will provide better results than the 7b model.
 
 To activate it, create a `.env.local` configuration file:
 
@@ -85,10 +85,10 @@ LLM_ENGINE="INFERENCE_API"
 
 HF_API_TOKEN="Your Hugging Face token"
 
-# codellama/CodeLlama-7b-hf" is used by default, but you can change this
+# "HuggingFaceH4/zephyr-7b-beta" is used by default, but you can change this
 # note: You should use a model able to generate JSON responses,
 # so it is storngly suggested to use at least the 34b model
-HF_INFERENCE_API_MODEL="codellama/CodeLlama-7b-hf"
+HF_INFERENCE_API_MODEL="HuggingFaceH4/zephyr-7b-beta"
 ```
 
 ### Option 2: Use an Inference Endpoint URL

src/app/globals.css

@@ -28,13 +28,12 @@ body {
 
 /* this is the trick to bypass the style={{}} attribute when printing */
 @media print {
-  .comic-page, .comic-page[style] { width: 100vw !important; }
-
-  /*if you have 2 panels, you will need replace this with landscape */
-  @page { size: portrait }
+  .comic-page, .comic-page[style] {
+    width: 100vw !important;
+    page-break-before: always;
+  }
 }
 
-
 .render-to-image .comic-panel {
   height: auto !important;
   /* max-width: fit-content !important; */

src/app/interface/about/index.tsx

@@ -10,35 +10,35 @@ export function About() {
     <Dialog open={isOpen} onOpenChange={setOpen}>
       <DialogTrigger asChild>
         <Button variant="outline">
-          <span className="hidden md:inline">About this project</span>
-          <span className="inline md:hidden">About</span>
+          <span className="hidden md:inline">AI-Comic-Factory 1.0</span>
+          <span className="inline md:hidden">Version 1.0</span>
         </Button>
       </DialogTrigger>
       <DialogContent className="sm:max-w-[425px] md:max-w-[600px]">
         <DialogHeader>
-          <DialogTitle>The AI Comic Factory</DialogTitle>
-          <DialogDescription className="w-full text-center text-lg font-bold text-stone-800">
-            What is the AI Comic Factory?
+          <DialogTitle>AI Comic Factory 1.0</DialogTitle>
+          <DialogDescription className="w-full text-center text-2xl font-bold text-stone-700">
+            AI Comic Factory 1.0 (March 2024 Update)
           </DialogDescription>
         </DialogHeader>
-        <div className="grid gap-4 py-4 text-stone-800 text-sm">
-        <p className="">
-           The AI Comic Factory is an app to generate stories using AI in a few clicks.
-        </p>
+        <div className="grid gap-4 py-4 text-stone-700 text-sm md:text-base xl:text-lg">
+          <p className="">
+            The AI Comic Factory generates stories using AI in a few clicks.
+          </p>
           <p>
-            It is free for all Hugging Face users: <Login />
+            App is free for Hugging Face users 👉 <Login />
          </p>
-         <p>
-           As an artist, you can use your <a className="text-stone-600 underline" href="https://huggingface.co/spaces/jbilcke-hf/ai-comic-factory/discussions/402#654ab848fa25dfb780aa19fb" target="_blank">own art to generate comic panels.</a>
+         <p className="pt-2 pb-2">
+           Are you an artist? Learn <a className="text-stone-600 underline" href="https://huggingface.co/spaces/jbilcke-hf/ai-comic-factory/discussions/402#654ab848fa25dfb780aa19fb" target="_blank">how to use your own art style</a>
          </p>
          <p>
-         👉 The language model used to generate the story is <a className="text-stone-600 underline" href="https://huggingface.co/HuggingFaceH4/zephyr-7b-beta" target="_blank">Zephyr-7b-beta</a>.
+         👉 Default AI model used for stories is <a className="text-stone-600 underline" href="https://huggingface.co/HuggingFaceH4/zephyr-7b-beta" target="_blank">Zephyr-7b-beta</a>
          </p>
          <p>
-         👉 The diffusion model used by default is <a className="text-stone-600 underline" href="https://huggingface.co/stabilityai/stable-diffusion-xl-base-1.0" target="_blank">SDXL</a>.
+         👉 Default AI model used for drawing is <a className="text-stone-600 underline" href="https://huggingface.co/stabilityai/stable-diffusion-xl-base-1.0" target="_blank">SDXL</a> by Stability AI
         </p>
-        <p>
-           The code is public and can be deployed at home with some changes in the code. See the <a className="text-stone-600 underline" href="https://huggingface.co/spaces/jbilcke-hf/ai-comic-factory/blob/main/README.md" target="_blank">README</a> for details about the architecture.
+        <p className="pt-2 pb-2">
+           This is an open-source project, see the <a className="text-stone-600 underline" href="https://huggingface.co/spaces/jbilcke-hf/ai-comic-factory/blob/main/README.md" target="_blank">README</a> for more info.
          </p>
         </div>
         <DialogFooter>

src/app/interface/page/index.tsx

@@ -15,19 +15,20 @@ export function Page({ page }: { page: number}) {
   const LayoutElement = (allLayouts as any)[layout]
   const aspectRatio = ((allLayoutAspectRatios as any)[layout] as string) || "aspect-[250/297]"
 
-  const nbPages = useStore(s => s.nbPages)
-  const nbPanelsPerPage = useStore(s => s.nbPanelsPerPage)
+  const currentNbPages = useStore(s => s.currentNbPages)
+  const maxNbPages = useStore(s => s.maxNbPages)
+  const currentNbPanelsPerPage = useStore(s => s.currentNbPanelsPerPage)
 
   // in the future, different layouts might have different numbers of panels
   const allLayoutsNbPanels = {
-    Layout0: nbPanelsPerPage,
-    Layout1: nbPanelsPerPage,
-    Layout2: nbPanelsPerPage,
-    Layout3: nbPanelsPerPage,
-    // Layout4: nbPanelsPerPage
+    Layout0: currentNbPanelsPerPage,
+    Layout1: currentNbPanelsPerPage,
+    Layout2: currentNbPanelsPerPage,
+    Layout3: currentNbPanelsPerPage,
+    // Layout4: currentNbPanelsPerPage
   }
 
-  const nbPanels = ((allLayoutsNbPanels as any)[layout] as number) || nbPanelsPerPage
+  const currentNbPanels = ((allLayoutsNbPanels as any)[layout] as number) || currentNbPanelsPerPage
 
   /*
   const [canLoad, setCanLoad] = useState(false)
@@ -50,6 +51,14 @@ export function Page({ page }: { page: number}) {
     setPage(element)
   }, [pageRef.current])
   
+  /*
+  console.log("PAGE DEBUG:", {
+    currentNbPages,
+    maxNbPages,
+    "currentNbPages < maxNbPages": currentNbPages < maxNbPages,
+  })
+  */
+ 
   return (
     <div
       ref={pageRef}
@@ -77,9 +86,9 @@ export function Page({ page }: { page: number}) {
         // marginLeft: `${zoomLevel > 100 ? `100`}`
       }}
       >
-       <LayoutElement page={page} nbPanels={nbPanels} />
+       <LayoutElement page={page} nbPanels={currentNbPanels} />
       </div>
-      {nbPages > 1 &&
+      {currentNbPages > 1 &&
         <p className="w-full text-center pt-4 font-sans text-2xs font-semibold text-stone-600">
           Page {page + 1}
           {/*

src/app/interface/settings-dialog/defaultSettings.ts

@@ -18,4 +18,5 @@ export const defaultSettings: Settings = {
   groqApiKey: "",
   groqApiLanguageModel: "mixtral-8x7b-32768",
   hasGeneratedAtLeastOnce: false,
+  userDefinedMaxNumberOfPages: 1,
 }

src/app/interface/settings-dialog/getSettings.ts

@@ -4,6 +4,7 @@ import { getValidString } from "@/lib/getValidString"
 import { localStorageKeys } from "./localStorageKeys"
 import { defaultSettings } from "./defaultSettings"
 import { getValidBoolean } from "@/lib/getValidBoolean"
+import { getValidNumber } from "@/lib/getValidNumber"
 
 export function getSettings(): Settings {
   try {
@@ -24,7 +25,8 @@ export function getSettings(): Settings {
       openaiApiLanguageModel: getValidString(localStorage?.getItem?.(localStorageKeys.openaiApiLanguageModel), defaultSettings.openaiApiLanguageModel),
       groqApiKey: getValidString(localStorage?.getItem?.(localStorageKeys.groqApiKey), defaultSettings.groqApiKey),
       groqApiLanguageModel: getValidString(localStorage?.getItem?.(localStorageKeys.groqApiLanguageModel), defaultSettings.groqApiLanguageModel),
-      hasGeneratedAtLeastOnce: getValidBoolean(localStorage?.getItem?.(localStorageKeys.hasGeneratedAtLeastOnce), defaultSettings.hasGeneratedAtLeastOnce), 
+      hasGeneratedAtLeastOnce: getValidBoolean(localStorage?.getItem?.(localStorageKeys.hasGeneratedAtLeastOnce), defaultSettings.hasGeneratedAtLeastOnce),
+      userDefinedMaxNumberOfPages: getValidNumber(localStorage?.getItem?.(localStorageKeys.userDefinedMaxNumberOfPages), 1, Number.MAX_SAFE_INTEGER, defaultSettings.userDefinedMaxNumberOfPages),
     }
   } catch (err) {
     return {

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

@@ -1,3 +1,5 @@
+"use client"
+
 import { useState } from "react"
 import { useLocalStorage } from 'usehooks-ts'
 
@@ -18,8 +20,10 @@ import { Label } from "./label"
 import { Field } from "./field"
 import { localStorageKeys } from "./localStorageKeys"
 import { defaultSettings } from "./defaultSettings"
-import { Switch } from "@/components/ui/switch"
-import { cn } from "@/lib/utils"
+
+import { useDynamicConfig } from "@/lib/useDynamicConfig"
+import { Slider } from "@/components/ui/slider"
+import { fonts } from "@/lib/fonts"
 
 export function SettingsDialog() {
   const [isOpen, setOpen] = useState(false)
@@ -71,6 +75,12 @@ export function SettingsDialog() {
     localStorageKeys.openaiApiModel,
     defaultSettings.openaiApiModel
   )
+  const [userDefinedMaxNumberOfPages, setUserDefinedMaxNumberOfPages] = useLocalStorage<number>(
+    localStorageKeys.userDefinedMaxNumberOfPages,
+    defaultSettings.userDefinedMaxNumberOfPages
+  )
+
+  const { config: { maxNbPages }, isConfigReady } = useDynamicConfig()
 
   return (
     <Dialog open={isOpen} onOpenChange={setOpen}>
@@ -87,15 +97,32 @@ export function SettingsDialog() {
             Custom Models
           </DialogDescription>
         </DialogHeader>
+        {
+        // isConfigReady && <Field>
+        // <Label>Maximum number of pages: {userDefinedMaxNumberOfPages}</Label>
+        // <Slider
+        //   min={1}
+        //   max={maxNbPages}
+        //   step={1}
+        //   onValueChange={(value: any) => {
+        //     let numericValue = Number(value[0])
+        //     numericValue = !isNaN(value[0]) && isFinite(value[0]) ? numericValue : 0
+        //     numericValue = Math.min(maxNbPages, Math.max(1, numericValue))
+        //     setUserDefinedMaxNumberOfPages(numericValue)
+        //   }}
+        //   defaultValue={[userDefinedMaxNumberOfPages]}
+        //   value={[userDefinedMaxNumberOfPages]}
+        // />
+        // </Field>
+        }
         <div className="grid gap-4 py-1 space-y-1 text-stone-800">
-          <p className="text-sm text-zinc-700">
-            Note: most vendors have a warm-up delay when using a custom or rarely used model. Do not hesitate to try again after 5 minutes if that happens.
-          </p>
-          <p className="text-sm text-zinc-700">
-            Security note: we do not save your API credentials on our server but inside your web browser, using the local storage.
-          </p>
           <Field>
             <Label>Image rendering provider:</Label>
+            <p className="pt-2 pb-3 text-base italic text-zinc-600">
+            ℹ️ Some API vendors have a delay for rarely used models.<br/>
+            👉 In case of trouble, try again after 5-10 minutes.
+            </p>
+
             <Select
               onValueChange={(value: string) => {
                 setRenderingModelVendor(value as RenderingModelVendor)
@@ -115,36 +142,37 @@ export function SettingsDialog() {
             
           
           {
-          renderingModelVendor === "SERVER" && <>
-            <Field>
-              <Label>Quality over performance ratio (beta, deprecated):</Label>
-              <div className="flex flex-row space-x-2 text-zinc-500">
-                <Switch
-                  // checked={renderingUseTurbo}
-                  // onCheckedChange={setRenderingUseTurbo}
-                  checked={false}
-                  disabled
-                  className="opacity-30 pointer-events-none"
-                />
-                {/*
-                <span
-                  onClick={() => setRenderingUseTurbo(!renderingUseTurbo)}
-                  className={cn("cursor-pointer", { "text-zinc-800": renderingUseTurbo })}>
-                    Use a faster, but lower quality model (you are warned!)
-                  </span>
-              */}
-              <span className="text-zinc-500 italic">
-                Following feedbacks from users (low rendering quality on comics) the fast renderer has been disabled.
-              </span>
-              </div>
-            </Field>
-          </>}
+          // renderingModelVendor === "SERVER" && <>
+          //   <Field>
+          //     <Label>Quality over performance ratio (beta, deprecated):</Label>
+          //     <div className="flex flex-row space-x-2 text-zinc-500">
+          //       <Switch
+          //         // checked={renderingUseTurbo}
+          //         // onCheckedChange={setRenderingUseTurbo}
+          //         checked={false}
+          //         disabled
+          //         className="opacity-30 pointer-events-none"
+          //       />
+          //       {/*
+          //       <span
+          //         onClick={() => setRenderingUseTurbo(!renderingUseTurbo)}
+          //         className={cn("cursor-pointer", { "text-zinc-800": renderingUseTurbo })}>
+          //           Use a faster, but lower quality model (you are warned!)
+          //         </span>
+          //     */}
+          //     <span className="text-zinc-500 italic">
+          //       Following feedbacks from users (low rendering quality on comics) the fast renderer has been disabled.
+          //     </span>
+          //     </div>
+          //   </Field>
+          // </>
+          }
 
           {renderingModelVendor === "HUGGINGFACE" && <>
             <Field>
               <Label>Hugging Face API Token (<a className="text-stone-600 underline" href="https://huggingface.co/subscribe/pro" target="_blank">PRO account</a> recommended for higher rate limit):</Label>
               <Input
-                className="font-mono"
+                className={fonts.actionman.className}
                 type="password"
                 placeholder="Enter your private api token"
                 onChange={(x) => {
@@ -156,7 +184,7 @@ export function SettingsDialog() {
             <Field>
               <Label>Inference API model (custom SDXL or SDXL LoRA):</Label>
               <Input
-                className="font-mono"
+                className={fonts.actionman.className}
                 placeholder="Name of the Inference API model"
                 onChange={(x) => {
                   setHuggingfaceInferenceApiModel(x.target.value)
@@ -167,7 +195,7 @@ export function SettingsDialog() {
             <Field>
               <Label>The file type supported by the model (jpg, webp..):</Label>
               <Input
-                className="font-mono"
+                className={fonts.actionman.className}
                 placeholder="Inference API file type"
                 onChange={(x) => {
                   setHuggingfaceInferenceApiFileType(x.target.value)
@@ -181,7 +209,7 @@ export function SettingsDialog() {
             <Field>
               <Label>LoRA model trigger (optional):</Label>
               <Input
-                className="font-mono"
+                className={fonts.actionman.className}
                 placeholder="Trigger keyword (if you use a LoRA)"
                 onChange={(x) => {
                   setHuggingfaceInferenceApiModelTrigger(x.target.value)
@@ -195,7 +223,7 @@ export function SettingsDialog() {
             <Field>
               <Label>OpenAI API Token (you will be billed based on OpenAI pricing):</Label>
               <Input
-                className="font-mono"
+                className={fonts.actionman.className}
                 type="password"
                 placeholder="Enter your private api token"
                 onChange={(x) => {
@@ -207,7 +235,7 @@ export function SettingsDialog() {
             <Field>
               <Label>OpenAI image model:</Label>
               <Input
-                className="font-mono"
+                className={fonts.actionman.className}
                 placeholder="OpenAI image model"
                 onChange={(x) => {
                   setOpenaiApiModel(x.target.value)
@@ -221,7 +249,7 @@ export function SettingsDialog() {
               <Field>
                 <Label>Replicate API Token (you will be billed based on Replicate pricing):</Label>
                 <Input
-                  className="font-mono"
+                  className={fonts.actionman.className}
                   type="password"
                   placeholder="Enter your private api token"
                   onChange={(x) => {
@@ -233,7 +261,7 @@ export function SettingsDialog() {
               <Field>
                 <Label>Replicate model name:</Label>
                 <Input
-                  className="font-mono"
+                  className={fonts.actionman.className}
                   placeholder="Name of the Replicate model"
                   onChange={(x) => {
                     setReplicateApiModel(x.target.value)
@@ -244,7 +272,7 @@ export function SettingsDialog() {
               <Field>
                 <Label>Model version:</Label>
                 <Input
-                  className="font-mono"
+                  className={fonts.actionman.className}
                   placeholder="Version of the Replicate model"
                   onChange={(x) => {
                     setReplicateApiModelVersion(x.target.value)
@@ -258,7 +286,7 @@ export function SettingsDialog() {
               <Field>
                 <Label>LoRA model trigger (optional):</Label>
                 <Input
-                  className="font-mono"
+                  className={fonts.actionman.className}
                   placeholder={'Eg. "In the style of TOK" etc'}
                   onChange={(x) => {
                     setReplicateApiModelTrigger(x.target.value)
@@ -267,7 +295,12 @@ export function SettingsDialog() {
                 />
               </Field>
             </>}
+
+            <p className="text-sm text-zinc-700 italic">
+            🔒 Settings such as API keys are stored inside your browser and aren&apos;t kept on our servers.
+            </p>
         </div>
+
         <DialogFooter>
           <Button type="submit" onClick={() => setOpen(false)}>Close</Button>
         </DialogFooter>

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

@@ -2,6 +2,6 @@ import { ReactNode } from "react"
 
 export function Label({ children }: { children: ReactNode }) {
   return (
-    <label className="text-base font-semibold text-zinc-700">{children}</label>
+    <label className="text-xl font-semibold text-zinc-700">{children}</label>
   )
 }

src/app/interface/settings-dialog/localStorageKeys.ts

@@ -18,4 +18,5 @@ export const localStorageKeys: Record<keyof Settings, string> = {
   groqApiKey: "CONF_AUTH_GROQ_API_KEY",
   groqApiLanguageModel: "CONF_AUTH_GROQ_API_LANGUAGE_MODEL",
   hasGeneratedAtLeastOnce: "CONF_HAS_GENERATED_AT_LEAST_ONCE",
+  userDefinedMaxNumberOfPages: "CONF_USER_DEFINED_MAX_NUMBER_OF_PAGES"
 }

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

@@ -0,0 +1,8 @@
+"use client"
+
+import dynamic from "next/dynamic";
+
+export const SignUpCTA = dynamic(() => import("./sign-up-cta"), {
+  // Make sure we turn SSR off
+  ssr: false,
+});

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

@@ -0,0 +1,22 @@
+import { useOAuth } from "@/lib/useOAuth"
+import { cn } from "@/lib/utils"
+
+function SignUpCTA() {
+  const { login, isLoggedIn } = useOAuth({ debug: false })
+  if (isLoggedIn) { return null }
+  return (
+    <div className={cn(
+      `print:hidden`,
+      `fixed flex flex-col items-center bottom-8 top-28 right-2 md:top-17 md:right-6 z-10`,
+    )}>
+      <div className="font-bold text-sm pb-2 text-stone-600 bg-stone-50  dark:text-stone-600 dark:bg-stone-50 p-1 rounded-sm">
+        anonymous users can generate 1 comic.<br/> <span
+          onClick={login}
+          className="underline underline-offset-2 cursor-pointer  text-sky-800 dark:text-sky-800 hover:text-sky-700 hover:dark:text-sky-700"
+        >Sign-up to Hugging Face</span> to make more!
+      </div>
+    </div>
+  )
+}
+
+export default SignUpCTA

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

@@ -126,13 +126,14 @@ export function TopMenu() {
       `backdrop-blur-xl`,
       `transition-all duration-200 ease-in-out`,
       `px-2 py-2 border-b-1 border-gray-50 dark:border-gray-50`,
-      `bg-stone-900/70 dark:bg-stone-900/70 text-gray-50 dark:text-gray-50`,
+      //`bg-[#2d435c] dark:bg-[#2d435c] text-gray-50 dark:text-gray-50`,
+      `bg-gradient-to-r from-[#102c4c] to-[#1a426f] dark:bg-gradient-to-r dark:from-[#102c4c] dark:to-[#1a426f]`,
       `space-y-2 md:space-y-0 md:space-x-3 lg:space-x-6`
     )}>
       <div className="flex flex-row space-x-2 md:space-x-3 w-full md:w-auto">
         <div className={cn(
           `transition-all duration-200 ease-in-out`,
-          `flex flex-row items-center justify-start space-x-3 font-mono`,
+          `flex flex-row items-center justify-start space-x-3`,
           `flex-grow`
           )}>
 
@@ -143,7 +144,7 @@ export function TopMenu() {
             onValueChange={(value) => { setDraftPreset(value as PresetName) }}
             disabled={isBusy}
             >
-            <SelectTrigger className="flex-grow">
+            <SelectTrigger className="flex-grow bg-gray-100 text-gray-700 dark:bg-gray-100 dark:text-gray-700">
               <SelectValue className="text-2xs md:text-sm" placeholder="Style" />
             </SelectTrigger>
             <SelectContent>
@@ -155,7 +156,7 @@ export function TopMenu() {
         </div>
         <div className={cn(
           `transition-all duration-200 ease-in-out`,
-          `flex flex-row items-center justify-start space-x-3 font-mono`,
+          `flex flex-row items-center justify-start space-x-3`,
           `w-40`
           )}>
 
@@ -166,13 +167,13 @@ export function TopMenu() {
             onValueChange={(value) => { setDraftLayout(value as LayoutName) }}
             disabled={isBusy}
             >
-            <SelectTrigger className="flex-grow">
+            <SelectTrigger className="flex-grow bg-gray-100 text-gray-700 dark:bg-gray-100 dark:text-gray-700">
               <SelectValue className="text-2xs md:text-sm" placeholder="Layout" />
             </SelectTrigger>
             <SelectContent>
               {nonRandomLayouts.map(key =>
                 <SelectItem key={key} value={key} className="w-full">
-                  <div className="space-x-6 flex flex-row items-center justify-between font-mono">
+                  <div className="space-x-6 flex flex-row items-center justify-between">
                     <div className="flex">{
                       (allLayoutLabels as any)[key]
                     }</div>
@@ -197,7 +198,7 @@ export function TopMenu() {
           checked={showCaptions}
           onCheckedChange={setShowCaptions}
         />
-        <Label>
+        <Label className="text-gray-200 dark:text-gray-200">
           <span className="hidden md:inline">Caption</span>
           <span className="inline md:hidden">Cap.</span>
         </Label>
@@ -205,7 +206,7 @@ export function TopMenu() {
         {/*
         <div className={cn(
           `transition-all duration-200 ease-in-out`,
-          `flex flex-row items-center space-x-3 font-mono w-1/2 md:w-auto md:hidden`
+          `flex flex-row items-center space-x-3 w-1/2 md:w-auto md:hidden`
         )}>
           <Label className="flex text-2xs md:text-sm md:w-24">Font:</Label>
           <Select
@@ -232,13 +233,17 @@ export function TopMenu() {
       </div>
       <div className={cn(
           `transition-all duration-200 ease-in-out`,
-          `flex  flex-grow flex-col space-y-2 md:space-y-0 md:flex-row items-center md:space-x-3 font-mono w-full md:w-auto`
+          `flex  flex-grow flex-col space-y-2 md:space-y-0 md:flex-row items-center md:space-x-3 w-full md:w-auto`
         )}>
         <div className="flex flex-row flex-grow w-full">
           <div className="flex flex-row flex-grow w-full">
             <Input
               placeholder="1. Story (eg. detective dog)"
-              className="w-1/2 bg-neutral-300 text-neutral-800 dark:bg-neutral-300 dark:text-neutral-800 rounded-r-none border-r-stone-100"
+              className={cn(
+                `w-1/2 rounded-r-none`,
+                `bg-gray-100 text-gray-700 dark:bg-gray-100 dark:text-gray-700`,
+                `border-r-stone-100`
+              )}
               // disabled={atLeastOnePanelIsBusy}
               onChange={(e) => {
                 setDraftPromptB(e.target.value)
@@ -252,7 +257,11 @@ export function TopMenu() {
             />
             <Input
               placeholder="2. Style (eg 'rain, shiba')"
-              className="w-1/2 bg-neutral-300 text-neutral-800 dark:bg-neutral-300 dark:text-neutral-800 border-l-stone-100 rounded-l-none rounded-r-none"
+              className={cn(
+                `w-1/2`,
+                `bg-gray-100 text-gray-700 dark:bg-gray-100 dark:text-gray-700`,
+                `border-l-gray-300 rounded-l-none rounded-r-none`
+              )}
               // disabled={atLeastOnePanelIsBusy}
               onChange={(e) => {
                 setDraftPromptA(e.target.value)
@@ -269,6 +278,7 @@ export function TopMenu() {
             className={cn(
               `rounded-l-none cursor-pointer`,
               `transition-all duration-200 ease-in-out`,
+              `text-xl`,
               `bg-[rgb(59,134,247)] hover:bg-[rgb(69,144,255)] disabled:bg-[rgb(59,134,247)]`
               )}
             onClick={() => {
@@ -287,7 +297,7 @@ export function TopMenu() {
         are confused about why they can't activate it
       <div className={cn(
           `transition-all duration-200 ease-in-out`,
-          `hidden md:flex flex-row items-center space-x-3 font-mono w-full md:w-auto`
+          `hidden md:flex flex-row items-center space-x-3 w-full md:w-auto`
       )}>
         <Label className="flex text-2xs md:text-sm w-24">Font:</Label>
         <Select

src/app/interface/zoom/index.tsx

@@ -11,11 +11,11 @@ export function Zoom() {
     <div className={cn(
       `print:hidden`,
       // `fixed flex items-center justify-center bottom-8 top-32 right-8 z-10 h-screen`,
-      `fixed flex flex-col items-center bottom-8 top-28 right-2 md:top-20 md:right-6 z-10`,
+      `fixed flex flex-col items-center bottom-8 top-40 right-2 md:top-28 md:right-6 z-10`,
       `animation-all duration-300 ease-in-out`,
       isGeneratingStory ? `scale-0 opacity-0` : ``,
     )}>
-      <div className="font-mono font-bold text-xs pb-2 text-stone-600 bg-stone-50 p-1 rounded-sm">
+      <div className="font-bold text-xs pb-2 text-stone-600 bg-stone-50 dark:text-stone-600 dark:bg-stone-50 p-1 rounded-sm">
         Zoom
       </div>
       <div className="w-2">

src/app/layout.tsx

@@ -1,8 +1,6 @@
+import { fonts } from '@/lib/fonts'
 import './globals.css'
 import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-
-const inter = Inter({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
   title: 'AI Comic Factory: generate your own comics! Powered by Hugging Face 🤗',
@@ -16,7 +14,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>
+      <body className={fonts.actionman.className}>
         {children}
       </body>
     </html>

src/app/main.tsx

@@ -14,6 +14,11 @@ import { BottomBar } from "./interface/bottom-bar"
 import { Page } from "./interface/page"
 import { getStoryContinuation } from "./queries/getStoryContinuation"
 import { useDynamicConfig } from "@/lib/useDynamicConfig"
+import { useLocalStorage } from "usehooks-ts"
+import { localStorageKeys } from "./interface/settings-dialog/localStorageKeys"
+import { defaultSettings } from "./interface/settings-dialog/defaultSettings"
+import { Button } from "@/components/ui/button"
+import { SignUpCTA } from "./interface/sign-up-cta"
 
 export default function Main() {
   const [_isPending, startTransition] = useTransition()
@@ -26,11 +31,19 @@ export default function Main() {
   const preset = useStore(s => s.preset)
   const prompt = useStore(s => s.prompt)
 
-  const nbPages = useStore(s => s.nbPages)
-  const nbPanelsPerPage = useStore(s => s.nbPanelsPerPage)
-  const nbTotalPanels = useStore(s => s.nbTotalPanels)
-  const setNbPages = useStore(s => s.setNbPages)
-  const setNbPanelsPerPage = useStore(s => s.setNbPanelsPerPage)
+  const currentNbPanelsPerPage = useStore(s => s.currentNbPanelsPerPage)
+  const maxNbPanelsPerPage = useStore(s => s.maxNbPanelsPerPage)
+  const currentNbPages = useStore(s => s.currentNbPages)
+  const maxNbPages = useStore(s => s.maxNbPages)
+  const currentNbPanels = useStore(s => s.currentNbPanels)
+  const maxNbPanels = useStore(s => s.maxNbPanels)
+
+  const setCurrentNbPanelsPerPage = useStore(s => s.setCurrentNbPanelsPerPage)
+  const setMaxNbPanelsPerPage = useStore(s => s.setMaxNbPanelsPerPage)
+  const setCurrentNbPages = useStore(s => s.setCurrentNbPages)
+  const setMaxNbPages = useStore(s => s.setMaxNbPages)
+  const setCurrentNbPanels = useStore(s => s.setCurrentNbPanels)
+  const setMaxNbPanels = useStore(s => s.setMaxNbPanels)
 
   const setPanels = useStore(s => s.setPanels)
   const setCaptions = useStore(s => s.setCaptions)
@@ -39,12 +52,28 @@ export default function Main() {
 
   const [waitABitMore, setWaitABitMore] = useState(false)
 
+  const [userDefinedMaxNumberOfPages, setUserDefinedMaxNumberOfPages] = useLocalStorage<number>(
+    localStorageKeys.userDefinedMaxNumberOfPages,
+    defaultSettings.userDefinedMaxNumberOfPages
+  )
+  
+  useEffect(() => {
+    if (maxNbPages !== userDefinedMaxNumberOfPages) {
+      setMaxNbPages(userDefinedMaxNumberOfPages)
+    }
+  }, [maxNbPages, userDefinedMaxNumberOfPages])
+
+
   useEffect(() => {
     if (isConfigReady) {
-      setNbPages(config.maxNbPages)
-      setNbPanelsPerPage(config.nbPanelsPerPage)
+
+      // note: this has very low impact at the moment as we are always using the value 4
+      // however I would like to progressively evolve the code to make it dynamic
+      setCurrentNbPanelsPerPage(config.nbPanelsPerPage)
+      setMaxNbPanelsPerPage(config.nbPanelsPerPage)
     }
   }, [JSON.stringify(config), isConfigReady])
+
   // react to prompt changes
   useEffect(() => {
     if (!prompt) { return }
@@ -85,7 +114,7 @@ export default function Main() {
 
       for (
         let currentPanel = 0;
-        currentPanel < nbTotalPanels;
+        currentPanel < currentNbPanels;
         currentPanel += nbPanelsToGenerate
       ) {
         try {
@@ -94,7 +123,7 @@ export default function Main() {
             stylePrompt,
             userStoryPrompt,
             nbPanelsToGenerate,
-            nbTotalPanels,
+            maxNbPanels,
             existingPanels,
           })
           console.log("LLM generated some new panels:", candidatePanels)
@@ -133,7 +162,7 @@ export default function Main() {
           setGeneratingStory(false)
           break
         }
-        if (currentPanel > (nbTotalPanels / 2)) {
+        if (currentPanel > (currentNbPanels / 2)) {
           console.log("good, we are half way there, hold tight!")
           // setWaitABitMore(true)
         }
@@ -147,7 +176,7 @@ export default function Main() {
       */
  
     })
-  }, [prompt, preset?.label, nbPages, nbPanelsPerPage, nbTotalPanels]) // important: we need to react to preset changes too
+  }, [prompt, preset?.label, currentNbPanels, maxNbPanels]) // important: we need to react to preset changes too
 
   return (
     <Suspense>
@@ -173,10 +202,18 @@ export default function Main() {
             style={{
               width: `${zoomLevel}%`
             }}>
-            {Array(nbPages).fill(0).map((_, i) => <Page key={i} page={i} />)}
+            {Array(currentNbPages).fill(0).map((_, i) => <Page key={i} page={i} />)}
           </div>
+          {
+          // currentNbPages < maxNbPages &&
+          //   <div className="flex flex-col space-y-2 pt-2 pb-6 text-gray-600 dark:text-gray-600">
+          //     <div>Happy with your story?</div>
+          //     <div>You can <Button>Add page {currentNbPages + 1} 👀</Button></div>
+          //   </div>
+          }
         </div>
       </div>
+      <SignUpCTA />
       <Zoom />
       <BottomBar />
       <div className={cn(

src/app/queries/getDynamicConfig.ts

@@ -6,8 +6,8 @@ import { getValidString } from "@/lib/getValidString"
 import { DynamicConfig } from "@/types"
 
 export async function getDynamicConfig(): Promise<DynamicConfig> {
-  const maxNbPages = getValidNumber(process.env.MAX_NB_PAGES, 1, 16, 1)
-  const nbPanelsPerPage = 4
+  const maxNbPages = getValidNumber(process.env.MAX_NB_PAGES, 1, Number.MAX_SAFE_INTEGER, 1)
+  const nbPanelsPerPage = 4 // for now this is static
   const nbTotalPanelsToGenerate = maxNbPages * nbPanelsPerPage
 
   const config = {

src/app/queries/getStoryContinuation.ts

@@ -8,14 +8,14 @@ export const getStoryContinuation = async ({
   stylePrompt = "",
   userStoryPrompt = "",
   nbPanelsToGenerate = 2,
-  nbTotalPanels = 4,
+  maxNbPanels = 4,
   existingPanels = [],
 }: {
   preset: Preset;
   stylePrompt?: string;
   userStoryPrompt?: string;
   nbPanelsToGenerate?: number;
-  nbTotalPanels?: number;
+  maxNbPanels?: number;
   existingPanels?: GeneratedPanel[];
 }): Promise<GeneratedPanel[]> => {
 
@@ -31,7 +31,7 @@ export const getStoryContinuation = async ({
       preset,
       prompt,
       nbPanelsToGenerate,
-      nbTotalPanels,
+      maxNbPanels,
       existingPanels,
     })
 

src/app/queries/predictNextPanels.ts

@@ -12,13 +12,13 @@ export const predictNextPanels = async ({
   preset,
   prompt = "",
   nbPanelsToGenerate = 2,
-  nbTotalPanels = 4,
+  maxNbPanels = 4,
   existingPanels = [],
 }: {
   preset: Preset;
   prompt: string;
   nbPanelsToGenerate?: number;
-  nbTotalPanels?: number;
+  maxNbPanels?: number;
   existingPanels: GeneratedPanel[];
 }): Promise<GeneratedPanel[]> => {
   // console.log("predictNextPanels: ", { prompt, nbPanelsToGenerate })
@@ -35,7 +35,7 @@ export const predictNextPanels = async ({
   const firstNextOrLast =
     existingPanels.length === 0
       ? "first"
-      : (nbTotalPanels - existingPanels.length) === nbTotalPanels
+      : (maxNbPanels - existingPanels.length) === maxNbPanels
       ? "last"
       : "next"
 
@@ -44,7 +44,7 @@ export const predictNextPanels = async ({
       role: "system",
       content: [
         `You are a writer specialized in ${preset.llmPrompt}`,
-        `Please write detailed drawing instructions and short (2-3 sentences long) speech captions for the ${firstNextOrLast} ${nbPanelsToGenerate} panels (out of ${nbTotalPanels} in total) of a new story, but keep it open-ended (it will be continued and expanded later). Please make sure each of those ${nbPanelsToGenerate} panels include info about character gender, age, origin, clothes, colors, location, lights, etc. Only generate those ${nbPanelsToGenerate} panels, but take into account the fact the panels are part of a longer story (${nbTotalPanels} panels long).`,
+        `Please write detailed drawing instructions and short (2-3 sentences long) speech captions for the ${firstNextOrLast} ${nbPanelsToGenerate} panels (out of ${maxNbPanels} in total) of a new story, but keep it open-ended (it will be continued and expanded later). Please make sure each of those ${nbPanelsToGenerate} panels include info about character gender, age, origin, clothes, colors, location, lights, etc. Only generate those ${nbPanelsToGenerate} panels, but take into account the fact the panels are part of a longer story (${maxNbPanels} panels long).`,
         `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 the instructions and narrative captions of those ${nbPanelsToGenerate} panels, don't add your own comments. The captions must be captivating, smart, entertaining. Be straight to the point, and never reply things like "Sure, I can.." etc. Reply using valid JSON!! Important: Write valid JSON!`

src/app/store/index.ts

@@ -12,9 +12,12 @@ export const useStore = create<{
   prompt: string
   font: FontName
   preset: Preset
-  nbPanelsPerPage: number
-  nbPages: number
-  nbTotalPanels: number
+  currentNbPanelsPerPage: number
+  maxNbPanelsPerPage: number
+  currentNbPages: number
+  maxNbPages: number
+  currentNbPanels: number
+  maxNbPanels: number
   panels: string[]
   captions: string[]
   upscaleQueue: Record<string, RenderedScene>
@@ -28,9 +31,14 @@ export const useStore = create<{
   panelGenerationStatus: Record<number, boolean>
   isGeneratingText: boolean
   atLeastOnePanelIsBusy: boolean
-  setNbPanelsPerPage: (nbPanelsPerPage: number) => void
-  setNbPages: (nbPages: number) => void
-  setTotalPanels: (nbTotalPanels: number) => void
+
+  setCurrentNbPanelsPerPage: (currentNbPanelsPerPage: number) => void
+  setMaxNbPanelsPerPage: (maxNbPanelsPerPage: number) => void
+  setCurrentNbPages: (currentNbPages: number) => void
+  setMaxNbPages: (maxNbPages: number) => void
+  setCurrentNbPanels: (currentNbPanels: number) => void
+  setMaxNbPanels: (maxNbPanels: number) => void
+  
   setRendered: (panelId: string, renderedScene: RenderedScene) => void
   addToUpscaleQueue: (panelId: string, renderedScene: RenderedScene) => void
   removeFromUpscaleQueue: (panelId: string) => void
@@ -56,9 +64,14 @@ export const useStore = create<{
   prompt: "",
   font: "actionman",
   preset: getPreset(defaultPreset),
-  nbPanelsPerPage: 4,
-  nbPages: 1,
-  nbTotalPanels: 4,
+
+  currentNbPanelsPerPage: 4,
+  maxNbPanelsPerPage: 4,
+  currentNbPages: 1,
+  maxNbPages: 1,
+  currentNbPanels: 4,
+  maxNbPanels: 4,
+
   panels: [],
   captions: [],
   upscaleQueue: {} as Record<string, RenderedScene>,
@@ -72,25 +85,47 @@ export const useStore = create<{
   panelGenerationStatus: {},
   isGeneratingText: false,
   atLeastOnePanelIsBusy: false,
-  setNbPanelsPerPage: (nbPanelsPerPage: number) => {
-    const { nbPages } = get()
+
+
+  setCurrentNbPanelsPerPage: (currentNbPanelsPerPage: number) => {
+    const { currentNbPages } = get()
+    set({
+      currentNbPanelsPerPage,
+      currentNbPanels: currentNbPanelsPerPage * currentNbPages
+    })
+  },
+  setMaxNbPanelsPerPage: (maxNbPanelsPerPage: number) => {
+    const { maxNbPages } = get()
+    set({
+      maxNbPanelsPerPage,
+      maxNbPanels: maxNbPanelsPerPage * maxNbPages,
+    })
+  },
+  setCurrentNbPages: (currentNbPages: number) => {
+    const { currentNbPanelsPerPage } = get()
+    set({
+      currentNbPages,
+      currentNbPanels: currentNbPanelsPerPage * currentNbPages
+    })
+  },
+  setMaxNbPages: (maxNbPages: number) => {
+    const { maxNbPanelsPerPage } = get()
     set({
-      nbPanelsPerPage,
-      nbTotalPanels: nbPanelsPerPage * nbPages,
+      maxNbPages,
+      maxNbPanels: maxNbPanelsPerPage * maxNbPages,
     })
   },
-  setNbPages: (nbPages: number) => {
-    const { nbPanelsPerPage } = get()
+  setCurrentNbPanels: (currentNbPanels: number) => {
     set({
-      nbPages,
-      nbTotalPanels: nbPanelsPerPage * nbPages,
+      currentNbPanels,
     })
   },
-  setTotalPanels: (nbTotalPanels: number) => {
+  setMaxNbPanels: (maxNbPanels: number) => {
     set({
-      nbTotalPanels,
+      maxNbPanels
     })
   },
+  
   setRendered: (panelId: string, renderedScene: RenderedScene) => {
     const { renderedScenes } = get()
     set({
@@ -166,14 +201,14 @@ export const useStore = create<{
   },
   setLayout: (layoutName: LayoutName) => {
 
-    const { nbPages } = get()
+    const { currentNbPages } = get()
 
     const layout = layoutName === "random"
     ? getRandomLayoutName()
     : layoutName
 
     const layouts: LayoutName[] = []
-    for (let i = 0; i < nbPages; i++) {
+    for (let i = 0; i < currentNbPages; i++) {
       layouts.push(
         layoutName === "random"
           ? getRandomLayoutName()
@@ -215,9 +250,9 @@ export const useStore = create<{
     
     
     const canvas = await html2canvas(page)
-    console.log("canvas:", canvas)
+    // console.log("canvas:", canvas)
 
-    const data = canvas.toDataURL('image/jpeg', 0.5)
+    const data = canvas.toDataURL('image/jpeg', 0.97)
     return data
   },
   download: async () => {
@@ -238,14 +273,14 @@ export const useStore = create<{
   },
   generate: (prompt: string, presetName: PresetName, layoutName: LayoutName) => {
 
-    const { nbPages } = get()
+    const { currentNbPages } = get()
     
     const layout = layoutName === "random"
     ? getRandomLayoutName()
     : layoutName
 
     const layouts: LayoutName[] = []
-    for (let i = 0; i < nbPages; i++) {
+    for (let i = 0; i < currentNbPages; i++) {
       layouts.push(
         layoutName === "random"
           ? getRandomLayoutName()

src/components/ui/dialog.tsx

@@ -41,7 +41,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-stone-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full dark:border-stone-800 dark:bg-stone-950",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-stone-200 bg-white p-6 shadow-2xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-3xl md:w-full dark:border-stone-800 dark:bg-stone-950",
         className
       )}
       {...props}

src/components/ui/select.tsx

@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-stone-200 border-stone-200 bg-transparent px-3 py-2 text-sm ring-offset-white placeholder:text-stone-500 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-stone-800 dark:border-stone-800 dark:ring-offset-stone-950 dark:placeholder:text-stone-400 dark:focus:ring-stone-800",
+      "flex h-10 w-full items-center justify-between rounded-md border border-stone-200 border-stone-200 bg-transparent px-3 py-2 text-base ring-offset-white placeholder:text-stone-500 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-stone-800 dark:border-stone-800 dark:ring-offset-stone-950 dark:placeholder:text-stone-400 dark:focus:ring-stone-800",
       className
     )}
     {...props}
@@ -68,7 +68,7 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    className={cn("py-1.5 pl-8 pr-2 text-base font-semibold", className)}
     {...props}
   />
 ))
@@ -81,7 +81,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-stone-100 focus:text-stone-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-stone-800 dark:focus:text-stone-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-base outline-none focus:bg-stone-100 focus:text-stone-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-stone-800 dark:focus:text-stone-50",
       className
     )}
     {...props}

src/lib/usePageOrientation.ts

@@ -0,0 +1,38 @@
+import { useEffect } from "react";
+
+/**
+ * This will turn the page in portrait or landscape depending on the number of pages
+ */
+const usePageOrientation = () => {
+  useEffect(() => {
+    const updatePageOrientation = () => {
+      const pages = document.querySelectorAll(".comic-page");
+      const styleEl = document.createElement("style");
+
+      // Append style element to the head
+      document.head.appendChild(styleEl);
+
+      // Get the style sheet created in the above step
+      const styleSheet = styleEl.sheet as CSSStyleSheet;
+
+      if (pages.length >= 2) {
+        styleSheet.insertRule("@page { size: landscape }", 0);
+      } else {
+        styleSheet.insertRule("@page { size: portrait }", 0);
+      }
+    };
+
+    // Execute when the DOM is fully loaded 
+    updatePageOrientation();
+
+    // Also execute when the window is resized
+    window.addEventListener("resize", updatePageOrientation);
+
+    // Clean up event listener on unmount
+    return () => {
+      window.removeEventListener("resize", updatePageOrientation);
+    };
+  }, []);  // Empty dependency array ensures this runs once on mount and cleanup on unmount
+};
+
+export default usePageOrientation;

src/types.ts

@@ -174,6 +174,7 @@ export type Settings = {
   groqApiKey: string
   groqApiLanguageModel: string
   hasGeneratedAtLeastOnce: boolean
+  userDefinedMaxNumberOfPages: number
 }
 
 export type DynamicConfig = {

tailwind.config.js

@@ -17,6 +17,16 @@ module.exports = {
       },
     },
     extend: {
+      spacing: {
+        17: '4.25rem', // 68px
+        18: '4.5rem', // 72px
+        19: '4.75rem', // 76px
+        20: '5rem', // 80px
+        21: '5.25rem', // 84px
+        22: '5.5rem', // 88px
+        22: '5.5rem', // 88px
+        26: '6.5rem', // 104px
+      },
       fontFamily: {
         indieflower: ['var(--font-indieflower)'],
         thegirlnextdoor: ['var(--font-the-girl-next-door)'],