gotodev-image-optimizer 0.1.0 → 0.1.2

package/src/adaptive/predictive.ts

@@ -1,91 +0,0 @@
-interface PredictiveState {
-  velocity: number
-  direction: 'up' | 'down' | 'none'
-  lastScrollY: number
-  lastTimestamp: number
-  preloadDistance: number
-}
-
-const MIN_PRELOAD = 600
-const MAX_PRELOAD = 3000
-const VELOCITY_SAMPLES = 5
-
-export class PredictiveLoader {
-  private state: PredictiveState = {
-    velocity: 0,
-    direction: 'none',
-    lastScrollY: 0,
-    lastTimestamp: Date.now(),
-    preloadDistance: MIN_PRELOAD,
-  }
-
-  private velocities: number[] = []
-  private observer: IntersectionObserver | null = null
-  constructor() {
-    if (typeof window !== 'undefined') {
-      this.state.lastScrollY = window.scrollY
-      window.addEventListener('scroll', this.onScroll, { passive: true })
-    }
-  }
-
-  private onScroll = (): void => {
-    const now = Date.now()
-    const dt = Math.max(1, now - this.state.lastTimestamp)
-    const dy = Math.abs(window.scrollY - this.state.lastScrollY)
-    const velocity = dy / dt
-
-    this.velocities.push(velocity)
-    if (this.velocities.length > VELOCITY_SAMPLES) {
-      this.velocities.shift()
-    }
-
-    const avgVelocity = this.velocities.reduce((a, b) => a + b, 0) / this.velocities.length
-
-    this.state.velocity = avgVelocity
-    this.state.direction =
-      window.scrollY > this.state.lastScrollY
-        ? 'down'
-        : window.scrollY < this.state.lastScrollY
-          ? 'up'
-          : 'none'
-    this.state.lastScrollY = window.scrollY
-    this.state.lastTimestamp = now
-    this.state.preloadDistance = Math.min(MAX_PRELOAD, MIN_PRELOAD + avgVelocity * 5000)
-  }
-
-  getPreloadMargin(): string {
-    return `${this.state.preloadDistance}px`
-  }
-
-  observe(element: HTMLElement, callback: (entry: IntersectionObserverEntry) => void): void {
-    this.observer?.disconnect()
-    this.observer = new IntersectionObserver(
-      (entries) => {
-        for (const entry of entries) {
-          if (entry.isIntersecting) {
-            callback(entry)
-            this.observer?.unobserve(entry.target)
-          }
-        }
-      },
-      {
-        rootMargin: this.getPreloadMargin(),
-        threshold: 0.01,
-      },
-    )
-
-    this.observer.observe(element)
-  }
-
-  unobserve(element: HTMLElement): void {
-    this.observer?.unobserve(element)
-  }
-
-  destroy(): void {
-    this.observer?.disconnect()
-    if (typeof window !== 'undefined') {
-      window.removeEventListener('scroll', this.onScroll)
-    }
-    this.observer = null
-  }
-}

package/src/adaptive/tier.ts

@@ -1,34 +0,0 @@
-import type { ManifestEntry, QualityTier } from '../core/types.ts'
-
-export function resolveTierSrc(metadata: ManifestEntry, tier: QualityTier): string {
-  const tierSrc = metadata.tiers[tier]
-  if (tierSrc) return tierSrc
-
-  const tierOrder: QualityTier[] = ['ultra', 'high', 'medium', 'low']
-  const tierIndex = tierOrder.indexOf(tier)
-
-  for (let i = tierIndex - 1; i >= 0; i--) {
-    const fallbackTier = tierOrder[i]
-    if (!fallbackTier) break
-    const fallback = metadata.tiers[fallbackTier]
-    if (fallback) return fallback
-  }
-
-  return metadata.src
-}
-
-export function resolveVariantsForTier(
-  metadata: ManifestEntry,
-  tier: QualityTier,
-): ManifestEntry['variants'] {
-  const tierWidths: Record<QualityTier, number> = {
-    ultra: 1920,
-    high: 1024,
-    medium: 768,
-    low: 480,
-  }
-
-  const maxWidth = tierWidths[tier]
-
-  return metadata.variants.filter((v) => v.width <= maxWidth)
-}

package/src/components/GImage.tsx

@@ -1,218 +0,0 @@
-import { type ImgHTMLAttributes, useCallback, useEffect, useRef, useState } from 'react'
-import { getDeviceFingerprint, listenForChanges } from '../adaptive/fingerprint.ts'
-import { PredictiveLoader } from '../adaptive/predictive.ts'
-import { isAnimatedFormat } from '../core/formats.ts'
-import type { ManifestEntry, QualityTier } from '../core/types.ts'
-
-export interface GImageProps
-  extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'srcSet' | 'width' | 'height'> {
-  src: ManifestEntry | string
-  alt: string
-  priority?: boolean
-  sizes?: string
-  disableAdaptive?: boolean
-  placeholder?: 'blur' | 'none'
-  onLoad?: () => void
-  onError?: () => void
-}
-
-interface LoadState {
-  loaded: boolean
-  error: boolean
-  currentTier: QualityTier
-}
-
-export default function GImage({
-  src,
-  alt,
-  priority = false,
-  sizes = '100vw',
-  disableAdaptive = false,
-  placeholder: placeholderMode = 'blur',
-  className,
-  style,
-  loading: loadingProp,
-  onLoad,
-  onError,
-  ...imgProps
-}: GImageProps) {
-  const imgRef = useRef<HTMLImageElement>(null)
-  const containerRef = useRef<HTMLDivElement>(null)
-  const predictiveRef = useRef<PredictiveLoader | null>(null)
-  const [loadState, setLoadState] = useState<LoadState>({
-    loaded: false,
-    error: false,
-    currentTier: 'ultra',
-  })
-
-  const metadata: ManifestEntry | null =
-    typeof src === 'string'
-      ? null
-      : {
-          src: src.src,
-          width: src.width,
-          height: src.height,
-          format: src.format,
-          placeholder: src.placeholder,
-          variants: src.variants,
-          tiers: src.tiers,
-        }
-
-  useEffect(() => {
-    if (disableAdaptive || !metadata) {
-      setLoadState((prev) => ({ ...prev, currentTier: 'ultra' }))
-      return
-    }
-
-    const fp = getDeviceFingerprint()
-    setLoadState((prev) => ({ ...prev, currentTier: fp.tier }))
-
-    const cleanup = listenForChanges((newFp) => {
-      setLoadState((prev) => ({ ...prev, currentTier: newFp.tier }))
-    })
-
-    return cleanup
-  }, [disableAdaptive, metadata])
-
-  useEffect(() => {
-    if (priority || loadingProp === 'eager') {
-      setLoadState((prev) => ({ ...prev, loaded: true }))
-      return
-    }
-
-    if (!containerRef.current) return
-
-    predictiveRef.current = new PredictiveLoader()
-    predictiveRef.current.observe(containerRef.current, () => {
-      setLoadState((prev) => ({ ...prev, loaded: true }))
-    })
-
-    return () => {
-      predictiveRef.current?.destroy()
-    }
-  }, [priority, loadingProp])
-
-  const handleLoad = useCallback(() => {
-    setLoadState((prev) => ({ ...prev, loaded: true }))
-    onLoad?.()
-  }, [onLoad])
-
-  const handleError = useCallback(() => {
-    setLoadState((prev) => ({ ...prev, error: true }))
-    onError?.()
-  }, [onError])
-
-  if (!metadata) {
-    return (
-      <img
-        ref={imgRef}
-        {...imgProps}
-        src={typeof src === 'string' ? src : ''}
-        alt={alt ?? ''}
-        className={className}
-        style={style}
-        loading={priority ? 'eager' : (loadingProp ?? 'lazy')}
-        onLoad={handleLoad}
-        onError={handleError}
-      />
-    )
-  }
-
-  const aspectRatio =
-    metadata.width && metadata.height ? (metadata.height / metadata.width) * 100 : 0
-
-  const tier = loadState.currentTier
-  const tierVariants = metadata.variants.filter((v) => {
-    const tierWidths: Record<QualityTier, number> = {
-      ultra: 99999,
-      high: 1920,
-      medium: 1024,
-      low: 768,
-    }
-    return v.width <= tierWidths[tier]
-  })
-
-  const hasPlaceholder = placeholderMode === 'blur' && !!metadata.placeholder && !loadState.loaded
-  const isAnimated = isAnimatedFormat(metadata.format)
-
-  const pictureContent = (
-    <picture>
-      {!isAnimated && tierVariants.length > 0 && (
-        <>
-          <source
-            type="image/avif"
-            srcSet={tierVariants
-              .filter((v) => v.format === 'avif')
-              .map((v) => `${v.src} ${v.width}w`)
-              .join(', ')}
-            sizes={sizes}
-          />
-          <source
-            type="image/webp"
-            srcSet={tierVariants
-              .filter((v) => v.format === 'webp')
-              .map((v) => `${v.src} ${v.width}w`)
-              .join(', ')}
-            sizes={sizes}
-          />
-        </>
-      )}
-      <img
-        ref={imgRef}
-        {...imgProps}
-        src={tierVariants.find((v) => v.format === 'jpeg')?.src ?? metadata.src}
-        srcSet={
-          tierVariants
-            .filter((v) => v.format === 'jpeg' || v.format === 'png')
-            .map((v) => `${v.src} ${v.width}w`)
-            .join(', ') || undefined
-        }
-        sizes={sizes}
-        alt={alt ?? ''}
-        width={metadata.width}
-        height={metadata.height}
-        loading={loadState.loaded && !priority ? 'lazy' : 'eager'}
-        fetchPriority={priority ? 'high' : undefined}
-        decoding={priority ? 'auto' : 'async'}
-        className={className}
-        style={{
-          width: '100%',
-          height: 'auto',
-          display: 'block',
-          background: hasPlaceholder ? `${metadata.placeholder} center/cover no-repeat` : undefined,
-          filter: hasPlaceholder ? 'blur(20px)' : undefined,
-          transition: 'filter 0.4s ease-out, opacity 0.4s ease-out',
-          opacity: loadState.loaded ? 1 : 0.99,
-          ...style,
-        }}
-        onLoad={handleLoad}
-        onError={handleError}
-      />
-    </picture>
-  )
-
-  if (aspectRatio > 0) {
-    return (
-      <div
-        ref={containerRef}
-        style={{
-          position: 'relative',
-          width: '100%',
-          paddingBottom: `${aspectRatio}%`,
-          overflow: 'hidden',
-        }}
-      >
-        <div
-          style={{
-            position: 'absolute',
-            inset: 0,
-          }}
-        >
-          {pictureContent}
-        </div>
-      </div>
-    )
-  }
-
-  return <div ref={containerRef}>{pictureContent}</div>
-}

package/src/core/analyzer.ts

@@ -1,189 +0,0 @@
-import sharp from 'sharp'
-import { computeCenterWeight, computeEdgeDensity, computeEntropy } from '../utils/entropy.ts'
-import type { TileAnalysis, TileQuality } from './types.ts'
-
-export interface AnalysisResult {
-  tiles: TileAnalysis[]
-  tileQualities: TileQuality[]
-  overallImportance: number
-  tileSize: number
-  width: number
-  height: number
-}
-
-function computeSkinRatio(pixels: Uint8Array, width: number, height: number): number {
-  let skin = 0
-  const total = width * height
-
-  for (let i = 0; i < total; i++) {
-    const r = pixels[i * 3] ?? 0
-    const g = pixels[i * 3 + 1] ?? 0
-    const b = pixels[i * 3 + 2] ?? 0
-
-    const cr = (r - 128) * 0.713 + (g - 128) * -0.287 + (b - 128) * -0.426 + 128
-    const cb = (r - 128) * -0.169 + (g - 128) * -0.331 + (b - 128) * 0.5 + 128
-
-    if (cr >= 133 && cr <= 173 && cb >= 77 && cb <= 127) {
-      skin++
-    }
-  }
-
-  return total > 0 ? skin / total : 0
-}
-
-export async function analyzeImage(
-  imagePath: string,
-  tileSize = 64,
-  detectFaces = false,
-): Promise<AnalysisResult> {
-  const metadata = await sharp(imagePath).metadata()
-  const width = metadata.width ?? 0
-  const height = metadata.height ?? 0
-
-  if (width === 0 || height === 0) {
-    throw new Error('Could not read image dimensions')
-  }
-
-  const tilesX = Math.ceil(width / tileSize)
-  const tilesY = Math.ceil(height / tileSize)
-  const tiles: TileAnalysis[] = []
-
-  let totalImportance = 0
-
-  for (let ty = 0; ty < tilesY; ty++) {
-    for (let tx = 0; tx < tilesX; tx++) {
-      const left = tx * tileSize
-      const top = ty * tileSize
-      const tileW = Math.min(tileSize, width - left)
-      const tileH = Math.min(tileSize, height - top)
-
-      const buffer = await sharp(imagePath)
-        .extract({ left, top, width: tileW, height: tileH })
-        .raw()
-        .toBuffer()
-
-      const raw = new Uint8Array(buffer)
-      const pixelCount = tileW * tileH
-      const gray = new Uint8Array(pixelCount)
-
-      for (let i = 0; i < pixelCount; i++) {
-        const r = raw[i * 3] ?? 0
-        const g = raw[i * 3 + 1] ?? 0
-        const b = raw[i * 3 + 2] ?? 0
-        gray[i] = Math.round(r * 0.299 + g * 0.587 + b * 0.114)
-      }
-
-      const entropy = computeEntropy(gray)
-      const edgeDensity = computeEdgeDensity(gray, tileW, tileH)
-      const centerWeight = computeCenterWeight(tx, ty, tilesX, tilesY)
-
-      const normalizedEntropy = entropy / 8.0
-      let importance = Math.min(1, normalizedEntropy * 0.4 + edgeDensity * 0.6)
-
-      if (detectFaces && importance < 0.9) {
-        const skinRatio = computeSkinRatio(raw, tileW, tileH)
-        if (skinRatio > 0.05) {
-          importance = Math.min(1, importance + 0.3)
-        }
-      }
-
-      tiles.push({
-        x: tx,
-        y: ty,
-        entropy,
-        edgeDensity,
-        importance,
-        centerWeight,
-      })
-
-      totalImportance += importance
-    }
-  }
-
-  const tileQualities = computeTileQualities(tiles)
-
-  return {
-    tiles,
-    tileQualities,
-    overallImportance: tiles.length > 0 ? totalImportance / tiles.length : 0,
-    tileSize,
-    width,
-    height,
-  }
-}
-
-function computeTileQualities(tiles: TileAnalysis[]): TileQuality[] {
-  const tileQualities: TileQuality[] = []
-
-  for (const tile of tiles) {
-    let importance = tile.importance
-
-    // Edge-density bonus: protect text and fine details
-    if (tile.edgeDensity > 0.3) {
-      const bonus = Math.min(0.2, (tile.edgeDensity - 0.3) * 0.5)
-      importance = Math.min(1, importance + bonus)
-    }
-
-    // Center-weight bonus: photo subjects tend to be centered
-    if (tile.centerWeight > 0.7) {
-      importance = Math.min(1, importance + (tile.centerWeight - 0.7) * 0.3)
-    }
-
-    tileQualities.push({
-      x: tile.x,
-      y: tile.y,
-      saliency: importance,
-      quality: 0,
-      weight: importance ** 2 + 0.1,
-    })
-  }
-
-  return tileQualities
-}
-
-export function computeTargetQuality(
-  analysis: AnalysisResult,
-  baseQuality = 80,
-  options?: {
-    minQuality?: number
-    maxQuality?: number
-  },
-): number {
-  if (analysis.tiles.length === 0) return baseQuality
-
-  const minQuality = options?.minQuality ?? Math.max(20, baseQuality - 30)
-  const maxQuality = options?.maxQuality ?? Math.min(95, baseQuality + 10)
-
-  const tileQualities = analysis.tileQualities
-
-  // Compute per-tile quality and weight
-  const weighted = tileQualities.map((tq) => ({
-    quality: minQuality + tq.saliency * (maxQuality - minQuality),
-    weight: tq.weight,
-  }))
-
-  // Sort by quality descending
-  weighted.sort((a, b) => b.quality - a.quality)
-
-  // Top 30% tiles get 70% weight — prioritizes important content
-  const splitIndex = Math.max(1, Math.ceil(weighted.length * 0.3))
-  const highPriority = weighted.slice(0, splitIndex)
-  const lowPriority = weighted.slice(splitIndex)
-
-  const highW = highPriority.reduce((s, t) => s + t.weight, 0)
-  const lowW = lowPriority.reduce((s, t) => s + t.weight, 0)
-
-  const highAvg = highPriority.reduce((s, t) => s + t.quality * t.weight, 0) / (highW || 1)
-  const lowAvg = lowPriority.reduce((s, t) => s + t.quality * t.weight, 0) / (lowW || 1)
-
-  const weightedQuality = highAvg * 0.7 + lowAvg * 0.3
-
-  // Variance boost: high variance = mixed content → protect detail
-  const qualities = weighted.map((t) => t.quality)
-  const mean = qualities.reduce((s, q) => s + q, 0) / qualities.length
-  const variance = qualities.reduce((s, q) => s + (q - mean) ** 2, 0) / qualities.length
-  const stdDev = Math.sqrt(variance)
-  const varianceBoost = stdDev > 12 ? Math.min(5, stdDev * 0.12) : 0
-
-  return Math.round(Math.min(maxQuality, Math.max(minQuality, weightedQuality + varianceBoost)))
-}