|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
|
|
<title>Face Blurring Web App</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script defer src="https://cdn.jsdelivr.net/npm/face-api.js@0.22.2/dist/face-api.min.js"></script> |
|
|
<style> |
|
|
canvas { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
pointer-events: none; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 min-h-screen flex items-center justify-center p-6"> |
|
|
<div class="bg-white p-8 rounded-lg shadow-xl max-w-3xl w-full"> |
|
|
<h1 class="text-3xl font-bold mb-4 text-center">Face Blurring Web App</h1> |
|
|
<p class="text-gray-600 mb-6 text-center">Upload an image and click "Blur Faces" to automatically blur detected faces.</p> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="imageUpload">Upload Image</label> |
|
|
<input type="file" id="imageUpload" accept="image/*" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-semibold file:bg-blue-500 file:text-white hover:file:bg-blue-600" /> |
|
|
</div> |
|
|
|
|
|
<div class="relative mx-auto w-full max-w-md border border-gray-300 rounded overflow-hidden bg-gray-200" style="aspect-ratio: 4/3;"> |
|
|
<img id="uploadedImage" src="" alt="Uploaded Image" class="w-full h-full object-contain hidden" /> |
|
|
<canvas id="overlayCanvas" class="absolute top-0 left-0 w-full h-full"></canvas> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 flex justify-center"> |
|
|
<button id="blurButton" class="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-6 rounded-lg shadow-md transition disabled:opacity-50 disabled:cursor-not-allowed" disabled> |
|
|
Blur Faces |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="status" class="mt-4 text-center text-sm text-gray-500"></div> |
|
|
|
|
|
<a id="downloadLink" class="mt-4 block text-center text-blue-600 hover:underline hidden" download="blurred_image.jpg">Download Blurred Image</a> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
const imageUpload = document.getElementById('imageUpload'); |
|
|
const uploadedImage = document.getElementById('uploadedImage'); |
|
|
const overlayCanvas = document.getElementById('overlayCanvas'); |
|
|
const blurButton = document.getElementById('blurButton'); |
|
|
const downloadLink = document.getElementById('downloadLink'); |
|
|
const status = document.getElementById('status'); |
|
|
|
|
|
let imageLoaded = false; |
|
|
let detections = []; |
|
|
|
|
|
|
|
|
Promise.all([ |
|
|
faceapi.nets.tinyFaceDetector.loadFromUri('https://cdn.jsdelivr.net/npm/face-api.js@0.22.2/weights'), |
|
|
]).then(() => { |
|
|
status.textContent = 'Models loaded. Ready to blur faces.'; |
|
|
}); |
|
|
|
|
|
imageUpload.addEventListener('change', (e) => { |
|
|
const file = e.target.files[0]; |
|
|
if (!file) return; |
|
|
|
|
|
const reader = new FileReader(); |
|
|
reader.onload = function (event) { |
|
|
uploadedImage.src = event.target.result; |
|
|
uploadedImage.onload = () => { |
|
|
imageLoaded = true; |
|
|
blurButton.disabled = false; |
|
|
downloadLink.classList.add('hidden'); |
|
|
status.textContent = 'Image loaded. Click "Blur Faces".'; |
|
|
}; |
|
|
}; |
|
|
reader.readAsDataURL(file); |
|
|
}); |
|
|
|
|
|
blurButton.addEventListener('click', async () => { |
|
|
if (!imageLoaded) return; |
|
|
|
|
|
blurButton.disabled = true; |
|
|
status.textContent = 'Detecting faces...'; |
|
|
|
|
|
const img = uploadedImage; |
|
|
const canvas = overlayCanvas; |
|
|
const displaySize = { width: img.width, height: img.height }; |
|
|
faceapi.matchDimensions(canvas, displaySize); |
|
|
|
|
|
detections = await faceapi.detectAllFaces(img, new faceapi.TinyFaceDetectorOptions()); |
|
|
|
|
|
status.textContent = `Detected ${detections.length} face(s). Blurring...`; |
|
|
|
|
|
const offscreenCanvas = document.createElement('canvas'); |
|
|
offscreenCanvas.width = img.width; |
|
|
offscreenCanvas.height = img.height; |
|
|
const ctx = offscreenCanvas.getContext('2d'); |
|
|
ctx.drawImage(img, 0, 0); |
|
|
|
|
|
detections.forEach(detection => { |
|
|
const box = detection.box; |
|
|
const faceImg = ctx.getImageData(box.x, box.y, box.width, box.height); |
|
|
const tempCanvas = document.createElement('canvas'); |
|
|
const tempCtx = tempCanvas.getContext('2d'); |
|
|
tempCanvas.width = box.width; |
|
|
tempCanvas.height = box.height; |
|
|
tempCtx.putImageData(faceImg, 0, 0); |
|
|
|
|
|
|
|
|
tempCtx.filter = 'blur(10px)'; |
|
|
ctx.filter = 'blur(10px)'; |
|
|
ctx.drawImage(tempCanvas, box.x, box.y, box.width, box.height); |
|
|
}); |
|
|
|
|
|
|
|
|
const blurredImage = offscreenCanvas.toDataURL('image/jpeg'); |
|
|
uploadedImage.src = blurredImage; |
|
|
|
|
|
|
|
|
downloadLink.href = blurredImage; |
|
|
downloadLink.classList.remove('hidden'); |
|
|
downloadLink.download = 'blurred_image.jpg'; |
|
|
|
|
|
status.textContent = 'Face blurring completed!'; |
|
|
blurButton.disabled = false; |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-qwensite.hf.space/logo.svg" alt="qwensite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-qwensite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >QwenSite</a> - 🧬 <a href="https://enzostvs-qwensite.hf.space?remix=6ee5ali/face" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
