preparing settings for more vendors

src/components/core/providers/ComputeProviderLogo.tsx

@@ -0,0 +1,31 @@
+import Image from "next/image"
+import { cn } from "@aitube/timeline"
+
+import { ComputeProvider } from "@/types"
+import { formatProvider } from "@/components/toolbars/top-menu/lists/formatProvider"
+
+import { computeProvidersLogos } from "./logos"
+
+export function ComputeProviderLogo({
+  provider = ComputeProvider.NONE,
+  height = 28,
+  className = "",
+}: {
+  provider?: ComputeProvider
+  height?: number | string
+  className?: string
+}) {
+
+  const staticImageData = computeProvidersLogos[
+    provider || ComputeProvider.NONE
+  ] || computeProvidersLogos.NONE
+
+  return (
+    <Image
+      src={staticImageData}
+      height={height as any}
+      alt={formatProvider(provider)}
+      className={cn(className)}
+    />
+  )
+}

src/components/core/providers/ComputeProviderName.tsx

@@ -0,0 +1,25 @@
+import { cn } from "@aitube/timeline"
+
+import { ComputeProvider } from "@/types"
+import { formatProvider } from "@/components/toolbars/top-menu/lists/formatProvider"
+
+import { ComputeProviderLogo } from "./ComputeProviderLogo"
+
+export function ComputeProviderName({
+  className = "",
+  children = ComputeProvider.NONE,
+}: {
+  className?: string
+  children?: ComputeProvider
+}) {
+  return (
+    <div className={cn(`flex flex-row space-x-2 items-center`, className)}>
+      <ComputeProviderLogo
+        provider={children}
+        height={18}
+        className={cn(`rounded-full`)}
+      />
+      <div>{formatProvider(children)}</div>
+    </div>
+  )
+}

src/components/core/providers/logos/index.ts

@@ -0,0 +1,59 @@
+import { StaticImageData } from "next/image"
+
+import { ComputeProvider } from "@/types"
+
+import none from "./none.png"
+import anthropic from "./anthropic.png"
+import cohere from "./cohere.png"
+import elevenlabs from "./elevenlabs.png"
+import everartai from "./everartai.png"
+import falai from "./falai.png"
+import fireworks from "./fireworks.png"
+import google from "./google.png"
+import groq from "./groq.png"
+import hedra from "./hedra.png"
+import huggingface from "./huggingface.png"
+import kitsai from "./kitsai.png"
+import kuaishou from "./kuaishou.png"
+import leonardoai from "./leonardoai.png"
+import lumalabs from "./lumalabs.png"
+import midjourney from "./midjourney.png"
+import mistralai from "./mistralai.png"
+import modelslab from "./modelslab.jpeg"
+import openai from "./openai.png"
+import replicate from "./replicate.jpeg"
+import runwayml from "./runwayml.png"
+import stabilityai from "./stabilityai.png"
+import suno from "./suno.png"
+import udio from "./udio.png"
+
+export const computeProvidersLogos: Record<ComputeProvider, StaticImageData> = {
+  [ComputeProvider.NONE]: none,
+  [ComputeProvider.ANTHROPIC]: anthropic,
+  [ComputeProvider.COHERE]: cohere,
+  [ComputeProvider.ELEVENLABS]: elevenlabs,
+  [ComputeProvider.FALAI]: falai,
+  [ComputeProvider.FIREWORKSAI]: fireworks,
+  [ComputeProvider.GOOGLE]: google,
+  [ComputeProvider.GROQ]: groq,
+  [ComputeProvider.HEDRA]: hedra,
+  [ComputeProvider.HUGGINGFACE]: huggingface,
+  [ComputeProvider.KITSAI]: kitsai,
+  [ComputeProvider.LUMALABS]: lumalabs,
+  [ComputeProvider.MIDJOURNEY]: midjourney,
+  [ComputeProvider.MISTRALAI]: mistralai,
+  [ComputeProvider.MODELSLAB]: modelslab,
+  [ComputeProvider.OPENAI]: openai,
+  [ComputeProvider.REPLICATE]: replicate,
+  [ComputeProvider.RUNWAYML]: runwayml,
+  [ComputeProvider.STABILITYAI]: stabilityai,
+  [ComputeProvider.SUNO]: suno,
+  [ComputeProvider.UDIO]: udio,
+  [ComputeProvider.CUSTOM]: none,
+  [ComputeProvider.COMFY_HUGGINGFACE]: huggingface,
+  [ComputeProvider.COMFY_REPLICATE]: replicate,
+  [ComputeProvider.COMFY_COMFYICU]: none,
+  [ComputeProvider.KUAISHOU]: kuaishou,
+  [ComputeProvider.LEONARDOAI]: leonardoai,
+  [ComputeProvider.EVERARTAI]: everartai,
+}

src/components/settings/constants.ts

@@ -220,7 +220,6 @@ export const availableModelsForImageGeneration: Partial<Record<ComputeProvider,
   ],
 }
 
-// should we call this upscaling or post-processing?
 export const availableModelsForImageUpscaling: Partial<Record<ComputeProvider, string[]>> = {
   [ComputeProvider.FALAI]: [
     "fal-ai/ccsr",
@@ -231,6 +230,37 @@ export const availableModelsForImageUpscaling: Partial<Record<ComputeProvider, s
   ],
 }
 
+export const availableModelsForImageDepth: Partial<Record<ComputeProvider, string[]>> = {
+  [ComputeProvider.FALAI]: [
+    "fal-ai/imageutils/marigold-depth",
+    "fal-ai/imageutils/depth",
+  ],
+  [ComputeProvider.HUGGINGFACE]: [
+    "depth-anything/Depth-Anything-V2-Large",
+    "depth-anything/Depth-Anything-V2-Base",
+    "depth-anything/Depth-Anything-V2-Small",
+  ],
+  [ComputeProvider.REPLICATE]: [
+    "cjwbw/depth-anything",
+    "adirik/marigold"
+  ],
+}
+
+export const availableModelsForImageSegmentation: Partial<Record<ComputeProvider, string[]>> = {
+  [ComputeProvider.FALAI]: [
+    "fal-ai/imageutils/sam",
+    "fal-ai/tiny-sam"
+  ],
+  [ComputeProvider.HUGGINGFACE]: [
+    "ybelkada/segment-anything"
+  ],
+  [ComputeProvider.REPLICATE]: [
+    "yyjim/segment-anything-everything",
+    "cjwbw/semantic-segment-anything",
+    "pablodawson/segment-anything-automatic"
+  ],
+}
+
 export const availableModelsForVideoGeneration: Partial<Record<ComputeProvider, string[]>> = {
   [ComputeProvider.FALAI]: [
     "fal-ai/stable-video",
@@ -272,7 +302,22 @@ export const availableModelsForVideoGeneration: Partial<Record<ComputeProvider,
 }
 
 export const availableModelsForVideoUpscaling: Partial<Record<ComputeProvider, string[]>> = {
-  [ComputeProvider.FALAI]: [
+  [ComputeProvider.REPLICATE]: [
+    "lucataco/real-esrgan-video",
+    "pbarker/gfpgan-video"
+  ]
+}
+
+export const availableModelsForVideoDepth: Partial<Record<ComputeProvider, string[]>> = {
+  [ComputeProvider.REPLICATE]: [
+    "lucataco/depth-anything-video"
+  ]
+}
+
+
+export const availableModelsForVideoSegmentation: Partial<Record<ComputeProvider, string[]>> = {
+  [ComputeProvider.REPLICATE]: [
+    "cjwbw/cutie"
   ]
 }
 

src/components/settings/video.tsx

@@ -9,9 +9,6 @@ import { availableComputeProvidersForVideos, computeProviderShortNames } from ".
 export function SettingsSectionVideo() {
   const defaultSettings = getDefaultSettingsState()
 
-  const videoProvider = useSettings(s => s.videoProvider)
-  const setVideoProvider = useSettings(s => s.setVideoProvider)
-
   const huggingFaceModelForVideo = useSettings(s => s.huggingFaceModelForVideo)
   const setHuggingFaceModelForVideo = useSettings(s => s.setHuggingFaceModelForVideo)
 
@@ -34,6 +31,26 @@ export function SettingsSectionVideo() {
   const videoNegativePrompt = useSettings(s => s.videoNegativePrompt)
   const setVideoNegativePrompt = useSettings(s => s.setVideoNegativePrompt)
 
+  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 videoUpscalingProvider = useSettings(s => s.videoUpscalingProvider)
+  const setVideoUpscalingProvider = useSettings(s => s.setVideoUpscalingProvider)
+  const videoUpscalingModel = useSettings(s => s.videoUpscalingModel)
+  const setVideoUpscalingModel = useSettings(s => s.setVideoUpscalingModel)
+
+  const videoDepthProvider = useSettings(s => s.videoDepthProvider)
+  const setVideoDepthProvider = useSettings(s => s.setVideoDepthProvider)
+  const videoDepthModel = useSettings(s => s.videoDepthModel)
+  const setVideoDepthModel = useSettings(s => s.setVideoDepthModel)
+
+  const videoSegmentationProvider = useSettings(s => s.videoSegmentationProvider)
+  const setVideoSegmentationProvider = useSettings(s => s.setVideoSegmentationProvider)
+  const videoSegmentationModel = useSettings(s => s.videoSegmentationModel)
+  const setVideoSegmentationModel = useSettings(s => s.setVideoSegmentationModel)
+
   const videoRenderingStrategy = useSettings(s => s.videoRenderingStrategy)
   const setVideoRenderingStrategy = useSettings(s => s.setVideoRenderingStrategy)
   

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

@@ -11,21 +11,13 @@ import {
   MenubarSubTrigger,
   MenubarTrigger
 } from "@/components/ui/menubar"
-import { useSettings } from "@/controllers/settings"
 import { useUI } from "@/controllers/ui"
-
-import { ProviderList } from "../lists/ProviderList"
-import { availableComputeProvidersForAssistant } from "@/components/settings/constants"
-import { ComputeProvider, SettingsCategory } from "@/types"
+import { SettingsCategory } from "@/types"
 import { AssistantModelList } from "../lists/AssistantModelList"
 import { useInitAssistant } from "@/controllers/assistant/useAssistant"
 
 export function TopMenuAssistant() {
   const setShowSettings = useUI(s => s.setShowSettings)
-  const assistantProvider = useSettings(s => s.assistantProvider)
-  const setAssistantProvider = useSettings(s => s.setAssistantProvider)
-  const assistantModel = useSettings(s => s.assistantModel)
-  const setAssistantModel = useSettings(s => s.setAssistantModel)
 
   // this should only be called on and at only one place in the project!
   useInitAssistant()
@@ -37,12 +29,7 @@ export function TopMenuAssistant() {
         <MenubarSub>
           <MenubarItem onClick={() => { setShowSettings(SettingsCategory.ASSISTANT) }}>Show advanced settings</MenubarItem>
           <MenubarSeparator />
-          <AssistantModelList provider={assistantProvider} current={assistantModel} setter={setAssistantModel} />
-          <ProviderList providers={availableComputeProvidersForAssistant} current={assistantProvider} setter={(newProvider: ComputeProvider) => {
-            if (assistantProvider === newProvider) { return }
-            setAssistantProvider(newProvider)
-            setAssistantModel(undefined)
-          }} />
+          <AssistantModelList />
           <MenubarSeparator />
           <MenubarItem
              disabled

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

@@ -14,26 +14,20 @@ import {
 import { useSettings } from "@/controllers/settings"
 import { useUI } from "@/controllers/ui"
 
-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 { IsBusy } from "../IsBusy"
 
-import { ComputeProvider, SettingsCategory } from "@/types"
-import { useRenderer } from "@/controllers/renderer"
+import { SettingsCategory } from "@/types"
 import { useResolver } from "@/controllers/resolver/useResolver"
+import { ImageDepthModelList } from "../lists/ImageDepthModelList"
+import { ImageSegmentationModelList } from "../lists/ImageSegmentationModelList"
 
 export function TopMenuImage() {
   const nbPendingRequestsForImage = useResolver(s => s.nbPendingRequestsForImage)
   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 (
@@ -43,14 +37,10 @@ export function TopMenuImage() {
         <MenubarSub>
           <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={(newProvider: ComputeProvider) => {
-            if (imageProvider === newProvider) { return }
-            setImageProvider(newProvider)
-            setImageGenerationModel(undefined)
-            setImageUpscalingModel(undefined)
-          }} />
+          <ImageGenerationModelList />
+          <ImageUpscalingModelList/>
+          <ImageDepthModelList />
+          <ImageSegmentationModelList />
           <RenderingStrategyList current={imageRenderingStrategy} setter={setImageRenderingStrategy} />
           <MenubarSeparator />
           <MenubarItem

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

@@ -2,10 +2,6 @@
 
 import {
   MenubarCheckboxItem,
-  MenubarContent,
-  MenubarItem,
-  MenubarMenu,
-  MenubarSeparator,
   MenubarSub,
   MenubarSubContent,
   MenubarSubTrigger,
@@ -15,46 +11,66 @@ import { TagColor } from "@/components/tags/types"
 import { Tag } from "@/components/tags/Tag"
 import { ComputeProvider } from "@/types"
 import { availableModelsForAssistant } from "@/components/settings/constants"
+import { useSettings } from "@/controllers/settings"
+import { ComputeProviderName } from "@/components/core/providers/ComputeProviderName"
+import { ComputeProviderLogo } from "@/components/core/providers/ComputeProviderLogo"
+import { cn } from "@/lib/utils"
+
 import { hasNoPublicAPI } from "./hasNoPublicAPI"
+import { formatProvider } from "./formatProvider"
+
+export function AssistantModelList() {
+
+  const provider = useSettings(s => s.soundProvider)
+  const setProvider = useSettings(s => s.setSoundProvider)
+  const model = useSettings(s => s.assistantModel)
+  const setModel = useSettings(s => s.setAssistantModel)
 
-export function AssistantModelList({
-  provider,
-  current,
-  setter,
-}: {
-  provider?: ComputeProvider
-  current?: string
-  setter: (model: string) => void
-}) {
-  const models: string[] = provider ? (availableModelsForAssistant[provider] || []) : []
+  const availableProviders = Object.keys(availableModelsForAssistant) as ComputeProvider[]
+  if (!availableProviders) { return null }
 
-  if (models.length === 0) { return null }
-  
   return (
     <MenubarSub>
       <MenubarSubTrigger>
         <Tag size="lg" color={TagColor.FUCHSIA}>ai&nbsp;assistant</Tag>
-        {current || "None"}
+        <div className={cn(`flex flex-row space-x-2 items-center`)}>
+          <ComputeProviderLogo
+            provider={(provider && model) ? provider : undefined}
+            height={18}
+            className={cn(`rounded-full`)}
+          />
+          <div>{model || "None"}</div>
+        </div>
       </MenubarSubTrigger>
       <MenubarSubContent>
-        {models.map(model => (
-          <MenubarCheckboxItem
-             key={model}
-            checked={current === model}
-            disabled={hasNoPublicAPI(model)}
-            onClick={(e) => {
-              if (hasNoPublicAPI(model)) {
-                e.stopPropagation()
-                e.preventDefault()
-                return false
-              }
-              setter(model)
-              e.stopPropagation()
-              e.preventDefault()
-              return false
-            }}>
-            {model}
-          </MenubarCheckboxItem>
+        {availableProviders.map(p => (
+        <MenubarSub key={p}>
+          <MenubarSubTrigger>
+            <ComputeProviderName>{p}</ComputeProviderName>
+          </MenubarSubTrigger>
+          <MenubarSubContent>
+            {(availableModelsForAssistant[p] || []).map(m => (
+              <MenubarCheckboxItem
+                key={m}
+                checked={provider === p && model === m}
+                disabled={hasNoPublicAPI(m)}
+                onClick={(e) => {
+                  if (hasNoPublicAPI(m)) {
+                    e.stopPropagation()
+                    e.preventDefault()
+                    return false
+                  }
+                  setProvider(p)
+                  setModel(m)
+                  e.stopPropagation()
+                  e.preventDefault()
+                  return false
+                }}>
+                {m}
+              </MenubarCheckboxItem>
+            ))}
+          </MenubarSubContent>
+        </MenubarSub>
         ))}
       </MenubarSubContent>
     </MenubarSub>

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

@@ -0,0 +1,78 @@
+"use client"
+
+import {
+  MenubarCheckboxItem,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+} from "@/components/ui/menubar"
+
+import { TagColor } from "@/components/tags/types"
+import { Tag } from "@/components/tags/Tag"
+import { ComputeProvider } from "@/types"
+import { availableModelsForImageDepth } from "@/components/settings/constants"
+import { useSettings } from "@/controllers/settings"
+import { ComputeProviderName } from "@/components/core/providers/ComputeProviderName"
+import { ComputeProviderLogo } from "@/components/core/providers/ComputeProviderLogo"
+import { cn } from "@/lib/utils"
+
+import { hasNoPublicAPI } from "./hasNoPublicAPI"
+import { formatProvider } from "./formatProvider"
+
+export function ImageDepthModelList() {
+
+  const provider = useSettings(s => s.imageDepthProvider)
+  const setProvider = useSettings(s => s.setImageDepthProvider)
+  const model = useSettings(s => s.imageDepthModel)
+  const setModel = useSettings(s => s.setImageDepthModel)
+
+  const availableProviders = Object.keys(availableModelsForImageDepth) as ComputeProvider[]
+  if (!availableProviders) { return null }
+
+  return (
+    <MenubarSub>
+      <MenubarSubTrigger>
+        <Tag size="lg" color={TagColor.SLATE}>depth&nbsp;mapper</Tag>
+        <div className={cn(`flex flex-row space-x-2 items-center`)}>
+          <ComputeProviderLogo
+            provider={(provider && model) ? provider : undefined}
+            height={18}
+            className={cn(`rounded-full`)}
+          />
+          <div>{model || "None"}</div>
+        </div>
+      </MenubarSubTrigger>
+      <MenubarSubContent>
+        {availableProviders.map(p => (
+        <MenubarSub key={p}>
+          <MenubarSubTrigger>
+            <ComputeProviderName>{p}</ComputeProviderName>
+          </MenubarSubTrigger>
+          <MenubarSubContent>
+            {(availableModelsForImageDepth[p] || []).map(m => (
+              <MenubarCheckboxItem
+                key={m}
+                checked={provider === p && model === m}
+                disabled={hasNoPublicAPI(m)}
+                onClick={(e) => {
+                  if (hasNoPublicAPI(m)) {
+                    e.stopPropagation()
+                    e.preventDefault()
+                    return false
+                  }
+                  setProvider(p)
+                  setModel(m)
+                  e.stopPropagation()
+                  e.preventDefault()
+                  return false
+                }}>
+                {m}
+              </MenubarCheckboxItem>
+            ))}
+          </MenubarSubContent>
+        </MenubarSub>
+        ))}
+      </MenubarSubContent>
+    </MenubarSub>
+  )
+}

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

@@ -2,10 +2,6 @@
 
 import {
   MenubarCheckboxItem,
-  MenubarContent,
-  MenubarItem,
-  MenubarMenu,
-  MenubarSeparator,
   MenubarSub,
   MenubarSubContent,
   MenubarSubTrigger,
@@ -15,46 +11,66 @@ import { TagColor } from "@/components/tags/types"
 import { Tag } from "@/components/tags/Tag"
 import { ComputeProvider } from "@/types"
 import { availableModelsForImageGeneration } from "@/components/settings/constants"
+import { useSettings } from "@/controllers/settings"
+import { ComputeProviderName } from "@/components/core/providers/ComputeProviderName"
+import { ComputeProviderLogo } from "@/components/core/providers/ComputeProviderLogo"
+import { cn } from "@/lib/utils"
+
 import { hasNoPublicAPI } from "./hasNoPublicAPI"
+import { formatProvider } from "./formatProvider"
+
+export function ImageGenerationModelList() {
+
+  const provider = useSettings(s => s.imageProvider)
+  const setProvider = useSettings(s => s.setImageProvider)
+  const model = useSettings(s => s.imageGenerationModel)
+  const setModel = useSettings(s => s.setImageGenerationModel)
 
-export function ImageGenerationModelList({
-  provider,
-  current,
-  setter,
-}: {
-  provider?: ComputeProvider
-  current?: string
-  setter: (model: string) => void
-}) {
-  const models: string[] = provider ? (availableModelsForImageGeneration[provider] || []) : []
+  const availableProviders = Object.keys(availableModelsForImageGeneration) as ComputeProvider[]
+  if (!availableProviders) { return null }
 
-  if (models.length === 0) { return null }
-  
   return (
     <MenubarSub>
       <MenubarSubTrigger>
-        <Tag size="lg" color={TagColor.BLUE}>generate&nbsp;image</Tag>
-        {current || "None"}
+        <Tag size="lg" color={TagColor.SKY}>generate&nbsp;image</Tag>
+        <div className={cn(`flex flex-row space-x-2 items-center`)}>
+          <ComputeProviderLogo
+            provider={(provider && model) ? provider : undefined}
+            height={18}
+            className={cn(`rounded-full`)}
+          />
+          <div>{model || "None"}</div>
+        </div>
       </MenubarSubTrigger>
       <MenubarSubContent>
-        {models.map(model => (
-          <MenubarCheckboxItem
-             key={model}
-            checked={current === model}
-            disabled={hasNoPublicAPI(model)}
-            onClick={(e) => {
-              if (hasNoPublicAPI(model)) {
-                e.stopPropagation()
-                e.preventDefault()
-                return false
-              }
-              setter(model)
-              e.stopPropagation()
-              e.preventDefault()
-              return false
-            }}>
-            {model}
-          </MenubarCheckboxItem>
+        {availableProviders.map(p => (
+        <MenubarSub key={p}>
+          <MenubarSubTrigger>
+            <ComputeProviderName>{p}</ComputeProviderName>
+          </MenubarSubTrigger>
+          <MenubarSubContent>
+            {(availableModelsForImageGeneration[p] || []).map(m => (
+              <MenubarCheckboxItem
+                key={m}
+                checked={provider === p && model === m}
+                disabled={hasNoPublicAPI(m)}
+                onClick={(e) => {
+                  if (hasNoPublicAPI(m)) {
+                    e.stopPropagation()
+                    e.preventDefault()
+                    return false
+                  }
+                  setProvider(p)
+                  setModel(m)
+                  e.stopPropagation()
+                  e.preventDefault()
+                  return false
+                }}>
+                {m}
+              </MenubarCheckboxItem>
+            ))}
+          </MenubarSubContent>
+        </MenubarSub>
         ))}
       </MenubarSubContent>
     </MenubarSub>

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

@@ -0,0 +1,77 @@
+"use client"
+
+import {
+  MenubarCheckboxItem,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+} from "@/components/ui/menubar"
+
+import { TagColor } from "@/components/tags/types"
+import { Tag } from "@/components/tags/Tag"
+import { ComputeProvider } from "@/types"
+import { availableModelsForImageSegmentation } from "@/components/settings/constants"
+import { useSettings } from "@/controllers/settings"
+import { ComputeProviderName } from "@/components/core/providers/ComputeProviderName"
+import { ComputeProviderLogo } from "@/components/core/providers/ComputeProviderLogo"
+import { cn } from "@/lib/utils"
+
+import { hasNoPublicAPI } from "./hasNoPublicAPI"
+
+export function ImageSegmentationModelList() {
+
+  const provider = useSettings(s => s.imageSegmentationProvider)
+  const setProvider = useSettings(s => s.setImageSegmentationProvider)
+  const model = useSettings(s => s.imageSegmentationModel)
+  const setModel = useSettings(s => s.setImageSegmentationModel)
+
+  const availableProviders = Object.keys(availableModelsForImageSegmentation) as ComputeProvider[]
+  if (!availableProviders) { return null }
+
+  return (
+    <MenubarSub>
+      <MenubarSubTrigger>
+        <Tag size="lg" color={TagColor.ZINC}>segmentation</Tag>
+        <div className={cn(`flex flex-row space-x-2 items-center`)}>
+          <ComputeProviderLogo
+            provider={(provider && model) ? provider : undefined}
+            height={18}
+            className={cn(`rounded-full`)}
+          />
+          <div>{model || "None"}</div>
+        </div>
+      </MenubarSubTrigger>
+      <MenubarSubContent>
+        {availableProviders.map(p => (
+        <MenubarSub key={p}>
+          <MenubarSubTrigger>
+            <ComputeProviderName>{p}</ComputeProviderName>
+          </MenubarSubTrigger>
+          <MenubarSubContent>
+            {(availableModelsForImageSegmentation[p] || []).map(m => (
+              <MenubarCheckboxItem
+                key={m}
+                checked={provider === p && model === m}
+                disabled={hasNoPublicAPI(m)}
+                onClick={(e) => {
+                  if (hasNoPublicAPI(m)) {
+                    e.stopPropagation()
+                    e.preventDefault()
+                    return false
+                  }
+                  setProvider(p)
+                  setModel(m)
+                  e.stopPropagation()
+                  e.preventDefault()
+                  return false
+                }}>
+                {m}
+              </MenubarCheckboxItem>
+            ))}
+          </MenubarSubContent>
+        </MenubarSub>
+        ))}
+      </MenubarSubContent>
+    </MenubarSub>
+  )
+}

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

@@ -2,10 +2,6 @@
 
 import {
   MenubarCheckboxItem,
-  MenubarContent,
-  MenubarItem,
-  MenubarMenu,
-  MenubarSeparator,
   MenubarSub,
   MenubarSubContent,
   MenubarSubTrigger,
@@ -15,46 +11,66 @@ import { TagColor } from "@/components/tags/types"
 import { Tag } from "@/components/tags/Tag"
 import { ComputeProvider } from "@/types"
 import { availableModelsForImageUpscaling } from "@/components/settings/constants"
+import { useSettings } from "@/controllers/settings"
+import { ComputeProviderName } from "@/components/core/providers/ComputeProviderName"
+import { ComputeProviderLogo } from "@/components/core/providers/ComputeProviderLogo"
+import { cn } from "@/lib/utils"
+
 import { hasNoPublicAPI } from "./hasNoPublicAPI"
+import { formatProvider } from "./formatProvider"
+
+export function ImageUpscalingModelList() {
+
+  const provider = useSettings(s => s.imageUpscalingProvider)
+  const setProvider = useSettings(s => s.setImageUpscalingProvider)
+  const model = useSettings(s => s.imageUpscalingModel)
+  const setModel = useSettings(s => s.setImageUpscalingModel)
 
-export function ImageUpscalingModelList({
-  provider,
-  current,
-  setter,
-}: {
-  provider?: ComputeProvider
-  current?: string
-  setter: (model: string) => void
-}) {
-  const models: string[] = provider ? (availableModelsForImageUpscaling[provider] || []) : []
+  const availableProviders = Object.keys(availableModelsForImageUpscaling) as ComputeProvider[]
+  if (!availableProviders) { return null }
 
-  if (models.length === 0) { return null }
-  
   return (
     <MenubarSub>
       <MenubarSubTrigger>
-        <Tag size="lg" color={TagColor.INDIGO}>upscale&nbsp;image</Tag>
-        {current || "None"}
+        <Tag size="lg" color={TagColor.BLUE}>upscale&nbsp;image</Tag>
+        <div className={cn(`flex flex-row space-x-2 items-center`)}>
+          <ComputeProviderLogo
+            provider={(provider && model) ? provider : undefined}
+            height={18}
+            className={cn(`rounded-full`)}
+          />
+          <div>{model || "None"}</div>
+        </div>
       </MenubarSubTrigger>
       <MenubarSubContent>
-        {models.map(model => (
-          <MenubarCheckboxItem
-             key={model}
-            checked={current === model}
-            disabled={hasNoPublicAPI(model)}
-            onClick={(e) => {
-              if (hasNoPublicAPI(model)) {
-                e.stopPropagation()
-                e.preventDefault()
-                return false
-              }
-              setter(model)
-              e.stopPropagation()
-              e.preventDefault()
-              return false
-            }}>
-            {model}
-          </MenubarCheckboxItem>
+        {availableProviders.map(p => (
+        <MenubarSub key={p}>
+          <MenubarSubTrigger>
+            <ComputeProviderName>{p}</ComputeProviderName>
+          </MenubarSubTrigger>
+          <MenubarSubContent>
+            {(availableModelsForImageUpscaling[p] || []).map(m => (
+              <MenubarCheckboxItem
+                key={m}
+                checked={provider === p && model === m}
+                disabled={hasNoPublicAPI(m)}
+                onClick={(e) => {
+                  if (hasNoPublicAPI(m)) {
+                    e.stopPropagation()
+                    e.preventDefault()
+                    return false
+                  }
+                  setProvider(p)
+                  setModel(m)
+                  e.stopPropagation()
+                  e.preventDefault()
+                  return false
+                }}>
+                {m}
+              </MenubarCheckboxItem>
+            ))}
+          </MenubarSubContent>
+        </MenubarSub>
         ))}
       </MenubarSubContent>
     </MenubarSub>

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

@@ -2,10 +2,6 @@
 
 import {
   MenubarCheckboxItem,
-  MenubarContent,
-  MenubarItem,
-  MenubarMenu,
-  MenubarSeparator,
   MenubarSub,
   MenubarSubContent,
   MenubarSubTrigger,
@@ -15,46 +11,66 @@ import { TagColor } from "@/components/tags/types"
 import { Tag } from "@/components/tags/Tag"
 import { ComputeProvider } from "@/types"
 import { availableModelsForMusicGeneration } from "@/components/settings/constants"
+import { useSettings } from "@/controllers/settings"
+import { ComputeProviderName } from "@/components/core/providers/ComputeProviderName"
+import { ComputeProviderLogo } from "@/components/core/providers/ComputeProviderLogo"
+import { cn } from "@/lib/utils"
+
 import { hasNoPublicAPI } from "./hasNoPublicAPI"
+import { formatProvider } from "./formatProvider"
+
+export function MusicGenerationModelList() {
+
+  const provider = useSettings(s => s.musicProvider)
+  const setProvider = useSettings(s => s.setMusicProvider)
+  const model = useSettings(s => s.musicGenerationModel)
+  const setModel = useSettings(s => s.setMusicGenerationModel)
 
-export function MusicGenerationModelList({
-  provider,
-  current,
-  setter,
-}: {
-  provider?: ComputeProvider
-  current?: string
-  setter: (model: string) => void
-}) {
-  const models: string[] = provider ? (availableModelsForMusicGeneration[provider] || []) : []
+  const availableProviders = Object.keys(availableModelsForMusicGeneration) as ComputeProvider[]
+  if (!availableProviders) { return null }
 
-  if (models.length === 0) { return null }
-  
   return (
     <MenubarSub>
       <MenubarSubTrigger>
         <Tag size="lg" color={TagColor.LIME}>generate&nbsp;music</Tag>
-        {current || "None"}
+        <div className={cn(`flex flex-row space-x-2 items-center`)}>
+          <ComputeProviderLogo
+            provider={(provider && model) ? provider : undefined}
+            height={18}
+            className={cn(`rounded-full`)}
+          />
+          <div>{model || "None"}</div>
+        </div>
       </MenubarSubTrigger>
       <MenubarSubContent>
-        {models.map(model => (
-          <MenubarCheckboxItem
-             key={model}
-            checked={current === model}
-            disabled={hasNoPublicAPI(model)}
-            onClick={(e) => {
-              if (hasNoPublicAPI(model)) {
-                e.stopPropagation()
-                e.preventDefault()
-                return false
-              }
-              setter(model)
-              e.stopPropagation()
-              e.preventDefault()
-              return false
-            }}>
-            {model}
-          </MenubarCheckboxItem>
+        {availableProviders.map(p => (
+        <MenubarSub key={p}>
+          <MenubarSubTrigger>
+            <ComputeProviderName>{p}</ComputeProviderName>
+          </MenubarSubTrigger>
+          <MenubarSubContent>
+            {(availableModelsForMusicGeneration[p] || []).map(m => (
+              <MenubarCheckboxItem
+                key={m}
+                checked={provider === p && model === m}
+                disabled={hasNoPublicAPI(m)}
+                onClick={(e) => {
+                  if (hasNoPublicAPI(m)) {
+                    e.stopPropagation()
+                    e.preventDefault()
+                    return false
+                  }
+                  setProvider(p)
+                  setModel(m)
+                  e.stopPropagation()
+                  e.preventDefault()
+                  return false
+                }}>
+                {m}
+              </MenubarCheckboxItem>
+            ))}
+          </MenubarSubContent>
+        </MenubarSub>
         ))}
       </MenubarSubContent>
     </MenubarSub>

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

@@ -31,7 +31,7 @@ export function RenderingStrategyList({
     <MenubarSub>
       <MenubarSubTrigger>
         {/* todo display either autorender or manual render */}
-        <Tag size="lg" color={TagColor.NEUTRAL}>auto render</Tag>
+        <Tag size="lg" color={TagColor.NEUTRAL}>auto&nbsp;rendering</Tag>
         {(strategyLabels as any)[current || ""] || "None"}
       </MenubarSubTrigger>
       <MenubarSubContent>

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

@@ -2,10 +2,6 @@
 
 import {
   MenubarCheckboxItem,
-  MenubarContent,
-  MenubarItem,
-  MenubarMenu,
-  MenubarSeparator,
   MenubarSub,
   MenubarSubContent,
   MenubarSubTrigger,
@@ -15,46 +11,66 @@ import { TagColor } from "@/components/tags/types"
 import { Tag } from "@/components/tags/Tag"
 import { ComputeProvider } from "@/types"
 import { availableModelsForSoundGeneration } from "@/components/settings/constants"
+import { useSettings } from "@/controllers/settings"
+import { ComputeProviderName } from "@/components/core/providers/ComputeProviderName"
+import { ComputeProviderLogo } from "@/components/core/providers/ComputeProviderLogo"
+import { cn } from "@/lib/utils"
+
 import { hasNoPublicAPI } from "./hasNoPublicAPI"
+import { formatProvider } from "./formatProvider"
+
+export function SoundGenerationModelList() {
+
+  const provider = useSettings(s => s.soundProvider)
+  const setProvider = useSettings(s => s.setSoundProvider)
+  const model = useSettings(s => s.soundGenerationModel)
+  const setModel = useSettings(s => s.setSoundGenerationModel)
 
-export function SoundGenerationModelList({
-  provider,
-  current,
-  setter,
-}: {
-  provider?: ComputeProvider
-  current?: string
-  setter: (model: string) => void
-}) {
-  const models: string[] = provider ? (availableModelsForSoundGeneration[provider] || []) : []
+  const availableProviders = Object.keys(availableModelsForSoundGeneration) as ComputeProvider[]
+  if (!availableProviders) { return null }
 
-  if (models.length === 0) { return null }
-  
   return (
     <MenubarSub>
       <MenubarSubTrigger>
         <Tag size="lg" color={TagColor.YELLOW}>generate&nbsp;sound</Tag>
-        {current || "None"}
+        <div className={cn(`flex flex-row space-x-2 items-center`)}>
+          <ComputeProviderLogo
+            provider={(provider && model) ? provider : undefined}
+            height={18}
+            className={cn(`rounded-full`)}
+          />
+          <div>{model || "None"}</div>
+        </div>
       </MenubarSubTrigger>
       <MenubarSubContent>
-        {models.map(model => (
-          <MenubarCheckboxItem
-             key={model}
-            checked={current === model}
-            disabled={hasNoPublicAPI(model)}
-            onClick={(e) => {
-              if (hasNoPublicAPI(model)) {
-                e.stopPropagation()
-                e.preventDefault()
-                return false
-              }
-              setter(model)
-              e.stopPropagation()
-              e.preventDefault()
-              return false
-            }}>
-            {model}
-          </MenubarCheckboxItem>
+        {availableProviders.map(p => (
+        <MenubarSub key={p}>
+          <MenubarSubTrigger>
+            <ComputeProviderName>{p}</ComputeProviderName>
+          </MenubarSubTrigger>
+          <MenubarSubContent>
+            {(availableModelsForSoundGeneration[p] || []).map(m => (
+              <MenubarCheckboxItem
+                key={m}
+                checked={provider === p && model === m}
+                disabled={hasNoPublicAPI(m)}
+                onClick={(e) => {
+                  if (hasNoPublicAPI(m)) {
+                    e.stopPropagation()
+                    e.preventDefault()
+                    return false
+                  }
+                  setProvider(p)
+                  setModel(m)
+                  e.stopPropagation()
+                  e.preventDefault()
+                  return false
+                }}>
+                {m}
+              </MenubarCheckboxItem>
+            ))}
+          </MenubarSubContent>
+        </MenubarSub>
         ))}
       </MenubarSubContent>
     </MenubarSub>

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

@@ -0,0 +1,78 @@
+"use client"
+
+import {
+  MenubarCheckboxItem,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+} from "@/components/ui/menubar"
+
+import { TagColor } from "@/components/tags/types"
+import { Tag } from "@/components/tags/Tag"
+import { ComputeProvider } from "@/types"
+import { availableModelsForVideoDepth } from "@/components/settings/constants"
+import { useSettings } from "@/controllers/settings"
+import { ComputeProviderName } from "@/components/core/providers/ComputeProviderName"
+import { ComputeProviderLogo } from "@/components/core/providers/ComputeProviderLogo"
+import { cn } from "@/lib/utils"
+
+import { hasNoPublicAPI } from "./hasNoPublicAPI"
+import { formatProvider } from "./formatProvider"
+
+export function VideoDepthModelList() {
+
+  const provider = useSettings(s => s.videoDepthProvider)
+  const setProvider = useSettings(s => s.setVideoDepthProvider)
+  const model = useSettings(s => s.videoDepthModel)
+  const setModel = useSettings(s => s.setVideoDepthModel)
+
+  const availableProviders = Object.keys(availableModelsForVideoDepth) as ComputeProvider[]
+  if (!availableProviders) { return null }
+
+  return (
+    <MenubarSub>
+      <MenubarSubTrigger>
+      <Tag size="lg" color={TagColor.SLATE}>depth&nbsp;mapper</Tag>
+        <div className={cn(`flex flex-row space-x-2 items-center`)}>
+          <ComputeProviderLogo
+            provider={(provider && model) ? provider : undefined}
+            height={18}
+            className={cn(`rounded-full`)}
+          />
+          <div>{model || "None"}</div>
+        </div>
+      </MenubarSubTrigger>
+      <MenubarSubContent>
+        {availableProviders.map(p => (
+        <MenubarSub key={p}>
+          <MenubarSubTrigger>
+            <ComputeProviderName>{p}</ComputeProviderName>
+          </MenubarSubTrigger>
+          <MenubarSubContent>
+            {(availableModelsForVideoDepth[p] || []).map(m => (
+              <MenubarCheckboxItem
+                key={m}
+                checked={provider === p && model === m}
+                disabled={hasNoPublicAPI(m)}
+                onClick={(e) => {
+                  if (hasNoPublicAPI(m)) {
+                    e.stopPropagation()
+                    e.preventDefault()
+                    return false
+                  }
+                  setProvider(p)
+                  setModel(m)
+                  e.stopPropagation()
+                  e.preventDefault()
+                  return false
+                }}>
+                {m}
+              </MenubarCheckboxItem>
+            ))}
+          </MenubarSubContent>
+        </MenubarSub>
+        ))}
+      </MenubarSubContent>
+    </MenubarSub>
+  )
+}

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

@@ -2,10 +2,6 @@
 
 import {
   MenubarCheckboxItem,
-  MenubarContent,
-  MenubarItem,
-  MenubarMenu,
-  MenubarSeparator,
   MenubarSub,
   MenubarSubContent,
   MenubarSubTrigger,
@@ -15,50 +11,66 @@ import { TagColor } from "@/components/tags/types"
 import { Tag } from "@/components/tags/Tag"
 import { ComputeProvider } from "@/types"
 import { availableModelsForVideoGeneration } from "@/components/settings/constants"
+import { useSettings } from "@/controllers/settings"
+import { ComputeProviderName } from "@/components/core/providers/ComputeProviderName"
+import { ComputeProviderLogo } from "@/components/core/providers/ComputeProviderLogo"
+import { cn } from "@/lib/utils"
+
 import { hasNoPublicAPI } from "./hasNoPublicAPI"
+import { formatProvider } from "./formatProvider"
+
+export function VideoGenerationModelList() {
+
+  const provider = useSettings(s => s.videoProvider)
+  const setProvider = useSettings(s => s.setVideoProvider)
+  const model = useSettings(s => s.videoGenerationModel)
+  const setModel = useSettings(s => s.setVideoGenerationModel)
 
-export function VideoGenerationModelList({
-  provider,
-  current,
-  setter,
-}: {
-  provider?: ComputeProvider
-  current?: string
-  setter: (model: string) => void
-}) {
-  const models: string[] = provider ? (availableModelsForVideoGeneration[provider] || []) : []
+  const availableProviders = Object.keys(availableModelsForVideoGeneration) as ComputeProvider[]
+  if (!availableProviders) { return null }
 
-  if (models.length === 0) { return null }
-  
   return (
     <MenubarSub>
       <MenubarSubTrigger>
         <Tag size="lg" color={TagColor.RED}>generate&nbsp;video</Tag>
-        {current || "None"}
+        <div className={cn(`flex flex-row space-x-2 items-center`)}>
+          <ComputeProviderLogo
+            provider={(provider && model) ? provider : undefined}
+            height={18}
+            className={cn(`rounded-full`)}
+          />
+          <div>{model || "None"}</div>
+        </div>
       </MenubarSubTrigger>
       <MenubarSubContent>
-        {models.map(model => (
-          <MenubarCheckboxItem
-             key={model}
-            checked={current === model}
-            disabled={hasNoPublicAPI(model)}
-            onClick={(e) => {
-              if (hasNoPublicAPI(model)) {
-                e.stopPropagation()
-                e.preventDefault()
-                return false
-              }
-              setter(model)
-              e.stopPropagation()
-              e.preventDefault()
-              return false
-            }}>
-            {
-              // if the model is unavailable, we should add a tooltip like this:
-              // https://x.com/flngr/status/1800968844581929094
-              model
-            }
-          </MenubarCheckboxItem>
+        {availableProviders.map(p => (
+        <MenubarSub key={p}>
+          <MenubarSubTrigger>
+            <ComputeProviderName>{p}</ComputeProviderName>
+          </MenubarSubTrigger>
+          <MenubarSubContent>
+            {(availableModelsForVideoGeneration[p] || []).map(m => (
+              <MenubarCheckboxItem
+                key={m}
+                checked={provider === p && model === m}
+                disabled={hasNoPublicAPI(m)}
+                onClick={(e) => {
+                  if (hasNoPublicAPI(m)) {
+                    e.stopPropagation()
+                    e.preventDefault()
+                    return false
+                  }
+                  setProvider(p)
+                  setModel(m)
+                  e.stopPropagation()
+                  e.preventDefault()
+                  return false
+                }}>
+                {m}
+              </MenubarCheckboxItem>
+            ))}
+          </MenubarSubContent>
+        </MenubarSub>
         ))}
       </MenubarSubContent>
     </MenubarSub>

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

@@ -0,0 +1,78 @@
+"use client"
+
+import {
+  MenubarCheckboxItem,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+} from "@/components/ui/menubar"
+
+import { TagColor } from "@/components/tags/types"
+import { Tag } from "@/components/tags/Tag"
+import { ComputeProvider } from "@/types"
+import { availableModelsForVideoSegmentation } from "@/components/settings/constants"
+import { useSettings } from "@/controllers/settings"
+import { ComputeProviderName } from "@/components/core/providers/ComputeProviderName"
+import { ComputeProviderLogo } from "@/components/core/providers/ComputeProviderLogo"
+import { cn } from "@/lib/utils"
+
+import { hasNoPublicAPI } from "./hasNoPublicAPI"
+import { formatProvider } from "./formatProvider"
+
+export function VideoSegmentationModelList() {
+
+  const provider = useSettings(s => s.videoSegmentationProvider)
+  const setProvider = useSettings(s => s.setVideoSegmentationProvider)
+  const model = useSettings(s => s.videoSegmentationModel)
+  const setModel = useSettings(s => s.setVideoSegmentationModel)
+
+  const availableProviders = Object.keys(availableModelsForVideoSegmentation) as ComputeProvider[]
+  if (!availableProviders) { return null }
+
+  return (
+    <MenubarSub>
+      <MenubarSubTrigger>
+        <Tag size="lg" color={TagColor.ZINC}>segmentation</Tag>
+        <div className={cn(`flex flex-row space-x-2 items-center`)}>
+          <ComputeProviderLogo
+            provider={(provider && model) ? provider : undefined}
+            height={18}
+            className={cn(`rounded-full`)}
+          />
+          <div>{model || "None"}</div>
+        </div>
+      </MenubarSubTrigger>
+      <MenubarSubContent>
+        {availableProviders.map(p => (
+        <MenubarSub key={p}>
+          <MenubarSubTrigger>
+            <ComputeProviderName>{p}</ComputeProviderName>
+          </MenubarSubTrigger>
+          <MenubarSubContent>
+            {(availableModelsForVideoSegmentation[p] || []).map(m => (
+              <MenubarCheckboxItem
+                key={m}
+                checked={provider === p && model === m}
+                disabled={hasNoPublicAPI(m)}
+                onClick={(e) => {
+                  if (hasNoPublicAPI(m)) {
+                    e.stopPropagation()
+                    e.preventDefault()
+                    return false
+                  }
+                  setProvider(p)
+                  setModel(m)
+                  e.stopPropagation()
+                  e.preventDefault()
+                  return false
+                }}>
+                {m}
+              </MenubarCheckboxItem>
+            ))}
+          </MenubarSubContent>
+        </MenubarSub>
+        ))}
+      </MenubarSubContent>
+    </MenubarSub>
+  )
+}

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

@@ -2,10 +2,6 @@
 
 import {
   MenubarCheckboxItem,
-  MenubarContent,
-  MenubarItem,
-  MenubarMenu,
-  MenubarSeparator,
   MenubarSub,
   MenubarSubContent,
   MenubarSubTrigger,
@@ -15,46 +11,66 @@ import { TagColor } from "@/components/tags/types"
 import { Tag } from "@/components/tags/Tag"
 import { ComputeProvider } from "@/types"
 import { availableModelsForVideoUpscaling } from "@/components/settings/constants"
+import { useSettings } from "@/controllers/settings"
+import { ComputeProviderName } from "@/components/core/providers/ComputeProviderName"
+import { ComputeProviderLogo } from "@/components/core/providers/ComputeProviderLogo"
+import { cn } from "@/lib/utils"
+
 import { hasNoPublicAPI } from "./hasNoPublicAPI"
+import { formatProvider } from "./formatProvider"
+
+export function VideoUpscalingModelList() {
+
+  const provider = useSettings(s => s.videoUpscalingProvider)
+  const setProvider = useSettings(s => s.setVideoUpscalingProvider)
+  const model = useSettings(s => s.videoUpscalingModel)
+  const setModel = useSettings(s => s.setVideoUpscalingModel)
 
-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 }
+  const availableProviders = Object.keys(availableModelsForVideoUpscaling) as ComputeProvider[]
+  if (!availableProviders) { return null }
 
   return (
     <MenubarSub>
       <MenubarSubTrigger>
-        <Tag size="lg" color={TagColor.INDIGO}>upscale&nbsp;video</Tag>
-        {current || "None"}
+        <Tag size="lg" color={TagColor.BLUE}>upscale&nbsp;video</Tag>
+        <div className={cn(`flex flex-row space-x-2 items-center`)}>
+          <ComputeProviderLogo
+            provider={(provider && model) ? provider : undefined}
+            height={18}
+            className={cn(`rounded-full`)}
+          />
+          <div>{model || "None"}</div>
+        </div>
       </MenubarSubTrigger>
       <MenubarSubContent>
-        {models.map(model => (
-          <MenubarCheckboxItem
-             key={model}
-            checked={current === model}
-            disabled={hasNoPublicAPI(model)}
-            onClick={(e) => {
-              if (hasNoPublicAPI(model)) {
-                e.stopPropagation()
-                e.preventDefault()
-                return false
-              }
-              setter(model)
-              e.stopPropagation()
-              e.preventDefault()
-              return false
-            }}>
-            {model}
-          </MenubarCheckboxItem>
+        {availableProviders.map(p => (
+        <MenubarSub key={p}>
+          <MenubarSubTrigger>
+            <ComputeProviderName>{p}</ComputeProviderName>
+          </MenubarSubTrigger>
+          <MenubarSubContent>
+            {(availableModelsForVideoUpscaling[p] || []).map(m => (
+              <MenubarCheckboxItem
+                key={m}
+                checked={provider === p && model === m}
+                disabled={hasNoPublicAPI(m)}
+                onClick={(e) => {
+                  if (hasNoPublicAPI(m)) {
+                    e.stopPropagation()
+                    e.preventDefault()
+                    return false
+                  }
+                  setProvider(p)
+                  setModel(m)
+                  e.stopPropagation()
+                  e.preventDefault()
+                  return false
+                }}>
+                {m}
+              </MenubarCheckboxItem>
+            ))}
+          </MenubarSubContent>
+        </MenubarSub>
         ))}
       </MenubarSubContent>
     </MenubarSub>

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

@@ -2,10 +2,6 @@
 
 import {
   MenubarCheckboxItem,
-  MenubarContent,
-  MenubarItem,
-  MenubarMenu,
-  MenubarSeparator,
   MenubarSub,
   MenubarSubContent,
   MenubarSubTrigger,
@@ -15,46 +11,66 @@ import { TagColor } from "@/components/tags/types"
 import { Tag } from "@/components/tags/Tag"
 import { ComputeProvider } from "@/types"
 import { availableModelsForVoiceGeneration } from "@/components/settings/constants"
+import { useSettings } from "@/controllers/settings"
+import { ComputeProviderName } from "@/components/core/providers/ComputeProviderName"
+import { ComputeProviderLogo } from "@/components/core/providers/ComputeProviderLogo"
+import { cn } from "@/lib/utils"
+
 import { hasNoPublicAPI } from "./hasNoPublicAPI"
+import { formatProvider } from "./formatProvider"
+
+export function VoiceGenerationModelList() {
+
+  const provider = useSettings(s => s.voiceProvider)
+  const setProvider = useSettings(s => s.setVoiceProvider)
+  const model = useSettings(s => s.voiceGenerationModel)
+  const setModel = useSettings(s => s.setVoiceGenerationModel)
 
-export function VoiceGenerationModelList({
-  provider,
-  current,
-  setter,
-}: {
-  provider?: ComputeProvider
-  current?: string
-  setter: (model: string) => void
-}) {
-  const models: string[] = provider ? (availableModelsForVoiceGeneration[provider] || []) : []
+  const availableProviders = Object.keys(availableModelsForVoiceGeneration) as ComputeProvider[]
+  if (!availableProviders) { return null }
 
-  if (models.length === 0) { return null }
-  
   return (
     <MenubarSub>
       <MenubarSubTrigger>
         <Tag size="lg" color={TagColor.ORANGE}>generate&nbsp;voice</Tag>
-        {current || "None"}
+        <div className={cn(`flex flex-row space-x-2 items-center`)}>
+          <ComputeProviderLogo
+            provider={(provider && model) ? provider : undefined}
+            height={18}
+            className={cn(`rounded-full`)}
+          />
+          <div>{model || "None"}</div>
+        </div>
       </MenubarSubTrigger>
       <MenubarSubContent>
-        {models.map(model => (
-          <MenubarCheckboxItem
-             key={model}
-            checked={current === model}
-            disabled={hasNoPublicAPI(model)}
-            onClick={(e) => {
-              if (hasNoPublicAPI(model)) {
-                e.stopPropagation()
-                e.preventDefault()
-                return false
-              }
-              setter(model)
-              e.stopPropagation()
-              e.preventDefault()
-              return false
-            }}>
-            {model}
-          </MenubarCheckboxItem>
+        {availableProviders.map(p => (
+        <MenubarSub key={p}>
+          <MenubarSubTrigger>
+            <ComputeProviderName>{p}</ComputeProviderName>
+          </MenubarSubTrigger>
+          <MenubarSubContent>
+            {(availableModelsForVoiceGeneration[p] || []).map(m => (
+              <MenubarCheckboxItem
+                key={m}
+                checked={provider === p && model === m}
+                disabled={hasNoPublicAPI(m)}
+                onClick={(e) => {
+                  if (hasNoPublicAPI(m)) {
+                    e.stopPropagation()
+                    e.preventDefault()
+                    return false
+                  }
+                  setProvider(p)
+                  setModel(m)
+                  e.stopPropagation()
+                  e.preventDefault()
+                  return false
+                }}>
+                {m}
+              </MenubarCheckboxItem>
+            ))}
+          </MenubarSubContent>
+        </MenubarSub>
         ))}
       </MenubarSubContent>
     </MenubarSub>

src/components/toolbars/top-menu/lists/formatProvider.ts

@@ -0,0 +1,8 @@
+import { computeProviderShortNames } from "@/components/settings/constants"
+import { ComputeProvider } from "@/types"
+
+export function formatProvider(computeProvider?: ComputeProvider): string {
+  return `${
+    (computeProviderShortNames as any)[computeProvider || ""] || "None"
+  }`
+}

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

@@ -14,10 +14,8 @@ import {
 import { useSettings } from "@/controllers/settings"
 import { useUI } from "@/controllers/ui"
 
-import { ProviderList } from "../lists/ProviderList"
 import { RenderingStrategyList } from "../lists/RenderingStrategyList"
-import { availableComputeProvidersForMusic } from "@/components/settings/constants"
-import { ComputeProvider, SettingsCategory } from "@/types"
+import { SettingsCategory } from "@/types"
 import { MusicGenerationModelList } from "../lists/MusicGenerationModelList"
 import { useResolver } from "@/controllers/resolver/useResolver"
 import { IsBusy } from "../IsBusy"
@@ -25,10 +23,6 @@ import { IsBusy } from "../IsBusy"
 export function TopMenuMusic() {
   const nbPendingRequestsForMusic = useResolver(s => s.nbPendingRequestsForMusic)
   const setShowSettings = useUI(s => s.setShowSettings)
-  const musicProvider = useSettings(s => s.musicProvider)
-  const setMusicProvider = useSettings(s => s.setMusicProvider)
-  const musicGenerationModel = useSettings(s => s.musicGenerationModel)
-  const setMusicGenerationModel = useSettings(s => s.setMusicGenerationModel)
   const musicRenderingStrategy = useSettings((s) => s.musicRenderingStrategy)
   const setMusicRenderingStrategy = useSettings((s) => s.setMusicRenderingStrategy)
 
@@ -39,12 +33,7 @@ export function TopMenuMusic() {
         <MenubarSub>
           <MenubarItem onClick={() => { setShowSettings(SettingsCategory.MUSIC) }}>Show advanced settings</MenubarItem>
           <MenubarSeparator />
-          <MusicGenerationModelList provider={musicProvider} current={musicGenerationModel} setter={setMusicGenerationModel} />
-          <ProviderList providers={availableComputeProvidersForMusic} current={musicProvider} setter={(newProvider: ComputeProvider) => {
-            if (musicProvider === newProvider) { return }
-            setMusicProvider(newProvider)
-            setMusicGenerationModel(undefined)
-          }} />
+          <MusicGenerationModelList />
           <RenderingStrategyList current={musicRenderingStrategy} setter={setMusicRenderingStrategy} />
           <MenubarSeparator />
           <MenubarItem

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

@@ -14,10 +14,8 @@ import {
 import { useSettings } from "@/controllers/settings"
 import { useUI } from "@/controllers/ui"
 
-import { ProviderList } from "../lists/ProviderList"
 import { RenderingStrategyList } from "../lists/RenderingStrategyList"
-import { availableComputeProvidersForSound } from "@/components/settings/constants"
-import { ComputeProvider, SettingsCategory } from "@/types"
+import { SettingsCategory } from "@/types"
 import { SoundGenerationModelList } from "../lists/SoundGenerationModelList"
 import { useResolver } from "@/controllers/resolver/useResolver"
 import { IsBusy } from "../IsBusy"
@@ -25,10 +23,6 @@ import { IsBusy } from "../IsBusy"
 export function TopMenuSound() {
   const nbPendingRequestsForSound = useResolver(s => s.nbPendingRequestsForSound)
   const setShowSettings = useUI(s => s.setShowSettings)
-  const soundProvider = useSettings(s => s.soundProvider)
-  const setSoundProvider = useSettings(s => s.setSoundProvider)
-  const soundGenerationModel = useSettings(s => s.soundGenerationModel)
-  const setSoundGenerationModel = useSettings(s => s.setSoundGenerationModel)
   const soundRenderingStrategy = useSettings((s) => s.soundRenderingStrategy)
   const setSoundRenderingStrategy = useSettings((s) => s.setSoundRenderingStrategy)
   return (
@@ -38,12 +32,7 @@ export function TopMenuSound() {
         <MenubarSub>
           <MenubarItem onClick={() => { setShowSettings(SettingsCategory.SOUND) }}>Show advanced settings</MenubarItem>
           <MenubarSeparator />
-          <SoundGenerationModelList provider={soundProvider} current={soundGenerationModel} setter={setSoundGenerationModel} />
-          <ProviderList providers={availableComputeProvidersForSound} current={soundProvider} setter={(newProvider: ComputeProvider) => {
-            if (soundProvider === newProvider) { return }
-            setSoundProvider(newProvider)
-            setSoundGenerationModel(undefined)
-          }} />
+          <SoundGenerationModelList />
           <RenderingStrategyList current={soundRenderingStrategy} setter={setSoundRenderingStrategy} />
           <MenubarSeparator />
           <MenubarItem

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

@@ -14,26 +14,22 @@ import {
 import { useSettings } from "@/controllers/settings"
 import { useUI } from "@/controllers/ui"
 
-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 { ComputeProvider, SettingsCategory } from "@/types"
+import { SettingsCategory } from "@/types"
 import { useResolver } from "@/controllers/resolver/useResolver"
 import { IsBusy } from "../IsBusy"
+import { VideoDepthModelList } from "../lists/VideoDepthModelList"
+import { VideoSegmentationModelList } from "../lists/VideoSegmentationModelList"
 
 export function TopMenuVideo() {
   const nbPendingRequestsForVideo = useResolver(s => s.nbPendingRequestsForVideo)
   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 (
     <MenubarMenu>
       <MenubarTrigger><span>Video</span><IsBusy nbPendingTasks={nbPendingRequestsForVideo} /></MenubarTrigger>
@@ -41,14 +37,10 @@ export function TopMenuVideo() {
         <MenubarSub>
           <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={(newProvider: ComputeProvider) => {
-            if (videoProvider === newProvider) { return }
-            setVideoProvider(newProvider)
-            setVideoGenerationModel(undefined)
-            setVideoUpscalingModel(undefined)
-           }} />
+          <VideoGenerationModelList />
+          <VideoUpscalingModelList />
+          <VideoDepthModelList />
+          <VideoSegmentationModelList />
           <RenderingStrategyList current={videoRenderingStrategy} setter={setVideoRenderingStrategy} />
           <MenubarSeparator />
           <MenubarItem

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

@@ -14,21 +14,16 @@ import {
 import { useSettings } from "@/controllers/settings"
 import { useUI } from "@/controllers/ui"
 
-import { ProviderList } from "../lists/ProviderList"
+
 import { RenderingStrategyList } from "../lists/RenderingStrategyList"
-import { availableComputeProvidersForVoice } from "@/components/settings/constants"
 import { VoiceGenerationModelList } from "../lists/VoiceGenerationModelList"
-import { ComputeProvider, SettingsCategory } from "@/types"
+import { SettingsCategory } from "@/types"
 import { useResolver } from "@/controllers/resolver/useResolver"
 import { IsBusy } from "../IsBusy"
 
 export function TopMenuVoice() {
   const nbPendingRequestsForVoice = useResolver(s => s.nbPendingRequestsForVoice)
   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 (
@@ -38,12 +33,7 @@ export function TopMenuVoice() {
         <MenubarSub>
           <MenubarItem onClick={() => { setShowSettings(SettingsCategory.VOICE) }}>Show advanced settings</MenubarItem>
           <MenubarSeparator />
-          <VoiceGenerationModelList provider={voiceProvider} current={voiceGenerationModel} setter={setVoiceGenerationModel} />
-          <ProviderList providers={availableComputeProvidersForVoice} current={voiceProvider} setter={(newProvider: ComputeProvider) => {
-            if (voiceProvider === newProvider) { return }
-            setVoiceProvider(newProvider)
-            setVoiceGenerationModel(undefined)
-           }} />
+          <VoiceGenerationModelList />
           <RenderingStrategyList current={voiceRenderingStrategy} setter={setVoiceRenderingStrategy} />
           <MenubarSeparator />
           <MenubarItem