gotodev-image-optimizer 0.1.0

package/src/core/tuner.ts

@@ -0,0 +1,68 @@
+import sharp from 'sharp'
+import { computeSSIM } from '../utils/ssim.ts'
+import type { OutputFormat } from './types.ts'
+
+const SSIM_THRESHOLD = 0.97
+const QUALITY_RANGE = [70, 75, 80, 85, 90, 95] as const
+
+export interface TunedResult {
+  quality: number
+  ssim: number
+  size: number
+}
+
+export async function autoTuneQuality(
+  source: string | Buffer,
+  format: OutputFormat,
+  options?: {
+    threshold?: number
+    minQuality?: number
+    maxQuality?: number
+  },
+): Promise<TunedResult> {
+  const threshold = options?.threshold ?? SSIM_THRESHOLD
+  const minQ = options?.minQuality ?? 70
+  const maxQ = options?.maxQuality ?? 95
+
+  const candidateQualities = QUALITY_RANGE.filter((q) => q >= minQ && q <= maxQ)
+
+  const original = await sharp(source)
+    .resize(256, 256, { fit: 'inside' })
+    .grayscale()
+    .raw()
+    .toBuffer()
+
+  const originalMeta = await sharp(source).metadata()
+  const resizeW = Math.min(256, originalMeta.width ?? 256)
+  const resizeH = Math.min(256, originalMeta.height ?? 256)
+
+  let best: TunedResult = { quality: minQ, ssim: 1, size: Number.POSITIVE_INFINITY }
+
+  for (const quality of candidateQualities) {
+    const { data, info } = await sharp(source)
+      .resize(resizeW, resizeH, { fit: 'inside' })
+      [format]({ quality })
+      .grayscale()
+      .raw()
+      .toBuffer({ resolveWithObject: true })
+
+    const ssim = computeSSIM(
+      new Uint8Array(original),
+      new Uint8Array(data),
+      info.width,
+      info.height,
+    )
+    const size = Buffer.byteLength(data)
+
+    if (ssim >= threshold && size < best.size) {
+      best = { quality, ssim, size }
+    }
+
+    if (ssim >= threshold && quality === minQ) {
+      return best
+    }
+  }
+
+  if (best.ssim >= threshold) return best
+  return { quality: maxQ, ssim: best.ssim, size: best.size }
+}

package/src/core/types.ts

@@ -0,0 +1,83 @@
+export type ImageFormat = 'jpeg' | 'png' | 'webp' | 'avif' | 'gif' | 'svg' | 'bmp' | 'tiff' | 'ico'
+
+export type OutputFormat = 'avif' | 'webp' | 'jpeg' | 'png'
+
+export type QualityTier = 'ultra' | 'high' | 'medium' | 'low'
+
+export interface TierConfig {
+  quality: number
+  widths: number[]
+}
+
+export interface PluginOptions {
+  tiers?: Partial<Record<QualityTier, TierConfig>>
+  adaptive?: boolean
+  autoTune?: boolean
+  formats?: OutputFormat[]
+  maxFileSize?: number
+  widths?: number[]
+  verbose?: boolean
+  preprocess?: boolean
+  faceDetection?: boolean
+}
+
+export interface ImageVariant {
+  src: string
+  width: number
+  format: OutputFormat
+  size: number
+  integrity: string
+}
+
+export interface ImageMetadata {
+  src: string
+  width: number
+  height: number
+  format: ImageFormat
+  placeholder: string
+  variants: ImageVariant[]
+  tiers: Record<QualityTier, string>
+  blurHash?: string
+}
+
+export interface TileAnalysis {
+  x: number
+  y: number
+  entropy: number
+  edgeDensity: number
+  importance: number
+  centerWeight: number
+}
+
+export interface TileQuality {
+  x: number
+  y: number
+  saliency: number
+  quality: number
+  weight: number
+}
+
+export interface DeviceFingerprint {
+  effectiveType: 'slow-2g' | '2g' | '3g' | '4g' | 'unknown'
+  deviceMemory: number
+  hardwareConcurrency: number
+  devicePixelRatio: number
+  saveData: boolean
+  tier: QualityTier
+}
+
+export interface ManifestEntry {
+  src: string
+  width: number
+  height: number
+  format: ImageFormat
+  placeholder: string
+  tiers: Record<QualityTier, string>
+  variants: ImageVariant[]
+}
+
+export interface BuildManifest {
+  version: string
+  generatedAt: string
+  entries: Record<string, ManifestEntry>
+}

package/src/core/validator.ts

@@ -0,0 +1,63 @@
+import { detectFormat } from './formats.ts'
+import type { ImageFormat } from './types.ts'
+
+export class ValidationError extends Error {
+  constructor(
+    message: string,
+    public readonly code: string,
+  ) {
+    super(message)
+    this.name = 'ValidationError'
+  }
+}
+
+const MAX_FILE_SIZE = 50 * 1024 * 1024
+const ALLOWED_EXTENSIONS = new Set([
+  'jpg',
+  'jpeg',
+  'png',
+  'webp',
+  'avif',
+  'gif',
+  'svg',
+  'bmp',
+  'tiff',
+  'tif',
+  'ico',
+])
+
+export function validatePath(filePath: string): void {
+  if (filePath.includes('..')) {
+    throw new ValidationError('Path traversal detected', 'PATH_TRAVERSAL')
+  }
+  if (filePath.includes('\0')) {
+    throw new ValidationError('Null byte in path', 'NULL_BYTE')
+  }
+}
+
+export function validateExtension(extension: string): void {
+  if (!ALLOWED_EXTENSIONS.has(extension.toLowerCase())) {
+    throw new ValidationError(`Unsupported file extension: .${extension}`, 'UNSUPPORTED_EXTENSION')
+  }
+}
+
+export function validateFileSize(size: number, maxSize: number = MAX_FILE_SIZE): void {
+  if (size > maxSize) {
+    throw new ValidationError(`File size ${size} exceeds maximum ${maxSize}`, 'FILE_TOO_LARGE')
+  }
+}
+
+export function validateImageContent(buffer: Uint8Array, extension: string): ImageFormat {
+  const detectedFormat = detectFormat(buffer, extension)
+  if (!detectedFormat) {
+    throw new ValidationError(`Cannot detect image format for .${extension}`, 'INVALID_FORMAT')
+  }
+  return detectedFormat
+}
+
+export function validateOutputFormat(format: string): void {
+  const allowed: string[] = ['avif', 'webp', 'jpeg', 'png']
+  if (!allowed.includes(format)) {
+    throw new ValidationError(`Unsupported output format: ${format}`, 'UNSUPPORTED_OUTPUT_FORMAT')
+  }
+}

package/src/index.ts

@@ -0,0 +1,13 @@
+export type { GImageProps } from './components/GImage.tsx'
+export { default as GImage } from './components/GImage.tsx'
+export type {
+  BuildManifest,
+  DeviceFingerprint,
+  ImageFormat,
+  ImageMetadata,
+  ManifestEntry,
+  OutputFormat,
+  PluginOptions,
+  QualityTier,
+} from './core/types.ts'
+export { default as gotodevImageOptimizer } from './vite-plugin.ts'

package/src/utils/entropy.ts

@@ -0,0 +1,66 @@
+export function computeEntropy(pixels: Uint8Array): number {
+  const histogram = new Float64Array(256)
+  const len = pixels.length
+
+  for (let i = 0; i < len; i++) {
+    const val = pixels[i]
+    if (val !== undefined) {
+      histogram[val] = (histogram[val] ?? 0) + 1
+    }
+  }
+
+  let entropy = 0
+  const lenF = len
+  for (let i = 0; i < 256; i++) {
+    const count = histogram[i]
+    if (count && count > 0) {
+      const p = count / lenF
+      entropy -= p * Math.log2(p)
+    }
+  }
+
+  return entropy
+}
+
+export function computeEdgeDensity(pixels: Uint8Array, width: number, height: number): number {
+  let edges = 0
+  let total = 0
+
+  for (let y = 1; y < height - 1; y++) {
+    for (let x = 1; x < width - 1; x++) {
+      const idx = y * width + x
+      const center = pixels[idx] ?? 0
+      const right = pixels[idx + 1] ?? 0
+      const down = pixels[idx + width] ?? 0
+      const dx = Math.abs(center - right)
+      const dy = Math.abs(center - down)
+
+      if (dx > 20 || dy > 20) {
+        edges++
+      }
+      total++
+    }
+  }
+
+  return total > 0 ? edges / total : 0
+}
+
+export function computeSaliency(pixels: Uint8Array, width: number, height: number): number {
+  const entropy = computeEntropy(pixels)
+  const edgeDensity = computeEdgeDensity(pixels, width, height)
+  const normalizedEntropy = entropy / 8.0
+  return normalizedEntropy * 0.5 + edgeDensity * 0.5
+}
+
+export function computeCenterWeight(
+  tileX: number,
+  tileY: number,
+  tilesX: number,
+  tilesY: number,
+): number {
+  const cx = (tileX + 0.5) / tilesX - 0.5
+  const cy = (tileY + 0.5) / tilesY - 0.5
+  const dist = Math.sqrt(cx * cx + cy * cy)
+  const normalizedDist = Math.min(1, dist / Math.SQRT1_2)
+  return 1.0 - normalizedDist * 0.4
+}

package/src/utils/hash.ts

@@ -0,0 +1,10 @@
+import { createHash } from 'node:crypto'
+
+export function contentHash(buffer: Buffer): string {
+  return createHash('sha384').update(buffer).digest('base64url').slice(0, 16)
+}
+
+export function sriHash(buffer: Buffer): string {
+  const hash = createHash('sha384').update(buffer).digest('base64')
+  return `sha384-${hash}`
+}

package/src/utils/ssim.ts

@@ -0,0 +1,56 @@
+export function computeSSIM(
+  original: Uint8Array,
+  compressed: Uint8Array,
+  width: number,
+  height: number,
+): number {
+  const K1 = 0.01
+  const K2 = 0.03
+  const L = 255
+  const C1 = (K1 * L) ** 2
+  const C2 = (K2 * L) ** 2
+
+  const windowSize = 8
+  const step = 4
+  let totalSSIM = 0
+  let windows = 0
+
+  for (let y = 0; y <= height - windowSize; y += step) {
+    for (let x = 0; x <= width - windowSize; x += step) {
+      let sumX = 0
+      let sumY = 0
+      let sumX2 = 0
+      let sumY2 = 0
+      let sumXY = 0
+      let count = 0
+
+      for (let wy = 0; wy < windowSize; wy++) {
+        for (let wx = 0; wx < windowSize; wx++) {
+          const idx = (y + wy) * width + (x + wx)
+          const ox = original[idx] ?? 0
+          const cy = compressed[idx] ?? 0
+          sumX += ox
+          sumY += cy
+          sumX2 += ox * ox
+          sumY2 += cy * cy
+          sumXY += ox * cy
+          count++
+        }
+      }
+
+      const muX = sumX / count
+      const muY = sumY / count
+      const sigmaX2 = sumX2 / count - muX * muX
+      const sigmaY2 = sumY2 / count - muY * muY
+      const sigmaXY = sumXY / count - muX * muY
+
+      const numerator = (2 * muX * muY + C1) * (2 * sigmaXY + C2)
+      const denominator = (muX * muX + muY * muY + C1) * (sigmaX2 + sigmaY2 + C2)
+
+      totalSSIM += denominator > 0 ? numerator / denominator : 1
+      windows++
+    }
+  }
+
+  return windows > 0 ? totalSSIM / windows : 1
+}

package/src/utils/worker.ts

@@ -0,0 +1,73 @@
+import { availableParallelism } from 'node:os'
+
+export type WorkerTask<T> = () => Promise<T>
+
+interface QueueItem {
+  task: WorkerTask<unknown>
+  resolve: (value: unknown) => void
+  reject: (reason: unknown) => void
+}
+
+const POOL_SIZE = Math.max(1, availableParallelism() - 1)
+
+export class WorkerPool {
+  private queue: QueueItem[] = []
+  private active = 0
+  private maxWorkers: number
+
+  constructor(maxWorkers: number = POOL_SIZE) {
+    this.maxWorkers = Math.max(1, maxWorkers)
+  }
+
+  async run<T>(task: WorkerTask<T>): Promise<T> {
+    if (this.active < this.maxWorkers) {
+      this.active++
+      try {
+        const result = await task()
+        this.active--
+        this.drain()
+        return result
+      } catch (error) {
+        this.active--
+        this.drain()
+        throw error
+      }
+    }
+
+    return new Promise<T>((resolve, reject) => {
+      this.queue.push({
+        task: task as WorkerTask<unknown>,
+        resolve: resolve as (value: unknown) => void,
+        reject,
+      })
+    })
+  }
+
+  private drain(): void {
+    while (this.active < this.maxWorkers && this.queue.length > 0) {
+      const item = this.queue.shift()
+      if (!item) break
+      this.active++
+      item
+        .task()
+        .then((result) => {
+          this.active--
+          item.resolve(result)
+          this.drain()
+        })
+        .catch((error) => {
+          this.active--
+          item.reject(error)
+          this.drain()
+        })
+    }
+  }
+
+  get pending(): number {
+    return this.queue.length
+  }
+
+  get running(): number {
+    return this.active
+  }
+}

package/src/vite-plugin.ts

@@ -0,0 +1,111 @@
+import { existsSync, mkdirSync } from 'node:fs'
+import { basename, extname, resolve } from 'node:path'
+import type { Plugin, ResolvedConfig } from 'vite'
+import { encodeImage } from './core/encoder.ts'
+import { addToManifest, createManifest, writeManifest } from './core/manifest.ts'
+import type { PluginOptions, QualityTier, TierConfig } from './core/types.ts'
+
+const IMAGE_EXTENSIONS = /\.(jpe?g|png|webp|avif|gif|svg|bmp|tiff?|ico)$/i
+
+const DEFAULT_TIERS: Record<QualityTier, TierConfig> = {
+  ultra: { quality: 90, widths: [480, 768, 1024, 1920] },
+  high: { quality: 80, widths: [480, 768, 1024] },
+  medium: { quality: 60, widths: [480, 768] },
+  low: { quality: 40, widths: [480] },
+}
+
+export default function gotodevImageOptimizer(userOptions: PluginOptions = {}): Plugin {
+  let config: ResolvedConfig
+  let manifest = createManifest()
+  const options: PluginOptions = {
+    tiers: { ...DEFAULT_TIERS, ...userOptions.tiers },
+    adaptive: userOptions.adaptive ?? true,
+    autoTune: userOptions.autoTune ?? true,
+    preprocess: userOptions.preprocess ?? true,
+    faceDetection: userOptions.faceDetection ?? true,
+    formats: userOptions.formats ?? ['avif', 'webp', 'jpeg'],
+    maxFileSize: userOptions.maxFileSize ?? 50 * 1024 * 1024,
+    verbose: userOptions.verbose ?? false,
+  }
+
+  return {
+    name: 'gotodev-image-optimizer',
+    enforce: 'post',
+
+    configResolved(resolved: ResolvedConfig) {
+      config = resolved
+    },
+
+    async buildStart() {
+      manifest = createManifest()
+    },
+
+    async transform(_code: string, id: string) {
+      if (!IMAGE_EXTENSIONS.test(id)) return
+      if (id.includes('node_modules')) return
+
+      const outDir = resolve(config.root, config.build.outDir ?? 'dist', 'assets')
+      if (!existsSync(outDir)) {
+        mkdirSync(outDir, { recursive: true })
+      }
+
+      const tiers = options.tiers as Record<QualityTier, TierConfig>
+
+      const formats = options.formats ?? (['avif', 'webp', 'jpeg'] as const)
+
+      try {
+        const entry = await encodeImage(id, {
+          widths: tiers.high.widths,
+          formats: [...formats],
+          tiers,
+          autoTune: options.autoTune ?? true,
+          adaptive: options.adaptive ?? true,
+          preprocess: options.preprocess ?? true,
+          faceDetection: options.faceDetection ?? true,
+          outDir,
+        })
+
+        const key = basename(id)
+        addToManifest(manifest, key, entry)
+
+        if (options.verbose) {
+          console.log(`[gotodev-image-optimizer] Optimized: ${key}`)
+        }
+
+        const manifestData = JSON.stringify(entry)
+        const manifestPath = resolve(outDir, 'gimage-manifest.json')
+        writeManifest(manifest, manifestPath)
+
+        return {
+          code: `export default ${manifestData};`,
+          map: null,
+        }
+      } catch (error) {
+        if (options.verbose) {
+          console.error(`[gotodev-image-optimizer] Failed to optimize ${id}:`, error)
+        }
+        return {
+          code: `export default ${JSON.stringify({
+            src: basename(id),
+            width: 0,
+            height: 0,
+            format: extname(id).slice(1),
+            placeholder: '',
+            variants: [],
+            tiers: {},
+          })};`,
+          map: null,
+        }
+      }
+    },
+
+    closeBundle() {
+      const outDir = resolve(config.root, config.build.outDir ?? 'dist', 'assets')
+      if (!existsSync(outDir)) {
+        mkdirSync(outDir, { recursive: true })
+      }
+      const manifestPath = resolve(outDir, 'gimage-manifest.json')
+      writeManifest(manifest, manifestPath)
+    },
+  }
+}