massive refactoring

package-lock.json

@@ -10,7 +10,7 @@
       "dependencies": {
         "@aitube/clap": "0.0.24",
         "@aitube/engine": "0.0.15",
-        "@aitube/timeline": "0.0.15",
+        "@aitube/timeline": "file:/Users/jbilcke/Projects/Typescript_Libraries/aitube-timeline",
         "@fal-ai/serverless-client": "^0.10.3",
         "@huggingface/hub": "^0.15.0",
         "@huggingface/inference": "^2.7.0",
@@ -86,33 +86,28 @@
         "zustand": "^4.5.2"
       }
     },
-    "node_modules/@aitube/clap": {
-      "version": "0.0.24",
-      "resolved": "https://registry.npmjs.org/@aitube/clap/-/clap-0.0.24.tgz",
-      "integrity": "sha512-iMmxyPmVh1LWNUlWKK2rRnCSZ/CLmBeb1ADNr5pj0dFI51NNezipYXjZv9dBOb5y3FKBkL+jbEcy7kQFgKHhpw==",
-      "dependencies": {
-        "pure-uuid": "^1.8.1"
-      },
-      "peerDependencies": {
-        "yaml": "^2.4.3"
-      }
-    },
-    "node_modules/@aitube/engine": {
-      "version": "0.0.15",
-      "resolved": "https://registry.npmjs.org/@aitube/engine/-/engine-0.0.15.tgz",
-      "integrity": "sha512-SxlTGOLHNPh93PY/hCXuNgCUWV7Uky9Q4mBKS4uA7+gReeYBT//x/sAWqIvV8MEj2dkx1Br3iTse1/rcVay49w==",
-      "peerDependencies": {
-        "@aitube/clap": "0.0.24"
-      }
-    },
-    "node_modules/@aitube/timeline": {
+    "../Typescript_Libraries/aitube-timeline": {
       "version": "0.0.15",
-      "resolved": "https://registry.npmjs.org/@aitube/timeline/-/timeline-0.0.15.tgz",
-      "integrity": "sha512-goteHbDvdvT3PNNDf41G3tXCwatbFDS8nSDynixHUZiqlf47oCevJBgFmS1cbt1t6Cmn118BZjJL2qUMqM697A==",
+      "license": "MIT",
       "dependencies": {
         "date-fns": "^3.6.0",
         "react-virtualized-auto-sizer": "^1.0.24"
       },
+      "devDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "@typescript-eslint/eslint-plugin": "^7.2.0",
+        "@typescript-eslint/parser": "^7.2.0",
+        "@vitejs/plugin-react": "^4.2.1",
+        "bun-types": "latest",
+        "eslint": "^8.57.0",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-react-refresh": "^0.4.6",
+        "prettier": "^3.3.0",
+        "rimraf": "^5.0.7",
+        "typescript": "^5.4.5",
+        "vite": "^5.2.0"
+      },
       "peerDependencies": {
         "@aitube/clap": "0.0.24",
         "@radix-ui/react-slider": "^1.1.2",
@@ -130,6 +125,29 @@
         "zustand": "4.5.2"
       }
     },
+    "node_modules/@aitube/clap": {
+      "version": "0.0.24",
+      "resolved": "https://registry.npmjs.org/@aitube/clap/-/clap-0.0.24.tgz",
+      "integrity": "sha512-iMmxyPmVh1LWNUlWKK2rRnCSZ/CLmBeb1ADNr5pj0dFI51NNezipYXjZv9dBOb5y3FKBkL+jbEcy7kQFgKHhpw==",
+      "dependencies": {
+        "pure-uuid": "^1.8.1"
+      },
+      "peerDependencies": {
+        "yaml": "^2.4.3"
+      }
+    },
+    "node_modules/@aitube/engine": {
+      "version": "0.0.15",
+      "resolved": "https://registry.npmjs.org/@aitube/engine/-/engine-0.0.15.tgz",
+      "integrity": "sha512-SxlTGOLHNPh93PY/hCXuNgCUWV7Uky9Q4mBKS4uA7+gReeYBT//x/sAWqIvV8MEj2dkx1Br3iTse1/rcVay49w==",
+      "peerDependencies": {
+        "@aitube/clap": "0.0.24"
+      }
+    },
+    "node_modules/@aitube/timeline": {
+      "resolved": "../Typescript_Libraries/aitube-timeline",
+      "link": true
+    },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -3281,9 +3299,9 @@
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ=="
     },
     "node_modules/@upstash/core-analytics": {
-      "version": "0.0.8",
-      "resolved": "https://registry.npmjs.org/@upstash/core-analytics/-/core-analytics-0.0.8.tgz",
-      "integrity": "sha512-MCJoF+Y8fkzq4NRLG7kEHjtGyMsZ2DICBdmEdwoK9umoSrfkzgBlYdZiHTIaewyt9PGaMZCHOasz0LAuMpxwxQ==",
+      "version": "0.0.9",
+      "resolved": "https://registry.npmjs.org/@upstash/core-analytics/-/core-analytics-0.0.9.tgz",
+      "integrity": "sha512-9NXXxZ5y1/A/zqKLlVT7NsAWSggJfOjB0hG6Ffx29b4jbzHOiQVWB55h5+j2clT9Ib+mNPXn0iB5zN3aWLkICw==",
       "dependencies": {
         "@upstash/redis": "^1.28.3"
       },
@@ -3292,11 +3310,11 @@
       }
     },
     "node_modules/@upstash/ratelimit": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@upstash/ratelimit/-/ratelimit-1.1.3.tgz",
-      "integrity": "sha512-rl+GMvPdZJ9xPDIvIrqRl/g0nzAEaH75hwR5lXAKW8zPPplD/AeliDCHwuwcFCPIjg49FKyA1oc5H473WkVFrQ==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@upstash/ratelimit/-/ratelimit-1.2.0.tgz",
+      "integrity": "sha512-03mNBUNz9EvIJCxhU0OtFWO3OSQE4gShFBlGph+hDPm9k7O75We1NYS/tCXSdmLVXtOvUGSmi5fyKQLBTEGWxw==",
       "dependencies": {
-        "@upstash/core-analytics": "^0.0.8"
+        "@upstash/core-analytics": "^0.0.9"
       }
     },
     "node_modules/@upstash/redis": {
@@ -4515,15 +4533,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/date-fns": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
-      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/kossnocorp"
-      }
-    },
     "node_modules/debounce": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
@@ -4746,9 +4755,9 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.793",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.793.tgz",
-      "integrity": "sha512-eGGzOCtlwNLVoMgOAXKLvesX6X7HM/KMJ+3x/yjcCBbZfpFhQvZUFvhnHxJT3jHJ8RpstR5npd0krWLPTCoh0g=="
+      "version": "1.4.794",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.794.tgz",
+      "integrity": "sha512-6FApLtsYhDCY0Vglq3AptsdxQ+PJLc6AxlAM0HjEihUAiOPPbkASEsq9gtxUeZY9o0sJIEa3WnF0vVH4VT4iug=="
     },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
@@ -8171,15 +8180,6 @@
         "react-dom": ">=16.13"
       }
     },
-    "node_modules/react-virtualized-auto-sizer": {
-      "version": "1.0.24",
-      "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.24.tgz",
-      "integrity": "sha512-3kCn7N9NEb3FlvJrSHWGQ4iVl+ydQObq2fHMn12i5wbtm74zHOPhz/i64OL3c1S1vi9i2GXtZqNqUJTQ+BnNfg==",
-      "peerDependencies": {
-        "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0",
-        "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@aitube/clap": "0.0.24",
     "@aitube/engine": "0.0.15",
-    "@aitube/timeline": "0.0.15",
+    "@aitube/timeline": "file:/Users/jbilcke/Projects/Typescript_Libraries/aitube-timeline",
     "@fal-ai/serverless-client": "^0.10.3",
     "@huggingface/hub": "^0.15.0",
     "@huggingface/inference": "^2.7.0",

src/app/api/render/providers/comfy/getComfyWorkflow.ts

@@ -9,7 +9,7 @@ export function getComfyWorkflow(request: RenderRequest) {
   let comfyWorkflow = "{}"
 
   if (request.segment.category === ClapSegmentCategory.STORYBOARD) {
-    comfyWorkflow = request.settings.comfyWorkflowForStoryboard
+    comfyWorkflow = request.settings.comfyWorkflowForImage
   } else if (request.segment.category === ClapSegmentCategory.VIDEO) {
     comfyWorkflow = request.settings.comfyWorkflowForVideo
   }

src/app/api/render/providers/falai/index.ts

@@ -48,6 +48,7 @@ export async function renderSegment(request: RenderRequest): Promise<ClapSegment
           input: {
             prompt: prompts.positivePrompt,
             image_size: imageSize,
+            num_images: 1,
             sync_mode: true,
             enable_safety_checker: request.settings.censorNotForAllAudiencesContent
           },
@@ -65,6 +66,8 @@ export async function renderSegment(request: RenderRequest): Promise<ClapSegment
             prompt: prompts.positivePrompt,
             image_size: imageSize,
             sync_mode: true,
+            num_inference_steps: 20,
+            num_images: 1,
             enable_safety_checker: request.settings.censorNotForAllAudiencesContent
           },
         }) as FalAiImageResponse
@@ -131,7 +134,7 @@ export async function renderSegment(request: RenderRequest): Promise<ClapSegment
     } else if (
       request.segment.category === ClapSegmentCategory.DIALOGUE
     ) {
-      const result = await fal.run(request.settings.falAiModelForSpeech, {
+      const result = await fal.run(request.settings.falAiModelForVoice, {
         input: {
           text: request.segment.prompt,
 

src/app/api/render/route.ts

@@ -20,11 +20,11 @@ export async function POST(req: NextRequest) {
   
   const provider =
     request.segment.category === ClapSegmentCategory.STORYBOARD
-    ? request.settings.storyboardProvider
+    ? request.settings.imageProvider
     : request.segment.category === ClapSegmentCategory.VIDEO
     ? request.settings.videoProvider
     : request.segment.category === ClapSegmentCategory.DIALOGUE
-    ? request.settings.speechProvider
+    ? request.settings.voiceProvider
     : request.segment.category === ClapSegmentCategory.SOUND
     ? request.settings.soundProvider
     : request.segment.category === ClapSegmentCategory.MUSIC

src/components/core/timeline/index.tsx

@@ -51,11 +51,11 @@ export function Timeline() {
 
   const isReady = useTimelineState(s => s.isReady)
 
-  const storyboardRenderingStrategy = useSettings(s => s.storyboardRenderingStrategy)
-  const setStoryboardRenderingStrategy = useTimelineState(s => s.setStoryboardRenderingStrategy)
+  const imageRenderingStrategy = useSettings(s => s.imageRenderingStrategy)
+  const setImageRenderingStrategy = useTimelineState(s => s.setImageRenderingStrategy)
   useEffect(() => {
-    if (isReady) setStoryboardRenderingStrategy(storyboardRenderingStrategy)
-  }, [isReady, setStoryboardRenderingStrategy, storyboardRenderingStrategy])
+    if (isReady) setImageRenderingStrategy(imageRenderingStrategy)
+  }, [isReady, setImageRenderingStrategy, imageRenderingStrategy])
   
   const videoRenderingStrategy = useSettings(s => s.videoRenderingStrategy)
   const setVideoRenderingStrategy = useTimelineState(s => s.setVideoRenderingStrategy)

src/components/settings/assistant.tsx

@@ -3,7 +3,7 @@ import { useSettings } from "@/controllers/settings"
 import { ComputeProvider } from "@/types"
 
 import { FormSelect } from "../forms/FormSelect"
-import { availableComputeProvidersForAssistant } from "./constants"
+import { availableComputeProvidersForAssistant, computeProviderShortNames } from "./constants"
 
 export function SettingsSectionAssistant() {
   const assistantProvider = useSettings(s => s.assistantProvider)
@@ -17,18 +17,19 @@ export function SettingsSectionAssistant() {
           label="Assistant provider"
           selectedItemId={assistantProvider}
           selectedItemLabel={
-            (availableComputeProvidersForAssistant as any)[assistantProvider]
+            computeProviderShortNames[assistantProvider]
             || ComputeProvider.NONE
           }
-          items={Object.entries(availableComputeProvidersForAssistant).map(([provider, label]) => ({
+          items={availableComputeProvidersForAssistant.map(provider => ({
             id: provider,
-            label,
+            label: computeProviderShortNames[provider] || "(missing name)",
             disabled: false,
-            value: provider as ComputeProvider,
+            value: provider,
           }))}
           onSelect={setAssistantProvider}
           horizontal
         />
+
       </FormSection>
     </div>
   )

src/components/settings/constants.ts

@@ -1,73 +1,73 @@
 import { ComfyIcuAccelerator, ComputeProvider } from "@/types"
 
-export const availableComputeProviders = {
-  [ComputeProvider.NONE]: "No default provider",
-  [ComputeProvider.HUGGINGFACE]: "HuggingFace",
-  [ComputeProvider.REPLICATE]: "Replicate (Cog & ComfyUI)",
-  [ComputeProvider.COMFY_COMFYICU]: "Comfy.icu (ComfyUI workflow)",
-  [ComputeProvider.FALAI]: "Fal.ai",
-  [ComputeProvider.MODELSLAB]: "ModelsLab",
-  // [ComputeProvider.CUSTOM]: "Custom server",
-}
 
-export const availableComputeProvidersForAssistant = {
-  [ComputeProvider.NONE]: "No assistant provider",
-  [ComputeProvider.HUGGINGFACE]: "Hugging Face (Inference API)",
+export const computeProviderShortNames = {
+  [ComputeProvider.NONE]: "None",
+  [ComputeProvider.CUSTOM]: "Custom API",
+  [ComputeProvider.HUGGINGFACE]: "Hugging Face",
+  [ComputeProvider.COMFY_HUGGINGFACE]: "Hugging Face Comfy",
+  [ComputeProvider.REPLICATE]: "Replicate",
+  [ComputeProvider.COMFY_REPLICATE]: "Replicate Comfy",
+  [ComputeProvider.COMFY_COMFYICU]: "Comfy.icu",
+  [ComputeProvider.ELEVENLABS]: "ElevenLabs",
+  [ComputeProvider.OPENAI]: "OpenAI",
+  [ComputeProvider.STABILITYAI]: "StabilityAI",
   [ComputeProvider.GROQ]: "Groq",
-  [ComputeProvider.OPENAI]: "OpenAI (ChatGPT)",
-}
-
-export const availableComputeProvidersForStoryboards = {
-  [ComputeProvider.NONE]: "No storyboard provider",
-  [ComputeProvider.HUGGINGFACE]: "HuggingFace",
-  [ComputeProvider.REPLICATE]: "Replicate (Cog API)",
-  [ComputeProvider.COMFY_REPLICATE]: "Replicate (Comfy API)",
-  [ComputeProvider.COMFY_COMFYICU]: "Comfy.icu (Comfy API)",
   [ComputeProvider.FALAI]: "Fal.ai",
-  [ComputeProvider.MODELSLAB]: "ModelsLab.com",
+  [ComputeProvider.MODELSLAB]: "ModelsLab"
 }
 
-export const availableComputeProvidersForVideos = {
-  [ComputeProvider.NONE]: "No video provider",
-  [ComputeProvider.HUGGINGFACE]: "HuggingFace",
-  [ComputeProvider.REPLICATE]: "Replicate (Cog API)",
-  [ComputeProvider.COMFY_REPLICATE]: "Replicate (Comfy API)",
-  [ComputeProvider.COMFY_COMFYICU]: "Comfy.icu (Comfy API)",
-  [ComputeProvider.FALAI]: "Fal.ai",
-  [ComputeProvider.MODELSLAB]: "ModelsLab.com",
-}
+export const availableComputeProvidersForAssistant = [
+  ComputeProvider.HUGGINGFACE,
+  ComputeProvider.GROQ,
+  ComputeProvider.OPENAI,
+]
 
-export const availableComputeProvidersForMusic = {
-  [ComputeProvider.NONE]: "No music provider",
-  [ComputeProvider.HUGGINGFACE]: "HuggingFace",
-  [ComputeProvider.COMFY_REPLICATE]: "Replicate (Comfy API)",
-  [ComputeProvider.COMFY_COMFYICU]: "Comfy.icu (Comfy API)",
-  [ComputeProvider.STABILITYAI]: "StabilityAI (Stable Audio API)",
-  [ComputeProvider.FALAI]: "Fal.ai",
-  [ComputeProvider.MODELSLAB]: "ModelsLab.com",
-}
+export const availableComputeProvidersForImages = [
+  ComputeProvider.HUGGINGFACE,
+  ComputeProvider.REPLICATE,
+  ComputeProvider.COMFY_REPLICATE,
+  ComputeProvider.COMFY_COMFYICU,
+  ComputeProvider.FALAI,
+  ComputeProvider.MODELSLAB,
+]
 
-export const availableComputeProvidersForSound = {
-  [ComputeProvider.NONE]: "No sound provider",
-  [ComputeProvider.HUGGINGFACE]: "HuggingFace",
-  [ComputeProvider.COMFY_REPLICATE]: "Replicate (Comfy API)",
-  [ComputeProvider.COMFY_COMFYICU]: "Comfy.icu (Comfy API)",
-  [ComputeProvider.STABILITYAI]: "StabilityAI (Stable Audio API)",
-  [ComputeProvider.FALAI]: "Fal.ai",
-  [ComputeProvider.ELEVENLABS]: "Eleven Labs (Sound Effects API)",
+export const availableComputeProvidersForVideos = [
+  ComputeProvider.HUGGINGFACE,
+  ComputeProvider.REPLICATE,
+  ComputeProvider.COMFY_REPLICATE,
+  ComputeProvider.COMFY_COMFYICU,
+  ComputeProvider.FALAI,
+  ComputeProvider.MODELSLAB,
+]
 
-}
+export const availableComputeProvidersForMusic = [
+  ComputeProvider.HUGGINGFACE,
+  ComputeProvider.COMFY_REPLICATE,
+  ComputeProvider.COMFY_COMFYICU,
+  ComputeProvider.STABILITYAI,
+  ComputeProvider.FALAI,
+  ComputeProvider.MODELSLAB,
+]
 
-export const availableComputeProvidersForSpeech = {
-  [ComputeProvider.NONE]: "No speech provider",
-  [ComputeProvider.ELEVENLABS]: "Eleven Labs (TTS API)",
-  [ComputeProvider.STABILITYAI]: "StabilityAI (Stable Audio API)",
-  [ComputeProvider.HUGGINGFACE]: "HuggingFace",
-  [ComputeProvider.COMFY_REPLICATE]: "Replicate (Comfy API)",
-  [ComputeProvider.COMFY_COMFYICU]: "Comfy.icu (Comfy API)",
-  [ComputeProvider.FALAI]: "Fal.ai",
-  [ComputeProvider.MODELSLAB]: "ModelsLab.com",
-}
+export const availableComputeProvidersForSound = [
+  ComputeProvider.HUGGINGFACE,
+  ComputeProvider.COMFY_REPLICATE,
+  ComputeProvider.COMFY_COMFYICU,
+  ComputeProvider.STABILITYAI,
+  ComputeProvider.FALAI,
+  ComputeProvider.ELEVENLABS,
+]
+
+export const availableComputeProvidersForVoice = [
+  ComputeProvider.ELEVENLABS,
+  ComputeProvider.STABILITYAI,
+  ComputeProvider.HUGGINGFACE,
+  ComputeProvider.COMFY_REPLICATE,
+  ComputeProvider.COMFY_COMFYICU,
+  ComputeProvider.FALAI,
+  ComputeProvider.MODELSLAB,
+]
 
 export const availableComfyIcuAccelerators = {
   [ComfyIcuAccelerator.L4]: "L4",
@@ -76,4 +76,4 @@ export const availableComfyIcuAccelerators = {
   [ComfyIcuAccelerator.A100_40GB]: "A100 (40 GB)",
   [ComfyIcuAccelerator.A100_80GB]: "A100 (80 GB)",
   [ComfyIcuAccelerator.H100]: "H100",
-}
+}

src/components/settings/{storyboard.tsx → image.tsx}

@@ -3,14 +3,14 @@ import { getDefaultSettingsState, useSettings } from "@/controllers/settings"
 
 import { FormInput } from "../forms/FormInput"
 import { ComputeProvider } from "@/types"
-import { availableComputeProvidersForStoryboards } from "./constants"
+import { availableComputeProvidersForImages, computeProviderShortNames } from "./constants"
 import { FormSelect } from "../forms/FormSelect"
 
-export function SettingsSectionStoryboard() {
+export function SettingsSectionImage() {
   const defaultSettings = getDefaultSettingsState()
 
-  const storyboardProvider = useSettings(s => s.storyboardProvider)
-  const setStoryboardProvider = useSettings(s => s.setStoryboardProvider)
+  const imageProvider = useSettings(s => s.imageProvider)
+  const setImageProvider = useSettings(s => s.setImageProvider)
 
   const huggingFaceModelForImage = useSettings(s => s.huggingFaceModelForImage)
   const setHuggingFaceModelForImage = useSettings(s => s.setHuggingFaceModelForImage)
@@ -24,101 +24,102 @@ export function SettingsSectionStoryboard() {
   const modelsLabModelForImage = useSettings(s => s.modelsLabModelForImage)
   const setModelsLabModelForImage = useSettings(s => s.setModelsLabModelForImage)
 
-  const storyboardPromptPrefix = useSettings(s => s.storyboardPromptPrefix)
-  const setStoryboardPromptPrefix = useSettings(s => s.setStoryboardPromptPrefix)
+  const imagePromptPrefix = useSettings(s => s.imagePromptPrefix)
+  const setImagePromptPrefix = useSettings(s => s.setImagePromptPrefix)
 
-  const storyboardPromptSuffix = useSettings(s => s.storyboardPromptSuffix)
-  const setStoryboardPromptSuffix = useSettings(s => s.setStoryboardPromptSuffix)
+  const imagePromptSuffix = useSettings(s => s.imagePromptSuffix)
+  const setImagePromptSuffix = useSettings(s => s.setImagePromptSuffix)
 
-  const storyboardNegativePrompt = useSettings(s => s.storyboardNegativePrompt)
-  const setStoryboardNegativePrompt = useSettings(s => s.setStoryboardNegativePrompt)
+  const imageNegativePrompt = useSettings(s => s.imageNegativePrompt)
+  const setImageNegativePrompt = useSettings(s => s.setImageNegativePrompt)
 
-  const maxStoryboardsToGenerateInParallel = useSettings(s => s.maxStoryboardsToGenerateInParallel)
-  const setMaxStoryboardsToGenerateInParallel = useSettings(s => s.setMaxStoryboardsToGenerateInParallel)
+  const maxImagesToGenerateInParallel = useSettings(s => s.maxImagesToGenerateInParallel)
+  const setMaxImagesToGenerateInParallel = useSettings(s => s.setMaxImagesToGenerateInParallel)
 
-  const comfyWorkflowForStoryboard = useSettings(s => s.comfyWorkflowForStoryboard)
-  const setComfyWorkflowForStoryboard = useSettings(s => s.setComfyWorkflowForStoryboard)
+  const comfyWorkflowForImage = useSettings(s => s.comfyWorkflowForImage)
+  const setComfyWorkflowForImage = useSettings(s => s.setComfyWorkflowForImage)
 
   return (
     <div className="flex flex-col space-y-6 justify-between">
-      <FormSection label="Storyboard rendering">
+      <FormSection label="Image rendering">
    
+
         <FormSelect<ComputeProvider>
-          label="Storyboard provider"
-          selectedItemId={storyboardProvider}
+          label="Image provider"
+          selectedItemId={imageProvider}
           selectedItemLabel={
-            (availableComputeProvidersForStoryboards as any)[storyboardProvider]
+            computeProviderShortNames[imageProvider]
             || ComputeProvider.NONE
           }
-          items={Object.entries(availableComputeProvidersForStoryboards).map(([provider, label]) => ({
+          items={availableComputeProvidersForImages.map(provider => ({
             id: provider,
-            label,
+            label: computeProviderShortNames[provider] || "(missing name)",
             disabled: false,
-            value: provider as ComputeProvider,
+            value: provider,
           }))}
-          onSelect={setStoryboardProvider}
+          onSelect={setImageProvider}
           horizontal
         />
 
         <FormInput
-          label="Number of storyboards to render in parallel (not used yet)"
-          value={maxStoryboardsToGenerateInParallel}
-          defaultValue={defaultSettings.maxStoryboardsToGenerateInParallel}
-          onChange={setMaxStoryboardsToGenerateInParallel}
+          label="Number of images to render in parallel (not used yet)"
+          value={maxImagesToGenerateInParallel}
+          defaultValue={defaultSettings.maxImagesToGenerateInParallel}
+          onChange={setMaxImagesToGenerateInParallel}
         />
         
         <FormInput
           label="Default prompt prefix"
-          value={storyboardPromptPrefix}
-          defaultValue={defaultSettings.storyboardPromptPrefix}
-          onChange={setStoryboardPromptPrefix}
+          value={imagePromptPrefix}
+          defaultValue={defaultSettings.imagePromptPrefix}
+          onChange={setImagePromptPrefix}
         />
 
         <FormInput
           label="Default prompt suffix"
-          value={storyboardPromptSuffix}
-          defaultValue={defaultSettings.storyboardPromptSuffix}
-          onChange={setStoryboardPromptSuffix}
+          value={imagePromptSuffix}
+          defaultValue={defaultSettings.imagePromptSuffix}
+          onChange={setImagePromptSuffix}
         />
 
          <FormInput
           label="Default negative prompt"
-          value={storyboardNegativePrompt}
-          defaultValue={defaultSettings.storyboardNegativePrompt}
-          onChange={setStoryboardNegativePrompt}
+          value={imageNegativePrompt}
+          defaultValue={defaultSettings.imageNegativePrompt}
+          onChange={setImageNegativePrompt}
         />
 
-        {storyboardProvider.startsWith("COMFY_")
+        {imageProvider.startsWith("COMFY_")
          ? <>
           <FormInput
-            label="Default Comfy workflow template for storyboards"
-            value={comfyWorkflowForStoryboard}
-            defaultValue={defaultSettings.comfyWorkflowForStoryboard}
-            onChange={setComfyWorkflowForStoryboard}
+            label="Default Comfy workflow template for images"
+            value={comfyWorkflowForImage}
+            defaultValue={defaultSettings.comfyWorkflowForImage}
+            onChange={setComfyWorkflowForImage}
           />
 
          </>
         : // "proprietary" parameters
           <>
-            {storyboardProvider === ComputeProvider.HUGGINGFACE && <FormInput
+            {imageProvider === ComputeProvider.HUGGINGFACE && <FormInput
               label="HF Model ID (must be compatible with the Inference API)"
               value={huggingFaceModelForImage}
               defaultValue={defaultSettings.huggingFaceModelForImage}
               onChange={setHuggingFaceModelForImage}
             />}
-            {storyboardProvider === ComputeProvider.REPLICATE && <FormInput
+            {imageProvider === ComputeProvider.REPLICATE && <FormInput
               label="Replicate.com model ID"
               value={replicateModelForImage}
               defaultValue={defaultSettings.replicateModelForImage}
               onChange={setReplicateModelForImage}
             />}
-            {storyboardProvider === ComputeProvider.FALAI && <FormInput
+            {imageProvider === ComputeProvider.FALAI && <FormInput
               label="Fal.ai model ID"
               value={falAiModelForImage}
               defaultValue={defaultSettings.falAiModelForImage}
               onChange={setFalAiModelForImage}
             />}
-            {storyboardProvider === ComputeProvider.MODELSLAB && <FormInput
+            {imageProvider === ComputeProvider.MODELSLAB && <FormInput
               label="ModelsLab.com model ID"
               value={modelsLabModelForImage}
               defaultValue={defaultSettings.modelsLabModelForImage}

src/components/settings/index.tsx

@@ -8,11 +8,11 @@ import { useUI } from "@/controllers/ui"
 
 import { SettingsSectionProvider } from "./provider"
 import { SettingsSectionAssistant } from "./assistant"
-import { SettingsSectionStoryboard } from "./storyboard"
+import { SettingsSectionImage } from "./image"
 import { SettingsSectionVideo } from "./video"
 import { SettingsSectionSound } from "./sound"
 import { SettingsSectionMusic } from "./music"
-import { SettingsSectionSpeech } from "./speech"
+import { SettingsSectionVoice } from "./voice"
 
 export function SettingsDialog() {
 
@@ -23,9 +23,9 @@ export function SettingsDialog() {
   const panels = {
     provider: <SettingsSectionProvider />,
     assistant: <SettingsSectionAssistant />,
-    storyboard: <SettingsSectionStoryboard />,
+    image: <SettingsSectionImage />,
     video: <SettingsSectionVideo />,
-    speech: <SettingsSectionSpeech />,
+    voice: <SettingsSectionVoice />,
     music: <SettingsSectionMusic />,
     sound: <SettingsSectionSound />,
   }
@@ -33,9 +33,9 @@ export function SettingsDialog() {
   const panelLabels = {
     provider: "Providers",
     assistant: "Assistant",
-    storyboard: "Image",
+    image: "Image",
     video: "Video",
-    speech: "Speech",
+    voice: "Voice",
     music: "Music",
     sound: "Sound",
   } as any

src/components/settings/music.tsx

@@ -3,7 +3,7 @@ import { getDefaultSettingsState, useSettings } from "@/controllers/settings"
 import { ComputeProvider } from "@/types"
 
 import { FormSelect } from "../forms/FormSelect"
-import { availableComputeProvidersForMusic } from "./constants"
+import { availableComputeProvidersForMusic, computeProviderShortNames } from "./constants"
 import { FormInput } from "../forms/FormInput"
 
 export function SettingsSectionMusic() {
@@ -35,14 +35,14 @@ export function SettingsSectionMusic() {
           label="Music provider"
           selectedItemId={musicProvider}
           selectedItemLabel={
-            (availableComputeProvidersForMusic as any)[musicProvider]
+            computeProviderShortNames[musicProvider]
             || ComputeProvider.NONE
           }
-          items={Object.entries(availableComputeProvidersForMusic).map(([provider, label]) => ({
+          items={availableComputeProvidersForMusic.map(provider => ({
             id: provider,
-            label,
+            label: computeProviderShortNames[provider] || "(missing name)",
             disabled: false,
-            value: provider as ComputeProvider,
+            value: provider,
           }))}
           onSelect={setMusicProvider}
           horizontal

src/components/settings/sound.tsx

@@ -3,7 +3,7 @@ import { getDefaultSettingsState, useSettings } from "@/controllers/settings"
 import { ComputeProvider } from "@/types"
 
 import { FormSelect } from "../forms/FormSelect"
-import { availableComputeProvidersForSound } from "./constants"
+import { availableComputeProvidersForSound, computeProviderShortNames } from "./constants"
 import { FormInput } from "../forms/FormInput"
 
 export function SettingsSectionSound() {
@@ -35,14 +35,14 @@ export function SettingsSectionSound() {
           label="Sound provider"
           selectedItemId={soundProvider}
           selectedItemLabel={
-            (availableComputeProvidersForSound as any)[soundProvider]
+            computeProviderShortNames[soundProvider]
             || ComputeProvider.NONE
           }
-          items={Object.entries(availableComputeProvidersForSound).map(([provider, label]) => ({
+          items={availableComputeProvidersForSound.map(provider => ({
             id: provider,
-            label,
+            label: computeProviderShortNames[soundProvider] || "(missing name)",
             disabled: false,
-            value: provider as ComputeProvider,
+            value: provider,
           }))}
           onSelect={setSoundProvider}
           horizontal

src/components/settings/speech.tsx

@@ -1,87 +0,0 @@
-import { FormSection } from "@/components/forms/FormSection"
-import { getDefaultSettingsState, useSettings } from "@/controllers/settings"
-import { ComputeProvider } from "@/types"
-
-import { FormSelect } from "../forms/FormSelect"
-import { availableComputeProvidersForSpeech } from "./constants"
-import { FormInput } from "../forms/FormInput"
-
-export function SettingsSectionSpeech() {
-  const defaultSettings = getDefaultSettingsState()
-  
-  const speechProvider = useSettings(s => s.speechProvider)
-  const setSpeechProvider = useSettings(s => s.setSpeechProvider)
-
-  const huggingFaceModelForSpeech = useSettings(s => s.huggingFaceModelForSpeech)
-  const setHuggingFaceModelForSpeech = useSettings(s => s.setHuggingFaceModelForSpeech)
-
-  const replicateModelForSpeech = useSettings(s => s.replicateModelForSpeech)
-  const setReplicateModelForSpeech = useSettings(s => s.setReplicateModelForSpeech)
-
-  const falAiModelForSpeech = useSettings(s => s.falAiModelForSpeech)
-  const setFalAiModelForSpeech = useSettings(s => s.setFalAiModelForSpeech)
-
-  const modelsLabModelForSpeech = useSettings(s => s.modelsLabModelForSpeech)
-  const setModelsLabModelForSpeech = useSettings(s => s.setModelsLabModelForSpeech)
-
-  const comfyWorkflowForSpeech = useSettings(s => s.comfyWorkflowForSpeech)
-  const setComfyWorkflowForSpeech = useSettings(s => s.setComfyWorkflowForSpeech)
-
-  return (
-    <div className="flex flex-col space-y-6 justify-between">
-      <FormSection label="Speech rendering">
-
-        <FormSelect<ComputeProvider>
-          label="Speech provider"
-          selectedItemId={speechProvider}
-          selectedItemLabel={
-            (availableComputeProvidersForSpeech as any)[speechProvider]
-            || ComputeProvider.NONE
-          }
-          items={Object.entries(availableComputeProvidersForSpeech).map(([provider, label]) => ({
-            id: provider,
-            label,
-            disabled: false,
-            value: provider as ComputeProvider,
-          }))}
-          onSelect={setSpeechProvider}
-          horizontal
-        />
-     {speechProvider.startsWith("COMFY_")
-         ? <FormInput
-          label="Default Comfy workflow template for speech"
-          value={comfyWorkflowForSpeech}
-          defaultValue={defaultSettings.comfyWorkflowForSpeech}
-          onChange={setComfyWorkflowForSpeech}
-        />
-        : // "proprietary" parameters
-          <>
-            {speechProvider === ComputeProvider.HUGGINGFACE && <FormInput
-              label="HF Model ID (must be compatible with the Inference API)"
-              value={huggingFaceModelForSpeech}
-              defaultValue={defaultSettings.huggingFaceModelForSpeech}
-              onChange={setHuggingFaceModelForSpeech}
-            />}
-            {speechProvider === ComputeProvider.REPLICATE && <FormInput
-              label="Replicate.com model ID"
-              value={replicateModelForSpeech}
-              defaultValue={defaultSettings.replicateModelForSpeech}
-              onChange={setReplicateModelForSpeech}
-            />}
-            {speechProvider === ComputeProvider.FALAI && <FormInput
-              label="Fal.ai model ID"
-              value={falAiModelForSpeech}
-              defaultValue={defaultSettings.falAiModelForSpeech}
-              onChange={setFalAiModelForSpeech}
-            />}
-            {speechProvider === ComputeProvider.MODELSLAB && <FormInput
-              label="ModelsLab.com model ID"
-              value={modelsLabModelForSpeech}
-              defaultValue={defaultSettings.modelsLabModelForSpeech}
-              onChange={setModelsLabModelForSpeech}
-            />}
-          </>}
-      </FormSection>
-    </div>
-  )
-}

src/components/settings/video.tsx

@@ -4,7 +4,7 @@ import { FormSelect } from "../forms/FormSelect"
 import { ComputeProvider } from "@/types"
 import { FormInput } from "../forms/FormInput"
 import { APP_NAME } from "@/lib/core/constants"
-import { availableComputeProvidersForVideos } from "./constants"
+import { availableComputeProvidersForVideos, computeProviderShortNames } from "./constants"
 
 export function SettingsSectionVideo() {
   const defaultSettings = getDefaultSettingsState()
@@ -51,14 +51,14 @@ export function SettingsSectionVideo() {
           label="Video provider"
           selectedItemId={videoProvider}
           selectedItemLabel={
-            (availableComputeProvidersForVideos as any)[videoProvider]
+            computeProviderShortNames[videoProvider]
             || ComputeProvider.NONE
           }
-          items={Object.entries(availableComputeProvidersForVideos).map(([provider, label]) => ({
+          items={availableComputeProvidersForVideos.map(provider => ({
             id: provider,
-            label,
+            label: computeProviderShortNames[provider] || "(missing name)",
             disabled: false,
-            value: provider as ComputeProvider,
+            value: provider,
           }))}
           onSelect={setVideoProvider}
           horizontal

src/components/settings/voice.tsx

@@ -0,0 +1,87 @@
+import { FormSection } from "@/components/forms/FormSection"
+import { getDefaultSettingsState, useSettings } from "@/controllers/settings"
+import { ComputeProvider } from "@/types"
+
+import { FormSelect } from "../forms/FormSelect"
+import { availableComputeProvidersForVoice, computeProviderShortNames } from "./constants"
+import { FormInput } from "../forms/FormInput"
+
+export function SettingsSectionVoice() {
+  const defaultSettings = getDefaultSettingsState()
+  
+  const voiceProvider = useSettings(s => s.voiceProvider)
+  const setVoiceProvider = useSettings(s => s.setVoiceProvider)
+
+  const huggingFaceModelForVoice = useSettings(s => s.huggingFaceModelForVoice)
+  const setHuggingFaceModelForVoice = useSettings(s => s.setHuggingFaceModelForVoice)
+
+  const replicateModelForVoice = useSettings(s => s.replicateModelForVoice)
+  const setReplicateModelForVoice = useSettings(s => s.setReplicateModelForVoice)
+
+  const falAiModelForVoice = useSettings(s => s.falAiModelForVoice)
+  const setFalAiModelForVoice = useSettings(s => s.setFalAiModelForVoice)
+
+  const modelsLabModelForVoice = useSettings(s => s.modelsLabModelForVoice)
+  const setModelsLabModelForVoice = useSettings(s => s.setModelsLabModelForVoice)
+
+  const comfyWorkflowForVoice = useSettings(s => s.comfyWorkflowForVoice)
+  const setComfyWorkflowForVoice = useSettings(s => s.setComfyWorkflowForVoice)
+
+  return (
+    <div className="flex flex-col space-y-6 justify-between">
+      <FormSection label="Voice rendering">
+
+        <FormSelect<ComputeProvider>
+          label="Voice provider"
+          selectedItemId={voiceProvider}
+          selectedItemLabel={
+            computeProviderShortNames[voiceProvider]
+            || ComputeProvider.NONE
+          }
+          items={availableComputeProvidersForVoice.map(provider => ({
+            id: provider,
+            label: computeProviderShortNames[provider] || "(missing name)",
+            disabled: false,
+            value: provider,
+          }))}
+          onSelect={setVoiceProvider}
+          horizontal
+        />
+     {voiceProvider.startsWith("COMFY_")
+         ? <FormInput
+          label="Default Comfy workflow template for voice"
+          value={comfyWorkflowForVoice}
+          defaultValue={defaultSettings.comfyWorkflowForVoice}
+          onChange={setComfyWorkflowForVoice}
+        />
+        : // "proprietary" parameters
+          <>
+            {voiceProvider === ComputeProvider.HUGGINGFACE && <FormInput
+              label="HF Model ID (must be compatible with the Inference API)"
+              value={huggingFaceModelForVoice}
+              defaultValue={defaultSettings.huggingFaceModelForVoice}
+              onChange={setHuggingFaceModelForVoice}
+            />}
+            {voiceProvider === ComputeProvider.REPLICATE && <FormInput
+              label="Replicate.com model ID"
+              value={replicateModelForVoice}
+              defaultValue={defaultSettings.replicateModelForVoice}
+              onChange={setReplicateModelForVoice}
+            />}
+            {voiceProvider === ComputeProvider.FALAI && <FormInput
+              label="Fal.ai model ID"
+              value={falAiModelForVoice}
+              defaultValue={defaultSettings.falAiModelForVoice}
+              onChange={setFalAiModelForVoice}
+            />}
+            {voiceProvider === ComputeProvider.MODELSLAB && <FormInput
+              label="ModelsLab.com model ID"
+              value={modelsLabModelForVoice}
+              defaultValue={defaultSettings.modelsLabModelForVoice}
+              onChange={setModelsLabModelForVoice}
+            />}
+          </>}
+      </FormSection>
+    </div>
+  )
+}

src/components/tags/Tag.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import { ReactNode } from "react"
+
+import { cn } from "@/lib/utils"
+
+import { TagCategory, TagColor } from "./types"
+import { tagCategoryToTagColor, tagColorToTailwindClass } from "./colors"
+
+// a semi generic Tag components,
+// to color code various things
+export function Tag({
+  children,
+  color: maybeColor,
+  tag: maybeTag,
+  size = 'base'
+}: {
+  children?: ReactNode
+  color?: TagColor
+  tag?: TagCategory
+  size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl'
+}) {
+  const tag: TagCategory = maybeTag ? maybeTag : TagCategory.MISC
+  const color: TagColor = maybeColor ? maybeColor : (tagCategoryToTagColor[tag] || TagColor.STONE)
+  const tailwindClasses: string = tagColorToTailwindClass[color] || ""
+  
+  return (
+    <span className={cn(`
+      flex pt-[2px] pb-[3px] px-1
+      items-center justify-center
+     border
+      text-xs
+      rounded
+      mr-2
+      `,
+      tailwindClasses,
+      {
+        'w-12': size === 'xs',
+        'w-14': size === 'sm',
+        'w-20': size === 'base',
+        'w-24': size === 'lg',
+        'w-26': size === 'xl',  
+      }
+      )}>{
+      children
+    }</span>
+  )
+}

src/components/tags/colors.ts

@@ -0,0 +1,34 @@
+import { TagCategory, TagColor } from "./types"
+
+export const tagCategoryToTagColor: Record<TagCategory, TagColor> = {
+  [TagCategory.MISC]: TagColor.STONE,
+  [TagCategory.IMAGE]: TagColor.SKY,
+  [TagCategory.VIDEO]: TagColor.VIOLET,
+  [TagCategory.VOICE]: TagColor.ORANGE,
+  [TagCategory.SOUND]: TagColor.YELLOW,
+  [TagCategory.MUSIC]: TagColor.GREEN,
+}
+
+export const tagColorToTailwindClass: Record<TagColor, string> = {
+  [TagColor.SLATE]: `bg-slate-800 border-slate-600 text-slate-300`,
+  [TagColor.GRAY]: `bg-gray-800 border-gray-600 text-gray-300`,
+  [TagColor.ZINC]: `bg-zinc-800 border-zinc-600 text-zinc-300`,
+  [TagColor.NEUTRAL]: `bg-neutral-800 border-neutral-600 text-neutral-300`,
+  [TagColor.STONE]: `bg-stone-800 border-stone-600 text-stone-300`,
+  [TagColor.RED]: `bg-red-800 border-red-600 text-red-300`,
+  [TagColor.ORANGE]: `bg-orange-800 border-orange-600 text-orange-300`,
+  [TagColor.AMBER]: `bg-amber-800 border-amber-600 text-amber-300`,
+  [TagColor.YELLOW]: `bg-yellow-800 border-yellow-600 text-yellow-300`,
+  [TagColor.LIME]: `bg-lime-800 border-lime-600 text-lime-300`,
+  [TagColor.GREEN]: `bg-green-800 border-green-600 text-green-300`,
+  [TagColor.EMERALD]: `bg-emerald-800 border-emerald-600 text-emerald-300`,
+  [TagColor.TEAL]: `bg-teal-800 border-teal-600 text-teal-300`,
+  [TagColor.CYAN]: `bg-cyan-800 border-cyan-600 text-cyan-300`,
+  [TagColor.SKY]: `bg-sky-800 border-sky-600 text-sky-300`,
+  [TagColor.BLUE]: `bg-blue-800 border-blue-600 text-blue-300`,
+  [TagColor.INDIGO]: `bg-indigo-800 border-indigo-600 text-indigo-300`,
+  [TagColor.VIOLET]: `bg-violet-800 border-violet-600 text-violet-300`,
+  [TagColor.FUCHSIA]: `bg-fuchsia-800 border-fuchsia-600 text-fuchsia-300`,
+  [TagColor.PINK]: `bg-pink-800 border-pink-600 text-pink-300`,
+  [TagColor.ROSE]: `bg-rose-800 border-rose-600 text-rose-300`
+}

src/components/tags/types.ts

@@ -0,0 +1,37 @@
+export enum TagCategory {
+  MISC = "MISC",
+  IMAGE = "IMAGE",
+  VIDEO = "VIDEO",
+
+  // I think one day it will be unified,
+  // we will have one super model that can do all "AUDIO"
+  // but today we aren't there (eg. Stable Audio cannot do voice properly)
+
+  VOICE = "VOICE",
+  SOUND = "SOUND",
+  MUSIC = "MUSIC"
+}
+
+export enum TagColor {
+  SLATE = "SLATE",
+  GRAY = "GRAY",
+  ZINC = "ZINC",
+  NEUTRAL = "NEUTRAL",
+  STONE = "STONE",
+  RED = "RED",
+  ORANGE = "ORANGE",
+  AMBER = "AMBER",
+  YELLOW = "YELLOW",
+  LIME = "LIME",
+  GREEN = "GREEN",
+  EMERALD = "EMERALD",
+  TEAL = "TEAL",
+  CYAN = "CYAN",
+  SKY = "SKY",
+  BLUE = "BLUE",
+  INDIGO = "INDIGO",
+  VIOLET = "VIOLET",
+  FUCHSIA = "FUCHSIA",
+  PINK = "PINK",
+  ROSE = "ROSE",
+}

src/components/toolbars/top-menu/ModelList.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import {
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+} from "@/components/ui/menubar"
+
+import { TagColor } from "@/components/tags/types"
+import { Tag } from "@/components/tags/Tag"
+
+
+export function ModelList({
+  models = [],
+  current,
+  setter,
+}: {
+  models?: string[]
+  current?: string
+  setter: (model: string) => void
+}) {
+  return (
+    <MenubarSub>
+      <MenubarSubTrigger>
+        <Tag size="lg" color={TagColor.ZINC}>ai&nbsp;model</Tag>
+        {current || "None"}
+      </MenubarSubTrigger>
+      <MenubarSubContent>
+        {models.map(model => (
+          <MenubarCheckboxItem
+             key={model}
+            checked={current === model}
+            onClick={(e) => {
+              setter(model)
+              e.stopPropagation()
+              e.preventDefault()
+              return false
+            }}>
+            {model}
+          </MenubarCheckboxItem>
+        ))}
+      </MenubarSubContent>
+    </MenubarSub>
+  )
+}

src/components/toolbars/top-menu/ProviderList.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import {
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+} from "@/components/ui/menubar"
+
+import { computeProviderShortNames } from "@/components/settings/constants"
+
+import { ComputeProvider } from "@/types"
+import { TagColor } from "@/components/tags/types"
+import { Tag } from "@/components/tags/Tag"
+
+const defaultProviders: ComputeProvider[] = Object.keys(computeProviderShortNames) as ComputeProvider[]
+
+export function ProviderList({
+  providers = defaultProviders,
+  current,
+  setter,
+}: {
+  providers?: ComputeProvider[]
+  current?: ComputeProvider
+  setter: (provider: ComputeProvider) => void
+}) {
+  return (
+    <MenubarSub>
+      <MenubarSubTrigger>
+        <Tag size="lg" color={TagColor.GRAY}>cloud&nbsp;vendor</Tag>
+        {(computeProviderShortNames as any)[current || ""] || "None"}
+      </MenubarSubTrigger>
+      <MenubarSubContent>
+        {providers.map(provider => (
+          <MenubarCheckboxItem
+             key={provider}
+            checked={current === provider}
+            onClick={(e) => {
+              setter(provider)
+              e.stopPropagation()
+              e.preventDefault()
+              return false
+            }}>
+            {computeProviderShortNames[provider]}
+          </MenubarCheckboxItem>
+        ))}
+      </MenubarSubContent>
+    </MenubarSub>
+  )
+}

src/components/toolbars/top-menu/RenderingStrategyList.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import {
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+} from "@/components/ui/menubar"
+
+import { RenderingStrategy } from "@aitube/timeline"
+import { strategyLabels } from "./constants"
+import { Tag } from "@/components/tags/Tag"
+import { TagColor } from "@/components/tags/types"
+
+const defaultStrategies: RenderingStrategy[] = Object.keys(strategyLabels) as RenderingStrategy[]
+
+export function RenderingStrategyList({
+  strategies = defaultStrategies,
+  current,
+  setter,
+}: {
+  strategies?: RenderingStrategy[]
+  current?: RenderingStrategy
+  setter: (strategy: RenderingStrategy) => void
+}) {
+  return (
+    <MenubarSub>
+      <MenubarSubTrigger>
+        {/* todo display either autorender or manual render */}
+        <Tag size="lg" color={TagColor.NEUTRAL}>auto render</Tag>
+        {(strategyLabels as any)[current || ""] || "None"}
+      </MenubarSubTrigger>
+      <MenubarSubContent>
+      {strategies.map(strategy => (
+          <MenubarCheckboxItem
+             key={strategy}
+            checked={current === strategy}
+            onClick={(e) => {
+              setter(strategy)
+              e.stopPropagation()
+              e.preventDefault()
+              return false
+            }}>
+            {strategyLabels[strategy]}
+          </MenubarCheckboxItem>
+        ))}
+      </MenubarSubContent>
+    </MenubarSub>
+  )
+}

src/components/toolbars/top-menu/constants.ts

@@ -0,0 +1,8 @@
+import { RenderingStrategy } from "@aitube/timeline"
+
+export const strategyLabels = {
+  [RenderingStrategy.ON_DEMAND]: "Render on click",
+  [RenderingStrategy.ON_SCREEN_ONLY]: "Render visible items",
+  [RenderingStrategy.ON_SCREEN_THEN_SURROUNDING]: "Also render surrounding",
+  [RenderingStrategy.ON_SCREEN_THEN_ALL]: "Render all (for GPU-rich people)"
+}

src/components/toolbars/top-menu/image/index.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import {
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger
+} from "@/components/ui/menubar"
+import { useSettings } from "@/controllers/settings"
+import { useUI } from "@/controllers/ui"
+
+import { ProviderList } from "../ProviderList"
+import { RenderingStrategyList } from "../RenderingStrategyList"
+import { availableComputeProvidersForImages } from "@/components/settings/constants"
+
+
+export function TopMenuImage() {
+  const setShowSettings = useUI(s => s.setShowSettings)
+  const imageProvider = useSettings(s => s.imageProvider)
+  const setImageProvider = useSettings(s => s.setImageProvider)
+  const imageRenderingStrategy = useSettings((s) => s.imageRenderingStrategy)
+  const setImageRenderingStrategy = useSettings((s) => s.setImageRenderingStrategy)
+  return (
+    <MenubarMenu>
+      <MenubarTrigger>Image</MenubarTrigger>
+      <MenubarContent>
+        <MenubarSub>
+          <MenubarItem onClick={() => { setShowSettings(true) }}>Show advanced settings</MenubarItem>
+          <MenubarSeparator />
+          <ProviderList providers={availableComputeProvidersForImages} current={imageProvider} setter={setImageProvider} />
+          <RenderingStrategyList current={imageRenderingStrategy} setter={setImageRenderingStrategy} />
+          <MenubarSeparator />
+          <MenubarItem
+             disabled
+            >Usage and costs: not implemented</MenubarItem>
+        </MenubarSub>
+      </MenubarContent>
+    </MenubarMenu>
+  )
+}

src/components/toolbars/top-menu/index.tsx

@@ -1,14 +1,24 @@
 import { Menubar } from "@/components/ui/menubar"
 
 import { TopMenuFile } from "./file"
+
+import { TopMenuImage } from "./image"
+import { TopMenuVideo } from "./video"
+import { TopMenuVoice } from "./voice"
+import { TopMenuSound } from "./sound"
+import { TopMenuMusic } from "./music"
+
 import { TopMenuView } from "./view"
-import { TopMenuSettings } from "./settings"
 
 export function TopMenu() {
   return (
     <Menubar>
       <TopMenuFile />
-      <TopMenuSettings />
+      <TopMenuImage />
+      <TopMenuVideo />
+      <TopMenuVoice />
+      <TopMenuSound />
+      <TopMenuMusic />
       <TopMenuView />
     </Menubar>
   )

src/components/toolbars/top-menu/music/index.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import {
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger
+} from "@/components/ui/menubar"
+import { useSettings } from "@/controllers/settings"
+import { useUI } from "@/controllers/ui"
+
+import { ProviderList } from "../ProviderList"
+import { RenderingStrategyList } from "../RenderingStrategyList"
+import { availableComputeProvidersForMusic } from "@/components/settings/constants"
+
+
+export function TopMenuMusic() {
+  const setShowSettings = useUI(s => s.setShowSettings)
+  const musicProvider = useSettings(s => s.musicProvider)
+  const setMusicProvider = useSettings(s => s.setMusicProvider)
+  const musicRenderingStrategy = useSettings((s) => s.musicRenderingStrategy)
+  const setMusicRenderingStrategy = useSettings((s) => s.setMusicRenderingStrategy)
+  return (
+    <MenubarMenu>
+      <MenubarTrigger>Music</MenubarTrigger>
+      <MenubarContent>
+        <MenubarSub>
+          <MenubarItem onClick={() => { setShowSettings(true) }}>Show advanced settings</MenubarItem>
+          <MenubarSeparator />
+          <ProviderList providers={availableComputeProvidersForMusic} current={musicProvider} setter={setMusicProvider} />
+          <RenderingStrategyList current={musicRenderingStrategy} setter={setMusicRenderingStrategy} />
+          <MenubarSeparator />
+          <MenubarItem
+             disabled
+            >Usage and costs: not implemented</MenubarItem>
+        </MenubarSub>
+      </MenubarContent>
+    </MenubarMenu>
+  )
+}

src/components/toolbars/top-menu/settings/index.tsx

@@ -1,146 +0,0 @@
-"use client"
-
-import { useEffect } from "react"
-
-import {
-  MenubarCheckboxItem,
-  MenubarContent,
-  MenubarItem,
-  MenubarMenu,
-  MenubarSeparator,
-  MenubarSub,
-  MenubarSubContent,
-  MenubarSubTrigger,
-  MenubarTrigger
-} from "@/components/ui/menubar"
-import { useSettings } from "@/controllers/settings"
-import { RenderingStrategy } from "@aitube/timeline"
-import { useUI } from "@/controllers/ui"
-
-export function TopMenuSettings() {
-  const setShowSettings = useUI(s => s.setShowSettings)
-
-  const storyboardRenderingStrategy = useSettings((s) => s.storyboardRenderingStrategy)
-  const setStoryboardRenderingStrategy = useSettings((s) => s.setStoryboardRenderingStrategy)
-
-  const videoRenderingStrategy = useSettings((s) => s.videoRenderingStrategy)
-  const setVideoRenderingStrategy = useSettings((s) => s.setVideoRenderingStrategy)
-
-  const labels = {
-    [RenderingStrategy.ON_DEMAND]: "Render on click",
-    [RenderingStrategy.ON_SCREEN_ONLY]: "Render visible items",
-    [RenderingStrategy.ON_SCREEN_THEN_SURROUNDING]: "Render visible + surrounding items",
-    [RenderingStrategy.ON_SCREEN_THEN_ALL]: "Full rendering (for GPU-rich people)"
-  }
-
-  return (
-    <MenubarMenu>
-      <MenubarTrigger>Settings</MenubarTrigger>
-      <MenubarContent>
-
-        <MenubarSub>
-          <MenubarItem
-            onClick={() => { setShowSettings(true) }}>All settings (API, tokens..)</MenubarItem>
-          <MenubarSeparator />
-          <MenubarSubTrigger>Storyboards generation</MenubarSubTrigger>
-          <MenubarSubContent>
-            <MenubarCheckboxItem
-              disabled
-              checked={storyboardRenderingStrategy === RenderingStrategy.ON_DEMAND}
-              onClick={(e) => {
-                setStoryboardRenderingStrategy(RenderingStrategy.ON_DEMAND)
-                e.stopPropagation()
-                e.preventDefault()
-                return false
-              }}>
-             {labels[RenderingStrategy.ON_DEMAND]}
-            </MenubarCheckboxItem>
-            <MenubarCheckboxItem
-              disabled
-              checked={storyboardRenderingStrategy === RenderingStrategy.ON_SCREEN_ONLY}
-              onClick={(e) => {
-                setStoryboardRenderingStrategy(RenderingStrategy.ON_SCREEN_ONLY)
-                e.stopPropagation()
-                e.preventDefault()
-                return false
-              }}>
-              {labels[RenderingStrategy.ON_SCREEN_ONLY]}
-            </MenubarCheckboxItem>
-            <MenubarCheckboxItem
-              disabled
-              checked={storyboardRenderingStrategy === RenderingStrategy.ON_SCREEN_THEN_SURROUNDING}
-              onClick={(e) => {
-                setStoryboardRenderingStrategy(RenderingStrategy.ON_SCREEN_THEN_SURROUNDING)
-                e.stopPropagation()
-                e.preventDefault()
-                return false
-              }}>
-              {labels[RenderingStrategy.ON_SCREEN_THEN_SURROUNDING]}
-            </MenubarCheckboxItem>
-            <MenubarCheckboxItem
-              disabled
-              checked={storyboardRenderingStrategy === RenderingStrategy.ON_SCREEN_THEN_ALL}
-              onClick={(e) => {
-                setStoryboardRenderingStrategy(RenderingStrategy.ON_SCREEN_THEN_ALL)
-                e.stopPropagation()
-                e.preventDefault()
-                return false
-              }}>
-              {labels[RenderingStrategy.ON_SCREEN_THEN_ALL]}
-            </MenubarCheckboxItem>
-          </MenubarSubContent>
-        </MenubarSub>
-
-        <MenubarSub>
-          <MenubarSubTrigger>Videos generation</MenubarSubTrigger>
-          <MenubarSubContent>
-            <MenubarCheckboxItem
-              disabled
-              checked={videoRenderingStrategy === RenderingStrategy.ON_DEMAND}
-              onClick={(e) => {
-                setVideoRenderingStrategy(RenderingStrategy.ON_DEMAND)
-                e.stopPropagation()
-                e.preventDefault()
-                return false
-              }}>
-              {labels[RenderingStrategy.ON_DEMAND]}
-            </MenubarCheckboxItem>
-            <MenubarCheckboxItem
-              disabled
-              checked={videoRenderingStrategy === RenderingStrategy.ON_SCREEN_ONLY}
-              onClick={(e) => {
-                setVideoRenderingStrategy(RenderingStrategy.ON_SCREEN_ONLY)
-                e.stopPropagation()
-                e.preventDefault()
-                return false
-              }}>
-              {labels[RenderingStrategy.ON_SCREEN_ONLY]}
-            </MenubarCheckboxItem>
-            <MenubarCheckboxItem
-              disabled
-              checked={videoRenderingStrategy === RenderingStrategy.ON_SCREEN_THEN_SURROUNDING}
-              onClick={(e) => {
-                setVideoRenderingStrategy(RenderingStrategy.ON_SCREEN_THEN_SURROUNDING)
-                e.stopPropagation()
-                e.preventDefault()
-                return false
-              }}>
-              {labels[RenderingStrategy.ON_SCREEN_THEN_SURROUNDING]}
-            </MenubarCheckboxItem>
-            <MenubarCheckboxItem
-              disabled
-              checked={videoRenderingStrategy === RenderingStrategy.ON_SCREEN_THEN_ALL}
-              onClick={(e) => {
-                setVideoRenderingStrategy(RenderingStrategy.ON_SCREEN_THEN_ALL)
-                e.stopPropagation()
-                e.preventDefault()
-                return false
-              }}>
-              {labels[RenderingStrategy.ON_SCREEN_THEN_ALL]}
-            </MenubarCheckboxItem>
-          </MenubarSubContent>
-        </MenubarSub>
-      </MenubarContent>
-    </MenubarMenu>
-  )
-}

src/components/toolbars/top-menu/sound/index.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import {
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger
+} from "@/components/ui/menubar"
+import { useSettings } from "@/controllers/settings"
+import { useUI } from "@/controllers/ui"
+
+import { ProviderList } from "../ProviderList"
+import { RenderingStrategyList } from "../RenderingStrategyList"
+import { availableComputeProvidersForSound } from "@/components/settings/constants"
+
+
+export function TopMenuSound() {
+  const setShowSettings = useUI(s => s.setShowSettings)
+  const soundProvider = useSettings(s => s.soundProvider)
+  const setSoundProvider = useSettings(s => s.setSoundProvider)
+  const soundRenderingStrategy = useSettings((s) => s.soundRenderingStrategy)
+  const setSoundRenderingStrategy = useSettings((s) => s.setSoundRenderingStrategy)
+  return (
+    <MenubarMenu>
+      <MenubarTrigger>Sound</MenubarTrigger>
+      <MenubarContent>
+        <MenubarSub>
+          <MenubarItem onClick={() => { setShowSettings(true) }}>Show advanced settings</MenubarItem>
+          <MenubarSeparator />
+          <ProviderList providers={availableComputeProvidersForSound} current={soundProvider} setter={setSoundProvider} />
+          <RenderingStrategyList current={soundRenderingStrategy} setter={setSoundRenderingStrategy} />
+          <MenubarSeparator />
+          <MenubarItem
+             disabled
+            >Usage and costs: not implemented</MenubarItem>
+        </MenubarSub>
+      </MenubarContent>
+    </MenubarMenu>
+  )
+}

src/components/toolbars/top-menu/video/index.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import {
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger
+} from "@/components/ui/menubar"
+import { useSettings } from "@/controllers/settings"
+import { useUI } from "@/controllers/ui"
+
+import { ProviderList } from "../ProviderList"
+import { RenderingStrategyList } from "../RenderingStrategyList"
+import { availableComputeProvidersForVideos } from "@/components/settings/constants"
+
+
+export function TopMenuVideo() {
+  const setShowSettings = useUI(s => s.setShowSettings)
+  const videoProvider = useSettings(s => s.videoProvider)
+  const setVideoProvider = useSettings(s => s.setVideoProvider)
+  const videoRenderingStrategy = useSettings((s) => s.videoRenderingStrategy)
+  const setVideoRenderingStrategy = useSettings((s) => s.setVideoRenderingStrategy)
+  return (
+    <MenubarMenu>
+      <MenubarTrigger>Video</MenubarTrigger>
+      <MenubarContent>
+        <MenubarSub>
+          <MenubarItem onClick={() => { setShowSettings(true) }}>Show advanced settings</MenubarItem>
+          <MenubarSeparator />
+          <ProviderList providers={availableComputeProvidersForVideos} current={videoProvider} setter={setVideoProvider} />
+          <RenderingStrategyList current={videoRenderingStrategy} setter={setVideoRenderingStrategy} />
+          <MenubarSeparator />
+          <MenubarItem
+             disabled
+            >Usage and costs: not implemented</MenubarItem>
+        </MenubarSub>
+      </MenubarContent>
+    </MenubarMenu>
+  )
+}

src/components/toolbars/top-menu/voice/index.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import {
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger
+} from "@/components/ui/menubar"
+import { useSettings } from "@/controllers/settings"
+import { useUI } from "@/controllers/ui"
+
+import { ProviderList } from "../ProviderList"
+import { RenderingStrategyList } from "../RenderingStrategyList"
+import { availableComputeProvidersForVoice } from "@/components/settings/constants"
+
+
+export function TopMenuVoice() {
+  const setShowSettings = useUI(s => s.setShowSettings)
+  const voiceProvider = useSettings(s => s.voiceProvider)
+  const setVoiceProvider = useSettings(s => s.setVoiceProvider)
+  const voiceRenderingStrategy = useSettings((s) => s.voiceRenderingStrategy)
+  const setVoiceRenderingStrategy = useSettings((s) => s.setVoiceRenderingStrategy)
+  return (
+    <MenubarMenu>
+      <MenubarTrigger>Voice</MenubarTrigger>
+      <MenubarContent>
+        <MenubarSub>
+          <MenubarItem onClick={() => { setShowSettings(true) }}>Show advanced settings</MenubarItem>
+          <MenubarSeparator />
+          <ProviderList providers={availableComputeProvidersForVoice} current={voiceProvider} setter={setVoiceProvider} />
+          <RenderingStrategyList current={voiceRenderingStrategy} setter={setVoiceRenderingStrategy} />
+          <MenubarSeparator />
+          <MenubarItem
+             disabled
+            >Usage and costs: not implemented</MenubarItem>
+        </MenubarSub>
+      </MenubarContent>
+    </MenubarMenu>
+  )
+}

src/controllers/settings/getDefaultSettingsState.ts

@@ -3,7 +3,7 @@ import { RenderingStrategy } from "@aitube/timeline"
 import { ComfyIcuAccelerator, ComputeProvider } from "@/types"
 
 import { SettingsState } from "./types"
-import { defaultWorkflowForStoryboards } from "./workflows/storyboard"
+import { defaultWorkflowForImages } from "./workflows/image"
 
 export function getDefaultSettingsState(): SettingsState {
   const state: SettingsState = {
@@ -22,29 +22,33 @@ export function getDefaultSettingsState(): SettingsState {
     elevenLabsApiKey: "",
 
     assistantProvider: ComputeProvider.NONE,
-    storyboardProvider: ComputeProvider.NONE,
+    imageProvider: ComputeProvider.NONE,
     videoProvider: ComputeProvider.NONE,
     soundProvider: ComputeProvider.NONE,
-    speechProvider: ComputeProvider.NONE,
+    voiceProvider: ComputeProvider.NONE,
     musicProvider: ComputeProvider.NONE,
 
     censorNotForAllAudiencesContent: false,
 
-    storyboardPromptPrefix: "",
-    storyboardPromptSuffix: "",
-    storyboardNegativePrompt: "",
+    imagePromptPrefix: "",
+    imagePromptSuffix: "",
+    imageNegativePrompt: "",
     videoPromptPrefix: "",
     videoPromptSuffix: "",
     videoNegativePrompt: "",
 
-    storyboardRenderingStrategy: RenderingStrategy.ON_DEMAND,
+    imageRenderingStrategy: RenderingStrategy.ON_DEMAND,
     videoRenderingStrategy: RenderingStrategy.ON_DEMAND,
-    maxStoryboardsToGenerateInParallel: 1,
+    voiceRenderingStrategy: RenderingStrategy.ON_DEMAND,
+    soundRenderingStrategy: RenderingStrategy.ON_DEMAND,
+    musicRenderingStrategy: RenderingStrategy.ON_DEMAND,
+
+    maxImagesToGenerateInParallel: 1,
     maxVideosToGenerateInParallel: 1,
 
-    comfyWorkflowForStoryboard: defaultWorkflowForStoryboards,
+    comfyWorkflowForImage: defaultWorkflowForImages,
     comfyWorkflowForVideo: "{}",
-    comfyWorkflowForSpeech: "{}",
+    comfyWorkflowForVoice: "{}",
     comfyWorkflowForSound: "{}",
     comfyWorkflowForMusic: "{}",
   
@@ -53,7 +57,7 @@ export function getDefaultSettingsState(): SettingsState {
     huggingFaceModelForAssistant: "mistralai/Mixtral-8x7B-Instruct-v0.1",
     huggingFaceModelForImage: "sd-community/sdxl-flash",
     huggingFaceModelForVideo: "",
-    huggingFaceModelForSpeech: "",
+    huggingFaceModelForVoice: "",
     huggingFaceModelForSound: "",
     huggingFaceModelForMusic: "",
   
@@ -68,44 +72,44 @@ export function getDefaultSettingsState(): SettingsState {
 
     // note: this model doesn't support width and height parameters
     replicateModelForVideo: "camenduru/animatediff-lightning-4-step:be39c6d599942831314b770f03cfd062bfd0faa8cc52e9289bcce830b721fcb6",
-    replicateModelForSpeech: "lucataco/xtts-v2",
+    replicateModelForVoice: "lucataco/xtts-v2",
     replicateModelForSound: "sepal/audiogen",
     replicateModelForMusic: "meta/musicgen",
   
     stabilityAiModelForImage: "",
     stabilityAiModelForVideo: "",
-    stabilityAiModelForSpeech: "",
+    stabilityAiModelForVoice: "",
     stabilityAiModelForSound: "",
     stabilityAiModelForMusic: "",
   
     falAiModelForImage: "fal-ai/fast-sdxl", // "fal-ai/fast-lightning-sdxl",
     falAiModelForVideo: "fal-ai/fast-animatediff/turbo/text-to-video",
-    falAiModelForSpeech: "fal-ai/metavoice-v1",
+    falAiModelForVoice: "fal-ai/metavoice-v1",
     falAiModelForSound: "fal-ai/stable-audio",
     falAiModelForMusic: "fal-ai/stable-audio",
   
     modelsLabModelForImage: "",
     modelsLabModelForVideo: "",
-    modelsLabModelForSpeech: "",
+    modelsLabModelForVoice: "",
     modelsLabModelForSound: "",
     modelsLabModelForMusic: "",
 
     openaiModelForAssistant: "gpt-4-turbo",
     openaiModelForImage: "dall-e-3",
     openaiModelForVideo: "sora",
-    openaiModelForSpeech: "v1",
+    openaiModelForVoice: "v1",
 
     groqModelForAssistant: "mixtral-8x7b-32768",
   
     googleModelForAssistant: "gemini",
     googleModelForImage: "imagen",
     googleModelForVideo: "veo",
-    googleModelForSpeech: "v1",
+    googleModelForVoice: "v1",
     googleModelForMusic: "MusicLM",
 
     anthropicModelForAssistant: "claude-3-opus-20240229",
 
-    elevenLabsModelForSpeech: "v1",
+    elevenLabsModelForVoice: "v1",
     elevenLabsModelForSound: "v1",
   }
   return state

src/controllers/settings/types.ts

@@ -19,8 +19,8 @@ export type SettingsState = {
   // ------------- CATEGORY PROVIDERS ---------------
   assistantProvider: ComputeProvider
   videoProvider: ComputeProvider
-  storyboardProvider: ComputeProvider
-  speechProvider: ComputeProvider
+  imageProvider: ComputeProvider
+  voiceProvider: ComputeProvider
   soundProvider: ComputeProvider
   musicProvider: ComputeProvider
 
@@ -30,22 +30,26 @@ export type SettingsState = {
 
   // -------------- MISC SETTINGS -------------------
 
-  storyboardPromptPrefix: string
-  storyboardPromptSuffix: string
-  storyboardNegativePrompt: string
+  imagePromptPrefix: string
+  imagePromptSuffix: string
+  imageNegativePrompt: string
   videoPromptPrefix: string
   videoPromptSuffix: string
   videoNegativePrompt: string
 
-  storyboardRenderingStrategy: RenderingStrategy
+  imageRenderingStrategy: RenderingStrategy
   videoRenderingStrategy: RenderingStrategy
-  maxStoryboardsToGenerateInParallel: number
+  voiceRenderingStrategy: RenderingStrategy
+  soundRenderingStrategy: RenderingStrategy
+  musicRenderingStrategy: RenderingStrategy
+
+  maxImagesToGenerateInParallel: number
   maxVideosToGenerateInParallel: number
 
   // ------------ COMFY UI WORKFLOWS -----------------
-  comfyWorkflowForStoryboard: string
+  comfyWorkflowForImage: string
   comfyWorkflowForVideo: string
-  comfyWorkflowForSpeech: string
+  comfyWorkflowForVoice: string
   comfyWorkflowForSound: string
   comfyWorkflowForMusic: string
 
@@ -54,7 +58,7 @@ export type SettingsState = {
   huggingFaceModelForAssistant: string
   huggingFaceModelForImage: string
   huggingFaceModelForVideo: string
-  huggingFaceModelForSpeech: string
+  huggingFaceModelForVoice: string
   huggingFaceModelForSound: string
   huggingFaceModelForMusic: string
 
@@ -67,44 +71,44 @@ export type SettingsState = {
 
   replicateModelForImage: string
   replicateModelForVideo: string
-  replicateModelForSpeech: string
+  replicateModelForVoice: string
   replicateModelForSound: string
   replicateModelForMusic: string
 
   stabilityAiModelForImage: string
   stabilityAiModelForVideo: string
-  stabilityAiModelForSpeech: string
+  stabilityAiModelForVoice: string
   stabilityAiModelForSound: string
   stabilityAiModelForMusic: string
 
   falAiModelForImage: string
   falAiModelForVideo: string
-  falAiModelForSpeech: string
+  falAiModelForVoice: string
   falAiModelForSound: string
   falAiModelForMusic: string
 
   modelsLabModelForImage: string
   modelsLabModelForVideo: string
-  modelsLabModelForSpeech: string
+  modelsLabModelForVoice: string
   modelsLabModelForSound: string
   modelsLabModelForMusic: string
 
   openaiModelForAssistant: string
   openaiModelForImage: string
   openaiModelForVideo: string
-  openaiModelForSpeech: string
+  openaiModelForVoice: string
 
   groqModelForAssistant: string
 
   googleModelForAssistant: string
   googleModelForImage: string
   googleModelForVideo: string
-  googleModelForSpeech: string
+  googleModelForVoice: string
   googleModelForMusic: string
 
   anthropicModelForAssistant: string
 
-  elevenLabsModelForSpeech: string
+  elevenLabsModelForVoice: string
   elevenLabsModelForSound: string
 }
 
@@ -125,34 +129,38 @@ export type SettingsControls = {
 
   setAssistantProvider: (assistantProvider?: ComputeProvider) => void
   setVideoProvider: (videoProvider?: ComputeProvider) => void
-  setStoryboardProvider: (storyboardProvider?: ComputeProvider) => void
-  setSpeechProvider: (speechProvider?: ComputeProvider) => void
+  setImageProvider: (imageProvider?: ComputeProvider) => void
+  setVoiceProvider: (voiceProvider?: ComputeProvider) => void
   setSoundProvider: (soundProvider?: ComputeProvider) => void
   setMusicProvider: (musicProvider?: ComputeProvider) => void
 
   setCensorNotForAllAudiencesContent: (censorNotForAllAudiencesContent?: boolean) => void
-  setStoryboardPromptPrefix: (storyboardPromptPrefix?: string) => void
-  setStoryboardPromptSuffix: (storyboardPromptSuffix?: string) => void
-  setStoryboardNegativePrompt: (storyboardNegativePrompt?: string) => void
+  setImagePromptPrefix: (imagePromptPrefix?: string) => void
+  setImagePromptSuffix: (imagePromptSuffix?: string) => void
+  setImageNegativePrompt: (imageNegativePrompt?: string) => void
   setVideoPromptPrefix: (videoPromptPrefix?: string) => void
   setVideoPromptSuffix: (videoPromptSuffix?: string) => void
   setVideoNegativePrompt: (videoNegativePrompt?: string) => void
 
-  setStoryboardRenderingStrategy: (storyboardRenderingStrategy?: RenderingStrategy) => void
+  setImageRenderingStrategy: (imageRenderingStrategy?: RenderingStrategy) => void
   setVideoRenderingStrategy: (videoRenderingStrategy?: RenderingStrategy) => void
-  setMaxStoryboardsToGenerateInParallel: (maxStoryboardsToGenerateInParallel?: number) => void
+  setVoiceRenderingStrategy: (voiceRenderingStrategy?: RenderingStrategy) => void
+  setSoundRenderingStrategy: (soundRenderingStrategy?: RenderingStrategy) => void
+  setMusicRenderingStrategy: (musicRenderingStrategy?: RenderingStrategy) => void
+
+  setMaxImagesToGenerateInParallel: (maxImagesToGenerateInParallel?: number) => void
   setMaxVideosToGenerateInParallel: (maxVideosToGenerateInParallel?: number) => void
 
-  setComfyWorkflowForStoryboard: (comfyWorkflowForStoryboard?: string) => void
+  setComfyWorkflowForImage: (comfyWorkflowForImage?: string) => void
   setComfyWorkflowForVideo: (comfyWorkflowForVideo?: string) => void
-  setComfyWorkflowForSpeech: (comfyWorkflowForSpeech?: string) => void
+  setComfyWorkflowForVoice: (comfyWorkflowForVoice?: string) => void
   setComfyWorkflowForSound: (comfyWorkflowForSound?: string) => void
   setComfyWorkflowForMusic: (comfyWorkflowForMusic?: string) => void
 
   setHuggingFaceModelForAssistant: (huggingFaceModelForAssistant?: string) => void
   setHuggingFaceModelForImage: (huggingFaceModelForImage?: string) => void
   setHuggingFaceModelForVideo: (huggingFaceModelForVideo?: string) => void
-  setHuggingFaceModelForSpeech: (huggingFaceModelForSpeech?: string) => void
+  setHuggingFaceModelForVoice: (huggingFaceModelForVoice?: string) => void
   setHuggingFaceModelForSound: (huggingFaceModelForSound?: string) => void
   setHuggingFaceModelForMusic: (huggingFaceModelForMusic?: string) => void
 
@@ -165,44 +173,44 @@ export type SettingsControls = {
 
   setReplicateModelForImage: (replicateModelForImage?: string) => void
   setReplicateModelForVideo: (replicateModelForVideo?: string) => void
-  setReplicateModelForSpeech: (replicateModelForSpeech?: string) => void
+  setReplicateModelForVoice: (replicateModelForVoice?: string) => void
   setReplicateModelForSound: (replicateModelForSound?: string) => void
   setReplicateModelForMusic: (replicateModelForMusic?: string) => void
 
   setStabilityAiModelForImage: (stabilityAiModelForImage?: string) => void
   setStabilityAiModelForVideo: (stabilityAiModelForVideo?: string) => void
-  setStabilityAiModelForSpeech: (stabilityAiModelForSpeech?: string) => void
+  setStabilityAiModelForVoice: (stabilityAiModelForVoice?: string) => void
   setStabilityAiModelForSound: (stabilityAiModelForSound?: string) => void
   setStabilityAiModelForMusic: (stabilityAiModelForMusic?: string) => void
 
   setFalAiModelForImage: (falAiModelForImage?: string) => void
   setFalAiModelForVideo: (falAiModelForVideo?: string) => void
-  setFalAiModelForSpeech: (falAiModelForSpeech?: string) => void
+  setFalAiModelForVoice: (falAiModelForVoice?: string) => void
   setFalAiModelForSound: (falAiModelForSound?: string) => void
   setFalAiModelForMusic: (falAiModelForMusic?: string) => void
 
   setModelsLabModelForImage: (modelsLabModelForImage?: string) => void
   setModelsLabModelForVideo: (modelsLabModelForVideo?: string) => void
-  setModelsLabModelForSpeech: (modelsLabModelForSpeech?: string) => void
+  setModelsLabModelForVoice: (modelsLabModelForVoice?: string) => void
   setModelsLabModelForSound: (modelsLabModelForSound?: string) => void
   setModelsLabModelForMusic: (modelsLabModelForMusic?: string) => void
 
   setOpenaiModelForAssistant: (openaiModelForAssistant?: string) => void
   setOpenaiModelForImage: (openaiModelForImage?: string) => void
   setOpenaiModelForVideo: (openaiModelForVideo?: string) => void
-  setOpenaiModelForSpeech: (openaiModelForSpeech?: string) => void
+  setOpenaiModelForVoice: (openaiModelForVoice?: string) => void
 
   setGroqModelForAssistant: (groqModelForAssistant?: string) => void
 
   setGoogleModelForAssistant: (googleModelForAssistant?: string) => void
   setGoogleModelForImage: (googleModelForImage?: string) => void
   setGoogleModelForVideo: (googleModelForVideo?: string) => void
-  setGoogleModelForSpeech: (googleModelForSpeech?: string) => void
+  setGoogleModelForVoice: (googleModelForVoice?: string) => void
   setGoogleModelForMusic: (googleModelForMusic?: string) => void
 
   setAnthropicModelForAssistant: (anthropicModelForAssistant?: string) => void
   
-  setElevenLabsModelForSpeech: (elevenLabsModelForSpeech?: string) => void
+  setElevenLabsModelForVoice: (elevenLabsModelForVoice?: string) => void
   setElevenLabsModelForSound: (elevenLabsModelForSound?: string) => void
   
   getSettings: () => SettingsState

src/controllers/settings/useSettings.ts

@@ -27,13 +27,13 @@ export const useSettings = create<SettingsStore>()(
         const { videoProvider: defaultVideoProvider } = getDefaultSettingsState()
         set({ videoProvider: parseComputeProvider(videoProvider, defaultVideoProvider) })
       },
-      setStoryboardProvider: (storyboardProvider?: ComputeProvider) => {
-        const { storyboardProvider: defaultStoryboardProvider } = getDefaultSettingsState()
-        set({ storyboardProvider: parseComputeProvider(storyboardProvider, defaultStoryboardProvider) })
+      setImageProvider: (imageProvider?: ComputeProvider) => {
+        const { imageProvider: defaultImageProvider } = getDefaultSettingsState()
+        set({ imageProvider: parseComputeProvider(imageProvider, defaultImageProvider) })
       },
-      setSpeechProvider: (speechProvider?: ComputeProvider) => {
-        const { speechProvider: defaultSpeechProvider } = getDefaultSettingsState()
-        set({ speechProvider: parseComputeProvider(speechProvider, defaultSpeechProvider) })
+      setVoiceProvider: (voiceProvider?: ComputeProvider) => {
+        const { voiceProvider: defaultSpeechProvider } = getDefaultSettingsState()
+        set({ voiceProvider: parseComputeProvider(voiceProvider, defaultSpeechProvider) })
       },
       setSoundProvider: (soundProvider?: ComputeProvider) => {
         const { soundProvider: defaultSoundProvider } = getDefaultSettingsState()
@@ -87,14 +87,14 @@ export const useSettings = create<SettingsStore>()(
       setCensorNotForAllAudiencesContent: (censorNotForAllAudiencesContent?: boolean) => {
         set({ censorNotForAllAudiencesContent: getValidBoolean(censorNotForAllAudiencesContent, getDefaultSettingsState().censorNotForAllAudiencesContent) })
       },
-      setStoryboardPromptPrefix: (storyboardPromptPrefix?: string) => {
-        set({ storyboardPromptPrefix: getValidString(storyboardPromptPrefix, getDefaultSettingsState().storyboardPromptPrefix) })
+      setImagePromptPrefix: (imagePromptPrefix?: string) => {
+        set({ imagePromptPrefix: getValidString(imagePromptPrefix, getDefaultSettingsState().imagePromptPrefix) })
       },
-      setStoryboardPromptSuffix: (storyboardPromptSuffix?: string) => {
-        set({ storyboardPromptSuffix: getValidString(storyboardPromptSuffix, getDefaultSettingsState().storyboardPromptSuffix) })
+      setImagePromptSuffix: (imagePromptSuffix?: string) => {
+        set({ imagePromptSuffix: getValidString(imagePromptSuffix, getDefaultSettingsState().imagePromptSuffix) })
       },
-      setStoryboardNegativePrompt: (storyboardNegativePrompt?: string) => {
-        set({ storyboardNegativePrompt: getValidString(storyboardNegativePrompt, getDefaultSettingsState().storyboardNegativePrompt) })
+      setImageNegativePrompt: (imageNegativePrompt?: string) => {
+        set({ imageNegativePrompt: getValidString(imageNegativePrompt, getDefaultSettingsState().imageNegativePrompt) })
       },
       setVideoPromptPrefix: (videoPromptPrefix?: string) => {
         set({ videoPromptPrefix: getValidString(videoPromptPrefix, getDefaultSettingsState().videoPromptPrefix) })
@@ -105,22 +105,34 @@ export const useSettings = create<SettingsStore>()(
       setVideoNegativePrompt: (videoNegativePrompt?: string) => {
         set({ videoNegativePrompt: getValidString(videoNegativePrompt, getDefaultSettingsState().videoNegativePrompt) })
       },
-      setStoryboardRenderingStrategy: (storyboardRenderingStrategy?: RenderingStrategy) => {
-        const { storyboardRenderingStrategy: defaulStoryboardRenderingStrategy } = getDefaultSettingsState()
-        set({ storyboardRenderingStrategy: parseRenderingStrategy(storyboardRenderingStrategy, defaulStoryboardRenderingStrategy) })
+      setImageRenderingStrategy: (imageRenderingStrategy?: RenderingStrategy) => {
+        const { imageRenderingStrategy: defaulImageRenderingStrategy } = getDefaultSettingsState()
+        set({ imageRenderingStrategy: parseRenderingStrategy(imageRenderingStrategy, defaulImageRenderingStrategy) })
       },
       setVideoRenderingStrategy: (videoRenderingStrategy?: RenderingStrategy) => {
         const { videoRenderingStrategy: defaultVideoRenderingStrategy } = getDefaultSettingsState()
         set({ videoRenderingStrategy: parseRenderingStrategy(videoRenderingStrategy, defaultVideoRenderingStrategy) })
       },
-      setMaxStoryboardsToGenerateInParallel: (maxStoryboardsToGenerateInParallel?: number) => {
-        const { maxStoryboardsToGenerateInParallel: defaultMaxStoryboardsToGenerateInParallel } = getDefaultSettingsState()
+      setVoiceRenderingStrategy: (voiceRenderingStrategy?: RenderingStrategy) => {
+        const { voiceRenderingStrategy: defaultSpeechRenderingStrategy } = getDefaultSettingsState()
+        set({ voiceRenderingStrategy: parseRenderingStrategy(voiceRenderingStrategy, defaultSpeechRenderingStrategy) })
+      },
+      setSoundRenderingStrategy: (soundRenderingStrategy?: RenderingStrategy) => {
+        const { soundRenderingStrategy: defaultSoundRenderingStrategy } = getDefaultSettingsState()
+        set({ soundRenderingStrategy: parseRenderingStrategy(soundRenderingStrategy, defaultSoundRenderingStrategy) })
+      },
+      setMusicRenderingStrategy: (musicRenderingStrategy?: RenderingStrategy) => {
+        const { musicRenderingStrategy: defaultMusicRenderingStrategy } = getDefaultSettingsState()
+        set({ musicRenderingStrategy: parseRenderingStrategy(musicRenderingStrategy, defaultMusicRenderingStrategy) })
+      },
+      setMaxImagesToGenerateInParallel: (maxImagesToGenerateInParallel?: number) => {
+        const { maxImagesToGenerateInParallel: defaultMaxImagesToGenerateInParallel } = getDefaultSettingsState()
         set({
-          maxStoryboardsToGenerateInParallel: getValidNumber(
-            maxStoryboardsToGenerateInParallel,
+          maxImagesToGenerateInParallel: getValidNumber(
+            maxImagesToGenerateInParallel,
             1,
             HARD_LIMIT_NB_MAX_ASSETS_TO_GENERATE_IN_PARALLEL,
-            defaultMaxStoryboardsToGenerateInParallel
+            defaultMaxImagesToGenerateInParallel
           )
         })
       },
@@ -135,14 +147,14 @@ export const useSettings = create<SettingsStore>()(
           )
         })
       },
-      setComfyWorkflowForStoryboard: (comfyWorkflowForStoryboard?: string) => {
-        set({ comfyWorkflowForStoryboard: getValidComfyWorkflowTemplate(comfyWorkflowForStoryboard, getDefaultSettingsState().comfyWorkflowForStoryboard) })
+      setComfyWorkflowForImage: (comfyWorkflowForImage?: string) => {
+        set({ comfyWorkflowForImage: getValidComfyWorkflowTemplate(comfyWorkflowForImage, getDefaultSettingsState().comfyWorkflowForImage) })
       },
       setComfyWorkflowForVideo: (comfyWorkflowForVideo?: string) => {
         set({ comfyWorkflowForVideo: getValidComfyWorkflowTemplate(comfyWorkflowForVideo, getDefaultSettingsState().comfyWorkflowForVideo) })
       },
-      setComfyWorkflowForSpeech: (comfyWorkflowForSpeech?: string) => {
-        set({ comfyWorkflowForSpeech: getValidComfyWorkflowTemplate(comfyWorkflowForSpeech, getDefaultSettingsState().comfyWorkflowForSpeech) })
+      setComfyWorkflowForVoice: (comfyWorkflowForVoice?: string) => {
+        set({ comfyWorkflowForVoice: getValidComfyWorkflowTemplate(comfyWorkflowForVoice, getDefaultSettingsState().comfyWorkflowForVoice) })
       },
       setComfyWorkflowForSound: (comfyWorkflowForSound?: string) => {
         set({ comfyWorkflowForSound: getValidComfyWorkflowTemplate(comfyWorkflowForSound, getDefaultSettingsState().comfyWorkflowForSound) })
@@ -160,8 +172,8 @@ export const useSettings = create<SettingsStore>()(
       setHuggingFaceModelForVideo: (huggingFaceModelForVideo?: string) => {
         set({ huggingFaceModelForVideo: getValidString(huggingFaceModelForVideo, getDefaultSettingsState().huggingFaceModelForVideo) })
       },
-      setHuggingFaceModelForSpeech: (huggingFaceModelForSpeech?: string) => {
-        set({ huggingFaceModelForSpeech: getValidString(huggingFaceModelForSpeech, getDefaultSettingsState().huggingFaceModelForSpeech) })
+      setHuggingFaceModelForVoice: (huggingFaceModelForVoice?: string) => {
+        set({ huggingFaceModelForVoice: getValidString(huggingFaceModelForVoice, getDefaultSettingsState().huggingFaceModelForVoice) })
       },
       setHuggingFaceModelForSound: (huggingFaceModelForSound?: string) => {
         set({ huggingFaceModelForSound: getValidString(huggingFaceModelForSound, getDefaultSettingsState().huggingFaceModelForSound) })
@@ -193,8 +205,8 @@ export const useSettings = create<SettingsStore>()(
       setReplicateModelForVideo: (replicateModelForVideo?: string) => {
         set({ replicateModelForVideo: getValidString(replicateModelForVideo, getDefaultSettingsState().replicateModelForVideo) })
       },
-      setReplicateModelForSpeech: (replicateModelForSpeech?: string) => {
-        set({ replicateModelForSpeech: getValidString(replicateModelForSpeech, getDefaultSettingsState().replicateModelForSpeech) })
+      setReplicateModelForVoice: (replicateModelForVoice?: string) => {
+        set({ replicateModelForVoice: getValidString(replicateModelForVoice, getDefaultSettingsState().replicateModelForVoice) })
       },
       setReplicateModelForSound: (replicateModelForSound?: string) => {
         set({ replicateModelForSound: getValidString(replicateModelForSound, getDefaultSettingsState().replicateModelForSound) })
@@ -208,8 +220,8 @@ export const useSettings = create<SettingsStore>()(
       setStabilityAiModelForVideo: (stabilityAiModelForVideo?: string) => {
         set({ stabilityAiModelForVideo: getValidString(stabilityAiModelForVideo, getDefaultSettingsState().stabilityAiModelForVideo) })
       },
-      setStabilityAiModelForSpeech: (stabilityAiModelForSpeech?: string) => {
-        set({ stabilityAiModelForSpeech: getValidString(stabilityAiModelForSpeech, getDefaultSettingsState().stabilityAiModelForSpeech) })
+      setStabilityAiModelForVoice: (stabilityAiModelForVoice?: string) => {
+        set({ stabilityAiModelForVoice: getValidString(stabilityAiModelForVoice, getDefaultSettingsState().stabilityAiModelForVoice) })
       },
       setStabilityAiModelForSound: (stabilityAiModelForSound?: string) => {
         set({ stabilityAiModelForSound: getValidString(stabilityAiModelForSound, getDefaultSettingsState().stabilityAiModelForSound) })
@@ -223,8 +235,8 @@ export const useSettings = create<SettingsStore>()(
       setFalAiModelForVideo: (falAiModelForVideo?: string) => {
         set({ falAiModelForVideo: getValidString(falAiModelForVideo, getDefaultSettingsState().falAiModelForVideo) })
       },
-      setFalAiModelForSpeech: (falAiModelForSpeech?: string) => {
-        set({ falAiModelForSpeech: getValidString(falAiModelForSpeech, getDefaultSettingsState().falAiModelForSpeech) })
+      setFalAiModelForVoice: (falAiModelForVoice?: string) => {
+        set({ falAiModelForVoice: getValidString(falAiModelForVoice, getDefaultSettingsState().falAiModelForVoice) })
       },
       setFalAiModelForSound: (falAiModelForSound?: string) => {
         set({ falAiModelForSound: getValidString(falAiModelForSound, getDefaultSettingsState().falAiModelForSound) })
@@ -238,8 +250,8 @@ export const useSettings = create<SettingsStore>()(
       setModelsLabModelForVideo: (modelsLabModelForVideo?: string) => {
         set({ modelsLabModelForVideo: getValidString(modelsLabModelForVideo, getDefaultSettingsState().modelsLabModelForVideo) })
       },
-      setModelsLabModelForSpeech: (modelsLabModelForSpeech?: string) => {
-        set({ modelsLabModelForSpeech: getValidString(modelsLabModelForSpeech, getDefaultSettingsState().modelsLabModelForSpeech) })
+      setModelsLabModelForVoice: (modelsLabModelForVoice?: string) => {
+        set({ modelsLabModelForVoice: getValidString(modelsLabModelForVoice, getDefaultSettingsState().modelsLabModelForVoice) })
       },
       setModelsLabModelForSound: (modelsLabModelForSound?: string) => {
         set({ modelsLabModelForSound: getValidString(modelsLabModelForSound, getDefaultSettingsState().modelsLabModelForSound) })
@@ -256,8 +268,8 @@ export const useSettings = create<SettingsStore>()(
       setOpenaiModelForVideo: (openaiModelForVideo?: string) => {
         set({ openaiModelForVideo: getValidString(openaiModelForVideo, getDefaultSettingsState().openaiModelForVideo) })
       },
-      setOpenaiModelForSpeech: (openaiModelForSpeech?: string) => {
-        set({ openaiModelForSpeech: getValidString(openaiModelForSpeech, getDefaultSettingsState().openaiModelForSpeech) })
+      setOpenaiModelForVoice: (openaiModelForVoice?: string) => {
+        set({ openaiModelForVoice: getValidString(openaiModelForVoice, getDefaultSettingsState().openaiModelForVoice) })
       },
       setGroqModelForAssistant: (groqModelForAssistant?: string) => {
         set({ groqModelForAssistant: getValidString(groqModelForAssistant, getDefaultSettingsState().groqModelForAssistant) })
@@ -271,8 +283,8 @@ export const useSettings = create<SettingsStore>()(
       setGoogleModelForVideo: (googleModelForVideo?: string) => {
         set({ googleModelForVideo: getValidString(googleModelForVideo, getDefaultSettingsState().googleModelForVideo) })
       },
-      setGoogleModelForSpeech: (googleModelForSpeech?: string) => {
-        set({ googleModelForSpeech: getValidString(googleModelForSpeech, getDefaultSettingsState().googleModelForSpeech) })
+      setGoogleModelForVoice: (googleModelForVoice?: string) => {
+        set({ googleModelForVoice: getValidString(googleModelForVoice, getDefaultSettingsState().googleModelForVoice) })
       },
       setGoogleModelForMusic: (googleModelForMusic?: string) => {
         set({ googleModelForMusic: getValidString(googleModelForMusic, getDefaultSettingsState().googleModelForMusic) })
@@ -280,8 +292,8 @@ export const useSettings = create<SettingsStore>()(
       setAnthropicModelForAssistant: (anthropicModelForAssistant?: string) => {
         set({ anthropicModelForAssistant: getValidString(anthropicModelForAssistant, getDefaultSettingsState().anthropicModelForAssistant) })
       },
-      setElevenLabsModelForSpeech: (elevenLabsModelForSpeech?: string) => {
-        set({ elevenLabsModelForSpeech: getValidString(elevenLabsModelForSpeech, getDefaultSettingsState().elevenLabsModelForSpeech) })
+      setElevenLabsModelForVoice: (elevenLabsModelForVoice?: string) => {
+        set({ elevenLabsModelForVoice: getValidString(elevenLabsModelForVoice, getDefaultSettingsState().elevenLabsModelForVoice) })
       },
       setElevenLabsModelForSound: (elevenLabsModelForSound?: string) => {
         set({ elevenLabsModelForSound: getValidString(elevenLabsModelForSound, getDefaultSettingsState().elevenLabsModelForSound) })
@@ -293,10 +305,10 @@ export const useSettings = create<SettingsStore>()(
           // why do we need those fallbacks? because some users will leave the fields empty,
           // eg. an empty model string.. basically we want to allow empty config that still works!
           assistantProvider: state.assistantProvider || defaultSettings.assistantProvider,
-          storyboardProvider: state.storyboardProvider || defaultSettings.storyboardProvider,
+          imageProvider: state.imageProvider || defaultSettings.imageProvider,
           videoProvider: state.videoProvider || defaultSettings.videoProvider,
           soundProvider: state.soundProvider || defaultSettings.soundProvider,
-          speechProvider: state.speechProvider || defaultSettings.speechProvider,
+          voiceProvider: state.voiceProvider || defaultSettings.voiceProvider,
           musicProvider: state.musicProvider || defaultSettings.musicProvider,
           customComfyUiApiKey: state.customComfyUiApiKey || defaultSettings.customComfyUiApiKey,
           replicateApiKey: state.replicateApiKey || defaultSettings.replicateApiKey,
@@ -311,25 +323,28 @@ export const useSettings = create<SettingsStore>()(
           anthropicApiKey: state.anthropicApiKey || defaultSettings.anthropicApiKey,
           elevenLabsApiKey: state.elevenLabsApiKey || defaultSettings.elevenLabsApiKey,
           censorNotForAllAudiencesContent: state.censorNotForAllAudiencesContent || defaultSettings.censorNotForAllAudiencesContent,
-          storyboardPromptPrefix: state.storyboardPromptPrefix || defaultSettings.storyboardPromptPrefix,
-          storyboardPromptSuffix: state.storyboardPromptSuffix || defaultSettings.storyboardPromptSuffix,
-          storyboardNegativePrompt: state.storyboardNegativePrompt || defaultSettings.storyboardNegativePrompt,
+          imagePromptPrefix: state.imagePromptPrefix || defaultSettings.imagePromptPrefix,
+          imagePromptSuffix: state.imagePromptSuffix || defaultSettings.imagePromptSuffix,
+          imageNegativePrompt: state.imageNegativePrompt || defaultSettings.imageNegativePrompt,
           videoPromptPrefix: state.videoPromptPrefix || defaultSettings.videoPromptPrefix,
           videoPromptSuffix: state.videoPromptSuffix || defaultSettings.videoPromptSuffix,
           videoNegativePrompt: state.videoNegativePrompt || defaultSettings.videoNegativePrompt,
-          storyboardRenderingStrategy: state.storyboardRenderingStrategy || defaultSettings.storyboardRenderingStrategy,
+          imageRenderingStrategy: state.imageRenderingStrategy || defaultSettings.imageRenderingStrategy,
           videoRenderingStrategy: state.videoRenderingStrategy || defaultSettings.videoRenderingStrategy,
-          maxStoryboardsToGenerateInParallel: state.maxStoryboardsToGenerateInParallel || defaultSettings.maxStoryboardsToGenerateInParallel,
+          voiceRenderingStrategy: state.voiceRenderingStrategy || defaultSettings.voiceRenderingStrategy,
+          soundRenderingStrategy: state.soundRenderingStrategy || defaultSettings.soundRenderingStrategy,
+          musicRenderingStrategy: state.musicRenderingStrategy || defaultSettings.musicRenderingStrategy,
+          maxImagesToGenerateInParallel: state.maxImagesToGenerateInParallel || defaultSettings.maxImagesToGenerateInParallel,
           maxVideosToGenerateInParallel: state.maxVideosToGenerateInParallel || defaultSettings.maxVideosToGenerateInParallel,
-          comfyWorkflowForStoryboard: state.comfyWorkflowForStoryboard || defaultSettings.comfyWorkflowForStoryboard,
+          comfyWorkflowForImage: state.comfyWorkflowForImage || defaultSettings.comfyWorkflowForImage,
           comfyWorkflowForVideo: state.comfyWorkflowForVideo || defaultSettings.comfyWorkflowForVideo,
-          comfyWorkflowForSpeech: state.comfyWorkflowForSpeech || defaultSettings.comfyWorkflowForSpeech,
+          comfyWorkflowForVoice: state.comfyWorkflowForVoice || defaultSettings.comfyWorkflowForVoice,
           comfyWorkflowForSound: state.comfyWorkflowForSound || defaultSettings.comfyWorkflowForSound,
           comfyWorkflowForMusic: state.comfyWorkflowForMusic || defaultSettings.comfyWorkflowForMusic,
           huggingFaceModelForAssistant: state.huggingFaceModelForAssistant || defaultSettings.huggingFaceModelForAssistant,
           huggingFaceModelForImage: state.huggingFaceModelForImage || defaultSettings.huggingFaceModelForImage,
           huggingFaceModelForVideo: state.huggingFaceModelForVideo || defaultSettings.huggingFaceModelForVideo,
-          huggingFaceModelForSpeech: state.huggingFaceModelForSpeech || defaultSettings.huggingFaceModelForSpeech,
+          huggingFaceModelForVoice: state.huggingFaceModelForVoice || defaultSettings.huggingFaceModelForVoice,
           huggingFaceModelForSound: state.huggingFaceModelForSound || defaultSettings.huggingFaceModelForSound,
           huggingFaceModelForMusic: state.huggingFaceModelForMusic || defaultSettings.huggingFaceModelForMusic,
           gradioApiUrlForAssistant: state.gradioApiUrlForAssistant || defaultSettings.gradioApiUrlForAssistant,
@@ -340,36 +355,36 @@ export const useSettings = create<SettingsStore>()(
           gradioApiUrlForMusic: state.gradioApiUrlForMusic || defaultSettings.gradioApiUrlForMusic,
           replicateModelForImage: state.replicateModelForImage || defaultSettings.replicateModelForImage,
           replicateModelForVideo: state.replicateModelForVideo || defaultSettings.replicateModelForVideo,
-          replicateModelForSpeech: state.replicateModelForSpeech || defaultSettings.replicateModelForSpeech,
+          replicateModelForVoice: state.replicateModelForVoice || defaultSettings.replicateModelForVoice,
           replicateModelForSound: state.replicateModelForSound || defaultSettings.replicateModelForSound,
           replicateModelForMusic: state.replicateModelForMusic || defaultSettings.replicateModelForMusic,
           stabilityAiModelForImage: state.stabilityAiModelForImage || defaultSettings.stabilityAiModelForImage,
           stabilityAiModelForVideo: state.stabilityAiModelForVideo || defaultSettings.stabilityAiModelForVideo,
-          stabilityAiModelForSpeech: state.stabilityAiModelForSpeech || defaultSettings.stabilityAiModelForSpeech,
+          stabilityAiModelForVoice: state.stabilityAiModelForVoice || defaultSettings.stabilityAiModelForVoice,
           stabilityAiModelForSound: state.stabilityAiModelForSound || defaultSettings.stabilityAiModelForSound,
           stabilityAiModelForMusic: state.stabilityAiModelForMusic || defaultSettings.stabilityAiModelForMusic,
           falAiModelForImage: state.falAiModelForImage || defaultSettings.falAiModelForImage,
           falAiModelForVideo: state.falAiModelForVideo || defaultSettings.falAiModelForVideo,
-          falAiModelForSpeech: state.falAiModelForSpeech || defaultSettings.falAiModelForSpeech,
+          falAiModelForVoice: state.falAiModelForVoice || defaultSettings.falAiModelForVoice,
           falAiModelForSound: state.falAiModelForSound || defaultSettings.falAiModelForSound,
           falAiModelForMusic: state.falAiModelForMusic || defaultSettings.falAiModelForMusic,
           modelsLabModelForImage: state.modelsLabModelForImage || defaultSettings.modelsLabModelForImage,
           modelsLabModelForVideo: state.modelsLabModelForVideo || defaultSettings.modelsLabModelForVideo,
-          modelsLabModelForSpeech: state.modelsLabModelForSpeech || defaultSettings.modelsLabModelForSpeech,
+          modelsLabModelForVoice: state.modelsLabModelForVoice || defaultSettings.modelsLabModelForVoice,
           modelsLabModelForSound: state.modelsLabModelForSound || defaultSettings.modelsLabModelForSound,
           modelsLabModelForMusic: state.modelsLabModelForMusic || defaultSettings.modelsLabModelForMusic,
           openaiModelForAssistant: state.openaiModelForAssistant || defaultSettings.openaiModelForAssistant,
           openaiModelForImage: state.openaiModelForImage || defaultSettings.openaiModelForImage,
           openaiModelForVideo: state.openaiModelForVideo || defaultSettings.openaiModelForVideo,
-          openaiModelForSpeech: state.openaiModelForSpeech || defaultSettings.openaiModelForSpeech,
+          openaiModelForVoice: state.openaiModelForVoice || defaultSettings.openaiModelForVoice,
           groqModelForAssistant: state.groqModelForAssistant || defaultSettings.groqModelForAssistant,
           googleModelForAssistant: state.googleModelForAssistant || defaultSettings.googleModelForAssistant,
           googleModelForImage: state.googleModelForImage || defaultSettings.googleModelForImage,
           googleModelForVideo: state.googleModelForVideo || defaultSettings.googleModelForVideo,
-          googleModelForSpeech: state.googleModelForSpeech || defaultSettings.googleModelForSpeech,
+          googleModelForVoice: state.googleModelForVoice || defaultSettings.googleModelForVoice,
           googleModelForMusic: state.googleModelForMusic || defaultSettings.googleModelForMusic,
           anthropicModelForAssistant: state.anthropicModelForAssistant || defaultSettings.anthropicModelForAssistant,
-          elevenLabsModelForSpeech: state.elevenLabsModelForSpeech || defaultSettings.elevenLabsModelForSpeech,
+          elevenLabsModelForVoice: state.elevenLabsModelForVoice || defaultSettings.elevenLabsModelForVoice,
           elevenLabsModelForSound: state.elevenLabsModelForSound || defaultSettings.elevenLabsModelForSound,
         }
       },

src/controllers/settings/workflows/{storyboard.ts → image.ts}

@@ -1,7 +1,7 @@
 
 
 // https://replicate.com/fofr/any-comfyui-workflow/examples#ps4f5zcthdrgm0cfqh586zed7r
-export const defaultWorkflowForStoryboards = JSON.stringify({
+export const defaultWorkflowForImages = JSON.stringify({
   "3": {
     "inputs": {
       "seed": 156680208700286,

src/lib/utils/getRenderRequestPrompts.ts

@@ -26,13 +26,13 @@ export function getRenderRequestPrompts({
     segment.category === ClapSegmentCategory.VIDEO
     ? settings.videoPromptPrefix
     : segment.category === ClapSegmentCategory.STORYBOARD
-    ? settings.storyboardPromptPrefix
+    ? settings.imagePromptPrefix
     : "",
     videoPrompt,
     segment.category === ClapSegmentCategory.VIDEO
     ? settings.videoPromptSuffix
     : segment.category === ClapSegmentCategory.STORYBOARD
-    ? settings.storyboardPromptSuffix
+    ? settings.imagePromptSuffix
     : ""
   ].map(x => x.trim()).join(", ")
 
@@ -40,7 +40,7 @@ export function getRenderRequestPrompts({
     segment.category === ClapSegmentCategory.VIDEO
     ? settings.videoNegativePrompt
     : segment.category === ClapSegmentCategory.STORYBOARD
-    ? settings.storyboardNegativePrompt
+    ? settings.imageNegativePrompt
     : ""
   ].map(x => x.trim()).join(", ")