evomeme 0.1.9 → 0.1.10

package/dist/canvas-public/workers/perfect-pixel-worker.js

@@ -0,0 +1,510 @@
+let sourceBitmap = null
+
+self.addEventListener('message', async (event) => {
+  const message = event.data || {}
+  try {
+    if (message.type === 'init') {
+      const response = await fetch(String(message.url || ''))
+      if (!response.ok) throw workerError('workers.imageLoadFailed', { status: response.status })
+      sourceBitmap?.close?.()
+      sourceBitmap = await createImageBitmap(await response.blob())
+      self.postMessage({
+        type: 'ready',
+        requestId: message.requestId,
+        width: sourceBitmap.width,
+        height: sourceBitmap.height,
+      })
+      return
+    }
+
+    if (message.type !== 'process') return
+    if (!sourceBitmap) throw workerError('workers.perfectPixel.notInitialized')
+
+    const settings = normalizeSettings(message.settings)
+    const sourceCanvas = new OffscreenCanvas(sourceBitmap.width, sourceBitmap.height)
+    const sourceContext = sourceCanvas.getContext('2d', { willReadFrequently: true })
+    sourceContext.drawImage(sourceBitmap, 0, 0)
+    const source = sourceContext.getImageData(0, 0, sourceBitmap.width, sourceBitmap.height)
+    const result = restorePixelGrid(source, settings)
+
+    const lowResolution = new OffscreenCanvas(result.width, result.height)
+    lowResolution.getContext('2d').putImageData(
+      new ImageData(result.pixels, result.width, result.height),
+      0,
+      0,
+    )
+
+    const outputWidth = result.width * settings.exportScale
+    const outputHeight = result.height * settings.exportScale
+    const output = new OffscreenCanvas(outputWidth, outputHeight)
+    const outputContext = output.getContext('2d')
+    outputContext.imageSmoothingEnabled = false
+    outputContext.clearRect(0, 0, outputWidth, outputHeight)
+    outputContext.drawImage(lowResolution, 0, 0, outputWidth, outputHeight)
+    const blob = await output.convertToBlob({ type: 'image/png' })
+
+    self.postMessage({
+      type: 'result',
+      requestId: message.requestId,
+      blob,
+      width: outputWidth,
+      height: outputHeight,
+      gridWidth: result.width,
+      gridHeight: result.height,
+      pixelSizeX: result.pixelSizeX,
+      pixelSizeY: result.pixelSizeY,
+      confidence: result.confidence,
+      automatic: settings.autoGrid,
+    })
+  } catch (error) {
+    self.postMessage({
+      type: 'error',
+      requestId: message.requestId,
+      messageKey: error?.messageKey || '',
+      messageVariables: error?.messageVariables || null,
+      message: error?.messageKey ? '' : String(error?.message || error),
+    })
+  }
+})
+
+function workerError(messageKey, messageVariables = null) {
+  const error = new Error(messageKey)
+  error.messageKey = messageKey
+  error.messageVariables = messageVariables
+  return error
+}
+
+function normalizeSettings(value) {
+  const settings = value && typeof value === 'object' ? value : {}
+  const sampleMethod = ['majority', 'median', 'center'].includes(settings.sampleMethod)
+    ? settings.sampleMethod
+    : 'median'
+  const alphaMode = settings.alphaMode === 'preserve' ? 'preserve' : 'hard'
+  return {
+    autoGrid: settings.autoGrid !== false,
+    pixelSize: clampInteger(settings.pixelSize, 2, 256, 8),
+    sampleMethod,
+    exportScale: clampInteger(settings.exportScale, 1, 16, 4),
+    alphaMode,
+    alphaThreshold: clampInteger(settings.alphaThreshold, 0, 255, 128),
+  }
+}
+
+function clampInteger(value, min, max, fallback) {
+  const number = Math.round(Number(value))
+  return Number.isFinite(number) ? Math.max(min, Math.min(max, number)) : fallback
+}
+
+function restorePixelGrid(image, settings) {
+  const width = image.width
+  const height = image.height
+  if (!width || !height) throw workerError('workers.perfectPixel.invalidSourceSize')
+
+  const projections = buildAlphaAwareGradientProjections(image.data, width, height)
+  let pixelSizeX = settings.pixelSize
+  let pixelSizeY = settings.pixelSize
+  let gridWidth = Math.ceil(width / settings.pixelSize)
+  let gridHeight = Math.ceil(height / settings.pixelSize)
+  let confidence = 1
+
+  if (settings.autoGrid) {
+    const detectedX = detectPixelPeriod(projections.x)
+    const detectedY = detectPixelPeriod(projections.y)
+    if (!detectedX && !detectedY) {
+      throw workerError('workers.perfectPixel.gridDetectionFailed')
+    }
+    let squarePixelSize
+    if (detectedX && detectedY) {
+      const ratio = Math.max(detectedX.period, detectedY.period) / Math.min(detectedX.period, detectedY.period)
+      if (ratio <= 1.5) {
+        const totalConfidence = Math.max(1e-6, detectedX.confidence + detectedY.confidence)
+        squarePixelSize = (
+          detectedX.period * detectedX.confidence +
+          detectedY.period * detectedY.confidence
+        ) / totalConfidence
+      } else {
+        // Pixel-art cells are square. If one axis is dominated by illustration
+        // content instead of the grid, trust the stronger axis for both directions.
+        squarePixelSize = detectedX.confidence >= detectedY.confidence
+          ? detectedX.period
+          : detectedY.period
+      }
+      confidence = Math.min(detectedX.confidence, detectedY.confidence)
+    } else {
+      const detected = detectedX || detectedY
+      squarePixelSize = detected.period
+      // A single reliable axis is enough for square pixels, but report that the
+      // estimate had less supporting evidence than a two-axis match.
+      confidence = detected.confidence * 0.78
+    }
+    pixelSizeX = squarePixelSize
+    pixelSizeY = squarePixelSize
+    gridWidth = Math.max(1, Math.round(width / pixelSizeX))
+    gridHeight = Math.max(1, Math.round(height / pixelSizeY))
+    pixelSizeX = width / gridWidth
+    pixelSizeY = height / gridHeight
+  }
+
+  const xCoordinates = settings.autoGrid
+    ? refineGridCoordinates(width, gridWidth, projections.x)
+    : fixedGridCoordinates(width, settings.pixelSize)
+  const yCoordinates = settings.autoGrid
+    ? refineGridCoordinates(height, gridHeight, projections.y)
+    : fixedGridCoordinates(height, settings.pixelSize)
+  const outputWidth = xCoordinates.length - 1
+  const outputHeight = yCoordinates.length - 1
+  if (outputWidth < 1 || outputHeight < 1) {
+    throw workerError('workers.perfectPixel.emptyGrid')
+  }
+  if (outputWidth * outputHeight > 4_194_304) {
+    throw workerError('workers.perfectPixel.gridTooLarge')
+  }
+
+  const pixels = sampleGrid(
+    image.data,
+    width,
+    height,
+    xCoordinates,
+    yCoordinates,
+    settings,
+  )
+  return {
+    pixels,
+    width: outputWidth,
+    height: outputHeight,
+    pixelSizeX,
+    pixelSizeY,
+    confidence,
+  }
+}
+
+/**
+ * Transparent pixels may contain arbitrary hidden RGB values. Work in premultiplied
+ * RGB and add the alpha edge itself to the signal, so those hidden colors can never
+ * create a fake grid while dark opaque sprites remain detectable.
+ */
+function buildAlphaAwareGradientProjections(source, width, height) {
+  const x = new Float64Array(width)
+  const y = new Float64Array(height)
+  for (let row = 0; row < height; row += 1) {
+    for (let column = 0; column < width; column += 1) {
+      const offset = (row * width + column) * 4
+      const alpha = source[offset + 3] / 255
+      const red = source[offset] * alpha
+      const green = source[offset + 1] * alpha
+      const blue = source[offset + 2] * alpha
+
+      if (column > 0) {
+        const previous = offset - 4
+        const previousAlpha = source[previous + 3] / 255
+        const delta =
+          Math.abs(red - source[previous] * previousAlpha) +
+          Math.abs(green - source[previous + 1] * previousAlpha) +
+          Math.abs(blue - source[previous + 2] * previousAlpha) +
+          Math.abs(alpha - previousAlpha) * 255
+        x[column] += delta
+      }
+      if (row > 0) {
+        const previous = offset - width * 4
+        const previousAlpha = source[previous + 3] / 255
+        const delta =
+          Math.abs(red - source[previous] * previousAlpha) +
+          Math.abs(green - source[previous + 1] * previousAlpha) +
+          Math.abs(blue - source[previous + 2] * previousAlpha) +
+          Math.abs(alpha - previousAlpha) * 255
+        y[row] += delta
+      }
+    }
+  }
+  return { x, y }
+}
+
+/**
+ * Grid edges share one residue modulo the source pixel-block size. Scoring that
+ * concentration together with short-lag autocorrelation recovers the same periodic
+ * grid targeted by Perfect Pixel's FFT/gradient stages without shipping OpenCV.
+ */
+function detectPixelPeriod(projection) {
+  const length = projection.length
+  if (length < 4) return null
+  const maximum = Math.min(64, Math.max(2, Math.floor(length / 3)))
+  let total = 0
+  for (let i = 1; i < length; i += 1) total += projection[i]
+  if (total <= 1e-6) return null
+
+  let best = null
+  for (let period = 2; period <= maximum; period += 1) {
+    const bins = new Float64Array(period)
+    for (let i = 1; i < length; i += 1) bins[i % period] += projection[i]
+    let maximumBin = 0
+    for (const value of bins) maximumBin = Math.max(maximumBin, value)
+    const concentration = (maximumBin - total / period) / total
+
+    let numerator = 0
+    let leftEnergy = 0
+    let rightEnergy = 0
+    for (let i = 1; i + period < length; i += 1) {
+      const left = projection[i]
+      const right = projection[i + period]
+      numerator += left * right
+      leftEnergy += left * left
+      rightEnergy += right * right
+    }
+    const correlation = numerator / Math.sqrt(Math.max(1e-12, leftEnergy * rightEnergy))
+    const score = concentration * 0.78 + correlation * 0.22
+    if (!best || score > best.score) best = { period, score, concentration, correlation }
+  }
+
+  const phaseResult = best && best.score >= 0.025 && best.concentration >= 0.01
+    ? {
+        period: best.period,
+        confidence: Math.max(0, Math.min(1, best.score * 2.5)),
+      }
+    : null
+  const peakResult = detectPixelPeriodFromGradientPeaks(projection)
+
+  if (!phaseResult) return peakResult
+  if (!peakResult) return phaseResult
+  const ratio = Math.max(phaseResult.period, peakResult.period) /
+    Math.min(phaseResult.period, peakResult.period)
+  if (ratio <= 1.2) {
+    return phaseResult.confidence >= peakResult.confidence ? phaseResult : peakResult
+  }
+  return phaseResult.confidence >= peakResult.confidence * 1.2 ? phaseResult : peakResult
+}
+
+function detectPixelPeriodFromGradientPeaks(projection) {
+  let maximum = 0
+  for (const value of projection) maximum = Math.max(maximum, value)
+  if (maximum <= 1e-6) return null
+  const thresholds = [0.2, 0.12, 0.07]
+  for (const relativeThreshold of thresholds) {
+    const threshold = maximum * relativeThreshold
+    const peaks = []
+    for (let index = 1; index < projection.length - 1; index += 1) {
+      if (
+        projection[index] >= threshold &&
+        projection[index] > projection[index - 1] &&
+        projection[index] >= projection[index + 1]
+      ) {
+        const previous = peaks[peaks.length - 1]
+        if (previous == null || index - previous >= 2) peaks.push(index)
+        else if (projection[index] > projection[previous]) peaks[peaks.length - 1] = index
+      }
+    }
+    if (peaks.length < 3) continue
+    const intervals = []
+    for (let index = 1; index < peaks.length; index += 1) {
+      const interval = peaks[index] - peaks[index - 1]
+      if (interval >= 2 && interval <= 128) intervals.push(interval)
+    }
+    if (intervals.length < 2) continue
+    const period = median(intervals)
+    if (period < 2 || period > 128) continue
+    const deviations = intervals.map((interval) => {
+      const multiple = Math.max(1, Math.round(interval / period))
+      return Math.abs(interval - multiple * period) / period
+    })
+    const meanDeviation = deviations.reduce((sum, value) => sum + value, 0) / deviations.length
+    const support = Math.min(1, intervals.length / 10)
+    const confidence = Math.max(0.08, Math.min(0.9, (1 - meanDeviation) * (0.45 + support * 0.45)))
+    return { period, confidence }
+  }
+  return null
+}
+
+function refineGridCoordinates(length, gridCount, projection, intensity = 0.25) {
+  const count = Math.max(1, Math.min(length, Math.round(gridCount)))
+  const cellSize = length / count
+  const coordinates = new Int32Array(count + 1)
+  coordinates[0] = 0
+  coordinates[count] = length
+
+  for (let index = 1; index < count; index += 1) {
+    const expected = index * cellSize
+    const radius = Math.max(1, Math.round(cellSize * intensity))
+    const minimum = Math.max(coordinates[index - 1] + 1, Math.round(expected) - radius)
+    const maximum = Math.min(length - (count - index), Math.round(expected) + radius)
+    let best = Math.max(minimum, Math.min(maximum, Math.round(expected)))
+    let bestValue = projection[best] || 0
+    for (let position = minimum; position <= maximum; position += 1) {
+      const value = projection[position] || 0
+      if (value > bestValue) {
+        best = position
+        bestValue = value
+      }
+    }
+    coordinates[index] = best
+  }
+  return coordinates
+}
+
+function fixedGridCoordinates(length, pixelSize) {
+  const size = Math.max(2, Math.round(pixelSize))
+  const coordinates = []
+  for (let position = 0; position < length; position += size) coordinates.push(position)
+  if (coordinates[coordinates.length - 1] !== length) coordinates.push(length)
+  return Int32Array.from(coordinates)
+}
+
+function sampleGrid(source, width, height, xCoordinates, yCoordinates, settings) {
+  const outputWidth = xCoordinates.length - 1
+  const outputHeight = yCoordinates.length - 1
+  const output = new Uint8ClampedArray(outputWidth * outputHeight * 4)
+  for (let outputY = 0; outputY < outputHeight; outputY += 1) {
+    const y0 = Math.max(0, Math.min(height - 1, yCoordinates[outputY]))
+    const y1 = Math.max(y0 + 1, Math.min(height, yCoordinates[outputY + 1]))
+    for (let outputX = 0; outputX < outputWidth; outputX += 1) {
+      const x0 = Math.max(0, Math.min(width - 1, xCoordinates[outputX]))
+      const x1 = Math.max(x0 + 1, Math.min(width, xCoordinates[outputX + 1]))
+      const color = sampleCell(source, width, x0, y0, x1, y1, settings)
+      const outputOffset = (outputY * outputWidth + outputX) * 4
+      output[outputOffset] = color[0]
+      output[outputOffset + 1] = color[1]
+      output[outputOffset + 2] = color[2]
+      output[outputOffset + 3] = color[3]
+    }
+  }
+  return output
+}
+
+function sampleCell(source, width, x0, y0, x1, y1, settings) {
+  const pixelCount = Math.max(1, (x1 - x0) * (y1 - y0))
+  const sampleStep = Math.max(1, Math.ceil(pixelCount / 128))
+  const samples = []
+  const alphaSamples = []
+  let alphaSum = 0
+  let sampleIndex = 0
+  let centerSample = null
+  const centerX = Math.min(x1 - 1, Math.floor((x0 + x1) / 2))
+  const centerY = Math.min(y1 - 1, Math.floor((y0 + y1) / 2))
+
+  for (let y = y0; y < y1; y += 1) {
+    for (let x = x0; x < x1; x += 1) {
+      const offset = (y * width + x) * 4
+      const alpha = source[offset + 3]
+      alphaSum += alpha
+      if (x === centerX && y === centerY) {
+        centerSample = [source[offset], source[offset + 1], source[offset + 2], alpha]
+      }
+      if (sampleIndex % sampleStep === 0) {
+        alphaSamples.push(alpha)
+        if (alpha > 4) {
+          samples.push([source[offset], source[offset + 1], source[offset + 2], alpha])
+        }
+      }
+      sampleIndex += 1
+    }
+  }
+
+  let outputAlpha
+  if (settings.alphaMode === 'preserve') {
+    outputAlpha = alphaSamples.length ? median(alphaSamples) : 0
+  } else {
+    const coverageAlpha = alphaSum / pixelCount
+    outputAlpha = coverageAlpha >= settings.alphaThreshold ? 255 : 0
+  }
+  if (outputAlpha <= 0 || !samples.length) return [0, 0, 0, 0]
+
+  let rgb
+  if (settings.sampleMethod === 'center' && centerSample?.[3] > 4) {
+    rgb = centerSample.slice(0, 3)
+  } else if (settings.sampleMethod === 'median') {
+    rgb = weightedMedianColor(samples)
+  } else if (settings.sampleMethod === 'center') {
+    rgb = weightedMeanColor(samples)
+  } else {
+    rgb = majorityClusterColor(samples)
+  }
+  return [rgb[0], rgb[1], rgb[2], Math.round(outputAlpha)]
+}
+
+function sampleWeight(sample) {
+  const alpha = sample[3] / 255
+  return alpha * alpha
+}
+
+function weightedMeanColor(samples) {
+  let red = 0
+  let green = 0
+  let blue = 0
+  let weightSum = 0
+  for (const sample of samples) {
+    const weight = sampleWeight(sample)
+    red += sample[0] * weight
+    green += sample[1] * weight
+    blue += sample[2] * weight
+    weightSum += weight
+  }
+  if (weightSum <= 1e-8) return [0, 0, 0]
+  return [Math.round(red / weightSum), Math.round(green / weightSum), Math.round(blue / weightSum)]
+}
+
+function weightedMedianColor(samples) {
+  const channelMedian = (channel) => {
+    const values = samples
+      .map((sample) => ({ value: sample[channel], weight: sampleWeight(sample) }))
+      .sort((left, right) => left.value - right.value)
+    const total = values.reduce((sum, item) => sum + item.weight, 0)
+    let accumulated = 0
+    for (const item of values) {
+      accumulated += item.weight
+      if (accumulated >= total / 2) return item.value
+    }
+    return values[values.length - 1]?.value || 0
+  }
+  return [channelMedian(0), channelMedian(1), channelMedian(2)]
+}
+
+function majorityClusterColor(samples) {
+  if (samples.length === 1) return samples[0].slice(0, 3)
+  let first = samples[0].slice(0, 3)
+  let second = first
+  let farthestDistance = -1
+  for (const sample of samples) {
+    const distance = colorDistanceSquared(sample, first)
+    if (distance > farthestDistance) {
+      farthestDistance = distance
+      second = sample.slice(0, 3)
+    }
+  }
+  if (farthestDistance <= 0) return first
+
+  let firstWeight = 0
+  let secondWeight = 0
+  for (let iteration = 0; iteration < 6; iteration += 1) {
+    const firstSum = [0, 0, 0]
+    const secondSum = [0, 0, 0]
+    firstWeight = 0
+    secondWeight = 0
+    for (const sample of samples) {
+      const weight = sampleWeight(sample)
+      const useSecond = colorDistanceSquared(sample, second) < colorDistanceSquared(sample, first)
+      const sum = useSecond ? secondSum : firstSum
+      sum[0] += sample[0] * weight
+      sum[1] += sample[1] * weight
+      sum[2] += sample[2] * weight
+      if (useSecond) secondWeight += weight
+      else firstWeight += weight
+    }
+    if (firstWeight > 0) first = firstSum.map((value) => value / firstWeight)
+    if (secondWeight > 0) second = secondSum.map((value) => value / secondWeight)
+  }
+  const result = secondWeight >= firstWeight ? second : first
+  return result.map((value) => Math.max(0, Math.min(255, Math.round(value))))
+}
+
+function colorDistanceSquared(sample, color) {
+  const red = sample[0] - color[0]
+  const green = sample[1] - color[1]
+  const blue = sample[2] - color[2]
+  return red * red + green * green + blue * blue
+}
+
+function median(values) {
+  const sorted = [...values].sort((left, right) => left - right)
+  const middle = Math.floor(sorted.length / 2)
+  return sorted.length % 2
+    ? sorted[middle]
+    : (sorted[middle - 1] + sorted[middle]) / 2
+}