pls1

.env

@@ -11,7 +11,6 @@ RENDERING_ENGINE="INFERENCE_API"
 # - INFERENCE_API
 # - OPENAI
 # - GROQ
-# - ANTHROPIC
 LLM_ENGINE="INFERENCE_API"
 
 # set this to control the number of pages
@@ -24,8 +23,6 @@ NEXT_PUBLIC_ENABLE_RATE_LIMITER="false"
 ENABLE_HUGGING_FACE_OAUTH=
 ENABLE_HUGGING_FACE_OAUTH_WALL=
 HUGGING_FACE_OAUTH_CLIENT_ID=
-
-# in production this should be the space's domain and/or URL
 HUGGING_FACE_OAUTH_REDIRECT_URL=
 
 # this one must be kept secret (and is unused for now)
@@ -49,22 +46,19 @@ AUTH_VIDEOCHAIN_API_TOKEN=
 # Groq.com key: available for the LLM engine
 AUTH_GROQ_API_KEY=
 
-# Anthropic.com key: available for the LLM engine
-AUTH_ANTHROPIC_API_KEY=
-
 # ------------- RENDERING API CONFIG --------------
 
-# If you decide to use Replicate for the RENDERING engine
+# If you decided to use Replicate for the RENDERING engine
 RENDERING_REPLICATE_API_MODEL="stabilityai/sdxl"
 RENDERING_REPLICATE_API_MODEL_VERSION="da77bc59ee60423279fd632efb4795ab731d9e3ca9705ef3341091fb989b7eaf"
 
-# If you decide to use a private Hugging Face Inference Endpoint for the RENDERING engine
+# If you decided to use a private Hugging Face Inference Endpoint for the RENDERING engine
 RENDERING_HF_INFERENCE_ENDPOINT_URL="https://XXXXXXXXXX.endpoints.huggingface.cloud"
 
-# If you decide to use a Hugging Face Inference API model for the RENDERING engine
+# If you decided to use a Hugging Face Inference API model for the RENDERING engine
 RENDERING_HF_INFERENCE_API_BASE_MODEL="stabilityai/stable-diffusion-xl-base-1.0"
 
-# If you decide to use a Hugging Face Inference API model for the RENDERING engine
+# If you decided to use a Hugging Face Inference API model for the RENDERING engine
 RENDERING_HF_INFERENCE_API_REFINER_MODEL="stabilityai/stable-diffusion-xl-refiner-1.0"
 
 # If your model returns a different file type (eg. jpg or webp) change it here
@@ -80,18 +74,14 @@ RENDERING_OPENAI_API_MODEL="dall-e-3"
 
 LLM_GROQ_API_MODEL="mixtral-8x7b-32768"
 
-# If you decide to use OpenAI for the LLM engine
+# If you decided to use OpenAI for the LLM engine
 LLM_OPENAI_API_BASE_URL="https://api.openai.com/v1"
-LLM_OPENAI_API_MODEL="gpt-4-turbo"
-
-# If you decide to use Anthropic (eg. Claude) for the LLM engine
-# https://docs.anthropic.com/claude/docs/models-overview
-LLM_ANTHROPIC_API_MODEL="claude-3-opus-20240229"
+LLM_OPENAI_API_MODEL="gpt-4"
 
-# If you decide to use a private Hugging Face Inference Endpoint for the LLM engine
+# If you decided to use a private Hugging Face Inference Endpoint for the LLM engine
 LLM_HF_INFERENCE_ENDPOINT_URL=""
 
-# If you decide to use a Hugging Face Inference API model for the LLM engine
+# If you decided to use a Hugging Face Inference API model for the LLM engine
 # LLM_HF_INFERENCE_API_MODEL="HuggingFaceH4/zephyr-7b-beta"
 LLM_HF_INFERENCE_API_MODEL="HuggingFaceH4/zephyr-7b-beta"
 

.nvmrc

@@ -1 +1 @@
-v20.17.0
+v20.9.0

README.md

@@ -6,7 +6,7 @@ colorTo: yellow
 sdk: docker
 pinned: true
 app_port: 3000
-disable_embedding: false
+disable_embedding: true
 short_description: Create your own AI comic with a single prompt
 hf_oauth: true
 hf_oauth_expiration_minutes: 43200
@@ -31,14 +31,13 @@ it requires various components to run for the frontend, backend, LLM, SDXL etc.
 If you try to duplicate the project, open the `.env` you will see it requires some variables.
 
 Provider config:
-- `LLM_ENGINE`: can be one of `INFERENCE_API`, `INFERENCE_ENDPOINT`, `OPENAI`, `GROQ`, `ANTHROPIC`
+- `LLM_ENGINE`: can be one of: "INFERENCE_API", "INFERENCE_ENDPOINT", "OPENAI", or "GROQ"
 - `RENDERING_ENGINE`: can be one of: "INFERENCE_API", "INFERENCE_ENDPOINT", "REPLICATE", "VIDEOCHAIN", "OPENAI" for now, unless you code your custom solution
 
 Auth config:
 - `AUTH_HF_API_TOKEN`:  if you decide to use Hugging Face for the LLM engine (inference api model or a custom inference endpoint)
 - `AUTH_OPENAI_API_KEY`: to use OpenAI for the LLM engine
 - `AUTH_GROQ_API_KEY`: to use Groq for the LLM engine
-- `AUTH_ANTHROPIC_API_KEY`: to use Anthropic (Claude) for the LLM engine
 - `AUTH_VIDEOCHAIN_API_TOKEN`: secret token to access the VideoChain API server
 - `AUTH_REPLICATE_API_TOKEN`: in case you want to use Replicate.com
 
@@ -55,9 +54,8 @@ Language model config (depending on the LLM engine you decide to use):
 - `LLM_HF_INFERENCE_ENDPOINT_URL`: "<use your own>"
 - `LLM_HF_INFERENCE_API_MODEL`: "HuggingFaceH4/zephyr-7b-beta"
 - `LLM_OPENAI_API_BASE_URL`: "https://api.openai.com/v1"
-- `LLM_OPENAI_API_MODEL`: "gpt-4-turbo"
+- `LLM_OPENAI_API_MODEL`: "gpt-4"
 - `LLM_GROQ_API_MODEL`: "mixtral-8x7b-32768"
-- `LLM_ANTHROPIC_API_MODEL`: "claude-3-opus-20240229"
 
 In addition, there are some community sharing variables that you can just ignore.
 Those variables are not required to run the AI Comic Factory on your own website or computer
@@ -78,7 +76,7 @@ To customise a variable locally, you should create a `.env.local`
 
 Currently the AI Comic Factory uses [zephyr-7b-beta](https://huggingface.co/HuggingFaceH4/zephyr-7b-beta) through an [Inference Endpoint](https://huggingface.co/docs/inference-endpoints/index).
 
-You have multiple options:
+You have three options:
 
 ### Option 1: Use an Inference API model
 
@@ -123,7 +121,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-4-turbo"
+LLM_OPENAI_API_MODEL="gpt-3.5-turbo"
 
 AUTH_OPENAI_API_KEY="Yourown OpenAI API Key"
 ```
@@ -136,17 +134,8 @@ LLM_GROQ_API_MODEL="mixtral-8x7b-32768"
 
 AUTH_GROQ_API_KEY="Your own GROQ API Key"
 ```
-### Option 5: (new, experimental) use Anthropic (Claude)
 
-```bash
-LLM_ENGINE="ANTHROPIC"
-
-LLM_ANTHROPIC_API_MODEL="claude-3-opus-20240229"
-
-AUTH_ANTHROPIC_API_KEY="Your own ANTHROPIC API Key"
-```
-
-### Option 6: Fork and modify the code to use a different LLM system
+### Option 5: Fork and modify the code to use a different LLM system
 
 Another option could be to disable the LLM completely and replace it with another LLM protocol and/or provider (eg. Claude, Replicate), or a human-generated story instead (by returning mock or static data).
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbilcke/comic-factory",
-  "version": "1.2.3",
+  "version": "1.2.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -9,11 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@aitube/clap": "0.2.4",
-    "@anthropic-ai/sdk": "^0.25.0",
-    "@huggingface/hub": "^0.15.1",
-    "@huggingface/inference": "^2.0.0",
-    "@mediapipe/tasks-vision": "0.10.15",
+    "@huggingface/hub": "^0.14.2",
+    "@huggingface/inference": "^2.6.1",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-avatar": "^1.0.3",
     "@radix-ui/react-checkbox": "^1.0.4",
@@ -32,8 +29,8 @@
     "@radix-ui/react-toast": "^1.1.4",
     "@radix-ui/react-tooltip": "^1.0.6",
     "@types/node": "20.4.2",
-    "@types/react": "18.3.0",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "18.2.15",
+    "@types/react-dom": "18.2.7",
     "@types/uuid": "^9.0.2",
     "autoprefixer": "10.4.18",
     "class-variance-authority": "^0.6.1",
@@ -46,37 +43,31 @@
     "eslint-config-next": "13.4.10",
     "groq-sdk": "^0.3.1",
     "html2canvas": "^1.4.1",
-    "i": "^0.3.7",
     "konva": "^9.2.2",
     "lucide-react": "^0.260.0",
-    "next": "14.2.7",
-    "npm": "^10.7.0",
+    "next": "14.1.4",
     "openai": "^4.29.2",
     "pick": "^0.0.1",
     "postcss": "8.4.37",
-    "query-string": "^9.0.0",
-    "react": "18.3.1",
+    "react": "18.2.0",
     "react-circular-progressbar": "^2.1.0",
     "react-contenteditable": "^3.3.7",
-    "react-dom": "18.3.1",
+    "react-dom": "18.2.0",
     "react-draggable": "^4.4.6",
-    "react-hook-consent": "^3.5.3",
     "react-icons": "^4.11.0",
     "react-konva": "^18.2.10",
     "react-virtualized-auto-sizer": "^1.0.20",
-    "replicate": "^0.32.0",
+    "replicate": "^0.29.0",
     "sbd": "^1.0.19",
-    "sharp": "^0.33.4",
+    "sharp": "^0.33.2",
     "tailwind-merge": "^2.2.2",
     "tailwindcss": "3.4.1",
     "tailwindcss-animate": "^1.0.6",
     "ts-node": "^10.9.1",
-    "typescript": "^5.4.5",
-    "use-file-picker": "^2.1.2",
-    "usehooks-ts": "2.9.1",
+    "typescript": "5.1.6",
+    "usehooks-ts": "^2.9.1",
     "uuid": "^9.0.0",
-    "yaml": "^2.4.5",
-    "zustand": "^4.5.1"
+    "zustand": "^4.4.1"
   },
   "devDependencies": {
     "@types/qs": "^6.9.7",

src/app/engine/render.ts

@@ -84,8 +84,6 @@ export async function newRender({
 
   const placeholder = "<USE YOUR OWN TOKEN>"
 
-  const negativePrompt = "speech bubble, caption, subtitle"
-
   // console.log("settings:", JSON.stringify(settings, null, 2))
 
   if (
@@ -189,21 +187,20 @@ export async function newRender({
         segments: []
       } as RenderedScene
     } else if (renderingEngine === "REPLICATE") {
-      if (!replicateApiKey || `${replicateApiKey || ""}`.length < 8) {
+      if (!replicateApiKey) {
         throw new Error(`invalid replicateApiKey, you need to configure your REPLICATE_API_TOKEN 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 (!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: replicateApiKey })
 
       const seed = generateSeed()
       const prediction = await replicate.predictions.create({
-        model: replicateApiModelVersion
-          ? `${replicateApiModel}:${replicateApiModelVersion}`
-          : `${replicateApiModel}`,
+        version: replicateApiModelVersion,
         input: {
           prompt: [
             "beautiful",
@@ -224,7 +221,7 @@ export async function newRender({
   
       // no need to reply straight away as images take time to generate, this isn't instantaneous
       // also our friends at Replicate won't like it if we spam them with requests
-      await sleep(1000)
+      await sleep(4000)
 
       return {
         renderId: prediction.id,
@@ -245,6 +242,9 @@ export async function newRender({
       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" && !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"
         ? huggingfaceApiUrl
@@ -301,7 +301,7 @@ export async function newRender({
       // note: there is no "refiner" step yet for custom inference endpoint
       // you probably don't need it anyway, as you probably want to deploy an all-in-one model instead for perf reasons
       
-      if (renderingEngine === "INFERENCE_API" && huggingfaceInferenceApiModelRefinerModel) {
+      if (renderingEngine === "INFERENCE_API") {
         try {
           const refinerModelUrl = `https://api-inference.huggingface.co/models/${huggingfaceInferenceApiModelRefinerModel}`
 
@@ -315,7 +315,6 @@ export async function newRender({
               inputs: Buffer.from(blob).toString('base64'),
               parameters: {
                 prompt: positivePrompt,
-                negative_prompt: negativePrompt,
                 num_inference_steps: nbInferenceSteps,
                 guidance_scale: guidanceScale,
                 width,
@@ -370,10 +369,7 @@ export async function newRender({
         },
         body: JSON.stringify({
           prompt,
-          negativePrompt,
-
-          // for a future version of the comic factory
-          identityImage: "",
+          // negativePrompt, unused for now
 
           nbFrames,
 

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.6`
-const APP_RELEASE_DATE = `August 2024`
+const APP_VERSION = `1.2`
+const APP_RELEASE_DATE = `March 2024`
 
 const ExternalLink = ({ url, children }: { url: string; children: ReactNode }) => {
   return (
@@ -27,12 +27,13 @@ export function About() {
     <Dialog open={isOpen} onOpenChange={setOpen}>
       <DialogTrigger asChild>
         <Button variant="outline">
-          <span className="hidden md:inline">About</span>
-          <span className="inline md:hidden">?</span>
+          <span className="hidden md:inline">{APP_NAME.replaceAll(" ", "-")} {APP_VERSION}</span>
+          <span className="inline md:hidden">Version {APP_VERSION}</span>
         </Button>
       </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/{advert → ai-clip-factory}/index.tsx

@@ -1,15 +1,15 @@
 import { Button } from "@/components/ui/button"
 
-export function Advert() {
+export function AIClipFactory() {
   return (
     <Button
       variant="outline"
-      className="bg-yellow-400 border-stone-600/30 hover:bg-yellow-300"
+      className="bg-yellow-300"
       onClick={() => {
-        window.open("https://huggingface.co/spaces/jbilcke-hf/ai-stories-factory", "_blank")
+        window.open("https://huggingface.co/spaces/jbilcke-hf/ai-clip-factory?postId=f63df23d-de2f-4dee-961c-a56f160dd159&prompt=pikachu%2C+working+on+a+computer%2C+office%2C+serious%2C+typing%2C+keyboard&model=TheLastBen%2FPikachu_SDXL", "_blank")
       }}>
-      <span className="hidden md:inline">Make AI stories</span>
-      <span className="inline md:hidden">...</span>
+      <span className="hidden md:inline">Try the clip factory!</span>
+      <span className="inline md:hidden">Clips</span>
     </Button>
   )
 }

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

@@ -2,31 +2,22 @@
 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-[800px]">
-        <div className="grid gap-4 py-4 text-stone-800 text-center text-xl">
+      <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 compatible with many vendors.
+          The AI Comic Factory is a free app available to all Hugging Face users!
         </p>
         <p>
-          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 👇
+          Please sign-in to continue:
          </p>
          <p>
           <Login />
          </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>
+         <p>(temporary issue alert: if this doesn&apos;t work for you, please use the button in the About panel)</p>
         </div>
       </DialogContent>
     </Dialog>

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

@@ -1,5 +1,4 @@
 import { startTransition, useEffect, useState } from "react"
-import { useFilePicker } from 'use-file-picker'
 
 import { useStore } from "@/app/store"
 import { Button } from "@/components/ui/button"
@@ -9,43 +8,32 @@ import { sleep } from "@/lib/sleep"
 
 import { Share } from "../share"
 import { About } from "../about"
-import { Discord } from "../discord"
 import { SettingsDialog } from "../settings-dialog"
 import { useLocalStorage } from "usehooks-ts"
 import { localStorageKeys } from "../settings-dialog/localStorageKeys"
 import { defaultSettings } from "../settings-dialog/defaultSettings"
-import { getParam } from "@/lib/getParam"
-import { Advert } from "../advert"
-
 
 function BottomBar() {
   // deprecated, as HTML-to-bitmap didn't work that well for us
-  // const page = useStore(s => s.page)
-  // const download = useStore(s => s.download)
-  // const pageToImage = useStore(s => s.pageToImage)
+  // const page = useStore(state => state.page)
+  // const download = useStore(state => state.download)
+  // const pageToImage = useStore(state => state.pageToImage)
 
-  const isGeneratingStory = useStore(s => s.isGeneratingStory)
-  const prompt = useStore(s => s.prompt)
-  const panelGenerationStatus = useStore(s => s.panelGenerationStatus)
+  const isGeneratingStory = useStore(state => state.isGeneratingStory)
+  const prompt = useStore(state => state.prompt)
+  const panelGenerationStatus = useStore(state => state.panelGenerationStatus)
 
-  const preset = useStore(s => s.preset)
-  
-  const canSeeBetaFeatures = false // getParam<boolean>("beta", false)
+  const preset = useStore(state => state.preset)
 
   const allStatus = Object.values(panelGenerationStatus)
   const remainingImages = allStatus.reduce((acc, s) => (acc + (s ? 1 : 0)), 0)
 
-  const currentClap = useStore(s => s.currentClap)
-  
-  const upscaleQueue = useStore(s => s.upscaleQueue)
-  const renderedScenes = useStore(s => s.renderedScenes)
-  const removeFromUpscaleQueue = useStore(s => s.removeFromUpscaleQueue)
-  const setRendered = useStore(s => s.setRendered)
+  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 loadClap = useStore(s => s.loadClap)
-  const downloadClap = useStore(s => s.downloadClap)
-
   const [hasGeneratedAtLeastOnce, setHasGeneratedAtLeastOnce] = useLocalStorage<boolean>(
     localStorageKeys.hasGeneratedAtLeastOnce,
     defaultSettings.hasGeneratedAtLeastOnce
@@ -93,27 +81,6 @@ function BottomBar() {
     }
   }, [hasFinishedGeneratingImages, hasGeneratedAtLeastOnce])
 
-  const { openFilePicker, filesContent } = useFilePicker({
-    accept: '.clap',
-    readAs: "ArrayBuffer"
-  })
-  const fileData = filesContent[0]
-
-  useEffect(() => {
-    const fn = async () => {
-      if (fileData?.name) {
-        try {
-          const blob = new Blob([fileData.content])
-          await loadClap(blob)
-        } catch (err) {
-          console.error("failed to load the Clap file:", err)
-        }
-      }
-    }
-    fn()
-  }, [fileData?.name])
-
-
   return (
     <div className={cn(
       `print:hidden`,
@@ -132,8 +99,10 @@ function BottomBar() {
         `scale-[0.9]`
       )}>
         <About />
-        <Discord />
-        <Advert />
+       {/* 
+       Thank you clip factory for your service 🫡
+       <AIClipFactory />
+       */}
       </div>
       <div className={cn(
       `flex flex-row`,
@@ -176,30 +145,18 @@ function BottomBar() {
            </Button>
         </div>
           */}
-          {canSeeBetaFeatures ? <Button
-            onClick={openFilePicker}
-            disabled={remainingImages > 0}
-          >Load</Button> : null}
-          {canSeeBetaFeatures ? <Button
-            onClick={downloadClap}
-            disabled={remainingImages > 0}
-          >
-          {remainingImages ? `${allStatus.length - remainingImages}/${allStatus.length} ⌛` : `Save`}
-        </Button> : null}
-     
           <Button
             onClick={handlePrint}
             disabled={!prompt?.length}
           >
             <span className="hidden md:inline">{
-            remainingImages ? `${allStatus.length - remainingImages}/${allStatus.length} panels ⌛` : `Get PDF`
+            remainingImages ? `${allStatus.length - remainingImages}/${allStatus.length} panels ⌛` : `Save PDF`
             }</span>
             <span className="inline md:hidden">{
-              remainingImages ? `${allStatus.length - remainingImages}/${allStatus.length} ⌛` : `PDF`
+              remainingImages ? `${allStatus.length - remainingImages}/${allStatus.length} ⌛` : `Save`
             }</span>
         </Button>
-  
-       <Share />
+        <Share />
       </div>
     </div>
   )

src/app/interface/discord/index.tsx

@@ -1,20 +0,0 @@
-import { FaDiscord } from "react-icons/fa"
-
-
-export function Discord() {
-  return (
-    <a
-      className="
-      flex flex-row items-center justify-center
-      h-10
-      no-underline
-      animation-all duration-150 ease-in-out
-      text-stone-700 hover:text-stone-950 scale-95 hover:scale-100"
-      href="https://discord.gg/AEruz9B92B"
-      target="_blank">
-      <div><FaDiscord size={24} /></div>
-      <span className="text-sm ml-1.5 hidden md:inline">Discord</span>
-      <span className="text-sm ml-1.5 inline md:hidden"></span>
-    </a>
-  )
-}

src/app/interface/grid/index.tsx

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

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} className="text-xl">Sign-in with Hugging Face</Button>
+  return <Button onClick={login}>Sign-in with Hugging Face</Button>
 }
 
 export default Login

src/app/interface/page/index.tsx

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

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

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

src/app/interface/panel/index.tsx

@@ -2,23 +2,22 @@
 
 import { useEffect, useRef, useState, useTransition } from "react"
 import { RxReload, RxPencil2 } from "react-icons/rx"
-import { useLocalStorage } from "usehooks-ts"
 
 import { RenderedScene, RenderingModelVendor } from "@/types"
+
 import { getRender, newRender } from "@/app/engine/render"
 import { useStore } from "@/app/store"
-import { injectSpeechBubbleInTheBackground } from "@/lib/bubble/injectSpeechBubbleInTheBackground"
+
 import { cn } from "@/lib/utils"
 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"
+import { useLocalStorage } from "usehooks-ts"
 import { localStorageKeys } from "../settings-dialog/localStorageKeys"
 import { defaultSettings } from "../settings-dialog/defaultSettings"
 
-import { Bubble } from "./bubble"
-
 export function Panel({
   page,
   nbPanels,
@@ -36,47 +35,45 @@ export function Panel({
   // panel id, between 0 and (nbPanels - 1)
   panel: number
 
+
   className?: string
   width?: number
   height?: number
  }) {
+
   // index of the panel in the whole app
   const panelIndex = page * nbPanels + panel
 
+
   // the panel Id must be unique across all pages
   const panelId = `${panelIndex}`
 
   // console.log(`panel/index.tsx: <Panel panelId=${panelId}> rendered again!`)
 
+
   const [mouseOver, setMouseOver] = useState(false)
   const ref = useRef<HTMLImageElement>(null)
-  const font = useStore(s => s.font)
-  const preset = useStore(s => s.preset)
+  const font = useStore(state => state.font)
+  const preset = useStore(state => state.preset)
 
-  const setGeneratingImages = useStore(s => s.setGeneratingImages)
+  const setGeneratingImages = useStore(state => state.setGeneratingImages)
 
-  const panels = useStore(s => s.panels)
+  const panels = useStore(state => state.panels)
   const prompt = panels[panelIndex] || ""
 
-  const setPanelPrompt = useStore(s => s.setPanelPrompt)
-
-  const showSpeeches = useStore(s => s.showSpeeches)
+  const setPanelPrompt = useStore(state => state.setPanelPrompt)
 
-  const speeches = useStore(s => s.speeches)
-  const speech = speeches[panelIndex] || ""
-  const setPanelSpeech = useStore(s => s.setPanelSpeech)
-  
-  const captions = useStore(s => s.captions)
+  const captions = useStore(state => state.captions)
   const caption = captions[panelIndex] || ""
-  const setPanelCaption = useStore(s => s.setPanelCaption)
+  const setPanelCaption = useStore(state => state.setPanelCaption)
   
-  const zoomLevel = useStore(s => s.zoomLevel)
+  const zoomLevel = useStore(state => state.zoomLevel)
 
-  const addToUpscaleQueue = useStore(s => s.addToUpscaleQueue)
+  const addToUpscaleQueue = useStore(state => state.addToUpscaleQueue)
 
   const [_isPending, startTransition] = useTransition()
-  const renderedScenes = useStore(s => s.renderedScenes)
-  const setRendered = useStore(s => s.setRendered)
+  const renderedScenes = useStore(state => state.renderedScenes)
+  const setRendered = useStore(state => state.setRendered)
 
   const rendered = renderedScenes[panelIndex] || getInitialRenderedScene()
 
@@ -98,31 +95,6 @@ export function Panel({
   
   let delay = enableRateLimiter ? (1000 + (500 * panelIndex)) : 1000
 
-
-  const addSpeechBubble = async () => {
-    if (!renderedRef.current) { return }
-
-    // story generation failed
-    if (speech.trim() === "...") { return }
-
-    if (!showSpeeches) { return }
-
-    console.log('Generating speech bubbles (this is experimental!)')
-    try {
-      const result = await injectSpeechBubbleInTheBackground({
-        inputImageInBase64: renderedRef.current.assetUrl,
-        text: speech,
-        shape: "oval",
-        line: "straight", // "straight", "bubble", "chaotic"
-        //  font?: string;
-        // debug: true,
-      })
-      renderedRef.current.assetUrl = result
-      setRendered(panelId, renderedRef.current)
-    } catch (err) {
-      console.log(`error: failed to inject the speech bubble: ${err}`)
-    }
-  }
   /*
   console.log("panel/index.tsx: DEBUG: " + JSON.stringify({
     page,
@@ -232,7 +204,6 @@ export function Panel({
           if (newRendered.status === "completed") {
             setGeneratingImages(panelId, false)
             addToUpscaleQueue(panelId, newRendered)
-            addSpeechBubble()
           } else if (!newRendered.status || newRendered.status === "error") {
             setGeneratingImages(panelId, false)
           } else {
@@ -303,7 +274,6 @@ export function Panel({
           console.log("panel finished!")
           setGeneratingImages(panelId, false)
           addToUpscaleQueue(panelId, newRendered)
-          addSpeechBubble()
   
         }
       } catch (err) {
@@ -316,17 +286,6 @@ export function Panel({
   useEffect(() => {
     if (!prompt.length) { return }
 
-    const renderedScene: RenderedScene | undefined = useStore.getState().renderedScenes[panelIndex]
-
-    // console.log("renderedScene:", renderedScene)
-
-    // I'm trying to find a rule to handle the case were we load a .clap file
-    // I think we should trash all the Panel objects for this to work properly 
-    if (renderedScene && renderedScene.status === "pregenerated" && renderedScene.assetUrl) {
-      console.log(`loading a pre-generated panel..`)
-      return
-    }
-
     startImageGeneration({ prompt, width, height, nbFrames, revision })
 
     clearTimeout(timeoutRef.current)
@@ -497,13 +456,7 @@ export function Panel({
           height={height}
           alt={rendered.alt}
           className={cn(
-            `comic-panel w-full h-full`,
-            `object-cover`,
-
-            // I think we can remove this to improve compatibility,
-            // in case the generate image isn't exactly the same size
-            // `max-w-max`,
-
+            `comic-panel w-full h-full object-cover max-w-max`,
             // showCaptions ? `-mt-11` : ''
             )}
         />}

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

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

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

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

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

@@ -1,9 +1,8 @@
-import { LLMVendor, RenderingModelVendor, Settings } from "@/types"
+import { 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",
@@ -15,11 +14,9 @@ export const defaultSettings: Settings = {
   replicateApiModelTrigger: "",
   openaiApiKey: "",
   openaiApiModel: "dall-e-3",
-  openaiApiLanguageModel: "gpt-4-turbo",
+  openaiApiLanguageModel: "gpt-4",
   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 { LLMVendor, RenderingModelVendor, Settings } from "@/types"
+import { RenderingModelVendor, Settings } from "@/types"
 
 import { getValidString } from "@/lib/getValidString"
 import { localStorageKeys } from "./localStorageKeys"
@@ -11,7 +11,6 @@ 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),
@@ -26,8 +25,6 @@ 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 { LLMVendor, RenderingModelVendor } from "@/types"
+import { RenderingModelVendor } from "@/types"
 import { Input } from "@/components/ui/input"
 
 import { Label } from "./label"
@@ -24,8 +24,6 @@ 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)
@@ -37,10 +35,6 @@ 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
@@ -81,26 +75,6 @@ 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
@@ -113,25 +87,19 @@ export function SettingsDialog() {
       <DialogTrigger asChild>
         <Button className="space-x-1 md:space-x-2">
           <div>
-            <span className="">Settings</span>
+            <span className="hidden md:inline">Settings</span>
           </div>
         </Button> 
       </DialogTrigger>
-      <DialogContent className="w-full sm:max-w-[500px] md:max-w-[700px] bg-gray-100">
+      <DialogContent className="w-full sm:max-w-[500px] md:max-w-[700px]">
         <DialogHeader>
-          <DialogDescription className="w-full text-center text-2xl font-bold text-stone-800">
-            AI Comic Factory Settings
+          <DialogDescription className="w-full text-center text-lg font-bold text-stone-800">
+            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 className="pt-2">Move the slider to set the total expected number of pages: {userDefinedMaxNumberOfPages}</Label>
+          <Label>(new!) Control the number of pages: {userDefinedMaxNumberOfPages}</Label>
           <Slider
             min={1}
             max={maxNbPages}
@@ -147,11 +115,31 @@ export function SettingsDialog() {
           />
         </Field>
         }
-        <div className={cn(
-          `grid gap-2 pt-3 pb-1`,
-          `text-stone-800`
-        )}>
-        
+        <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>
+            
           
           {
           // renderingModelVendor === "SERVER" && <>
@@ -180,29 +168,6 @@ 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>
@@ -282,7 +247,7 @@ export function SettingsDialog() {
 
           {renderingModelVendor === "REPLICATE" && <>
               <Field>
-                <Label>Replicate API Token:</Label>
+                <Label>Replicate API Token (you will be billed based on Replicate pricing):</Label>
                 <Input
                   className={fonts.actionman.className}
                   type="password"
@@ -331,113 +296,10 @@ export function SettingsDialog() {
               </Field>
             </>}
 
-            <SectionTitle>👇 Story generation options (🚧 experimental feature 🚧)</SectionTitle>
-
-            <p>⚠️ Some vendors might be buggy or require tunning, please report issues to Discord.<br/>
-            ⚠️ Billing and privacy depend on your preferred vendor, so please exercice caution.</p>
-            <Field>
-            <Label className={cn(
-              "mt-2"
-            )}>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>
+            <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>
 
         </div>
 

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

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

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

@@ -1,29 +1,22 @@
 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: `${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`,
+  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"
 }

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

@@ -1,20 +0,0 @@
-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-4 pb-1 w-full`,
-      `border-t border-t-stone-400`,
-      `text-xl font-semibold text-zinc-900`,
-      className
-    )}>
-    {children}
-    </div>
-  )
-}

src/app/interface/share/index.tsx

@@ -6,9 +6,9 @@ import { useState } from "react"
 
 export function Share() {
   const [isOpen, setOpen] = useState(false)
-  const preset = useStore(s => s.preset)
-  const prompt = useStore(s => s.prompt)
-  const panelGenerationStatus = useStore(s => s.panelGenerationStatus)
+  const preset = useStore(state => state.preset)
+  const prompt = useStore(state => state.prompt)
+  const panelGenerationStatus = useStore(state => state.panelGenerationStatus)
   const allStatus = Object.values(panelGenerationStatus)
   const remainingImages = allStatus.reduce((acc, s) => (acc + (s ? 1 : 0)), 0)
 
@@ -119,10 +119,10 @@ ${comicFileMd}`;
             disabled={!prompt?.length}
           >
             <span className="hidden md:inline">{
-            remainingImages ? `${allStatus.length - remainingImages}/${allStatus.length} panels ⌛` : `Get PDF`
+            remainingImages ? `${allStatus.length - remainingImages}/${allStatus.length} panels ⌛` : `Save PDF`
             }</span>
             <span className="inline md:hidden">{
-              remainingImages ? `${allStatus.length - remainingImages}/${allStatus.length} ⌛` : `PDF`
+              remainingImages ? `${allStatus.length - remainingImages}/${allStatus.length} ⌛` : `Save`
             }</span>
         </Button>
           </p>

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

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from "react"
 import { useSearchParams } from "next/navigation"
+import Image from "next/image"
 import { StaticImageData } from "next/image"
 import { useLocalStorage } from "usehooks-ts"
 
@@ -19,58 +20,64 @@ import { Input } from "@/components/ui/input"
 import { PresetName, defaultPreset, nonRandomPresets, presets } from "@/app/engine/presets"
 import { useStore } from "@/app/store"
 import { Button } from "@/components/ui/button"
-import { LayoutName, defaultLayout, nonRandomLayouts } from "@/app/layouts"
+import { LayoutName, allLayoutLabels, defaultLayout, nonRandomLayouts } from "@/app/layouts"
 import { Switch } from "@/components/ui/switch"
 import { useOAuth } from "@/lib/useOAuth"
-import { useIsBusy } from "@/lib/useIsBusy"
 
+import layoutPreview0 from "../../../../public/layouts/layout0.jpg"
+import layoutPreview1 from "../../../../public/layouts/layout1.jpg"
+import layoutPreview2 from "../../../../public/layouts/layout2.jpg"
+import layoutPreview3 from "../../../../public/layouts/layout3.jpg"
 import { localStorageKeys } from "../settings-dialog/localStorageKeys"
 import { defaultSettings } from "../settings-dialog/defaultSettings"
 import { AuthWall } from "../auth-wall"
-import { SelectLayout } from "../select-layout"
-import { getLocalStorageShowSpeeches } from "@/lib/getLocalStorageShowSpeeches"
 
-export function TopMenu() {
-  const searchParams = useSearchParams()
+const layoutIcons: Partial<Record<LayoutName, StaticImageData>> = {
+  Layout0: layoutPreview0,
+  Layout1: layoutPreview1,
+  Layout2: layoutPreview2,
+  Layout3: layoutPreview3,
+  Layout4: undefined,
+}
 
-  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(s => s.font)
-  // const setFont = useStore(s => s.setFont)
-  const preset = useStore(s => s.preset)
-  const prompt = useStore(s => s.prompt)
-  const layout = useStore(s => s.layout)
-  const setLayout = useStore(s => s.setLayout)
+export function TopMenu() {
+   // const font = useStore(state => state.font)
+  // const setFont = useStore(state => state.setFont)
+  const preset = useStore(state => state.preset)
+  const prompt = useStore(state => state.prompt)
+  const layout = useStore(state => state.layout)
+  const setLayout = useStore(state => state.setLayout)
 
-  const setShowSpeeches = useStore(s => s.setShowSpeeches)
-  const showSpeeches = useStore(s => s.showSpeeches)
+  const setShowCaptions = useStore(state => state.setShowCaptions)
+  const showCaptions = useStore(state => state.showCaptions)
 
-  const setShowCaptions = useStore(s => s.setShowCaptions)
-  const showCaptions = useStore(s => s.showCaptions)
+  const currentNbPages = useStore(state => state.currentNbPages)
+  const setCurrentNbPages = useStore(state => state.setCurrentNbPages)
 
-  const currentNbPages = useStore(s => s.currentNbPages)
-  const setCurrentNbPages = useStore(s => s.setCurrentNbPages)
+  const generate = useStore(state => state.generate)
 
-  const generate = useStore(s => s.generate)
+  const isGeneratingStory = useStore(state => state.isGeneratingStory)
+  const atLeastOnePanelIsBusy = useStore(state => state.atLeastOnePanelIsBusy)
+  const isBusy = isGeneratingStory || atLeastOnePanelIsBusy
 
-  const isBusy = useIsBusy()
 
   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
 
-  // TODO should be in the store
   const [draftPromptA, setDraftPromptA] = useState(lastDraftPromptA)
   const [draftPromptB, setDraftPromptB] = useState(lastDraftPromptB)
   const draftPrompt = `${draftPromptA}||${draftPromptB}`
@@ -93,11 +100,6 @@ export function TopMenu() {
   useEffect(() => { if (lastDraftPromptB !== draftPromptB) { setLastDraftPromptB(draftPromptB) } }, [draftPromptB])
   useEffect(() => { if (lastDraftPromptB !== draftPromptB) { setDraftPromptB(lastDraftPromptB) } }, [lastDraftPromptB])
 
-  // we need a use effect to properly read the local storage
-  useEffect(() => {
-    setShowSpeeches(getLocalStorageShowSpeeches(true))
-  }, [])
-
   const handleSubmit = () => {
     if (enableOAuthWall && hasGeneratedAtLeastOnce && !isLoggedIn) {
       setShowAuthWall(true)
@@ -163,12 +165,36 @@ export function TopMenu() {
 
           {/* <Label className="flex text-2xs md:text-sm md:w-24">Style:</Label> */}
 
-          <SelectLayout
+          <Select
             defaultValue={defaultLayout}
-            onLayoutChange={setDraftLayout}
+            onValueChange={(value) => { setDraftLayout(value as LayoutName) }}
             disabled={isBusy}
-            layouts={nonRandomLayouts}
-          />
+            >
+            <SelectTrigger className="flex-grow bg-gray-100 text-gray-700 dark:bg-gray-100 dark:text-gray-700">
+              <SelectValue className="text-2xs md:text-sm" placeholder="Layout" />
+            </SelectTrigger>
+            <SelectContent>
+              {nonRandomLayouts.map(key =>
+                <SelectItem key={key} value={key} className="w-full">
+                  <div className="space-x-6 flex flex-row items-center justify-between">
+                    <div className="flex">{
+                      (allLayoutLabels as any)[key]
+                    }</div>
+                 
+                      {(layoutIcons as any)[key]
+                        ? <Image
+                            className="rounded-sm opacity-75"
+                            src={(layoutIcons as any)[key]}
+                            width={20}
+                            height={18}
+                            alt={key}
+                        /> : null}
+              
+                  </div>
+                </SelectItem>
+              )}
+            </SelectContent>
+          </Select>
         </div>
         <div className="flex flex-row items-center space-x-3">
         <Switch
@@ -176,19 +202,8 @@ export function TopMenu() {
           onCheckedChange={setShowCaptions}
         />
         <Label className="text-gray-200 dark:text-gray-200">
-          <span className="hidden lg:inline">📖&nbsp;Captions</span>
-          <span className="inline lg:hidden">📖</span>
-        </Label>
-        </div>
-        <div className="flex flex-row items-center space-x-3">
-        <Switch
-          checked={showSpeeches}
-          onCheckedChange={setShowSpeeches}
-          defaultChecked={showSpeeches}
-        />
-        <Label className="text-gray-200 dark:text-gray-200">
-          <span className="hidden lg:inline">💬&nbsp;Bubbles</span>
-          <span className="inline lg:hidden">💬</span>
+          <span className="hidden md:inline">Caption</span>
+          <span className="inline md:hidden">Cap.</span>
         </Label>
         </div>
         {/*
@@ -226,7 +241,6 @@ export function TopMenu() {
         <div className="flex flex-row flex-grow w-full">
           <div className="flex flex-row flex-grow w-full">
             <Input
-              id="top-menu-input-story-prompt"
               placeholder="1. Story (eg. detective dog)"
               className={cn(
                 `w-1/2 rounded-r-none`,
@@ -245,7 +259,6 @@ export function TopMenu() {
               value={draftPromptB}
             />
             <Input
-              id="top-menu-input-style-prompt"
               placeholder="2. Style (eg 'rain, shiba')"
               className={cn(
                 `w-1/2`,

src/app/layouts/index.tsx

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

src/app/layouts/settings.tsx

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

src/app/main.tsx

@@ -19,12 +19,11 @@ 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 { useLLMVendorConfig } from "@/lib/useLLMVendorConfig"
+import { sleep } from "@/lib/sleep"
 
 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)
@@ -49,11 +48,8 @@ export default function Main() {
 
   // do we need those?
   const renderedScenes = useStore(s => s.renderedScenes)
-
-  const speeches = useStore(s => s.speeches)
-  const setSpeeches = useStore(s => s.setSpeeches)
-
   const captions = useStore(s => s.captions)
+
   const setCaptions = useStore(s => s.setCaptions)
 
   const zoomLevel = useStore(s => s.zoomLevel)
@@ -66,7 +62,7 @@ export default function Main() {
   )
   
   const numberOfPanels = Object.keys(panels).length
-  const panelGenerationStatus = useStore(s => s.panelGenerationStatus)
+  const panelGenerationStatus = useStore(state => state.panelGenerationStatus)
   const allStatus = Object.values(panelGenerationStatus)
   const numberOfPendingGenerations = allStatus.reduce((acc, s) => (acc + (s ? 1 : 0)), 0)
 
@@ -93,7 +89,7 @@ export default function Main() {
     showNextPageButton
   }, null, 2))
   */
-
+  
   useEffect(() => {
     if (maxNbPages !== userDefinedMaxNumberOfPages) {
       setMaxNbPages(userDefinedMaxNumberOfPages)
@@ -104,7 +100,6 @@ export default function Main() {
   const ref = useRef({
     existingPanels: [] as GeneratedPanel[],
     newPanelsPrompts: [] as string[],
-    newSpeeches: [] as string[],
     newCaptions: [] as string[],
     prompt: "",
     preset: "",
@@ -125,16 +120,6 @@ export default function Main() {
     // console.log(`main.tsx: asked to re-generate!!`)
     if (!prompt) { return }
 
-
-    // a quick and dirty hack to skip prompt regeneration,
-    // unless the prompt has really changed
-    if (
-      prompt === useStore.getState().currentClap?.meta.description
-    ) {
-      console.log(`loading a pre-generated comic, so skipping prompt regeneration..`)
-      return
-    }
-
     // if the prompt or preset changed, we clear the cache
     // this part is important, otherwise when trying to change the prompt
     // we wouldn't still have remnants of the previous comic
@@ -146,7 +131,6 @@ export default function Main() {
       ref.current = {
         existingPanels: [],
         newPanelsPrompts: [],
-        newSpeeches: [],
         newCaptions: [],
         prompt,
         preset: preset?.label || "",
@@ -205,8 +189,6 @@ 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)
 
@@ -219,7 +201,6 @@ export default function Main() {
           const endAt = currentPanel + nbPanelsToGenerate
           for (let p = startAt; p < endAt; p++) {
             ref.current.newCaptions.push(ref.current.existingPanels[p]?.caption.trim() || "...")
-            ref.current.newSpeeches.push(ref.current.existingPanels[p]?.speech.trim() || "...")
             const newPanel = joinWords([
     
               // what we do here is that ideally we give full control to the LLM for prompting,
@@ -237,19 +218,15 @@ export default function Main() {
 
           // update the frontend
           // console.log("updating the frontend..")
-          setSpeeches(ref.current.newSpeeches)
           setCaptions(ref.current.newCaptions)
-          setPanels(ref.current.newPanelsPrompts)
-          setGeneratingStory(false)
+          setPanels(ref.current.newPanelsPrompts)    
 
-          // TODO generate the clap here
-          
+          setGeneratingStory(false)
         } catch (err) {
           console.log("main.tsx: LLM generation failed:", err)
           setGeneratingStory(false)
           break
         }
-
         if (currentPanel > (currentNbPanels / 2)) {
           console.log("main.tsx: we are halfway there, hold tight!")
           // setWaitABitMore(true)

src/app/page.tsx

@@ -1,19 +1,16 @@
 "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() {
+export default async function IndexPage({ params: { ownerId } }: { params: { ownerId: string }}) {
   return (
     <>
       <Head>
@@ -25,29 +22,22 @@ export default async function IndexPage() {
         `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 allow going out of the screen
+         // important: in "print" mode we need to allowing 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 />
-
-         {/*
-
-         to display a maintenance page, hide <Main /> and uncomment this unstead:
-         
-              <Maintenance />
-
-         */}
+         {/* <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/getDynamicConfig.ts

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

src/app/queries/getLLMEngineFunction.ts

@@ -1,19 +0,0 @@
-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, LLMVendorConfig } from "@/types"
+import { GeneratedPanel } from "@/types"
 import { predictNextPanels } from "./predictNextPanels"
 import { joinWords } from "@/lib/joinWords"
 import { sleep } from "@/lib/sleep"
@@ -11,7 +11,6 @@ export const getStoryContinuation = async ({
   nbPanelsToGenerate,
   maxNbPanels,
   existingPanels = [],
-  llmVendorConfig
 }: {
   preset: Preset;
   stylePrompt?: string;
@@ -19,7 +18,6 @@ export const getStoryContinuation = async ({
   nbPanelsToGenerate: number;
   maxNbPanels: number;
   existingPanels?: GeneratedPanel[];
-  llmVendorConfig: LLMVendorConfig
 }): Promise<GeneratedPanel[]> => {
 
   let panels: GeneratedPanel[] = []
@@ -36,7 +34,6 @@ export const getStoryContinuation = async ({
       nbPanelsToGenerate,
       maxNbPanels,
       existingPanels,
-      llmVendorConfig,
     })
 
     // console.log("LLM responded with panelCandidates:", panelCandidates)
@@ -48,7 +45,6 @@ export const getStoryContinuation = async ({
       panels.push({
         panel: startAt + i,
         instructions: `${panelCandidates[i]?.instructions || ""}`,
-        speech: `${panelCandidates[i]?.speech || ""}`,
         caption: `${panelCandidates[i]?.caption || ""}`,
       })
     }
@@ -65,7 +61,6 @@ export const getStoryContinuation = async ({
           userStoryPrompt,
           `${".".repeat(p)}`,
         ]),
-        speech: "...",
         caption: "(Sorry, LLM generation failed: using degraded mode)"
       })
     }

src/app/queries/getSystemPrompt.ts

@@ -1,27 +0,0 @@
-import { Preset } from "../engine/presets"
-
-export function getSystemPrompt({
-  preset,
-  // prompt,
-  // existingPanelsTemplate,
-  firstNextOrLast,
-  maxNbPanels,
-  nbPanelsToGenerate,
-  // nbMaxNewTokens,
-}: {
-  preset: Preset
-  // prompt: string
-  // existingPanelsTemplate: string
-  firstNextOrLast: string
-  maxNbPanels: number
-  nbPanelsToGenerate: number
-  // nbMaxNewTokens: number
-}) {
-  return [
-    `You are a writer specialized in ${preset.llmPrompt}`,
-    `Please write detailed drawing instructions and short (2-3 sentences long) speeches and narrator captions for the ${firstNextOrLast} ${nbPanelsToGenerate} panels (out of ${maxNbPanels} in total) of a new story, but keep it open-ended (it will be continued and expanded later). Please make sure each of those ${nbPanelsToGenerate} panels include info about character gender, age, origin, clothes, colors, location, lights, etc. Speeches are the dialogues, so they MUST be written in 1st person style, and be short, eg a couple of short sentences. Only generate those ${nbPanelsToGenerate} panels, but take into account the fact the panels are part of a longer story (${maxNbPanels} panels long).`,
-    `Give your response as a VALID JSON array like this: \`Array<{ panel: number; instructions: string; speech: string; caption: string; }>\`.`,
-    // `Give your response as Markdown bullet points.`,
-    `Be brief in the instructions, the speeches and the narrative captions of those ${nbPanelsToGenerate} panels, don't add your own comments. Write speeces in 1st person style, with intensity, humor etc. The speech must be captivating, smart, entertaining, usually a sentence or two. Be straight to the point, return JSON and never reply things like "Sure, I can.." etc. Reply using valid JSON!! Important: Write valid JSON!`
-  ].filter(item => item).join("\n")
-}

src/app/queries/getUserPrompt.ts

@@ -1,9 +0,0 @@
-export function getUserPrompt({
-  prompt,
-  existingPanelsTemplate,
-}: {
-  prompt: string
-  existingPanelsTemplate: string
-}) {
-  return `The story is about: ${prompt}.${existingPanelsTemplate}`
-}

src/app/queries/mockLLMResponse.ts

@@ -3,49 +3,41 @@ import { GeneratedPanels } from "@/types"
 export const mockGeneratedPanels: GeneratedPanels = [{
   "panel": 1,
   "instructions": "wide shot of detective walking towards a UFO crash site",
-  "speech": "Hmm.. interesting.",
   "caption": "Detective Jameson investigates a UFO crash in the desert"
 },
 {
   "panel": 2,
   "instructions": "close-up of detective's face, determined expression",
-  "speech": "I've been tracking this case for weeks",
   "caption": "He's been tracking this case for weeks"
 },
 {
   "panel": 3,
   "instructions": "medium shot of detective examining UFO debris",
-  "speech": "...",
   "caption": "The evidence is scattered all over the desert"
 },
 {
   "panel": 4,
   "instructions": "close-up of strange symbol on UFO debris",
-  "speech": " what does this symbol mean?",
-  "caption": "strange symbols"
+  "caption": "But what does this symbol mean?"
 },
 {
   "panel": 5,
   "instructions": "wide shot of detective walking towards a strange rock formation",
-  "speech": "I've been tracking this case for weeks",
   "caption": "Jameson follows a trail that leads him deeper into the desert"
 },
 {
   "panel": 6,
   "instructions": "medium shot of detective discovering an alien body",
-  "speech": "I'm not alone in the desert",
-  "caption": "He's not alone"
+  "caption": "He's not alone in the desert"
 },
 {
   "panel": 7,
   "instructions": "close-up of alien's face, eyes closed, peaceful expression",
-  "speech": "...?",
   "caption": "An alien life form, deceased"
 },
 {
   "panel": 8,
   "instructions": "wide shot of detective standing over the alien body, looking up at the sky",
-  "speech": "what other secrets lie beyond the stars?",
-  "caption": "Jameson wonders"
+  "caption": "Jameson wonders, what other secrets lie beyond the stars?"
 }
 ]

src/app/queries/predict.ts

@@ -1,23 +1,13 @@
 "use server"
 
-import { LLMEngine, LLMPredictionFunctionParams } from "@/types"
-import { defaultLLMEngineName, getLLMEngineFunction } from "./getLLMEngineFunction"
+import { LLMEngine } from "@/types"
+import { predict as predictWithHuggingFace } from "./predictWithHuggingFace"
+import { predict as predictWithOpenAI } from "./predictWithOpenAI"
+import { predict as predictWithGroq } from "./predictWithGroq"
 
-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 llmEngine = `${process.env.LLM_ENGINE || ""}` as LLMEngine
 
-  const llmEngineFunction = getLLMEngineFunction(llmEngineName)
-
-  // console.log("predict: using " + llmEngineName)
-  const results = await llmEngineFunction(params)
-
-  // console.log("predict: result: " + results)
-  return results
-}
+export const predict =
+  llmEngine === "GROQ" ? predictWithGroq :
+  llmEngine === "OPENAI" ? predictWithOpenAI :
+  predictWithHuggingFace

src/app/queries/predictNextPanels.ts

@@ -1,28 +1,25 @@
-import { GeneratedPanel, LLMVendorConfig } from "@/types"
+
+import { predict } from "./predict"
+import { Preset } from "../engine/presets"
+import { GeneratedPanel } from "@/types"
 import { cleanJson } from "@/lib/cleanJson"
+import { createZephyrPrompt } from "@/lib/createZephyrPrompt"
 import { dirtyGeneratedPanelCleaner } from "@/lib/dirtyGeneratedPanelCleaner"
 import { dirtyGeneratedPanelsParser } from "@/lib/dirtyGeneratedPanelsParser"
 import { sleep } from "@/lib/sleep"
 
-import { Preset } from "../engine/presets"
-import { predict } from "./predict"
-import { getSystemPrompt } from "./getSystemPrompt"
-import { getUserPrompt } from "./getUserPrompt"
-
 export const predictNextPanels = async ({
   preset,
   prompt = "",
   nbPanelsToGenerate,
   maxNbPanels,
   existingPanels = [],
-  llmVendorConfig,
 }: {
-  preset: Preset
-  prompt: string
-  nbPanelsToGenerate: number
-  maxNbPanels: number
-  existingPanels: GeneratedPanel[]
-  llmVendorConfig: LLMVendorConfig
+  preset: Preset;
+  prompt: string;
+  nbPanelsToGenerate: number;
+  maxNbPanels: number;
+  existingPanels: GeneratedPanel[];
 }): Promise<GeneratedPanel[]> => {
   // console.log("predictNextPanels: ", { prompt, nbPanelsToGenerate })
   // throw new Error("Planned maintenance")
@@ -31,9 +28,10 @@ export const predictNextPanels = async ({
   // return mockGeneratedPanels
 
   const existingPanelsTemplate = existingPanels.length
-    ? ` To help you, here are the previous panels, their speeches and captions (note: if you see an anomaly here eg. no speech, no caption or the same description repeated multiple times, do not hesitate to fix the story): ${JSON.stringify(existingPanels, null, 2)}`
+    ? ` To help you, here are the previous panels and their captions (note: if you see an anomaly here eg. no caption or the same description repeated multiple times, do not hesitate to fix the story): ${JSON.stringify(existingPanels, null, 2)}`
     : ''
 
+
   const firstNextOrLast =
     existingPanels.length === 0
       ? "first"
@@ -41,34 +39,35 @@ export const predictNextPanels = async ({
       ? "last"
       : "next"
 
-  const systemPrompt = getSystemPrompt({
-    preset,
-    firstNextOrLast,
-    maxNbPanels,
-    nbPanelsToGenerate,
-  })
+  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 ${firstNextOrLast} ${nbPanelsToGenerate} panels (out of ${maxNbPanels} in total) of a new story, but keep it open-ended (it will be continued and expanded later). Please make sure each of those ${nbPanelsToGenerate} panels include info about character gender, age, origin, clothes, colors, location, lights, etc. Only generate those ${nbPanelsToGenerate} panels, but take into account the fact the panels are part of a longer story (${maxNbPanels} panels long).`,
+        `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 the instructions and narrative captions of those ${nbPanelsToGenerate} panels, don't add your own comments. The captions must be captivating, smart, entertaining. Be straight to the point, and never reply things like "Sure, I can.." etc. Reply using valid JSON!! Important: Write valid JSON!`
+      ].filter(item => item).join("\n")
+    },
+    {
+      role: "user",
+      content: `The story is about: ${prompt}.${existingPanelsTemplate}`,
+    }
+  ]) + "\n[{"
 
-  const userPrompt = getUserPrompt({
-    prompt,
-    existingPanelsTemplate,
-  })
 
   let result = ""
 
-  // we don't require a lot of token for our task,
-  // but to be safe, let's count ~200 tokens per panel
-  const nbTokensPerPanel = 200
+  // we don't require a lot of token for our task
+  // but to be safe, let's count ~130 tokens per panel
+  const nbTokensPerPanel = 130
 
   const nbMaxNewTokens = nbPanelsToGenerate * nbTokensPerPanel
 
   try {
-    // console.log(`calling predict:`, { systemPrompt, userPrompt, nbMaxNewTokens })
-    result = `${await predict({
-      systemPrompt,
-      userPrompt,
-      nbMaxNewTokens,
-      llmVendorConfig
-    })}`.trim()
+    // console.log(`calling predict(${query}, ${nbTotalPanels})`)
+    result = `${await predict(query, nbMaxNewTokens)}`.trim()
     console.log("LLM result (1st trial):", result)
     if (!result.length) {
       throw new Error("empty result on 1st trial!")
@@ -79,12 +78,7 @@ export const predictNextPanels = async ({
     await sleep(2000)
 
     try {
-      result = `${await predict({
-        systemPrompt: systemPrompt + " \n ",
-        userPrompt,
-        nbMaxNewTokens,
-        llmVendorConfig
-      })}`.trim()
+      result = `${await predict(query + " \n ", nbMaxNewTokens)}`.trim()
       console.log("LLM result (2nd trial):", result)
       if (!result.length) {
         throw new Error("empty result on 2nd trial!")
@@ -115,7 +109,6 @@ export const predictNextPanels = async ({
       .map((cap, i) => ({
         panel: i,
         caption: cap,
-        speech: cap,
         instructions: cap,
       }))
     )

src/app/queries/predictWithAnthropic.ts

@@ -1,48 +0,0 @@
-"use server"
-
-import { LLMPredictionFunctionParams } from '@/types';
-import Anthropic from '@anthropic-ai/sdk';
-import { MessageParam } from '@anthropic-ai/sdk/resources';
-
-export async function predict({
-  systemPrompt,
-  userPrompt,
-  nbMaxNewTokens,
-  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"
-  }`
-  if (!anthropicApiKey) { throw new Error(`cannot call Anthropic without an API key`) }
-  
-  const anthropic = new Anthropic({
-    apiKey: anthropicApiKey,
-  })
-
-  const messages: MessageParam[] = [
-    { role: "user", content: userPrompt },
-  ]
-
-  try {
-    const res = await anthropic.messages.create({
-      messages: messages,
-      // stream: false,
-      system: systemPrompt,
-      model: anthropicApiModel,
-      // temperature: 0.8,
-      max_tokens: nbMaxNewTokens,
-    })
-
-    return (res.content[0] as any)?.text || ""
-  } catch (err) {
-    console.error(`error during generation: ${err}`)
-    return ""
-  }
-}

src/app/queries/predictWithGroq.ts

@@ -1,34 +1,17 @@
 "use server"
 
-import { LLMPredictionFunctionParams } from "@/types"
 import Groq from "groq-sdk"
 
-export async function predict({
-  systemPrompt,
-  userPrompt,
-  nbMaxNewTokens,
-  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"
-  }`
-
-  if (!groqApiKey) { throw new Error(`cannot call Groq without an API key`) }
+export async function predict(inputs: string, nbMaxNewTokens: number): Promise<string> {
+  const groqApiKey = `${process.env.AUTH_GROQ_API_KEY || ""}`
+  const groqApiModel = `${process.env.LLM_GROQ_API_MODEL || "mixtral-8x7b-32768"}`
   
   const groq = new Groq({
     apiKey: groqApiKey,
   })
 
   const messages: Groq.Chat.Completions.CompletionCreateParams.Message[] = [
-    { role: "system", content: systemPrompt },
-    { role: "user", content: userPrompt },
+    { role: "assistant", content: "" },
   ]
 
   try {

src/app/queries/predictWithHuggingFace.ts

@@ -1,16 +1,9 @@
 "use server"
 
 import { HfInference, HfInferenceEndpoint } from "@huggingface/inference"
-import { LLMEngine, LLMPredictionFunctionParams } from "@/types"
-import { createZephyrPrompt } from "@/lib/createZephyrPrompt"
-
-export async function predict({
-  systemPrompt,
-  userPrompt,
-  nbMaxNewTokens,
-  // llmVendorConfig // <-- arbitrary/custom LLM models hosted on HF is not supported yet using the UI
-}: LLMPredictionFunctionParams): Promise<string> {
+import { LLMEngine } from "@/types"
 
+export async function predict(inputs: string, nbMaxNewTokens: number): Promise<string> {
   const hf = new HfInference(process.env.AUTH_HF_API_TOKEN)
 
   const llmEngine = `${process.env.LLM_ENGINE || ""}` as LLMEngine
@@ -53,12 +46,7 @@ export async function predict({
   try {
     for await (const output of api.textGenerationStream({
       model: llmEngine === "INFERENCE_ENDPOINT" ? undefined : (inferenceModel || undefined),
-      
-      inputs: createZephyrPrompt([
-        { role: "system", content: systemPrompt },
-        { role: "user", content: userPrompt }
-      ]) + "\n[{", // <-- important: we force its hand
-
+      inputs,
       parameters: {
         do_sample: true,
         max_new_tokens: nbMaxNewTokens,

src/app/queries/predictWithOpenAI.ts

@@ -1,39 +1,20 @@
 "use server"
 
-import type { ChatCompletionMessageParam } from "openai/resources/chat"
+import type { ChatCompletionMessage } from "openai/resources/chat"
 import OpenAI from "openai"
-import { LLMPredictionFunctionParams } from "@/types"
-
-export async function predict({
-  systemPrompt,
-  userPrompt,
-  nbMaxNewTokens,
-  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"
-  }`
-
-  if (!openaiApiKey) { throw new Error(`cannot call OpenAI without an API key`) }
-  
 
+export async function predict(inputs: string, nbMaxNewTokens: number): Promise<string> {
+  const openaiApiKey = `${process.env.AUTH_OPENAI_API_KEY || ""}`
   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,
   })
 
-  const messages: ChatCompletionMessageParam[] = [
-    { role: "system", content: systemPrompt },
-    { role: "user", content: userPrompt },
+  const messages: ChatCompletionMessage[] = [
+    { role: "assistant", content: inputs },
   ]
 
   try {

src/app/store/index.ts

@@ -1,24 +1,17 @@
 "use client"
 
 import { create } from "zustand"
-import { ClapProject, ClapImageRatio, ClapSegment, ClapSegmentCategory, ClapSegmentStatus, ClapOutputType, ClapSegmentFilteringMode, filterSegments, newClap, newSegment, parseClap, serializeClap } from "@aitube/clap"
+import html2canvas from "html2canvas"
 
 import { FontName } from "@/lib/fonts"
 import { Preset, PresetName, defaultPreset, getPreset, getRandomPreset } from "@/app/engine/presets"
 import { RenderedScene } from "@/types"
-import { getParam } from "@/lib/getParam"
-
 import { LayoutName, defaultLayout, getRandomLayoutName } from "../layouts"
-import { putTextInInput } from "@/lib/putTextInInput"
-import { parsePresetFromPrompts } from "@/lib/parsePresetFromPrompts"
-import { parseLayoutFromStoryboards } from "@/lib/parseLayoutFromStoryboards"
-import { getLocalStorageShowSpeeches } from "@/lib/getLocalStorageShowSpeeches"
 
 export const useStore = create<{
   prompt: string
   font: FontName
   preset: Preset
-  currentClap?: ClapProject
   currentNbPanelsPerPage: number
   maxNbPanelsPerPage: number
   currentNbPages: number
@@ -27,10 +20,8 @@ export const useStore = create<{
   currentNbPanels: number
   maxNbPanels: number
   panels: string[]
-  speeches: string[]
   captions: string[]
   upscaleQueue: Record<string, RenderedScene>
-  showSpeeches: boolean
   showCaptions: boolean
   renderedScenes: Record<string, RenderedScene>
   layout: LayoutName
@@ -58,12 +49,9 @@ export const useStore = create<{
   setPreset: (preset: Preset) => void
   setPanels: (panels: string[]) => void
   setPanelPrompt: (newPrompt: string, index: number) => void
-  setLayout: (layout: LayoutName, index?: number) => void
-  setLayouts: (layouts: LayoutName[]) => void
-  setShowSpeeches: (showSpeeches: boolean) => void
-  setSpeeches: (speeches: string[]) => void
-  setPanelSpeech: (newSpeech: string, index: number) => void
   setShowCaptions: (showCaptions: boolean) => void
+  setLayout: (layout: LayoutName) => void
+  setLayouts: (layouts: LayoutName[]) => void
   setCaptions: (captions: string[]) => void
   setPanelCaption: (newCaption: string, index: number) => void
   setZoomLevel: (zoomLevel: number) => void
@@ -81,57 +69,31 @@ export const useStore = create<{
   // setPage: (page: HTMLDivElement) => void
 
   generate: (prompt: string, presetName: PresetName, layoutName: LayoutName) => void
-  convertComicToClap: () => Promise<ClapProject>
-  convertClapToComic: (clap: ClapProject) => Promise<{
-    currentNbPanels: number
-    prompt: string
-    preset: Preset
-    layout: LayoutName
-    storyPrompt: string
-    stylePrompt: string
-    panels: string[]
-    renderedScenes: Record<string, RenderedScene>
-    speeches: string[]
-    captions: string[]
-  }>
-  loadClap: (blob: Blob) => Promise<void>
-  downloadClap: () => Promise<void>
 }>((set, get) => ({
-
-  // -------- note --------------------------------------------------
-  // do not read the local storage in this block, results might be empty
-  // ----------------------------------------------------------------
-
-  prompt:
-    (getParam("stylePrompt", "") || getParam("storyPrompt", ""))
-     ? `${getParam("stylePrompt", "")}||${getParam("storyPrompt", "")}`
-     : "",
+  prompt: "",
   font: "actionman",
-  preset: getPreset(getParam("preset", defaultPreset)),
+  preset: getPreset(defaultPreset),
 
-  currentClap: undefined,
   currentNbPanelsPerPage: 4,
   maxNbPanelsPerPage: 4,
   currentNbPages: 1,
-  maxNbPages: getParam("maxNbPages", 1),
+  maxNbPages: 1,
   previousNbPanels: 0,
   currentNbPanels: 4,
   maxNbPanels: 4,
 
   panels: [],
-  speeches: [],
   captions: [],
   upscaleQueue: {} as Record<string, RenderedScene>,
   renderedScenes: {} as Record<string, RenderedScene>,
-  showSpeeches: true,
-  showCaptions: getParam("showCaptions", false),
+  showCaptions: false,
 
   // deprecated?
   layout: defaultLayout,
 
   layouts: [defaultLayout, defaultLayout, defaultLayout, defaultLayout],
 
-  zoomLevel: getParam("zoomLevel", 60),
+  zoomLevel: 60,
 
   // deprecated?
   page: undefined as unknown as HTMLDivElement,
@@ -298,29 +260,6 @@ export const useStore = create<{
       ))
     })
   },
-  setSpeeches: (speeches: string[]) => {
-    set({
-      speeches,
-    })
-  },
-  setShowSpeeches: (showSpeeches: boolean) => {
-    set({
-      showSpeeches,
-    })
-    try {
-      localStorage.setItem("AI_COMIC_FACTORY_SHOW_SPEECHES", `${showSpeeches || false}`)
-    } catch (err) {
-      console.error(`failed to persist "showSpeeches" for value "${showSpeeches}"`)
-    }
-  },
-  setPanelSpeech: (newSpeech, index) => {
-    const { speeches } = get()
-    set({
-      speeches: speeches.map((c, i) => (
-        index === i ? newSpeech : c
-      ))
-    })
-  },
   setCaptions: (captions: string[]) => {
     set({
       captions,
@@ -339,19 +278,15 @@ export const useStore = create<{
       ))
     })
   },
-  setLayout: (layoutName: LayoutName, index?: number) => {
-    const { maxNbPages, currentNbPanelsPerPage, layouts } = get()
+  setLayout: (layoutName: LayoutName) => {
+    const { maxNbPages, currentNbPanelsPerPage } = get()
 
+    const layouts: LayoutName[] = []
     for (let i = 0; i < maxNbPages; i++) {
-      let name = layoutName === "random" ? getRandomLayoutName() : layoutName
-
-      if (typeof index === "number" && !isNaN(index) && isFinite(index)) {
-        if (i === index) {
-          layouts[i] = name
-        }
-      } else {
-        layouts[i] = name
-      }
+      layouts.push(
+        layoutName === "random"
+          ? getRandomLayoutName()
+          : layoutName)
     }
 
     set({
@@ -361,7 +296,6 @@ export const useStore = create<{
       currentNbPages: 1,
       currentNbPanels: currentNbPanelsPerPage,
       panels: [],
-      speeches: [],
       captions: [],
       upscaleQueue: {},
       renderedScenes: {},
@@ -446,7 +380,6 @@ export const useStore = create<{
       currentNbPages: 1,
       currentNbPanels: currentNbPanelsPerPage,
       panels: [],
-      speeches: [],
       captions: [],
       upscaleQueue: {},
       renderedScenes: {},
@@ -462,270 +395,5 @@ export const useStore = create<{
       layout: layouts[0],
       layouts,
     })
-  },
-  
-  convertComicToClap: async (): Promise<ClapProject> => {
-    const {
-      currentNbPanels,
-      prompt,
-      panels,
-      renderedScenes,
-      speeches,
-      captions
-    } = get()
-
-    const defaultSegmentDurationInMs = 7000
-
-    let currentElapsedTimeInMs = 0
-
-
-    const clap: ClapProject = newClap({
-      meta: {
-        title: "Untitled", // we don't need a title actually
-        description: prompt,
-        storyPrompt: prompt,
-        imagePrompt: "",
-        systemPrompt: "",
-        synopsis: "",
-        licence: "",
-        imageRatio: ClapImageRatio.LANDSCAPE,
-        width: 512,
-        height: 288,
-        isInteractive: false,
-        isLoop: false,
-        durationInMs: panels.length * defaultSegmentDurationInMs,
-        bpm: 1,
-        frameRate: 1,
-      }
-    })
-
-    for (let i = 0; i < panels.length; i++) {
-
-      const panel = panels[i]
-      const speech = speeches[i]
-      const caption = captions[i]
-
-      const renderedScene = renderedScenes[`${i}`]
-
-      clap.segments.push(newSegment({
-        track: 1,
-        startTimeInMs: currentElapsedTimeInMs,
-        assetDurationInMs: defaultSegmentDurationInMs,
-        category: ClapSegmentCategory.IMAGE,
-        prompt: panel,
-        outputType: ClapOutputType.IMAGE,
-        assetUrl: renderedScene?.assetUrl || "",
-        status: ClapSegmentStatus.COMPLETED,
-      }))
-  
-      clap.segments.push(newSegment({
-        track: 2,
-        startTimeInMs: currentElapsedTimeInMs,
-        assetDurationInMs: defaultSegmentDurationInMs,
-        category: ClapSegmentCategory.INTERFACE,
-        prompt: caption,
-        // assetUrl: `data:text/plain;base64,${btoa(title)}`,
-        assetUrl: caption,
-        outputType: ClapOutputType.TEXT,
-        status: ClapSegmentStatus.COMPLETED,
-      }))
-  
-      clap.segments.push(newSegment({
-        track: 3,
-        startTimeInMs: currentElapsedTimeInMs,
-        assetDurationInMs: defaultSegmentDurationInMs,
-        category: ClapSegmentCategory.DIALOGUE,
-        prompt: speech,
-        outputType: ClapOutputType.AUDIO,
-        status: ClapSegmentStatus.TO_GENERATE,
-      }))
-  
-      // the presence of a camera is mandatory
-      clap.segments.push(newSegment({
-        track: 4,
-        startTimeInMs: currentElapsedTimeInMs,
-        assetDurationInMs: defaultSegmentDurationInMs,
-        category: ClapSegmentCategory.CAMERA,
-        prompt: "movie still",
-        outputType: ClapOutputType.TEXT,
-        status: ClapSegmentStatus.COMPLETED,
-      }))
-  
-      currentElapsedTimeInMs += defaultSegmentDurationInMs
-    }
-
-    set({ currentClap: clap })
-
-    return clap
-  },
-
-  convertClapToComic: async (clap: ClapProject): Promise<{
-    currentNbPanels: number
-    prompt: string
-    preset: Preset
-    layout: LayoutName
-    storyPrompt: string
-    stylePrompt: string
-    panels: string[]
-    renderedScenes: Record<string, RenderedScene>
-    speeches: string[]
-    captions: string[]
-  }> => {
-
-    const prompt = clap.meta.description
-    const [stylePrompt, storyPrompt] = prompt.split("||").map(x => x.trim())
-
-    const panels: string[] = []
-    const renderedScenes: Record<string, RenderedScene> = {}
-    const captions: string[] = []
-    const speeches: string[] = []
-
-    const panelGenerationStatus: Record<number, boolean> = {}
-
-    const cameraShots = clap.segments.filter(s => s.category === ClapSegmentCategory.CAMERA)
-
-    const shots = cameraShots.map(cameraShot => ({
-      camera: cameraShot,
-      storyboard: filterSegments(
-        ClapSegmentFilteringMode.START,
-        cameraShot,
-        clap.segments,
-        ClapSegmentCategory.IMAGE,
-      ).at(0) as (ClapSegment | undefined),
-      ui: filterSegments(
-        ClapSegmentFilteringMode.START,
-        cameraShot,
-        clap.segments,
-        ClapSegmentCategory.INTERFACE,
-      ).at(0) as (ClapSegment | undefined),
-      dialogue: filterSegments(
-        ClapSegmentFilteringMode.START,
-        cameraShot,
-        clap.segments,
-        ClapSegmentCategory.DIALOGUE,
-      ).at(0) as (ClapSegment | undefined)
-    })).filter(item => item.storyboard && item.ui) as {
-      camera: ClapSegment
-      storyboard: ClapSegment
-      ui: ClapSegment
-      dialogue: ClapSegment
-    }[]
-
-    shots.forEach(({ camera, storyboard, ui, dialogue }, id) => {
-
-      panels.push(storyboard.prompt)
-
-      const renderedScene: RenderedScene = {
-        renderId: storyboard?.id || "",
-        status: "pending",
-        assetUrl: "", 
-        alt: storyboard?.prompt || "",
-        error: "",
-        maskUrl: "",
-        segments: []
-      }
-
-      if (storyboard?.assetUrl) {
-        renderedScene.assetUrl = storyboard.assetUrl
-        renderedScene.status = "pregenerated" // <- special trick to indicate that it should not be re-generated
-      }
-
-      renderedScenes[id] = renderedScene
-
-      panelGenerationStatus[id] = false
-      
-      speeches.push(dialogue?.prompt || "")
-
-      captions.push(ui?.prompt || "")
-    })
-
-
-    return {
-      currentNbPanels: shots.length,
-      prompt,
-      preset: parsePresetFromPrompts(panels),
-      layout: await parseLayoutFromStoryboards(shots.map(x => x.storyboard)),
-      storyPrompt,
-      stylePrompt,
-      panels,
-      renderedScenes,
-      speeches,
-      captions,
-
-    }
-  },
-
-  loadClap: async (blob: Blob) => {
-    const { convertClapToComic, currentNbPanelsPerPage } = get()
-
-    const currentClap = await parseClap(blob)
-
-    const {
-      currentNbPanels,
-      prompt,
-      preset,
-      layout,
-      storyPrompt,
-      stylePrompt,
-      panels,
-      renderedScenes,
-      speeches,
-      captions,
-    } = await convertClapToComic(currentClap)
-
-    // kids, don't do this in your projects: use state managers instead!
-    putTextInInput(document.getElementById("top-menu-input-style-prompt") as HTMLInputElement, stylePrompt)
-    putTextInInput(document.getElementById("top-menu-input-story-prompt") as HTMLInputElement, storyPrompt)
-
-    set({
-      currentClap,
-      currentNbPanels,
-      prompt,
-      preset,
-      // layout,
-      panels,
-      renderedScenes,
-      speeches,
-      captions,
-      currentNbPages: Math.round(currentNbPanels / currentNbPanelsPerPage),
-      upscaleQueue: {},
-      isGeneratingStory: false,
-      isGeneratingText: false,
-    })
-  },
-
-  downloadClap: async () => {
-    const { convertComicToClap, prompt } = get()
-
-    const currentClap = await convertComicToClap()
-
-    if (!currentClap) { throw new Error(`cannot save a clap.. if there is no clap`) }
-
-    const currentClapBlob: Blob = await serializeClap(currentClap)
-
-    // Create an object URL for the compressed clap blob
-    const objectUrl = URL.createObjectURL(currentClapBlob)
-  
-    // Create an anchor element and force browser download
-    const anchor = document.createElement("a")
-    anchor.href = objectUrl
-
-    const [stylePrompt, storyPrompt] = prompt.split("||").map(x => x.trim())
-
-    const cleanStylePrompt = (stylePrompt || "").replace(/([^a-z0-9, ]+)/gi, " ")
-
-    const firstPartOfStory = (storyPrompt || "").split(",").shift() || ""
-    const cleanStoryPrompt = firstPartOfStory.replace(/([^a-z0-9, ]+)/gi, " ")
-
-    const cleanName = `${cleanStoryPrompt.slice(0, 90)} (${cleanStylePrompt.slice(0, 90) || "default style"})`
-
-    anchor.download = `${cleanName}.clap`
-
-    document.body.appendChild(anchor) // Append to the body (could be removed once clicked)
-    anchor.click() // Trigger the download
-  
-    // Cleanup: revoke the object URL and remove the anchor element
-    URL.revokeObjectURL(objectUrl)
-    document.body.removeChild(anchor)
-  },
+  }
 }))

src/lib/bubble/injectSpeechBubbleInTheBackground.ts

@@ -1,543 +0,0 @@
-import { ImageSegmenter, FilesetResolver, ImageSegmenterResult } from "@mediapipe/tasks-vision"
-import { actionman } from "../fonts";
-
-interface BoundingBox {
-  top: number;
-  left: number;
-  width: number;
-  height: number;
-}
-
-/**
- * Injects speech bubbles into the background of an image.
- * @param params - The parameters for injecting speech bubbles.
- * @returns A Promise that resolves to a base64-encoded string of the modified image.
- */
-export async function injectSpeechBubbleInTheBackground(params: {
-  inputImageInBase64: string;
-  text?: string;
-  shape?: "oval" | "rectangular" | "cloud" | "thought";
-  line?: "handdrawn" | "straight" | "bubble" | "chaotic";
-  font?: string;
-  debug?: boolean;
-}): Promise<string> {
-  const {
-    inputImageInBase64,
-    text,
-    shape = "oval",
-    line = "handdrawn",
-    font = actionman.style.fontFamily,
-    debug = false,
-  } = params;
-
-  if (!text) {
-    return inputImageInBase64;
-  }
-
-  const image = await loadImage(inputImageInBase64);
-  const canvas = document.createElement('canvas');
-  canvas.width = image.width;
-  canvas.height = image.height;
-  const ctx = canvas.getContext('2d')!;
-  ctx.drawImage(image, 0, 0);
-
-  const vision = await FilesetResolver.forVisionTasks(
-    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
-  );
-  const imageSegmenter = await ImageSegmenter.createFromOptions(vision, {
-    baseOptions: {
-      modelAssetPath: "https://storage.googleapis.com/mediapipe-models/image_segmenter/deeplab_v3/float32/1/deeplab_v3.tflite",
-      delegate: "GPU"
-    },
-    outputCategoryMask: true,
-    outputConfidenceMasks: false
-  });
-
-  const segmentationResult: ImageSegmenterResult = imageSegmenter.segment(image);
-  let characterBoundingBox: BoundingBox | null = null;
-
-  if (segmentationResult.categoryMask) {
-    const mask = segmentationResult.categoryMask.getAsUint8Array();
-    characterBoundingBox = findCharacterBoundingBox(mask, image.width, image.height);
-    console.log(segmentationResult)
-    if (debug) {
-      drawSegmentationMask(ctx, mask, image.width, image.height);
-    }
-  }
-
-  const bubbles = splitTextIntoBubbles(text);
-  const bubbleLocations = calculateBubbleLocations(bubbles.length, image.width, image.height, characterBoundingBox);
-
-  bubbles.forEach((bubbleText, index) => {
-    const bubbleLocation = bubbleLocations[index];
-    drawSpeechBubble(ctx, bubbleLocation, bubbleText, shape, line, font, characterBoundingBox, image.width, image.height);
-  });
-
-  return canvas.toDataURL('image/png');
-}
-
-function loadImage(base64: string): Promise<HTMLImageElement> {
-  return new Promise((resolve, reject) => {
-    const img = new Image();
-    img.onload = () => resolve(img);
-    img.onerror = reject;
-    img.src = base64;
-  });
-}
-
-function findCharacterBoundingBox(mask: Uint8Array, width: number, height: number): BoundingBox | null {
-  let shapes: BoundingBox[] = [];
-  let visited = new Set<number>();
-
-  for (let y = 0; y < height; y++) {
-    for (let x = 0; x < width; x++) {
-      const index = y * width + x;
-      if (mask[index] > 0 && !visited.has(index)) {
-        let shape = floodFill(mask, width, height, x, y, visited);
-        shapes.push(shape);
-      }
-    }
-  }
-
-  // Sort shapes by area (descending) and filter out small shapes
-  shapes = shapes
-    .filter(shape => (shape.width * shape.height) > (width * height * 0.01))
-    .sort((a, b) => (b.width * b.height) - (a.width * a.height));
-
-  // Find the most vertically rectangular shape
-  let mostVerticalShape = shapes.reduce((prev, current) => {
-    let prevRatio = prev.height / prev.width;
-    let currentRatio = current.height / current.width;
-    return currentRatio > prevRatio ? current : prev;
-  });
-
-  return mostVerticalShape || null;
-}
-
-function floodFill(mask: Uint8Array, width: number, height: number, startX: number, startY: number, visited: Set<number>): BoundingBox {
-  let queue = [[startX, startY]];
-  let minX = startX, maxX = startX, minY = startY, maxY = startY;
-
-  while (queue.length > 0) {
-    let [x, y] = queue.pop()!;
-    let index = y * width + x;
-
-    if (x < 0 || x >= width || y < 0 || y >= height || mask[index] === 0 || visited.has(index)) {
-      continue;
-    }
-
-    visited.add(index);
-    minX = Math.min(minX, x);
-    maxX = Math.max(maxX, x);
-    minY = Math.min(minY, y);
-    maxY = Math.max(maxY, y);
-
-    queue.push([x+1, y], [x-1, y], [x, y+1], [x, y-1]);
-  }
-
-  return {
-    left: minX,
-    top: minY,
-    width: maxX - minX + 1,
-    height: maxY - minY + 1
-  };
-}
-
-function analyzeSegmentationMask(mask: Uint8Array, width: number, height: number): string[] {
-  const categories = new Set<number>();
-  for (let i = 0; i < mask.length; i++) {
-    if (mask[i] > 0) {
-      categories.add(mask[i]);
-    }
-  }
-  return Array.from(categories).map(c => `unknown-${c}`);
-}
-
-function splitTextIntoBubbles(text: string): string[] {
-  // Define a regular expression pattern
-  const pattern = /(?:[A-Z][a-z]*\.\s*)*(?:[^.!?\s]+[^.!?]*[.!?]+)|\S+/g;
-  
-  const matches = text.match(pattern) || [text];
-  return matches.map(sentence => sentence.trim());
-}
-
-function calculateBubbleLocations(
-  bubbleCount: number, 
-  imageWidth: number, 
-  imageHeight: number, 
-  characterBoundingBox: BoundingBox | null
-): { x: number, y: number }[] {
-  const locations: { x: number, y: number }[] = [];
-  const padding = 50;
-  const availableWidth = imageWidth - padding * 2;
-  const availableHeight = imageHeight - padding * 2;
-  const maxAttempts = 100;
-  
-  for (let i = 0; i < bubbleCount; i++) {
-    let x, y;
-    let attempts = 0;
-    do {
-      // Adjust x to avoid the middle of the character
-      if (characterBoundingBox) {
-        const characterMiddle = characterBoundingBox.left + characterBoundingBox.width / 2;
-        const leftSide = Math.random() * (characterMiddle - padding - padding);
-        const rightSide = characterMiddle + Math.random() * (imageWidth - characterMiddle - padding - padding);
-        x = Math.random() < 0.5 ? leftSide : rightSide;
-      } else {
-        x = Math.random() * availableWidth + padding;
-      }
-      y = (i / bubbleCount) * availableHeight + padding;
-      attempts++;
-      
-      if (attempts >= maxAttempts) {
-        console.warn(`Could not find non-overlapping position for bubble ${i} after ${maxAttempts} attempts.`);
-        break;
-      }
-    } while (characterBoundingBox && isOverlapping({ x, y }, characterBoundingBox));
-    
-    locations.push({ x, y });
-  }
-  
-  return locations;
-}
-
-function isOverlapping(point: { x: number, y: number }, box: BoundingBox): boolean {
-  return point.x >= box.left && point.x <= box.left + box.width &&
-         point.y >= box.top && point.y <= box.top + box.height;
-}
-
-function drawSegmentationMask(ctx: CanvasRenderingContext2D, mask: Uint8Array, width: number, height: number) {
-  const imageData = ctx.getImageData(0, 0, width, height);
-  const data = imageData.data;
-  for (let i = 0; i < mask.length; i++) {
-    const category = mask[i];
-    if (category > 0) {
-      // Use a different color for each category
-      const color = getCategoryColor(category);
-      data[i * 4] = color[0];
-      data[i * 4 + 1] = color[1];
-      data[i * 4 + 2] = color[2];
-      data[i * 4 + 3] = 128; // 50% opacity
-    }
-  }
-  ctx.putImageData(imageData, 0, 0);
-}
-
-function getCategoryColor(category: number): [number, number, number] {
-  // Generate a pseudo-random color based on the category
-  const hue = (category * 137) % 360;
-  return hslToRgb(hue / 360, 1, 0.5);
-}
-
-function hslToRgb(h: number, s: number, l: number): [number, number, number] {
-  let r, g, b;
-  if (s === 0) {
-    r = g = b = l;
-  } else {
-    const hue2rgb = (p: number, q: number, t: number) => {
-      if (t < 0) t += 1;
-      if (t > 1) t -= 1;
-      if (t < 1/6) return p + (q - p) * 6 * t;
-      if (t < 1/2) return q;
-      if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
-      return p;
-    };
-    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-    const p = 2 * l - q;
-    r = hue2rgb(p, q, h + 1/3);
-    g = hue2rgb(p, q, h);
-    b = hue2rgb(p, q, h - 1/3);
-  }
-  return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
-}
-
-function drawSpeechBubble(
-  ctx: CanvasRenderingContext2D,
-  location: { x: number; y: number },
-  text: string,
-  shape: "oval" | "rectangular" | "cloud" | "thought",
-  line: "handdrawn" | "straight" | "bubble" | "chaotic",
-  font: string,
-  characterBoundingBox: BoundingBox | null,
-  imageWidth: number,
-  imageHeight: number,
-  safetyMargin: number = 0.1 // Default safety margin is 10%
-) {
-  const padding = 24;
-  const borderPadding = Math.max(10, Math.min(imageWidth, imageHeight) * safetyMargin);
-  
-  const fontSize = 20;
-  ctx.font = `${fontSize}px ${font}`;
-  
-  // Adjust maximum width to account for border padding and limit to 33% of image width
-  const maxBubbleWidth = Math.min(imageWidth - 2 * borderPadding, imageWidth * 0.33);
-  const wrappedText = wrapText(ctx, text, maxBubbleWidth - padding * 2, fontSize);
-  const textDimensions = measureTextDimensions(ctx, wrappedText, fontSize);
-  
-  // Adjust bubble size based on text content
-  const finalWidth = Math.min(Math.max(textDimensions.width + padding * 2, 100), maxBubbleWidth);
-  const finalHeight = Math.min(Math.max(textDimensions.height + padding * 2, 50), imageHeight - 2 * borderPadding);
-  
-  const bubbleLocation = adjustBubbleLocation(location, finalWidth, finalHeight, characterBoundingBox, imageWidth, imageHeight, borderPadding);
-
-  let tailTarget = null;
-  if (characterBoundingBox) {
-    tailTarget = {
-      x: characterBoundingBox.left + characterBoundingBox.width / 2,
-      y: characterBoundingBox.top + characterBoundingBox.height * 0.3
-    };
-  }
-
-  // Draw the main bubble
-  ctx.fillStyle = 'white';
-  ctx.strokeStyle = 'black';
-  ctx.lineWidth = 2;
-  ctx.beginPath();
-  drawBubbleShape(ctx, shape, bubbleLocation, finalWidth, finalHeight, tailTarget);
-  ctx.fill();
-  ctx.stroke();
-
-  // Draw the tail
-  if (tailTarget) {
-    drawTail(ctx, bubbleLocation, finalWidth, finalHeight, tailTarget, shape);
-  }
-
-  // Draw a white oval to blend the tail with the bubble
-  ctx.fillStyle = 'white';
-  ctx.beginPath();
-  drawBubbleShape(ctx, shape, bubbleLocation, finalWidth, finalHeight, null);
-  ctx.fill();
-
-  // Draw the text
-  ctx.fillStyle = 'black';
-  ctx.textAlign = 'center';
-  ctx.textBaseline = 'middle';
-  drawFormattedText(ctx, wrappedText, bubbleLocation.x, bubbleLocation.y, finalWidth - padding * 2, fontSize);
-}
-
-function drawTail(
-  ctx: CanvasRenderingContext2D,
-  bubbleLocation: { x: number; y: number },
-  bubbleWidth: number,
-  bubbleHeight: number,
-  tailTarget: { x: number; y: number },
-  shape: string
-) {
-  const bubbleCenterX = bubbleLocation.x;
-  const bubbleCenterY = bubbleLocation.y;
-  const tailBaseWidth = 40;
-
-  // Calculate the distance from bubble center to tail target
-  const deltaX = tailTarget.x - bubbleCenterX;
-  const deltaY = tailTarget.y - bubbleCenterY;
-  const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-
-  // Set the tail length to 30% of the distance
-  const tailLength = distance * 0.3;
-
-  // Calculate the tail end point
-  const tailEndX = bubbleCenterX + (deltaX / distance) * tailLength;
-  const tailEndY = bubbleCenterY + (deltaY / distance) * tailLength;
-
-  // Calculate the angle of the tail
-  const angle = Math.atan2(deltaY, deltaX);
-
-  // Calculate the base points of the tail
-  const perpAngle = angle + Math.PI / 2;
-  const basePoint1 = {
-    x: bubbleCenterX + Math.cos(perpAngle) * tailBaseWidth / 2,
-    y: bubbleCenterY + Math.sin(perpAngle) * tailBaseWidth / 2
-  };
-  const basePoint2 = {
-    x: bubbleCenterX - Math.cos(perpAngle) * tailBaseWidth / 2,
-    y: bubbleCenterY - Math.sin(perpAngle) * tailBaseWidth / 2
-  };
-
-  // Calculate control points for the Bézier curves
-  const controlPointDistance = tailLength * 0.3;
-  const controlPoint1 = {
-    x: basePoint1.x + Math.cos(angle) * controlPointDistance,
-    y: basePoint1.y + Math.sin(angle) * controlPointDistance
-  };
-  const controlPoint2 = {
-    x: basePoint2.x + Math.cos(angle) * controlPointDistance,
-    y: basePoint2.y + Math.sin(angle) * controlPointDistance
-  };
-
-  // Draw the tail
-  ctx.beginPath();
-  ctx.moveTo(basePoint1.x, basePoint1.y);
-  ctx.quadraticCurveTo(controlPoint1.x, controlPoint1.y, tailEndX, tailEndY);
-  ctx.quadraticCurveTo(controlPoint2.x, controlPoint2.y, basePoint2.x, basePoint2.y);
-  ctx.closePath();
-
-  // Fill and stroke the tail
-  ctx.fillStyle = 'white';
-  ctx.fill();
-  ctx.strokeStyle = 'black';
-  ctx.stroke();
-}
-
-function adjustBubbleLocation(
-  location: { x: number; y: number },
-  width: number,
-  height: number,
-  characterBoundingBox: BoundingBox | null,
-  imageWidth: number,
-  imageHeight: number,
-  borderPadding: number
-): { x: number; y: number } {
-  let adjustedX = location.x;
-  let adjustedY = location.y;
-
-  // Ensure the bubble doesn't overlap with the character
-  if (characterBoundingBox) {
-    const characterMiddle = characterBoundingBox.left + characterBoundingBox.width / 2;
-    if (Math.abs(adjustedX - characterMiddle) < width / 2) {
-      // If the bubble is in the middle of the character, move it to the side
-      adjustedX = adjustedX < characterMiddle 
-        ? Math.max(width / 2 + borderPadding, characterBoundingBox.left - width / 2 - 10)
-        : Math.min(imageWidth - width / 2 - borderPadding, characterBoundingBox.left + characterBoundingBox.width + width / 2 + 10);
-    }
-  }
-
-  // Ensure the bubble (including text) is fully visible
-  adjustedX = Math.max(width / 2 + borderPadding, Math.min(imageWidth - width / 2 - borderPadding, adjustedX));
-  adjustedY = Math.max(height / 2 + borderPadding, Math.min(imageHeight - height / 2 - borderPadding, adjustedY));
-
-  return { x: adjustedX, y: adjustedY };
-}
-
-function drawBubbleShape(
-  ctx: CanvasRenderingContext2D,
-  shape: "oval" | "rectangular" | "cloud" | "thought",
-  bubbleLocation: { x: number, y: number },
-  width: number,
-  height: number,
-  tailTarget: { x: number, y: number } | null
-) {
-  switch (shape) {
-    case "oval":
-      drawOvalBubble(ctx, bubbleLocation, width, height);
-      break;
-    case "rectangular":
-      drawRectangularBubble(ctx, bubbleLocation, width, height);
-      break;
-    case "cloud":
-      drawCloudBubble(ctx, bubbleLocation, width, height);
-      break;
-    case "thought":
-      drawThoughtBubble(ctx, bubbleLocation, width, height);
-      break;
-  }
-}
-
-function drawOvalBubble(ctx: CanvasRenderingContext2D, location: { x: number, y: number }, width: number, height: number) {
-  ctx.beginPath();
-  ctx.ellipse(location.x, location.y, width / 2, height / 2, 0, 0, 2 * Math.PI);
-  ctx.closePath();
-}
-
-function drawRectangularBubble(ctx: CanvasRenderingContext2D, location: { x: number, y: number }, width: number, height: number) {
-  const radius = 20;
-  ctx.beginPath();
-  ctx.moveTo(location.x - width / 2 + radius, location.y - height / 2);
-  ctx.lineTo(location.x + width / 2 - radius, location.y - height / 2);
-  ctx.quadraticCurveTo(location.x + width / 2, location.y - height / 2, location.x + width / 2, location.y - height / 2 + radius);
-  ctx.lineTo(location.x + width / 2, location.y + height / 2 - radius);
-  ctx.quadraticCurveTo(location.x + width / 2, location.y + height / 2, location.x + width / 2 - radius, location.y + height / 2);
-  ctx.lineTo(location.x - width / 2 + radius, location.y + height / 2);
-  ctx.quadraticCurveTo(location.x - width / 2, location.y + height / 2, location.x - width / 2, location.y + height / 2 - radius);
-  ctx.lineTo(location.x - width / 2, location.y - height / 2 + radius);
-  ctx.quadraticCurveTo(location.x - width / 2, location.y - height / 2, location.x - width / 2 + radius, location.y - height / 2);
-  ctx.closePath();
-}
-
-function drawCloudBubble(ctx: CanvasRenderingContext2D, location: { x: number, y: number }, width: number, height: number) {
-  const numBumps = Math.floor(width / 40);
-  const bumpRadius = width / (numBumps * 2);
-
-  ctx.beginPath();
-  ctx.moveTo(location.x - width / 2 + bumpRadius, location.y);
-
-  // Top
-  for (let i = 0; i < numBumps; i++) {
-    const x = location.x - width / 2 + (i * 2 + 1) * bumpRadius;
-    const y = location.y - height / 2;
-    ctx.quadraticCurveTo(x, y - bumpRadius / 2, x + bumpRadius, y);
-  }
-
-  // Right
-  for (let i = 0; i < numBumps / 2; i++) {
-    const x = location.x + width / 2;
-    const y = location.y - height / 2 + (i * 2 + 1) * bumpRadius * 2;
-    ctx.quadraticCurveTo(x + bumpRadius / 2, y, x, y + bumpRadius * 2);
-  }
-
-  // Bottom
-  for (let i = numBumps; i > 0; i--) {
-    const x = location.x - width / 2 + (i * 2 - 1) * bumpRadius;
-    const y = location.y + height / 2;
-    ctx.quadraticCurveTo(x, y + bumpRadius / 2, x - bumpRadius, y);
-  }
-
-  // Left
-  for (let i = numBumps / 2; i > 0; i--) {
-    const x = location.x - width / 2;
-    const y = location.y - height / 2 + (i * 2 - 1) * bumpRadius * 2;
-    ctx.quadraticCurveTo(x - bumpRadius / 2, y, x, y - bumpRadius * 2);
-  }
-  ctx.closePath();
-}
-
-function drawThoughtBubble(ctx: CanvasRenderingContext2D, location: { x: number, y: number }, width: number, height: number) {
-  drawCloudBubble(ctx, location, width, height);
-  // The tail for thought bubbles is handled in the drawTail function
-}
-
-function wrapText(ctx: CanvasRenderingContext2D, text: string, maxWidth: number, lineHeight: number): string[] {
-  const words = text.split(' ');
-  const lines: string[] = [];
-  let currentLine = '';
-
-  for (const word of words) {
-    const testLine = currentLine + (currentLine ? ' ' : '') + word;
-    const metrics = ctx.measureText(testLine);
-    
-    if (metrics.width > maxWidth) {
-      lines.push(currentLine);
-      currentLine = word;
-    } else {
-      currentLine = testLine;
-    }
-  }
-  
-  if (currentLine) {
-    lines.push(currentLine);
-  }
-
-  return lines;
-}
-
-function measureTextDimensions(ctx: CanvasRenderingContext2D, lines: string[], lineHeight: number): { width: number, height: number } {
-  let maxWidth = 0;
-  const height = lineHeight * lines.length;
-
-  for (const line of lines) {
-    const metrics = ctx.measureText(line);
-    maxWidth = Math.max(maxWidth, metrics.width);
-  }
-
-  return { width: maxWidth, height };
-}
-
-function drawFormattedText(ctx: CanvasRenderingContext2D, lines: string[], x: number, y: number, maxWidth: number, lineHeight: number) {
-  const totalHeight = lineHeight * lines.length;
-  let startY = y - totalHeight / 2 + lineHeight / 2;
-
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i];
-    const lineY = startY + i * lineHeight;
-    ctx.fillText(line, x, lineY, maxWidth);
-  }
-}

src/lib/createLlamaPrompt.ts

@@ -3,7 +3,7 @@ export function createLlamaPrompt(messages: Array<{ role: string, content: strin
   const B_INST = "[INST]", E_INST = "[/INST]";
   const B_SYS = "<<SYS>>\n", E_SYS = "\n<</SYS>>\n\n";
   const BOS = "<s>", EOS = "</s>";
-  const DEFAULT_SYSTEM_PROMPT = "You are a helpful, respectful and honest storywriting assistant. Always answer in a creative and entertaining way, while being safe. Please ensure that your stories, speeches and captions are socially unbiased and positive in nature. If a request does not make any sense, go on anyway, as we are writing a fantasy story.";
+  const DEFAULT_SYSTEM_PROMPT = "You are a helpful, respectful and honest storywriting assistant. Always answer in a creative and entertaining way, while being safe. Please ensure that your stories and captions are socially unbiased and positive in nature. If a request does not make any sense, go on anyway, as we are writing a fantasy story.";
 
   if (messages[0].role != "system"){
       messages = [

src/lib/dirtyGeneratedPanelCleaner.ts

@@ -3,10 +3,8 @@ import { GeneratedPanel } from "@/types"
 export function dirtyGeneratedPanelCleaner({
   panel,
   instructions,
-  speech,
   caption
 }: GeneratedPanel): GeneratedPanel {
-  let newSpeech = `${speech || ""}`.split(":").pop()?.trim() || ""
   let newCaption = `${caption || ""}`.split(":").pop()?.trim() || ""
   let newInstructions = (
     // need to remove from LLM garbage here, too
@@ -36,7 +34,6 @@ export function dirtyGeneratedPanelCleaner({
   return {
     panel,
     instructions: newInstructions,
-    speech: newSpeech,
     caption: newCaption,
   }
 }

src/lib/dirtyGeneratedPanelsParser.ts

@@ -14,18 +14,15 @@ export function dirtyGeneratedPanelsParser(input: string): GeneratedPanel[] {
 
   const results = jsonData.map((item, i) => {
     let panel = i
-    let speech = item.speech ? item.speech.trim() : ''
     let caption = item.caption ? item.caption.trim() : ''
     let instructions = item.instructions ? item.instructions.trim() : ''
-    if (!instructions && !caption && speech) {
-      instructions = speech
-    } else if (!instructions && caption) {
+    if (!instructions && caption) {
       instructions = caption
     } 
     if (!caption && instructions) {
       caption = instructions
     }
-    return { panel, speech, caption, instructions }
+    return { panel, caption, instructions }
   })
 
   return results

src/lib/fileToBase64.ts

@@ -1,8 +0,0 @@
-export function fileToBase64(file: File | Blob): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const fileReader = new FileReader();
-    fileReader.readAsDataURL(file);
-    fileReader.onload = () => { resolve(`${fileReader.result}`); };
-    fileReader.onerror = (error) => { reject(error); };
-  });
-}

src/lib/getImageDimension.ts

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

src/lib/getLocalStorageShowSpeeches.ts

@@ -1,13 +0,0 @@
-export function getLocalStorageShowSpeeches(defaultValue: boolean): boolean {
-  try {
-    const result = localStorage.getItem("AI_COMIC_FACTORY_SHOW_SPEECHES")
-    if (typeof result !== "string") {
-      return defaultValue
-    }
-    if (result === "true") { return true }
-    if (result === "false") { return false }
-    return defaultValue
-  } catch (err) {
-    return defaultValue
-  }
-}