mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-29 18:52:19 +00:00
feat(AssetCard): remove model size (#6227)
## Summary Remove model file sizes. It was confusing some users who thought that was they were being asked to download them locally. ## Changes - Remove `formattedSize` from `AssetDisplayItem`. - Remove associated code. - ## Screenshots <img width="1299" height="512" alt="Screenshot 2025-10-23 at 11 22 06 AM" src="https://github.com/user-attachments/assets/625b588b-a605-49dd-97a2-16bcd604aef2" /> <!-- Add screenshots or video recording to help explain your changes --> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6227-feat-AssetCard-remove-model-size-2956d73d36508155930fdb4d2db2522a) by [Unito](https://www.unito.io)
This commit is contained in:
@@ -12,7 +12,6 @@ const createAssetData = (
|
|||||||
...baseAsset,
|
...baseAsset,
|
||||||
description:
|
description:
|
||||||
'High-quality realistic images with perfect detail and natural lighting effects for professional photography',
|
'High-quality realistic images with perfect detail and natural lighting effects for professional photography',
|
||||||
formattedSize: '2.1 GB',
|
|
||||||
badges: [
|
badges: [
|
||||||
{ label: 'checkpoints', type: 'type' },
|
{ label: 'checkpoints', type: 'type' },
|
||||||
{ label: '2.1 GB', type: 'size' }
|
{ label: '2.1 GB', type: 'size' }
|
||||||
|
|||||||
@@ -7,7 +7,6 @@ import {
|
|||||||
getAssetBaseModel,
|
getAssetBaseModel,
|
||||||
getAssetDescription
|
getAssetDescription
|
||||||
} from '@/platform/assets/utils/assetMetadataUtils'
|
} from '@/platform/assets/utils/assetMetadataUtils'
|
||||||
import { formatSize } from '@/utils/formatUtil'
|
|
||||||
|
|
||||||
function filterByCategory(category: string) {
|
function filterByCategory(category: string) {
|
||||||
return (asset: AssetItem) => {
|
return (asset: AssetItem) => {
|
||||||
@@ -54,7 +53,6 @@ type AssetBadge = {
|
|||||||
// 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
|
|
||||||
badges: AssetBadge[]
|
badges: AssetBadge[]
|
||||||
stats: {
|
stats: {
|
||||||
formattedDate?: string
|
formattedDate?: string
|
||||||
@@ -85,9 +83,6 @@ export function useAssetBrowser(assets: AssetItem[] = []) {
|
|||||||
getAssetDescription(asset) ||
|
getAssetDescription(asset) ||
|
||||||
`${typeTag || t('assetBrowser.unknown')} model`
|
`${typeTag || t('assetBrowser.unknown')} model`
|
||||||
|
|
||||||
// Format file size
|
|
||||||
const formattedSize = formatSize(asset.size)
|
|
||||||
|
|
||||||
// Create badges from tags and metadata
|
// Create badges from tags and metadata
|
||||||
const badges: AssetBadge[] = []
|
const badges: AssetBadge[] = []
|
||||||
|
|
||||||
@@ -105,9 +100,6 @@ export function useAssetBrowser(assets: AssetItem[] = []) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// Size badge
|
|
||||||
badges.push({ label: formattedSize, type: 'size' })
|
|
||||||
|
|
||||||
// Create display stats from API data
|
// Create display stats from API data
|
||||||
const stats = {
|
const stats = {
|
||||||
formattedDate: d(new Date(asset.created_at), { dateStyle: 'short' }),
|
formattedDate: d(new Date(asset.created_at), { dateStyle: 'short' }),
|
||||||
@@ -118,7 +110,6 @@ export function useAssetBrowser(assets: AssetItem[] = []) {
|
|||||||
return {
|
return {
|
||||||
...asset,
|
...asset,
|
||||||
description,
|
description,
|
||||||
formattedSize,
|
|
||||||
badges,
|
badges,
|
||||||
stats
|
stats
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -70,7 +70,6 @@ describe('useAssetBrowser', () => {
|
|||||||
describe('Asset Transformation', () => {
|
describe('Asset Transformation', () => {
|
||||||
it('transforms API asset to include display properties', () => {
|
it('transforms API asset to include display properties', () => {
|
||||||
const apiAsset = createApiAsset({
|
const apiAsset = createApiAsset({
|
||||||
size: 2147483648, // 2GB
|
|
||||||
user_metadata: { description: 'Test model' }
|
user_metadata: { description: 'Test model' }
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -83,12 +82,10 @@ describe('useAssetBrowser', () => {
|
|||||||
|
|
||||||
// Adds display properties
|
// Adds display properties
|
||||||
expect(result.description).toBe('Test model')
|
expect(result.description).toBe('Test model')
|
||||||
expect(result.formattedSize).toBe('2 GB')
|
|
||||||
expect(result.badges).toContainEqual({
|
expect(result.badges).toContainEqual({
|
||||||
label: 'checkpoints',
|
label: 'checkpoints',
|
||||||
type: 'type'
|
type: 'type'
|
||||||
})
|
})
|
||||||
expect(result.badges).toContainEqual({ label: '2 GB', type: 'size' })
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('creates fallback description from tags when metadata missing', () => {
|
it('creates fallback description from tags when metadata missing', () => {
|
||||||
@@ -102,22 +99,6 @@ describe('useAssetBrowser', () => {
|
|||||||
|
|
||||||
expect(result.description).toBe('loras model')
|
expect(result.description).toBe('loras model')
|
||||||
})
|
})
|
||||||
|
|
||||||
it('formats various file sizes correctly', () => {
|
|
||||||
const testCases = [
|
|
||||||
{ size: 512, expected: '512 B' },
|
|
||||||
{ size: 1536, expected: '1.5 KB' },
|
|
||||||
{ size: 2097152, expected: '2 MB' },
|
|
||||||
{ size: 3221225472, expected: '3 GB' }
|
|
||||||
]
|
|
||||||
|
|
||||||
testCases.forEach(({ size, expected }) => {
|
|
||||||
const asset = createApiAsset({ size })
|
|
||||||
const { filteredAssets } = useAssetBrowser([asset])
|
|
||||||
const result = filteredAssets.value[0]
|
|
||||||
expect(result.formattedSize).toBe(expected)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
|
|
||||||
describe('Tag-Based Filtering', () => {
|
describe('Tag-Based Filtering', () => {
|
||||||
|
|||||||
Reference in New Issue
Block a user