add a login wall

.env

@@ -14,7 +14,7 @@ RENDERING_ENGINE="INFERENCE_API"
 LLM_ENGINE="INFERENCE_API"
 
 # set this to control the number of pages
-NEXT_PUBLIC_MAX_NB_PAGES="2"
+NEXT_PUBLIC_MAX_NB_PAGES=
 
 # Not implemented for the Inference API yet - you can submit a PR if you have some ideas
 NEXT_PUBLIC_CAN_UPSCALE="false"
@@ -26,7 +26,8 @@ NEXT_PUBLIC_CAN_REDRAW="false"
 NEXT_PUBLIC_ENABLE_RATE_LIMITER="false"
 
 # ------------- HUGGING FACE OAUTH -------------
-NEXT_PUBLIC_ENABLE_HUGGING_FACE_OAUTH="false"
+NEXT_PUBLIC_ENABLE_HUGGING_FACE_OAUTH=
+NEXT_PUBLIC_ENABLE_HUGGING_FACE_OAUTH_WALL=
 NEXT_PUBLIC_HUGGING_FACE_OAUTH_CLIENT_ID=""
 HUGGING_FACE_OAUTH_SECRET=""
 
@@ -45,7 +46,6 @@ AUTH_OPENAI_API_KEY=
 # An experimental RENDERING engine (sorry it is not very documented yet, so you can use one of the other engines)
 AUTH_VIDEOCHAIN_API_TOKEN=
 
-
 # Groq.com key: available for the LLM engine
 AUTH_GROQ_API_KEY=
 

src/app/engine/presets.ts

@@ -667,7 +667,7 @@ export const presets: Record<string, Preset> = {
 
 export type PresetName = keyof typeof presets
 
-export const defaultPreset: PresetName = "american_comic_90"
+export const defaultPreset: PresetName = "american_comic_50"
 
 export const nonRandomPresets = Object.keys(presets).filter(p => p !== "random")
 

src/app/interface/about/index.tsx

@@ -1,6 +1,7 @@
 import { Button } from "@/components/ui/button"
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
 import { useState } from "react"
+import { Login } from "../login"
 
 export function About() {
   const [isOpen, setOpen] = useState(false)
@@ -13,19 +14,22 @@ export function About() {
           <span className="inline md:hidden">About</span>
         </Button>
       </DialogTrigger>
-      <DialogContent className="sm:max-w-[425px]">
+      <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?
           </DialogDescription>
         </DialogHeader>
-        <div className="grid gap-4 py-4 text-stone-800">
+        <div className="grid gap-4 py-4 text-stone-800 text-sm">
         <p className="">
-           The AI Comic Factory is a free and open-source application made to demonstrate the capabilities of AI models.
+           The AI Comic Factory is an app to generate stories using AI in a few clicks.
+        </p>
+          <p>
+            It is free for all Hugging Face users: <Login />
          </p>
          <p>
-           And yes, 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>
+           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>
          <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>.

src/app/interface/auth-wall/index.tsx

@@ -0,0 +1,24 @@
+
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
+
+import { Login } from "../login"
+
+export function AuthWall({ show }: { show: boolean }) {
+  return (
+    <Dialog open={show}>
+      <DialogContent className="sm:max-w-[425px]">
+        <div className="grid gap-4 py-4 text-stone-800">
+        <p className="">
+          The AI Comic Factory is a free app available to all Hugging Face users!
+        </p>
+        <p>
+          Please sign-in to continue:
+         </p>
+         <p>
+          <Login />
+         </p>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,162 @@
+import { startTransition, useEffect, useState } from "react"
+
+import { useStore } from "@/app/store"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+import { upscaleImage } from "@/app/engine/render"
+import { sleep } from "@/lib/sleep"
+
+import { Share } from "../share"
+import { About } from "../about"
+import { SettingsDialog } from "../settings-dialog"
+import { useLocalStorage } from "usehooks-ts"
+import { localStorageKeys } from "../settings-dialog/localStorageKeys"
+import { defaultSettings } from "../settings-dialog/defaultSettings"
+
+function BottomBar() {
+  const download = useStore(state => state.download)
+  const isGeneratingStory = useStore(state => state.isGeneratingStory)
+  const prompt = useStore(state => state.prompt)
+  const panelGenerationStatus = useStore(state => state.panelGenerationStatus)
+  const page = useStore(state => state.page)
+  const preset = useStore(state => state.preset)
+  const pageToImage = useStore(state => state.pageToImage)
+
+  const allStatus = Object.values(panelGenerationStatus)
+  const remainingImages = allStatus.reduce((acc, s) => (acc + (s ? 1 : 0)), 0)
+
+  const upscaleQueue = useStore(state => state.upscaleQueue)
+  const renderedScenes = useStore(state => state.renderedScenes)
+  const removeFromUpscaleQueue = useStore(state => state.removeFromUpscaleQueue)
+  const setRendered = useStore(state => state.setRendered)
+  const [isUpscaling, setUpscaling] = useState(false)
+
+  const [hasGeneratedAtLeastOnce, setHasGeneratedAtLeastOnce] = useLocalStorage<boolean>(
+    localStorageKeys.hasGeneratedAtLeastOnce,
+    defaultSettings.hasGeneratedAtLeastOnce
+  )
+
+  const handleUpscale = () => {
+    setUpscaling(true)
+    startTransition(() => {
+      const fn = async () => {
+        for (let [panelId, renderedScene] of Object.entries(upscaleQueue)) {
+          try {
+            console.log(`upscaling panel ${panelId} (${renderedScene.renderId})`)
+            const result = await upscaleImage(renderedScene.assetUrl)
+            await sleep(1000)
+            if (result.assetUrl) {
+              console.log(`upscale successful, removing ${panelId} (${renderedScene.renderId}) from upscale queue`)
+              setRendered(panelId, {
+                ...renderedScene,
+                assetUrl: result.assetUrl
+              })
+              removeFromUpscaleQueue(panelId)
+            }
+
+          } catch (err) {
+            console.error(`failed to upscale: ${err}`)
+          }
+        }
+        
+        setUpscaling(false)
+      }
+
+      fn()
+    })
+  }
+
+  const handlePrint = () => {
+    window.print()
+  }
+  const hasFinishedGeneratingImages = allStatus.length > 0 && (allStatus.length - remainingImages) === allStatus.length
+
+  // keep track of the first generation, independently of the login status
+  useEffect(() => {
+    if (hasFinishedGeneratingImages && !hasGeneratedAtLeastOnce) {
+      setHasGeneratedAtLeastOnce(true)
+    }
+  }, [hasFinishedGeneratingImages, hasGeneratedAtLeastOnce])
+
+  return (
+    <div className={cn(
+      `print:hidden`,
+      `fixed bottom-2 md:bottom-4 left-2 right-0 md:left-3 md:right-1`,
+      `flex flex-row`,
+      `justify-between`,
+      `pointer-events-none`
+    )}>
+      <div className={cn(
+        `flex flex-row`,
+        `items-end`,
+        `pointer-events-auto`,
+        `animation-all duration-300 ease-in-out`,
+        isGeneratingStory ? `scale-0 opacity-0` : ``,
+        `space-x-3`,
+        `scale-[0.9]`
+      )}>
+        <About />
+       {/* 
+       Thank you clip factory for your service 🫡
+       <AIClipFactory />
+       */}
+      </div>
+      <div className={cn(
+      `flex flex-row`,
+      `pointer-events-auto`,
+      `animation-all duration-300 ease-in-out`,
+      isGeneratingStory ? `scale-0 opacity-0` : ``,
+      `space-x-3`,
+      `scale-[0.9]`
+    )}>
+      <SettingsDialog />
+      {/*<Button
+        onClick={handleUpscale}
+        disabled={!prompt?.length || remainingImages > 0 || isUpscaling || !Object.values(upscaleQueue).length}
+      >
+        {isUpscaling
+            ? `${allStatus.length - Object.values(upscaleQueue).length}/${allStatus.length} ⌛`
+            : "Upscale"}
+        </Button>*/}
+
+        {/*
+        <div>
+          <Button
+            onClick={handlePrint}
+            disabled={!prompt?.length}
+          >
+            Print
+          </Button>
+        </div>
+        <div>
+          <Button
+            onClick={download}
+            disabled={!prompt?.length}
+          >
+            <span className="hidden md:inline">{
+            remainingImages ? `${allStatus.length - remainingImages}/${allStatus.length} panels ⌛` : `Save`
+            }</span>
+            <span className="inline md:hidden">{
+              remainingImages ? `${allStatus.length - remainingImages}/${allStatus.length} ⌛` : `Save`
+            }</span>
+           </Button>
+        </div>
+          */}
+          <Button
+            onClick={handlePrint}
+            disabled={!prompt?.length}
+          >
+            <span className="hidden md:inline">{
+            remainingImages ? `${allStatus.length - remainingImages}/${allStatus.length} panels ⌛` : `Save PDF`
+            }</span>
+            <span className="inline md:hidden">{
+              remainingImages ? `${allStatus.length - remainingImages}/${allStatus.length} ⌛` : `Save`
+            }</span>
+        </Button>
+        <Share />
+      </div>
+    </div>
+  )
+}
+
+export default BottomBar

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

@@ -1,145 +1,8 @@
-import { useStore } from "@/app/store"
-import { Button } from "@/components/ui/button"
-import { cn } from "@/lib/utils"
-import { About } from "../about"
-import { startTransition, useState } from "react"
-import { upscaleImage } from "@/app/engine/render"
-import { sleep } from "@/lib/sleep"
-import { AIClipFactory } from "../ai-clip-factory"
-import { Share } from "../share"
-import { SettingsDialog } from "../settings-dialog"
-import { Login } from "../login"
+"use client"
 
-export function BottomBar() {
-  const download = useStore(state => state.download)
-  const isGeneratingStory = useStore(state => state.isGeneratingStory)
-  const prompt = useStore(state => state.prompt)
-  const panelGenerationStatus = useStore(state => state.panelGenerationStatus)
-  const page = useStore(state => state.page)
-  const preset = useStore(state => state.preset)
-  const pageToImage = useStore(state => state.pageToImage)
+import dynamic from "next/dynamic";
 
-  const allStatus = Object.values(panelGenerationStatus)
-  const remainingImages = allStatus.reduce((acc, s) => (acc + (s ? 1 : 0)), 0)
-
-  const upscaleQueue = useStore(state => state.upscaleQueue)
-  const renderedScenes = useStore(state => state.renderedScenes)
-  const removeFromUpscaleQueue = useStore(state => state.removeFromUpscaleQueue)
-  const setRendered = useStore(state => state.setRendered)
-  const [isUpscaling, setUpscaling] = useState(false)
-
-  const handleUpscale = () => {
-    setUpscaling(true)
-    startTransition(() => {
-      const fn = async () => {
-        for (let [panelId, renderedScene] of Object.entries(upscaleQueue)) {
-          try {
-            console.log(`upscaling panel ${panelId} (${renderedScene.renderId})`)
-            const result = await upscaleImage(renderedScene.assetUrl)
-            await sleep(1000)
-            if (result.assetUrl) {
-              console.log(`upscale successful, removing ${panelId} (${renderedScene.renderId}) from upscale queue`)
-              setRendered(panelId, {
-                ...renderedScene,
-                assetUrl: result.assetUrl
-              })
-              removeFromUpscaleQueue(panelId)
-            }
-
-          } catch (err) {
-            console.error(`failed to upscale: ${err}`)
-          }
-        }
-        
-        setUpscaling(false)
-      }
-
-      fn()
-    })
-  }
-
-  const handlePrint = () => {
-    window.print()
-  }
-  
-  return (
-    <div className={cn(
-      `print:hidden`,
-      `fixed bottom-2 md:bottom-4 left-2 right-0 md:left-3 md:right-1`,
-      `flex flex-row`,
-      `justify-between`,
-      `pointer-events-none`
-    )}>
-      <div className={cn(
-        `flex flex-row`,
-        `items-end`,
-        `pointer-events-auto`,
-        `animation-all duration-300 ease-in-out`,
-        isGeneratingStory ? `scale-0 opacity-0` : ``,
-        `space-x-3`,
-        `scale-[0.9]`
-      )}>
-        <About />
-        <Login />
-       {/* 
-       Thank you clip factory for your service 🫡
-       <AIClipFactory />
-       */}
-      </div>
-      <div className={cn(
-      `flex flex-row`,
-      `pointer-events-auto`,
-      `animation-all duration-300 ease-in-out`,
-      isGeneratingStory ? `scale-0 opacity-0` : ``,
-      `space-x-3`,
-      `scale-[0.9]`
-    )}>
-      <SettingsDialog />
-      {/*<Button
-        onClick={handleUpscale}
-        disabled={!prompt?.length || remainingImages > 0 || isUpscaling || !Object.values(upscaleQueue).length}
-      >
-        {isUpscaling
-            ? `${allStatus.length - Object.values(upscaleQueue).length}/${allStatus.length} ⌛`
-            : "Upscale"}
-        </Button>*/}
-
-        {/*
-        <div>
-          <Button
-            onClick={handlePrint}
-            disabled={!prompt?.length}
-          >
-            Print
-          </Button>
-        </div>
-        <div>
-          <Button
-            onClick={download}
-            disabled={!prompt?.length}
-          >
-            <span className="hidden md:inline">{
-            remainingImages ? `${allStatus.length - remainingImages}/${allStatus.length} panels ⌛` : `Save`
-            }</span>
-            <span className="inline md:hidden">{
-              remainingImages ? `${allStatus.length - remainingImages}/${allStatus.length} ⌛` : `Save`
-            }</span>
-           </Button>
-        </div>
-          */}
-          <Button
-            onClick={handlePrint}
-            disabled={!prompt?.length}
-          >
-            <span className="hidden md:inline">{
-            remainingImages ? `${allStatus.length - remainingImages}/${allStatus.length} panels ⌛` : `Save PDF`
-            }</span>
-            <span className="inline md:hidden">{
-              remainingImages ? `${allStatus.length - remainingImages}/${allStatus.length} ⌛` : `Save`
-            }</span>
-        </Button>
-        <Share />
-      </div>
-    </div>
-  )
-}
+export const BottomBar = dynamic(() => import("./bottom-bar"), {
+  // Make sure we turn SSR off
+  ssr: false,
+});

src/app/interface/edit-modal/index.tsx

@@ -1,12 +1,9 @@
 import { ReactNode, useState } from "react"
-import { RxReload, RxPencil2 } from "react-icons/rx"
 
 import { Button } from "@/components/ui/button"
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
-import { cn } from "@/lib/utils"
-import { Textarea } from "@/components/ui/textarea"
 
+import { Textarea } from "@/components/ui/textarea"
 
 export function EditModal({
     existingPrompt,

src/app/interface/login/index.tsx

@@ -1,30 +1,8 @@
 "use client"
 
-import { useEffect } from "react"
+import dynamic from "next/dynamic";
 
-import { Button } from "@/components/ui/button"
-import { useOAuth } from "@/lib/useOAuth"
-
-export function Login() {
-  const { canLogin, login, isLoggedIn, oauthResult } = useOAuth({ debug: false })
-  
-  useEffect(() => {
-    if (!oauthResult) {
-      return
-    }
-
-    const { userInfo } = oauthResult
-
-    // TODO use the Inference API
-
-    if (userInfo.isPro) {
-      // TODO we could do something with the fact the user is PRO versus other types of users
-    }
-  }, [canLogin, isLoggedIn, oauthResult])
-
-  if (isLoggedIn || canLogin) {
-   return <Button onClick={login}>Sign-in with Hugging Face</Button>
-  } else {
-    return null
-  }
-}
+export const Login = dynamic(() => import("./login"), {
+  // Make sure we turn SSR off
+  ssr: false,
+});

src/app/interface/login/login.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import { useEffect } from "react"
+
+import { Button } from "@/components/ui/button"
+import { useOAuth } from "@/lib/useOAuth"
+
+function Login() {
+  const { canLogin, login, isLoggedIn, oauthResult } = useOAuth({ debug: false })
+  
+  useEffect(() => {
+    if (!oauthResult) {
+      return
+    }
+
+    const { userInfo } = oauthResult
+
+    // TODO use the Inference API
+
+    if (userInfo.isPro) {
+      // TODO we could do something with the fact the user is PRO versus other types of users
+    }
+  }, [canLogin, isLoggedIn, oauthResult])
+
+  if (isLoggedIn || canLogin) {
+   return <Button onClick={login}>Sign-in with Hugging Face</Button>
+  } else {
+    return null
+  }
+}
+
+export default Login

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

@@ -17,4 +17,5 @@ export const defaultSettings: Settings = {
   openaiApiLanguageModel: "gpt-4",
   groqApiKey: "",
   groqApiLanguageModel: "mixtral-8x7b-32768",
+  hasGeneratedAtLeastOnce: false,
 }

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

@@ -24,6 +24,7 @@ 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), 
     }
   } catch (err) {
     return {

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

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

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

@@ -26,6 +26,11 @@ 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"
 
 const layoutIcons: Partial<Record<LayoutName, StaticImageData>> = {
   Layout0: layoutPreview0,
@@ -65,9 +70,25 @@ export function TopMenu() {
 
   const [draftPreset, setDraftPreset] = useState<PresetName>(requestedPreset)
   const [draftLayout, setDraftLayout] = useState<LayoutName>(requestedLayout)
+  
+
+  const { canLogin, login, isLoggedIn, oauthResult } = useOAuth({ debug: false })
+  
+  const [hasGeneratedAtLeastOnce, setHasGeneratedAtLeastOnce] = useLocalStorage<boolean>(
+    localStorageKeys.hasGeneratedAtLeastOnce,
+    defaultSettings.hasGeneratedAtLeastOnce
+  )
+
+  const [showAuthWall, setShowAuthWall] = useState(false)
 
   const handleSubmit = () => {
+    const enableAuthWall = `${process.env.NEXT_PUBLIC_ENABLE_HUGGING_FACE_OAUTH_WALL || "false"}` === "true"
 
+    if (enableAuthWall && hasGeneratedAtLeastOnce && !isLoggedIn) {
+      setShowAuthWall(true)
+      return
+    }
+    
     const promptChanged = draftPrompt.trim() !== prompt.trim()
     const presetChanged = draftPreset !== preset.id
     const layoutChanged = draftLayout !== layout
@@ -202,7 +223,7 @@ export function TopMenu() {
         <div className="flex flex-row flex-grow w-full">
           <div className="flex flex-row flex-grow w-full">
             <Input
-              placeholder="1. Story prompt"
+              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"
               // disabled={atLeastOnePanelIsBusy}
               onChange={(e) => {
@@ -216,7 +237,7 @@ export function TopMenu() {
               value={draftPromptB}
             />
             <Input
-              placeholder="2. Style/character prompt"
+              placeholder="2. Style (eg 'rain, shiba inu')"
               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"
               // disabled={atLeastOnePanelIsBusy}
               onChange={(e) => {
@@ -230,19 +251,21 @@ export function TopMenu() {
               value={draftPromptA}
             />
           </div>
-          <Button
-          className={cn(
-            `rounded-l-none cursor-pointer`,
-            `transition-all duration-200 ease-in-out`,
-            `bg-[rgb(59,134,247)] hover:bg-[rgb(69,144,255)] disabled:bg-[rgb(59,134,247)]`
-            )}
-          onClick={() => {
-            handleSubmit()
-          }}
-          disabled={!draftPrompt?.trim().length || isBusy}
-        >
-          Go
-        </Button>
+            <Button
+            className={cn(
+              `rounded-l-none cursor-pointer`,
+              `transition-all duration-200 ease-in-out`,
+              `bg-[rgb(59,134,247)] hover:bg-[rgb(69,144,255)] disabled:bg-[rgb(59,134,247)]`
+              )}
+            onClick={() => {
+              handleSubmit()
+            }}
+            disabled={!draftPrompt?.trim().length || isBusy}
+          >
+            Go
+          </Button>
+
+          <AuthWall show={showAuthWall} />
         </div>
       </div>
       {/*

src/app/main.tsx

@@ -3,16 +3,17 @@
 import { useEffect, useState, useTransition } from "react"
 
 import { cn } from "@/lib/utils"
-import { TopMenu } from "./interface/top-menu"
 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"
 import { Zoom } from "./interface/zoom"
 import { BottomBar } from "./interface/bottom-bar"
 import { Page } from "./interface/page"
-import { GeneratedPanel } from "@/types"
-import { joinWords } from "@/lib/joinWords"
 import { getStoryContinuation } from "./queries/getStoryContinuation"
-import { MAX_NB_PAGES, NB_TOTAL_PANELS_TO_GENERATE } from "@/config"
 
 export default function Main() {
   const [_isPending, startTransition] = useTransition()

src/app/queries/getStory.ts

@@ -1,90 +0,0 @@
-
-import { predict } from "./predict"
-import { Preset } from "../engine/presets"
-import { GeneratedPanels } from "@/types"
-import { cleanJson } from "@/lib/cleanJson"
-import { createZephyrPrompt } from "@/lib/createZephyrPrompt"
-
-import { dirtyGeneratedPanelCleaner } from "@/lib/dirtyGeneratedPanelCleaner"
-import { dirtyGeneratedPanelsParser } from "@/lib/dirtyGeneratedPanelsParser"
-
-export const getStory = async ({
-  preset,
-  prompt = "",
-  nbTotalPanels = 4,
-}: {
-  preset: Preset;
-  prompt: string;
-  nbTotalPanels: number;
-}): Promise<GeneratedPanels> => {
-  throw new Error("legacy, deprecated")
-  
-  // In case you need to quickly debug the RENDERING engine you can uncomment this:
-  // return mockGeneratedPanels
-
-  const query = createZephyrPrompt([
-    {
-      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 ${nbTotalPanels} panels of a new story. Please make sure each of the ${nbTotalPanels} panels include info about character gender, age, origin, clothes, colors, location, lights, etc.`,
-        `Give your response as a VALID JSON array like this: \`Array<{ panel: number; instructions: string; caption: string; }>\`.`,
-        // `Give your response as Markdown bullet points.`,
-        `Be brief in your ${nbTotalPanels} instructions and narrative captions, don't add your own comments. The whole story must be captivating, smart, entertaining. Be straight to the point, and never reply things like "Sure, I can.." etc. Reply using valid JSON.`
-      ].filter(item => item).join("\n")
-    },
-    {
-      role: "user",
-      content: `The story is: ${prompt}`,
-    }
-  ]) + "\n```[{"
-
-
-  let result = ""
-
-  try {
-    // console.log(`calling predict(${query}, ${nbTotalPanels})`)
-    result = `${await predict(query, nbTotalPanels) || ""}`.trim()
-    if (!result.length) {
-      throw new Error("empty result!")
-    }
-  } catch (err) {
-    // console.log(`prediction of the story failed, trying again..`)
-    try {
-      result = `${await predict(query+".", nbTotalPanels) || ""}`.trim()
-      if (!result.length) {
-        throw new Error("empty result!")
-      }
-    } catch (err) {
-      console.error(`prediction of the story failed again 💩`)
-      throw new Error(`failed to generate the story ${err}`)
-    }
-  }
-
-  // console.log("Raw response from LLM:", result)
-  const tmp = cleanJson(result)
-  
-  let GeneratedPanels: GeneratedPanels = []
-
-  try {
-    GeneratedPanels = dirtyGeneratedPanelsParser(tmp)
-  } catch (err) {
-    // console.log(`failed to read LLM response: ${err}`)
-    // console.log(`original response was:`, result)
-
-      // in case of failure here, it might be because the LLM hallucinated a completely different response,
-      // such as markdown. There is no real solution.. but we can try a fallback:
-
-    GeneratedPanels = (
-      tmp.split("*")
-      .map(item => item.trim())
-      .map((cap, i) => ({
-        panel: i,
-        caption: cap,
-        instructions: cap,
-      }))
-    )
-  }
-
-  return GeneratedPanels.map(res => dirtyGeneratedPanelCleaner(res))
-}

src/app/queries/getStoryContinuation.ts

@@ -7,7 +7,7 @@ export const getStoryContinuation = async ({
   preset,
   stylePrompt = "",
   userStoryPrompt = "",
-  nbPanelsToGenerate = 1,
+  nbPanelsToGenerate = 2,
   nbTotalPanels = 4,
   existingPanels = [],
 }: {

src/app/queries/predictNextPanels.ts

@@ -11,7 +11,7 @@ import { sleep } from "@/lib/sleep"
 export const predictNextPanels = async ({
   preset,
   prompt = "",
-  nbPanelsToGenerate = 1,
+  nbPanelsToGenerate = 2,
   nbTotalPanels = 4,
   existingPanels = [],
 }: {

src/config.ts

@@ -1,6 +1,6 @@
 import { getValidNumber } from "./lib/getValidNumber"
 
-export const MAX_NB_PAGES = getValidNumber(process.env.NEXT_PUBLIC_MAX_NB_PAGES, 1, 2, 1)
+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

src/lib/useOAuth.ts

@@ -31,7 +31,6 @@ export function useOAuth({
   const scopes = "openid profile inference-api"
 
   const isOAuthEnabled = useOAuthEnabled()
-  const isBetaEnabled = useBetaEnabled()
 
   const searchParams = useSearchParams()
   const code = searchParams.get("code")
@@ -39,7 +38,7 @@ export function useOAuth({
 
   const hasReceivedFreshOAuth = Boolean(code && state)
 
-  const canLogin: boolean = Boolean(clientId && isOAuthEnabled && isBetaEnabled)
+  const canLogin: boolean = Boolean(clientId && isOAuthEnabled)
   const isLoggedIn = Boolean(oauthResult)
 
   if (debug) {
@@ -49,7 +48,6 @@ export function useOAuth({
       redirectUrl,
       scopes,
       isOAuthEnabled,
-      isBetaEnabled,
       code,
       state,
       hasReceivedFreshOAuth,
@@ -64,7 +62,6 @@ export function useOAuth({
       redirectUrl: 'http://localhost:3000',
       scopes: 'openid profile inference-api',
       isOAuthEnabled: true,
-      isBetaEnabled: false,
       code: '...........',
       state: '{"nonce":".........","redirectUri":"http://localhost:3000"}',
       hasReceivedFreshOAuth: true,
@@ -77,6 +74,7 @@ export function useOAuth({
   useEffect(() => {
     // no need to perfor the rest if the operation is there is nothing in the url
     if (hasReceivedFreshOAuth) {
+
       (async () => {
         const maybeValidOAuth = await oauthHandleRedirectIfPresent()
 
@@ -91,6 +89,9 @@ export function useOAuth({
             console.log("useOAuth::useEffect 1: correctly received the new oauth result, saving it to local storage:", newOAuth)
           }
           setOAuthResult(newOAuth)
+
+          // once set we can (brutally) reload the page
+          window.location.href = `//${window.location.host}${window.location.pathname}`
         }
       })()
     }

src/types.ts

@@ -173,4 +173,5 @@ export type Settings = {
   openaiApiLanguageModel: string
   groqApiKey: string
   groqApiLanguageModel: string
+  hasGeneratedAtLeastOnce: boolean
 }