working to fix the config

.env

@@ -14,16 +14,19 @@ RENDERING_ENGINE="INFERENCE_API"
 LLM_ENGINE="INFERENCE_API"
 
 # set this to control the number of pages
-NEXT_PUBLIC_MAX_NB_PAGES=
+MAX_NB_PAGES=1
 
 # Set to "true" to create artificial delays and smooth out traffic
 NEXT_PUBLIC_ENABLE_RATE_LIMITER="false"
 
 # ------------- HUGGING FACE OAUTH -------------
-NEXT_PUBLIC_ENABLE_HUGGING_FACE_OAUTH=
-NEXT_PUBLIC_ENABLE_HUGGING_FACE_OAUTH_WALL=
-NEXT_PUBLIC_HUGGING_FACE_OAUTH_CLIENT_ID=""
-HUGGING_FACE_OAUTH_SECRET=""
+ENABLE_HUGGING_FACE_OAUTH=
+ENABLE_HUGGING_FACE_OAUTH_WALL=
+HUGGING_FACE_OAUTH_CLIENT_ID=
+HUGGING_FACE_OAUTH_REDIRECT_URL=
+
+# this one must be kept secret (and is unused for now)
+HUGGING_FACE_OAUTH_SECRET=
 
 # ------------- PROVIDER AUTH ------------
 # You only need to configure the access token(s) for the provider(s) you want to use

Dockerfile

@@ -1,37 +1,3 @@
-ARG RENDERING_ENGINE
-ARG LLM_ENGINE
-ARG NEXT_PUBLIC_MAX_NB_PAGES
-ARG NEXT_PUBLIC_ENABLE_RATE_LIMITER
-ARG NEXT_PUBLIC_ENABLE_HUGGING_FACE_OAUTH
-ARG NEXT_PUBLIC_ENABLE_HUGGING_FACE_OAUTH_WALL
-ARG NEXT_PUBLIC_HUGGING_FACE_OAUTH_CLIENT_ID
-ARG HUGGING_FACE_OAUTH_SECRET
-ARG AUTH_HF_API_TOKEN
-ARG AUTH_REPLICATE_API_TOKEN
-ARG AUTH_OPENAI_API_KEY
-ARG AUTH_VIDEOCHAIN_API_TOKEN
-ARG AUTH_GROQ_API_KEY
-ARG RENDERING_REPLICATE_API_MODEL
-ARG ENDERING_REPLICATE_API_MODEL_VERSION
-ARG RENDERING_HF_INFERENCE_ENDPOINT_URL
-ARG RENDERING_HF_INFERENCE_API_BASE_MODEL
-ARG RENDERING_HF_INFERENCE_API_REFINER_MODEL
-ARG RENDERING_HF_INFERENCE_API_FILE_TYPE
-ARG RENDERING_VIDEOCHAIN_API_URL
-ARG RENDERING_OPENAI_API_BASE_URL
-ARG RENDERING_OPENAI_API_MODEL
-ARG LLM_GROQ_API_MODEL
-ARG LLM_OPENAI_API_BASE_URL
-ARG LLM_OPENAI_API_MODEL
-ARG LLM_HF_INFERENCE_ENDPOINT_URL
-ARG LLM_HF_INFERENCE_API_MODEL
-ARG NEXT_PUBLIC_ENABLE_COMMUNITY_SHARING
-ARG COMMUNITY_API_URL
-ARG COMMUNITY_API_TOKEN
-ARG COMMUNITY_API_ID
-ARG ENABLE_CENSORSHIP
-ARG SECRET_FINGERPRINT
-
 FROM node:20-alpine AS base
 
 # Install dependencies only when needed

src/app/interface/page/index.tsx

@@ -1,21 +1,33 @@
-import { allLayoutAspectRatios, allLayouts, allLayoutsNbPanels } from "@/app/layouts"
+"use client"
+
+import { useEffect, useRef } from "react"
+
+import { allLayoutAspectRatios, allLayouts } from "@/app/layouts"
 import { useStore } from "@/app/store"
-import { NB_PANELS_PER_PAGE } from "@/config"
 import { cn } from "@/lib/utils"
-import { useEffect, useRef } from "react"
 
 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 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 nbPages = Math.round(nbPanels / NB_PANELS_PER_PAGE)
+  const nbPages = useStore(s => s.nbPages)
+  const nbPanelsPerPage = useStore(s => s.nbPanelsPerPage)
+
+  // in the future, different layouts might have different numbers of panels
+  const allLayoutsNbPanels = {
+    Layout0: nbPanelsPerPage,
+    Layout1: nbPanelsPerPage,
+    Layout2: nbPanelsPerPage,
+    Layout3: nbPanelsPerPage,
+    // Layout4: nbPanelsPerPage
+  }
+
+  const nbPanels = ((allLayoutsNbPanels as any)[layout] as number) || nbPanelsPerPage
 
   /*
   const [canLoad, setCanLoad] = useState(false)
@@ -67,7 +79,14 @@ export function Page({ page }: { page: number}) {
       >
        <LayoutElement page={page} nbPanels={nbPanels} />
       </div>
-      {nbPages > 1 && <p className="w-full text-center pt-4 font-sans text-2xs font-semibold text-stone-600">Page {page + 1} / {nbPages}</p>}
+      {nbPages > 1 &&
+        <p className="w-full text-center pt-4 font-sans text-2xs font-semibold text-stone-600">
+          Page {page + 1}
+          {/*
+          alternative style:
+          Page {page + 1} / {nbPages}
+          */}
+        </p>}
     </div>
   )
 }

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

@@ -3,6 +3,8 @@
 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"
 
 import {
   Select,
@@ -19,15 +21,13 @@ import { PresetName, defaultPreset, nonRandomPresets, presets } from "@/app/engi
 import { useStore } from "@/app/store"
 import { Button } from "@/components/ui/button"
 import { LayoutName, allLayoutLabels, defaultLayout, nonRandomLayouts } from "@/app/layouts"
+import { Switch } from "@/components/ui/switch"
+import { useOAuth } from "@/lib/useOAuth"
 
 import layoutPreview0 from "../../../../public/layouts/layout0.jpg"
 import layoutPreview1 from "../../../../public/layouts/layout1.jpg"
 import layoutPreview2 from "../../../../public/layouts/layout2.jpg"
 import layoutPreview3 from "../../../../public/layouts/layout3.jpg"
-import { StaticImageData } from "next/image"
-import { Switch } from "@/components/ui/switch"
-import { useLocalStorage } from "usehooks-ts"
-import { useOAuth } from "@/lib/useOAuth"
 import { localStorageKeys } from "../settings-dialog/localStorageKeys"
 import { defaultSettings } from "../settings-dialog/defaultSettings"
 import { AuthWall } from "../auth-wall"
@@ -71,8 +71,7 @@ export function TopMenu() {
   const [draftPreset, setDraftPreset] = useState<PresetName>(requestedPreset)
   const [draftLayout, setDraftLayout] = useState<LayoutName>(requestedLayout)
   
-
-  const { canLogin, login, isLoggedIn, oauthResult } = useOAuth({ debug: false })
+  const { isLoggedIn, enableOAuthWall } = useOAuth({ debug: false })
   
   const [hasGeneratedAtLeastOnce, setHasGeneratedAtLeastOnce] = useLocalStorage<boolean>(
     localStorageKeys.hasGeneratedAtLeastOnce,
@@ -82,9 +81,7 @@ export function TopMenu() {
   const [showAuthWall, setShowAuthWall] = useState(false)
 
   const handleSubmit = () => {
-    const enableAuthWall = `${process.env.NEXT_PUBLIC_ENABLE_HUGGING_FACE_OAUTH_WALL || "false"}` === "true"
-
-    if (enableAuthWall && hasGeneratedAtLeastOnce && !isLoggedIn) {
+    if (enableOAuthWall && hasGeneratedAtLeastOnce && !isLoggedIn) {
       setShowAuthWall(true)
       return
     }

src/app/layouts/index.tsx

@@ -4,7 +4,6 @@ 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({ page, nbPanels }: LayoutProps) {
   return (
@@ -426,15 +425,6 @@ 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"

src/app/main.tsx

@@ -6,7 +6,6 @@ import { cn } from "@/lib/utils"
 import { fonts } from "@/lib/fonts"
 import { GeneratedPanel } from "@/types"
 import { joinWords } from "@/lib/joinWords"
-import { MAX_NB_PAGES } from "@/config"
 
 import { TopMenu } from "./interface/top-menu"
 import { useStore } from "./store"
@@ -14,27 +13,38 @@ import { Zoom } from "./interface/zoom"
 import { BottomBar } from "./interface/bottom-bar"
 import { Page } from "./interface/page"
 import { getStoryContinuation } from "./queries/getStoryContinuation"
+import { useDynamicConfig } from "@/lib/useDynamicConfig"
 
 export default function Main() {
   const [_isPending, startTransition] = useTransition()
 
-  const isGeneratingStory = useStore(state => state.isGeneratingStory)
-  const setGeneratingStory = useStore(state => state.setGeneratingStory)
+  const { config, isConfigReady } = useDynamicConfig()
+  const isGeneratingStory = useStore(s => s.isGeneratingStory)
+  const setGeneratingStory = useStore(s => s.setGeneratingStory)
 
-  const font = useStore(state => state.font)
-  const preset = useStore(state => state.preset)
-  const prompt = useStore(state => state.prompt)
+  const font = useStore(s => s.font)
+  const preset = useStore(s => s.preset)
+  const prompt = useStore(s => s.prompt)
 
-  const nbPages = useStore(state => state.nbPages)
-  const nbTotalPanels = useStore(state => state.nbTotalPanels)
+  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 setPanels = useStore(state => state.setPanels)
-  const setCaptions = useStore(state => state.setCaptions)
+  const setPanels = useStore(s => s.setPanels)
+  const setCaptions = useStore(s => s.setCaptions)
 
-  const zoomLevel = useStore(state => state.zoomLevel)
+  const zoomLevel = useStore(s => s.zoomLevel)
 
   const [waitABitMore, setWaitABitMore] = useState(false)
 
+  useEffect(() => {
+    if (isConfigReady) {
+      setNbPages(config.maxNbPages)
+      setNbPanelsPerPage(config.nbPanelsPerPage)
+    }
+  }, [JSON.stringify(config), isConfigReady])
   // react to prompt changes
   useEffect(() => {
     if (!prompt) { return }
@@ -137,7 +147,7 @@ export default function Main() {
       */
  
     })
-  }, [prompt, preset?.label, nbTotalPanels]) // important: we need to react to preset changes too
+  }, [prompt, preset?.label, nbPages, nbPanelsPerPage, nbTotalPanels]) // important: we need to react to preset changes too
 
   return (
     <div>
@@ -163,7 +173,7 @@ export default function Main() {
             style={{
               width: `${zoomLevel}%`
             }}>
-            {Array(MAX_NB_PAGES).fill(0).map((_, i) => <Page key={i} page={i} />)}
+            {Array(nbPages).fill(0).map((_, i) => <Page key={i} page={i} />)}
           </div>
         </div>
       </div>

src/app/queries/getDynamicConfig.ts

@@ -0,0 +1,25 @@
+"use server"
+
+import { getValidBoolean } from "@/lib/getValidBoolean"
+import { getValidNumber } from "@/lib/getValidNumber"
+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 nbTotalPanelsToGenerate = maxNbPages * nbPanelsPerPage
+
+  const config = {
+    maxNbPages,
+    nbPanelsPerPage,
+    nbTotalPanelsToGenerate,
+    oauthClientId: getValidString(process.env.HUGGING_FACE_OAUTH_CLIENT_ID, ""),
+    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),
+  }
+
+  return config
+}

src/app/store/index.ts

@@ -7,12 +7,12 @@ import { FontName } from "@/lib/fonts"
 import { Preset, PresetName, defaultPreset, getPreset, getRandomPreset } from "@/app/engine/presets"
 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
+  nbPanelsPerPage: number
   nbPages: number
   nbTotalPanels: number
   panels: string[]
@@ -28,6 +28,9 @@ export const useStore = create<{
   panelGenerationStatus: Record<number, boolean>
   isGeneratingText: boolean
   atLeastOnePanelIsBusy: boolean
+  setNbPanelsPerPage: (nbPanelsPerPage: number) => void
+  setNbPages: (nbPages: number) => void
+  setTotalPanels: (nbTotalPanels: number) => void
   setRendered: (panelId: string, renderedScene: RenderedScene) => void
   addToUpscaleQueue: (panelId: string, renderedScene: RenderedScene) => void
   removeFromUpscaleQueue: (panelId: string) => void
@@ -53,11 +56,9 @@ export const useStore = create<{
   prompt: "",
   font: "actionman",
   preset: getPreset(defaultPreset),
-  nbPages: MAX_NB_PAGES,
-
-  // TODO: make this dynamic!
-  nbTotalPanels: NB_PANELS_PER_PAGE * MAX_NB_PAGES,
-
+  nbPanelsPerPage: 4,
+  nbPages: 1,
+  nbTotalPanels: 4,
   panels: [],
   captions: [],
   upscaleQueue: {} as Record<string, RenderedScene>,
@@ -71,6 +72,25 @@ export const useStore = create<{
   panelGenerationStatus: {},
   isGeneratingText: false,
   atLeastOnePanelIsBusy: false,
+  setNbPanelsPerPage: (nbPanelsPerPage: number) => {
+    const { nbPages } = get()
+    set({
+      nbPanelsPerPage,
+      nbTotalPanels: nbPanelsPerPage * nbPages,
+    })
+  },
+  setNbPages: (nbPages: number) => {
+    const { nbPanelsPerPage } = get()
+    set({
+      nbPages,
+      nbTotalPanels: nbPanelsPerPage * nbPages,
+    })
+  },
+  setTotalPanels: (nbTotalPanels: number) => {
+    set({
+      nbTotalPanels,
+    })
+  },
   setRendered: (panelId: string, renderedScene: RenderedScene) => {
     const { renderedScenes } = get()
     set({

src/components/ui/dialog.tsx

@@ -47,10 +47,11 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-stone-100 data-[state=open]:text-stone-500 dark:ring-offset-stone-950 dark:focus:ring-stone-800 dark:data-[state=open]:bg-stone-800 dark:data-[state=open]:text-stone-400">
+      {/*<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-stone-100 data-[state=open]:text-stone-500 dark:ring-offset-stone-950 dark:focus:ring-stone-800 dark:data-[state=open]:bg-stone-800 dark:data-[state=open]:text-stone-400">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
+      */}
     </DialogPrimitive.Content>
   </DialogPortal>
 ))

src/config.ts

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

src/lib/getDefaultDynamicConfig.ts

@@ -0,0 +1,12 @@
+import { DynamicConfig } from "@/types"
+
+export const getDefaultDynamicConfig = (): DynamicConfig => ({
+  maxNbPages: 1,
+  nbPanelsPerPage: 4,
+  nbTotalPanelsToGenerate: 4,
+  oauthClientId: "",
+  oauthRedirectUrl: "http://localhost:3000",
+  oauthScopes: "openid profile inference-api",
+  enableHuggingFaceOAuth: false,
+  enableHuggingFaceOAuthWall: false,
+})

src/lib/getValidString.ts

@@ -1,8 +1,8 @@
 export function getValidString(something: any, defaultValue: string) {
   const strValue = `${something || defaultValue}`
   try {
-   return JSON.parse(strValue) || defaultValue
+   return JSON.parse(strValue)
   } catch (err) {
-    return defaultValue
+    return strValue
   }
 }

src/lib/useDynamicConfig.ts

@@ -0,0 +1,31 @@
+"use client"
+
+import { useEffect, useState, useTransition } from "react"
+
+import { getDynamicConfig } from "@/app/queries/getDynamicConfig"
+import { DynamicConfig } from "@/types"
+
+import { getDefaultDynamicConfig } from "./getDefaultDynamicConfig"
+
+export function useDynamicConfig(): {
+  config: DynamicConfig;
+  isConfigReady: boolean;
+} {
+  const [_isPending, startTransition] = useTransition()
+  const [config, setConfig] = useState<DynamicConfig>(getDefaultDynamicConfig())
+  const [isConfigReady, setConfigReady] = useState(false)
+
+  useEffect(() => {
+    startTransition(async () => {
+      if (isConfigReady) { return }
+      const newConfig = await getDynamicConfig()
+      setConfig(newConfig)
+      setConfigReady(true)
+    })
+  }, [isConfigReady])
+
+  return {
+    config,
+    isConfigReady
+  }
+}

src/lib/useOAuth.ts

@@ -1,13 +1,12 @@
 "use client"
 
-import { OAuthResult, oauthHandleRedirectIfPresent, oauthLoginUrl } from "@huggingface/hub"
+import { useEffect } from "react"
 import { useSearchParams } from "next/navigation"
-import { useEffect, useState } from "react"
-import { useOAuthClientId } from "./useOAuthClientId"
-import { useOAuthEnabled } from "./useOAuthEnabled"
-import { useBetaEnabled } from "./useBetaEnabled"
+import { OAuthResult, oauthHandleRedirectIfPresent, oauthLoginUrl } from "@huggingface/hub"
+
 import { usePersistedOAuth } from "./usePersistedOAuth"
 import { getValidOAuth } from "./getValidOAuth"
+import { useDynamicConfig } from "./useDynamicConfig"
 
 export function useOAuth({
   debug = false
@@ -22,23 +21,27 @@ export function useOAuth({
   canLogin: boolean
   login: () => Promise<void>
   isLoggedIn: boolean
+  enableOAuth: boolean
+  enableOAuthWall: boolean
   oauthResult?: OAuthResult
  } {
-  const [oauthResult, setOAuthResult] = usePersistedOAuth()
+  const { config, isConfigReady } = useDynamicConfig()
 
-  const clientId = useOAuthClientId()
-  const redirectUrl = "https://huggingface.co/spaces/jbilcke-hf/ai-comic-factory"
-  const scopes = "openid profile inference-api"
+  const [oauthResult, setOAuthResult] = usePersistedOAuth()
 
-  const isOAuthEnabled = useOAuthEnabled()
+  const clientId = config.oauthClientId
+  const redirectUrl = config.oauthRedirectUrl
+  const scopes = config.oauthScopes
+  const enableOAuth = config.enableHuggingFaceOAuth
+  const enableOAuthWall = config.enableHuggingFaceOAuthWall
 
   const searchParams = useSearchParams()
-  const code = searchParams.get("code")
-  const state = searchParams.get("state")
+  const code = searchParams?.get("code") || ""
+  const state = searchParams?.get("state") || ""
 
   const hasReceivedFreshOAuth = Boolean(code && state)
 
-  const canLogin: boolean = Boolean(clientId && isOAuthEnabled)
+  const canLogin: boolean = Boolean(isConfigReady && clientId && enableOAuth)
   const isLoggedIn = Boolean(oauthResult)
 
   if (debug) {
@@ -47,7 +50,8 @@ export function useOAuth({
       clientId,
       redirectUrl,
       scopes,
-      isOAuthEnabled,
+      enableOAuth,
+      enableOAuthWall,
       code,
       state,
       hasReceivedFreshOAuth,
@@ -128,6 +132,8 @@ export function useOAuth({
     canLogin,
     login,
     isLoggedIn,
+    enableOAuth,
+    enableOAuthWall,
     oauthResult
   }
 }

src/lib/useOAuthClientId.ts

@@ -1,6 +0,0 @@
-"use client"
-
-export function useOAuthClientId(): string {
-  const oauthClientId = `${process.env.NEXT_PUBLIC_HUGGING_FACE_OAUTH_CLIENT_ID || ""}`
-  return oauthClientId
-}

src/lib/useOAuthEnabled.ts

@@ -1,6 +0,0 @@
-"use client"
-
-export function useOAuthEnabled(): boolean {
-  const isOAuthEnabled = `${process.env.NEXT_PUBLIC_ENABLE_HUGGING_FACE_OAUTH || "false"}` === "true"
-  return isOAuthEnabled
-}

src/types.ts

@@ -174,4 +174,15 @@ export type Settings = {
   groqApiKey: string
   groqApiLanguageModel: string
   hasGeneratedAtLeastOnce: boolean
-}
+}
+
+export type DynamicConfig = {
+  maxNbPages: number
+  nbPanelsPerPage: number
+  nbTotalPanelsToGenerate: number
+  oauthClientId: string
+  oauthRedirectUrl: string
+  oauthScopes: string
+  enableHuggingFaceOAuth: boolean
+  enableHuggingFaceOAuthWall: boolean
+}