improving config panels + timeline + logo

package-lock.json

@@ -10,9 +10,9 @@
       "dependencies": {
         "@aitube/clap": "0.0.24",
         "@aitube/engine": "0.0.15",
-        "@aitube/timeline": "file:/Users/jbilcke/Projects/Typescript_Libraries/aitube-timeline",
+        "@aitube/timeline": "0.0.16",
         "@fal-ai/serverless-client": "^0.10.3",
-        "@huggingface/hub": "^0.15.0",
+        "@huggingface/hub": "^0.15.1",
         "@huggingface/inference": "^2.7.0",
         "@langchain/anthropic": "^0.2.0",
         "@langchain/core": "^0.2.6",
@@ -86,28 +86,33 @@
         "zustand": "^4.5.2"
       }
     },
-    "../Typescript_Libraries/aitube-timeline": {
+    "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",
-      "license": "MIT",
+      "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": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/@aitube/timeline/-/timeline-0.0.16.tgz",
+      "integrity": "sha512-Jva0nt7LC9XPwFR9yNfK/MnK7Qj/wWtR3nwkP1Xs5zH7U6I4Wm6D9cm4RpLs/nZ5nDZyPgJRuw0mX8Vq9CUQgQ==",
       "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",
@@ -125,29 +130,6 @@
         "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",
@@ -774,9 +756,9 @@
       }
     },
     "node_modules/@huggingface/tasks": {
-      "version": "0.10.11",
-      "resolved": "https://registry.npmjs.org/@huggingface/tasks/-/tasks-0.10.11.tgz",
-      "integrity": "sha512-talNbXgxT8fsqt8DhhF7mNZxfeCc8fAJWe1yquBzd4pA4PH/J504Z41uijo36HNoI8q3KGZ89A884sIcG3ak6Q=="
+      "version": "0.10.12",
+      "resolved": "https://registry.npmjs.org/@huggingface/tasks/-/tasks-0.10.12.tgz",
+      "integrity": "sha512-bpW2+ey2SBoEzSvn0eTmE+loLM3/B0Nw2BQQt0xWfafkNrR8xd8Hhc+aH8KdBsWko5YSSUSxb5vS1VenQ6q+/w=="
     },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
@@ -4533,6 +4515,15 @@
         "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",
@@ -4755,9 +4746,9 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.794",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.794.tgz",
-      "integrity": "sha512-6FApLtsYhDCY0Vglq3AptsdxQ+PJLc6AxlAM0HjEihUAiOPPbkASEsq9gtxUeZY9o0sJIEa3WnF0vVH4VT4iug=="
+      "version": "1.4.796",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.796.tgz",
+      "integrity": "sha512-NglN/xprcM+SHD2XCli4oC6bWe6kHoytcyLKCWXmRL854F0qhPhaYgUswUsglnPxYaNQIg2uMY4BvaomIf3kLA=="
     },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
@@ -7366,9 +7357,9 @@
       }
     },
     "node_modules/openai": {
-      "version": "4.49.0",
-      "resolved": "https://registry.npmjs.org/openai/-/openai-4.49.0.tgz",
-      "integrity": "sha512-/UkrBSej5ejZ4vnOFoeFefX7erjp4k3+xoLKkswjLEvgBU9QtCnOUgsfpvHkzTzgDXpqPMCzyQHQXWsgiq2xPw==",
+      "version": "4.49.1",
+      "resolved": "https://registry.npmjs.org/openai/-/openai-4.49.1.tgz",
+      "integrity": "sha512-bsFSNhhTNon+g6r4UYPKGLi+PlfP1G9TJGSkZS5nZx+PTwW2YUTlfxXxpOKrPab5auIXJdlYpC/g/wkHGR1xug==",
       "dependencies": {
         "@types/node": "^18.11.18",
         "@types/node-fetch": "^2.6.4",
@@ -8180,6 +8171,15 @@
         "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,9 +12,9 @@
   "dependencies": {
     "@aitube/clap": "0.0.24",
     "@aitube/engine": "0.0.15",
-    "@aitube/timeline": "file:/Users/jbilcke/Projects/Typescript_Libraries/aitube-timeline",
+    "@aitube/timeline": "0.0.16",
     "@fal-ai/serverless-client": "^0.10.3",
-    "@huggingface/hub": "^0.15.0",
+    "@huggingface/hub": "^0.15.1",
     "@huggingface/inference": "^2.7.0",
     "@langchain/anthropic": "^0.2.0",
     "@langchain/core": "^0.2.6",

src/app/main.tsx

@@ -54,8 +54,8 @@ export function Main() {
             <ReflexSplitter />
             <ReflexElement
               size={showTimeline ? 600 : 1}
-              minSize={showTimeline ? 150 : 1}
-              maxSize={showTimeline ? 1200 : 1}
+              minSize={showTimeline ? 100 : 1}
+              maxSize={showTimeline ? 8200 : 1}
               >
               <Timeline />
             </ReflexElement>

src/components/settings/constants.ts

@@ -1,6 +1,5 @@
 import { ComfyIcuAccelerator, ComputeProvider } from "@/types"
 
-
 export const computeProviderShortNames = {
   [ComputeProvider.NONE]: "None",
   [ComputeProvider.CUSTOM]: "Custom API",
@@ -77,3 +76,67 @@ export const availableComfyIcuAccelerators = {
   [ComfyIcuAccelerator.A100_80GB]: "A100 (80 GB)",
   [ComfyIcuAccelerator.H100]: "H100",
 }
+
+export const availableModelsForAssistant: Partial<Record<ComputeProvider, string[]>> = {
+  [ComputeProvider.OPENAI]: [
+    "gpt-4o",
+  ]
+}
+
+export const availableModelsForAssistantTurbo: Partial<Record<ComputeProvider, string[]>> = {
+  [ComputeProvider.OPENAI]: [
+    "gpt-4-turbo"
+  ]
+}
+
+
+// note: each of those models do different things, have different parameters..
+// so it will have to be taken into account
+export const availableModelsForImageGeneration: Partial<Record<ComputeProvider, string[]>> = {
+  [ComputeProvider.FALAI]: [
+    "fal-ai/fast-sdxl",
+    "fal-ai/stable-cascade",
+    "fal-ai/fast-lightning-sdxl",
+    "fal-ai/hyper-sdxl",
+    // "fal-ai/photomaker",
+    // "fal-ai/pulid",
+    // "fal-ai/image-to-image",
+    // "fal-ai/omni-zero",
+  ]
+}
+
+// should we call this upscaling or post-processing?
+export const availableModelsForImageUpscaling: Partial<Record<ComputeProvider, string[]>> = {
+  [ComputeProvider.FALAI]: [
+    "fal-ai/ccsr",
+  ]
+}
+
+export const availableModelsForVideoGeneration: Partial<Record<ComputeProvider, string[]>> = {
+  [ComputeProvider.FALAI]: [
+    "fal-ai/stable-video",
+  ]
+}
+
+export const availableModelsForVideoUpscaling: Partial<Record<ComputeProvider, string[]>> = {
+  [ComputeProvider.FALAI]: [
+  ]
+}
+
+export const availableModelsForSoundGeneration: Partial<Record<ComputeProvider, string[]>> = {
+  [ComputeProvider.FALAI]: [
+    "fal-ai/stable-audio"
+  ]
+}
+
+export const availableModelsForVoiceGeneration: Partial<Record<ComputeProvider, string[]>> = {
+  [ComputeProvider.FALAI]: [
+    "fal-ai/metavoice-v1"
+  ]
+}
+
+export const availableModelsForMusicGeneration: Partial<Record<ComputeProvider, string[]>> = {
+  [ComputeProvider.FALAI]: [
+    "fal-ai/stable-audio"
+  ]
+}

src/components/settings/index.tsx

@@ -13,37 +13,37 @@ import { SettingsSectionVideo } from "./video"
 import { SettingsSectionSound } from "./sound"
 import { SettingsSectionMusic } from "./music"
 import { SettingsSectionVoice } from "./voice"
+import { SettingsCategory } from "@/types"
+
+const panels: Record<SettingsCategory, JSX.Element> = {
+  [SettingsCategory.NONE]: <></>,
+  [SettingsCategory.PROVIDER]: <SettingsSectionProvider />,
+  [SettingsCategory.ASSISTANT]: <SettingsSectionAssistant />,
+  [SettingsCategory.IMAGE]: <SettingsSectionImage />,
+  [SettingsCategory.VIDEO]: <SettingsSectionVideo />,
+  [SettingsCategory.VOICE]: <SettingsSectionVoice />,
+  [SettingsCategory.SOUND]: <SettingsSectionSound />,
+  [SettingsCategory.MUSIC]: <SettingsSectionMusic />,
+}
+
+const panelLabels = {
+  [SettingsCategory.NONE]: "",
+  [SettingsCategory.PROVIDER]: "Providers",
+  [SettingsCategory.ASSISTANT]: "Assistant",
+  [SettingsCategory.IMAGE]: "Image",
+  [SettingsCategory.VIDEO]: "Video",
+  [SettingsCategory.VOICE]: "Voice",
+  [SettingsCategory.SOUND]: "Sound",
+  [SettingsCategory.MUSIC]: "Music",
+} as any
 
 export function SettingsDialog() {
 
   const showSettings = useUI(s => s.showSettings)
   const setShowSettings = useUI(s => s.setShowSettings)
-  const [_isPending, startTransition] = useTransition()
-
-  const panels = {
-    provider: <SettingsSectionProvider />,
-    assistant: <SettingsSectionAssistant />,
-    image: <SettingsSectionImage />,
-    video: <SettingsSectionVideo />,
-    voice: <SettingsSectionVoice />,
-    music: <SettingsSectionMusic />,
-    sound: <SettingsSectionSound />,
-  }
-
-  const panelLabels = {
-    provider: "Providers",
-    assistant: "Assistant",
-    image: "Image",
-    video: "Video",
-    voice: "Voice",
-    music: "Music",
-    sound: "Sound",
-  } as any
-
-  const [configPanel, setConfigPanel] = useState<keyof typeof panels>("provider")
 
   return (
-    <Dialog open={showSettings} onOpenChange={setShowSettings}>
+    <Dialog open={showSettings !== SettingsCategory.NONE} onOpenChange={(open) => setShowSettings(open ? SettingsCategory.PROVIDER : SettingsCategory.NONE)}>
       <DialogContent className={cn(
         `select-none`,
         // DialogContent comes with some hardcoded values so we need to override them
@@ -57,7 +57,7 @@ export function SettingsDialog() {
                 key={key}
                 variant="ghost"
                 className="flex flex-col capitalize w-full items-end text-right text-lg font-thin text-stone-300"
-                onClick={() => setConfigPanel(key as keyof typeof panels)}>{panelLabels[key]}</Button>
+                onClick={() => setShowSettings(key as SettingsCategory)}>{panelLabels[key]}</Button>
               ))}
             </div>
         </ScrollArea>
@@ -69,10 +69,10 @@ export function SettingsDialog() {
         pl-8
         ">
           <ScrollArea className="flex flex-row h-full">
-            {panels[configPanel]}
+            {panels[showSettings]}
           </ScrollArea>
           <DialogFooter>
-            <Button variant="outline" className=" dark:bg-stone-800 dark:text-stone-400 dark:border-stone-700 text-sm font-light" onClick={() => { setShowSettings(false) }}>Close</Button>
+            <Button variant="outline" className=" dark:bg-stone-800 dark:text-stone-400 dark:border-stone-700 text-sm font-light" onClick={() => { setShowSettings(SettingsCategory.NONE) }}>Close</Button>
           </DialogFooter>
         </div>
       </DialogContent>

src/components/tags/colors.ts

@@ -30,5 +30,6 @@ export const tagColorToTailwindClass: Record<TagColor, string> = {
   [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.PURPLE]: `bg-purple-800 border-purple-600 text-purple-300`,
   [TagColor.ROSE]: `bg-rose-800 border-rose-600 text-rose-300`
 }

src/components/tags/types.ts

@@ -33,5 +33,6 @@ export enum TagColor {
   VIOLET = "VIOLET",
   FUCHSIA = "FUCHSIA",
   PINK = "PINK",
+  PURPLE = "PURPLE",
   ROSE = "ROSE",
 }

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

@@ -4,7 +4,7 @@ import { useTimelineState } from "@aitube/timeline"
 import { cn } from "@/lib/utils"
 
 import { TopMenu } from "../top-menu"
-import { APP_NAME, APP_REVISION } from "@/lib/core/constants"
+import { APP_DOMAIN, APP_NAME, APP_REVISION } from "@/lib/core/constants"
 
 
 export function TopBar() {
@@ -19,18 +19,6 @@ export function TopBar() {
       `border-b-stone-700`,
     )}>
       <TopMenu />
-      <div className={cn(
-        `absolute flex flex-row flex-grow w-full`,
-        `items-center justify-center`,
-        `pointer-events-none`,
-        `text-xs text-stone-300`
-      )}>
-        {
-        // clap?.meta?.title || "Untitled"
-        }
-        <span className="text-stone-300 mr-1">{APP_NAME}.app</span>
-        <span className="text-stone-500">({APP_REVISION})</span>
-      </div>
     </div>
   )
 }

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

@@ -14,15 +14,21 @@ import {
 import { useSettings } from "@/controllers/settings"
 import { useUI } from "@/controllers/ui"
 
-import { ProviderList } from "../ProviderList"
-import { RenderingStrategyList } from "../RenderingStrategyList"
+import { ProviderList } from "../lists/ProviderList"
+import { RenderingStrategyList } from "../lists/RenderingStrategyList"
 import { availableComputeProvidersForImages } from "@/components/settings/constants"
-
+import { ImageGenerationModelList } from "../lists/ImageGenerationModelList"
+import { ImageUpscalingModelList } from "../lists/ImageUpscalingModelList"
+import { SettingsCategory } from "@/types"
 
 export function TopMenuImage() {
   const setShowSettings = useUI(s => s.setShowSettings)
   const imageProvider = useSettings(s => s.imageProvider)
   const setImageProvider = useSettings(s => s.setImageProvider)
+  const imageGenerationModel = useSettings(s => s.imageGenerationModel)
+  const setImageGenerationModel = useSettings(s => s.setImageGenerationModel)
+  const imageUpscalingModel = useSettings(s => s.imageUpscalingModel)
+  const setImageUpscalingModel = useSettings(s => s.setImageUpscalingModel)
   const imageRenderingStrategy = useSettings((s) => s.imageRenderingStrategy)
   const setImageRenderingStrategy = useSettings((s) => s.setImageRenderingStrategy)
   return (
@@ -30,8 +36,10 @@ export function TopMenuImage() {
       <MenubarTrigger>Image</MenubarTrigger>
       <MenubarContent>
         <MenubarSub>
-          <MenubarItem onClick={() => { setShowSettings(true) }}>Show advanced settings</MenubarItem>
+          <MenubarItem onClick={() => { setShowSettings(SettingsCategory.IMAGE) }}>Show advanced settings</MenubarItem>
           <MenubarSeparator />
+          <ImageGenerationModelList provider={imageProvider} current={imageGenerationModel} setter={setImageGenerationModel} />
+          <ImageUpscalingModelList provider={imageProvider} current={imageUpscalingModel} setter={setImageUpscalingModel} />
           <ProviderList providers={availableComputeProvidersForImages} current={imageProvider} setter={setImageProvider} />
           <RenderingStrategyList current={imageRenderingStrategy} setter={setImageRenderingStrategy} />
           <MenubarSeparator />

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

@@ -9,10 +9,14 @@ import { TopMenuSound } from "./sound"
 import { TopMenuMusic } from "./music"
 
 import { TopMenuView } from "./view"
+import { cn } from "@aitube/timeline"
+import { APP_REVISION } from "@/lib/core/constants"
 
 export function TopMenu() {
   return (
-    <Menubar>
+    <Menubar className="w-full">
+      <span className="scale-[88%] text-purple-300/80 pl-1 text-lg font-bold tracking-[-0.03em] mr-4">Clapper<span
+      className="absolute text-4xs text-purple-100/70 tracking-[0.05em] uppercase mt-1.5 -ml-0 -rotate-6  ">ai</span></span>
       <TopMenuFile />
       <TopMenuImage />
       <TopMenuVideo />
@@ -20,6 +24,19 @@ export function TopMenu() {
       <TopMenuSound />
       <TopMenuMusic />
       <TopMenuView />
+      <div className={cn(`
+        flex flex-row flex-grow
+        px-2
+        items-center justify-end
+        pointer-events-none
+        text-xs text-stone-300
+        `
+      )}>
+        {
+        // clap?.meta?.title || "Untitled"
+        }
+        <span className="text-stone-500">{APP_REVISION}</span>
+      </div>
     </Menubar>
   )
 }

src/components/toolbars/top-menu/lists/ImageGenerationModelList.tsx

@@ -0,0 +1,55 @@
+"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"
+import { ComputeProvider } from "@/types"
+import { availableModelsForImageGeneration } from "@/components/settings/constants"
+
+export function ImageGenerationModelList({
+  provider,
+  current,
+  setter,
+}: {
+  provider?: ComputeProvider
+  current?: string
+  setter: (model: string) => void
+}) {
+  const models: string[] = provider ? (availableModelsForImageGeneration[provider] || []) : []
+
+  if (models.length === 0) { return null }
+  
+  return (
+    <MenubarSub>
+      <MenubarSubTrigger>
+        <Tag size="lg" color={TagColor.SKY}>generate&nbsp;image</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/{ModelList.tsx → lists/ImageUpscalingModelList.tsx}

@@ -13,21 +13,26 @@ import {
 
 import { TagColor } from "@/components/tags/types"
 import { Tag } from "@/components/tags/Tag"
+import { ComputeProvider } from "@/types"
+import { availableModelsForImageUpscaling } from "@/components/settings/constants"
 
-
-export function ModelList({
-  models = [],
+export function ImageUpscalingModelList({
+  provider,
   current,
   setter,
 }: {
-  models?: string[]
+  provider?: ComputeProvider
   current?: string
   setter: (model: string) => void
 }) {
+  const models: string[] = provider ? (availableModelsForImageUpscaling[provider] || []) : []
+
+  if (models.length === 0) { return null }
+  
   return (
     <MenubarSub>
       <MenubarSubTrigger>
-        <Tag size="lg" color={TagColor.ZINC}>ai&nbsp;model</Tag>
+        <Tag size="lg" color={TagColor.BLUE}>upscale&nbsp;image</Tag>
         {current || "None"}
       </MenubarSubTrigger>
       <MenubarSubContent>

src/components/toolbars/top-menu/lists/MusicGenerationModelList.tsx

@@ -0,0 +1,55 @@
+"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"
+import { ComputeProvider } from "@/types"
+import { availableModelsForMusicGeneration } from "@/components/settings/constants"
+
+export function MusicGenerationModelList({
+  provider,
+  current,
+  setter,
+}: {
+  provider?: ComputeProvider
+  current?: string
+  setter: (model: string) => void
+}) {
+  const models: string[] = provider ? (availableModelsForMusicGeneration[provider] || []) : []
+
+  if (models.length === 0) { return null }
+  
+  return (
+    <MenubarSub>
+      <MenubarSubTrigger>
+        <Tag size="lg" color={TagColor.GREEN}>generate&nbsp;music</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/{RenderingStrategyList.tsx → lists/RenderingStrategyList.tsx}

@@ -12,7 +12,7 @@ import {
 } from "@/components/ui/menubar"
 
 import { RenderingStrategy } from "@aitube/timeline"
-import { strategyLabels } from "./constants"
+import { strategyLabels } from "../constants"
 import { Tag } from "@/components/tags/Tag"
 import { TagColor } from "@/components/tags/types"
 

src/components/toolbars/top-menu/lists/SoundGenerationModelList.tsx

@@ -0,0 +1,55 @@
+"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"
+import { ComputeProvider } from "@/types"
+import { availableModelsForSoundGeneration } from "@/components/settings/constants"
+
+export function SoundGenerationModelList({
+  provider,
+  current,
+  setter,
+}: {
+  provider?: ComputeProvider
+  current?: string
+  setter: (model: string) => void
+}) {
+  const models: string[] = provider ? (availableModelsForSoundGeneration[provider] || []) : []
+
+  if (models.length === 0) { return null }
+  
+  return (
+    <MenubarSub>
+      <MenubarSubTrigger>
+        <Tag size="lg" color={TagColor.YELLOW}>generate&nbsp;sound</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/lists/VideoGenerationModelList.tsx

@@ -0,0 +1,55 @@
+"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"
+import { ComputeProvider } from "@/types"
+import { availableModelsForVideoGeneration } from "@/components/settings/constants"
+
+export function VideoGenerationModelList({
+  provider,
+  current,
+  setter,
+}: {
+  provider?: ComputeProvider
+  current?: string
+  setter: (model: string) => void
+}) {
+  const models: string[] = provider ? (availableModelsForVideoGeneration[provider] || []) : []
+
+  if (models.length === 0) { return null }
+  
+  return (
+    <MenubarSub>
+      <MenubarSubTrigger>
+        <Tag size="lg" color={TagColor.VIOLET}>generate&nbsp;video</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/lists/VideoUpscalingModelList.tsx

@@ -0,0 +1,55 @@
+"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"
+import { ComputeProvider } from "@/types"
+import { availableModelsForVideoUpscaling } from "@/components/settings/constants"
+
+export function VideoUpscalingModelList({
+  provider,
+  current,
+  setter,
+}: {
+  provider?: ComputeProvider
+  current?: string
+  setter: (model: string) => void
+}) {
+  const models: string[] = provider ? (availableModelsForVideoUpscaling[provider] || []) : []
+  
+  if (models.length === 0) { return null }
+
+  return (
+    <MenubarSub>
+      <MenubarSubTrigger>
+        <Tag size="lg" color={TagColor.INDIGO}>upscale&nbsp;video</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/lists/VoiceGenerationModelList.tsx

@@ -0,0 +1,55 @@
+"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"
+import { ComputeProvider } from "@/types"
+import { availableModelsForVoiceGeneration } from "@/components/settings/constants"
+
+export function VoiceGenerationModelList({
+  provider,
+  current,
+  setter,
+}: {
+  provider?: ComputeProvider
+  current?: string
+  setter: (model: string) => void
+}) {
+  const models: string[] = provider ? (availableModelsForVoiceGeneration[provider] || []) : []
+
+  if (models.length === 0) { return null }
+  
+  return (
+    <MenubarSub>
+      <MenubarSubTrigger>
+        <Tag size="lg" color={TagColor.ORANGE}>generate&nbsp;voice</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/music/index.tsx

@@ -14,10 +14,10 @@ import {
 import { useSettings } from "@/controllers/settings"
 import { useUI } from "@/controllers/ui"
 
-import { ProviderList } from "../ProviderList"
-import { RenderingStrategyList } from "../RenderingStrategyList"
+import { ProviderList } from "../lists/ProviderList"
+import { RenderingStrategyList } from "../lists/RenderingStrategyList"
 import { availableComputeProvidersForMusic } from "@/components/settings/constants"
-
+import { SettingsCategory } from "@/types"
 
 export function TopMenuMusic() {
   const setShowSettings = useUI(s => s.setShowSettings)
@@ -30,7 +30,7 @@ export function TopMenuMusic() {
       <MenubarTrigger>Music</MenubarTrigger>
       <MenubarContent>
         <MenubarSub>
-          <MenubarItem onClick={() => { setShowSettings(true) }}>Show advanced settings</MenubarItem>
+          <MenubarItem onClick={() => { setShowSettings(SettingsCategory.MUSIC) }}>Show advanced settings</MenubarItem>
           <MenubarSeparator />
           <ProviderList providers={availableComputeProvidersForMusic} current={musicProvider} setter={setMusicProvider} />
           <RenderingStrategyList current={musicRenderingStrategy} setter={setMusicRenderingStrategy} />

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

@@ -14,10 +14,10 @@ import {
 import { useSettings } from "@/controllers/settings"
 import { useUI } from "@/controllers/ui"
 
-import { ProviderList } from "../ProviderList"
-import { RenderingStrategyList } from "../RenderingStrategyList"
+import { ProviderList } from "../lists/ProviderList"
+import { RenderingStrategyList } from "../lists/RenderingStrategyList"
 import { availableComputeProvidersForSound } from "@/components/settings/constants"
-
+import { SettingsCategory } from "@/types"
 
 export function TopMenuSound() {
   const setShowSettings = useUI(s => s.setShowSettings)
@@ -30,7 +30,7 @@ export function TopMenuSound() {
       <MenubarTrigger>Sound</MenubarTrigger>
       <MenubarContent>
         <MenubarSub>
-          <MenubarItem onClick={() => { setShowSettings(true) }}>Show advanced settings</MenubarItem>
+          <MenubarItem onClick={() => { setShowSettings(SettingsCategory.SOUND) }}>Show advanced settings</MenubarItem>
           <MenubarSeparator />
           <ProviderList providers={availableComputeProvidersForSound} current={soundProvider} setter={setSoundProvider} />
           <RenderingStrategyList current={soundRenderingStrategy} setter={setSoundRenderingStrategy} />

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

@@ -14,15 +14,21 @@ import {
 import { useSettings } from "@/controllers/settings"
 import { useUI } from "@/controllers/ui"
 
-import { ProviderList } from "../ProviderList"
-import { RenderingStrategyList } from "../RenderingStrategyList"
+import { ProviderList } from "../lists/ProviderList"
+import { RenderingStrategyList } from "../lists/RenderingStrategyList"
 import { availableComputeProvidersForVideos } from "@/components/settings/constants"
-
+import { VideoGenerationModelList } from "../lists/VideoGenerationModelList"
+import { VideoUpscalingModelList } from "../lists/VideoUpscalingModelList"
+import { SettingsCategory } from "@/types"
 
 export function TopMenuVideo() {
   const setShowSettings = useUI(s => s.setShowSettings)
   const videoProvider = useSettings(s => s.videoProvider)
   const setVideoProvider = useSettings(s => s.setVideoProvider)
+  const videoGenerationModel = useSettings(s => s.videoGenerationModel)
+  const setVideoGenerationModel = useSettings(s => s.setVideoGenerationModel)
+  const videoUpscalingModel = useSettings(s => s.videoUpscalingModel)
+  const setVideoUpscalingModel = useSettings(s => s.setVideoUpscalingModel)
   const videoRenderingStrategy = useSettings((s) => s.videoRenderingStrategy)
   const setVideoRenderingStrategy = useSettings((s) => s.setVideoRenderingStrategy)
   return (
@@ -30,8 +36,10 @@ export function TopMenuVideo() {
       <MenubarTrigger>Video</MenubarTrigger>
       <MenubarContent>
         <MenubarSub>
-          <MenubarItem onClick={() => { setShowSettings(true) }}>Show advanced settings</MenubarItem>
+          <MenubarItem onClick={() => { setShowSettings(SettingsCategory.VIDEO) }}>Show advanced settings</MenubarItem>
           <MenubarSeparator />
+          <VideoGenerationModelList provider={videoProvider} current={videoGenerationModel} setter={setVideoGenerationModel} />
+          <VideoUpscalingModelList provider={videoProvider} current={videoUpscalingModel} setter={setVideoUpscalingModel} />
           <ProviderList providers={availableComputeProvidersForVideos} current={videoProvider} setter={setVideoProvider} />
           <RenderingStrategyList current={videoRenderingStrategy} setter={setVideoRenderingStrategy} />
           <MenubarSeparator />

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

@@ -14,15 +14,18 @@ import {
 import { useSettings } from "@/controllers/settings"
 import { useUI } from "@/controllers/ui"
 
-import { ProviderList } from "../ProviderList"
-import { RenderingStrategyList } from "../RenderingStrategyList"
+import { ProviderList } from "../lists/ProviderList"
+import { RenderingStrategyList } from "../lists/RenderingStrategyList"
 import { availableComputeProvidersForVoice } from "@/components/settings/constants"
-
+import { VoiceGenerationModelList } from "../lists/VoiceGenerationModelList"
+import { SettingsCategory } from "@/types"
 
 export function TopMenuVoice() {
   const setShowSettings = useUI(s => s.setShowSettings)
   const voiceProvider = useSettings(s => s.voiceProvider)
   const setVoiceProvider = useSettings(s => s.setVoiceProvider)
+  const voiceGenerationModel = useSettings(s => s.voiceGenerationModel)
+  const setVoiceGenerationModel = useSettings(s => s.setVoiceGenerationModel)
   const voiceRenderingStrategy = useSettings((s) => s.voiceRenderingStrategy)
   const setVoiceRenderingStrategy = useSettings((s) => s.setVoiceRenderingStrategy)
   return (
@@ -30,8 +33,9 @@ export function TopMenuVoice() {
       <MenubarTrigger>Voice</MenubarTrigger>
       <MenubarContent>
         <MenubarSub>
-          <MenubarItem onClick={() => { setShowSettings(true) }}>Show advanced settings</MenubarItem>
+          <MenubarItem onClick={() => { setShowSettings(SettingsCategory.VOICE) }}>Show advanced settings</MenubarItem>
           <MenubarSeparator />
+          <VoiceGenerationModelList provider={voiceProvider} current={voiceGenerationModel} setter={setVoiceGenerationModel} />
           <ProviderList providers={availableComputeProvidersForVoice} current={voiceProvider} setter={setVoiceProvider} />
           <RenderingStrategyList current={voiceRenderingStrategy} setter={setVoiceRenderingStrategy} />
           <MenubarSeparator />

src/components/ui/menubar.tsx

@@ -23,7 +23,7 @@ const Menubar = React.forwardRef<
   <MenubarPrimitive.Root
     ref={ref}
     className={cn(
-      "flex h-[2.25rem] items-center space-x-1 rounded-md border border-stone-200 bg-white p-1 dark:border-stone-900 dark:bg-stone-900 border-none dark:border-none shadow-none",
+      "flex h-[2.25rem] items-center space-x-0 rounded-md border border-stone-200 bg-white p-1 dark:border-stone-900 dark:bg-stone-900 border-none dark:border-none shadow-none",
       className
     )}
     {...props}
@@ -38,7 +38,7 @@ const MenubarTrigger = React.forwardRef<
   <MenubarPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-stone-100 focus:text-stone-900 data-[state=open]:bg-stone-100 data-[state=open]:text-stone-900 dark:focus:bg-stone-800 dark:focus:text-stone-200 dark:data-[state=open]:bg-stone-800 dark:data-[state=open]:text-stone-200",
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm font-normal outline-none focus:bg-stone-100 focus:text-stone-900 data-[state=open]:bg-stone-100 data-[state=open]:text-stone-900 dark:focus:bg-stone-800 dark:text-stone-400 dark:focus:text-stone-300 dark:data-[state=open]:bg-stone-800 dark:data-[state=open]:text-stone-300",
       className
     )}
     {...props}

src/controllers/settings/getDefaultSettingsState.ts

@@ -37,6 +37,17 @@ export function getDefaultSettingsState(): SettingsState {
     videoPromptSuffix: "",
     videoNegativePrompt: "",
 
+    assistantModel: "",
+    assistantTurboModel: "",
+    imageGenerationModel: "",
+    imageGenerationTurboModel: "",
+    imageUpscalingModel: "",
+    videoGenerationModel: "",
+    videoUpscalingModel: "",
+    soundGenerationModel: "",
+    voiceGenerationModel: "",
+    musicGenerationModel: "",
+
     imageRenderingStrategy: RenderingStrategy.ON_DEMAND,
     videoRenderingStrategy: RenderingStrategy.ON_DEMAND,
     voiceRenderingStrategy: RenderingStrategy.ON_DEMAND,

src/controllers/settings/types.ts

@@ -36,6 +36,17 @@ export type SettingsState = {
   videoPromptPrefix: string
   videoPromptSuffix: string
   videoNegativePrompt: string
+                      
+  assistantModel: string
+  assistantTurboModel: string
+  imageGenerationModel: string
+  imageGenerationTurboModel: string
+  imageUpscalingModel: string
+  videoGenerationModel: string
+  videoUpscalingModel: string
+  soundGenerationModel: string
+  voiceGenerationModel: string
+  musicGenerationModel: string
 
   imageRenderingStrategy: RenderingStrategy
   videoRenderingStrategy: RenderingStrategy
@@ -142,6 +153,16 @@ export type SettingsControls = {
   setVideoPromptSuffix: (videoPromptSuffix?: string) => void
   setVideoNegativePrompt: (videoNegativePrompt?: string) => void
 
+  setAssistantModel: (assistantModel?: string) => void
+  setAssistantTurboModel: (assistantTurboModel?: string) => void
+  setImageGenerationModel: (imageGenerationModel?: string) => void
+  setImageGenerationTurboModel: (imageGenerationTurboModel?: string) => void
+  setImageUpscalingModel: (imageUpscalingModel?: string) => void
+  setVideoGenerationModel: (videoGenerationModel?: string) => void
+  setVideoUpscalingModel: (videoUpscalingModel?: string) => void
+  setSoundGenerationModel: (soundGenerationModel?: string) => void
+  setVoiceGenerationModel: (voiceGenerationModel?: string) => void
+  setMusicGenerationModel: (musicGenerationModel?: string) => void
   setImageRenderingStrategy: (imageRenderingStrategy?: RenderingStrategy) => void
   setVideoRenderingStrategy: (videoRenderingStrategy?: RenderingStrategy) => void
   setVoiceRenderingStrategy: (voiceRenderingStrategy?: RenderingStrategy) => void

src/controllers/settings/useSettings.ts

@@ -105,6 +105,46 @@ export const useSettings = create<SettingsStore>()(
       setVideoNegativePrompt: (videoNegativePrompt?: string) => {
         set({ videoNegativePrompt: getValidString(videoNegativePrompt, getDefaultSettingsState().videoNegativePrompt) })
       },
+      setAssistantModel: (assistantModel?: string) => {
+        const { assistantModel: defaultAssistantModel } = getDefaultSettingsState()
+        set({ assistantModel: getValidString(assistantModel, defaultAssistantModel) })
+      },
+      setAssistantTurboModel: (assistantTurboModel?: string) => {
+        const { assistantTurboModel: defaultAssistantTurboModel } = getDefaultSettingsState()
+        set({ assistantTurboModel: getValidString(assistantTurboModel, defaultAssistantTurboModel) })
+      },
+      setImageGenerationModel: (imageGenerationModel?: string) => {
+        const { imageGenerationModel: defaultImageGenerationModel } = getDefaultSettingsState()
+        set({ imageGenerationModel: getValidString(imageGenerationModel, defaultImageGenerationModel) })
+      },
+      setImageGenerationTurboModel: (imageGenerationTurboModel?: string) => {
+        const { imageGenerationTurboModel: defaultImageGenerationTurboModel } = getDefaultSettingsState()
+        set({ imageGenerationTurboModel: getValidString(imageGenerationTurboModel, defaultImageGenerationTurboModel) })
+      },
+      setImageUpscalingModel: (imageUpscalingModel?: string) => {
+        const { imageUpscalingModel: defaultImageUpscalingModel } = getDefaultSettingsState()
+        set({ imageUpscalingModel: getValidString(imageUpscalingModel, defaultImageUpscalingModel) })
+      },
+      setVideoGenerationModel: (videoGenerationModel?: string) => {
+        const { videoGenerationModel: defaultVideoGenerationModel } = getDefaultSettingsState()
+        set({ videoGenerationModel: getValidString(videoGenerationModel, defaultVideoGenerationModel) })
+      },
+      setVideoUpscalingModel: (videoUpscalingModel?: string) => {
+        const { videoUpscalingModel: defaultVideoUpscalingModel} = getDefaultSettingsState()
+        set({ videoUpscalingModel: getValidString(videoUpscalingModel, defaultVideoUpscalingModel) })
+      },
+      setSoundGenerationModel: (soundGenerationModel?: string) => {
+        const { soundGenerationModel: defaultSoundGenerationModel } = getDefaultSettingsState()
+        set({ soundGenerationModel: getValidString(soundGenerationModel, defaultSoundGenerationModel) })
+      },
+      setVoiceGenerationModel: (voiceGenerationModel?: string) => {
+        const { voiceGenerationModel: defaultVoiceGenerationModel } = getDefaultSettingsState()
+        set({ voiceGenerationModel: getValidString(voiceGenerationModel, defaultVoiceGenerationModel) })
+      },
+      setMusicGenerationModel: (musicGenerationModel?: string) => {
+        const { musicGenerationModel: defaultVoiceGenerationModel } = getDefaultSettingsState()
+        set({ musicGenerationModel: getValidString(musicGenerationModel, defaultVoiceGenerationModel) })
+      },
       setImageRenderingStrategy: (imageRenderingStrategy?: RenderingStrategy) => {
         const { imageRenderingStrategy: defaulImageRenderingStrategy } = getDefaultSettingsState()
         set({ imageRenderingStrategy: parseRenderingStrategy(imageRenderingStrategy, defaulImageRenderingStrategy) })
@@ -328,7 +368,19 @@ export const useSettings = create<SettingsStore>()(
           imageNegativePrompt: state.imageNegativePrompt || defaultSettings.imageNegativePrompt,
           videoPromptPrefix: state.videoPromptPrefix || defaultSettings.videoPromptPrefix,
           videoPromptSuffix: state.videoPromptSuffix || defaultSettings.videoPromptSuffix,
-          videoNegativePrompt: state.videoNegativePrompt || defaultSettings.videoNegativePrompt,
+          videoNegativePrompt: state.videoNegativePrompt || defaultSettings.videoNegativePrompt,       
+                    
+          assistantModel: state.assistantModel || defaultSettings.assistantModel,
+          assistantTurboModel: state.assistantTurboModel || defaultSettings.assistantTurboModel,
+          imageGenerationModel: state.imageGenerationModel || defaultSettings.imageGenerationModel,
+          imageGenerationTurboModel: state.imageGenerationTurboModel || defaultSettings.imageGenerationTurboModel,
+          imageUpscalingModel: state.imageUpscalingModel || defaultSettings.imageUpscalingModel,
+          videoGenerationModel: state.videoGenerationModel || defaultSettings.videoGenerationModel,
+          videoUpscalingModel: state.videoUpscalingModel || defaultSettings.videoUpscalingModel,
+          soundGenerationModel: state.soundGenerationModel || defaultSettings.soundGenerationModel,
+          voiceGenerationModel: state.voiceGenerationModel || defaultSettings.voiceGenerationModel,
+          musicGenerationModel: state.musicGenerationModel || defaultSettings.musicGenerationModel,
+                    
           imageRenderingStrategy: state.imageRenderingStrategy || defaultSettings.imageRenderingStrategy,
           videoRenderingStrategy: state.videoRenderingStrategy || defaultSettings.videoRenderingStrategy,
           voiceRenderingStrategy: state.voiceRenderingStrategy || defaultSettings.voiceRenderingStrategy,

src/controllers/ui/getDefaultUIState.ts

@@ -1,8 +1,9 @@
+import { SettingsCategory } from "@/types"
 import { UIState } from "./types"
 
 export function getDefaultUIState(): UIState {
   const state: UIState = {
-    showSettings: false,
+    showSettings: SettingsCategory.NONE,
     showImporter: false,
     showTimeline: true,
     showExplorer: true,

src/controllers/ui/types.ts

@@ -1,5 +1,7 @@
+import { SettingsCategory } from "@/types"
+
 export type UIState = {
-  showSettings: boolean
+  showSettings: SettingsCategory
   showImporter: boolean
   showTimeline: boolean
   showExplorer: boolean
@@ -10,7 +12,7 @@ export type UIState = {
 }
 
 export type UIControls = {
-  setShowSettings: (showSettings: boolean) => void
+  setShowSettings: (showSettings: SettingsCategory) => void
   setShowImporter: (showImporter: boolean) => void
   setShowTimeline: (showTimeline: boolean) => void
   setShowExplorer: (showExplorer: boolean) => void

src/controllers/ui/useUI.ts

@@ -5,13 +5,14 @@ import { persist } from 'zustand/middleware'
 
 import { UIStore } from "./types"
 import { getDefaultUIState } from "./getDefaultUIState"
+import { SettingsCategory } from "@/types"
 
 export const useUI = create<UIStore>()(
   persist(
     (set, get) => ({
       ...getDefaultUIState(),
 
-      setShowSettings: (showSettings: boolean) => {
+      setShowSettings: (showSettings: SettingsCategory) => {
         set({ showSettings })
       },
       setShowImporter: (showImporter: boolean) => {

src/lib/core/constants.ts

@@ -3,8 +3,8 @@
 // who is seriously ready to spawn 32 GPUs in parallel for this?
 export const HARD_LIMIT_NB_MAX_ASSETS_TO_GENERATE_IN_PARALLEL = 32
 
-export const APP_NAME = "Clapper"
-export const APP_REVISION = "r20240606"
+export const APP_NAME = "Clapper AI"
+export const APP_REVISION = "r2024-06-08"
 
 export const APP_DOMAIN = "Clapper.app"
 export const APP_LINK = "https://clapper.app"

src/lib/hf/getMyGradioSpaces.ts

@@ -0,0 +1,55 @@
+import { listSpaces, Credentials, whoAmI, SpaceEntry } from "@huggingface/hub"
+import { GradioSpace } from "./types"
+
+export async function getMyGradioSpaces({
+  huggingFaceApiKey
+}: {
+  huggingFaceApiKey: string
+}): Promise<GradioSpace[]> {
+
+  const accessToken = huggingFaceApiKey || ""
+
+  if (!accessToken) {
+    throw new Error(`cannot list spaces without a Hugging Face access token`)
+  }
+
+  const credentials: Credentials = { accessToken }
+
+  let username = ""
+  try {
+    const { name } = await whoAmI({ credentials })
+    username = name
+    if (!username) {
+      throw new Error(`returned username is empty`)
+    }
+  } catch (err) {
+    throw new Error(`cannot list spaces: ${err}`)
+  }
+
+
+  let maxNbSpaces = 10
+  let gradioSpaces: GradioSpace[] = []
+
+  for await (const space of listSpaces({
+    search: {
+      owner: username
+    },
+    additionalFields: [
+     "cardData",
+     "runtime",
+     "tags",
+     "models"
+    ],
+    credentials
+  })) {
+    if (
+      space.sdk !== "gradio"
+    ) { continue }
+
+    console.log("MySpace:", gradioSpaces)
+
+    gradioSpaces.push(space)
+  }
+
+  return gradioSpaces
+}

src/lib/hf/types.ts

@@ -0,0 +1,5 @@
+import { SpaceEntry} from "@huggingface/hub"
+import { ApiSpaceInfo } from "@huggingface/hub/dist/src/types/api/api-space"
+
+export type GradioSpace =
+  SpaceEntry & Pick<ApiSpaceInfo, "cardData" | "runtime" | "tags" | "models">

src/lib/hf/useMyGradioSpaces.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react"
+
+import { useSettings } from "@/controllers/settings"
+
+import { GradioSpace } from "./types"
+import { getMyGradioSpaces } from "./getMyGradioSpaces"
+
+export function useMyGradioSpaces() {
+  const [gradioSpaces, setGradioSpaces] = useState<GradioSpace[]>([])
+
+  const huggingFaceApiKey = useSettings(s => s.huggingFaceApiKey)
+
+  useEffect(() => {
+    const fn = async () => {
+      try {
+        const newSpaces = await getMyGradioSpaces({ huggingFaceApiKey })
+        setGradioSpaces(newSpaces)
+      } catch (err) {
+        console.error(`failed to load the Gradio spaces (most likely your HF token is invalid)`, err)
+      }
+
+    }
+    fn()
+  }, [huggingFaceApiKey])
+
+  return gradioSpaces
+}

src/types.ts

@@ -1,6 +1,17 @@
 import { ClapEntity, ClapMeta, ClapSegment, ClapSegmentCategory } from "@aitube/clap"
 import { SettingsState } from "./controllers/settings"
 
+export enum SettingsCategory {
+  NONE = "NONE",
+  PROVIDER = "PROVIDER",
+  ASSISTANT = "ASSISTANT",
+  IMAGE = "IMAGE",
+  VIDEO = "VIDEO",
+  VOICE = "VOICE",
+  MUSIC = "MUSIC",
+  SOUND = "SOUND"
+}
+
 export enum ComputeProvider {
   NONE = "NONE",
   CUSTOM = "CUSTOM",