Add squish app source, Dockerfile and HF config

.gitignore

@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Local Netlify folder
+.netlify

Dockerfile

@@ -0,0 +1,47 @@
+# 步骤 1: 选择一个包含 Node.js 的基础镜像
+# 我们选用一个 LTS (长期支持) 版本，alpine 版本体积更小
+FROM node:18-alpine AS builder
+
+# 步骤 2: 设置工作目录
+WORKDIR /app
+
+# 步骤 3: 复制 package.json 和 package-lock.json (或 yarn.lock)
+# 这样做可以利用 Docker 的缓存机制，如果这些文件没变，就不用重新安装依赖
+COPY package*.json ./
+
+# 步骤 4: 安装生产依赖
+# 使用 npm ci 通常比 npm install 更快、更可靠，特别是在 CI/CD 环境中
+RUN npm ci --omit=dev
+
+# 步骤 5: 复制项目的所有代码到工作目录
+COPY . .
+
+# 步骤 6: 构建项目
+# 运行你在本地执行的 build 命令
+RUN npm run build
+
+# -------- 这部分是优化，只保留运行需要的部分 --------
+# 如果你的项目构建后只需要 Node 来运行一个服务（比如 vite preview），
+# 可以继续使用 node 镜像。如果只是纯静态文件，可以用 nginx 或 http-server 等。
+# squish 项目的 `npm run build` 生成静态文件，但 `npm run preview` 启动了一个服务来预览，所以我们还是需要 Node。
+
+# 步骤 7: (可选优化 - 如果 devDependencies 在运行时不需要)
+# 如果运行时不需要开发依赖，可以重新安装纯生产依赖
+# RUN rm -rf node_modules && npm ci --omit=dev --ignore-scripts
+
+# 步骤 8: 暴露端口
+# 查看 package.json，`npm run preview` 实际上是运行 `vite preview`。
+# Vite preview 默认端口通常是 4173 或 5173。查阅 Vite 文档或尝试运行 `npm run preview -- --port 7860` 看看。
+# Hugging Face Spaces 默认喜欢 7860 端口，但它通常也能自动映射。
+# 我们先暴露 vite preview 的默认端口 4173，然后在 Hugging Face 配置里指定它。
+# 如果你想强制用 7860，可以修改下面的 CMD 命令。
+EXPOSE 4173
+
+# 步骤 9: 定义容器启动时运行的命令
+# 使用 `npm run preview -- --host` 让服务监听所有网络接口（Docker 容器内必须）
+# `--host` 参数是传递给 `vite preview` 的
+CMD ["npm", "run", "preview", "--", "--host"]
+
+# --- 如果你想强制用 7860 端口 ---
+# EXPOSE 7860
+# CMD ["npm", "run", "preview", "--", "--host", "--port", "7860"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Addy Osmani
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,11 +1,17 @@
 ---
-title: Pic
-emoji: 🐨
-colorFrom: pink
+title: Squish Image Optimizer
+emoji: 🖼️✨
+colorFrom: green
 colorTo: blue
 sdk: docker
+app_port: 4173 # 这个端口号必须和你 Dockerfile 中 EXPOSE 的端口一致
 pinned: false
-license: apache-2.0
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Squish - 在线图片优化工具
+
+这是一个部署在 Hugging Face Spaces 上的 Squish 应用实例。
+
+它使用 Docker 进行部署。
+
+原始项目地址： [https://github.com/addyosmani/squish](https://github.com/addyosmani/squish)

eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  }
+);

index.html

@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <!-- Primary Meta Tags -->
+    <title>Squish - Batch Browser-based Image Compression</title>
+    <meta name="title" content="Squish - Browser-based Image Compression">
+    <meta name="description" content="Fast, efficient batch image compression right in your browser. Supports AVIF, JPEG, JXL, PNG, and WebP formats with adjustable quality settings.">
+    <meta name="keywords" content="image, compression, squish, batch, avif, jpeg, jxl, png, webp, quality, lossless, lossy, browser, web, app, tool, utility, free, open-source, fast, efficient, simple, easy, fast, quick, online, offline, pwa, progressive, web, application, webapp, web-app">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    
+    <!-- Icons -->
+    <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+    <link rel="icon" type="image/png" sizes="128x128" href="/image-128x128.png" />
+    <link rel="icon" type="image/png" sizes="512x512" href="/image-512x512.png" />
+    <link rel="apple-touch-icon" sizes="512x512" href="/image-512x512.png">
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://squish.addy.ie">
+    <meta property="og:title" content="Squish - Batch Browser-based Image Compression">
+    <meta property="og:description" content="Fast, efficient batch image compression right in your browser. Supports AVIF, JPEG, JXL, PNG, and WebP formats with adjustable quality settings.">
+    <meta property="og:image" content="https://squish.addy.ie/meta.jpg">
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image">
+    <meta property="twitter:url" content="https://squish.addy.ie">
+    <meta property="twitter:title" content="Squish - Batch Browser-based Image Compression">
+    <meta property="twitter:description" content="Fast, efficient batch image compression right in your browser. Supports AVIF, JPEG, JXL, PNG, and WebP formats with adjustable quality settings.">
+    <meta property="twitter:image" content="https://squish.addy.ie/meta.jpg">
+
+    <!-- Theme Color -->
+    <meta name="theme-color" content="#18181b">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,38 @@
+{
+  "name": "squish-image-compressor",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@jsquash/avif": "^1.1.0",
+    "@jsquash/jpeg": "^1.2.0",
+    "@jsquash/jxl": "^1.0.0",
+    "@jsquash/png": "^2.0.0",
+    "@jsquash/webp": "^1.2.0",
+    "lucide-react": "^0.344.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.9.1",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.18",
+    "eslint": "^9.9.1",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.11",
+    "globals": "^15.9.0",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.3.0",
+    "vite": "^5.4.2"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

src/components/CompressionOptions.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import type { OutputType, CompressionOptions } from '../types';
+
+interface CompressionOptionsProps {
+  options: CompressionOptions;
+  outputType: OutputType;
+  onOptionsChange: (options: CompressionOptions) => void;
+  onOutputTypeChange: (type: OutputType) => void;
+}
+
+export function CompressionOptions({
+  options,
+  outputType,
+  onOptionsChange,
+  onOutputTypeChange,
+}: CompressionOptionsProps) {
+  return (
+    <div className="space-y-6 bg-white p-6 rounded-lg shadow-sm">
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-2">
+          Output Format
+        </label>
+        <div className="grid grid-cols-2 sm:grid-cols-5 gap-2">
+          {(['avif', 'jpeg', 'jxl', 'png', 'webp'] as const).map((format) => (
+            <button
+              key={format}
+              className={`px-4 py-2 rounded-md text-sm font-medium uppercase ${
+                outputType === format
+                  ? 'bg-blue-500 text-white'
+                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+              }`}
+              onClick={() => onOutputTypeChange(format)}
+            >
+              {format}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {outputType !== 'png' && (
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            Quality: {options.quality}%
+          </label>
+          <input
+            type="range"
+            min="1"
+            max="100"
+            value={options.quality}
+            onChange={(e) =>
+              onOptionsChange({ quality: Number(e.target.value) })
+            }
+            className="w-full"
+          />
+        </div>
+      )}
+    </div>
+  );
+}

src/components/DownloadAll.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Download } from 'lucide-react';
+
+interface DownloadAllProps {
+  onDownloadAll: () => void;
+  count: number;
+}
+
+export function DownloadAll({ onDownloadAll, count }: DownloadAllProps) {
+  return (
+    <button
+      onClick={onDownloadAll}
+      className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors"
+    >
+      <Download className="w-5 h-5" />
+      Download All ({count} {count === 1 ? 'image' : 'images'})
+    </button>
+  );
+}

src/components/DropZone.tsx

@@ -0,0 +1,70 @@
+import React, { useCallback } from 'react';
+import { Upload } from 'lucide-react';
+import type { ImageFile } from '../types';
+
+interface DropZoneProps {
+  onFilesDrop: (files: ImageFile[]) => void;
+}
+
+export function DropZone({ onFilesDrop }: DropZoneProps) {
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    const files = Array.from(e.dataTransfer.files)
+      .filter(file => file.type.startsWith('image/') || file.name.toLowerCase().endsWith('jxl'))
+      .map(file => ({
+        id: crypto.randomUUID(),
+        file,
+        status: 'pending' as const,
+        originalSize: file.size,
+      }));
+    onFilesDrop(files);
+  }, [onFilesDrop]);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+  }, []);
+
+  const handleFileInput = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || [])
+      .filter(file => file.type.startsWith('image/') || file.name.toLowerCase().endsWith('jxl'))
+      .map(file => ({
+        id: crypto.randomUUID(),
+        file,
+        status: 'pending' as const,
+        originalSize: file.size,
+      }));
+    onFilesDrop(files);
+    e.target.value = '';
+  }, [onFilesDrop]);
+
+  return (
+    <div
+      className="border-2 border-dashed border-gray-300 rounded-lg p-12 text-center hover:border-blue-500 transition-colors"
+      onDrop={handleDrop}
+      onDragOver={handleDragOver}
+    >
+      <input
+        type="file"
+        id="fileInput"
+        className="hidden"
+        multiple
+        accept="image/*,.jxl"
+        onChange={handleFileInput}
+      />
+      <label
+        htmlFor="fileInput"
+        className="cursor-pointer flex flex-col items-center gap-4"
+      >
+        <Upload className="w-12 h-12 text-gray-400" />
+        <div>
+          <p className="text-lg font-medium text-gray-700">
+            Drop images here or click to upload
+          </p>
+          <p className="text-sm text-gray-500">
+            Supports JPEG, PNG, WebP, AVIF, and JXL
+          </p>
+        </div>
+      </label>
+    </div>
+  );
+}

src/components/ImageList.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { X, CheckCircle, AlertCircle, Loader2, Download } from 'lucide-react';
+import type { ImageFile } from '../types';
+import { formatFileSize } from '../utils/imageProcessing';
+import { downloadImage } from '../utils/download';
+
+interface ImageListProps {
+  images: ImageFile[];
+  onRemove: (id: string) => void;
+}
+
+export function ImageList({ images, onRemove }: ImageListProps) {
+  if (images.length === 0) return null;
+
+  return (
+    <div className="space-y-4">
+      {images.map((image) => (
+        <div
+          key={image.id}
+          className="bg-white rounded-lg shadow-sm p-4 flex items-center gap-4"
+        >
+          {image.preview && (
+            <img
+              src={image.preview}
+              alt={image.file.name}
+              className="w-16 h-16 object-cover rounded"
+            />
+          )}
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center justify-between">
+              <p className="text-sm font-medium text-gray-900 truncate">
+                {image.file.name}
+              </p>
+              <div className="flex items-center gap-2">
+                {image.status === 'complete' && (
+                  <button
+                    onClick={() => downloadImage(image)}
+                    className="text-gray-400 hover:text-gray-600"
+                    title="Download"
+                  >
+                    <Download className="w-5 h-5" />
+                  </button>
+                )}
+                <button
+                  onClick={() => onRemove(image.id)}
+                  className="text-gray-400 hover:text-gray-600"
+                  title="Remove"
+                >
+                  <X className="w-5 h-5" />
+                </button>
+              </div>
+            </div>
+            <div className="mt-1 flex items-center gap-2 text-sm text-gray-500">
+              {image.status === 'pending' && (
+                <span>Ready to process</span>
+              )}
+              {image.status === 'processing' && (
+                <span className="flex items-center gap-2">
+                  <Loader2 className="w-4 h-4 animate-spin" />
+                  Processing...
+                </span>
+              )}
+              {image.status === 'complete' && (
+                <span className="flex items-center gap-2 text-green-600">
+                  <CheckCircle className="w-4 h-4" />
+                  Complete
+                </span>
+              )}
+              {image.status === 'error' && (
+                <span className="flex items-center gap-2 text-red-600">
+                  <AlertCircle className="w-4 h-4" />
+                  {image.error || 'Error processing image'}
+                </span>
+              )}
+            </div>
+            <div className="mt-1 text-sm text-gray-500">
+              {formatFileSize(image.originalSize)}
+              {image.compressedSize && (
+                <>
+                  {' → '}
+                  {formatFileSize(image.compressedSize)}{' '}
+                  <span className="text-green-600">
+                    (
+                    {Math.round(
+                      ((image.originalSize - image.compressedSize) /
+                        image.originalSize) *
+                        100
+                    )}
+                    % smaller)
+                  </span>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

src/hooks/useImageProcessing.ts

@@ -0,0 +1,77 @@
+import { useCallback } from 'react';
+import type { ImageFile, OutputType, CompressionOptions } from '../types';
+import { decode, encode, getFileType } from '../utils/imageProcessing';
+
+export function useImageProcessing(
+  options: CompressionOptions,
+  outputType: OutputType,
+  setImages: React.Dispatch<React.SetStateAction<ImageFile[]>>
+) {
+  const processImageFile = useCallback(async (image: ImageFile) => {
+    try {
+      setImages((prev) =>
+        prev.map((img) =>
+          img.id === image.id
+            ? { ...img, status: 'processing' as const }
+            : img
+        )
+      );
+
+      const fileBuffer = await image.file.arrayBuffer();
+      const sourceType = getFileType(image.file);
+      
+      if (!fileBuffer.byteLength) {
+        throw new Error('Empty file');
+      }
+
+      // Decode the image
+      const imageData = await decode(sourceType, fileBuffer);
+      
+      if (!imageData || !imageData.width || !imageData.height) {
+        throw new Error('Invalid image data');
+      }
+
+      // Encode to the target format
+      const compressedBuffer = await encode(outputType, imageData, options);
+      
+      if (!compressedBuffer.byteLength) {
+        throw new Error('Failed to compress image');
+      }
+
+      const blob = new Blob([compressedBuffer], { type: `image/${outputType}` });
+      const preview = URL.createObjectURL(blob);
+
+      setImages((prev) =>
+        prev.map((img) =>
+          img.id === image.id
+            ? {
+                ...img,
+                status: 'complete' as const,
+                preview,
+                blob,
+                compressedSize: compressedBuffer.byteLength,
+                outputType,
+              }
+            : img
+        )
+      );
+    } catch (error) {
+      console.error('Error processing image:', error);
+      setImages((prev) =>
+        prev.map((img) =>
+          img.id === image.id
+            ? {
+                ...img,
+                status: 'error' as const,
+                error: error instanceof Error 
+                  ? error.message 
+                  : 'Failed to process image',
+              }
+            : img
+        )
+      );
+    }
+  }, [options, outputType, setImages]);
+
+  return { processImage: processImageFile };
+}

src/hooks/useImageQueue.ts

@@ -0,0 +1,148 @@
+import { useState, useCallback, useEffect, useRef } from 'react';
+import type { ImageFile, OutputType, CompressionOptions } from '../types';
+import { decode, encode, getFileType } from '../utils/imageProcessing';
+
+export function useImageQueue(
+  options: CompressionOptions,
+  outputType: OutputType,
+  setImages: React.Dispatch<React.SetStateAction<ImageFile[]>>
+) {
+  const MAX_PARALLEL_PROCESSING = 3;
+  const [queue, setQueue] = useState<string[]>([]);
+  const processingCount = useRef(0);
+  const processingImages = useRef(new Set<string>());
+
+  const processImage = useCallback(async (image: ImageFile) => {
+    if (processingImages.current.has(image.id)) {
+      return; // Skip if already processing this image
+    }
+    processingImages.current.add(image.id);
+    processingCount.current++;
+
+    try {
+      setImages((prev) =>
+        prev.map((img) =>
+          img.id === image.id
+            ? { ...img, status: 'processing' as const }
+            : img
+        )
+      );
+
+      const fileBuffer = await image.file.arrayBuffer();
+      const sourceType = getFileType(image.file);
+      
+      if (!fileBuffer.byteLength) {
+        throw new Error('Empty file');
+      }
+
+      // Decode the image
+      const imageData = await decode(sourceType, fileBuffer);
+      
+      if (!imageData || !imageData.width || !imageData.height) {
+        throw new Error('Invalid image data');
+      }
+
+      // Encode to the target format
+      const compressedBuffer = await encode(outputType, imageData, options);
+      
+      if (!compressedBuffer.byteLength) {
+        throw new Error('Failed to compress image');
+      }
+
+      const blob = new Blob([compressedBuffer], { type: `image/${outputType}` });
+      const preview = URL.createObjectURL(blob);
+
+      setImages((prev) =>
+        prev.map((img) =>
+          img.id === image.id
+            ? {
+                ...img,
+                status: 'complete' as const,
+                preview,
+                blob,
+                compressedSize: compressedBuffer.byteLength,
+                outputType,
+              }
+            : img
+        )
+      );
+    } catch (error) {
+      console.error('Error processing image:', error);
+      setImages((prev) =>
+        prev.map((img) =>
+          img.id === image.id
+            ? {
+                ...img,
+                status: 'error' as const,
+                error: error instanceof Error 
+                  ? error.message 
+                  : 'Failed to process image',
+              }
+            : img
+        )
+      );
+    } finally {
+      processingImages.current.delete(image.id);
+      processingCount.current--;
+      // Try to process next images if any
+      setTimeout(processNextInQueue, 0);
+    }
+  }, [options, outputType, setImages]);
+
+  const processNextInQueue = useCallback(() => {
+    console.log('Processing next in queue:', {
+      queueLength: queue.length,
+      processingCount: processingCount.current,
+      processingImages: [...processingImages.current]
+    });
+
+    if (queue.length === 0) return;
+
+    // Get all images we can process in this batch
+    setImages(prev => {
+      const imagesToProcess = prev.filter(img => 
+        queue.includes(img.id) && 
+        !processingImages.current.has(img.id) &&
+        processingCount.current < MAX_PARALLEL_PROCESSING
+      );
+
+      console.log('Found images to process:', imagesToProcess.length);
+
+      if (imagesToProcess.length === 0) return prev;
+
+      // Start processing these images
+      imagesToProcess.forEach((image, index) => {
+        setTimeout(() => {
+          processImage(image);
+        }, index * 100);
+      });
+
+      // Remove these from queue
+      setQueue(current => current.filter(id => 
+        !imagesToProcess.some(img => img.id === id)
+      ));
+
+      // Update status to queued
+      return prev.map(img => 
+        imagesToProcess.some(processImg => processImg.id === img.id)
+          ? { ...img, status: 'queued' as const }
+          : img
+      );
+    });
+  }, [queue, processImage, setImages]);
+
+  // Start processing when queue changes
+  useEffect(() => {
+    console.log('Queue changed:', queue.length);
+    if (queue.length > 0) {
+      processNextInQueue();
+    }
+  }, [queue, processNextInQueue]);
+
+  const addToQueue = useCallback((imageId: string) => {
+    console.log('Adding to queue:', imageId);
+    setQueue(prev => [...prev, imageId]);
+  }, []);
+
+  return { addToQueue };
+}

src/types/encoders.ts

@@ -0,0 +1,16 @@
+export interface AvifEncodeOptions {
+  quality?: number;
+  effort?: number;
+}
+
+export interface JpegEncodeOptions {
+  quality?: number;
+}
+
+export interface JxlEncodeOptions {
+  quality?: number;
+}
+
+export interface WebpEncodeOptions {
+  quality?: number;
+}

src/utils/canvas.ts

@@ -0,0 +1,19 @@
+// Canvas utility functions
+export function createCanvas(width: number, height: number): HTMLCanvasElement {
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+  return canvas;
+}
+
+export function imageDataToCanvas(imageData: ImageData): HTMLCanvasElement {
+  const canvas = createCanvas(imageData.width, imageData.height);
+  const ctx = canvas.getContext('2d')!;
+  ctx.putImageData(imageData, 0, 0);
+  return canvas;
+}
+
+export function canvasToImageData(canvas: HTMLCanvasElement): ImageData {
+  const ctx = canvas.getContext('2d')!;
+  return ctx.getImageData(0, 0, canvas.width, canvas.height);
+}

src/utils/download.ts

@@ -0,0 +1,17 @@
+import type { ImageFile } from '../types';
+
+export function downloadImage(image: ImageFile) {
+  if (!image.blob || !image.outputType) return;
+  
+  const link = document.createElement('a');
+  link.href = URL.createObjectURL(image.blob);
+  link.download = `${image.file.name.split('.')[0]}.${image.outputType}`;
+  link.click();
+  URL.revokeObjectURL(link.href);
+}
+
+export function downloadAllImages(images: ImageFile[]) {
+  images
+    .filter(image => image.status === 'complete' && image.blob)
+    .forEach(downloadImage);
+}

src/utils/formatDefaults.ts

@@ -0,0 +1,12 @@
+import type { FormatQualitySettings } from '../types';
+
+export const DEFAULT_QUALITY_SETTINGS: FormatQualitySettings = {
+  avif: 50,
+  jpeg: 75,
+  jxl: 75,
+  webp: 75,
+};
+
+export function getDefaultQualityForFormat(format: keyof FormatQualitySettings): number {
+  return DEFAULT_QUALITY_SETTINGS[format];
+}

src/utils/imageProcessing.ts

@@ -0,0 +1,90 @@
+import * as avif from '@jsquash/avif';
+import * as jpeg from '@jsquash/jpeg';
+import * as jxl from '@jsquash/jxl';
+import * as png from '@jsquash/png';
+import * as webp from '@jsquash/webp';
+import type { OutputType, CompressionOptions } from '../types';
+import type { AvifEncodeOptions, JpegEncodeOptions, JxlEncodeOptions, WebpEncodeOptions } from '../types/encoders';
+import { ensureWasmLoaded } from './wasm';
+
+export async function decode(sourceType: string, fileBuffer: ArrayBuffer): Promise<ImageData> {
+  // Ensure WASM is loaded for the source type
+  await ensureWasmLoaded(sourceType as OutputType);
+
+  try {
+    switch (sourceType) {
+      case 'avif':
+        return await avif.decode(fileBuffer);
+      case 'jpeg':
+      case 'jpg':
+        return await jpeg.decode(fileBuffer);
+      case 'jxl':
+        return await jxl.decode(fileBuffer);
+      case 'png':
+        return await png.decode(fileBuffer);
+      case 'webp':
+        return await webp.decode(fileBuffer);
+      default:
+        throw new Error(`Unsupported source type: ${sourceType}`);
+    }
+  } catch (error) {
+    console.error(`Failed to decode ${sourceType} image:`, error);
+    throw new Error(`Failed to decode ${sourceType} image`);
+  }
+}
+
+export async function encode(outputType: OutputType, imageData: ImageData, options: CompressionOptions): Promise<ArrayBuffer> {
+  // Ensure WASM is loaded for the output type
+  await ensureWasmLoaded(outputType);
+
+  try {
+    switch (outputType) {
+      case 'avif': {
+        const avifOptions: AvifEncodeOptions = {
+          quality: options.quality,
+          effort: 4 // Medium encoding effort
+        };
+        return await avif.encode(imageData, avifOptions as any);
+      }
+      case 'jpeg': {
+        const jpegOptions: JpegEncodeOptions = {
+          quality: options.quality
+        };
+        return await jpeg.encode(imageData, jpegOptions as any);
+      }
+      case 'jxl': {
+        const jxlOptions: JxlEncodeOptions = {
+          quality: options.quality
+        };
+        return await jxl.encode(imageData, jxlOptions as any);
+      }
+      case 'png':
+        return await png.encode(imageData);
+      case 'webp': {
+        const webpOptions: WebpEncodeOptions = {
+          quality: options.quality
+        };
+        return await webp.encode(imageData, webpOptions as any);
+      }
+      default:
+        throw new Error(`Unsupported output type: ${outputType}`);
+    }
+  } catch (error) {
+    console.error(`Failed to encode to ${outputType}:`, error);
+    throw new Error(`Failed to encode to ${outputType}`);
+  }
+}
+
+export function getFileType(file: File): string {
+  if (file.name.toLowerCase().endsWith('jxl')) return 'jxl';
+  const type = file.type.split('/')[1];
+  return type === 'jpeg' ? 'jpg' : type;
+}
+
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+}

src/utils/resize.ts

@@ -0,0 +1,67 @@
+import { createCanvas, imageDataToCanvas } from './canvas';
+
+interface ResizeOptions {
+  width?: number;
+  height?: number;
+  maintainAspectRatio?: boolean;
+}
+
+export function calculateDimensions(
+  originalWidth: number,
+  originalHeight: number,
+  options: ResizeOptions
+): { width: number; height: number } {
+  const { width: targetWidth = 0, height: targetHeight = 0, maintainAspectRatio = true } = options;
+
+  if (!targetWidth && !targetHeight) {
+    return { width: originalWidth, height: originalHeight };
+  }
+
+  let finalWidth = targetWidth || originalWidth;
+  let finalHeight = targetHeight || originalHeight;
+
+  if (maintainAspectRatio) {
+    const aspectRatio = originalWidth / originalHeight;
+
+    if (targetWidth && !targetHeight) {
+      finalWidth = targetWidth;
+      finalHeight = Math.round(targetWidth / aspectRatio);
+    } else if (!targetWidth && targetHeight) {
+      finalHeight = targetHeight;
+      finalWidth = Math.round(targetHeight * aspectRatio);
+    } else {
+      const widthRatio = targetWidth / originalWidth;
+      const heightRatio = targetHeight / originalHeight;
+      const ratio = Math.min(widthRatio, heightRatio);
+
+      finalWidth = Math.round(originalWidth * ratio);
+      finalHeight = Math.round(originalHeight * ratio);
+    }
+  }
+
+  return {
+    width: Math.max(1, finalWidth),
+    height: Math.max(1, finalHeight),
+  };
+}
+
+export function resizeImage(imageData: ImageData, options: ResizeOptions): ImageData {
+  const sourceCanvas = imageDataToCanvas(imageData);
+  
+  const { width, height } = calculateDimensions(
+    imageData.width,
+    imageData.height,
+    options
+  );
+
+  const destCanvas = createCanvas(width, height);
+  const ctx = destCanvas.getContext('2d')!;
+
+  // Use better image scaling algorithm
+  ctx.imageSmoothingEnabled = true;
+  ctx.imageSmoothingQuality = 'high';
+  
+  ctx.drawImage(sourceCanvas, 0, 0, width, height);
+  
+  return ctx.getImageData(0, 0, width, height);
+}

src/utils/wasm.ts

@@ -0,0 +1,32 @@
+import type { OutputType } from '../types';
+
+// Track WASM module initialization
+const wasmInitialized = new Map<OutputType, boolean>();
+
+export async function ensureWasmLoaded(format: OutputType): Promise<void> {
+  if (wasmInitialized.get(format)) return;
+  
+  try {
+    switch (format) {
+      case 'avif':
+        await import('@jsquash/avif');
+        break;
+      case 'jpeg':
+        await import('@jsquash/jpeg');
+        break;
+      case 'jxl':
+        await import('@jsquash/jxl');
+        break;
+      case 'png':
+        await import('@jsquash/png');
+        break;
+      case 'webp':
+        await import('@jsquash/webp');
+        break;
+    }
+    wasmInitialized.set(format, true);
+  } catch (error) {
+    console.error(`Failed to initialize WASM for ${format}:`, error);
+    throw new Error(`Failed to initialize ${format} support`);
+  }
+}

tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

tsconfig.app.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

tsconfig.node.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  optimizeDeps: {
+    exclude: [
+      '@jsquash/avif',
+      '@jsquash/jpeg',
+      '@jsquash/jxl',
+      '@jsquash/png',
+      '@jsquash/webp',
+    ],
+  },
+  build: {
+    target: 'esnext',
+    rollupOptions: {
+      output: {
+        format: 'es',
+        inlineDynamicImports: true
+      }
+    }
+  },
+  worker: {
+    format: 'es'
+  }
+});