Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 11 additions & 10 deletions src/platform/assets/components/AssetCard.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const createAssetData = (
overrides: Partial<AssetDisplayItem> = {}
): AssetDisplayItem => ({
...baseAsset,
description:
secondaryText:
'High-quality realistic images with perfect detail and natural lighting effects for professional photography',
badges: [
{ label: 'checkpoints', type: 'type' },
Expand Down Expand Up @@ -131,20 +131,21 @@ export const EdgeCases: Story = {
// Default case for comparison
createAssetData({
name: 'Complete Data',
description: 'Asset with all data present for comparison'
secondaryText: 'Asset with all data present for comparison'
}),
// No badges
createAssetData({
id: 'no-badges',
name: 'No Badges',
description: 'Testing graceful handling when badges are not provided',
secondaryText:
'Testing graceful handling when badges are not provided',
badges: []
}),
// No stars
createAssetData({
id: 'no-stars',
name: 'No Stars',
description: 'Testing missing stars data gracefully',
secondaryText: 'Testing missing stars data gracefully',
stats: {
downloadCount: '1.8k',
formattedDate: '3/15/25'
Expand All @@ -154,7 +155,7 @@ export const EdgeCases: Story = {
createAssetData({
id: 'no-downloads',
name: 'No Downloads',
description: 'Testing missing downloads data gracefully',
secondaryText: 'Testing missing downloads data gracefully',
stats: {
stars: '4.2k',
formattedDate: '3/15/25'
Expand All @@ -164,7 +165,7 @@ export const EdgeCases: Story = {
createAssetData({
id: 'no-date',
name: 'No Date',
description: 'Testing missing date data gracefully',
secondaryText: 'Testing missing date data gracefully',
stats: {
stars: '4.2k',
downloadCount: '1.8k'
Expand All @@ -174,21 +175,21 @@ export const EdgeCases: Story = {
createAssetData({
id: 'no-stats',
name: 'No Stats',
description: 'Testing when all stats are missing',
secondaryText: 'Testing when all stats are missing',
stats: {}
}),
// Long description
// Long secondaryText
createAssetData({
id: 'long-desc',
name: 'Long Description',
description:
secondaryText:
'This is a very long description that should demonstrate how the component handles text overflow and truncation with ellipsis. The description continues with even more content to ensure we test the 2-line clamp behavior properly and see how it renders when there is significantly more text than can fit in the allocated space.'
}),
// Minimal data
createAssetData({
id: 'minimal',
name: 'Minimal',
description: 'Basic model',
secondaryText: 'Basic model',
tags: ['models'],
badges: [],
stats: {}
Expand Down
4 changes: 2 additions & 2 deletions src/platform/assets/components/AssetCard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -82,14 +82,14 @@
</h3>
<p
:id="descId"
v-tooltip.top="{ value: asset.description, showDelay: tooltipDelay }"
v-tooltip.top="{ value: asset.secondaryText, showDelay: tooltipDelay }"
:class="
cn(
'm-0 text-sm line-clamp-2 [-webkit-box-orient:vertical] [-webkit-line-clamp:2] [display:-webkit-box] text-muted-foreground'
)
"
>
{{ asset.description }}
{{ asset.secondaryText }}
</p>
<div class="flex items-center justify-between gap-2 mt-auto">
<div class="flex gap-3 text-xs text-muted-foreground">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ describe('ModelInfoPanel', () => {
created_at: '2024-01-01T00:00:00Z',
updated_at: '2024-01-01T00:00:00Z',
last_access_time: '2024-01-01T00:00:00Z',
description: 'A test model description',
secondaryText: 'A test model description',
badges: [],
stats: {},
...overrides
Expand Down
6 changes: 3 additions & 3 deletions src/platform/assets/composables/useAssetBrowser.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -84,14 +84,14 @@ describe('useAssetBrowser', () => {
expect(result.name).toBe(apiAsset.name)

// Adds display properties
expect(result.description).toBe('Test model')
expect(result.secondaryText).toBe('test-asset.safetensors')
expect(result.badges).toContainEqual({
label: 'checkpoints',
type: 'type'
})
})

it('creates fallback description from tags when metadata missing', () => {
it('creates secondaryText from filename when metadata missing', () => {
const apiAsset = createApiAsset({
tags: ['models', 'loras'],
user_metadata: undefined
Expand All @@ -100,7 +100,7 @@ describe('useAssetBrowser', () => {
const { filteredAssets } = useAssetBrowser(ref([apiAsset]))
const result = filteredAssets.value[0]

expect(result.description).toBe('loras model')
expect(result.secondaryText).toBe('test-asset.safetensors')
})

it('removes category prefix from badge labels', () => {
Expand Down
16 changes: 6 additions & 10 deletions src/platform/assets/composables/useAssetBrowser.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ import type { FilterState } from '@/platform/assets/components/AssetFilterBar.vu
import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
import {
getAssetBaseModels,
getAssetDescription,
getAssetDisplayName
getAssetDisplayName,
getAssetFilename
} from '@/platform/assets/utils/assetMetadataUtils'
import { useAssetDownloadStore } from '@/stores/assetDownloadStore'
import type { NavGroupData, NavItemData } from '@/types/navTypes'
Expand Down Expand Up @@ -70,7 +70,7 @@ type AssetBadge = {

// Display properties for transformed assets
export interface AssetDisplayItem extends AssetItem {
description: string
secondaryText: string
badges: AssetBadge[]
stats: {
formattedDate?: string
Expand Down Expand Up @@ -116,15 +116,11 @@ export function useAssetBrowser(

// Transform API asset to display asset
function transformAssetForDisplay(asset: AssetItem): AssetDisplayItem {
// Extract description from metadata or create from tags
const typeTag = asset.tags.find((tag) => tag !== 'models')
const description =
getAssetDescription(asset) ||
`${typeTag || t('assetBrowser.unknown')} model`
const secondaryText = getAssetFilename(asset)

// Create badges from tags and metadata
const badges: AssetBadge[] = []

const typeTag = asset.tags.find((tag) => tag !== 'models')
// Type badge from non-root tag
if (typeTag) {
// Remove category prefix from badge label (e.g. "checkpoint/model" → "model")
Expand Down Expand Up @@ -152,7 +148,7 @@ export function useAssetBrowser(

return {
...asset,
description,
secondaryText,
badges,
stats
}
Expand Down
Loading