+
diff --git a/src/platform/assets/components/AssetGrid.vue b/src/platform/assets/components/AssetGrid.vue
index cbc44054bb..2bf77461cd 100644
--- a/src/platform/assets/components/AssetGrid.vue
+++ b/src/platform/assets/components/AssetGrid.vue
@@ -27,8 +27,8 @@
)
"
>
-
-
+
+
{{ $t('assetBrowser.noAssetsFound') }}
{{ $t('assetBrowser.tryAdjustingFilters') }}
diff --git a/src/platform/assets/components/Media3DBottom.vue b/src/platform/assets/components/Media3DBottom.vue
new file mode 100644
index 0000000000..4d3c15c0b1
--- /dev/null
+++ b/src/platform/assets/components/Media3DBottom.vue
@@ -0,0 +1,29 @@
+
+
+
+ {{ fileName }}
+
+
+ {{ formatSize(asset.size) }}
+
+
+
+
diff --git a/src/platform/assets/components/Media3DTop.vue b/src/platform/assets/components/Media3DTop.vue
new file mode 100644
index 0000000000..535e5de6c1
--- /dev/null
+++ b/src/platform/assets/components/Media3DTop.vue
@@ -0,0 +1,16 @@
+
+
+
+
+ {{
+ $t('3D Model')
+ }}
+
+
+
+
diff --git a/src/platform/assets/components/MediaAssetActions.vue b/src/platform/assets/components/MediaAssetActions.vue
new file mode 100644
index 0000000000..73144d4d22
--- /dev/null
+++ b/src/platform/assets/components/MediaAssetActions.vue
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/platform/assets/components/MediaAssetButtonDivider.vue b/src/platform/assets/components/MediaAssetButtonDivider.vue
new file mode 100644
index 0000000000..d395ca0996
--- /dev/null
+++ b/src/platform/assets/components/MediaAssetButtonDivider.vue
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/src/platform/assets/components/MediaAssetCard.stories.ts b/src/platform/assets/components/MediaAssetCard.stories.ts
new file mode 100644
index 0000000000..fa1d428567
--- /dev/null
+++ b/src/platform/assets/components/MediaAssetCard.stories.ts
@@ -0,0 +1,318 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import type { AssetMeta } from '../schemas/mediaAssetSchema'
+import MediaAssetCard from './MediaAssetCard.vue'
+
+const meta: Meta
= {
+ title: 'AssetLibrary/MediaAssetCard',
+ component: MediaAssetCard,
+ argTypes: {
+ context: {
+ control: 'select',
+ options: ['input', 'output']
+ },
+ loading: {
+ control: 'boolean'
+ }
+ }
+}
+
+export default meta
+type Story = StoryObj
+
+// Public sample media URLs
+const SAMPLE_MEDIA = {
+ image1: 'https://i.imgur.com/OB0y6MR.jpg',
+ image2: 'https://i.imgur.com/CzXTtJV.jpg',
+ image3: 'https://farm9.staticflickr.com/8505/8441256181_4e98d8bff5_z_d.jpg',
+ video:
+ 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+ videoThumbnail:
+ 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg',
+ audio: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3'
+}
+
+const sampleAsset: AssetMeta = {
+ id: 'asset-1',
+ name: 'sample-image.png',
+ kind: 'image',
+ duration: 3345,
+ size: 2048576,
+ created_at: Date.now().toString(),
+ src: SAMPLE_MEDIA.image1,
+ dimensions: {
+ width: 1920,
+ height: 1080
+ },
+ tags: []
+}
+
+export const ImageAsset: Story = {
+ decorators: [
+ () => ({
+ template: '
'
+ })
+ ],
+ args: {
+ context: { type: 'output', outputCount: 3 },
+ asset: sampleAsset,
+ loading: false
+ }
+}
+
+export const VideoAsset: Story = {
+ decorators: [
+ () => ({
+ template: '
'
+ })
+ ],
+ args: {
+ context: { type: 'input' },
+ asset: {
+ ...sampleAsset,
+ id: 'asset-2',
+ name: 'Big_Buck_Bunny.mp4',
+ kind: 'video',
+ size: 10485760,
+ duration: 13425,
+ preview_url: SAMPLE_MEDIA.videoThumbnail, // Poster image
+ src: SAMPLE_MEDIA.video, // Actual video file
+ dimensions: {
+ width: 1280,
+ height: 720
+ }
+ }
+ }
+}
+
+export const Model3DAsset: Story = {
+ decorators: [
+ () => ({
+ template: '
'
+ })
+ ],
+ args: {
+ context: { type: 'input' },
+ asset: {
+ ...sampleAsset,
+ id: 'asset-3',
+ name: 'Asset-3d-model.glb',
+ kind: '3D',
+ size: 7340032,
+ src: '',
+ dimensions: undefined,
+ duration: 18023
+ }
+ }
+}
+
+export const AudioAsset: Story = {
+ decorators: [
+ () => ({
+ template: '
'
+ })
+ ],
+ args: {
+ context: { type: 'input' },
+ asset: {
+ ...sampleAsset,
+ id: 'asset-3',
+ name: 'SoundHelix-Song.mp3',
+ kind: 'audio',
+ size: 5242880,
+ src: SAMPLE_MEDIA.audio,
+ dimensions: undefined,
+ duration: 23180
+ }
+ }
+}
+
+export const LoadingState: Story = {
+ decorators: [
+ () => ({
+ template: '
'
+ })
+ ],
+ args: {
+ context: { type: 'input' },
+ asset: sampleAsset,
+ loading: true
+ }
+}
+
+export const LongFileName: Story = {
+ decorators: [
+ () => ({
+ template: '
'
+ })
+ ],
+ args: {
+ context: { type: 'input' },
+ asset: {
+ ...sampleAsset,
+ name: 'very-long-file-name-that-should-be-truncated-in-the-ui-to-prevent-overflow.png'
+ }
+ }
+}
+
+export const SelectedState: Story = {
+ decorators: [
+ () => ({
+ template: '
'
+ })
+ ],
+ args: {
+ context: { type: 'output', outputCount: 2 },
+ asset: sampleAsset,
+ selected: true
+ }
+}
+
+export const WebMVideo: Story = {
+ decorators: [
+ () => ({
+ template: '
'
+ })
+ ],
+ args: {
+ context: { type: 'input' },
+ asset: {
+ id: 'asset-webm',
+ name: 'animated-clip.webm',
+ kind: 'video',
+ size: 3145728,
+ created_at: Date.now().toString(),
+ preview_url: SAMPLE_MEDIA.image1, // Poster image
+ src: 'https://www.w3schools.com/html/movie.mp4', // Actual video
+ duration: 620,
+ dimensions: {
+ width: 640,
+ height: 360
+ },
+ tags: []
+ }
+ }
+}
+
+export const GifAnimation: Story = {
+ decorators: [
+ () => ({
+ template: '
'
+ })
+ ],
+ args: {
+ context: { type: 'input' },
+ asset: {
+ id: 'asset-gif',
+ name: 'animation.gif',
+ kind: 'image',
+ size: 1572864,
+ duration: 1345,
+ created_at: Date.now().toString(),
+ src: 'https://media.giphy.com/media/3o7aCTPPm4OHfRLSH6/giphy.gif',
+ dimensions: {
+ width: 480,
+ height: 270
+ },
+ tags: []
+ }
+ }
+}
+
+export const GridLayout: Story = {
+ render: () => ({
+ components: { MediaAssetCard },
+ setup() {
+ const assets: AssetMeta[] = [
+ {
+ id: 'grid-1',
+ name: 'image-file.jpg',
+ kind: 'image',
+ size: 2097152,
+ duration: 4500,
+ created_at: Date.now().toString(),
+ src: SAMPLE_MEDIA.image1,
+ dimensions: { width: 1920, height: 1080 },
+ tags: []
+ },
+ {
+ id: 'grid-2',
+ name: 'image-file.jpg',
+ kind: 'image',
+ size: 2097152,
+ duration: 4500,
+ created_at: Date.now().toString(),
+ src: SAMPLE_MEDIA.image2,
+ dimensions: { width: 1920, height: 1080 },
+ tags: []
+ },
+ {
+ id: 'grid-3',
+ name: 'video-file.mp4',
+ kind: 'video',
+ size: 10485760,
+ duration: 13425,
+ created_at: Date.now().toString(),
+ preview_url: SAMPLE_MEDIA.videoThumbnail, // Poster image
+ src: SAMPLE_MEDIA.video, // Actual video
+ dimensions: { width: 1280, height: 720 },
+ tags: []
+ },
+ {
+ id: 'grid-4',
+ name: 'audio-file.mp3',
+ kind: 'audio',
+ size: 5242880,
+ duration: 180,
+ created_at: Date.now().toString(),
+ src: SAMPLE_MEDIA.audio,
+ tags: []
+ },
+ {
+ id: 'grid-5',
+ name: 'animation.gif',
+ kind: 'image',
+ size: 3145728,
+ duration: 1345,
+ created_at: Date.now().toString(),
+ src: 'https://media.giphy.com/media/l0HlNaQ6gWfllcjDO/giphy.gif',
+ dimensions: { width: 480, height: 360 },
+ tags: []
+ },
+ {
+ id: 'grid-6',
+ name: 'Asset-3d-model.glb',
+ kind: '3D',
+ size: 7340032,
+ src: '',
+ dimensions: undefined,
+ duration: 18023,
+ created_at: Date.now().toString(),
+ tags: []
+ },
+ {
+ id: 'grid-7',
+ name: 'image-file.jpg',
+ kind: 'image',
+ size: 2097152,
+ duration: 4500,
+ created_at: Date.now().toString(),
+ src: SAMPLE_MEDIA.image3,
+ dimensions: { width: 1920, height: 1080 },
+ tags: []
+ }
+ ]
+ return { assets }
+ },
+ template: `
+
+
+
+ `
+ })
+}
diff --git a/src/platform/assets/components/MediaAssetCard.vue b/src/platform/assets/components/MediaAssetCard.vue
new file mode 100644
index 0000000000..8aa58063e4
--- /dev/null
+++ b/src/platform/assets/components/MediaAssetCard.vue
@@ -0,0 +1,233 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/platform/assets/components/MediaAssetMoreMenu.vue b/src/platform/assets/components/MediaAssetMoreMenu.vue
new file mode 100644
index 0000000000..39e1b150b6
--- /dev/null
+++ b/src/platform/assets/components/MediaAssetMoreMenu.vue
@@ -0,0 +1,158 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/platform/assets/components/MediaAudioBottom.vue b/src/platform/assets/components/MediaAudioBottom.vue
new file mode 100644
index 0000000000..9b9e103fa1
--- /dev/null
+++ b/src/platform/assets/components/MediaAudioBottom.vue
@@ -0,0 +1,30 @@
+
+
+
+ {{ fileName }}
+
+
+ {{ formatSize(asset.size) }}
+
+
+
+
+ {{
+ $t('Audio')
+ }}
+
+
+
+
+ {{ fileName }}
+
+
+ {{ asset.dimensions?.width }}x{{ asset.dimensions?.height }}
+
+
+
+ {{ fileName }}
+
+
+ {{ asset.dimensions?.width }}x{{ asset.dimensions?.height }}
+
+
+
+
+
+
+
diff --git a/src/platform/assets/composables/useAssetBrowserDialog.ts b/src/platform/assets/composables/useAssetBrowserDialog.ts
index cfe8ad67ba..de0b4fc60d 100644
--- a/src/platform/assets/composables/useAssetBrowserDialog.ts
+++ b/src/platform/assets/composables/useAssetBrowserDialog.ts
@@ -2,7 +2,8 @@ import { t } from '@/i18n'
import AssetBrowserModal from '@/platform/assets/components/AssetBrowserModal.vue'
import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
import { assetService } from '@/platform/assets/services/assetService'
-import { type DialogComponentProps, useDialogStore } from '@/stores/dialogStore'
+import { useDialogStore } from '@/stores/dialogStore'
+import type { DialogComponentProps } from '@/stores/dialogStore'
interface ShowOptions {
/** ComfyUI node type for context (e.g., 'CheckpointLoaderSimple') */
diff --git a/src/platform/assets/composables/useAssetFilterOptions.ts b/src/platform/assets/composables/useAssetFilterOptions.ts
index 19e864af08..a71fadae26 100644
--- a/src/platform/assets/composables/useAssetFilterOptions.ts
+++ b/src/platform/assets/composables/useAssetFilterOptions.ts
@@ -1,5 +1,6 @@
import { uniqWith } from 'es-toolkit'
-import { type MaybeRefOrGetter, computed, toValue } from 'vue'
+import { computed, toValue } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
import type { SelectOption } from '@/components/input/types'
import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
diff --git a/src/platform/assets/composables/useMediaAssetActions.ts b/src/platform/assets/composables/useMediaAssetActions.ts
new file mode 100644
index 0000000000..50be365ae6
--- /dev/null
+++ b/src/platform/assets/composables/useMediaAssetActions.ts
@@ -0,0 +1,62 @@
+/* eslint-disable no-console */
+import type { AssetMeta } from '../schemas/mediaAssetSchema'
+
+export function useMediaAssetActions() {
+ const selectAsset = (asset: AssetMeta) => {
+ console.log('Asset selected:', asset)
+ }
+
+ const viewAsset = (assetId: string) => {
+ console.log('Viewing asset:', assetId)
+ }
+
+ const downloadAsset = (assetId: string) => {
+ console.log('Downloading asset:', assetId)
+ }
+
+ const deleteAsset = (assetId: string) => {
+ console.log('Deleting asset:', assetId)
+ }
+
+ const playAsset = (assetId: string) => {
+ console.log('Playing asset:', assetId)
+ }
+
+ const copyAssetUrl = (assetId: string) => {
+ console.log('Copy asset URL:', assetId)
+ }
+
+ const copyJobId = (jobId: string) => {
+ console.log('Copy job ID:', jobId)
+ }
+
+ const addWorkflow = (assetId: string) => {
+ console.log('Adding asset to workflow:', assetId)
+ }
+
+ const openWorkflow = (assetId: string) => {
+ console.log('Opening workflow for asset:', assetId)
+ }
+
+ const exportWorkflow = (assetId: string) => {
+ console.log('Exporting workflow for asset:', assetId)
+ }
+
+ const openMoreOutputs = (assetId: string) => {
+ console.log('Opening more outputs for asset:', assetId)
+ }
+
+ return {
+ selectAsset,
+ viewAsset,
+ downloadAsset,
+ deleteAsset,
+ playAsset,
+ copyAssetUrl,
+ copyJobId,
+ addWorkflow,
+ openWorkflow,
+ exportWorkflow,
+ openMoreOutputs
+ }
+}
diff --git a/src/platform/assets/schemas/mediaAssetSchema.ts b/src/platform/assets/schemas/mediaAssetSchema.ts
new file mode 100644
index 0000000000..d35dad6c59
--- /dev/null
+++ b/src/platform/assets/schemas/mediaAssetSchema.ts
@@ -0,0 +1,46 @@
+import type { InjectionKey, Ref } from 'vue'
+import { z } from 'zod'
+
+import { assetItemSchema } from './assetSchema'
+
+const zMediaKindSchema = z.enum(['video', 'audio', 'image', '3D'])
+export type MediaKind = z.infer
+
+const zDimensionsSchema = z.object({
+ width: z.number().positive(),
+ height: z.number().positive()
+})
+
+// Extend the base asset schema with media-specific fields
+const zMediaAssetDisplayItemSchema = assetItemSchema.extend({
+ // New required fields
+ kind: zMediaKindSchema,
+ src: z.string().url(),
+
+ // New optional fields
+ duration: z.number().nonnegative().optional(),
+ dimensions: zDimensionsSchema.optional(),
+ jobId: z.string().optional(),
+ isMulti: z.boolean().optional()
+})
+
+// Asset context schema
+const zAssetContextSchema = z.object({
+ type: z.enum(['input', 'output']),
+ outputCount: z.number().positive().optional() // Only for output context
+})
+
+// Export the inferred types
+export type AssetMeta = z.infer
+export type AssetContext = z.infer
+
+// Injection key for MediaAsset provide/inject pattern
+interface MediaAssetProviderValue {
+ asset: Ref
+ context: Ref
+ isVideoPlaying: Ref
+ showVideoControls: Ref
+}
+
+export const MediaAssetKey: InjectionKey =
+ Symbol('mediaAsset')
diff --git a/src/platform/assets/services/assetService.ts b/src/platform/assets/services/assetService.ts
index 1939e10b65..613e244a9b 100644
--- a/src/platform/assets/services/assetService.ts
+++ b/src/platform/assets/services/assetService.ts
@@ -1,11 +1,11 @@
import { fromZodError } from 'zod-validation-error'
-import {
- type AssetItem,
- type AssetResponse,
- type ModelFile,
- type ModelFolder,
- assetResponseSchema
+import { assetResponseSchema } from '@/platform/assets/schemas/assetSchema'
+import type {
+ AssetItem,
+ AssetResponse,
+ ModelFile,
+ ModelFolder
} from '@/platform/assets/schemas/assetSchema'
import { api } from '@/scripts/api'
import { useModelToNodeStore } from '@/stores/modelToNodeStore'
diff --git a/src/platform/assets/utils/createModelNodeFromAsset.ts b/src/platform/assets/utils/createModelNodeFromAsset.ts
index 8440f0b9da..bc9869739d 100644
--- a/src/platform/assets/utils/createModelNodeFromAsset.ts
+++ b/src/platform/assets/utils/createModelNodeFromAsset.ts
@@ -1,12 +1,7 @@
-import {
- type LGraphNode,
- LiteGraph,
- type Point
-} from '@/lib/litegraph/src/litegraph'
-import {
- type AssetItem,
- assetItemSchema
-} from '@/platform/assets/schemas/assetSchema'
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
+import type { LGraphNode, Point } from '@/lib/litegraph/src/litegraph'
+import { assetItemSchema } from '@/platform/assets/schemas/assetSchema'
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
import {
MISSING_TAG,
MODELS_TAG
diff --git a/src/platform/distribution/types.ts b/src/platform/distribution/types.ts
new file mode 100644
index 0000000000..8da7109736
--- /dev/null
+++ b/src/platform/distribution/types.ts
@@ -0,0 +1,18 @@
+/**
+ * Distribution types and compile-time constants for managing
+ * multi-distribution builds (Desktop, Localhost, Cloud)
+ */
+
+type Distribution = 'desktop' | 'localhost' | 'cloud'
+
+declare global {
+ const __DISTRIBUTION__: Distribution
+}
+
+/** Current distribution - replaced at compile time */
+const DISTRIBUTION: Distribution = __DISTRIBUTION__
+
+/** Distribution type checks */
+// const isDesktop = DISTRIBUTION === 'desktop'
+// const isLocalhost = DISTRIBUTION === 'localhost'
+export const isCloud = DISTRIBUTION === 'cloud'
diff --git a/src/platform/settings/components/SettingDialogContent.vue b/src/platform/settings/components/SettingDialogContent.vue
index d5a8298d95..90a1f2f654 100644
--- a/src/platform/settings/components/SettingDialogContent.vue
+++ b/src/platform/settings/components/SettingDialogContent.vue
@@ -1,9 +1,9 @@
-