From d824d643b0536b1891765d5556e2f3d426652da6 Mon Sep 17 00:00:00 2001
From: Alexander Brown <448862+DrJKL@users.noreply.github.com>
Date: Fri, 16 Jan 2026 12:17:34 -0800
Subject: [PATCH] feat(ModelInfoPanel): use TagsInput for Compatible Base
 Models

---
 src/locales/en/main.json                      |  2 +
 .../components/modelInfo/ModelInfoPanel.vue   | 42 ++++++++++++++++---
 .../assets/utils/assetMetadataUtils.ts        | 16 +++++++
 3 files changed, 55 insertions(+), 5 deletions(-)

diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 57ad535886..11b4c9b358 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -2406,6 +2406,8 @@
       "modelTagging": "Model Tagging",
       "modelType": "Model Type",
       "compatibleBaseModels": "Compatible Base Models",
+      "addBaseModel": "Add base model...",
+      "baseModelUnknown": "Base model unknown",
       "additionalTags": "Additional Tags",
       "modelDescription": "Model Description",
       "triggerPhrases": "Trigger Phrases",
diff --git a/src/platform/assets/components/modelInfo/ModelInfoPanel.vue b/src/platform/assets/components/modelInfo/ModelInfoPanel.vue
index 7cf0d35cfa..791bb19a73 100644
--- a/src/platform/assets/components/modelInfo/ModelInfoPanel.vue
+++ b/src/platform/assets/components/modelInfo/ModelInfoPanel.vue
@@ -52,10 +52,30 @@
         <span class="text-sm">{{ modelType }}</span>
       </ModelInfoField>
       <ModelInfoField
-        v-if="baseModel"
         :label="$t('assetBrowser.modelInfo.compatibleBaseModels')"
       >
-        <span class="text-sm">{{ baseModel }}</span>
+        <TagsInput
+          v-slot="{ isEmpty }"
+          v-model="baseModels"
+          :disabled="isImmutable"
+        >
+          <TagsInputItem
+            v-for="model in baseModels"
+            :key="model"
+            :value="model"
+          >
+            <TagsInputItemText />
+            <TagsInputItemDelete />
+          </TagsInputItem>
+          <TagsInputInput
+            :is-empty="isEmpty"
+            :placeholder="
+              isImmutable
+                ? $t('assetBrowser.modelInfo.baseModelUnknown')
+                : $t('assetBrowser.modelInfo.addBaseModel')
+            "
+          />
+        </TagsInput>
       </ModelInfoField>
       <ModelInfoField
         v-if="additionalTags.length > 0"
@@ -104,12 +124,17 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 import PropertiesAccordionItem from '@/components/rightSidePanel/layout/PropertiesAccordionItem.vue'
+import TagsInput from '@/components/ui/tags-input/TagsInput.vue'
+import TagsInputInput from '@/components/ui/tags-input/TagsInputInput.vue'
+import TagsInputItem from '@/components/ui/tags-input/TagsInputItem.vue'
+import TagsInputItemDelete from '@/components/ui/tags-input/TagsInputItemDelete.vue'
+import TagsInputItemText from '@/components/ui/tags-input/TagsInputItemText.vue'
 import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
 import {
-  getAssetBaseModel,
+  getAssetBaseModels,
   getAssetDescription,
   getAssetDisplayName,
   getAssetSourceUrl,
@@ -131,10 +156,17 @@ const sourceUrl = computed(() => getAssetSourceUrl(asset))
 const sourceName = computed(() =>
   sourceUrl.value ? getSourceName(sourceUrl.value) : ''
 )
-const baseModel = computed(() => getAssetBaseModel(asset))
+const baseModels = ref<string[]>(getAssetBaseModels(asset))
+watch(
+  () => asset,
+  () => {
+    baseModels.value = getAssetBaseModels(asset)
+  }
+)
 const description = computed(() => getAssetDescription(asset))
 const triggerPhrases = computed(() => getAssetTriggerPhrases(asset))
 const additionalTags = computed(() => getAssetTags(asset))
+const isImmutable = computed(() => asset.is_immutable ?? true)
 
 const modelType = computed(() => {
   const typeTag = asset.tags.find((tag) => tag !== 'models')
diff --git a/src/platform/assets/utils/assetMetadataUtils.ts b/src/platform/assets/utils/assetMetadataUtils.ts
index 0e913a6837..61ad808852 100644
--- a/src/platform/assets/utils/assetMetadataUtils.ts
+++ b/src/platform/assets/utils/assetMetadataUtils.ts
@@ -26,6 +26,22 @@ export function getAssetBaseModel(asset: AssetItem): string | null {
     : null
 }
 
+/**
+ * Extracts base models as an array from asset metadata
+ * @param asset - The asset to extract base models from
+ * @returns Array of base model strings
+ */
+export function getAssetBaseModels(asset: AssetItem): string[] {
+  const baseModel = asset.user_metadata?.base_model
+  if (Array.isArray(baseModel)) {
+    return baseModel.filter((m): m is string => typeof m === 'string')
+  }
+  if (typeof baseModel === 'string' && baseModel) {
+    return [baseModel]
+  }
+  return []
+}
+
 /**
  * Gets the display name for an asset, falling back to filename
  * @param asset - The asset to get display name from