中文

unfake.js

unfake.js is a JavaScript library designed to bridge the gap between AI-generated images and clean, usable assets.

Verified

Core facts

Read by a script from the official API, not rewritten by a model.

License
MIT
Languages
JavaScript
Maintainer
jenissimo
Verified

What it is

unfake.js is a JavaScript library designed to bridge the gap between AI-generated images and clean, usable assets. It offers two primary modes of operation: Pixel Art Processor and Image Vectorizer. The library is bundled with a browser-based tool for interactive use. The image-processing core lives in unfake-core, a headless Rust crate compiled to WebAssembly for the browser tool and to a native binary for the CLI.

Main features

  1. The Pixel Art Processor mode is tailored for cleaning up pixel art, especially AI-generated pieces that often suffer from inconsistent pixel sizes, color bleeding and other artifacts.

  2. In the Pixel Art Processor, Intelligent Scale Detection detects the true pixel size of an upscaled pixel art image using runs-based or edge-aware algorithms, including fractional grids, and can also accept a manual scale factor.

  3. The Image Vectorizer mode converts raster images such as PNG and JPG into SVG files, and it is a wrapper around imagetracer.js with pre- and post-processing capabilities powered by the unfake-core WASM filters.

  4. In the Image Vectorizer, Noise Reduction Pre-Processing applies Bilateral or Median blur before vectorization to reduce noise, color quantization simplifies the palette before tracing, Background Handling adds a temporary background during processing for transparent images and removes it from the final SVG, Fine-Tuned Tracing exposes imagetracer.js options, and Palette Extraction extracts the final color palette from the generated SVG.

Getting started

  1. The online demo is browser-based and requires no install.

  2. A ComfyUI integration allows unfake.js to be used directly in ComfyUI workflows.

  3. Modern browsers do not allow ES module imports from local files.

  4. To run the browser tool locally, you must run it via a local http(s) server.

  5. The library is written as ES modules.

  6. You can import and use the library's core functions.

From the README · sh
  python -m http.server 8080
  # or
  python3 -m http.server 8080
From the README · sh
  npx http-server -p 8080
From the README · javascript
import unfake from './lib/index.js';

const fileInput = document.getElementById('my-file-input');
const file = fileInput.files[0];

const options = {
    file: file,
    maxColors: 32,
    detectMethod: 'auto', // 'auto', 'runs', 'edge'
    downscaleMethod: 'dominant',
    snapGrid: true,
    cleanup: { 
        morph: true, 
        jaggy: true 
    }
};

try {
    const { png, imageData, palette, manifest } = await unfake.processImage(options);
    
    // `png` is a Uint8Array of the final PNG file
    const blob = new Blob([png], { type: 'image/png' });
    const url = URL.createObjectURL(blob);
    
    // Now you can use the URL for an <img> tag or download link
    document.getElementById('result-image').src = url;

} catch (error) {
    console.error("Pixel processing failed:", error);
}
From the README · javascript
import unfake from './lib/index.js';

const fileInput = document.getElementById('my-file-input');
const file = fileInput.files[0];

const options = {
    file: file,
    preProcess: {
        enabled: true,
        filter: 'bilateral',
        value: 15
    },
    quantize: {
        enabled: true,
        maxColors: 'auto' // or a number like 16
    },
    // imagetracer.js options
    ltres: 1,
    qtres: 1,
};

try {
    const { svg, palette, manifest } = await unfake.vectorizeImage(options);
    
    // `svg` is a string containing the SVG markup
    document.getElementById('result-container').innerHTML = svg;

} catch (error) {
    console.error("Vectorization failed:", error);
}

Who it is for

The project includes a browser-based tool with an interface. The browser tool can adjust processing parameters in real time with the Tweakpane panel. The browser tool uploads images by dragging them onto the window, selecting a file, or pasting from the clipboard.

The Before/After View of the browser tool shows the original and processed images side by side. The browser tool has a built-in magnifying glass to inspect pixel-level details on the original and result images. The Palette Editor of the browser tool shows the result's color palette and lets colors be replaced interactively.

The browser tool can download the final asset, PNG for pixel art and SVG for vector, or copy it to the clipboard. In Grid Snapping, fractional grids are sampled in place, cell by cell, and where hand-drawn cells jitter around the scale, an elastic grid fits the cell boundaries to the drawn edges. The JavaScript layer in the browser tool is a thin interface covering file I/O, canvas, the Tweakpane UI, and calls into the WASM core.

unfake-core uses no OpenCV. unfake-core uses imagequant for quantization and the png crate for encoding. ImageTracer.js is the engine for the vectorization (raster to SVG) process.

The project describes a Python implementation with Rust-accelerated quantization that offers a 10-20% speedup over the JS version. The project is licensed under the MIT License.

Sources

This page is written from the official sources below. Open them to check the original text.

Verified ·

This page is written by AI from the official sources above and checked automatically. This site has not tested it. Found a mistake? Tell us.