update for oauth

.env

@@ -24,6 +24,8 @@ NEXT_PUBLIC_ENABLE_RATE_LIMITER="false"
 ENABLE_HUGGING_FACE_OAUTH=
 ENABLE_HUGGING_FACE_OAUTH_WALL=
 HUGGING_FACE_OAUTH_CLIENT_ID=
+
+# in production this should be the space's domain and/or URL
 HUGGING_FACE_OAUTH_REDIRECT_URL=
 
 # this one must be kept secret (and is unused for now)

package-lock.json

@@ -8,7 +8,7 @@
       "name": "@jbilcke/comic-factory",
       "version": "1.2.0",
       "dependencies": {
-        "@aitube/clap": "0.0.10",
+        "@aitube/clap": "0.0.14",
         "@anthropic-ai/sdk": "^0.19.1",
         "@huggingface/hub": "^0.14.2",
         "@huggingface/inference": "^2.6.1",
@@ -81,9 +81,9 @@
       }
     },
     "node_modules/@aitube/clap": {
-      "version": "0.0.10",
-      "resolved": "https://registry.npmjs.org/@aitube/clap/-/clap-0.0.10.tgz",
-      "integrity": "sha512-pj855yWhUJ0QTJIaxMJhg0PwC3JaHsScJ5rQ8iqog7zDBWNNJR9MPBtFDYRuIs3vmUsGVxHwSlIBz5I1VjMF8w==",
+      "version": "0.0.14",
+      "resolved": "https://registry.npmjs.org/@aitube/clap/-/clap-0.0.14.tgz",
+      "integrity": "sha512-i4mq3YFecWVOTS/p5QaSQ0VJfurKXlyRc8FJMqKI6P/7rpf4vE4IL+jBKa4HPsYeNt85/KOt3MJKEFVtgiWGfQ==",
       "dependencies": {
         "pure-uuid": "^1.8.1",
         "yaml": "^2.4.1"
@@ -119,9 +119,9 @@
       }
     },
     "node_modules/@anthropic-ai/sdk/node_modules/@types/node": {
-      "version": "18.19.31",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.31.tgz",
-      "integrity": "sha512-ArgCD39YpyyrtFKIqMDvjz79jto5fcI/SVUs2HwB+f0dAzq68yqOdyaSivLiLugSziTpNXLQrVb7RZFmdZzbhA==",
+      "version": "18.19.32",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.32.tgz",
+      "integrity": "sha512-2bkg93YBSDKk8DLmmHnmj/Rwr18TLx7/n+I23BigFwgexUJoMHZOd8X1OFxuF/W3NN0S2W2E5sVabI5CPinNvA==",
       "dependencies": {
         "undici-types": "~5.26.4"
       }
@@ -227,9 +227,9 @@
       }
     },
     "node_modules/@floating-ui/dom": {
-      "version": "1.6.4",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.4.tgz",
-      "integrity": "sha512-0G8R+zOvQsAG1pg2Q99P21jiqxqGBW1iRe/iXHsBRBxnpXKFI8QwbB4x5KmYLggNO5m34IQgOIu9SCRfR/WWiQ==",
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.5.tgz",
+      "integrity": "sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==",
       "dependencies": {
         "@floating-ui/core": "^1.0.0",
         "@floating-ui/utils": "^0.2.0"
@@ -2890,9 +2890,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001615",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001615.tgz",
-      "integrity": "sha512-1IpazM5G3r38meiae0bHRnPhz+CBQ3ZLqbQMtrg+AsTPKAXgW38JNsXkyZ+v8waCsDmPq87lmfun5Q2AGysNEQ==",
+      "version": "1.0.30001616",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001616.tgz",
+      "integrity": "sha512-RHVYKov7IcdNjVHJFNY/78RdG4oGVjbayxv8u5IO74Wv7Hlq4PnJE6mo/OjFijjVFNy5ijnCt6H3IIo4t+wfEw==",
       "funding": [
         {
           "type": "opencollective",
@@ -3322,9 +3322,9 @@
       }
     },
     "node_modules/cookies-next/node_modules/@types/node": {
-      "version": "16.18.96",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.96.tgz",
-      "integrity": "sha512-84iSqGXoO+Ha16j8pRZ/L90vDMKX04QTYMTfYeE1WrjWaZXuchBehGUZEpNgx7JnmlrIHdnABmpjrQjhCnNldQ=="
+      "version": "16.18.97",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.97.tgz",
+      "integrity": "sha512-4muilE1Lbfn57unR+/nT9AFjWk0MtWi5muwCEJqnOvfRQDbSfLCUdN7vCIg8TYuaANfhLOV85ve+FNpiUsbSRg=="
     },
     "node_modules/create-require": {
       "version": "1.1.1",
@@ -3648,9 +3648,9 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.756",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.756.tgz",
-      "integrity": "sha512-RJKZ9+vEBMeiPAvKNWyZjuYyUqMndcP1f335oHqn3BEQbs2NFtVrnK5+6Xg5wSM9TknNNpWghGDUCKGYF+xWXw=="
+      "version": "1.4.757",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.757.tgz",
+      "integrity": "sha512-jftDaCknYSSt/+KKeXzH3LX5E2CvRLm75P3Hj+J/dv3CL0qUYcOt13d5FN1NiL5IJbbhzHrb3BomeG2tkSlZmw=="
     },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
@@ -3666,9 +3666,9 @@
       }
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.16.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz",
-      "integrity": "sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==",
+      "version": "5.16.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.1.tgz",
+      "integrity": "sha512-4U5pNsuDl0EhuZpq46M5xPslstkviJuhrdobaRDBk2Jy2KO37FDAJl4lb2KlNabxT0m4MTK2UHNrsAcphE8nyw==",
       "dependencies": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.2.0"
@@ -4554,9 +4554,9 @@
       }
     },
     "node_modules/get-tsconfig": {
-      "version": "4.7.3",
-      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.7.3.tgz",
-      "integrity": "sha512-ZvkrzoUA0PQZM6fy6+/Hce561s+faD1rsNwhnO5FelNjyy7EMGJ3Rz1AQ8GYDWjhRs/7dBLOEJvhK8MiEJOAFg==",
+      "version": "4.7.4",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.7.4.tgz",
+      "integrity": "sha512-ofbkKj+0pjXjhejr007J/fLf+sW+8H7K5GCm+msC8q3IpvgjobpyPqSRFemNyIMxklC0zeJpi7VDFna19FacvQ==",
       "dependencies": {
         "resolve-pkg-maps": "^1.0.0"
       },
@@ -4680,9 +4680,9 @@
       }
     },
     "node_modules/groq-sdk/node_modules/@types/node": {
-      "version": "18.19.31",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.31.tgz",
-      "integrity": "sha512-ArgCD39YpyyrtFKIqMDvjz79jto5fcI/SVUs2HwB+f0dAzq68yqOdyaSivLiLugSziTpNXLQrVb7RZFmdZzbhA==",
+      "version": "18.19.32",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.32.tgz",
+      "integrity": "sha512-2bkg93YBSDKk8DLmmHnmj/Rwr18TLx7/n+I23BigFwgexUJoMHZOd8X1OFxuF/W3NN0S2W2E5sVabI5CPinNvA==",
       "dependencies": {
         "undici-types": "~5.26.4"
       }
@@ -8298,9 +8298,9 @@
       }
     },
     "node_modules/openai": {
-      "version": "4.40.2",
-      "resolved": "https://registry.npmjs.org/openai/-/openai-4.40.2.tgz",
-      "integrity": "sha512-r9AIaYQNHw8HGJpnny6Rcu/0moGUVqvpv0wTJfP0hKlk8ja5DVUMUCdPWEVfg7lxQMC+wIh+Qjp3onDIhVBemA==",
+      "version": "4.42.0",
+      "resolved": "https://registry.npmjs.org/openai/-/openai-4.42.0.tgz",
+      "integrity": "sha512-xbiQQ2YNqdkE6cHqeWKa7lsAvdYfgp84XiNFOVkAMa6+9KpmOL4hCWCRR6e6I/clpaens/T9XeLVtyC5StXoRw==",
       "dependencies": {
         "@types/node": "^18.11.18",
         "@types/node-fetch": "^2.6.4",
@@ -8316,9 +8316,9 @@
       }
     },
     "node_modules/openai/node_modules/@types/node": {
-      "version": "18.19.31",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.31.tgz",
-      "integrity": "sha512-ArgCD39YpyyrtFKIqMDvjz79jto5fcI/SVUs2HwB+f0dAzq68yqOdyaSivLiLugSziTpNXLQrVb7RZFmdZzbhA==",
+      "version": "18.19.32",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.32.tgz",
+      "integrity": "sha512-2bkg93YBSDKk8DLmmHnmj/Rwr18TLx7/n+I23BigFwgexUJoMHZOd8X1OFxuF/W3NN0S2W2E5sVabI5CPinNvA==",
       "dependencies": {
         "undici-types": "~5.26.4"
       }

package.json

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@aitube/clap": "0.0.10",
+    "@aitube/clap": "0.0.14",
     "@anthropic-ai/sdk": "^0.19.1",
     "@huggingface/hub": "^0.14.2",
     "@huggingface/inference": "^2.6.1",

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

@@ -29,7 +29,7 @@ function BottomBar() {
 
   const preset = useStore(s => s.preset)
   
-  const canSeeBetaFeatures = getParam<boolean>("beta", false)
+  const canSeeBetaFeatures = true // getParam<boolean>("beta", false)
 
   const allStatus = Object.values(panelGenerationStatus)
   const remainingImages = allStatus.reduce((acc, s) => (acc + (s ? 1 : 0)), 0)

src/app/interface/grid/index.tsx

@@ -6,7 +6,7 @@ import { cn } from "@/lib/utils"
 import { useStore } from "@/app/store"
 
 export function Grid({ children, className }: { children: ReactNode; className: string }) {
-  const zoomLevel = useStore(state => state.zoomLevel)
+  const zoomLevel = useStore(s => s.zoomLevel)
 
   return (
     <div

src/app/interface/page/index.tsx

@@ -7,8 +7,8 @@ import { useStore } from "@/app/store"
 import { cn } from "@/lib/utils"
 
 export function Page({ page }: { page: number }) {
-  const zoomLevel = useStore(state => state.zoomLevel)
-  const layouts = useStore(state => state.layouts)
+  const zoomLevel = useStore(s => s.zoomLevel)
+  const layouts = useStore(s => s.layouts)
 
   // attention: here we use a fallback to layouts[0]
   // if no predetermined layout exists for this page number
@@ -39,9 +39,11 @@ export function Page({ page }: { page: number }) {
   // this was used to keep track of the page HTML element,
   // for use with a HTML-to-bitmap library
   // but the CSS layout wasn't followed properly and it depended on the zoom level
+  //
+  // update: in the future if we want a good html to image convertion
   /*
 
-  const setPage = useStore(state => state.setPage)
+  const setPage = useStore(s => s.setPage)
   const pageRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {

src/app/interface/panel/bubble/index.tsx

@@ -14,8 +14,8 @@ export function Bubble({ children, onChange }: {
 }) {
    
   const ref = useRef<HTMLDivElement>(null)
-  const zoomLevel = useStore(state => state.zoomLevel)
-  const showCaptions = useStore(state => state.showCaptions)
+  const zoomLevel = useStore(s => s.zoomLevel)
+  const showCaptions = useStore(s => s.showCaptions)
 
   const text = useRef(`${children || ''}`)
 

src/app/interface/panel/index.tsx

@@ -53,27 +53,27 @@ export function Panel({
 
   const [mouseOver, setMouseOver] = useState(false)
   const ref = useRef<HTMLImageElement>(null)
-  const font = useStore(state => state.font)
-  const preset = useStore(state => state.preset)
+  const font = useStore(s => s.font)
+  const preset = useStore(s => s.preset)
 
-  const setGeneratingImages = useStore(state => state.setGeneratingImages)
+  const setGeneratingImages = useStore(s => s.setGeneratingImages)
 
-  const panels = useStore(state => state.panels)
+  const panels = useStore(s => s.panels)
   const prompt = panels[panelIndex] || ""
 
-  const setPanelPrompt = useStore(state => state.setPanelPrompt)
+  const setPanelPrompt = useStore(s => s.setPanelPrompt)
 
-  const captions = useStore(state => state.captions)
+  const captions = useStore(s => s.captions)
   const caption = captions[panelIndex] || ""
-  const setPanelCaption = useStore(state => state.setPanelCaption)
+  const setPanelCaption = useStore(s => s.setPanelCaption)
   
-  const zoomLevel = useStore(state => state.zoomLevel)
+  const zoomLevel = useStore(s => s.zoomLevel)
 
-  const addToUpscaleQueue = useStore(state => state.addToUpscaleQueue)
+  const addToUpscaleQueue = useStore(s => s.addToUpscaleQueue)
 
   const [_isPending, startTransition] = useTransition()
-  const renderedScenes = useStore(state => state.renderedScenes)
-  const setRendered = useStore(state => state.setRendered)
+  const renderedScenes = useStore(s => s.renderedScenes)
+  const setRendered = useStore(s => s.setRendered)
 
   const rendered = renderedScenes[panelIndex] || getInitialRenderedScene()
 
@@ -288,6 +288,8 @@ export function Panel({
 
     const renderedScene: RenderedScene | undefined = useStore.getState().renderedScenes[panelIndex]
 
+    // console.log("renderedScene:", renderedScene)
+
     // I'm trying to find a rule to handle the case were we load a .clap file
     // I think we should trash all the Panel objects for this to work properly 
     if (renderedScene && renderedScene.status === "pregenerated" && renderedScene.assetUrl) {

src/app/interface/select-global-layout/index.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useSearchParams } from "next/navigation"
+
+import { useStore } from "@/app/store"
+import { LayoutName, defaultLayout, nonRandomLayouts } from "@/app/layouts"
+import { useIsBusy } from "@/lib/useIsBusy"
+
+import { SelectLayout } from "../select-layout"
+
+export function SelectGlobalLayout() {
+  const searchParams = useSearchParams()
+
+  const requestedLayout = (searchParams?.get('layout') as LayoutName) || defaultLayout
+
+  const layout = useStore(s => s.layout)
+  const setLayout = useStore(s => s.setLayout)
+
+  const isBusy = useIsBusy()
+
+  const [draftLayout, setDraftLayout] = useState<LayoutName>(requestedLayout)
+  
+  useEffect(() => {
+    const layoutChanged = draftLayout !== layout
+    if (layoutChanged && !isBusy) {
+      setLayout(draftLayout)
+    }
+  }, [layout, draftLayout, isBusy])
+    
+  return (
+    <SelectLayout
+      defaultValue={defaultLayout}
+      onLayoutChange={setDraftLayout}
+      disabled={isBusy}
+      layouts={nonRandomLayouts}
+    />
+  )
+}

src/app/interface/select-layout/index.tsx

@@ -0,0 +1,56 @@
+"use client"
+
+import Image from "next/image"
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { LayoutName, allLayoutLabels, defaultLayout, layoutIcons } from "@/app/layouts"
+
+export function SelectLayout({
+  defaultValue = defaultLayout,
+  onLayoutChange,
+  disabled = false,
+  layouts = [],
+}: {
+  defaultValue?: string | undefined
+  onLayoutChange?: ((name: LayoutName) => void)
+  disabled?: boolean
+  layouts: string[]
+}) {
+  return (
+    <Select
+      defaultValue={defaultValue}
+      onValueChange={(name) => { onLayoutChange?.(name as LayoutName) }}
+      disabled={disabled}
+      >
+      <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>
+        {layouts.map(key =>
+          <SelectItem key={key} value={key} className="w-full">
+            <div className="space-x-6 flex flex-row items-center justify-between">
+              <div className="flex">{
+                (allLayoutLabels as any)[key]
+              }</div>
+           
+              {(layoutIcons as any)[key]
+                ? <Image
+                    className="rounded-sm opacity-75"
+                    src={(layoutIcons as any)[key]}
+                    width={20}
+                    height={18}
+                    alt={key}
+                /> : null}
+            </div>
+          </SelectItem>
+        )}
+      </SelectContent>
+    </Select>
+  )
+}

src/app/interface/share/index.tsx

@@ -6,9 +6,9 @@ import { useState } from "react"
 
 export function Share() {
   const [isOpen, setOpen] = useState(false)
-  const preset = useStore(state => state.preset)
-  const prompt = useStore(state => state.prompt)
-  const panelGenerationStatus = useStore(state => state.panelGenerationStatus)
+  const preset = useStore(s => s.preset)
+  const prompt = useStore(s => s.prompt)
+  const panelGenerationStatus = useStore(s => s.panelGenerationStatus)
   const allStatus = Object.values(panelGenerationStatus)
   const remainingImages = allStatus.reduce((acc, s) => (acc + (s ? 1 : 0)), 0)
 

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

@@ -2,7 +2,6 @@
 
 import { useEffect, useState } from "react"
 import { useSearchParams } from "next/navigation"
-import Image from "next/image"
 import { StaticImageData } from "next/image"
 import { useLocalStorage } from "usehooks-ts"
 
@@ -20,25 +19,15 @@ import { Input } from "@/components/ui/input"
 import { PresetName, defaultPreset, nonRandomPresets, presets } from "@/app/engine/presets"
 import { useStore } from "@/app/store"
 import { Button } from "@/components/ui/button"
-import { LayoutName, allLayoutLabels, defaultLayout, nonRandomLayouts } from "@/app/layouts"
+import { LayoutName, defaultLayout, nonRandomLayouts } from "@/app/layouts"
 import { Switch } from "@/components/ui/switch"
 import { useOAuth } from "@/lib/useOAuth"
+import { useIsBusy } from "@/lib/useIsBusy"
 
-import layoutPreview0 from "../../../../public/layouts/layout0.jpg"
-import layoutPreview1 from "../../../../public/layouts/layout1.jpg"
-import layoutPreview2 from "../../../../public/layouts/layout2.jpg"
-import layoutPreview3 from "../../../../public/layouts/layout3.jpg"
 import { localStorageKeys } from "../settings-dialog/localStorageKeys"
 import { defaultSettings } from "../settings-dialog/defaultSettings"
 import { AuthWall } from "../auth-wall"
-
-const layoutIcons: Partial<Record<LayoutName, StaticImageData>> = {
-  Layout0: layoutPreview0,
-  Layout1: layoutPreview1,
-  Layout2: layoutPreview2,
-  Layout3: layoutPreview3,
-  Layout4: undefined,
-}
+import { SelectLayout } from "../select-layout"
 
 export function TopMenu() {
   const searchParams = useSearchParams()
@@ -49,25 +38,22 @@ export function TopMenu() {
   const requestedStoryPrompt = (searchParams?.get('storyPrompt') as string) || ""
   const requestedLayout = (searchParams?.get('layout') as LayoutName) || defaultLayout
 
-   // const font = useStore(state => state.font)
-  // const setFont = useStore(state => state.setFont)
-  const preset = useStore(state => state.preset)
-  const prompt = useStore(state => state.prompt)
-  const layout = useStore(state => state.layout)
-  const setLayout = useStore(state => state.setLayout)
-
-  const setShowCaptions = useStore(state => state.setShowCaptions)
-  const showCaptions = useStore(state => state.showCaptions)
+   // const font = useStore(s => s.font)
+  // const setFont = useStore(s => s.setFont)
+  const preset = useStore(s => s.preset)
+  const prompt = useStore(s => s.prompt)
+  const layout = useStore(s => s.layout)
+  const setLayout = useStore(s => s.setLayout)
 
-  const currentNbPages = useStore(state => state.currentNbPages)
-  const setCurrentNbPages = useStore(state => state.setCurrentNbPages)
+  const setShowCaptions = useStore(s => s.setShowCaptions)
+  const showCaptions = useStore(s => s.showCaptions)
 
-  const generate = useStore(state => state.generate)
+  const currentNbPages = useStore(s => s.currentNbPages)
+  const setCurrentNbPages = useStore(s => s.setCurrentNbPages)
 
-  const isGeneratingStory = useStore(state => state.isGeneratingStory)
-  const atLeastOnePanelIsBusy = useStore(state => state.atLeastOnePanelIsBusy)
-  const isBusy = isGeneratingStory || atLeastOnePanelIsBusy
+  const generate = useStore(s => s.generate)
 
+  const isBusy = useIsBusy()
 
   const [lastDraftPromptA, setLastDraftPromptA] = useLocalStorage<string>(
     "AI_COMIC_FACTORY_LAST_DRAFT_PROMPT_A",
@@ -167,36 +153,12 @@ export function TopMenu() {
 
           {/* <Label className="flex text-2xs md:text-sm md:w-24">Style:</Label> */}
 
-          <Select
+          <SelectLayout
             defaultValue={defaultLayout}
-            onValueChange={(value) => { setDraftLayout(value as LayoutName) }}
+            onLayoutChange={setDraftLayout}
             disabled={isBusy}
-            >
-            <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">
-                    <div className="flex">{
-                      (allLayoutLabels as any)[key]
-                    }</div>
-                 
-                      {(layoutIcons as any)[key]
-                        ? <Image
-                            className="rounded-sm opacity-75"
-                            src={(layoutIcons as any)[key]}
-                            width={20}
-                            height={18}
-                            alt={key}
-                        /> : null}
-              
-                  </div>
-                </SelectItem>
-              )}
-            </SelectContent>
-          </Select>
+            layouts={nonRandomLayouts}
+          />
         </div>
         <div className="flex flex-row items-center space-x-3">
         <Switch

src/app/layouts/index.tsx

@@ -1,10 +1,17 @@
 "use client"
 
+import { StaticImageData } from "next/image"
+
 import { Panel } from "@/app/interface/panel"
 import { pick } from "@/lib/pick"
 import { Grid } from "@/app/interface/grid"
 import { LayoutProps } from "@/types"
 
+import layoutPreview0 from "../../../public/layouts/layout0.jpg"
+import layoutPreview1 from "../../../public/layouts/layout1.jpg"
+import layoutPreview2 from "../../../public/layouts/layout2.jpg"
+import layoutPreview3 from "../../../public/layouts/layout3.jpg"
+
 export function Layout0({ page, nbPanels }: LayoutProps) {
   return (
     <Grid className="grid-cols-2 grid-rows-2">
@@ -440,3 +447,11 @@ export const getRandomLayoutName = (): LayoutName => {
 export function getRandomLayoutNames(): LayoutName[] {
   return nonRandomLayouts.sort(() => Math.random() - 0.5) as LayoutName[]
 }
+
+export const layoutIcons: Partial<Record<LayoutName, StaticImageData>> = {
+  Layout0: layoutPreview0,
+  Layout1: layoutPreview1,
+  Layout2: layoutPreview2,
+  Layout3: layoutPreview3,
+  Layout4: undefined,
+}

src/app/layouts/settings.tsx

@@ -0,0 +1,52 @@
+import { ClapMediaOrientation } from "@aitube/clap"
+
+import { LayoutName } from "."
+
+export type LayoutSettings = {
+  panel: number
+  orientation: ClapMediaOrientation
+  width: number
+  height: number
+}
+
+export const layouts: Record<LayoutName, LayoutSettings[]> = {
+  random: [],
+  Layout0: [
+    { panel: 0, orientation: ClapMediaOrientation.SQUARE, width: 1024, height: 1024 },
+    { panel: 1, orientation: ClapMediaOrientation.SQUARE, width: 1024, height: 1024 },
+    { panel: 2, orientation: ClapMediaOrientation.SQUARE, width: 1024, height: 1024 },
+    { panel: 3, orientation: ClapMediaOrientation.SQUARE, width: 1024, height: 1024 },
+  ],
+  Layout1: [
+    { panel: 0, orientation: ClapMediaOrientation.LANDSCAPE, width: 1024, height: 768 },
+    { panel: 1, orientation: ClapMediaOrientation.PORTRAIT, width: 768, height: 1024 },
+    { panel: 2, orientation: ClapMediaOrientation.PORTRAIT, width: 768, height: 1024 },
+    { panel: 3, orientation: ClapMediaOrientation.LANDSCAPE, width: 1024, height: 768 },
+  ],
+  Layout2: [
+    { panel: 0, orientation: ClapMediaOrientation.PORTRAIT, width: 768, height: 1024 },
+    { panel: 1, orientation: ClapMediaOrientation.PORTRAIT, width: 768, height: 1024 },
+    { panel: 2, orientation: ClapMediaOrientation.PORTRAIT, width: 512, height: 1024 },
+    { panel: 3, orientation: ClapMediaOrientation.LANDSCAPE, width: 1024, height: 768 },
+  ],
+  Layout3: [
+    { panel: 0, orientation: ClapMediaOrientation.LANDSCAPE, width: 1024, height: 768 },
+    { panel: 1, orientation: ClapMediaOrientation.PORTRAIT, width: 768, height: 1024 },
+    { panel: 2, orientation: ClapMediaOrientation.PORTRAIT, width: 768, height: 1024 },
+    { panel: 3, orientation: ClapMediaOrientation.LANDSCAPE, width: 1024, height: 768 },
+  ],
+  Layout4: [
+    { panel: 0, orientation: ClapMediaOrientation.PORTRAIT, width: 512, height: 1024 },
+    { panel: 1, orientation: ClapMediaOrientation.LANDSCAPE, width: 1024, height: 768 },
+    { panel: 2, orientation: ClapMediaOrientation.PORTRAIT, width: 768, height: 1024 },
+    { panel: 3, orientation: ClapMediaOrientation.LANDSCAPE, width: 1024, height: 512 },
+  ],
+}
+/*
+Layout5: [
+  { panel: 0, orientation: ClapMediaOrientation.SQUARE, width: 1024, height: 1024 },
+  { panel: 1, orientation: ClapMediaOrientation.SQUARE, width: 1024, height: 1024 },
+  { panel: 2, orientation: ClapMediaOrientation.SQUARE, width: 1024, height: 1024 },
+  { panel: 3, orientation: ClapMediaOrientation.SQUARE, width: 1024, height: 1024 },
+]
+*/

src/app/main.tsx

@@ -63,7 +63,7 @@ export default function Main() {
   )
   
   const numberOfPanels = Object.keys(panels).length
-  const panelGenerationStatus = useStore(state => state.panelGenerationStatus)
+  const panelGenerationStatus = useStore(s => s.panelGenerationStatus)
   const allStatus = Object.values(panelGenerationStatus)
   const numberOfPendingGenerations = allStatus.reduce((acc, s) => (acc + (s ? 1 : 0)), 0)
 
@@ -121,9 +121,12 @@ export default function Main() {
     // console.log(`main.tsx: asked to re-generate!!`)
     if (!prompt) { return }
 
+
     // a quick and dirty hack to skip prompt regeneration,
     // unless the prompt has really changed
-    if (prompt === useStore.getState().currentClap?.meta.description) {
+    if (
+      prompt === useStore.getState().currentClap?.meta.description
+    ) {
       console.log(`loading a pre-generated comic, so skipping prompt regeneration..`)
       return
     }

src/app/queries/getDynamicConfig.ts

@@ -15,7 +15,10 @@ export async function getDynamicConfig(): Promise<DynamicConfig> {
     nbPanelsPerPage,
     nbTotalPanelsToGenerate,
     oauthClientId: getValidString(process.env.HUGGING_FACE_OAUTH_CLIENT_ID, ""),
+
+    // this doesn't work (conceptually)
     oauthRedirectUrl: getValidString(process.env.HUGGING_FACE_OAUTH_REDIRECT_URL, ""),
+
     oauthScopes: "openid profile inference-api",
     enableHuggingFaceOAuth: getValidBoolean(process.env.ENABLE_HUGGING_FACE_OAUTH, false),
     enableHuggingFaceOAuthWall: getValidBoolean(process.env.ENABLE_HUGGING_FACE_OAUTH_WALL, false),

src/app/store/index.ts

@@ -10,6 +10,8 @@ import { getParam } from "@/lib/getParam"
 
 import { LayoutName, defaultLayout, getRandomLayoutName } from "../layouts"
 import { putTextInInput } from "@/lib/putTextInInput"
+import { parsePresetFromPrompts } from "@/lib/parsePresetFromPrompts"
+import { parseLayoutFromStoryboards } from "@/lib/parseLayoutFromStoryboards"
 
 export const useStore = create<{
   prompt: string
@@ -54,7 +56,7 @@ export const useStore = create<{
   setPanels: (panels: string[]) => void
   setPanelPrompt: (newPrompt: string, index: number) => void
   setShowCaptions: (showCaptions: boolean) => void
-  setLayout: (layout: LayoutName) => void
+  setLayout: (layout: LayoutName, index?: number) => void
   setLayouts: (layouts: LayoutName[]) => void
   setCaptions: (captions: string[]) => void
   setPanelCaption: (newCaption: string, index: number) => void
@@ -77,6 +79,8 @@ export const useStore = create<{
   convertClapToComic: (clap: ClapProject) => Promise<{
     currentNbPanels: number
     prompt: string
+    preset: Preset
+    layout: LayoutName
     storyPrompt: string
     stylePrompt: string
     panels: string[]
@@ -298,15 +302,19 @@ export const useStore = create<{
       ))
     })
   },
-  setLayout: (layoutName: LayoutName) => {
-    const { maxNbPages, currentNbPanelsPerPage } = get()
+  setLayout: (layoutName: LayoutName, index?: number) => {
+    const { maxNbPages, currentNbPanelsPerPage, layouts } = get()
 
-    const layouts: LayoutName[] = []
     for (let i = 0; i < maxNbPages; i++) {
-      layouts.push(
-        layoutName === "random"
-          ? getRandomLayoutName()
-          : layoutName)
+      let name = layoutName === "random" ? getRandomLayoutName() : layoutName
+
+      if (typeof index === "number" && !isNaN(index) && isFinite(index)) {
+        if (i === index) {
+          layouts[i] = name
+        }
+      } else {
+        layouts[i] = name
+      }
     }
 
     set({
@@ -511,6 +519,8 @@ export const useStore = create<{
   convertClapToComic: async (clap: ClapProject): Promise<{
     currentNbPanels: number
     prompt: string
+    preset: Preset
+    layout: LayoutName
     storyPrompt: string
     stylePrompt: string
     panels: string[]
@@ -575,9 +585,12 @@ export const useStore = create<{
       captions.push(ui.prompt)
     })
 
-   return {
+
+    return {
       currentNbPanels: shots.length,
       prompt,
+      preset: parsePresetFromPrompts(panels),
+      layout: await parseLayoutFromStoryboards(shots.map(x => x.storyboard)),
       storyPrompt,
       stylePrompt,
       panels,
@@ -595,6 +608,8 @@ export const useStore = create<{
     const {
       currentNbPanels,
       prompt,
+      preset,
+      layout,
       storyPrompt,
       stylePrompt,
       panels,
@@ -610,6 +625,8 @@ export const useStore = create<{
       currentClap,
       currentNbPanels,
       prompt,
+      preset,
+      // layout,
       panels,
       renderedScenes,
       captions,

src/lib/getImageDimension.ts

@@ -1,16 +1,26 @@
+import { ClapMediaOrientation } from "@aitube/clap"
+
 export interface ImageDimension {
   width: number
   height: number
+  orientation: ClapMediaOrientation
 }
 
 export async function getImageDimension(src: string): Promise<ImageDimension> {
   if (!src) {
-    return { width: 0, height: 0 }
+    return { width: 0, height: 0, orientation:  ClapMediaOrientation.SQUARE }
   }
   const img = new Image()
   img.src = src
   await img.decode()
   const width = img.width
   const height = img.height
-  return { width, height }
+
+  let orientation = ClapMediaOrientation.SQUARE
+  if (width > height) { 
+    orientation = ClapMediaOrientation.LANDSCAPE
+  } else if (width < height) {
+    orientation = ClapMediaOrientation.PORTRAIT
+  }
+  return { width, height, orientation }
 }

src/lib/getOAuthRedirectUrl.ts

@@ -0,0 +1,11 @@
+export function getOAuthRedirectUrl(): string {
+  if (typeof window === "undefined") {
+    return "http://localhost:3000"
+  }
+
+  return (
+    window.location.hostname === "aicomicfactory.app" ? "https://aicomicfactory.app"
+    : window.location.hostname === "jbilcke-hf-ai-comic-factory.hf.space" ? "https://jbilcke-hf-ai-comic-factory.hf.space"
+    : "http://localhost:3000"
+  )
+}

src/lib/isValidNumber.ts

@@ -0,0 +1,3 @@
+export function isValidNumber(input?: any) {
+  return typeof input === "number" && !isNaN(input) && isFinite(input)
+}

src/lib/parseLayoutFromStoryboards.ts

@@ -0,0 +1,38 @@
+import { ClapSegment } from "@aitube/clap"
+
+import { LayoutName } from "@/app/layouts"
+import { layouts } from "@/app/layouts/settings"
+import { getImageDimension } from "./getImageDimension"
+
+export async function parseLayoutFromStoryboards(storyboards: ClapSegment[]): Promise<LayoutName> {
+
+  let bestCandidate: LayoutName = "Layout0"
+
+  for (const [layoutName, layoutPanels] of Object.entries(layouts)) {
+
+    let nbMatchingStoryboards = 0
+    let i = 0
+
+    for (const { panel, orientation, width, height } of layoutPanels) {
+
+      const storyboard = storyboards[i]
+
+      if (!storyboard) { continue }
+      if (!storyboard?.assetUrl) { continue }
+
+      const imgDimension = await getImageDimension(storyboard.assetUrl)
+
+      if (orientation === imgDimension.orientation) {
+        nbMatchingStoryboards++
+      }
+      
+      i++
+    }
+
+    if (nbMatchingStoryboards === 4) {
+      bestCandidate = layoutName as LayoutName
+    }
+  }
+
+  return bestCandidate
+}

src/lib/parsePresetFromPrompts.ts

@@ -0,0 +1,37 @@
+import { presets, PresetName, Preset } from "@/app/engine/presets"
+
+/**
+ * Try to guess the preset from a list of prompts
+ * 
+ * @param prompts 
+ * @returns 
+ */
+export function parsePresetFromPrompts(prompts: string[]): Preset {
+
+  const presetToCount: Record<PresetName, number> = {}
+  const chunkToPresets: Record<string, PresetName[]> = {}
+  
+  Object.values(presets).forEach(preset => {
+    preset.imagePrompt("").map(x => x.trim().toLowerCase()).forEach(chunk => {
+      chunkToPresets[chunk] = Array.isArray(chunkToPresets[chunk]) ? chunkToPresets[chunk] : []
+      if (!chunkToPresets[chunk].includes(preset.id)) {
+        chunkToPresets[chunk].push(preset.id)
+      }
+    })
+  })
+  
+  prompts.forEach(prompt => {
+    prompt.split(",").map(x => x.trim().toLowerCase()).forEach(chunk => {
+      if (Array.isArray(chunkToPresets[chunk])) {
+        const presetNames = chunkToPresets[chunk] as PresetName[]
+        presetNames.forEach(preset => {
+          presetToCount[preset] = (presetToCount[preset] || 0) + 1
+        })
+      }
+    })
+  })
+
+  const bestMatch: PresetName | undefined = Object.entries(presetToCount).sort((a, b) => b[1] - a[1]).map(x => x[0]).at(0) as (PresetName | undefined)
+
+  return presets[bestMatch || "neutral"] || presets.neutral
+}

src/lib/useImageDimension.ts

@@ -1,11 +1,13 @@
 import { useEffect, useState } from "react"
 
 import { ImageDimension, getImageDimension } from "./getImageDimension"
+import { ClapMediaOrientation } from "@aitube/clap"
 
 export function useImageDimension(src: string) {
   const [dimension, setDimension] = useState<ImageDimension>({
     width: 0,
     height: 0,
+    orientation: ClapMediaOrientation.SQUARE
   })
 
   useEffect(() => {

src/lib/useIsBusy.ts

@@ -0,0 +1,9 @@
+import { useStore } from "@/app/store"
+
+export function useIsBusy() {
+  const isGeneratingStory = useStore(s => s.isGeneratingStory)
+  const atLeastOnePanelIsBusy = useStore(s => s.atLeastOnePanelIsBusy)
+  const isBusy = isGeneratingStory || atLeastOnePanelIsBusy
+
+  return isBusy
+}

src/lib/useOAuth.ts

@@ -9,6 +9,7 @@ import { getValidOAuth } from "./getValidOAuth"
 import { useDynamicConfig } from "./useDynamicConfig"
 import { useLocalStorage } from "usehooks-ts"
 import { useShouldDisplayLoginWall } from "./useShouldDisplayLoginWall"
+import { getOAuthRedirectUrl } from "./getOAuthRedirectUrl"
 
 export function useOAuth({
   debug = false
@@ -32,7 +33,10 @@ export function useOAuth({
   const [oauthResult, setOAuthResult] = usePersistedOAuth()
 
   const clientId = config.oauthClientId
-  const redirectUrl = config.oauthRedirectUrl
+
+  // const redirectUrl = config.oauthRedirectUrl
+  const redirectUrl = getOAuthRedirectUrl()
+
   const scopes = config.oauthScopes
   const enableOAuth = config.enableHuggingFaceOAuth