Ciaran/image model listing (#1417)

## Motivation Image models (FLUX, Qwen Image) had no family grouping or quantization metadata in the dashboard ## Changes - Added family, quantization, base_model, and capabilities fields to all 18 image model TOML cards (FLUX.1 variants + Qwen Image variants) - Added FLUX and Qwen Image SVG logos to FamilyLogos.svelte - Added "flux" and "qwen-image" families to the sidebar and family sort order - Added "Image Gen" and "Image Edit" capability filters in ModelFilterPopover.svelte - Added image edit icon/badge to ModelPickerGroup.svelte - Made the model category sidebar scrollable to accommodate the new entries - Hidden scrollbars on model list panels ## Why It Works Reuses the existing family/quantization grouping infrastructure that LLMs already use, extending it to image models with appropriate metadata and icons ## Test Plan ### Manual Testing Verified image models behave like text models in the model list dialog --------- Co-authored-by: Alex Cheema <41707476+AlexCheema@users.noreply.github.com>
2026-02-07 00:08:57 +00:00
parent dcb4cabc15
commit 9dc4f786bd
23 changed files with 167 additions and 5 deletions
@@ -58,6 +58,18 @@
      d="M17.962 1.844h-4.326l-3.425 7.81H5.369V1.878H1.5V22h3.87v-8.477h6.824a3.025 3.025 0 002.743-1.75V22h3.87v-8.477a3.87 3.87 0 00-3.588-3.86v-.01h-2.125a3.94 3.94 0 002.323-2.12l2.545-5.689z"
    />
  </svg>
+{:else if family === "flux"}
+  <svg class="w-6 h-6 {className}" viewBox="0 0 24 24" fill="currentColor">
+    <path
+      d="M12 2L2 19h7.5l2.5-4.5L14.5 19H22L12 2zm0 4.5L16.5 17h-3l-1.5-2.7L10.5 17h-3L12 6.5z"
+    />
+  </svg>
+{:else if family === "qwen-image"}
+  <svg class="w-6 h-6 {className}" viewBox="0 0 24 24" fill="currentColor">
+    <path
+      d="M12.604 1.34c.393.69.784 1.382 1.174 2.075a.18.18 0 00.157.091h5.552c.174 0 .322.11.446.327l1.454 2.57c.19.337.24.478.024.837-.26.43-.513.864-.76 1.3l-.367.658c-.106.196-.223.28-.04.512l2.652 4.637c.172.301.111.494-.043.77-.437.785-.882 1.564-1.335 2.34-.159.272-.352.375-.68.37-.777-.016-1.552-.01-2.327.016a.099.099 0 00-.081.05 575.097 575.097 0 01-2.705 4.74c-.169.293-.38.363-.725.364-.997.003-2.002.004-3.017.002a.537.537 0 01-.465-.271l-1.335-2.323a.09.09 0 00-.083-.049H4.982c-.285.03-.553-.001-.805-.092l-1.603-2.77a.543.543 0 01-.002-.54l1.207-2.12a.198.198 0 000-.197 550.951 550.951 0 01-1.875-3.272l-.79-1.395c-.16-.31-.173-.496.095-.965.465-.813.927-1.625 1.387-2.436.132-.234.304-.334.584-.335a338.3 338.3 0 012.589-.001.124.124 0 00.107-.063l2.806-4.895a.488.488 0 01.422-.246c.524-.001 1.053 0 1.583-.006L11.704 1c.341-.003.724.032.9.34zm-3.432.403a.06.06 0 00-.052.03L6.254 6.788a.157.157 0 01-.135.078H3.253c-.056 0-.07.025-.041.074l5.81 10.156c.025.042.013.062-.034.063l-2.795.015a.218.218 0 00-.2.116l-1.32 2.31c-.044.078-.021.118.068.118l5.716.008c.046 0 .08.02.104.061l1.403 2.454c.046.081.092.082.139 0l5.006-8.76.783-1.382a.055.055 0 01.096 0l1.424 2.53a.122.122 0 00.107.062l2.763-.02a.04.04 0 00.035-.02.041.041 0 000-.04l-2.9-5.086a.108.108 0 010-.113l.293-.507 1.12-1.977c.024-.041.012-.062-.035-.062H9.2c-.059 0-.073-.026-.043-.077l1.434-2.505a.107.107 0 000-.114L9.225 1.774a.06.06 0 00-.053-.031zm6.29 8.02c.046 0 .058.02.034.06l-.832 1.465-2.613 4.585a.056.056 0 01-.05.029.058.058 0 01-.05-.029L8.498 9.841c-.02-.034-.01-.052.028-.054l.216-.012 6.722-.012z"
+    />
+  </svg>
 {:else if family === "huggingface"}
  <svg class="w-6 h-6 {className}" viewBox="0 0 24 24" fill="currentColor">
    <path
@@ -22,6 +22,8 @@
    glm: "GLM",
    minimax: "MiniMax",
    kimi: "Kimi",
+    flux: "FLUX",
+    "qwen-image": "Qwen Img",
  };

  function getFamilyName(family: string): string {
@@ -32,7 +34,7 @@
 </script>

 <div
-  class="flex flex-col gap-1 py-2 px-1 border-r border-exo-yellow/10 bg-exo-medium-gray/30 min-w-[64px]"
+  class="flex flex-col gap-1 py-2 px-1 border-r border-exo-yellow/10 bg-exo-medium-gray/30 min-w-[64px] overflow-y-auto scrollbar-hide"
 >
  <!-- All models (no filter) -->
  <button
@@ -24,6 +24,8 @@
    { id: "thinking", label: "Thinking" },
    { id: "code", label: "Code" },
    { id: "vision", label: "Vision" },
+    { id: "image_gen", label: "Image Gen" },
+    { id: "image_edit", label: "Image Edit" },
  ];

  // Size ranges
@@ -142,6 +144,45 @@
                  stroke-linejoin="round"
                /><circle cx="12" cy="12" r="3" /></svg
              >
+            {:else if cap.id === "image_gen"}
+              <svg
+                class="w-3.5 h-3.5 inline-block"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                ><rect
+                  x="3"
+                  y="3"
+                  width="18"
+                  height="18"
+                  rx="2"
+                  ry="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                /><circle cx="8.5" cy="8.5" r="1.5" /><path
+                  d="M21 15l-5-5L5 21"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                /></svg
+              >
+            {:else if cap.id === "image_edit"}
+              <svg
+                class="w-3.5 h-3.5 inline-block"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                ><path
+                  d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                /><path
+                  d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                /></svg
+              >
            {/if}
            <span class="ml-1">{cap.label}</span>
          </button>
@@ -200,9 +200,42 @@
              stroke-width="1.5"
              title="Supports image generation"
            >
-              <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+              <rect
+                x="3"
+                y="3"
+                width="18"
+                height="18"
+                rx="2"
+                ry="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
              <circle cx="8.5" cy="8.5" r="1.5" />
-              <path d="M21 15l-5-5L5 21" />
+              <path
+                d="M21 15l-5-5L5 21"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          {:else if cap === "image_edit"}
+            <svg
+              class="w-3.5 h-3.5 text-white/40 flex-shrink-0"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+              title="Supports image editing"
+            >
+              <path
+                d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
            </svg>
          {/if}
        {/each}
@@ -363,6 +363,8 @@
      "deepseek",
      "gpt-oss",
      "llama",
+      "flux",
+      "qwen-image",
    ];
    return Array.from(families).sort((a, b) => {
      const aIdx = familyOrder.indexOf(a);
@@ -606,7 +608,7 @@
      />

      <!-- Model list -->
-      <div class="flex-1 overflow-y-auto flex flex-col">
+      <div class="flex-1 overflow-y-auto scrollbar-hide flex flex-col">
        {#if selectedFamily === "huggingface"}
          <!-- HuggingFace Hub view -->
          <div class="flex-1 flex flex-col min-h-0">
@@ -624,7 +626,7 @@
            </div>

            <!-- Results list -->
-            <div class="flex-1 overflow-y-auto">
+            <div class="flex-1 overflow-y-auto scrollbar-hide">
              {#if hfIsLoadingTrending && hfTrendingModels.length === 0}
                <div
                  class="flex items-center justify-center py-12 text-white/40"
@@ -3,6 +3,10 @@ n_layers = 57
 hidden_size = 1
 supports_tensor = false
 tasks = ["ImageToImage"]
+family = "flux"
+quantization = "4bit"
+base_model = "FLUX.1 Kontext"
+capabilities = ["image_edit"]

 [storage_size]
 in_bytes = 15475325472
@@ -3,6 +3,10 @@ n_layers = 57
 hidden_size = 1
 supports_tensor = false
 tasks = ["ImageToImage"]
+family = "flux"
+quantization = "8bit"
+base_model = "FLUX.1 Kontext"
+capabilities = ["image_edit"]

 [storage_size]
 in_bytes = 21426029632
@@ -3,6 +3,10 @@ n_layers = 57
 hidden_size = 1
 supports_tensor = false
 tasks = ["ImageToImage"]
+family = "flux"
+quantization = ""
+base_model = "FLUX.1 Kontext"
+capabilities = ["image_edit"]

 [storage_size]
 in_bytes = 33327437952
@@ -3,6 +3,10 @@ n_layers = 57
 hidden_size = 1
 supports_tensor = false
 tasks = ["TextToImage"]
+family = "flux"
+quantization = "4bit"
+base_model = "FLUX.1 Krea"
+capabilities = ["image_gen"]

 [storage_size]
 in_bytes = 15475325472
@@ -3,6 +3,10 @@ n_layers = 57
 hidden_size = 1
 supports_tensor = false
 tasks = ["TextToImage"]
+family = "flux"
+quantization = "8bit"
+base_model = "FLUX.1 Krea"
+capabilities = ["image_gen"]

 [storage_size]
 in_bytes = 21426029632
@@ -3,6 +3,10 @@ n_layers = 57
 hidden_size = 1
 supports_tensor = false
 tasks = ["TextToImage"]
+family = "flux"
+quantization = ""
+base_model = "FLUX.1 Krea"
+capabilities = ["image_gen"]

 [storage_size]
 in_bytes = 33327437952
@@ -3,6 +3,10 @@ n_layers = 57
 hidden_size = 1
 supports_tensor = false
 tasks = ["TextToImage"]
+family = "flux"
+quantization = "4bit"
+base_model = "FLUX.1 Dev"
+capabilities = ["image_gen"]

 [storage_size]
 in_bytes = 15475325472
@@ -3,6 +3,10 @@ n_layers = 57
 hidden_size = 1
 supports_tensor = false
 tasks = ["TextToImage"]
+family = "flux"
+quantization = "8bit"
+base_model = "FLUX.1 Dev"
+capabilities = ["image_gen"]

 [storage_size]
 in_bytes = 21426029632
@@ -3,6 +3,10 @@ n_layers = 57
 hidden_size = 1
 supports_tensor = false
 tasks = ["TextToImage"]
+family = "flux"
+quantization = ""
+base_model = "FLUX.1 Dev"
+capabilities = ["image_gen"]

 [storage_size]
 in_bytes = 33327437952
@@ -3,6 +3,10 @@ n_layers = 57
 hidden_size = 1
 supports_tensor = false
 tasks = ["TextToImage"]
+family = "flux"
+quantization = "4bit"
+base_model = "FLUX.1 Schnell"
+capabilities = ["image_gen"]

 [storage_size]
 in_bytes = 15470210592
@@ -3,6 +3,10 @@ n_layers = 57
 hidden_size = 1
 supports_tensor = false
 tasks = ["TextToImage"]
+family = "flux"
+quantization = "8bit"
+base_model = "FLUX.1 Schnell"
+capabilities = ["image_gen"]

 [storage_size]
 in_bytes = 21415799872
@@ -3,6 +3,10 @@ n_layers = 57
 hidden_size = 1
 supports_tensor = false
 tasks = ["TextToImage"]
+family = "flux"
+quantization = ""
+base_model = "FLUX.1 Schnell"
+capabilities = ["image_gen"]

 [storage_size]
 in_bytes = 33306978432
@@ -4,6 +4,10 @@ hidden_size = 1
 supports_tensor = false
 tasks = ["TextToImage"]
 uses_cfg = true
+family = "qwen-image"
+quantization = "4bit"
+base_model = "Qwen Image"
+capabilities = ["image_gen"]

 [storage_size]
 in_bytes = 26799533856
@@ -4,6 +4,10 @@ hidden_size = 1
 supports_tensor = false
 tasks = ["TextToImage"]
 uses_cfg = true
+family = "qwen-image"
+quantization = "8bit"
+base_model = "Qwen Image"
+capabilities = ["image_gen"]

 [storage_size]
 in_bytes = 37014734400
@@ -4,6 +4,10 @@ hidden_size = 1
 supports_tensor = false
 tasks = ["ImageToImage"]
 uses_cfg = true
+family = "qwen-image"
+quantization = "4bit"
+base_model = "Qwen Image Edit"
+capabilities = ["image_edit"]

 [storage_size]
 in_bytes = 26799533856
@@ -4,6 +4,10 @@ hidden_size = 1
 supports_tensor = false
 tasks = ["ImageToImage"]
 uses_cfg = true
+family = "qwen-image"
+quantization = "8bit"
+base_model = "Qwen Image Edit"
+capabilities = ["image_edit"]

 [storage_size]
 in_bytes = 37014734400
@@ -4,6 +4,10 @@ hidden_size = 1
 supports_tensor = false
 tasks = ["ImageToImage"]
 uses_cfg = true
+family = "qwen-image"
+quantization = ""
+base_model = "Qwen Image Edit"
+capabilities = ["image_edit"]

 [storage_size]
 in_bytes = 57445135488
@@ -4,6 +4,10 @@ hidden_size = 1
 supports_tensor = false
 tasks = ["TextToImage"]
 uses_cfg = true
+family = "qwen-image"
+quantization = ""
+base_model = "Qwen Image"
+capabilities = ["image_gen"]

 [storage_size]
 in_bytes = 57445135488