evomeme 0.1.9 → 0.1.10-beta.13

package/dist/canvas-public/features/editing/layer-decomposition.js

@@ -0,0 +1,45 @@
+import { errorT } from '../../language/index.js'
+import { t } from '../../language/index.js'
+export default {
+  render: (ui) => ui.prompt('prompt'),
+  menu: [{ group: 'image-split', accepts: ['image'] }],
+  id: 'layer-decomposition',
+  title: 'html.text059',
+  storage: 'parameters',
+  node: {
+    type: 'feature_dialog',
+    width: 320,
+    minWidth: 260,
+    minHeight: 180,
+    generationInput: true,
+    classNames: ['is-interactive-ui', 'is-gen-dialog'],
+  },
+  fields: [
+    {
+      path: 'prompt',
+      type: 'textarea',
+      default: '',
+      label: 'features.generation.scrollImage.promptLabel',
+      required: true,
+    },
+  ],
+  task(p, _services, item) {
+    return {
+      endpoint: '/api/generate',
+      wait: {
+        name: t('features.editing.interactiveImageEditing.text046'),
+        references: [item.sourceId],
+      },
+      body: {
+        prompt: p.prompt.trim(),
+        model: 'asset-pro',
+        reference_ids: [item.sourceId],
+        layer_decomposition: true,
+      },
+      checkResult(result) {
+        if (!result.images?.length)
+          throw new Error(errorT('features.editing.interactiveImageEditing.text047'))
+      },
+    }
+  },
+}

package/dist/canvas-public/features/editing/manual-split.js

@@ -0,0 +1,115 @@
+import { errorT } from '../../language/index.js'
+import { t } from '../../language/index.js'
+import { ensureFeatureState, subscribeFeatureState } from '../../core/feature-state.js'
+import { el } from '../../ui/controls.js'
+
+export default {
+  styles: `
+.seq-sheet-preview {
+  display: grid;
+  gap: 3px;
+  width: fit-content;
+  max-width: 100%;
+  padding: 8px;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(0, 0, 0, 0.28);
+}
+
+.seq-sheet-cell {
+  width: 18px;
+  height: 18px;
+  border-radius: 3px;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  font-size: 9px;
+  line-height: 18px;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.35);
+  font-family: 'JetBrains Mono', monospace;
+}
+
+.seq-sheet-cell.is-filled {
+  background: rgba(61, 214, 198, 0.35);
+  border-color: rgba(61, 214, 198, 0.55);
+  color: var(--text);
+}
+`,
+  render: (ui) =>
+    ui.stack(ui.view(), ui.row(ui.field('rows'), ui.field('columns')), ui.field('html.text093')),
+  menu: [{ group: 'image-split', accepts: ['image'] }],
+  id: 'manual-split',
+  title: 'html.text058',
+  storage: 'parameters',
+  node: {
+    type: 'feature_dialog',
+    width: 340,
+    minWidth: 260,
+    minHeight: 180,
+    generationInput: true,
+    classNames: ['is-interactive-ui', 'is-gen-dialog'],
+  },
+  fields: [
+    {
+      path: 'rows',
+      type: 'integer',
+      default: 2,
+      min: 1,
+      max: 64,
+      label: 'common.rows',
+      required: true,
+    },
+    {
+      path: 'columns',
+      type: 'integer',
+      default: 2,
+      min: 1,
+      max: 64,
+      label: 'common.columns',
+      required: true,
+    },
+    { type: 'note', label: 'html.text093' },
+  ],
+  setup: () => ({
+    mountView(host, item) {
+      const grid = el('div', 'seq-sheet-preview')
+      const update = () => {
+        const p = ensureFeatureState(item)
+        grid.replaceChildren()
+        if (
+          !Number.isInteger(p.rows) ||
+          !Number.isInteger(p.columns) ||
+          p.rows < 1 ||
+          p.rows > 64 ||
+          p.columns < 1 ||
+          p.columns > 64
+        )
+          return
+        grid.style.display = 'grid'
+        grid.style.gridTemplateColumns = `repeat(${p.columns}, 18px)`
+        for (let n = 0; n < p.rows * p.columns; n++)
+          grid.append(el('div', 'seq-sheet-cell is-filled', String(n + 1)))
+      }
+      host.append(grid)
+      update()
+      return subscribeFeatureState(item.id, update)
+    },
+  }),
+  validate: (p) => (p.rows * p.columns >= 2 ? '' : t('features.editing.imageSplitting.text006')),
+  task(p, _services, item) {
+    return {
+      endpoint: '/api/manual-split',
+      wait: { name: t('features.editing.imageSplitting.text011'), references: [item.sourceId] },
+      body: { id: item.sourceId, rows: p.rows, columns: p.columns },
+      checkResult(result) {
+        if ((result.images || []).length !== p.rows * p.columns)
+          throw new Error(
+            errorT('features.editing.imageSplitting.text012') +
+              (result.images || []).length +
+              t('features.editing.imageSplitting.text012.part1') +
+              p.rows * p.columns,
+          )
+      },
+    }
+  },
+}

package/dist/canvas-public/features/editing/perfect-pixel.js

@@ -0,0 +1,299 @@
+import {
+  ensureFeatureState,
+  peekFeatureState,
+  notifyFeatureState,
+} from '../../core/feature-state.js'
+import { t, errorT, errorText } from '../../language/index.js'
+import { api } from '../../core/api.js'
+import { state } from '../../core/state.js'
+import { el } from '../../ui/controls.js'
+
+export default {
+  styles: `.perfect-pixel-preview-stage img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }`,
+  render: (ui) =>
+    ui.stack(
+      ui.view(),
+      ui.field('autoGrid'),
+      ui.field('pixelSize'),
+      ui.row(ui.field('sampleMethod'), ui.field('exportScale')),
+      ui.row(ui.field('alphaMode'), ui.field('alphaThreshold')),
+    ),
+  menu: [{ accepts: ['image'] }],
+  id: 'perfect-pixel',
+  title: 'features.editing.perfectPixel.text011',
+  storage: 'perfectPixel',
+  node: {
+    type: 'perfect_pixel_editor',
+    width: 380,
+    minWidth: 320,
+    minHeight: 430,
+    generationInput: true,
+    classNames: ['is-interactive-ui', 'is-perfect-pixel-editor'],
+  },
+  fields: [
+    {
+      path: 'autoGrid',
+      type: 'boolean',
+      default: true,
+      label: 'features.editing.perfectPixel.text016',
+    },
+    {
+      path: 'pixelSize',
+      type: 'integer',
+      default: 8,
+      min: 2,
+      max: 256,
+      label: 'inspector.uiInspector.text074',
+      visible: (p) => !p.autoGrid,
+    },
+    {
+      path: 'sampleMethod',
+      type: 'enum',
+      default: 'median',
+      label: 'inspector.uiInspector.text078',
+      options: ['majority', 'median', 'center'].map((value, index) => ({
+        value,
+        labelKey: `inspector.uiInspector.text0${75 + index}`,
+      })),
+    },
+    {
+      path: 'exportScale',
+      type: 'integer',
+      default: 4,
+      min: 1,
+      max: 16,
+      label: 'inspector.uiInspector.text079',
+    },
+    {
+      path: 'alphaMode',
+      type: 'enum',
+      default: 'hard',
+      label: 'inspector.uiInspector.text082',
+      options: [
+        { value: 'hard', labelKey: 'inspector.uiInspector.text081' },
+        { value: 'preserve', labelKey: 'inspector.uiInspector.text080' },
+      ],
+    },
+    {
+      path: 'alphaThreshold',
+      type: 'integer',
+      default: 128,
+      min: 0,
+      max: 255,
+      label: 'inspector.uiInspector.text083',
+      visible: (p) => p.alphaMode === 'hard',
+    },
+  ],
+  runtimeDefaults: () => ({
+    previewController: null,
+    processTimer: null,
+    layoutSaveTimer: null,
+    requestId: 0,
+    previewUrl: '',
+    resultBlob: null,
+    resultMeta: null,
+    pending: false,
+    error: '',
+  }),
+  setup: createPerfectPixelTool,
+  submitLabel: 'features.editing.perfectPixel.text002',
+  ready: (p) => Boolean(p.resultBlob) && !p.pending,
+}
+
+function createPerfectPixelTool(context) {
+  const { findNodeEl, formatPerfectPixelSourceArea, imageUrl, saveLayout } = context
+
+  function perfectPixelSettings(ds) {
+    return {
+      auto_grid: ds.autoGrid,
+      pixel_size: ds.pixelSize,
+      sample_method: ds.sampleMethod,
+      export_scale: ds.exportScale,
+      alpha_mode: ds.alphaMode,
+      alpha_threshold: ds.alphaThreshold,
+    }
+  }
+
+  function updatePerfectPixelEditorUi(editorId) {
+    notifyFeatureState(editorId)
+    const ds = peekFeatureState(editorId)
+    const node = findNodeEl(editorId)
+    if (!ds || !node) return
+    const loading = node.querySelector('[data-role="perfect-pixel-loading"]')
+    const status = node.querySelector('[data-role="perfect-pixel-status"]')
+    if (loading) loading.hidden = !ds.pending && !ds.busy
+    if (status) {
+      status.classList.toggle('is-error', Boolean(ds.error))
+      if (ds.error) {
+        status.textContent = errorText(ds.error)
+      } else if (ds.resultMeta) {
+        const meta = ds.resultMeta
+        const confidence = meta.automatic
+          ? `${t('features.editing.perfectPixel.text004')}${Math.round((Number(meta.confidence) || 0) * 100)}${t('features.editing.perfectPixel.text004.part1')}`
+          : ''
+        status.textContent = `${t('features.editing.perfectPixel.text005')}${meta.gridWidth}${t('features.editing.perfectPixel.text005.part1')}${meta.gridHeight}${t('features.editing.perfectPixel.text005.part2')}${formatPerfectPixelSourceArea(meta.pixelSizeX, meta.pixelSizeY)}${t('features.editing.perfectPixel.text005.part3')}${meta.width}${t('features.editing.perfectPixel.text005.part4')}${meta.height}${confidence}`
+      } else {
+        status.textContent = t('features.editing.perfectPixel.text006')
+      }
+    }
+  }
+
+  function schedulePerfectPixelLayoutSave(editorId) {
+    const ds = peekFeatureState(editorId)
+    if (!ds) return
+    clearTimeout(ds.layoutSaveTimer)
+    ds.layoutSaveTimer = setTimeout(() => {
+      ds.layoutSaveTimer = null
+      saveLayout(state.layoutItems).catch((error) =>
+        console.warn('save perfect pixel settings failed', error),
+      )
+    }, 220)
+  }
+
+  async function startPerfectPixelPreview(editorId, sourceId, requestId) {
+    const ds = peekFeatureState(editorId)
+    if (!ds || ds.requestId !== requestId) return
+    const controller = new AbortController()
+    ds.previewController = controller
+    try {
+      const response = await fetch('/api/perfect-pixel/preview', {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id: sourceId, ...perfectPixelSettings(ds) }),
+        signal: controller.signal,
+      })
+      if (!response.ok) {
+        const error = await response.json().catch(() => ({}))
+        throw new Error(error.detail || response.statusText)
+      }
+      const meta = JSON.parse(response.headers.get('X-Perfect-Pixel-Metadata'))
+      const blob = await response.blob()
+      const current = peekFeatureState(editorId)
+      if (!current || current.requestId !== requestId || controller.signal.aborted) return
+      if (current.previewUrl?.startsWith('blob:')) URL.revokeObjectURL(current.previewUrl)
+      current.resultBlob = blob
+      current.previewUrl = URL.createObjectURL(blob)
+      current.resultMeta = {
+        width: meta.width, height: meta.height,
+        gridWidth: meta.grid_width, gridHeight: meta.grid_height,
+        pixelSizeX: meta.pixel_size_x, pixelSizeY: meta.pixel_size_y,
+        confidence: meta.confidence, automatic: meta.auto_grid,
+      }
+      current.error = ''
+      const image = findNodeEl(editorId)?.querySelector('[data-role="perfect-pixel-preview"]')
+      if (image) image.src = current.previewUrl
+    } catch (error) {
+      const current = peekFeatureState(editorId)
+      if (!current || current.requestId !== requestId || controller.signal.aborted) return
+      current.resultBlob = null
+      current.resultMeta = null
+      current.error = errorT('features.editing.perfectPixel.text007') + error.message
+    } finally {
+      const current = peekFeatureState(editorId)
+      if (current?.requestId === requestId && !controller.signal.aborted) {
+        current.previewController = null
+        current.pending = false
+        updatePerfectPixelEditorUi(editorId)
+      }
+    }
+  }
+
+  function schedulePerfectPixelProcess(editorId, delay = 200) {
+    const ds = peekFeatureState(editorId)
+    const item = state.layoutItems.find((candidate) => candidate.id === editorId)
+    if (!ds || !item?.sourceId || ds.busy) return
+    clearTimeout(ds.processTimer)
+    ds.previewController?.abort()
+    ds.previewController = null
+    ds.requestId += 1
+    const requestId = ds.requestId
+    if (ds.previewUrl?.startsWith('blob:')) URL.revokeObjectURL(ds.previewUrl)
+    ds.previewUrl = ''
+    ds.resultBlob = null
+    ds.resultMeta = null
+    ds.pending = true
+    ds.error = ''
+    updatePerfectPixelEditorUi(editorId)
+    ds.processTimer = setTimeout(() => {
+      ds.processTimer = null
+      void startPerfectPixelPreview(editorId, item.sourceId, requestId)
+    }, delay)
+  }
+
+  function changePerfectPixelSettings(editorId, patch) {
+    const ds = peekFeatureState(editorId)
+    if (!ds || ds.busy) return
+    if (patch.autoGrid != null) ds.autoGrid = patch.autoGrid !== false
+    if (patch.pixelSize != null)
+      ds.pixelSize = Math.max(2, Math.min(256, Math.round(Number(patch.pixelSize) || 2)))
+    if (['majority', 'median', 'center'].includes(patch.sampleMethod))
+      ds.sampleMethod = patch.sampleMethod
+    if (patch.exportScale != null)
+      ds.exportScale = Math.max(1, Math.min(16, Math.round(Number(patch.exportScale) || 1)))
+    if (['hard', 'preserve'].includes(patch.alphaMode)) ds.alphaMode = patch.alphaMode
+    if (patch.alphaThreshold != null)
+      ds.alphaThreshold = Math.max(0, Math.min(255, Math.round(Number(patch.alphaThreshold) || 0)))
+    schedulePerfectPixelProcess(editorId)
+    schedulePerfectPixelLayoutSave(editorId)
+    updatePerfectPixelEditorUi(editorId)
+  }
+
+  function disposePerfectPixelEditorState(ds) {
+    if (!ds) return
+    clearTimeout(ds.processTimer)
+    clearTimeout(ds.layoutSaveTimer)
+    ds.previewController?.abort()
+    if (ds.previewUrl?.startsWith('blob:')) URL.revokeObjectURL(ds.previewUrl)
+  }
+
+  function task(item, ds) {
+    const settings = { id: item.sourceId, ...perfectPixelSettings(ds) }
+    return {
+      wait: {
+        name: t('features.editing.perfectPixel.text009'),
+        width: item.width,
+        height: item.height,
+        references: [{ id: item.sourceId, role: 'source' }],
+      },
+      request: (operationId) =>
+        api(
+          '/api/perfect-pixel/apply',
+          { method: 'POST', headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ ...settings, client_operation_id: operationId }) },
+        ),
+    }
+  }
+
+  function mountPerfectPixelEditorNode(container, node) {
+    const ds = ensureFeatureState(node)
+    container.classList.add('is-perfect-pixel-editor')
+    const previewStage = el('div', 'ui-image-preview perfect-pixel-preview-stage')
+    const image = document.createElement('img')
+    image.dataset.role = 'perfect-pixel-preview'
+    image.alt = t('features.editing.perfectPixel.text013')
+    image.draggable = false
+    image.src = ds.previewUrl || imageUrl(node.sourceId)
+    const loading = el('div', 'ui-image-preview-loading')
+    loading.dataset.role = 'perfect-pixel-loading'
+    loading.hidden = !ds.pending && !ds.busy
+    loading.setAttribute('aria-label', t('features.editing.perfectPixel.text014'))
+    loading.appendChild(el('span', 'ui-image-preview-spinner'))
+    previewStage.append(image, loading)
+
+    const status = el('p', 'ui-preview-status perfect-pixel-status')
+    status.dataset.role = 'perfect-pixel-status'
+
+    previewStage.addEventListener('pointerdown', (event) => event.stopPropagation())
+    container.append(previewStage, status)
+    requestAnimationFrame(() => {
+      if (!ds.resultBlob && !ds.pending) schedulePerfectPixelProcess(node.id, 0)
+      updatePerfectPixelEditorUi(node.id)
+    })
+  }
+
+  return {
+    mountView: mountPerfectPixelEditorNode,
+    parametersChanged: (id) => changePerfectPixelSettings(id, {}),
+    task,
+    dispose: (id) => disposePerfectPixelEditorState(peekFeatureState(id)),
+  }
+}

package/dist/canvas-public/features/editing/scroll-preview.js

@@ -0,0 +1,130 @@
+import { errorT } from '../../language/index.js'
+import { t } from '../../language/index.js'
+import { state } from '../../core/state.js'
+import {
+  normalizeFramePreviewConfig,
+  normalizeScrollPreviewConfig,
+  scrollImagePreviewMeta,
+  suggestedScrollPreviewConfig,
+} from '../../elements/image.js'
+
+export async function applyScrollPreviews(updates, services) {
+  const changes = updates.map(({ source, params }) => {
+    const config = normalizeScrollPreviewConfig(params)
+    if (!config) throw new Error(errorT('features.editing.scrollPreview.invalidParameters'))
+    return {
+      source,
+      config,
+      hadScrollPreview: Object.prototype.hasOwnProperty.call(source, 'scrollPreview'),
+      previousScrollPreview: source.scrollPreview,
+      hadFramePreview: Object.prototype.hasOwnProperty.call(source, 'framePreview'),
+      previousFramePreview: source.framePreview,
+    }
+  })
+
+  for (const { source, config } of changes) {
+    source.scrollPreview = config
+    if (config.enabled) {
+      const framePreview = normalizeFramePreviewConfig(source.framePreview)
+      if (framePreview?.enabled) source.framePreview = { ...framePreview, enabled: false }
+    }
+  }
+
+  try {
+    await services.saveLayout()
+  } catch (error) {
+    for (const change of changes) {
+      if (change.hadScrollPreview) change.source.scrollPreview = change.previousScrollPreview
+      else delete change.source.scrollPreview
+      if (change.hadFramePreview) change.source.framePreview = change.previousFramePreview
+      else delete change.source.framePreview
+    }
+    throw error
+  }
+
+  for (const { source, config } of changes) {
+    if (config.enabled) {
+      state.scrollImagePlayback[source.id] = { offset: 0 }
+      delete state.frameSheetPlayback[source.id]
+    } else {
+      delete state.scrollImagePlayback[source.id]
+    }
+    services.renderCanvasItem(source.id)
+  }
+}
+
+export async function applyScrollPreview(source, params, services) {
+  return applyScrollPreviews([{ source, params }], services)
+}
+
+export default {
+  render: (ui) =>
+    ui.stack(ui.field('enabled'), ui.field('direction'), ui.field('speed')),
+  id: 'scroll-image-preview',
+  title: 'features.editing.scrollPreview.title',
+  storage: 'parameters',
+  node: {
+    type: 'feature_dialog',
+    width: 320,
+    minWidth: 280,
+    minHeight: 200,
+    generationInput: true,
+    classNames: ['is-interactive-ui'],
+  },
+  menu: [
+    {
+      group: 'scroll-image',
+      title: 'features.editing.scrollPreview.action',
+      titleFor: (source) =>
+        scrollImagePreviewMeta(source)
+          ? 'features.editing.scrollPreview.stop'
+          : 'features.editing.scrollPreview.action',
+      accepts: ['image'],
+    },
+  ],
+  fields: [
+    {
+      path: 'enabled',
+      type: 'boolean',
+      default: true,
+      label: 'features.editing.scrollPreview.enabled',
+    },
+    {
+      path: 'direction',
+      type: 'enum',
+      default: 'left',
+      label: 'features.editing.scrollPreview.direction',
+      options: [
+        { value: 'left', labelKey: 'features.editing.scrollPreview.directionLeft' },
+        { value: 'right', labelKey: 'features.editing.scrollPreview.directionRight' },
+      ],
+    },
+    {
+      path: 'speed',
+      type: 'number',
+      default: 60,
+      min: 1,
+      max: 2000,
+      step: 'any',
+      required: true,
+      label: 'features.editing.scrollPreview.speed',
+    },
+  ],
+  async sourceAction(source, services) {
+    const config = scrollImagePreviewMeta(source)
+    if (!config) return false
+    await applyScrollPreview(source, { ...config, enabled: false }, services)
+    services.renderChrome()
+    return true
+  },
+  prefill: (source) => ({ ...suggestedScrollPreviewConfig(source), enabled: true }),
+  submitLabel: 'features.editing.scrollPreview.apply',
+  async execute(params, item, services) {
+    const source = state.layoutItems.find((entry) => entry.id === item.sourceId)
+    if (!source) throw new Error(errorT('features.editing.scrollPreview.sourceMissing'))
+    await applyScrollPreview(source, params, services)
+    await services.replaceLocal(item, [])
+    services.setSelection([source.id])
+    services.renderChrome()
+  },
+}

package/dist/canvas-public/features/editing/scroll-seam-elimination.js

@@ -0,0 +1,71 @@
+import { t } from '../../language/index.js'
+import {
+  modelField,
+  promptField,
+  booleanField,
+  colorField,
+  transparentField,
+} from '../generation/fields.js'
+import { sourceImageParameters, sourcePreview } from './source-preview.js'
+
+export default {
+  render: (ui) =>
+    ui.stack(
+      ui.view(),
+      ui.prompt('prompt'),
+      ui.field('model'),
+      ui.field('hasBackground'),
+      ui.field('transparentBackground'),
+      ui.field('backgroundColor'),
+    ),
+  menu: [{ group: 'scroll-image', accepts: ['image'] }],
+  id: 'scroll-seam-elimination',
+  title: 'features.editing.scrollSeamElimination.title',
+  storage: 'parameters',
+  node: {
+    type: 'feature_dialog',
+    width: 360,
+    minWidth: 300,
+    minHeight: 220,
+    generationInput: true,
+    classNames: ['is-interactive-ui', 'is-gen-dialog'],
+  },
+  fields: [
+    promptField(),
+    modelField(),
+    { path: 'sourceSize', type: 'hidden', default: '' },
+    booleanField('hasBackground', 'features.editing.scrollSeamElimination.hasBackground'),
+    transparentField({ visible: (p) => p.hasBackground }),
+    colorField('backgroundColor', { visible: (p) => p.hasBackground && !p.transparentBackground }),
+  ],
+  setup: sourcePreview,
+  prefill: sourceImageParameters,
+  validate(p) {
+    if (p.sourceSize !== '3024x1296')
+      return t('features.editing.scrollSeamElimination.sizeRequired') + p.sourceSize
+    if (p.hasBackground && p.transparentBackground && p.model !== 'asset-max')
+      return t('features.editing.scrollSeamElimination.transparentModelRequired')
+    return ''
+  },
+  task(p, _services, item) {
+    return {
+      endpoint: '/api/eliminate-scroll-background-seam',
+      options: { allowExternalSync: true },
+      wait: {
+        name: t('features.editing.scrollSeamElimination.generating'),
+        size: p.sourceSize,
+        model: p.model,
+        prompt: p.prompt.trim(),
+        references: [item.sourceId],
+      },
+      body: {
+        id: item.sourceId,
+        prompt: p.prompt.trim(),
+        model: p.model,
+        has_background: p.hasBackground,
+        transparent_background: p.hasBackground && p.transparentBackground,
+        background_color: p.backgroundColor,
+      },
+    }
+  },
+}