evomeme 0.1.9 → 0.1.10-beta.13

package/dist/canvas-public/inspector/media-inspector.js

@@ -0,0 +1,517 @@
+import { t } from '../language/index.js'
+import { state } from '../core/state.js'
+import { normalizeFramePreviewConfig, normalizeScrollPreviewConfig } from '../elements/image.js'
+import { appendKv, createInspectorBlock, el } from './controls.js'
+
+export function createMediaInspector(context) {
+  const {
+    createFramePreviewParameterModule,
+    createScrollPreviewParameterModule,
+    formatGenRefList,
+    formatGenTime,
+    formatOriginTime,
+    formatPerfectPixelSourceArea,
+    imageName,
+    imageSourceLabel,
+    imageUrl,
+    normalizeGenMeta,
+    originParentLabel,
+    renderInspector,
+    resolveItemOrigin,
+  } = context
+
+  function resolveTosUrl(item) {
+    const value =
+      item?.provenance?.assetUrl ||
+      item?.assetUrl ||
+      item?.asset_url ||
+      item?.tosUrl ||
+      item?.tos_url
+    return typeof value === 'string' && /^https?:\/\//i.test(value) ? value : ''
+  }
+  
+  function tosLink(item) {
+    const url = resolveTosUrl(item)
+    if (!url) return null
+    const link = el('a', 'insp-tos-link', url)
+    link.href = url
+    link.target = '_blank'
+    link.rel = 'noopener noreferrer'
+    return link
+  }
+  
+  function appendOriginSection(section, item) {
+    if (!item) return
+    section.appendChild(el('div', 'insp-label', t("inspector.mediaInspector.text001")))
+  
+    const provenance = item.provenance
+    if (provenance && typeof provenance === 'object') {
+      const metadata = provenance.metadata
+      const sourceLabel =
+        ({
+          smart_split: t("inspector.mediaInspector.text002"),
+          manual_split: t("inspector.mediaInspector.text003"),
+        }[provenance.operation] ||
+          {
+              existing: t("inspector.mediaInspector.text004"),
+              generated: t("inspector.mediaInspector.text005"),
+              edited: t("inspector.mediaInspector.text006"),
+              copied: t("inspector.mediaInspector.text007"),
+              uploaded: t("inspector.mediaInspector.text008"),
+          }[provenance.source] || provenance.source || t("inspector.mediaInspector.text009"))
+      appendKv(section, [
+        [t("inspector.mediaInspector.text010"), sourceLabel],
+        [t("inspector.mediaInspector.text011"), provenance.assetId || item.id],
+        ...(provenance.jobId ? [[t("inspector.mediaInspector.text012"), provenance.jobId]] : []),
+        ...(provenance.imageModel ? [[t("inspector.mediaInspector.text013"), provenance.imageModel]] : []),
+        ...(provenance.size ? [[t("inspector.mediaInspector.text014"), provenance.size]] : []),
+        ...(provenance.operation === 'perfect_pixel' && metadata && typeof metadata === 'object'
+          ? [
+              [t("inspector.mediaInspector.text015"), metadata.autoGrid === true ? t("inspector.mediaInspector.text016") : t("inspector.mediaInspector.text017")],
+              [
+                t("inspector.mediaInspector.text018"),
+                formatPerfectPixelSourceArea(
+                  metadata.pixelSizeX ?? metadata.pixelSize,
+                  metadata.pixelSizeY ?? metadata.pixelSize,
+                ),
+              ],
+              [t("inspector.mediaInspector.text019"), `${metadata.gridWidth || '—'}×${metadata.gridHeight || '—'}`],
+            ]
+          : []),
+        ...(Array.isArray(provenance.parents) && provenance.parents.length
+          ? [[
+              t("inspector.mediaInspector.text020"),
+              provenance.parents
+                .map((parent) => parent.assetId || parent.url || t("inspector.mediaInspector.text009"))
+                .join('\n'),
+            ]]
+          : []),
+      ])
+      if (provenance.prompt) {
+        const promptBox = el('div', 'insp-prompt')
+        promptBox.textContent = provenance.prompt
+        section.appendChild(promptBox)
+      }
+      return
+    }
+  
+    const origin = resolveItemOrigin(item)
+    if (origin?.kind === 'video_cycle') {
+      const rows = [
+        [t("inspector.mediaInspector.text010"), t("inspector.mediaInspector.text021")],
+        [t("inspector.mediaInspector.text022"), originParentLabel(origin)],
+        [t("inspector.mediaInspector.text023"), formatOriginTime(origin.start)],
+        [t("inspector.mediaInspector.text024"), formatOriginTime(origin.end)],
+      ]
+      if (origin.score != null) rows.push([t("inspector.mediaInspector.text025"), `${(origin.score * 100).toFixed(2)}%`])
+      if (origin.threshold != null) {
+        rows.push([t("inspector.mediaInspector.text026"), `${(origin.threshold * 100).toFixed(1)}%`])
+      }
+      appendKv(section, rows)
+      return
+    }
+    if (origin?.kind === 'smart_split') {
+      appendKv(section, [
+        [t("inspector.mediaInspector.text010"), t("inspector.mediaInspector.text002")],
+        [t("inspector.mediaInspector.text027"), originParentLabel(origin)],
+        [t("inspector.mediaInspector.text028"), `${origin.resultIndex + 1} / ${origin.resultCount || 1}`],
+      ])
+      return
+    }
+  
+    const gen = normalizeGenMeta(item.gen)
+    if (gen && (gen.prompt || gen.model)) {
+      appendKv(section, [
+        [t("inspector.mediaInspector.text010"), gen.kind === 'video' ? t("inspector.mediaInspector.text029") : t("inspector.mediaInspector.text005")],
+      ])
+      if (gen.prompt) {
+        const promptBox = el('div', 'insp-prompt')
+        promptBox.textContent = gen.prompt
+        section.appendChild(promptBox)
+      }
+      const rows = []
+      if (gen.model) rows.push([t("inspector.mediaInspector.text013"), gen.model])
+      if (gen.kind === 'video') {
+        if (gen.ratio) rows.push([t("inspector.mediaInspector.text030"), gen.ratio])
+        if (gen.resolution) rows.push([t("inspector.mediaInspector.text031"), gen.resolution])
+        if (gen.duration != null) {
+          rows.push([t("inspector.mediaInspector.text032"), Number(gen.duration) === -1 ? t("inspector.mediaInspector.text033") : `${gen.duration}s`])
+        }
+        rows.push([t("inspector.mediaInspector.text034"), gen.generateAudio ? t("inspector.mediaInspector.text035") : t("inspector.mediaInspector.text036")])
+      if (gen.seed != null && gen.seed !== '') rows.push([t('common.seed'), String(gen.seed)])
+      } else if (gen.size) {
+        rows.push([t("inspector.mediaInspector.text014"), gen.size])
+      }
+      rows.push([t("inspector.mediaInspector.text037"), formatGenRefList(gen.references)])
+      if (gen.createdAt) rows.push([t("inspector.mediaInspector.text038"), formatGenTime(gen.createdAt)])
+      appendKv(section, rows)
+      return
+    }
+  
+    appendKv(section, [[t("inspector.mediaInspector.text010"), imageSourceLabel(item.id)]])
+  }
+  
+  function mediaFileType(id) {
+    const filename = imageName(id)
+    const match = String(filename || id).match(/\.([^.?#/]+)(?:[?#].*)?$/)
+    if (!match) return t("inspector.mediaInspector.text009")
+    const extension = match[1].toLowerCase()
+    return ({
+      jpg: 'JPEG', jpeg: 'JPEG', png: 'PNG', webp: 'WebP', gif: 'GIF',
+      bmp: 'BMP', avif: 'AVIF', svg: 'SVG', mp4: 'MP4', webm: 'WebM',
+      mov: 'MOV', m4v: 'M4V',
+    })[extension] || extension.toUpperCase()
+  }
+  
+  function formatSourceAssets(values) {
+    const ids = (Array.isArray(values) ? values : [])
+      .map((value) => typeof value === 'string' ? value : value?.assetId || value?.id || value?.url)
+      .filter(Boolean)
+    if (!ids.length) return ''
+    return ids.map((id) => imageName(id) || id).join('\n')
+  }
+  
+  function sourceBoolean(value) {
+    return value === true ? t("inspector.mediaInspector.text035") : value === false ? t("inspector.mediaInspector.text036") : ''
+  }
+  
+  function imageSourceFeature(item) {
+    const provenance = item?.provenance
+    const metadata = provenance?.metadata && typeof provenance.metadata === 'object'
+      ? provenance.metadata
+      : {}
+    if (metadata.pipeline === 'game_ui_components') return t("inspector.mediaInspector.text039")
+    if (metadata.pipeline === 'seamless_tile') return t("inspector.mediaInspector.text040")
+    if (metadata.pipeline === 'scroll_image') return t("features.generation.scrollImage.title")
+    if (metadata.pipeline === 'scroll_seam_elimination') return t("features.editing.scrollSeamElimination.title")
+    if (metadata.pipeline === 'tile_transition_atlas') return t("inspector.mediaInspector.text041")
+    if (metadata.pipeline === 'seam_elimination') return t("inspector.mediaInspector.text042")
+    if (provenance?.operation === 'generate_game_image' && metadata.interactiveEdit === true) {
+      return t("inspector.mediaInspector.text043")
+    }
+    const operationLabels = {
+      generate_game_image: t("inspector.mediaInspector.text044"),
+      generate_game_video: t("inspector.mediaInspector.text045"),
+      generate_game_ui_components: t("inspector.mediaInspector.text039"),
+      generate_character_four_view: t("inspector.mediaInspector.text046"),
+      generate_character_eight_direction: t("inspector.mediaInspector.text047"),
+      decompose_image_layers: t("inspector.mediaInspector.text048"),
+      cutout_game_image: t("inspector.mediaInspector.text049"),
+      smart_split: t("inspector.mediaInspector.text002"),
+      manual_split: t("inspector.mediaInspector.text003"),
+      video_frame_extract: t("inspector.mediaInspector.text050"),
+      frame_sheet_edit: t("inspector.mediaInspector.text051"),
+      color_key: t("inspector.mediaInspector.text052"),
+      perfect_pixel: t("inspector.mediaInspector.text053"),
+      image_canvas_resize: t("inspector.mediaInspector.text054"),
+      interactive_edit: t("inspector.mediaInspector.text043"),
+      copy: t("inspector.mediaInspector.text055"),
+      upload: t("inspector.mediaInspector.text008"),
+      video_frame: t("inspector.mediaInspector.text056"),
+      video_cycle: t("inspector.mediaInspector.text057"),
+      tile_transition_atlas: t("inspector.mediaInspector.text041"),
+    }
+    if (provenance?.operation && operationLabels[provenance.operation]) {
+      return operationLabels[provenance.operation]
+    }
+    const sourceLabels = {
+      existing: t("inspector.mediaInspector.text058"), generated: t("inspector.mediaInspector.text044"), edited: t("inspector.mediaInspector.text006"),
+      copied: t("inspector.mediaInspector.text055"), uploaded: t("inspector.mediaInspector.text008"),
+    }
+    if (provenance?.source && sourceLabels[provenance.source]) return sourceLabels[provenance.source]
+    const origin = resolveItemOrigin(item)
+    if (origin?.kind === 'smart_split') return t("inspector.mediaInspector.text002")
+    const gen = normalizeGenMeta(item?.gen)
+    if (gen?.kind === 'image') return t("inspector.mediaInspector.text044")
+    return imageSourceLabel(item?.id)
+  }
+  
+  function imageSourceInput(item) {
+    const provenance = item?.provenance
+    const metadata = provenance?.metadata && typeof provenance.metadata === 'object'
+      ? provenance.metadata
+      : {}
+    const gen = normalizeGenMeta(item?.gen)
+    const operation = String(provenance?.operation || '')
+    const rows = []
+    const add = (label, value) => {
+      if (value !== undefined && value !== null && value !== '') rows.push([label, String(value)])
+    }
+    const pipelineUi = metadata.pipeline === 'game_ui_components'
+    const metadataReferences = formatSourceAssets(metadata.referenceIds)
+    const parentReferences = formatSourceAssets(provenance?.parents)
+    const genReferences = gen ? formatGenRefList(gen.references) : ''
+    const references = metadataReferences || parentReferences || (genReferences === '无' ? '' : genReferences)
+    const prompt = String(
+      provenance?.prompt || gen?.prompt || metadata.userPrompt || '',
+    ).trim()
+  
+    if (pipelineUi) {
+      add(t("inspector.mediaInspector.text059"), references)
+      add(t("inspector.mediaInspector.text013"), metadata.imageModel || provenance?.imageModel || gen?.model)
+      add(t("inspector.mediaInspector.text060"), metadata.size || provenance?.size || gen?.size)
+      add(t("inspector.mediaInspector.text061"), metadata.transparentBackground === true ? t("inspector.mediaInspector.text062") : metadata.backgroundColor)
+      add(t("inspector.mediaInspector.text063"), sourceBoolean(metadata.autoSplit))
+      return { prompt, rows }
+    }
+  
+    if (metadata.pipeline === 'seamless_tile') {
+      add(t("inspector.mediaInspector.text064"), sourceBoolean(metadata.seamEliminationEnabled))
+      add(t("inspector.mediaInspector.text013"), provenance?.imageModel || gen?.model)
+      add(t("inspector.mediaInspector.text060"), provenance?.size || gen?.size)
+      return { prompt, rows }
+    }
+
+    if (metadata.pipeline === 'scroll_image') {
+      add(t("inspector.mediaInspector.text013"), provenance?.imageModel || gen?.model)
+      add(t("inspector.mediaInspector.text060"), provenance?.size || gen?.size)
+      return { prompt, rows }
+    }
+  
+    if (metadata.pipeline === 'tile_transition_atlas') {
+      add(t("inspector.mediaInspector.text065"), formatSourceAssets([metadata.terrainZeroAssetId]))
+      add(t("inspector.mediaInspector.text066"), formatSourceAssets([metadata.terrainOneAssetId]))
+      add(t("inspector.mediaInspector.text067"), metadata.tileSize ? `${metadata.tileSize} × ${metadata.tileSize}` : '')
+      add(t("inspector.mediaInspector.text013"), metadata.imageModel || provenance?.imageModel)
+      return { prompt, rows }
+    }
+  
+    if (metadata.pipeline === 'seam_elimination') {
+      add(t("inspector.mediaInspector.text068"), references)
+      return { prompt: '', rows }
+    }
+  
+    if (references) {
+      add(
+        ['generate_game_image', 'generate_character_four_view', 'generate_character_eight_direction', 'decompose_image_layers'].includes(operation)
+          ? t("inspector.mediaInspector.text059")
+          : operation === 'video_frame_extract' ? t("inspector.mediaInspector.text069") : t("inspector.mediaInspector.text068"),
+        references,
+      )
+    }
+  
+    if (
+      ['generate_game_image', 'generate_game_ui_components', 'generate_character_four_view',
+        'generate_character_eight_direction', 'decompose_image_layers'].includes(operation) || gen
+    ) {
+      add(t("inspector.mediaInspector.text013"), provenance?.imageModel || gen?.model)
+      add(t("inspector.mediaInspector.text060"), provenance?.size || gen?.size)
+    }
+  
+    if (operation === 'generate_game_image') {
+      const background = metadata.background || (metadata.interactiveEdit === true ? '' : 'auto')
+      add(t("inspector.mediaInspector.text061"), ({ auto: t("inspector.mediaInspector.text033"), transparent: t("inspector.mediaInspector.text062"), opaque: t("inspector.mediaInspector.text070") })[background] || background)
+    } else if (operation === 'generate_character_four_view' || operation === 'generate_character_eight_direction') {
+      add(t("inspector.mediaInspector.text061"), metadata.transparentBackground === true ? t("inspector.mediaInspector.text062") : metadata.backgroundColor)
+    } else if (operation === 'smart_split') {
+      add(t("inspector.mediaInspector.text071"), sourceBoolean(metadata.padToSameSize))
+      if (metadata.padToSameSize !== false) {
+        add(t("inspector.mediaInspector.text072"), {
+          center: t("inspector.mediaInspector.text073"), top: t("inspector.mediaInspector.text074"), bottom: t("inspector.mediaInspector.text075"), left: t("inspector.mediaInspector.text076"), right: t("inspector.mediaInspector.text077"),
+          'top-left': t("inspector.mediaInspector.text078"), 'top-right': t("inspector.mediaInspector.text079"), 'bottom-left': t("inspector.mediaInspector.text080"), 'bottom-right': t("inspector.mediaInspector.text081"),
+        }[metadata.anchor] || metadata.anchor)
+      }
+    } else if (operation === 'manual_split') {
+      if (metadata.rows && metadata.columns) add(t("inspector.mediaInspector.text082"), `${metadata.rows} × ${metadata.columns}`)
+    } else if (operation === 'video_frame_extract') {
+      add(t('common.framesPerSecond'), metadata.fps)
+      add(t("inspector.mediaInspector.text083"), metadata.frameCount)
+    } else if (operation === 'frame_sheet_edit') {
+      if (metadata.sourceRows && metadata.sourceColumns) {
+        add(t("inspector.mediaInspector.text084"), `${metadata.sourceRows} × ${metadata.sourceColumns}`)
+      }
+      if (metadata.rows && metadata.columns) add(t("inspector.mediaInspector.text085"), `${metadata.rows} × ${metadata.columns}`)
+      add(t("inspector.mediaInspector.text086"), metadata.frameCount)
+      add(t('common.framesPerSecond'), metadata.fps)
+    } else if (operation === 'color_key') {
+      add(t("inspector.mediaInspector.text087"), metadata.color)
+      add(t("inspector.mediaInspector.text088"), metadata.strength)
+    } else if (operation === 'perfect_pixel') {
+      add(t("inspector.mediaInspector.text015"), metadata.autoGrid === true ? t("inspector.mediaInspector.text016") : t("inspector.mediaInspector.text017"))
+      add(t("inspector.mediaInspector.text089"), formatPerfectPixelSourceArea(
+        metadata.pixelSizeX ?? metadata.pixelSize,
+        metadata.pixelSizeY ?? metadata.pixelSize,
+      ))
+      add(t("inspector.mediaInspector.text090"), {
+        majority: t("inspector.mediaInspector.text091"), median: t("inspector.mediaInspector.text092"), center: t("inspector.mediaInspector.text093"),
+      }[metadata.sampleMethod] || metadata.sampleMethod)
+      add(t("inspector.mediaInspector.text094"), metadata.exportScale ? `${metadata.exportScale}×` : '')
+      add(t("inspector.mediaInspector.text095"), metadata.alphaMode === 'hard'
+        ? `${t("inspector.mediaInspector.text096")}${metadata.alphaThreshold ?? '—'}${t("inspector.mediaInspector.text096.part1")}`
+        : metadata.alphaMode === 'preserve' ? t("inspector.mediaInspector.text097") : '')
+    } else if (operation === 'image_canvas_resize') {
+      if (metadata.sourceWidth && metadata.sourceHeight) {
+        add(t("inspector.mediaInspector.text098"), `${metadata.sourceWidth} × ${metadata.sourceHeight}`)
+      }
+      if (metadata.width && metadata.height) {
+        add(t("inspector.mediaInspector.text099"), `${metadata.width} × ${metadata.height}`)
+      }
+      add(t("inspector.mediaInspector.text100"), `${Number(metadata.left) >= 0 ? '+' : ''}${metadata.left} px`)
+      add(t("inspector.mediaInspector.text101"), `${Number(metadata.top) >= 0 ? '+' : ''}${metadata.top} px`)
+      add(t("inspector.mediaInspector.text102"), `${Number(metadata.right) >= 0 ? '+' : ''}${metadata.right} px`)
+      add(t("inspector.mediaInspector.text103"), `${Number(metadata.bottom) >= 0 ? '+' : ''}${metadata.bottom} px`)
+    }
+  
+    const origin = resolveItemOrigin(item)
+    if (!provenance && origin?.kind === 'smart_split') {
+      add(t("inspector.mediaInspector.text068"), originParentLabel(origin))
+    }
+    return { prompt, rows }
+  }
+  
+  function appendImageSourceBlock(container, item) {
+    const block = createInspectorBlock(t("inspector.mediaInspector.text001"))
+    appendKv(block, [[t("inspector.mediaInspector.text104"), imageSourceFeature(item)]])
+    const input = imageSourceInput(item)
+    if (input.prompt) {
+      block.appendChild(el('div', 'insp-input-label', t("inspector.mediaInspector.text105")))
+      const promptBox = el('div', 'insp-prompt')
+      promptBox.textContent = input.prompt
+      block.appendChild(promptBox)
+    }
+    if (input.rows.length) appendKv(block, input.rows)
+    container.appendChild(block)
+  }
+  
+  function appendImageEditBlock(container, item) {
+    const frameConfig = normalizeFramePreviewConfig(item?.framePreview)
+    const scrollConfig = normalizeScrollPreviewConfig(item?.scrollPreview)
+    if (!frameConfig && !scrollConfig) return false
+    const block = createInspectorBlock(t("inspector.mediaInspector.text106"))
+    if (frameConfig) block.appendChild(createFramePreviewParameterModule(item, frameConfig))
+    if (scrollConfig) block.appendChild(createScrollPreviewParameterModule(item, scrollConfig))
+    container.appendChild(block)
+    return true
+  }
+  
+  function ensureVideoMeta(id) {
+    if (!id || state.videoMeta[id]) return
+    state.videoMeta[id] = { loading: true }
+    const video = document.createElement('video')
+    video.preload = 'metadata'
+    video.onloadedmetadata = () => {
+      state.videoMeta[id] = {
+        w: video.videoWidth,
+        h: video.videoHeight,
+        duration: Number.isFinite(video.duration) ? video.duration : 0,
+      }
+      video.removeAttribute('src')
+      video.load()
+      if (state.selectedIds.has(id)) renderInspector()
+    }
+    video.onerror = () => {
+      state.videoMeta[id] = { w: 0, h: 0, duration: 0 }
+      if (state.selectedIds.has(id)) renderInspector()
+    }
+    video.src = imageUrl(id)
+  }
+  
+  function formatVideoDuration(id) {
+    const metadata = state.videoMeta[id]
+    if (!metadata || metadata.loading) return t("inspector.mediaInspector.text107")
+    const duration = Number(metadata.duration)
+    if (!Number.isFinite(duration) || duration <= 0) return t("inspector.mediaInspector.text009")
+    const totalSeconds = Math.round(duration)
+    const hours = Math.floor(totalSeconds / 3600)
+    const minutes = Math.floor((totalSeconds % 3600) / 60)
+    const seconds = totalSeconds % 60
+    if (hours) return `${hours}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
+    return `${minutes}:${String(seconds).padStart(2, '0')}`
+  }
+  
+  function videoResolutionTier(width, height) {
+    const shortSide = Math.min(Number(width) || 0, Number(height) || 0)
+    if (shortSide >= 2160) return '4K'
+    if (shortSide >= 1440) return '1440p'
+    if (shortSide >= 1080) return '1080p'
+    if (shortSide >= 720) return '720p'
+    if (shortSide >= 480) return '480p'
+    if (shortSide > 0) return `${shortSide}p`
+    return ''
+  }
+  
+  function formatVideoResolution(id, item) {
+    const metadata = state.videoMeta[id]
+    if (!metadata || metadata.loading) return t("inspector.mediaInspector.text107")
+    if (metadata.w && metadata.h) {
+      const tier = videoResolutionTier(metadata.w, metadata.h)
+      return `${metadata.w} × ${metadata.h}${tier ? ` · ${tier}` : ''}`
+    }
+    const gen = normalizeGenMeta(item?.gen)
+    return gen?.resolution || item?.provenance?.metadata?.resolution || t("inspector.mediaInspector.text009")
+  }
+  
+  function videoSourceFeature(item) {
+    const operation = item?.provenance?.operation
+    if (operation === 'generate_game_video') return t("inspector.mediaInspector.text045")
+    if (operation === 'video_cycle') return t("inspector.mediaInspector.text057")
+    if (operation === 'copy') return t("inspector.mediaInspector.text108")
+    if (operation === 'upload') return t("inspector.mediaInspector.text008")
+    const sourceLabels = {
+      existing: t("inspector.mediaInspector.text058"), generated: t("inspector.mediaInspector.text045"), edited: t("inspector.mediaInspector.text109"),
+      copied: t("inspector.mediaInspector.text108"), uploaded: t("inspector.mediaInspector.text008"),
+    }
+    if (item?.provenance?.source && sourceLabels[item.provenance.source]) {
+      return sourceLabels[item.provenance.source]
+    }
+    return normalizeGenMeta(item?.gen)?.kind === 'video' ? t("inspector.mediaInspector.text045") : imageSourceLabel(item?.id)
+  }
+  
+  function videoSourceInput(item) {
+    const provenance = item?.provenance
+    const metadata = provenance?.metadata && typeof provenance.metadata === 'object'
+      ? provenance.metadata
+      : {}
+    const gen = normalizeGenMeta(item?.gen)
+    const rows = []
+    const add = (label, value) => {
+      if (value !== undefined && value !== null && value !== '') rows.push([label, String(value)])
+    }
+    const genReferences = gen ? formatGenRefList(gen.references) : ''
+    const references = formatSourceAssets(provenance?.parents) || (genReferences === '无' ? '' : genReferences)
+    const prompt = String(provenance?.prompt || gen?.prompt || '').trim()
+  
+    if (provenance?.operation === 'generate_game_video' || gen?.kind === 'video') {
+      add(t("inspector.mediaInspector.text110"), references)
+      add(t("inspector.mediaInspector.text013"), provenance?.imageModel || gen?.model)
+      add(t("inspector.mediaInspector.text030"), metadata.ratio || gen?.ratio)
+      const duration = metadata.duration ?? gen?.duration
+      add(t("inspector.mediaInspector.text111"), duration == null ? '' : Number(duration) === -1 ? t("inspector.mediaInspector.text033") : `${duration}s`)
+      add(t("inspector.mediaInspector.text112"), metadata.resolution || gen?.resolution)
+      add(t("inspector.mediaInspector.text034"), sourceBoolean(metadata.generateAudio ?? gen?.generateAudio))
+      add(t('common.seed'), metadata.seed ?? gen?.seed)
+    } else if (provenance?.operation === 'video_cycle') {
+      add(t("inspector.mediaInspector.text069"), references)
+      add(t("inspector.mediaInspector.text113"), metadata.threshold)
+      add(t("inspector.mediaInspector.text114"), metadata.minGapSec != null ? `${metadata.minGapSec}s` : '')
+    } else {
+      add(t("inspector.mediaInspector.text069"), references)
+    }
+    return { prompt, rows }
+  }
+  
+  function appendVideoSourceBlock(container, item) {
+    const block = createInspectorBlock(t("inspector.mediaInspector.text001"), { collapseKey: t("inspector.mediaInspector.text115") })
+    appendKv(block, [[t("inspector.mediaInspector.text104"), videoSourceFeature(item)]])
+    const input = videoSourceInput(item)
+    if (input.prompt) {
+      block.appendChild(el('div', 'insp-input-label', t("inspector.mediaInspector.text105")))
+      const promptBox = el('div', 'insp-prompt')
+      promptBox.textContent = input.prompt
+      block.appendChild(promptBox)
+    }
+    if (input.rows.length) appendKv(block, input.rows)
+    container.appendChild(block)
+  }
+
+  return {
+    appendImageEditBlock,
+    appendImageSourceBlock,
+    appendVideoSourceBlock,
+    ensureVideoMeta,
+    formatVideoDuration,
+    formatVideoResolution,
+    imageSourceInput,
+    mediaFileType,
+  }
+}

package/dist/canvas-public/inspector/media-preview.js

@@ -0,0 +1,56 @@
+import { t } from '../language/index.js'
+import {
+  notifyFeatureState,
+  ensureFeatureState,
+  discardFeatureState,
+  serializeFeatureState,
+} from '../core/feature-state.js'
+import { mountFeatureForm } from '../ui/feature-form.js'
+import { createInspectorBlock } from './controls.js'
+
+export function createMediaPreviewParameterModule(
+  services,
+  { definition, apply, collapseKey },
+) {
+  return function createParameterModule(item, config) {
+    const module = createInspectorBlock(t(definition.title), {
+      collapseKey,
+      className: 'insp-param-module',
+    })
+    const input = {
+      transient: true,
+      id: `${definition.id}:${item.id}`,
+      type: 'feature_dialog',
+      featureId: definition.id,
+      parameters: config,
+    }
+    discardFeatureState(input)
+    ensureFeatureState(input, definition)
+    const dispose = mountFeatureForm(module, input, definition, {
+      ...services,
+      save: () => {},
+      reportError: (error) => {
+        ensureFeatureState(input).messages.push({ error: String(error?.message || error) })
+        notifyFeatureState(input.id)
+      },
+      submit: async () => {
+        const params = ensureFeatureState(input)
+        if (params.busy) return
+        params.busy = true
+        notifyFeatureState(input.id)
+        try {
+          await apply(item, serializeFeatureState(input), services)
+          services.renderChrome()
+        } finally {
+          params.busy = false
+          notifyFeatureState(input.id)
+        }
+      },
+    })
+    module.querySelector('[data-feature-form]')._disposeFeatureForm = () => {
+      dispose()
+      discardFeatureState(input)
+    }
+    return module
+  }
+}

package/dist/canvas-public/inspector/number-stepper.js

@@ -0,0 +1,96 @@
+import { t } from '../language/index.js'
+const NUMBER_INPUT_SELECTOR = 'input[type="number"]:not([data-unified-stepper])'
+
+function decimalPlaces(value) {
+  const text = String(value || '')
+  if (/e-/i.test(text)) return Math.max(0, Number(text.split(/e-/i)[1]) || 0)
+  return (text.split('.')[1] || '').length
+}
+
+function fallbackStep(input, direction) {
+  const current = Number(input.value)
+  const minimum = input.min === '' ? -Infinity : Number(input.min)
+  const maximum = input.max === '' ? Infinity : Number(input.max)
+  const rawStep = Number(input.step)
+  const step = Number.isFinite(rawStep) && rawStep > 0 ? rawStep : 1
+  const base = Number.isFinite(current) ? current : Number.isFinite(minimum) ? minimum : 0
+  let next = base + direction * step
+  // Inputs such as FPS use a tiny positive minimum only to reject zero. Moving
+  // up from that boundary should produce a useful whole step, not 1.000001.
+  if (direction > 0 && base === minimum && minimum > 0 && minimum < step) next = step
+  next = Math.min(maximum, Math.max(minimum, next))
+  const precision = Math.min(12, Math.max(decimalPlaces(step), decimalPlaces(base)))
+  input.value = String(Number(next.toFixed(precision)))
+}
+
+function changeNumber(input, direction) {
+  if (input.disabled || input.readOnly) return
+  try {
+    if (direction > 0) input.stepUp()
+    else input.stepDown()
+  } catch {
+    fallbackStep(input, direction)
+  }
+  input.dispatchEvent(new Event('input', { bubbles: true }))
+  input.dispatchEvent(new Event('change', { bubbles: true }))
+  input.focus({ preventScroll: true })
+}
+
+function stepButton(input, direction) {
+  const label = input.getAttribute('aria-label') || t("inspector.numberStepper.text001")
+  const button = document.createElement('button')
+  button.type = 'button'
+  button.className = `ui-number-stepper-button is-${direction > 0 ? 'up' : 'down'}`
+  button.tabIndex = -1
+  button.setAttribute('aria-label', `${direction > 0 ? t("inspector.numberStepper.text002") : t("inspector.numberStepper.text003")}${label}`)
+  button.innerHTML = direction > 0
+    ? '<svg viewBox="0 0 12 8" aria-hidden="true"><path d="m2 6 4-4 4 4"/></svg>'
+    : '<svg viewBox="0 0 12 8" aria-hidden="true"><path d="m2 2 4 4 4-4"/></svg>'
+  button.addEventListener('pointerdown', (event) => event.stopPropagation())
+  button.addEventListener('click', (event) => {
+    event.preventDefault()
+    event.stopPropagation()
+    changeNumber(input, direction)
+  })
+  return button
+}
+
+function enhanceNumberInput(input) {
+  if (!(input instanceof HTMLInputElement) || input.dataset.unifiedStepper) return
+  input.dataset.unifiedStepper = 'true'
+  const parent = input.parentNode
+  if (!parent) return
+
+  const rect = input.getBoundingClientRect()
+  const parentWidth = input.parentElement?.getBoundingClientRect().width || 0
+  const computedWidth = Number.parseFloat(getComputedStyle(input).width)
+  const fluid = parentWidth > 0 && rect.width / parentWidth >= 0.8
+  const wrapper = document.createElement('span')
+  wrapper.className = 'ui-number-stepper'
+  if (fluid || (!rect.width && !computedWidth)) wrapper.classList.add('is-fluid')
+  else wrapper.style.width = `${rect.width || computedWidth}px`
+
+  parent.insertBefore(wrapper, input)
+  wrapper.append(input)
+  const controls = document.createElement('span')
+  controls.className = 'ui-number-stepper-controls'
+  controls.append(stepButton(input, 1), stepButton(input, -1))
+  wrapper.appendChild(controls)
+}
+
+function enhanceTree(root) {
+  if (root instanceof HTMLInputElement && root.matches(NUMBER_INPUT_SELECTOR)) enhanceNumberInput(root)
+  if (!(root instanceof Element || root instanceof Document)) return
+  for (const input of root.querySelectorAll(NUMBER_INPUT_SELECTOR)) enhanceNumberInput(input)
+}
+
+export function initUnifiedNumberSteppers() {
+  enhanceTree(document)
+  const observer = new MutationObserver((records) => {
+    for (const record of records) {
+      for (const node of record.addedNodes) enhanceTree(node)
+    }
+  })
+  observer.observe(document.documentElement, { childList: true, subtree: true })
+  return () => observer.disconnect()
+}