release 1.3

README.md

@@ -123,7 +123,7 @@ LLM_ENGINE="OPENAI"
 # default openai api base url is: https://api.openai.com/v1
 LLM_OPENAI_API_BASE_URL="A custom OpenAI API Base URL if you have some special privileges"
 
-LLM_OPENAI_API_MODEL="gpt-3.5-turbo"
+LLM_OPENAI_API_MODEL="gpt-4-turbo-preview"
 
 AUTH_OPENAI_API_KEY="Yourown OpenAI API Key"
 ```

package-lock.json

@@ -49,6 +49,7 @@
         "openai": "^4.29.2",
         "pick": "^0.0.1",
         "postcss": "8.4.37",
+        "query-string": "^9.0.0",
         "react": "18.2.0",
         "react-circular-progressbar": "^2.1.0",
         "react-contenteditable": "^3.3.7",
@@ -3391,6 +3392,14 @@
         }
       }
     },
+    "node_modules/decode-uri-component": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.4.1.tgz",
+      "integrity": "sha512-+8VxcR21HhTy8nOt6jf20w0c9CADrw1O8d+VZ/YzzCt4bJ3uBjw+D1q2osAB8RnpwwaeYBxy0HyKQxD5JBMuuQ==",
+      "engines": {
+        "node": ">=14.16"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -4228,6 +4237,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/filter-obj": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-5.1.0.tgz",
+      "integrity": "sha512-qWeTREPoT7I0bifpPUXtxkZJ1XJzxWtfoWWkdVGqa+eCr3SHW/Ocp89o8vLvbUuQnadybJpjOKu4V+RwO6sGng==",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -6072,6 +6092,22 @@
         "node": ">=6"
       }
     },
+    "node_modules/query-string": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-9.0.0.tgz",
+      "integrity": "sha512-4EWwcRGsO2H+yzq6ddHcVqkCQ2EFUSfDMEjF8ryp8ReymyZhIuaFRGLomeOQLkrzacMHoyky2HW0Qe30UbzkKw==",
+      "dependencies": {
+        "decode-uri-component": "^0.4.1",
+        "filter-obj": "^5.1.0",
+        "split-on-first": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -6697,6 +6733,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/split-on-first": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-3.0.0.tgz",
+      "integrity": "sha512-qxQJTx2ryR0Dw0ITYyekNQWpz6f8dGd7vffGNflQQ3Iqj9NJ6qiZ7ELpZsJ/QBhIVAiDfXdag3+Gp8RvWa62AA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/streamsearch": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",

package.json

@@ -50,6 +50,7 @@
     "openai": "^4.29.2",
     "pick": "^0.0.1",
     "postcss": "8.4.37",
+    "query-string": "^9.0.0",
     "react": "18.2.0",
     "react-circular-progressbar": "^2.1.0",
     "react-contenteditable": "^3.3.7",

src/app/interface/about/index.tsx

@@ -8,8 +8,8 @@ import { Login } from "../login"
 const APP_NAME = `AI Comic Factory`
 const APP_DOMAIN = `aicomicfactory.app`
 const APP_URL = `https://aicomicfactory.app`
-const APP_VERSION = `1.2`
-const APP_RELEASE_DATE = `March 2024`
+const APP_VERSION = `1.3`
+const APP_RELEASE_DATE = `April 2024`
 
 const ExternalLink = ({ url, children }: { url: string; children: ReactNode }) => {
   return (
@@ -33,7 +33,6 @@ export function About() {
       </DialogTrigger>
       <DialogContent className="w-full sm:max-w-[500px] md:max-w-[600px] overflow-y-scroll h-[100vh] sm:h-[550px]">
         <DialogHeader>
-          <DialogTitle><ExternalLink url={APP_URL}>{APP_DOMAIN}</ExternalLink> {APP_VERSION}</DialogTitle>
           <DialogDescription className="w-full text-center text-2xl font-bold text-stone-700">
           <ExternalLink url={APP_URL}>{APP_DOMAIN}</ExternalLink> {APP_VERSION} ({APP_RELEASE_DATE})
           </DialogDescription>

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

@@ -2,22 +2,31 @@
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
 
 import { Login } from "../login"
+import { SettingsDialog } from "../settings-dialog"
 
 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">
+      <DialogContent className="sm:max-w-[800px]">
+        <div className="grid gap-4 py-4 text-stone-800 text-center text-xl">
         <p className="">
-          The AI Comic Factory is a free app available to all Hugging Face users!
+          The AI Comic Factory is a free app compatible with many vendors.
         </p>
         <p>
-          Please sign-in to continue:
+          By default it uses Hugging Face for story and image generation,<br/>
+          our service is free of charge but we would like you to sign-in 👇
          </p>
          <p>
           <Login />
          </p>
-         <p>(temporary issue alert: if this doesn&apos;t work for you, please use the button in the About panel)</p>
+         {/*<p>(if login doesn&apos;t work for you, please use the button in the About panel)</p>*/}
+         <p className="mt-2 text-lg">
+          To hide this message, you can also go in the <SettingsDialog /> to replace<br/>
+           both the image and the story providers to use external vendors.
+      </p>
+         <p className="mt-2 text-base">
+          This pop-up will also disappear if you <a className="text-stone-600 underline" href="https://github.com/jbilcke-hf/ai-comic-factory" target="_blank">download the code</a> to run the app at home.
+         </p>
         </div>
       </DialogContent>
     </Dialog>

src/app/interface/login/login.tsx

@@ -7,7 +7,7 @@ import { useOAuth } from "@/lib/useOAuth"
 
 function Login() {
   const { login } = useOAuth({ debug: false })
-  return <Button onClick={login}>Sign-in with Hugging Face</Button>
+  return <Button onClick={login} className="text-xl">Sign-in with Hugging Face</Button>
 }
 
 export default Login

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

@@ -1,8 +1,9 @@
-import { RenderingModelVendor, Settings } from "@/types"
+import { LLMVendor, RenderingModelVendor, Settings } from "@/types"
 
 export const defaultSettings: Settings = {
   renderingModelVendor: "SERVER" as RenderingModelVendor,
   renderingUseTurbo: false,
+  llmVendor: "SERVER" as LLMVendor,
   huggingFaceOAuth: "",
   huggingfaceApiKey: "",
   huggingfaceInferenceApiModel: "stabilityai/stable-diffusion-xl-base-1.0",
@@ -14,9 +15,11 @@ export const defaultSettings: Settings = {
   replicateApiModelTrigger: "",
   openaiApiKey: "",
   openaiApiModel: "dall-e-3",
-  openaiApiLanguageModel: "gpt-4",
+  openaiApiLanguageModel: "gpt-4-turbo-preview",
   groqApiKey: "",
   groqApiLanguageModel: "mixtral-8x7b-32768",
+  anthropicApiKey: "",
+  anthropicApiLanguageModel: "claude-3-opus-20240229",
   hasGeneratedAtLeastOnce: false,
   userDefinedMaxNumberOfPages: 1,
 }

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

@@ -1,4 +1,4 @@
-import { RenderingModelVendor, Settings } from "@/types"
+import { LLMVendor, RenderingModelVendor, Settings } from "@/types"
 
 import { getValidString } from "@/lib/getValidString"
 import { localStorageKeys } from "./localStorageKeys"
@@ -11,6 +11,7 @@ export function getSettings(): Settings {
     return {
       renderingModelVendor: getValidString(localStorage?.getItem?.(localStorageKeys.renderingModelVendor), defaultSettings.renderingModelVendor) as RenderingModelVendor,
       renderingUseTurbo: getValidBoolean(localStorage?.getItem?.(localStorageKeys.renderingUseTurbo), defaultSettings.renderingUseTurbo),
+      llmVendor: getValidString(localStorage?.getItem?.(localStorageKeys.llmVendor), defaultSettings.llmVendor) as LLMVendor,
       huggingFaceOAuth: getValidString(localStorage?.getItem?.(localStorageKeys.huggingFaceOAuth), defaultSettings.huggingFaceOAuth),
       huggingfaceApiKey: getValidString(localStorage?.getItem?.(localStorageKeys.huggingfaceApiKey), defaultSettings.huggingfaceApiKey),
       huggingfaceInferenceApiModel: getValidString(localStorage?.getItem?.(localStorageKeys.huggingfaceInferenceApiModel), defaultSettings.huggingfaceInferenceApiModel),
@@ -25,6 +26,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),
+      anthropicApiKey: getValidString(localStorage?.getItem?.(localStorageKeys.anthropicApiKey), defaultSettings.anthropicApiKey),
+      anthropicApiLanguageModel: getValidString(localStorage?.getItem?.(localStorageKeys.anthropicApiLanguageModel), defaultSettings.anthropicApiLanguageModel),
       hasGeneratedAtLeastOnce: getValidBoolean(localStorage?.getItem?.(localStorageKeys.hasGeneratedAtLeastOnce), defaultSettings.hasGeneratedAtLeastOnce),
       userDefinedMaxNumberOfPages: getValidNumber(localStorage?.getItem?.(localStorageKeys.userDefinedMaxNumberOfPages), 1, Number.MAX_SAFE_INTEGER, defaultSettings.userDefinedMaxNumberOfPages),
     }

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

@@ -13,7 +13,7 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 
-import { RenderingModelVendor } from "@/types"
+import { LLMVendor, RenderingModelVendor } from "@/types"
 import { Input } from "@/components/ui/input"
 
 import { Label } from "./label"
@@ -24,6 +24,8 @@ import { defaultSettings } from "./defaultSettings"
 import { useDynamicConfig } from "@/lib/useDynamicConfig"
 import { Slider } from "@/components/ui/slider"
 import { fonts } from "@/lib/fonts"
+import { cn } from "@/lib/utils"
+import { SectionTitle } from "./section-title"
 
 export function SettingsDialog() {
   const [isOpen, setOpen] = useState(false)
@@ -35,6 +37,10 @@ export function SettingsDialog() {
     localStorageKeys.renderingUseTurbo,
     defaultSettings.renderingUseTurbo
   )
+  const [llmVendor, setLlmModelVendor] = useLocalStorage<LLMVendor>(
+    localStorageKeys.llmVendor,
+    defaultSettings.llmVendor
+  )
   const [huggingfaceApiKey, setHuggingfaceApiKey] = useLocalStorage<string>(
     localStorageKeys.huggingfaceApiKey,
     defaultSettings.huggingfaceApiKey
@@ -75,6 +81,26 @@ export function SettingsDialog() {
     localStorageKeys.openaiApiModel,
     defaultSettings.openaiApiModel
   )
+  const [openaiApiLanguageModel, setOpenaiApiLanguageModel] = useLocalStorage<string>(
+    localStorageKeys.openaiApiLanguageModel,
+    defaultSettings.openaiApiLanguageModel
+  )
+  const [groqApiKey, setGroqApiKey] = useLocalStorage<string>(
+    localStorageKeys.groqApiKey,
+    defaultSettings.groqApiKey
+  )
+  const [groqApiLanguageModel, setGroqApiLanguageModel] = useLocalStorage<string>(
+    localStorageKeys.groqApiLanguageModel,
+    defaultSettings.groqApiLanguageModel
+  )
+  const [anthropicApiKey, setAnthropicApiKey] = useLocalStorage<string>(
+    localStorageKeys.anthropicApiKey,
+    defaultSettings.anthropicApiKey
+  )
+  const [anthropicApiLanguageModel, setAnthropicApiLanguageModel] = useLocalStorage<string>(
+    localStorageKeys.anthropicApiLanguageModel,
+    defaultSettings.anthropicApiLanguageModel
+  )
   const [userDefinedMaxNumberOfPages, setUserDefinedMaxNumberOfPages] = useLocalStorage<number>(
     localStorageKeys.userDefinedMaxNumberOfPages,
     defaultSettings.userDefinedMaxNumberOfPages
@@ -87,19 +113,25 @@ export function SettingsDialog() {
       <DialogTrigger asChild>
         <Button className="space-x-1 md:space-x-2">
           <div>
-            <span className="hidden md:inline">Settings</span>
+            <span className="">Settings</span>
           </div>
         </Button> 
       </DialogTrigger>
-      <DialogContent className="w-full sm:max-w-[500px] md:max-w-[700px]">
+      <DialogContent className="w-full sm:max-w-[500px] md:max-w-[700px] bg-gray-100">
         <DialogHeader>
-          <DialogDescription className="w-full text-center text-lg font-bold text-stone-800">
-            Settings
+          <DialogDescription className="w-full text-center text-2xl font-bold text-stone-800">
+            AI Comic Factory Settings
           </DialogDescription>
         </DialogHeader>
         <div className="overflow-y-scroll h-[75vh] md:h-[70vh]">
+        <p className="text-base italic text-zinc-600 w-full text-center">
+            ℹ️ Some models can take time to cold-start, or be under heavy traffic.<br/>
+            👉 In case of trouble, try again after 5-10 minutes.<br/>
+          🔒 Your settings are stored inside your browser, not on our servers.
+        </p>
+        <SectionTitle>👇 General options</SectionTitle>
         {isConfigReady && <Field>
-          <Label>(new!) Control the number of pages: {userDefinedMaxNumberOfPages}</Label>
+          <Label className="pt-2">Move the slider to set the total expected number of pages: {userDefinedMaxNumberOfPages}</Label>
           <Slider
             min={1}
             max={maxNbPages}
@@ -115,31 +147,11 @@ export function SettingsDialog() {
           />
         </Field>
         }
-        <div className="grid gap-4 pt-8 pb-1 space-y-1 text-stone-800">
-          <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)
-              }}
-              defaultValue={renderingModelVendor}>
-              <SelectTrigger className="">
-                <SelectValue placeholder="Theme" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="SERVER">Use server settings (default)</SelectItem>
-                <SelectItem value="HUGGINGFACE">Custom Hugging Face model (recommended)</SelectItem>
-                <SelectItem value="REPLICATE">Custom Replicate model (will use your own account)</SelectItem>
-                <SelectItem value="OPENAI">DALL·E 3 by OpenAI (partial support, will use your own account)</SelectItem>
-              </SelectContent>
-            </Select>
-          </Field>
-            
+        <div className={cn(
+          `grid gap-2 pt-3 pb-1`,
+          `text-stone-800`
+        )}>
+        
           
           {
           // renderingModelVendor === "SERVER" && <>
@@ -168,6 +180,29 @@ export function SettingsDialog() {
           // </>
           }
 
+          <SectionTitle>👇 Panel rendering options</SectionTitle>
+
+          <Field>
+            <Label className={cn(
+            )}>Image generation - please choose a stable diffusion provider:</Label>
+            <Select
+              onValueChange={(value: string) => {
+                setRenderingModelVendor(value as RenderingModelVendor)
+              }}
+              defaultValue={renderingModelVendor}
+              value={renderingModelVendor}>
+              <SelectTrigger className="bg-white">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="SERVER">Default Hugging Face server (free but limited capacity, not always online)</SelectItem>
+                <SelectItem value="HUGGINGFACE">Custom Inference API model (pro hugging face account recommended)</SelectItem>
+                <SelectItem value="REPLICATE">Custom Replicate model (will bill your own account)</SelectItem>
+                <SelectItem value="OPENAI">DALL·E 3 by OpenAI (partial support, will bill your own account)</SelectItem>
+              </SelectContent>
+            </Select>
+          </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>
@@ -247,7 +282,7 @@ export function SettingsDialog() {
 
           {renderingModelVendor === "REPLICATE" && <>
               <Field>
-                <Label>Replicate API Token (you will be billed based on Replicate pricing):</Label>
+                <Label>Replicate API Token:</Label>
                 <Input
                   className={fonts.actionman.className}
                   type="password"
@@ -296,10 +331,112 @@ 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>
+            <SectionTitle>👇 Story generation options (🚧 experimental alpbetaha 🚧)</SectionTitle>
+
+            <p>⚠️ I haven&apos;t tested all vendors yet, so please report issues to Discord!<br/>
+            ⚠️ Billing and privacy depend on your preferred vendor so please exercice caution.</p>
+            <Field>
+            <Label className={cn(
+            )}>Story generation - please choose a LLM provider:</Label>
+            <Select
+              onValueChange={(value: string) => {
+                setLlmModelVendor(value as LLMVendor)
+              }}
+              defaultValue={llmVendor}
+              value={llmVendor}>
+              <SelectTrigger className="bg-white">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="SERVER">Default Hugging Face server (free but limited capacity, not always online)</SelectItem>
+                <SelectItem value="GROQ">Open-source models on Groq (will bill your own account)</SelectItem>
+                <SelectItem value="ANTHROPIC">Claude by Anthropic (will bill your own account)</SelectItem>
+                <SelectItem value="OPENAI">ChatGPT by OpenAI (will bill your own account)</SelectItem>
+              </SelectContent>
+            </Select>
+          </Field>
+
+          {llmVendor === "GROQ" && <>
+            <Field>
+              <Label>Groq API Token:</Label>
+              <Input
+                className={fonts.actionman.className}
+                type="password"
+                placeholder="Enter your private api token"
+                onChange={(x) => {
+                  setGroqApiKey(x.target.value)
+                }}
+                value={groqApiKey}
+              />
+            </Field>
+            <Field>
+              <Label>Open-source Model ID:</Label>
+              <Input
+                className={fonts.actionman.className}
+                placeholder="Name of the LLM"
+                onChange={(x) => {
+                  setGroqApiLanguageModel(x.target.value)
+                }}
+                value={groqApiLanguageModel}
+              />
+            </Field>
+          </>}
+
+
+          {llmVendor === "ANTHROPIC" && <>
+            <Field>
+              <Label>Anthropic API Token:</Label>
+              <Input
+                className={fonts.actionman.className}
+                type="password"
+                placeholder="Enter your private api token"
+                onChange={(x) => {
+                  setAnthropicApiKey(x.target.value)
+                }}
+                value={anthropicApiKey}
+              />
+            </Field>
+            <Field>
+              <Label>Proprietary Model ID:</Label>
+              <Input
+                className={fonts.actionman.className}
+                placeholder="Name of the LLM"
+                onChange={(x) => {
+                  setAnthropicApiLanguageModel(x.target.value)
+                }}
+                value={anthropicApiLanguageModel}
+              />
+            </Field>
+          </>}
+
+
+          {llmVendor === "OPENAI" && <>
+            <Field>
+              <Label>OpenAI API Token:</Label>
+              <Input
+                className={fonts.actionman.className}
+                type="password"
+                placeholder="Enter your private api token"
+                onChange={(x) => {
+                  setOpenaiApiKey(x.target.value)
+                }}
+                value={openaiApiKey}
+              />
+            </Field>
+            <Field>
+              <Label>Proprietary Model ID:</Label>
+              <Input
+                className={fonts.actionman.className}
+                placeholder="Name of the LLM"
+                onChange={(x) => {
+                  setOpenaiApiLanguageModel(x.target.value)
+                }}
+                value={openaiApiLanguageModel}
+              />
+            </Field>
+          </>}
+
+          </div>
 
         </div>
 

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

@@ -1,7 +1,15 @@
 import { ReactNode } from "react"
 
-export function Label({ children }: { children: ReactNode }) {
+import { cn } from "@/lib/utils"
+
+export function Label({ className, children }: {
+  className?: string
+  children: ReactNode
+}) {
   return (
-    <label className="text-xl font-semibold text-zinc-700">{children}</label>
+    <label className={cn(
+      `text-base font-semibold text-zinc-700`,
+      className
+    )}>{children}</label>
   )
 }

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

@@ -1,22 +1,29 @@
 import { Settings } from "@/types"
 
+// let's keep it "version 0" for now, so as to not disrupt current users
+// however at some point we might need to upgrade and invalid the default values
+const version = ``
+
 export const localStorageKeys: Record<keyof Settings, string> = {
-  renderingModelVendor: "CONF_RENDERING_MODEL_VENDOR",
-  renderingUseTurbo: "CONF_RENDERING_USE_TURBO",
-  huggingFaceOAuth: "CONF_AUTH_HF_OAUTH",
-  huggingfaceApiKey: "CONF_AUTH_HF_API_TOKEN",
-  huggingfaceInferenceApiModel: "CONF_RENDERING_HF_INFERENCE_API_BASE_MODEL",
-  huggingfaceInferenceApiModelTrigger: "CONF_RENDERING_HF_INFERENCE_API_BASE_MODEL_TRIGGER",
-  huggingfaceInferenceApiFileType: "CONF_RENDERING_HF_INFERENCE_API_FILE_TYPE",
-  replicateApiKey: "CONF_AUTH_REPLICATE_API_TOKEN",
-  replicateApiModel: "CONF_RENDERING_REPLICATE_API_MODEL",
-  replicateApiModelVersion: "CONF_RENDERING_REPLICATE_API_MODEL_VERSION",
-  replicateApiModelTrigger: "CONF_RENDERING_REPLICATE_API_MODEL_TRIGGER",
-  openaiApiKey: "CONF_AUTH_OPENAI_API_KEY",
-  openaiApiModel: "CONF_AUTH_OPENAI_API_MODEL",
-  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",
-  userDefinedMaxNumberOfPages: "CONF_USER_DEFINED_MAX_NUMBER_OF_PAGES"
+  renderingModelVendor: `${version}CONF_RENDERING_MODEL_VENDOR`,
+  renderingUseTurbo: `${version}CONF_RENDERING_USE_TURBO`,
+  llmVendor: `${version}CONF_LLM_MODEL_VENDOR`,
+  huggingFaceOAuth: `${version}CONF_AUTH_HF_OAUTH`,
+  huggingfaceApiKey: `${version}CONF_AUTH_HF_API_TOKEN`,
+  huggingfaceInferenceApiModel: `${version}CONF_RENDERING_HF_INFERENCE_API_BASE_MODEL`,
+  huggingfaceInferenceApiModelTrigger: `${version}CONF_RENDERING_HF_INFERENCE_API_BASE_MODEL_TRIGGER`,
+  huggingfaceInferenceApiFileType: `${version}CONF_RENDERING_HF_INFERENCE_API_FILE_TYPE`,
+  replicateApiKey: `${version}CONF_AUTH_REPLICATE_API_TOKEN`,
+  replicateApiModel: `${version}CONF_RENDERING_REPLICATE_API_MODEL`,
+  replicateApiModelVersion: `${version}CONF_RENDERING_REPLICATE_API_MODEL_VERSION`,
+  replicateApiModelTrigger: `${version}CONF_RENDERING_REPLICATE_API_MODEL_TRIGGER`,
+  openaiApiKey: `${version}CONF_AUTH_OPENAI_API_KEY`,
+  openaiApiModel: `${version}CONF_AUTH_OPENAI_API_MODEL`,
+  openaiApiLanguageModel: `${version}CONF_AUTH_OPENAI_API_LANGUAGE_MODEL`,
+  groqApiKey: `${version}CONF_AUTH_GROQ_API_KEY`,
+  groqApiLanguageModel: `${version}CONF_AUTH_GROQ_API_LANGUAGE_MODEL`,
+  anthropicApiKey: `${version}CONF_AUTH_ANTHROPIC_API_KEY`,
+  anthropicApiLanguageModel: `${version}CONF_AUTH_ANTHROPIC_API_LANGUAGE_MODEL`,
+  hasGeneratedAtLeastOnce: `${version}CONF_HAS_GENERATED_AT_LEAST_ONCE`,
+  userDefinedMaxNumberOfPages: `${version}CONF_USER_DEFINED_MAX_NUMBER_OF_PAGES`,
 }

src/app/interface/settings-dialog/section-title.tsx

@@ -0,0 +1,20 @@
+import { ReactNode } from "react"
+
+import { cn } from "@/lib/utils"
+
+export function SectionTitle({ className, children }: {
+  className?: string
+  children: ReactNode
+}) {
+  return (
+    <div className={cn(
+      `flex flex-col items-center justify-center`,
+      `mt-6 pt-3 pb w-full`,
+      `border-t border-t-stone-400`,
+      `text-xl font-semibold text-zinc-900`,
+      className
+    )}>
+    {children}
+    </div>
+  )
+}

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

@@ -41,6 +41,14 @@ const layoutIcons: Partial<Record<LayoutName, StaticImageData>> = {
 }
 
 export function TopMenu() {
+  const searchParams = useSearchParams()
+
+  const requestedPreset = (searchParams?.get('preset') as PresetName) || defaultPreset
+  const requestedFont = (searchParams?.get('font') as FontName) || defaultFont
+  const requestedStylePrompt = (searchParams?.get('stylePrompt') as string) || ""
+  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)
@@ -63,21 +71,14 @@ export function TopMenu() {
 
   const [lastDraftPromptA, setLastDraftPromptA] = useLocalStorage<string>(
     "AI_COMIC_FACTORY_LAST_DRAFT_PROMPT_A",
-    ""
+    requestedStylePrompt
   )
 
   const [lastDraftPromptB, setLastDraftPromptB] = useLocalStorage<string>(
     "AI_COMIC_FACTORY_LAST_DRAFT_PROMPT_B",
-    ""
+    requestedStoryPrompt
   )
 
-  const searchParams = useSearchParams()
-
-  const requestedPreset = (searchParams?.get('preset') as PresetName) || defaultPreset
-  const requestedFont = (searchParams?.get('font') as FontName) || defaultFont
-  const requestedPrompt = (searchParams?.get('prompt') as string) || ""
-  const requestedLayout = (searchParams?.get('layout') as LayoutName) || defaultLayout
-
   const [draftPromptA, setDraftPromptA] = useState(lastDraftPromptA)
   const [draftPromptB, setDraftPromptB] = useState(lastDraftPromptB)
   const draftPrompt = `${draftPromptA}||${draftPromptB}`

src/app/main.tsx

@@ -19,11 +19,12 @@ import { getStoryContinuation } from "./queries/getStoryContinuation"
 import { localStorageKeys } from "./interface/settings-dialog/localStorageKeys"
 import { defaultSettings } from "./interface/settings-dialog/defaultSettings"
 import { SignUpCTA } from "./interface/sign-up-cta"
-import { sleep } from "@/lib/sleep"
+import { useLLMVendorConfig } from "@/lib/useLLMVendorConfig"
 
 export default function Main() {
   const [_isPending, startTransition] = useTransition()
 
+  const llmVendorConfig = useLLMVendorConfig()
   const { config, isConfigReady } = useDynamicConfig()
   const isGeneratingStory = useStore(s => s.isGeneratingStory)
   const setGeneratingStory = useStore(s => s.setGeneratingStory)
@@ -89,7 +90,7 @@ export default function Main() {
     showNextPageButton
   }, null, 2))
   */
-  
+
   useEffect(() => {
     if (maxNbPages !== userDefinedMaxNumberOfPages) {
       setMaxNbPages(userDefinedMaxNumberOfPages)
@@ -189,6 +190,8 @@ export default function Main() {
             // existing panels are critical here: this is how we can
             // continue over an existing story
             existingPanels: ref.current.existingPanels,
+
+            llmVendorConfig,
           })
           // console.log("LLM generated some new panels:", candidatePanels)
 

src/app/page.tsx

@@ -1,16 +1,19 @@
 "use server"
 
+import { ComponentProps } from "react"
 import Head from "next/head"
+import Script from "next/script"
 
-import Main from "./main"
 import { TooltipProvider } from "@/components/ui/tooltip"
-import Script from "next/script"
 import { cn } from "@/lib/utils"
+
+import Main from "./main"
+
 // import { Maintenance } from "./interface/maintenance"
 
 // https://nextjs.org/docs/pages/building-your-application/optimizing/fonts 
 
-export default async function IndexPage({ params: { ownerId } }: { params: { ownerId: string }}) {
+export default async function IndexPage() {
   return (
     <>
       <Head>
@@ -22,22 +25,29 @@ export default async function IndexPage({ params: { ownerId } }: { params: { own
         `light fixed inset-0 w-screen h-screen flex flex-col items-center`,
          `bg-zinc-50 text-stone-900 overflow-y-scroll`,
 
-         // important: in "print" mode we need to allowing going out of the screen
+         // important: in "print" mode we need to allow going out of the screen
          `inset-auto print:h-auto print:w-auto print:overflow-visible print:relative print:flex-none`
         )}>
         <TooltipProvider delayDuration={100}>
           
           <Main />
-         {/* <Maintenance /> */}
+
+         {/*
+
+         to display a maintenance page, hide <Main /> and uncomment this unstead:
+         
+              <Maintenance />
+
+         */}
 
         </TooltipProvider>
+
         <Script src="https://www.googletagmanager.com/gtag/js?id=GTM-WH4MGSHS" />
         <Script id="google-analytics">
           {`
             window.dataLayer = window.dataLayer || [];
             function gtag(){dataLayer.push(arguments);}
             gtag('js', new Date());
-    
             gtag('config', 'GTM-WH4MGSHS');
           `}
         </Script>

src/app/queries/getLLMEngineFunction.ts

@@ -0,0 +1,19 @@
+import { LLMEngine } from "@/types"
+import { predict as predictWithHuggingFace } from "./predictWithHuggingFace"
+import { predict as predictWithOpenAI } from "./predictWithOpenAI"
+import { predict as predictWithGroq } from "./predictWithGroq"
+import { predict as predictWithAnthropic } from "./predictWithAnthropic"
+
+export const defaultLLMEngineName = `${process.env.LLM_ENGINE || ""}` as LLMEngine
+
+export function getLLMEngineFunction(llmEngineName: LLMEngine = defaultLLMEngineName) {
+  const llmEngineFunction = 
+    llmEngineName === "GROQ" ? predictWithGroq :
+    llmEngineName === "ANTHROPIC" ? predictWithAnthropic :
+    llmEngineName === "OPENAI" ? predictWithOpenAI :
+    predictWithHuggingFace
+  
+  return llmEngineFunction
+}
+
+export const defaultLLMEngineFunction = getLLMEngineFunction()

src/app/queries/getStoryContinuation.ts

@@ -1,5 +1,5 @@
 import { Preset } from "../engine/presets"
-import { GeneratedPanel } from "@/types"
+import { GeneratedPanel, LLMVendorConfig } from "@/types"
 import { predictNextPanels } from "./predictNextPanels"
 import { joinWords } from "@/lib/joinWords"
 import { sleep } from "@/lib/sleep"
@@ -11,6 +11,7 @@ export const getStoryContinuation = async ({
   nbPanelsToGenerate,
   maxNbPanels,
   existingPanels = [],
+  llmVendorConfig
 }: {
   preset: Preset;
   stylePrompt?: string;
@@ -18,6 +19,7 @@ export const getStoryContinuation = async ({
   nbPanelsToGenerate: number;
   maxNbPanels: number;
   existingPanels?: GeneratedPanel[];
+  llmVendorConfig: LLMVendorConfig
 }): Promise<GeneratedPanel[]> => {
 
   let panels: GeneratedPanel[] = []
@@ -34,6 +36,7 @@ export const getStoryContinuation = async ({
       nbPanelsToGenerate,
       maxNbPanels,
       existingPanels,
+      llmVendorConfig,
     })
 
     // console.log("LLM responded with panelCandidates:", panelCandidates)

src/app/queries/predict.ts

@@ -1,15 +1,23 @@
 "use server"
 
-import { LLMEngine } from "@/types"
-import { predict as predictWithHuggingFace } from "./predictWithHuggingFace"
-import { predict as predictWithOpenAI } from "./predictWithOpenAI"
-import { predict as predictWithGroq } from "./predictWithGroq"
-import { predict as predictWithAnthropic } from "./predictWithAnthropic"
-
-const llmEngine = `${process.env.LLM_ENGINE || ""}` as LLMEngine
-
-export const predict =
-  llmEngine === "GROQ" ? predictWithGroq :
-  llmEngine === "ANTHROPIC" ? predictWithAnthropic :
-  llmEngine === "OPENAI" ? predictWithOpenAI :
-  predictWithHuggingFace
+import { LLMEngine, LLMPredictionFunctionParams } from "@/types"
+import { defaultLLMEngineName, getLLMEngineFunction } from "./getLLMEngineFunction"
+
+export async function predict(params: LLMPredictionFunctionParams): Promise<string> {
+  const { llmVendorConfig: { vendor } } = params
+  // LLMVendor = what the user configure in the UI (eg. a dropdown item called default server)
+  // LLMEngine = the actual engine to use (eg. hugging face)
+  const llmEngineName: LLMEngine =
+    vendor === "ANTHROPIC" ? "ANTHROPIC" :
+    vendor === "GROQ" ? "GROQ" :
+    vendor === "OPENAI" ? "OPENAI" :
+    defaultLLMEngineName
+
+  const llmEngineFunction = getLLMEngineFunction(llmEngineName)
+
+  // console.log("predict: using " + llmEngineName)
+  const results = await llmEngineFunction(params)
+
+  // console.log("predict: result: " + results)
+  return results
+}

src/app/queries/predictNextPanels.ts

@@ -1,4 +1,4 @@
-import { GeneratedPanel } from "@/types"
+import { GeneratedPanel, LLMVendorConfig } from "@/types"
 import { cleanJson } from "@/lib/cleanJson"
 import { dirtyGeneratedPanelCleaner } from "@/lib/dirtyGeneratedPanelCleaner"
 import { dirtyGeneratedPanelsParser } from "@/lib/dirtyGeneratedPanelsParser"
@@ -15,12 +15,14 @@ export const predictNextPanels = async ({
   nbPanelsToGenerate,
   maxNbPanels,
   existingPanels = [],
+  llmVendorConfig,
 }: {
-  preset: Preset;
-  prompt: string;
-  nbPanelsToGenerate: number;
-  maxNbPanels: number;
-  existingPanels: GeneratedPanel[];
+  preset: Preset
+  prompt: string
+  nbPanelsToGenerate: number
+  maxNbPanels: number
+  existingPanels: GeneratedPanel[]
+  llmVendorConfig: LLMVendorConfig
 }): Promise<GeneratedPanel[]> => {
   // console.log("predictNextPanels: ", { prompt, nbPanelsToGenerate })
   // throw new Error("Planned maintenance")
@@ -61,7 +63,12 @@ export const predictNextPanels = async ({
 
   try {
     // console.log(`calling predict:`, { systemPrompt, userPrompt, nbMaxNewTokens })
-    result = `${await predict({ systemPrompt, userPrompt, nbMaxNewTokens })}`.trim()
+    result = `${await predict({
+      systemPrompt,
+      userPrompt,
+      nbMaxNewTokens,
+      llmVendorConfig
+    })}`.trim()
     console.log("LLM result (1st trial):", result)
     if (!result.length) {
       throw new Error("empty result on 1st trial!")
@@ -72,7 +79,12 @@ export const predictNextPanels = async ({
     await sleep(2000)
 
     try {
-      result = `${await predict({ systemPrompt: systemPrompt + " \n ", userPrompt, nbMaxNewTokens })}`.trim()
+      result = `${await predict({
+        systemPrompt: systemPrompt + " \n ",
+        userPrompt,
+        nbMaxNewTokens,
+        llmVendorConfig
+      })}`.trim()
       console.log("LLM result (2nd trial):", result)
       if (!result.length) {
         throw new Error("empty result on 2nd trial!")

src/app/queries/predictWithAnthropic.ts

@@ -1,5 +1,6 @@
 "use server"
 
+import { LLMPredictionFunctionParams } from '@/types';
 import Anthropic from '@anthropic-ai/sdk';
 import { MessageParam } from '@anthropic-ai/sdk/resources';
 
@@ -7,13 +8,18 @@ export async function predict({
   systemPrompt,
   userPrompt,
   nbMaxNewTokens,
-}: {
-  systemPrompt: string
-  userPrompt: string
-  nbMaxNewTokens: number
-}): Promise<string> {
-  const anthropicApiKey = `${process.env.AUTH_ANTHROPIC_API_KEY || ""}`
-  const anthropicApiModel = `${process.env.LLM_ANTHROPIC_API_MODEL || "claude-3-opus-20240229"}`
+  llmVendorConfig
+}: LLMPredictionFunctionParams): Promise<string> {
+  const anthropicApiKey = `${
+    llmVendorConfig.apiKey ||
+    process.env.AUTH_ANTHROPIC_API_KEY ||
+    ""
+  }`
+  const anthropicApiModel = `${
+    llmVendorConfig.modelId ||
+    process.env.LLM_ANTHROPIC_API_MODEL ||
+    "claude-3-opus-20240229"
+  }`
   
   const anthropic = new Anthropic({
     apiKey: anthropicApiKey,

src/app/queries/predictWithGroq.ts

@@ -1,19 +1,25 @@
 "use server"
 
+import { LLMPredictionFunctionParams } from "@/types"
 import Groq from "groq-sdk"
 
 export async function predict({
   systemPrompt,
   userPrompt,
   nbMaxNewTokens,
-}: {
-  systemPrompt: string
-  userPrompt: string
-  nbMaxNewTokens: number
-}): Promise<string> {
-  const groqApiKey = `${process.env.AUTH_GROQ_API_KEY || ""}`
-  const groqApiModel = `${process.env.LLM_GROQ_API_MODEL || "mixtral-8x7b-32768"}`
-  
+  llmVendorConfig
+}: LLMPredictionFunctionParams): Promise<string> {
+  const groqApiKey = `${
+    llmVendorConfig.apiKey ||
+    process.env.AUTH_GROQ_API_KEY ||
+    ""
+  }`
+  const groqApiModel = `${
+    llmVendorConfig.modelId ||
+    process.env.LLM_GROQ_API_MODEL ||
+    "mixtral-8x7b-32768"
+  }`
+
   const groq = new Groq({
     apiKey: groqApiKey,
   })

src/app/queries/predictWithHuggingFace.ts

@@ -1,18 +1,16 @@
 "use server"
 
 import { HfInference, HfInferenceEndpoint } from "@huggingface/inference"
-import { LLMEngine } from "@/types"
+import { LLMEngine, LLMPredictionFunctionParams } from "@/types"
 import { createZephyrPrompt } from "@/lib/createZephyrPrompt"
 
 export async function predict({
   systemPrompt,
   userPrompt,
   nbMaxNewTokens,
-}: {
-  systemPrompt: string
-  userPrompt: string
-  nbMaxNewTokens: number
-}): Promise<string> {
+  // llmVendorConfig // <-- arbitrary/custom LLM models hosted on HF is not supported yet using the UI
+}: LLMPredictionFunctionParams): Promise<string> {
+
   const hf = new HfInference(process.env.AUTH_HF_API_TOKEN)
 
   const llmEngine = `${process.env.LLM_ENGINE || ""}` as LLMEngine

src/app/queries/predictWithOpenAI.ts

@@ -2,20 +2,27 @@
 
 import type { ChatCompletionMessageParam } from "openai/resources/chat"
 import OpenAI from "openai"
+import { LLMPredictionFunctionParams } from "@/types"
 
 export async function predict({
   systemPrompt,
   userPrompt,
   nbMaxNewTokens,
-}: {
-  systemPrompt: string
-  userPrompt: string
-  nbMaxNewTokens: number
-}): Promise<string> {
-  const openaiApiKey = `${process.env.AUTH_OPENAI_API_KEY || ""}`
+  llmVendorConfig
+}: LLMPredictionFunctionParams): Promise<string> {
+  const openaiApiKey = `${
+    llmVendorConfig.apiKey ||
+    process.env.AUTH_OPENAI_API_KEY ||
+    ""
+  }`
+  const openaiApiModel = `${
+    llmVendorConfig.modelId ||
+    process.env.LLM_OPENAI_API_MODEL ||
+    "gpt-4-turbo-preview"
+  }`
+
   const openaiApiBaseUrl = `${process.env.LLM_OPENAI_API_BASE_URL || "https://api.openai.com/v1"}`
-  const openaiApiModel = `${process.env.LLM_OPENAI_API_MODEL || "gpt-3.5-turbo"}`
-  
+
   const openai = new OpenAI({
     apiKey: openaiApiKey,
     baseURL: openaiApiBaseUrl,

src/app/store/index.ts

@@ -7,6 +7,7 @@ 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 { getParam } from "@/lib/getParam"
 
 export const useStore = create<{
   prompt: string
@@ -70,14 +71,17 @@ export const useStore = create<{
 
   generate: (prompt: string, presetName: PresetName, layoutName: LayoutName) => void
 }>((set, get) => ({
-  prompt: "",
+  prompt:
+    (getParam("stylePrompt", "") || getParam("storyPrompt", ""))
+     ? `${getParam("stylePrompt", "")}||${getParam("storyPrompt", "")}`
+     : "",
   font: "actionman",
-  preset: getPreset(defaultPreset),
+  preset: getPreset(getParam("preset", defaultPreset)),
 
   currentNbPanelsPerPage: 4,
   maxNbPanelsPerPage: 4,
   currentNbPages: 1,
-  maxNbPages: 1,
+  maxNbPages: getParam("maxNbPages", 1),
   previousNbPanels: 0,
   currentNbPanels: 4,
   maxNbPanels: 4,
@@ -86,14 +90,14 @@ export const useStore = create<{
   captions: [],
   upscaleQueue: {} as Record<string, RenderedScene>,
   renderedScenes: {} as Record<string, RenderedScene>,
-  showCaptions: false,
+  showCaptions: getParam("showCaptions", false),
 
   // deprecated?
   layout: defaultLayout,
 
   layouts: [defaultLayout, defaultLayout, defaultLayout, defaultLayout],
 
-  zoomLevel: 60,
+  zoomLevel: getParam("zoomLevel", 60),
 
   // deprecated?
   page: undefined as unknown as HTMLDivElement,

src/lib/getParam.ts

@@ -0,0 +1,19 @@
+import queryString from 'query-string'
+
+export function getParam<T>(name: string, defaultValue: T): T {
+  try {
+    const params = queryString.parseUrl(
+      typeof window !== "undefined" ? (window.location.href || "") : ""
+    )
+    const stringValue = params.query[name]?.toString() || `${defaultValue || ""}`
+    if (typeof defaultValue === "number") {
+      return Number(stringValue) as T
+    } else if (typeof defaultValue === "boolean") {
+      return Boolean(stringValue) as T
+    } else {
+      return stringValue as T
+    }
+  } catch (err) {
+    return defaultValue
+  }
+}

src/lib/useLLMVendorConfig.ts

@@ -0,0 +1,55 @@
+import { useLocalStorage } from "usehooks-ts"
+
+import { defaultSettings } from "@/app/interface/settings-dialog/defaultSettings"
+import { localStorageKeys } from "@/app/interface/settings-dialog/localStorageKeys"
+import { LLMEngine, LLMVendor, LLMVendorConfig } from "@/types"
+
+export function useLLMVendorConfig(): LLMVendorConfig {
+
+  const [vendor, ] = useLocalStorage<LLMVendor>(
+    localStorageKeys.llmVendor,
+    defaultSettings.llmVendor
+  )
+  const [openaiApiKey, ] = useLocalStorage<string>(
+    localStorageKeys.openaiApiKey,
+    defaultSettings.openaiApiKey
+  )
+  const [openaiApiLanguageModel, ] = useLocalStorage<string>(
+    localStorageKeys.openaiApiLanguageModel,
+    defaultSettings.openaiApiLanguageModel
+  )
+  const [groqApiKey, ] = useLocalStorage<string>(
+    localStorageKeys.groqApiKey,
+    defaultSettings.groqApiKey
+  )
+  const [groqApiLanguageModel, ] = useLocalStorage<string>(
+    localStorageKeys.groqApiLanguageModel,
+    defaultSettings.groqApiLanguageModel
+  )
+  const [anthropicApiKey, ] = useLocalStorage<string>(
+    localStorageKeys.anthropicApiKey,
+    defaultSettings.anthropicApiKey
+  )
+  const [anthropicApiLanguageModel, ] = useLocalStorage<string>(
+    localStorageKeys.anthropicApiLanguageModel,
+    defaultSettings.anthropicApiLanguageModel
+  )
+
+  const apiKey =
+    vendor === "ANTHROPIC" ? anthropicApiKey :
+    vendor === "GROQ" ? groqApiKey :
+    vendor === "OPENAI" ? openaiApiKey :
+    ""
+  
+  const modelId =
+    vendor === "ANTHROPIC" ? anthropicApiLanguageModel :
+    vendor === "GROQ" ? groqApiLanguageModel :
+    vendor === "OPENAI" ? openaiApiLanguageModel :
+    ""
+
+  return {
+    vendor,
+    apiKey,
+    modelId,
+  }
+}

src/lib/useOAuth.ts

@@ -7,6 +7,8 @@ import { OAuthResult, oauthHandleRedirectIfPresent, oauthLoginUrl } from "@huggi
 import { usePersistedOAuth } from "./usePersistedOAuth"
 import { getValidOAuth } from "./getValidOAuth"
 import { useDynamicConfig } from "./useDynamicConfig"
+import { useLocalStorage } from "usehooks-ts"
+import { useShouldDisplayLoginWall } from "./useShouldDisplayLoginWall"
 
 export function useOAuth({
   debug = false
@@ -33,7 +35,6 @@ export function useOAuth({
   const redirectUrl = config.oauthRedirectUrl
   const scopes = config.oauthScopes
   const enableOAuth = config.enableHuggingFaceOAuth
-  const enableOAuthWall = config.enableHuggingFaceOAuthWall
 
   const searchParams = useSearchParams()
   const code = searchParams?.get("code") || ""
@@ -41,9 +42,13 @@ export function useOAuth({
 
   const hasReceivedFreshOAuth = Boolean(code && state)
 
+  // note: being able to log into hugging face using the popup
+  // is different from seeing the "login wall"
   const canLogin: boolean = Boolean(isConfigReady && clientId && enableOAuth)
   const isLoggedIn = Boolean(oauthResult)
 
+  const enableOAuthWall = useShouldDisplayLoginWall() 
+
   if (debug) {
     console.log("useOAuth debug:", {
       oauthResult,

src/lib/useShouldDisplayLoginWall.ts

@@ -0,0 +1,44 @@
+import { useLocalStorage } from "usehooks-ts"
+
+import { LLMVendor, RenderingModelVendor } from "@/types"
+import { localStorageKeys } from "@/app/interface/settings-dialog/localStorageKeys"
+import { defaultSettings } from "@/app/interface/settings-dialog/defaultSettings"
+
+import { useDynamicConfig } from "./useDynamicConfig"
+
+// we don't want to display the login wall to people forking the project,
+// or to people who selected no hugging face server at all
+export function useShouldDisplayLoginWall() {
+  const { config, isConfigReady } = useDynamicConfig()
+
+  const clientId = config.oauthClientId
+  const enableOAuth = config.enableHuggingFaceOAuth
+  const enableOAuthWall = config.enableHuggingFaceOAuthWall
+
+  const isConfigEnablingOAuthWall = Boolean(
+    clientId &&
+    enableOAuth &&
+    enableOAuthWall
+  )
+
+  const [renderingModelVendor,] = useLocalStorage<RenderingModelVendor>(
+    localStorageKeys.renderingModelVendor,
+    defaultSettings.renderingModelVendor
+  )
+  const [llmVendor,] = useLocalStorage<LLMVendor>(
+    localStorageKeys.llmVendor,
+    defaultSettings.llmVendor
+  )
+
+  const isUsingOneOfTheDefaultServices =
+    renderingModelVendor === "SERVER" ||
+    llmVendor === "SERVER"
+
+
+  const shouldDisplayLoginWall =
+    isConfigReady &&
+    isConfigEnablingOAuthWall &&
+    isUsingOneOfTheDefaultServices 
+    
+  return shouldDisplayLoginWall
+}

src/types.ts

@@ -95,6 +95,8 @@ export type GeneratedPanel = {
 
 export type GeneratedPanels = GeneratedPanel[]
 
+// LLMVendor = what the user configure in the UI (eg. a dropdown item called default server)
+// LLMEngine = the actual engine to use (eg. hugging face)
 export type LLMEngine =
   | "INFERENCE_API"
   | "INFERENCE_ENDPOINT"
@@ -103,19 +105,40 @@ export type LLMEngine =
   | "GROQ"
   | "ANTHROPIC"
 
-  export type RenderingEngine =
+export type RenderingEngine =
   | "VIDEOCHAIN"
   | "OPENAI"
   | "REPLICATE"
   | "INFERENCE_API"
   | "INFERENCE_ENDPOINT"
 
-  export type RenderingModelVendor =
+export type RenderingModelVendor =
   | "SERVER"
   | "OPENAI"
   | "REPLICATE"
   | "HUGGINGFACE"
 
+// LLMVendor = what the user configure in the UI (eg. a dropdown item called default server)
+// LLMEngine = the actual engine to use (eg. hugging face)
+export type LLMVendor =
+  | "SERVER"
+  | "OPENAI"
+  | "GROQ"
+  | "ANTHROPIC"
+
+export type LLMVendorConfig = {
+  vendor: LLMVendor
+  apiKey: string
+  modelId: string
+}
+
+export type LLMPredictionFunctionParams = {
+  systemPrompt: string
+  userPrompt: string
+  nbMaxNewTokens: number
+  llmVendorConfig: LLMVendorConfig
+}
+
 export type PostVisibility =
   | "featured" // featured by admins
   | "trending" // top trending / received more than 10 upvotes
@@ -160,6 +183,7 @@ export type LayoutProps = {
 export type Settings = {
   renderingModelVendor: RenderingModelVendor
   renderingUseTurbo: boolean
+  llmVendor: LLMVendor
   huggingFaceOAuth: string
   huggingfaceApiKey: string
   huggingfaceInferenceApiModel: string
@@ -174,6 +198,8 @@ export type Settings = {
   openaiApiLanguageModel: string
   groqApiKey: string
   groqApiLanguageModel: string
+  anthropicApiKey: string
+  anthropicApiLanguageModel: string
   hasGeneratedAtLeastOnce: boolean
   userDefinedMaxNumberOfPages: number
 }