---
layout: default
title: Blur Faces - Automatic Face Blurring
description: Automatically detect and blur faces in images for privacy protection.
permalink: /playground/tools/blur-faces/
---

<link rel="stylesheet" href="../shared/tool-layout.css">

<div class="tool-wrapper">
    <div class="tool-breadcrumb">
        <a href="/playground/tools/">← Back to Tools</a>
    </div>

    <div class="tool-header">
        <h1>Blur Faces</h1>
        <p class="tool-description">Automatically detect and blur faces in images</p>
    </div>

    <div id="alert" class="alert"></div>

    <div class="tool-content">
        <div class="drop-zone" id="dropZone">
            <div class="drop-zone-icon">🎭</div>
            <div class="drop-zone-text">Click to select images or drag them here</div>
            <div class="drop-zone-hint">JPG, PNG, WebP, HEIC supported • Multiple files allowed</div>
        </div>
        <input type="file" id="fileInput" class="file-input" accept="image/*" multiple>

        <div id="modelLoading" style="display: none; margin-top: 2rem; padding: 1.5rem; border: 2px solid var(--tool-primary); border-radius: 8px; background: var(--tool-bg-light);">
            <h3 style="margin-top: 0;">🧠 Loading AI Model...</h3>
            <div class="progress-bar" style="margin-top: 1rem;">
                <div id="modelProgressFill" class="progress-fill"></div>
            </div>
            <div id="modelProgressText" style="margin-top: 0.5rem; font-size: 0.9rem; color: var(--tool-text-secondary);">Initializing face detection model (~2MB)...</div>
            <div style="margin-top: 1rem; font-size: 0.9rem; color: var(--tool-text-secondary);">
                First-time loading may take 10-20 seconds. Model will be cached for future use.
            </div>
        </div>

        <div id="controlsContainer" style="display: none; margin-top: 2rem;">
            <h3>Blur Settings</h3>
            <div class="input-group">
                <label for="blurIntensity">Blur Intensity: <span id="blurValue">20</span>px</label>
                <input type="range" id="blurIntensity" min="5" max="50" value="20" style="width: 100%; margin-top: 0.5rem;">
            </div>

            <div class="input-group" style="margin-top: 1rem;">
                <label>
                    <input type="checkbox" id="showDetections" style="margin-right: 0.5rem;">
                    Show face detection boxes (preview only)
                </label>
            </div>
        </div>

        <div id="previewContainer" style="display: none; margin-top: 2rem;">
            <h3>Preview <span style="font-size: 0.9rem; color: var(--tool-text-secondary);" id="detectionCount"></span></h3>
            <div style="display: grid; gap: 1.5rem; margin-top: 1rem;">
                <div id="previewGrid"></div>
            </div>
        </div>

        <div class="btn-group" style="margin-top: 2rem;">
            <button id="clearBtn" class="btn btn-secondary" style="display: none;">
                Clear
            </button>
            <button id="detectBtn" class="btn btn-primary" style="display: none;">
                🔍 Detect Faces
            </button>
            <button id="downloadBtn" class="btn btn-success" style="display: none;">
                💾 Download All
            </button>
        </div>

        <div id="progressContainer" style="display: none; margin-top: 1.5rem;">
            <div style="font-weight: 600; margin-bottom: 0.5rem;">Processing images...</div>
            <div class="progress-bar">
                <div id="progressFill" class="progress-fill"></div>
            </div>
            <div id="progressText" style="margin-top: 0.5rem; font-size: 0.9rem; color: var(--tool-text-secondary);"></div>
        </div>
    </div>

    <div class="feature-list">
        <h3>Features</h3>
        <ul>
            <li>AI-powered face detection</li>
            <li>Automatic face blurring</li>
            <li>Adjustable blur intensity</li>
            <li>Batch processing support</li>
            <li>Preview before download</li>
            <li>100% client-side AI processing</li>
            <li>No uploads - complete privacy</li>
            <li>Works offline (after first load)</li>
        </ul>

        <div style="margin-top: 1.5rem; padding: 1rem; border: 1px solid var(--tool-border); border-radius: 8px; background: var(--tool-bg-light);">
            <strong>Privacy Note:</strong> All face detection happens in your browser using TensorFlow.js. No images are sent to any server. Model files (~2MB) are downloaded once and cached.
        </div>
    </div>
</div>

<script src="../shared/tool-utils.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.11.0/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@vladmandic/face-api@1.7.12/dist/face-api.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"
        integrity="sha384-XZo7bv4xx4ECU6LwhogBKJQ8dVI8KEgTtXLf4jNuPvmKWdV1u+PqZkVx+yLc8lzg"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/heic2any/0.0.4/heic2any.min.js"
        integrity="sha384-SVH8xLvKAXhfT2hHy1RLqWDvUZCT8m6qdTVLVJTxI8xWe5Qa6GVyLXqCQJbJ4qNz"
        crossorigin="anonymous"></script>
<script src="tool.js"></script>