we now have.. custom models ☄️.. and settings ✨

package-lock.json

@@ -62,6 +62,7 @@
         "tailwindcss-animate": "^1.0.6",
         "ts-node": "^10.9.1",
         "typescript": "5.1.6",
+        "usehooks-ts": "^2.9.1",
         "uuid": "^9.0.0",
         "zustand": "^4.4.1"
       },
@@ -6808,6 +6809,19 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/usehooks-ts": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-2.9.1.tgz",
+      "integrity": "sha512-2FAuSIGHlY+apM9FVlj8/oNhd+1y+Uwv5QNkMQz1oSfdHk4PXo1qoCw9I5M7j0vpH8CSWFJwXbVPeYDjLCx9PA==",
+      "engines": {
+        "node": ">=16.15.0",
+        "npm": ">=8"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0  || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

package.json

@@ -63,6 +63,7 @@
     "tailwindcss-animate": "^1.0.6",
     "ts-node": "^10.9.1",
     "typescript": "5.1.6",
+    "usehooks-ts": "^2.9.1",
     "uuid": "^9.0.0",
     "zustand": "^4.4.1"
   },

src/app/engine/presets.ts

@@ -36,6 +36,18 @@ export const presets: Record<string, Preset> = {
     imagePrompt: (prompt: string) => [],
     negativePrompt: () => [],
   },
+  neutral: {
+    id: "neutral",
+    label: "Neutral (no style)",
+    family: "american",
+    color: "color",
+    font: "actionman",
+    llmPrompt: "",
+    imagePrompt: (prompt: string) => [
+      prompt,
+    ],
+    negativePrompt: () => [ ],
+  },
   japanese_manga: {
     id: "japanese_manga",
     label: "Japanese",

src/app/engine/render.ts

@@ -2,43 +2,46 @@
 
 import { v4 as uuidv4 } from "uuid"
 import Replicate from "replicate"
-import OpenAI from "openai"
 
-import { RenderRequest, RenderedScene, RenderingEngine } from "@/types"
+import { RenderRequest, RenderedScene, RenderingEngine, Settings } from "@/types"
 import { generateSeed } from "@/lib/generateSeed"
 import { sleep } from "@/lib/sleep"
 
-const renderingEngine = `${process.env.RENDERING_ENGINE || ""}` as RenderingEngine
+const serverRenderingEngine = `${process.env.RENDERING_ENGINE || ""}` as RenderingEngine
 
 // TODO: we should split Hugging Face and Replicate backends into separate files
-const huggingFaceToken = `${process.env.AUTH_HF_API_TOKEN || ""}`
-const huggingFaceInferenceEndpointUrl = `${process.env.RENDERING_HF_INFERENCE_ENDPOINT_URL || ""}`
-const huggingFaceInferenceApiBaseModel = `${process.env.RENDERING_HF_INFERENCE_API_BASE_MODEL || ""}`
-const huggingFaceInferenceApiRefinerModel = `${process.env.RENDERING_HF_INFERENCE_API_REFINER_MODEL || ""}`
+const serverHuggingfaceApiKey = `${process.env.AUTH_HF_API_TOKEN || ""}`
+const serverHuggingfaceApiUrl = `${process.env.RENDERING_HF_INFERENCE_ENDPOINT_URL || ""}`
+const serverHuggingfaceInferenceApiModel = `${process.env.RENDERING_HF_INFERENCE_API_BASE_MODEL || ""}`
+const serverHuggingfaceInferenceApiModelRefinerModel = `${process.env.RENDERING_HF_INFERENCE_API_REFINER_MODEL || ""}`
+const serverHuggingfaceInferenceApiModelTrigger = `${process.env.RENDERING_HF_INFERENCE_API_MODEL_TRIGGER || "style of TOK"}`
 
-const replicateToken = `${process.env.AUTH_REPLICATE_API_TOKEN || ""}`
-const replicateModel = `${process.env.RENDERING_REPLICATE_API_MODEL || ""}`
-const replicateModelVersion = `${process.env.RENDERING_REPLICATE_API_MODEL_VERSION || ""}`
+const serverReplicateApiKey = `${process.env.AUTH_REPLICATE_API_TOKEN || ""}`
+const serverReplicateApiModel = `${process.env.RENDERING_REPLICATE_API_MODEL || ""}`
+const serverReplicateApiModelVersion = `${process.env.RENDERING_REPLICATE_API_MODEL_VERSION || ""}`
+const serverReplicateApiModelTrigger = `${process.env.RENDERING_REPLICATE_API_MODEL_TRIGGER || ""}`
 
 const videochainToken = `${process.env.AUTH_VIDEOCHAIN_API_TOKEN || ""}`
 const videochainApiUrl = `${process.env.RENDERING_VIDEOCHAIN_API_URL || ""}`
 
-const openaiApiKey = `${process.env.AUTH_OPENAI_API_KEY || ""}`
-const openaiApiBaseUrl = `${process.env.RENDERING_OPENAI_API_BASE_URL || "https://api.openai.com/v1"}`
-const openaiApiModel = `${process.env.RENDERING_OPENAI_API_MODEL || "dall-e-3"}`
+const serverOpenaiApiKey = `${process.env.AUTH_OPENAI_API_KEY || ""}`
+const serverOpenaiApiBaseUrl = `${process.env.RENDERING_OPENAI_API_BASE_URL || "https://api.openai.com/v1"}`
+const serverOpenaiApiModel = `${process.env.RENDERING_OPENAI_API_MODEL || "dall-e-3"}`
 
 export async function newRender({
   prompt,
   // negativePrompt,
   width,
   height,
-  withCache
+  withCache,
+  settings,
 }: {
   prompt: string
   // negativePrompt: string[]
   width: number
   height: number
   withCache: boolean
+  settings: Settings
 }) {
   // throw new Error("Planned maintenance")
 
@@ -61,6 +64,59 @@ export async function newRender({
   const nbInferenceSteps = 30
   const guidanceScale = 9
 
+  let renderingEngine = serverRenderingEngine
+  let openaiApiKey = serverOpenaiApiKey
+  let openaiApiModel = serverOpenaiApiModel
+
+  let replicateApiKey = serverReplicateApiKey
+  let replicateApiModel = serverReplicateApiModel
+  let replicateApiModelVersion = serverReplicateApiModelVersion
+  let replicateApiModelTrigger = serverReplicateApiModelTrigger
+
+  let huggingfaceApiKey = serverHuggingfaceApiKey
+  let huggingfaceInferenceApiModel = serverHuggingfaceInferenceApiModel
+  let huggingfaceApiUrl = serverHuggingfaceApiUrl
+  let huggingfaceInferenceApiModelRefinerModel = serverHuggingfaceInferenceApiModelRefinerModel 
+  let huggingfaceInferenceApiModelTrigger = serverHuggingfaceInferenceApiModelTrigger
+
+  const placeholder = "<USE YOUR OWN TOKEN>"
+
+  if (
+    settings.renderingModelVendor === "OPENAI" && 
+    settings.openaiApiKey &&
+    settings.openaiApiKey !== placeholder &&
+    settings.openaiApiModel
+  ) {
+    console.log("using OpenAI using user credentials (hidden)")
+    renderingEngine = "OPENAI"
+    openaiApiKey = settings.openaiApiKey
+    openaiApiModel = settings.openaiApiModel
+  } if (
+    settings.renderingModelVendor === "REPLICATE" &&
+    settings.replicateApiKey &&
+    settings.replicateApiKey !== placeholder &&
+    settings.replicateApiModel &&
+    settings.replicateApiModelVersion
+  ) {
+    console.log("using Replicate using user credentials (hidden)")
+    renderingEngine = "REPLICATE"
+    replicateApiKey = settings.replicateApiKey
+    replicateApiModel = settings.replicateApiModel
+    replicateApiModelVersion = settings.replicateApiModelVersion
+    replicateApiModelTrigger = settings.replicateApiModelTrigger
+  } else if (
+      settings.renderingModelVendor === "HUGGINGFACE" &&
+      settings.huggingfaceApiKey &&
+      settings.huggingfaceApiKey !== placeholder &&
+      settings.huggingfaceInferenceApiModel
+    ) {
+      console.log("using Hugging Face using user credentials (hidden)")
+    renderingEngine = "INFERENCE_API"
+    huggingfaceApiKey = settings.huggingfaceApiKey
+    huggingfaceInferenceApiModel = settings.huggingfaceInferenceApiModel
+    huggingfaceInferenceApiModelTrigger = settings.huggingfaceInferenceApiModelTrigger
+  } 
+
   try {
     if (renderingEngine === "OPENAI") {
 
@@ -89,7 +145,7 @@ export async function newRender({
       })
       */
 
-      const res = await fetch(`${openaiApiBaseUrl}/images/generations`, {
+      const res = await fetch(`${serverOpenaiApiBaseUrl}/images/generations`, {
         method: "POST",
         headers: {
           Accept: "application/json",
@@ -97,7 +153,7 @@ export async function newRender({
           Authorization: `Bearer ${openaiApiKey}`,
         },
         body: JSON.stringify({
-          model: "dall-e-3",
+          model: openaiApiModel,
           prompt,
           n: 1,
           size,
@@ -125,28 +181,29 @@ export async function newRender({
         segments: []
       } as RenderedScene
     } else if (renderingEngine === "REPLICATE") {
-      if (!replicateToken) {
-        throw new Error(`you need to configure your REPLICATE_API_TOKEN in order to use the REPLICATE rendering engine`)
+      if (!replicateApiKey) {
+        throw new Error(`invalid replicateApiKey, you need to configure your REPLICATE_API_TOKEN in order to use the REPLICATE rendering engine`)
       }
-      if (!replicateModel) {
-        throw new Error(`you need to configure your REPLICATE_API_MODEL in order to use the REPLICATE rendering engine`)
+      if (!replicateApiModel) {
+        throw new Error(`invalid replicateApiModel, you need to configure your REPLICATE_API_MODEL in order to use the REPLICATE rendering engine`)
       }
-      if (!replicateModelVersion) {
-        throw new Error(`you need to configure your REPLICATE_API_MODEL_VERSION in order to use the REPLICATE rendering engine`)
+      if (!replicateApiModelVersion) {
+        throw new Error(`invalid replicateApiModelVersion, you need to configure your REPLICATE_API_MODEL_VERSION in order to use the REPLICATE rendering engine`)
       }
-      const replicate = new Replicate({ auth: replicateToken })
+      const replicate = new Replicate({ auth: replicateApiKey })
 
       const seed = generateSeed()
       const prediction = await replicate.predictions.create({
-        version: replicateModelVersion,
+        version: replicateApiModelVersion,
         input: {
           prompt: [
             "beautiful",
             // "intricate details",
+            replicateApiModelTrigger || "",
             prompt,
             "award winning",
             "high resolution"
-          ].join(", "),
+          ].filter(x => x).join(", "),
           width,
           height,
           seed
@@ -167,36 +224,37 @@ export async function newRender({
         segments: []
       } as RenderedScene
     } if (renderingEngine === "INFERENCE_ENDPOINT" || renderingEngine === "INFERENCE_API") {
-      if (!huggingFaceToken) {
-        throw new Error(`you need to configure your HF_API_TOKEN in order to use the ${renderingEngine} rendering engine`)
+      if (!huggingfaceApiKey) {
+        throw new Error(`invalid huggingfaceApiKey, you need to configure your HF_API_TOKEN in order to use the ${renderingEngine} rendering engine`)
       }
-      if (renderingEngine === "INFERENCE_ENDPOINT" && !huggingFaceInferenceEndpointUrl) {
-        throw new Error(`you need to configure your RENDERING_HF_INFERENCE_ENDPOINT_URL in order to use the INFERENCE_ENDPOINT rendering engine`)
+      if (renderingEngine === "INFERENCE_ENDPOINT" && !huggingfaceApiUrl) {
+        throw new Error(`invalid huggingfaceApiUrl, you need to configure your RENDERING_HF_INFERENCE_ENDPOINT_URL in order to use the INFERENCE_ENDPOINT rendering engine`)
       }
-      if (renderingEngine === "INFERENCE_API" && !huggingFaceInferenceApiBaseModel) {
-        throw new Error(`you need to configure your RENDERING_HF_INFERENCE_API_BASE_MODEL in order to use the INFERENCE_API rendering engine`)
+      if (renderingEngine === "INFERENCE_API" && !huggingfaceInferenceApiModel) {
+        throw new Error(`invalid huggingfaceInferenceApiModel, you need to configure your RENDERING_HF_INFERENCE_API_BASE_MODEL in order to use the INFERENCE_API rendering engine`)
       }
-      if (renderingEngine === "INFERENCE_API" && !huggingFaceInferenceApiRefinerModel) {
-        throw new Error(`you need to configure your RENDERING_HF_INFERENCE_API_REFINER_MODEL in order to use the INFERENCE_API rendering engine`)
+      if (renderingEngine === "INFERENCE_API" && !huggingfaceInferenceApiModelRefinerModel) {
+        throw new Error(`invalid huggingfaceInferenceApiModelRefinerModel, you need to configure your RENDERING_HF_INFERENCE_API_REFINER_MODEL in order to use the INFERENCE_API rendering engine`)
       }
 
       const baseModelUrl = renderingEngine === "INFERENCE_ENDPOINT"
-        ? huggingFaceInferenceEndpointUrl
-        : `https://api-inference.huggingface.co/models/${huggingFaceInferenceApiBaseModel}`
+        ? huggingfaceApiUrl
+        : `https://api-inference.huggingface.co/models/${huggingfaceInferenceApiModel}`
 
       const positivePrompt = [
         "beautiful",
         // "intricate details",
+        huggingfaceInferenceApiModelTrigger || "",
         prompt,
         "award winning",
         "high resolution"
-      ].join(", ")
+      ].filter(x => x).join(", ")
 
       const res = await fetch(baseModelUrl, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
-          Authorization: `Bearer ${huggingFaceToken}`,
+          Authorization: `Bearer ${huggingfaceApiKey}`,
         },
         body: JSON.stringify({
           inputs: positivePrompt,
@@ -235,15 +293,13 @@ export async function newRender({
       
       if (renderingEngine === "INFERENCE_API") {
         try {
-          const refinerModelUrl = `https://api-inference.huggingface.co/models/${huggingFaceInferenceApiRefinerModel}`
-
-
+          const refinerModelUrl = `https://api-inference.huggingface.co/models/${huggingfaceInferenceApiModelRefinerModel}`
 
           const res = await fetch(refinerModelUrl, {
             method: "POST",
             headers: {
               "Content-Type": "application/json",
-              Authorization: `Bearer ${huggingFaceToken}`,
+              Authorization: `Bearer ${huggingfaceApiKey}`,
             },
             body: JSON.stringify({
               inputs: Buffer.from(blob).toString('base64'),
@@ -283,7 +339,6 @@ export async function newRender({
         }
       }
 
-
       return {
         renderId: uuidv4(),
         status: "completed",
@@ -341,13 +396,65 @@ export async function newRender({
   }
 }
 
-export async function getRender(renderId: string) {
+export async function getRender(renderId: string, settings: Settings) {
   if (!renderId) {
     const error = `cannot call the rendering API without a renderId, aborting..`
     console.error(error)
     throw new Error(error)
   }
 
+
+  let renderingEngine = serverRenderingEngine
+  let openaiApiKey = serverOpenaiApiKey
+  let openaiApiModel = serverOpenaiApiModel
+
+  let replicateApiKey = serverReplicateApiKey
+  let replicateApiModel = serverReplicateApiModel
+  let replicateApiModelVersion = serverReplicateApiModelVersion
+  let replicateApiModelTrigger = serverReplicateApiModelTrigger
+
+  let huggingfaceApiKey = serverHuggingfaceApiKey
+  let huggingfaceInferenceApiModel = serverHuggingfaceInferenceApiModel
+  let huggingfaceInferenceApiModelTrigger = serverHuggingfaceInferenceApiModelTrigger
+  let huggingfaceApiUrl = serverHuggingfaceApiUrl
+  let huggingfaceInferenceApiModelRefinerModel = serverHuggingfaceInferenceApiModelRefinerModel 
+
+  const placeholder = "<USE YOUR OWN TOKEN>"
+
+  if (
+    settings.renderingModelVendor === "OPENAI" && 
+    settings.openaiApiKey &&
+    settings.openaiApiKey !== placeholder &&
+    settings.openaiApiModel
+  ) {
+    renderingEngine = "OPENAI"
+    openaiApiKey = settings.openaiApiKey
+    openaiApiModel = settings.openaiApiModel
+  } if (
+    settings.renderingModelVendor === "REPLICATE" &&
+    settings.replicateApiKey &&
+    settings.replicateApiKey !== placeholder &&
+    settings.replicateApiModel &&
+    settings.replicateApiModelVersion
+  ) {
+    renderingEngine = "REPLICATE"
+    replicateApiKey = settings.replicateApiKey
+    replicateApiModel = settings.replicateApiModel
+    replicateApiModelVersion = settings.replicateApiModelVersion
+    replicateApiModelTrigger = settings.replicateApiModelTrigger
+  } else if (
+      settings.renderingModelVendor === "HUGGINGFACE" &&
+      settings.huggingfaceApiKey &&
+      settings.huggingfaceApiKey !== placeholder &&
+      settings.huggingfaceInferenceApiModel
+    ) {
+    // console.log("using Hugging Face using user credentials (hidden)")
+    renderingEngine = "INFERENCE_API"
+    huggingfaceApiKey = settings.huggingfaceApiKey
+    huggingfaceInferenceApiModel = settings.huggingfaceInferenceApiModel
+    huggingfaceInferenceApiModelTrigger = settings.huggingfaceInferenceApiModelTrigger
+  } 
+
   let defaulResult: RenderedScene = {
     renderId: "",
     status: "pending",
@@ -360,17 +467,14 @@ export async function getRender(renderId: string) {
 
   try {
     if (renderingEngine === "REPLICATE") {
-      if (!replicateToken) {
-        throw new Error(`you need to configure your AUTH_REPLICATE_API_TOKEN in order to use the REPLICATE rendering engine`)
-      }
-      if (!replicateModel) {
-        throw new Error(`you need to configure your RENDERING_REPLICATE_API_MODEL in order to use the REPLICATE rendering engine`)
+      if (!replicateApiKey) {
+        throw new Error(`invalid replicateApiKey, you need to configure your AUTH_REPLICATE_API_TOKEN in order to use the REPLICATE rendering engine`)
       }
 
        const res = await fetch(`https://api.replicate.com/v1/predictions/${renderId}`, {
         method: "GET",
         headers: {
-          Authorization: `Token ${replicateToken}`,
+          Authorization: `Token ${replicateApiKey}`,
         },
         cache: 'no-store',
       // we can also use this (see https://vercel.com/blog/vercel-cache-api-nextjs-cache)

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

@@ -7,6 +7,7 @@ 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"
 
 export function BottomBar() {
   const download = useStore(state => state.download)
@@ -88,21 +89,16 @@ export function BottomBar() {
       `space-x-3`,
       `scale-[0.9]`
     )}>
-      <div>
-        {
-       // there is an issue, this env check doesn't work..
-        // process.env.NEXT_PUBLIC_CAN_UPSCALE === "true" ?
-        <Button
-          onClick={handleUpscale}
-          disabled={!prompt?.length || remainingImages > 0 || isUpscaling || !Object.values(upscaleQueue).length}
-        >
-          {isUpscaling
+      <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>
-        // : null
-      }
-      </div>
+      </Button>
+
         {/*
         <div>
           <Button

src/app/interface/panel/index.tsx

@@ -13,6 +13,7 @@ import { getInitialRenderedScene } from "@/lib/getInitialRenderedScene"
 import { Progress } from "@/app/interface/progress"
 import { EditModal } from "../edit-modal"
 import { Bubble } from "./bubble"
+import { getSettings } from "../settings-dialog/getSettings"
 
 export function Panel({
   page,
@@ -124,7 +125,8 @@ export function Panel({
 
             // TODO: here we never reset the revision, so only the first user
             // comic will be cached (we should fix that later)
-            withCache: revision === 0
+            withCache: revision === 0,
+            settings: getSettings(),
           })
         } catch (err) {
           // "Failed to load the panel! Don't worry, we are retrying..")
@@ -133,6 +135,7 @@ export function Panel({
             width,
             height,
             withCache,
+            settings: getSettings(),
           })
         }
 
@@ -174,7 +177,7 @@ export function Panel({
 
       try {
         setGeneratingImages(panelId, true)
-        const newRendered = await getRender(renderedRef.current.renderId)
+        const newRendered = await getRender(renderedRef.current.renderId, getSettings())
 
         if (JSON.stringify(renderedRef.current) !== JSON.stringify(newRendered)) {
           setRendered(panelId, renderedRef.current = newRendered)
@@ -191,6 +194,7 @@ export function Panel({
               width,
               height,
               withCache: false,
+              settings: getSettings(),
             })
             setRendered(panelId, newAttempt)
           } catch (err) {

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

@@ -0,0 +1,14 @@
+import { RenderingModelVendor, Settings } from "@/types"
+
+export const defaultSettings: Settings = {
+  renderingModelVendor: "SERVER" as RenderingModelVendor,
+  huggingfaceApiKey: "<USE YOUR OWN TOKEN>",
+  huggingfaceInferenceApiModel: "stabilityai/stable-diffusion-xl-base-1.0",
+  huggingfaceInferenceApiModelTrigger: "",
+  replicateApiKey: "<USE YOUR OWN TOKEN>",
+  replicateApiModel: "stabilityai/sdxl",
+  replicateApiModelVersion: "da77bc59ee60423279fd632efb4795ab731d9e3ca9705ef3341091fb989b7eaf",
+  replicateApiModelTrigger: "style of TOK",
+  openaiApiKey: "<USE YOUR OWN TOKEN>",
+  openaiApiModel: "dall-e-3",
+}

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

@@ -0,0 +1,7 @@
+import { ReactNode } from "react"
+
+export function Field({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex flex-col space-y-2">{children}</div>
+  )
+}

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

@@ -0,0 +1,26 @@
+import { RenderingModelVendor, Settings } from "@/types"
+
+import { getValidString } from "@/lib/getValidString"
+import { localStorageKeys } from "./localStorageKeys"
+import { defaultSettings } from "./defaultSettings"
+
+export function getSettings(): Settings {
+  try {
+    return {
+      renderingModelVendor: getValidString(localStorage?.getItem?.(localStorageKeys.renderingModelVendor), defaultSettings.renderingModelVendor) as RenderingModelVendor,
+      huggingfaceApiKey: getValidString(localStorage?.getItem?.(localStorageKeys.huggingfaceApiKey), defaultSettings.huggingfaceApiKey),
+      huggingfaceInferenceApiModel: getValidString(localStorage?.getItem?.(localStorageKeys.huggingfaceInferenceApiModel), defaultSettings.huggingfaceInferenceApiModel),
+      huggingfaceInferenceApiModelTrigger: getValidString(localStorage?.getItem?.(localStorageKeys.huggingfaceInferenceApiModelTrigger), defaultSettings.huggingfaceInferenceApiModelTrigger),
+      replicateApiKey: getValidString(localStorage?.getItem?.(localStorageKeys.replicateApiKey), defaultSettings.replicateApiKey),
+      replicateApiModel: getValidString(localStorage?.getItem?.(localStorageKeys.replicateApiModel), defaultSettings.replicateApiModel),
+      replicateApiModelVersion: getValidString(localStorage?.getItem?.(localStorageKeys.replicateApiModelVersion), defaultSettings.replicateApiModelVersion),
+      replicateApiModelTrigger: getValidString(localStorage?.getItem?.(localStorageKeys.replicateApiModelTrigger), defaultSettings.replicateApiModelTrigger),
+      openaiApiKey: getValidString(localStorage?.getItem?.(localStorageKeys.openaiApiKey), defaultSettings.openaiApiKey),
+      openaiApiModel: getValidString(localStorage?.getItem?.(localStorageKeys.openaiApiModel), defaultSettings.openaiApiModel),
+    }
+  } catch (err) {
+    return {
+      ...defaultSettings
+    }
+  }
+}

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

@@ -0,0 +1,229 @@
+import { useState } from "react"
+import { useLocalStorage } from 'usehooks-ts'
+
+import { Button } from "@/components/ui/button"
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+
+import { RenderingModelVendor } from "@/types"
+import { Input } from "@/components/ui/input"
+
+import { Label } from "./label"
+import { Field } from "./field"
+import { localStorageKeys } from "./localStorageKeys"
+import { defaultSettings } from "./defaultSettings"
+
+export function SettingsDialog() {
+  const [isOpen, setOpen] = useState(false)
+  const [renderingModelVendor, setRenderingModelVendor] = useLocalStorage<RenderingModelVendor>(
+    localStorageKeys.renderingModelVendor,
+    defaultSettings.renderingModelVendor
+  )
+  const [huggingfaceApiKey, setHuggingfaceApiKey] = useLocalStorage<string>(
+    localStorageKeys.huggingfaceApiKey,
+    defaultSettings.huggingfaceApiKey
+  )
+  const [huggingfaceInferenceApiModel, setHuggingfaceInferenceApiModel] = useLocalStorage<string>(
+    localStorageKeys.huggingfaceInferenceApiModel,
+    defaultSettings.huggingfaceInferenceApiModel
+  )
+  const [huggingfaceInferenceApiModelTrigger, setHuggingfaceInferenceApiModelTrigger] = useLocalStorage<string>(
+    localStorageKeys.huggingfaceInferenceApiModelTrigger,
+    defaultSettings.huggingfaceInferenceApiModelTrigger
+  )
+  const [replicateApiKey, setReplicateApiKey] = useLocalStorage<string>(
+    localStorageKeys.replicateApiKey,
+    defaultSettings.replicateApiKey
+  )
+  const [replicateApiModel, setReplicateApiModel] = useLocalStorage<string>(
+    localStorageKeys.replicateApiModel,
+    defaultSettings.replicateApiModel
+  )
+  const [replicateApiModelVersion, setReplicateApiModelVersion] = useLocalStorage<string>(
+    localStorageKeys.replicateApiModelVersion,
+    defaultSettings.replicateApiModelVersion
+  )
+  const [replicateApiModelTrigger, setReplicateApiModelTrigger] = useLocalStorage<string>(
+    localStorageKeys.replicateApiModelTrigger,
+    defaultSettings.replicateApiModelTrigger
+  )
+  const [openaiApiKey, setOpenaiApiKey] = useLocalStorage<string>(
+    localStorageKeys.openaiApiKey,
+    defaultSettings.openaiApiKey
+  )
+  const [openaiApiModel, setOpenaiApiModel] = useLocalStorage<string>(
+    localStorageKeys.openaiApiModel,
+    defaultSettings.openaiApiModel
+  )
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button className="space-x-1 md:space-x-2">
+          <div>
+            <span className="hidden md:inline">Settings</span>
+          </div>
+        </Button> 
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogDescription className="w-full text-center text-lg font-bold text-stone-800">
+            Custom Settings
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-1 space-y-1 text-stone-800">
+          <p className="text-sm text-zinc-700">
+            Note: most vendors have a warm-up delay when using a custom or rarely used model. Do not hesitate to try again after 5 minutes if that happens.
+          </p>
+          <p className="text-sm text-zinc-700">
+            Security note: we do not save those settings on our side, instead they are stored inside your web browser, using the local storage.
+          </p>
+          <Field>
+            <Label>Image vendor:</Label>
+            <Select
+              onValueChange={(value: string) => {
+                setRenderingModelVendor(value as RenderingModelVendor)
+              }}
+              defaultValue={renderingModelVendor}>
+              <SelectTrigger className="">
+                <SelectValue placeholder="Theme" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="SERVER">Use server settings (default, recommended)</SelectItem>
+                <SelectItem value="HUGGINGFACE">Custom Hugging Face model (expert users)</SelectItem>
+                <SelectItem value="REPLICATE">Custom Replicate model (expert users)</SelectItem>
+                <SelectItem value="OPENAI">DALL·E 3 by OpenAI (partial support, in alpha)</SelectItem>
+              </SelectContent>
+            </Select>
+          </Field>
+
+          {renderingModelVendor === "HUGGINGFACE" && <>
+            <Field>
+              <Label>Hugging Face API Token:</Label>
+              <Input
+                className="font-mono"
+                type="password"
+                placeholder="Enter your private api token"
+                onChange={(x) => {
+                  setHuggingfaceApiKey(x.target.value)
+                }}
+                value={huggingfaceApiKey}
+              />
+            </Field>
+            <Field>
+              <Label>Hugging Face Inference API model:</Label>
+              <Input
+                className="font-mono"
+                placeholder="Name of the Inference API model"
+                onChange={(x) => {
+                  setHuggingfaceInferenceApiModel(x.target.value)
+                }}
+                value={huggingfaceInferenceApiModel}
+              />
+            </Field>
+            <p className="text-sm text-zinc-700">
+              Using a LoRA? Don&apos;t forget the trigger keyword! Also you will want to use the &quot;Neutral&quot; style.
+            </p>
+            <Field>
+              <Label>LoRA model trigger (optional):</Label>
+              <Input
+                className="font-mono"
+                placeholder="Trigger keyword (if you use a LoRA)"
+                onChange={(x) => {
+                  setHuggingfaceInferenceApiModelTrigger(x.target.value)
+                }}
+                value={huggingfaceInferenceApiModelTrigger}
+              />
+              </Field>
+          </>}
+
+          {renderingModelVendor === "OPENAI" && <>
+            <Field>
+              <Label>OpenAI API Token:</Label>
+              <Input
+                className="font-mono"
+                type="password"
+                placeholder="Enter your private api token"
+                onChange={(x) => {
+                  setOpenaiApiKey(x.target.value)
+                }}
+                value={openaiApiKey}
+              />
+            </Field>
+            <Field>
+              <Label>OpenAI image model:</Label>
+              <Input
+                className="font-mono"
+                placeholder="OpenAI image model"
+                onChange={(x) => {
+                  setOpenaiApiModel(x.target.value)
+                }}
+                value={openaiApiModel}
+              />
+            </Field>
+          </>}
+
+          {renderingModelVendor === "REPLICATE" && <>
+              <Field>
+                <Label>Replicate API Token:</Label>
+                <Input
+                  className="font-mono"
+                  type="password"
+                  placeholder="Enter your private api token"
+                  onChange={(x) => {
+                    setReplicateApiKey(x.target.value)
+                  }}
+                  value={replicateApiKey}
+                />
+              </Field>
+              <Field>
+                <Label>Replicate model name:</Label>
+                <Input
+                  className="font-mono"
+                  placeholder="Name of the Replicate model"
+                  onChange={(x) => {
+                    setReplicateApiModel(x.target.value)
+                  }}
+                  value={replicateApiModel}
+                />
+              </Field>
+              <Field>
+                <Label>Model version:</Label>
+                <Input
+                  className="font-mono"
+                  placeholder="Version of the Replicate model"
+                  onChange={(x) => {
+                    setReplicateApiModelVersion(x.target.value)
+                  }}
+                  value={replicateApiModelVersion}
+                />
+              </Field>
+              <p className="text-sm text-zinc-700">
+                Using a LoRA? Don&apos;t forget the trigger keyword! Also you will want to use the &quot;Neutral&quot; style.
+              </p>
+              <Field>
+                <Label>LoRA model trigger (optional):</Label>
+                <Input
+                  className="font-mono"
+                  placeholder={'LoRA trigger keyword eg. "style of TOK"'}
+                  onChange={(x) => {
+                    setReplicateApiModelTrigger(x.target.value)
+                  }}
+                  value={replicateApiModelTrigger}
+                />
+              </Field>
+            </>}
+        </div>
+        <DialogFooter>
+          <Button type="submit" onClick={() => setOpen(false)}>Close</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

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

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

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

@@ -0,0 +1,14 @@
+import { Settings } from "@/types"
+
+export const localStorageKeys: Record<keyof Settings, string> = {
+  renderingModelVendor: "CONF_RENDERING_MODEL_VENDOR",
+  huggingfaceApiKey: "CONF_AUTH_HF_API_TOKEN",
+  huggingfaceInferenceApiModel: "CONF_RENDERING_HF_INFERENCE_API_BASE_MODEL",
+  huggingfaceInferenceApiModelTrigger: "CONF_RENDERING_HF_INFERENCE_API_BASE_MODEL_TRIGGER",
+  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",
+}

src/app/interface/share/index.tsx

@@ -88,26 +88,7 @@ ${comicFileMd}`;
     const paramsStr = params.toString();
     window.open(`https://huggingface.co/spaces/jbilcke-hf/comic-factory/discussions/new?${paramsStr}`, '_blank');
   }
-
-  <div>
-    {
-    // there is an issue, this env check doesn't work..
-    // process.env.NEXT_PUBLIC_ENABLE_COMMUNITY_SHARING === "true" ? 
-    <Button
-      onClick={handleShare}
-      disabled={!prompt?.length}
-      className="space-x-2"
-    >
-      <div className="scale-105"><HuggingClap /></div>
-      <div>
-        <span className="hidden md:inline">{remainingImages ? `⌛` : `Share to community`}</span>
-        <span className="inline md:hidden">{remainingImages ? `⌛` : `Share`}</span>
-      </div>
-    </Button> 
-    //: null
-  }
-  </div>
-
+  
   return (
     <Dialog open={isOpen} onOpenChange={setOpen}>
       <DialogTrigger asChild>

src/app/main.tsx

@@ -52,7 +52,11 @@ export default function Main() {
           preset,
           prompt: [
             `${userStoryPrompt}`,
-            stylePrompt ? `in the following context: ${stylePrompt}` : ''
+
+            // not necessary + it confuses the LLM if we use custom 
+            // + the LLM may reject some of the styles
+            // stylePrompt ? `in the following context: ${stylePrompt}` : ''
+
           ].filter(x => x).join(", "), nbTotalPanels })
         console.log("LLM responded:", llmResponse)
 

src/lib/getValidString.ts

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

src/types.ts

@@ -87,13 +87,19 @@ export type LLMEngine =
   | "OPENAI"
   | "REPLICATE"
 
-export type RenderingEngine =
+  export type RenderingEngine =
   | "VIDEOCHAIN"
   | "OPENAI"
   | "REPLICATE"
   | "INFERENCE_API"
   | "INFERENCE_ENDPOINT"
 
+  export type RenderingModelVendor =
+  | "SERVER"
+  | "OPENAI"
+  | "REPLICATE"
+  | "HUGGINGFACE"
+
 export type PostVisibility =
   | "featured" // featured by admins
   | "trending" // top trending / received more than 10 upvotes
@@ -133,3 +139,16 @@ export type LayoutProps = {
   page: number
   nbPanels: number
 }
+
+export type Settings = {
+  renderingModelVendor: RenderingModelVendor
+  huggingfaceApiKey: string
+  huggingfaceInferenceApiModel: string
+  huggingfaceInferenceApiModelTrigger: string
+  replicateApiKey: string
+  replicateApiModel: string
+  replicateApiModelVersion: string
+  replicateApiModelTrigger: string
+  openaiApiKey: string
+  openaiApiModel: string
+}