[fix] add AssetBadge type

This commit is contained in:
Arjan Singh
2025-09-16 13:16:48 -07:00
committed by Arjan Singh
parent 2806aa1a90
commit 5e761d4a43
2 changed files with 16 additions and 15 deletions

View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="absolute bottom-2 right-2 flex flex-col-reverse items-end gap-1"> <div class="absolute bottom-2 right-2 flex flex-wrap justify-end gap-1">
<span <span
v-for="badge in badges" v-for="badge in badges"
:key="badge.label" :key="badge.label"
@@ -18,16 +18,16 @@
<script setup lang="ts"> <script setup lang="ts">
import { cn } from '@/utils/tailwindUtil' import { cn } from '@/utils/tailwindUtil'
interface Badge { type AssetBadge = {
label: string label: string
type: 'type' | 'base' | 'size' type: 'type' | 'base' | 'size'
} }
defineProps<{ defineProps<{
badges: Badge[] badges: AssetBadge[]
}>() }>()
function getBadgeColor(type: Badge['type']): string { function getBadgeColor(type: AssetBadge['type']): string {
switch (type) { switch (type) {
case 'type': case 'type':
return 'bg-blue-100/90 dark-theme:bg-blue-100/80' return 'bg-blue-100/90 dark-theme:bg-blue-100/80'

View File

@@ -3,14 +3,16 @@ import { computed, ref } from 'vue'
import type { UUID } from '@/lib/litegraph/src/utils/uuid' import type { UUID } from '@/lib/litegraph/src/utils/uuid'
import type { AssetItem } from '@/platform/assets/schemas/assetSchema' import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
type AssetBadge = {
label: string
type: 'type' | 'base' | 'size'
}
// Display properties for transformed assets // Display properties for transformed assets
export interface AssetDisplayItem extends AssetItem { export interface AssetDisplayItem extends AssetItem {
description: string description: string
formattedSize: string formattedSize: string
badges: Array<{ badges: AssetBadge[]
label: string
type: 'type' | 'base' | 'size'
}>
stats: { stats: {
formattedDate?: string formattedDate?: string
downloadCount?: string downloadCount?: string
@@ -31,32 +33,31 @@ export function useAssetBrowser(assets: AssetItem[] = []) {
// Transform API asset to display asset // Transform API asset to display asset
function transformAssetForDisplay(asset: AssetItem): AssetDisplayItem { function transformAssetForDisplay(asset: AssetItem): AssetDisplayItem {
// Extract description from metadata or create from tags // Extract description from metadata or create from tags
const typeTag = asset.tags.find((tag) => tag !== 'models')
const description = const description =
asset.user_metadata?.description || asset.user_metadata?.description || `${typeTag || 'Unknown'} model`
`${asset.tags.find((tag) => tag !== 'models') || 'Unknown'} model`
// Format file size // Format file size
const formattedSize = formatFileSize(asset.size) const formattedSize = formatFileSize(asset.size)
// Create badges from tags and metadata // Create badges from tags and metadata
const badges = [] const badges: AssetBadge[] = []
// Type badge from non-root tag // Type badge from non-root tag
const typeTag = asset.tags.find((tag) => tag !== 'models')
if (typeTag) { if (typeTag) {
badges.push({ label: typeTag, type: 'type' as const }) badges.push({ label: typeTag, type: 'type' })
} }
// Base model badge from metadata // Base model badge from metadata
if (asset.user_metadata?.base_model) { if (asset.user_metadata?.base_model) {
badges.push({ badges.push({
label: asset.user_metadata.base_model, label: asset.user_metadata.base_model,
type: 'base' as const type: 'base'
}) })
} }
// Size badge // Size badge
badges.push({ label: formattedSize, type: 'size' as const }) badges.push({ label: formattedSize, type: 'size' })
// Create display stats from API data // Create display stats from API data
const stats = { const stats = {