feat(ModelInfoPanel): use TagsInput for Compatible Base Models

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",

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')

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