diff --git a/README.md b/README.md
index 96c06de..75489c0 100644
--- a/README.md
+++ b/README.md
@@ -24,7 +24,11 @@ Implements ideas from the following papers:
 - [Measuring perceived color difference using YIQ NTSC transmission color space in mobile applications](https://www.spiedigitallibrary.org/conference-proceedings-of-spie/8011/80119D/Simple-perceptual-color-space-for-color-specification-and-real-time/10.1117/12.901997.full) (2010, Yuriy Kotsarenko, Fernando Ramos)
 - [Anti-aliased pixel and intensity slope detector](https://www.researchgate.net/publication/234126755_Anti-aliased_Pixel_and_Intensity_Slope_Detector) (2009, Vytautas Vyšniauskas)
 
-## [Demo](https://observablehq.com/@mourner/pixelmatch-demo)
+## Demo
+
+[observablehq](https://observablehq.com/@mourner/pixelmatch-demo)
+
+[Github page](https://mapbox.github.io/pixelmatch/demo)
 
 ## Example output
 
@@ -105,7 +109,7 @@ Or use in the browser from a CDN:
 
 ```html
 <script type="module">
-	import pixelmatch from 'https://esm.run/pixelmatch';
+ import pixelmatch from 'https://esm.run/pixelmatch';
 ```
 
 ## [Changelog](https://github.com/mapbox/pixelmatch/releases)
diff --git a/demo/README.md b/demo/README.md
new file mode 100644
index 0000000..0cd11bb
--- /dev/null
+++ b/demo/README.md
@@ -0,0 +1,150 @@
+# Image Comparison Tool
+
+A modern, refactored image comparison tool that uses the [pixelmatch](https://github.com/mapbox/pixelmatch) library to detect differences between images.
+
+## Features
+
+- **Drag & Drop Interface**: Easy image upload with visual feedback
+- **Real-time Comparison**: Automatic comparison when both images are loaded
+- **Configurable Options**: Adjustable threshold, dimensions, and color settings
+- **Visual Difference Display**: Clear visualization of pixel differences
+- **Download Results**: Save difference images for further analysis
+- **Responsive Design**: Works on desktop and mobile devices
+- **Keyboard Shortcuts**: Quick access to options (Ctrl/Cmd + O)
+
+## File Structure
+
+```
+tools/image_compare/
+├── index.html          # Main HTML structure
+├── styles.css          # Separated CSS styles
+├── app.js             # Modular JavaScript application
+└── README.md          # This documentation
+```
+
+## Architecture
+
+The refactored code follows modern JavaScript best practices:
+
+### 1. **Configuration (`CONFIG`)**
+
+- Centralized default options and result categories
+- Easy to modify thresholds and settings
+
+### 2. **Utility Class (`Utils`)**
+
+- Static helper methods for common operations
+- Image loading, scaling, and color conversion
+- Result categorization logic
+
+### 3. **Options Manager (`OptionsManager`)**
+
+- Handles all comparison option controls
+- Event binding and value synchronization
+- Reset functionality with defaults
+
+### 4. **Image Display Manager (`ImageDisplayManager`)**
+
+- Manages image display and drag & drop
+- Handles file input changes
+- Renders comparison results and diff images
+
+### 5. **Main Application (`ImageCompareApp`)**
+
+- Orchestrates all components
+- Manages application state
+- Handles user interactions and comparisons
+
+## Usage
+
+### Basic Comparison
+
+1. Drag and drop two images into the designated areas
+2. The tool automatically compares them using default settings
+3. View the difference visualization and analysis results
+
+### Advanced Options
+
+- **Max Dimension**: Control image resolution (64-512px)
+- **Threshold**: Adjust sensitivity (0-1)
+- **Anti-aliasing**: Detect anti-aliased pixels
+- **Alpha Blending**: Control background blending
+- **Colors**: Customize difference visualization colors
+- **Diff Mask**: Enable transparent backgrounds
+
+### Persistence
+
+- **Automatic Caching**: All option changes are automatically saved to localStorage
+- **Session Persistence**: Your settings are remembered between browser sessions
+- **Cache Management**: Use "Clear Cache" button to reset to defaults and clear stored settings
+
+### Controls
+
+- **Compare Images**: Run the comparison with current settings
+- **Clear Images**: Remove all loaded images and results
+- **Reset Options**: Reset all options to default values
+- **Clear Cache**: Clear localStorage cache and reset to defaults
+
+### Keyboard Shortcuts
+
+- `Ctrl/Cmd + O`: Toggle options panel
+
+## Technical Improvements
+
+### Code Organization
+
+- **Separation of Concerns**: HTML, CSS, and JavaScript are now separate
+- **Modular Classes**: Each class has a single responsibility
+- **Configuration Constants**: Easy to modify settings in one place
+
+### Maintainability
+
+- **Clean Structure**: Logical grouping of related functionality
+- **Consistent Naming**: Clear, descriptive method and variable names
+- **Error Handling**: Proper error handling with user feedback
+- **Documentation**: Inline comments explaining complex logic
+
+### Performance
+
+- **Efficient Event Handling**: Optimized event listeners
+- **Async Operations**: Non-blocking image processing
+- **Memory Management**: Proper cleanup of resources
+- **Local Storage**: Persistent option caching for better user experience
+
+### User Experience
+
+- **Responsive Design**: Mobile-friendly layout
+- **Visual Feedback**: Clear indication of application state
+- **Accessibility**: Proper ARIA labels and keyboard navigation
+
+## Browser Compatibility
+
+- Modern browsers with ES6+ support
+- Canvas API support required
+- File API support for drag & drop
+
+## Dependencies
+
+- **pixelmatch**: Image comparison algorithm (loaded from CDN)
+- **No build tools required**: Pure HTML, CSS, and JavaScript
+
+## Future Enhancements
+
+- **Batch Processing**: Compare multiple image pairs
+- **Export Options**: Various output formats
+- **Advanced Filters**: Custom comparison algorithms
+- **History**: Save comparison results
+- **API Integration**: Server-side processing for large images
+
+## Contributing
+
+The modular structure makes it easy to:
+
+- Add new comparison options
+- Implement additional visualization methods
+- Extend the UI with new features
+- Optimize performance in specific areas
+
+## License
+
+Initial Author: [HoangTran0410](https://github.com/HoangTran0410)
diff --git a/demo/app.js b/demo/app.js
new file mode 100644
index 0000000..97afcd4
--- /dev/null
+++ b/demo/app.js
@@ -0,0 +1,532 @@
+import pixelmatch from 'https://unpkg.com/pixelmatch';
+
+// Configuration constants
+const CONFIG = {
+    STORAGE_KEY: 'imageCompareOptions',
+    DEFAULT_OPTIONS: {
+        maxDim: 128,
+        threshold: 0.3,
+        includeAA: false,
+        alpha: 0.1,
+        aaColor: '#ffff00',
+        diffColor: '#ff0000',
+        diffColorAlt: '#00ff00',
+        diffMask: false
+    },
+    RESULT_CATEGORIES: {
+        VERY_SIMILAR: {
+            threshold: 20,
+            color: '#28a745',
+            icon: '✅',
+            description: 'Images are nearly identical'
+        },
+        SIMILAR: {
+            threshold: 40,
+            color: '#17a2b8',
+            icon: '🔍',
+            description: 'Images are very similar'
+        },
+        SOMEWHAT_DIFFERENT: {
+            threshold: 60,
+            color: '#ffc107',
+            icon: '⚠️',
+            description: 'Images have noticeable differences'
+        },
+        VERY_DIFFERENT: {
+            threshold: Infinity,
+            color: '#dc3545',
+            icon: '❌',
+            description: 'Images are significantly different'
+        }
+    }
+};
+
+// Utility functions
+class Utils {
+    static hexToRgb(hex) {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result
+            ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)]
+            : [255, 255, 255];
+    }
+
+    static async loadImage(file) {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => resolve(img);
+            img.onerror = reject;
+            img.src = URL.createObjectURL(file);
+        });
+    }
+
+    static drawScaled(img, width, height) {
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext('2d');
+        ctx.drawImage(img, 0, 0, width, height);
+        return ctx.getImageData(0, 0, width, height);
+    }
+
+    static getResultCategory(diffPercent) {
+        for (const [category, config] of Object.entries(CONFIG.RESULT_CATEGORIES)) {
+            if (diffPercent < config.threshold) {
+                return { category, ...config };
+            }
+        }
+        return CONFIG.RESULT_CATEGORIES.VERY_DIFFERENT;
+    }
+
+    static saveToLocalStorage(key, data) {
+        try {
+            localStorage.setItem(key, JSON.stringify(data));
+        } catch (error) {
+            console.warn('Failed to save to localStorage:', error);
+        }
+    }
+
+    static loadFromLocalStorage(key, defaultValue = null) {
+        try {
+            const item = localStorage.getItem(key);
+            return item ? JSON.parse(item) : defaultValue;
+        } catch (error) {
+            console.warn('Failed to load from localStorage:', error);
+            return defaultValue;
+        }
+    }
+}
+
+// Options management
+class OptionsManager {
+    constructor() {
+        this.elements = this.initializeElements();
+        this.initializeValues(true);
+        this.bindEvents();
+    }
+
+    initializeElements() {
+        return {
+            maxDim: document.getElementById('maxDim'),
+            maxDimValue: document.getElementById('maxDim-value'),
+            threshold: document.getElementById('threshold'),
+            thresholdValue: document.getElementById('threshold-value'),
+            includeAA: document.getElementById('includeAA'),
+            alpha: document.getElementById('alpha'),
+            alphaValue: document.getElementById('alpha-value'),
+            aaColor: document.getElementById('aaColor'),
+            diffColor: document.getElementById('diffColor'),
+            diffColorAlt: document.getElementById('diffColorAlt'),
+            diffMask: document.getElementById('diffMask')
+        };
+    }
+
+    initializeValues(fromCache = false) {
+        // Load cached values or use defaults
+        const cachedOptions = fromCache
+            ? Utils.loadFromLocalStorage(CONFIG.STORAGE_KEY, CONFIG.DEFAULT_OPTIONS)
+            : {};
+        const options = { ...CONFIG.DEFAULT_OPTIONS, ...cachedOptions };
+
+        // Set input values
+        this.elements.maxDim.value = options.maxDim;
+        this.elements.threshold.value = options.threshold;
+        this.elements.includeAA.checked = options.includeAA;
+        this.elements.alpha.value = options.alpha;
+        this.elements.aaColor.value = options.aaColor;
+        this.elements.diffColor.value = options.diffColor;
+        this.elements.diffColorAlt.value = options.diffColorAlt;
+        this.elements.diffMask.checked = options.diffMask;
+
+        // Update display values
+        this.elements.maxDimValue.textContent = options.maxDim;
+        this.elements.thresholdValue.textContent = options.threshold;
+        this.elements.alphaValue.textContent = options.alpha;
+    }
+
+    bindEvents() {
+        // Update range value displays and save to localStorage
+        this.elements.maxDim.addEventListener('input', e => {
+            this.elements.maxDimValue.textContent = e.target.value;
+            this.saveOptions();
+            window.ImageCompareApp.autoCompare();
+        });
+
+        this.elements.threshold.addEventListener('input', e => {
+            this.elements.thresholdValue.textContent = e.target.value;
+            this.saveOptions();
+            window.ImageCompareApp.autoCompare();
+        });
+
+        this.elements.alpha.addEventListener('input', e => {
+            this.elements.alphaValue.textContent = e.target.value;
+            this.saveOptions();
+            window.ImageCompareApp.autoCompare();
+        });
+
+        // Auto-compare and save on option changes
+        const autoCompareOptions = [
+            'maxDim',
+            'includeAA',
+            'aaColor',
+            'diffColor',
+            'diffColorAlt',
+            'diffMask'
+        ];
+
+        autoCompareOptions.forEach(option => {
+            this.elements[option].addEventListener('change', () => {
+                this.saveOptions();
+                window.ImageCompareApp.autoCompare();
+            });
+        });
+    }
+
+    getOptions() {
+        return {
+            maxDim: parseInt(this.elements.maxDim.value),
+            threshold: parseFloat(this.elements.threshold.value),
+            includeAA: this.elements.includeAA.checked,
+            alpha: parseFloat(this.elements.alpha.value),
+            aaColor: Utils.hexToRgb(this.elements.aaColor.value),
+            diffColor: Utils.hexToRgb(this.elements.diffColor.value),
+            diffColorAlt: Utils.hexToRgb(this.elements.diffColorAlt.value),
+            diffMask: this.elements.diffMask.checked
+        };
+    }
+
+    saveOptions() {
+        const options = {
+            maxDim: parseInt(this.elements.maxDim.value),
+            threshold: parseFloat(this.elements.threshold.value),
+            includeAA: this.elements.includeAA.checked,
+            alpha: parseFloat(this.elements.alpha.value),
+            aaColor: this.elements.aaColor.value,
+            diffColor: this.elements.diffColor.value,
+            diffColorAlt: this.elements.diffColorAlt.value,
+            diffMask: this.elements.diffMask.checked
+        };
+
+        Utils.saveToLocalStorage(CONFIG.STORAGE_KEY, options);
+    }
+
+    reset() {
+        this.initializeValues(false);
+
+        // Auto-compare if both images are present
+        if (window.ImageCompareApp.hasBothImages()) {
+            setTimeout(() => window.ImageCompareApp.autoCompare(), 100);
+        }
+    }
+}
+
+// Image display management
+class ImageDisplayManager {
+    constructor() {
+        this.setupDragAndDrop();
+        this.bindFileInputs();
+    }
+
+    setupDragAndDrop() {
+        const display1 = document.getElementById('display1');
+        const display2 = document.getElementById('display2');
+
+        [display1, display2].forEach(display => {
+            display.addEventListener('dragover', this.handleDragOver);
+            display.addEventListener('dragleave', this.handleDragLeave);
+            display.addEventListener('drop', this.handleDrop);
+        });
+    }
+
+    bindFileInputs() {
+        document.getElementById('file1').addEventListener('change', e => {
+            if (e.target.files[0]) {
+                window.ImageCompareApp.setImage1(e.target.files[0]);
+            }
+        });
+
+        document.getElementById('file2').addEventListener('change', e => {
+            if (e.target.files[0]) {
+                window.ImageCompareApp.setImage2(e.target.files[0]);
+            }
+        });
+    }
+
+    handleDragOver(e) {
+        e.preventDefault();
+        e.currentTarget.classList.add('drag-over');
+    }
+
+    handleDragLeave(e) {
+        e.preventDefault();
+        e.currentTarget.classList.remove('drag-over');
+    }
+
+    handleDrop(e) {
+        e.preventDefault();
+        e.currentTarget.classList.remove('drag-over');
+
+        const files = e.dataTransfer.files;
+        if (files.length > 0 && files[0].type.startsWith('image/')) {
+            const file = files[0];
+            const imageType = e.currentTarget.dataset.imageType;
+
+            if (imageType === 'image1') {
+                window.ImageCompareApp.setImage1(file);
+            } else if (imageType === 'image2') {
+                window.ImageCompareApp.setImage2(file);
+            }
+        }
+    }
+
+    displayImage(file, displayId) {
+        const display = document.getElementById(displayId);
+        const imageType = display.dataset.imageType;
+        const fileId = imageType === 'image1' ? '1' : '2';
+
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = function (e) {
+                display.innerHTML = `
+                    <div class="image-container" onclick="document.getElementById('file${fileId}').click()">
+                        <img src="${e.target.result}" alt="Selected image" />
+                        <div class="image-overlay">
+                            <p style="margin: 0; color: white; font-size: 12px; text-shadow: 1px 1px 2px rgba(0,0,0,0.8);">
+                                Click to change image
+                            </p>
+                        </div>
+                    </div>
+                `;
+
+                // Re-add the file input after setting innerHTML
+                this.addFileInput(display, fileId, imageType);
+            }.bind(this);
+            reader.readAsDataURL(file);
+        } else {
+            const placeholderText =
+                imageType === 'image1' ? 'Drop First Image Here' : 'Drop Second Image Here';
+
+            display.innerHTML = `
+                <div class="no-image" onclick="document.getElementById('file${fileId}').click()">
+                    <div>
+                        <p class="placeholder-text">${placeholderText}</p>
+                        <p class="help-text">Drag and drop or click to select</p>
+                    </div>
+                </div>
+            `;
+
+            // Re-add the file input after setting innerHTML
+            this.addFileInput(display, fileId, imageType);
+        }
+    }
+
+    addFileInput(display, fileId, imageType) {
+        const fileInput = document.createElement('input');
+        fileInput.type = 'file';
+        fileInput.id = `file${fileId}`;
+        fileInput.accept = 'image/*';
+        fileInput.className = 'file-input';
+        fileInput.style.display = 'none';
+        fileInput.addEventListener('change', function (e) {
+            if (e.target.files && e.target.files[0]) {
+                const file = e.target.files[0];
+                if (imageType === 'image1') {
+                    window.ImageCompareApp.setImage1(file);
+                } else if (imageType === 'image2') {
+                    window.ImageCompareApp.setImage2(file);
+                }
+            }
+        });
+        display.appendChild(fileInput);
+    }
+
+    renderDiffImage(diffData, width, height) {
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext('2d');
+
+        // Create ImageData from diff array
+        const imageData = new ImageData(diffData, width, height);
+        ctx.putImageData(imageData, 0, 0);
+
+        // Convert canvas to data URL and display
+        const diffDisplay = document.getElementById('diff-display');
+        diffDisplay.innerHTML = `
+            <div class="diff-image-container">
+                <img src="${canvas.toDataURL()}" alt="Difference visualization" />
+                <br/>
+                <button onclick="window.ImageCompareApp.downloadDiffImage()" class="download-btn">
+                    Download Diff Image
+                </button>
+            </div>
+        `;
+
+        // Store canvas reference for download
+        diffDisplay.dataset.canvas = canvas;
+    }
+
+    renderResult(mismatched, totalPixels, diffPercent, resultConfig) {
+        const resultDiv = document.getElementById('result');
+        resultDiv.style.display = 'block';
+
+        resultDiv.innerHTML = `
+            <div style="display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 15px;">
+                <span style="font-size: 24px;">${resultConfig.icon}</span>
+                <h3 style="margin: 0; color: ${resultConfig.color};">${resultConfig.category}</h3>
+            </div>
+            <div style="background: ${
+                resultConfig.color
+            }20; padding: 15px; border-radius: 8px; border-left: 4px solid ${resultConfig.color};">
+                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; text-align: left;">
+                    <div>
+                        <strong style="color: ${resultConfig.color};">Pixel Analysis:</strong><br>
+                        <span style="font-size: 18px; font-weight: bold;">${mismatched}</span> different pixels<br>
+                        <span style="font-size: 18px; font-weight: bold;">${
+                            totalPixels - mismatched
+                        }</span> matching pixels<br>
+                        <span style="font-size: 18px; font-weight: bold;">${totalPixels}</span> total pixels
+                    </div>
+                    <div>
+                        <strong style="color: ${resultConfig.color};">Difference Level:</strong><br>
+                        <span style="font-size: 24px; font-weight: bold; color: ${
+                            resultConfig.color
+                        };">${diffPercent.toFixed(2)}%</span><br>
+                        <small style="color: #666;">
+                            ${resultConfig.description}
+                        </small>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+}
+
+// Main application class
+class ImageCompareApp {
+    constructor() {
+        this.image1File = null;
+        this.image2File = null;
+        this.optionsManager = new OptionsManager();
+        this.imageDisplayManager = new ImageDisplayManager();
+        this.bindEvents();
+        this.setupKeyboardShortcuts();
+    }
+
+    bindEvents() {
+        document
+            .getElementById('reset-options')
+            .addEventListener('click', () => this.optionsManager.reset());
+    }
+
+    setupKeyboardShortcuts() {
+        document.addEventListener('keydown', e => {
+            if ((e.ctrlKey || e.metaKey) && e.key === 'o') {
+                e.preventDefault();
+                this.toggleOptions();
+            }
+        });
+    }
+
+    setImage1(file) {
+        this.image1File = file;
+        this.imageDisplayManager.displayImage(file, 'display1');
+        if (this.hasBothImages()) {
+            setTimeout(() => this.autoCompare(), 100);
+        }
+    }
+
+    setImage2(file) {
+        this.image2File = file;
+        this.imageDisplayManager.displayImage(file, 'display2');
+        if (this.hasBothImages()) {
+            setTimeout(() => this.autoCompare(), 100);
+        }
+    }
+
+    hasBothImages() {
+        return this.image1File && this.image2File;
+    }
+
+    autoCompare() {
+        if (this.hasBothImages()) {
+            this.compareImages();
+        }
+    }
+
+    async compareImages() {
+        if (!this.hasBothImages()) {
+            alert('Please drag and drop 2 images first!');
+            return;
+        }
+
+        try {
+            const img1 = await Utils.loadImage(this.image1File);
+            const img2 = await Utils.loadImage(this.image2File);
+
+            const options = this.optionsManager.getOptions();
+            const width = options.maxDim;
+            const height = options.maxDim;
+
+            const data1 = Utils.drawScaled(img1, width, height);
+            const data2 = Utils.drawScaled(img2, width, height);
+
+            // Create diff array for pixelmatch to draw
+            const diff = new Uint8ClampedArray(width * height * 4);
+
+            // pixelmatch comparison with options
+            const mismatched = pixelmatch(data1.data, data2.data, diff, width, height, options);
+
+            // Calculate difference percentage
+            const totalPixels = width * height;
+            const diffPercent = (mismatched / totalPixels) * 100;
+
+            // Render the diff image
+            this.imageDisplayManager.renderDiffImage(diff, width, height);
+
+            // Get result category and render result
+            const resultConfig = Utils.getResultCategory(diffPercent);
+            this.imageDisplayManager.renderResult(
+                mismatched,
+                totalPixels,
+                diffPercent,
+                resultConfig
+            );
+        } catch (error) {
+            console.error('Error comparing images:', error);
+            alert('Error comparing images. Please try again.');
+        }
+    }
+
+    downloadDiffImage() {
+        const diffDisplay = document.getElementById('diff-display');
+        const img = diffDisplay.querySelector('img');
+
+        if (img) {
+            const link = document.createElement('a');
+            link.download = 'diff-image.png';
+            link.href = img.src;
+            link.click();
+        }
+    }
+
+    toggleOptions() {
+        const content = document.getElementById('options-content');
+        const icon = document.getElementById('toggle-icon');
+
+        if (content.classList.contains('collapsed')) {
+            content.classList.remove('collapsed');
+            icon.textContent = '▼';
+            icon.style.transform = 'rotate(0deg)';
+        } else {
+            content.classList.add('collapsed');
+            icon.textContent = '▶';
+            icon.style.transform = 'rotate(0deg)';
+        }
+    }
+}
+
+// Initialize the application when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    // Make the app globally accessible for HTML onclick handlers
+    window.ImageCompareApp = new ImageCompareApp();
+});
diff --git a/demo/index.html b/demo/index.html
new file mode 100644
index 0000000..4e9b62a
--- /dev/null
+++ b/demo/index.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Image Comparison Tool</title>
+        <link rel="stylesheet" href="styles.css" />
+    </head>
+    <body>
+        <div class="container">
+            <header>
+                <h1>Image Comparison Tool</h1>
+                <p class="subtitle">
+                    Using
+                    <a href="https://github.com/mapbox/pixelmatch" target="_blank">pixelmatch</a> to
+                    compare images.
+                </p>
+            </header>
+
+            <div class="images-container">
+                <div class="image-display" id="display1" data-image-type="image1">
+                    <input type="file" id="file1" accept="image/*" class="file-input" />
+                    <div class="no-image" onclick="document.getElementById('file1').click()">
+                        <div>
+                            <p class="placeholder-text">Drop First Image Here</p>
+                            <p class="help-text">Drag and drop or click to select</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="image-display" id="display2" data-image-type="image2">
+                    <input type="file" id="file2" accept="image/*" class="file-input" />
+                    <div class="no-image" onclick="document.getElementById('file2').click()">
+                        <div>
+                            <p class="placeholder-text">Drop Second Image Here</p>
+                            <p class="help-text">Drag and drop or click to select</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="image-display" id="diff-display">
+                    <div class="no-image">
+                        <div>
+                            <p class="placeholder-text">Diff Image</p>
+                            <p class="help-text">Run comparison to see differences</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div id="result" class="result" style="display: none"></div>
+
+            <div class="options-section">
+                <div class="options-header" onclick="ImageCompareApp.toggleOptions()">
+                    <h3>Comparison Options</h3>
+                    <span class="toggle-icon" id="toggle-icon">▼</span>
+                </div>
+                <div class="options-content collapsed" id="options-content">
+                    <div class="options-grid">
+                        <div class="option-group">
+                            <label for="maxDim">Max Dimension (px):</label>
+                            <input
+                                type="range"
+                                id="maxDim"
+                                min="64"
+                                max="512"
+                                step="32"
+                                value="128"
+                            />
+                            <span id="maxDim-value">128</span>
+                            <small>Higher = more accurate but slower</small>
+                        </div>
+
+                        <div class="option-group">
+                            <label for="threshold">Threshold (0-1):</label>
+                            <input
+                                type="range"
+                                id="threshold"
+                                min="0"
+                                max="1"
+                                step="0.01"
+                                value="0.3"
+                            />
+                            <span id="threshold-value">0.3</span>
+                            <small>Lower = more sensitive</small>
+                        </div>
+
+                        <div class="option-group">
+                            <label for="includeAA">Include Anti-Aliasing:</label>
+                            <input type="checkbox" id="includeAA" />
+                            <small>Detect anti-aliased pixels</small>
+                        </div>
+
+                        <div class="option-group">
+                            <label for="alpha">Alpha Blending (0-1):</label>
+                            <input type="range" id="alpha" min="0" max="1" step="0.1" value="0.1" />
+                            <span id="alpha-value">0.1</span>
+                            <small>0=white, 1=original</small>
+                        </div>
+
+                        <div class="option-group">
+                            <label for="aaColor">Anti-Alias Color:</label>
+                            <input type="color" id="aaColor" value="#ffff00" />
+                            <small>Color for anti-aliased pixels</small>
+                        </div>
+
+                        <div class="option-group">
+                            <label for="diffColor">Diff Color:</label>
+                            <input type="color" id="diffColor" value="#ff0000" />
+                            <small>Color for different pixels</small>
+                        </div>
+
+                        <div class="option-group">
+                            <label for="diffColorAlt">Alt Diff Color:</label>
+                            <input type="color" id="diffColorAlt" value="#00ff00" />
+                            <small>Alternative diff color</small>
+                        </div>
+
+                        <div class="option-group">
+                            <label for="diffMask">Diff Mask:</label>
+                            <input type="checkbox" id="diffMask" />
+                            <small>Transparent background</small>
+                        </div>
+                    </div>
+
+                    <div class="options-actions">
+                        <button id="reset-options" class="btn btn-secondary">Reset Options</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <script type="module" src="app.js"></script>
+    </body>
+</html>
diff --git a/demo/styles.css b/demo/styles.css
new file mode 100644
index 0000000..bc6121a
--- /dev/null
+++ b/demo/styles.css
@@ -0,0 +1,343 @@
+/* Base styles */
+* {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #f5f5f5;
+    line-height: 1.6;
+}
+
+/* Container */
+.container {
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+/* Header */
+header {
+    text-align: center;
+    margin-bottom: 30px;
+}
+
+header h1 {
+    color: #333;
+    margin-bottom: 10px;
+}
+
+.subtitle {
+    color: #666;
+    margin: 10px 0;
+}
+
+.subtitle a {
+    color: #007bff;
+    text-decoration: none;
+}
+
+.subtitle a:hover {
+    text-decoration: underline;
+}
+
+/* Controls */
+.controls {
+    text-align: center;
+    margin: 20px 0;
+}
+
+/* Buttons */
+.btn {
+    background-color: #007bff;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+    margin: 10px;
+    transition: background-color 0.3s ease;
+}
+
+.btn:hover {
+    background-color: #0056b3;
+}
+
+.btn-primary {
+    background-color: #007bff;
+}
+
+.btn-primary:hover {
+    background-color: #0056b3;
+}
+
+.btn-danger {
+    background-color: #dc3545;
+}
+
+.btn-danger:hover {
+    background-color: #c82333;
+}
+
+.btn-secondary {
+    background-color: #6c757d;
+}
+
+.btn-secondary:hover {
+    background-color: #5a6268;
+}
+
+.btn-warning {
+    background-color: #ffc107;
+}
+
+.btn-warning:hover {
+    background-color: #e0a800;
+}
+
+/* Images container */
+.images-container {
+    display: flex;
+    justify-content: space-between;
+    margin: 20px 0;
+    gap: 15px;
+}
+
+.image-display {
+    flex: 1;
+    text-align: center;
+    background: #f8f9fa;
+    padding: 15px;
+    border-radius: 8px;
+    border: 2px dashed #dee2e6;
+    transition: all 0.3s ease;
+    cursor: pointer;
+}
+
+.image-display.drag-over {
+    background: #e3f2fd;
+    border-color: #2196f3;
+    transform: scale(1.02);
+    box-shadow: 0 4px 20px rgba(33, 150, 243, 0.3);
+}
+
+.image-display.drag-over .placeholder-text {
+    color: #2196f3;
+}
+
+.image-display img {
+    max-width: 100%;
+    max-height: 300px;
+    border-radius: 5px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.image-container {
+    position: relative;
+    cursor: pointer;
+    display: inline-block;
+}
+
+.image-overlay {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+    padding: 20px 10px 10px 10px;
+    border-radius: 0 0 5px 5px;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.image-container:hover .image-overlay {
+    opacity: 1;
+}
+
+.image-display.no-image {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 200px;
+    color: #6c757d;
+}
+
+.placeholder-text {
+    color: #6c757d;
+    font-style: italic;
+    margin: 0;
+}
+
+.help-text {
+    font-size: 12px;
+    margin-top: 10px;
+    color: #6c757d;
+}
+
+/* File input */
+.file-input {
+    display: none;
+}
+
+/* Result section */
+.result {
+    text-align: center;
+    padding: 20px;
+    background: white;
+    border-radius: 8px;
+    margin-top: 20px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    border: 1px solid #dee2e6;
+}
+
+/* Options section */
+.options-section {
+    background: #f8f9fa;
+    border-radius: 8px;
+    margin: 20px 0;
+    border: 1px solid #dee2e6;
+    overflow: hidden;
+}
+
+.options-header {
+    background: #e9ecef;
+    padding: 15px 20px;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: background-color 0.3s ease;
+}
+
+.options-header:hover {
+    background: #dee2e6;
+}
+
+.options-header h3 {
+    margin: 0;
+    color: #555;
+}
+
+.toggle-icon {
+    font-size: 18px;
+    font-weight: bold;
+    color: #666;
+    transition: transform 0.3s ease;
+}
+
+.options-content {
+    padding: 20px;
+    transition: max-height 0.3s ease, opacity 0.3s ease;
+    max-height: 1000px;
+    opacity: 1;
+}
+
+.options-content.collapsed {
+    max-height: 0;
+    opacity: 0;
+    padding: 0 20px;
+}
+
+.options-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 20px;
+    margin: 20px 0;
+}
+
+.option-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.option-group label {
+    font-weight: bold;
+    color: #333;
+    font-size: 14px;
+}
+
+.option-group input[type='range'] {
+    width: 100%;
+}
+
+.option-group input[type='color'] {
+    width: 60px;
+    height: 40px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.option-group input[type='checkbox'] {
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+}
+
+.option-group small {
+    color: #6c757d;
+    font-size: 12px;
+    font-style: italic;
+}
+
+.option-group span {
+    font-weight: bold;
+    color: #007bff;
+    font-size: 14px;
+}
+
+.options-actions {
+    text-align: center;
+    margin-top: 20px;
+}
+
+/* Diff image display */
+.diff-image-container {
+    text-align: center;
+}
+
+.diff-image-container img {
+    max-width: 100%;
+    border-radius: 5px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.download-btn {
+    margin-top: 10px;
+    background-color: #28a745;
+    padding: 8px 16px;
+    border: none;
+    border-radius: 4px;
+    color: white;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.download-btn:hover {
+    background-color: #218838;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .images-container {
+        flex-direction: column;
+    }
+
+    .options-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .container {
+        padding: 15px;
+    }
+
+    body {
+        padding: 15px;
+    }
+}