| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>immager - crop faces easily in bulk</title> |
| | |
| | |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | |
| | |
| | <link rel="preconnect" href="https://fonts.googleapis.com"> |
| | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| | <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&display=swap" rel="stylesheet"> |
| | |
| | |
| | <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> |
| | <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> |
| | |
| | |
| | <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> |
| |
|
| | <style> |
| | |
| | @keyframes spin { 100% { transform: rotate(360deg); } } |
| | .animate-spin { animation: spin 1s linear infinite; } |
| | @keyframes slideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } |
| | .animate-in { animation: slideIn 0.5s ease-out forwards; } |
| | </style> |
| | </head> |
| | <body class="bg-neutral-950 text-neutral-100 font-sans selection:bg-indigo-500/30"> |
| | <div id="root"></div> |
| |
|
| | <script type="text/babel"> |
| | const { useState, useEffect, useCallback, useRef } = React; |
| | |
| | |
| | const LogoIcon = ({size=24, className=""}) => ( |
| | <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 512 512" className={className}> |
| | <rect width="512" height="512" rx="120" fill="#12C369"/> |
| | <circle cx="380" cy="130" r="55" fill="#ffffff"/> |
| | <path d="M310 280 L440 430 L180 430 Z" fill="#91E6B3" stroke="#91E6B3" strokeWidth="30" strokeLinejoin="round"/> |
| | <path d="M220 220 L340 430 L100 430 Z" fill="#ffffff" stroke="#ffffff" strokeWidth="40" strokeLinejoin="round"/> |
| | </svg> |
| | ); |
| | const UsersIcon = ({size=24, className=""}) => (<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>); |
| | const Trash2Icon = ({size=24, className=""}) => (<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>); |
| | const UploadCloudIcon = ({size=24, className=""}) => (<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M12 12v9"/><path d="m16 16-4-4-4 4"/></svg>); |
| | const Loader2Icon = ({size=24, className=""}) => (<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>); |
| | const CheckCircleIcon = ({size=24, className=""}) => (<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg>); |
| | const ImageIcon = ({size=24, className=""}) => (<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>); |
| | const CheckSquareIcon = ({size=24, className=""}) => (<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>); |
| | const SquareIcon = ({size=24, className=""}) => (<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/></svg>); |
| | const DownloadIcon = ({size=24, className=""}) => (<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>); |
| | const SettingsIcon = ({size=24, className=""}) => (<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>); |
| | const EditIcon = ({size=24, className=""}) => (<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>); |
| | const XIcon = ({size=24, className=""}) => (<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>); |
| | |
| | |
| | function FaceExtractApp() { |
| | const [isModelLoading, setIsModelLoading] = useState(true); |
| | const [isProcessing, setIsProcessing] = useState(false); |
| | const [progress, setProgress] = useState(0); |
| | const [statusText, setStatusText] = useState('Initializing Engine...'); |
| | const [faceGroups, setFaceGroups] = useState([]); |
| | const [selectedFaceIds, setSelectedFaceIds] = useState(new Set()); |
| | const fileInputRef = useRef(null); |
| | |
| | |
| | const [extractedFaces, setExtractedFaces] = useState([]); |
| | const [matchThreshold, setMatchThreshold] = useState(0.50); |
| | |
| | |
| | const [cropSettings, setCropSettings] = useState({ padding: 0.05, topPadding: 0.2, shape: 'square' }); |
| | const [showSettings, setShowSettings] = useState(false); |
| | const [editingFace, setEditingFace] = useState(null); |
| | const editorImgRef = useRef(null); |
| | |
| | |
| | const [dragState, setDragState] = useState({ isDragging: false, startX: 0, startY: 0, initialOffsetX: 0, initialOffsetY: 0 }); |
| | |
| | |
| | const [dragOverGroupId, setDragOverGroupId] = useState(null); |
| | const [isDraggingFace, setIsDraggingFace] = useState(false); |
| | const draggedFaceRef = useRef(null); |
| | |
| | |
| | useEffect(() => { |
| | const loadScripts = async () => { |
| | const loadScript = (src) => new Promise((resolve, reject) => { |
| | if (document.querySelector(`script[src="${src}"]`)) return resolve(); |
| | const s = document.createElement('script'); |
| | s.src = src; |
| | s.async = true; |
| | s.onload = resolve; |
| | s.onerror = reject; |
| | document.body.appendChild(s); |
| | }); |
| | |
| | try { |
| | await loadScript('https://cdn.jsdelivr.net/npm/@vladmandic/face-api/dist/face-api.js'); |
| | await loadScript('https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js'); |
| | loadAIModels(); |
| | } catch (e) { |
| | console.error("Failed to load scripts", e); |
| | setStatusText("Failed to load core libraries. Please check your internet connection."); |
| | } |
| | }; |
| | |
| | loadScripts(); |
| | }, []); |
| | |
| | const loadAIModels = async () => { |
| | try { |
| | setStatusText("Loading AI Models (~5MB)..."); |
| | const MODEL_URL = 'https://cdn.jsdelivr.net/npm/@vladmandic/face-api/model/'; |
| | |
| | await window.faceapi.nets.ssdMobilenetv1.loadFromUri(MODEL_URL); |
| | await window.faceapi.nets.faceLandmark68Net.loadFromUri(MODEL_URL); |
| | await window.faceapi.nets.faceRecognitionNet.loadFromUri(MODEL_URL); |
| | |
| | setIsModelLoading(false); |
| | setStatusText("Ready"); |
| | } catch (error) { |
| | console.error(error); |
| | setStatusText("Error loading AI models."); |
| | } |
| | }; |
| | |
| | const generateCrop = (img, box, settings, manualOffsets = { x: 0, y: 0, zoom: 1, resolution: 'auto' }) => { |
| | const canvas = document.createElement('canvas'); |
| | const ctx = canvas.getContext('2d'); |
| | |
| | let padX = box.width * settings.padding; |
| | let padY = box.height * settings.padding; |
| | |
| | let tw = box.width + (padX * 2); |
| | let th = box.height + padY + (box.height * settings.topPadding); |
| | |
| | if (settings.shape === 'square') { |
| | const size = Math.max(tw, th); |
| | tw = size; |
| | th = size; |
| | } |
| | |
| | |
| | tw /= manualOffsets.zoom; |
| | th /= manualOffsets.zoom; |
| | |
| | |
| | let cx = box.x + box.width / 2; |
| | let cy = box.y + box.height / 2 - (box.height * settings.topPadding / 2) + (padY / 2); |
| | |
| | |
| | cx += manualOffsets.x; |
| | cy += manualOffsets.y; |
| | |
| | const cropX = Math.max(0, cx - tw / 2); |
| | const cropY = Math.max(0, cy - th / 2); |
| | const cropW = Math.min(img.width - cropX, tw); |
| | const cropH = Math.min(img.height - cropY, th); |
| | |
| | |
| | let targetW = cropW; |
| | let targetH = cropH; |
| | |
| | if (manualOffsets.resolution && manualOffsets.resolution !== 'auto') { |
| | const res = parseInt(manualOffsets.resolution, 10); |
| | targetW = res; |
| | |
| | targetH = settings.shape === 'original' ? Math.round(res * (cropH / cropW)) : res; |
| | } |
| | |
| | canvas.width = targetW; |
| | canvas.height = targetH; |
| | ctx.drawImage(img, cropX, cropY, cropW, cropH, 0, 0, targetW, targetH); |
| | return canvas.toDataURL('image/jpeg', 0.9); |
| | }; |
| | |
| | const openEditor = async (face, groupIndex, faceIndex) => { |
| | const img = new Image(); |
| | img.src = face.sourceUrl; |
| | await new Promise(r => img.onload = r); |
| | editorImgRef.current = img; |
| | |
| | setEditingFace({ |
| | ...face, |
| | groupIndex, |
| | faceIndex, |
| | manualOffsets: face.manualOffsets || { x: 0, y: 0, zoom: 1, resolution: 'auto' }, |
| | previewUrl: face.cropDataUrl |
| | }); |
| | setDragState({ isDragging: false, startX: 0, startY: 0, initialOffsetX: 0, initialOffsetY: 0 }); |
| | }; |
| | |
| | const updateManualCrop = (updates) => { |
| | if (!editingFace || !editorImgRef.current) return; |
| | |
| | const newOffsets = { ...editingFace.manualOffsets, ...updates }; |
| | const newPreview = generateCrop(editorImgRef.current, editingFace.originalBox, cropSettings, newOffsets); |
| | |
| | setEditingFace(prev => ({ |
| | ...prev, |
| | manualOffsets: newOffsets, |
| | previewUrl: newPreview |
| | })); |
| | }; |
| | |
| | const saveManualCrop = () => { |
| | const newGroups = [...faceGroups]; |
| | newGroups[editingFace.groupIndex].faces[editingFace.faceIndex].cropDataUrl = editingFace.previewUrl; |
| | newGroups[editingFace.groupIndex].faces[editingFace.faceIndex].manualOffsets = editingFace.manualOffsets; |
| | setFaceGroups(newGroups); |
| | setEditingFace(null); |
| | }; |
| | |
| | const updateGroupName = (groupId, newName) => { |
| | setFaceGroups(prevGroups => prevGroups.map(g => |
| | g.id === groupId ? { ...g, name: newName } : g |
| | )); |
| | }; |
| | |
| | |
| | const handleDragStart = (e, faceId, sourceGroupId) => { |
| | draggedFaceRef.current = { faceId, sourceGroupId }; |
| | e.dataTransfer.effectAllowed = 'move'; |
| | e.dataTransfer.setData('text/plain', faceId); |
| | |
| | |
| | setTimeout(() => { |
| | setIsDraggingFace(true); |
| | }, 0); |
| | }; |
| | |
| | const handleDragEnd = (e) => { |
| | setIsDraggingFace(false); |
| | setDragOverGroupId(null); |
| | draggedFaceRef.current = null; |
| | }; |
| | |
| | const handleDragOver = (e, targetGroupId) => { |
| | e.preventDefault(); |
| | e.dataTransfer.dropEffect = 'move'; |
| | if (dragOverGroupId !== targetGroupId) { |
| | setDragOverGroupId(targetGroupId); |
| | } |
| | }; |
| | |
| | const handleDragLeave = (e) => { |
| | e.preventDefault(); |
| | |
| | |
| | }; |
| | |
| | const handleDrop = (e, targetGroupId) => { |
| | e.preventDefault(); |
| | setIsDraggingFace(false); |
| | setDragOverGroupId(null); |
| | |
| | const data = draggedFaceRef.current; |
| | if (!data) return; |
| | |
| | const { faceId, sourceGroupId } = data; |
| | if (sourceGroupId === targetGroupId) return; |
| | |
| | |
| | setTimeout(() => { |
| | setFaceGroups(prevGroups => { |
| | let movedFace = null; |
| | |
| | |
| | let updatedGroups = prevGroups.map(group => { |
| | if (group.id === sourceGroupId) { |
| | const faceIndex = group.faces.findIndex(f => f.id === faceId); |
| | if (faceIndex > -1) { |
| | movedFace = group.faces[faceIndex]; |
| | return { ...group, faces: group.faces.filter(f => f.id !== faceId) }; |
| | } |
| | } |
| | return group; |
| | }); |
| | |
| | if (!movedFace) return prevGroups; |
| | |
| | |
| | if (targetGroupId === 'new-group') { |
| | updatedGroups.unshift({ |
| | id: `group-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, |
| | name: '', |
| | baseDescriptor: movedFace.descriptor, |
| | faces: [movedFace] |
| | }); |
| | } else { |
| | updatedGroups = updatedGroups.map(group => { |
| | if (group.id === targetGroupId) { |
| | return { ...group, faces: [...group.faces, movedFace] }; |
| | } |
| | return group; |
| | }); |
| | } |
| | |
| | |
| | return updatedGroups.filter(g => g.faces.length > 0); |
| | }); |
| | }, 0); |
| | }; |
| | |
| | const applyGlobalCropSettings = async (newSettings) => { |
| | setCropSettings(newSettings); |
| | if (extractedFaces.length === 0) return; |
| | |
| | setIsProcessing(true); |
| | setStatusText("Applying new crop settings..."); |
| | |
| | |
| | await new Promise(resolve => setTimeout(resolve, 50)); |
| | |
| | try { |
| | const imageCache = {}; |
| | const updatedFaces = []; |
| | |
| | for (let i = 0; i < extractedFaces.length; i++) { |
| | const face = extractedFaces[i]; |
| | let img = imageCache[face.sourceUrl]; |
| | if (!img) { |
| | img = new Image(); |
| | img.src = face.sourceUrl; |
| | await new Promise(r => img.onload = r); |
| | imageCache[face.sourceUrl] = img; |
| | } |
| | |
| | const newCropDataUrl = generateCrop(img, face.originalBox, newSettings, face.manualOffsets || { x: 0, y: 0, zoom: 1, resolution: 'auto' }); |
| | updatedFaces.push({ ...face, cropDataUrl: newCropDataUrl }); |
| | } |
| | |
| | setExtractedFaces(updatedFaces); |
| | |
| | |
| | setFaceGroups(prevGroups => prevGroups.map(group => ({ |
| | ...group, |
| | faces: group.faces.map(gFace => { |
| | const updatedFace = updatedFaces.find(uf => uf.id === gFace.id); |
| | return updatedFace ? { ...gFace, cropDataUrl: updatedFace.cropDataUrl } : gFace; |
| | }) |
| | }))); |
| | } catch (error) { |
| | console.error("Error applying crop settings:", error); |
| | } finally { |
| | setIsProcessing(false); |
| | setStatusText("Done"); |
| | } |
| | }; |
| | |
| | const clusterFaces = useCallback((facesToCluster, threshold) => { |
| | const groups = []; |
| | facesToCluster.forEach(face => { |
| | let foundGroup = false; |
| | for (let group of groups) { |
| | const distance = window.faceapi.euclideanDistance(group.baseDescriptor, face.descriptor); |
| | if (distance < threshold) { |
| | group.faces.push(face); |
| | foundGroup = true; |
| | break; |
| | } |
| | } |
| | if (!foundGroup) { |
| | groups.push({ |
| | id: `group-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, |
| | name: '', |
| | baseDescriptor: face.descriptor, |
| | faces: [face] |
| | }); |
| | } |
| | }); |
| | |
| | |
| | groups.sort((a, b) => b.faces.length - a.faces.length); |
| | setFaceGroups(groups); |
| | }, []); |
| | |
| | const processImages = async (files) => { |
| | if (!files || files.length === 0) return; |
| | |
| | setIsProcessing(true); |
| | setFaceGroups([]); |
| | setExtractedFaces([]); |
| | setSelectedFaceIds(new Set()); |
| | const allExtractedFaces = []; |
| | |
| | for (let i = 0; i < files.length; i++) { |
| | const file = files[i]; |
| | if (!file.type.startsWith('image/')) continue; |
| | |
| | setStatusText(`Scanning image ${i + 1} of ${files.length}...`); |
| | setProgress(((i) / files.length) * 100); |
| | |
| | try { |
| | const img = await new Promise((resolve, reject) => { |
| | const reader = new FileReader(); |
| | reader.onload = (e) => { |
| | const image = new Image(); |
| | image.src = e.target.result; |
| | image.onload = () => resolve(image); |
| | image.onerror = reject; |
| | }; |
| | reader.onerror = reject; |
| | reader.readAsDataURL(file); |
| | }); |
| | |
| | const detections = await window.faceapi.detectAllFaces(img) |
| | .withFaceLandmarks() |
| | .withFaceDescriptors(); |
| | |
| | const sourceUrl = URL.createObjectURL(file); |
| | |
| | detections.forEach((det, idx) => { |
| | const cropDataUrl = generateCrop(img, det.detection.box, cropSettings); |
| | allExtractedFaces.push({ |
| | id: `face-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, |
| | sourceFile: file.name, |
| | sourceUrl: sourceUrl, |
| | originalBox: det.detection.box, |
| | cropDataUrl, |
| | descriptor: det.descriptor |
| | }); |
| | }); |
| | } catch (err) { |
| | console.error(`Error processing ${file.name}`, err); |
| | } |
| | } |
| | |
| | setStatusText("Organizing faces by person..."); |
| | |
| | |
| | setExtractedFaces(allExtractedFaces); |
| | clusterFaces(allExtractedFaces, matchThreshold); |
| | |
| | setIsProcessing(false); |
| | setProgress(100); |
| | setStatusText("Done"); |
| | }; |
| | |
| | const onDrop = useCallback((e) => { |
| | e.preventDefault(); |
| | if (isModelLoading || isProcessing) return; |
| | const files = Array.from(e.dataTransfer.files); |
| | processImages(files); |
| | }, [isModelLoading, isProcessing]); |
| | |
| | const onFileChange = (e) => { |
| | if (e.target.files && e.target.files.length > 0) { |
| | processImages(Array.from(e.target.files)); |
| | } |
| | }; |
| | |
| | const toggleFace = (id) => { |
| | const next = new Set(selectedFaceIds); |
| | if (next.has(id)) { |
| | next.delete(id); |
| | } else { |
| | next.add(id); |
| | } |
| | setSelectedFaceIds(next); |
| | }; |
| | |
| | const toggleGroup = (group) => { |
| | const next = new Set(selectedFaceIds); |
| | const allSelected = group.faces.every(f => next.has(f.id)); |
| | |
| | group.faces.forEach(f => { |
| | if (allSelected) { |
| | next.delete(f.id); |
| | } else { |
| | next.add(f.id); |
| | } |
| | }); |
| | setSelectedFaceIds(next); |
| | }; |
| | |
| | const clearAll = () => { |
| | setFaceGroups([]); |
| | setExtractedFaces([]); |
| | setSelectedFaceIds(new Set()); |
| | setProgress(0); |
| | }; |
| | |
| | const downloadSelected = async () => { |
| | if (selectedFaceIds.size === 0) return; |
| | |
| | setIsProcessing(true); |
| | setStatusText("Generating ZIP archive..."); |
| | |
| | try { |
| | const zip = new window.JSZip(); |
| | let totalExported = 0; |
| | |
| | faceGroups.forEach((group, gIndex) => { |
| | |
| | const hasName = group.name && group.name.trim() !== ''; |
| | const folderName = hasName ? group.name.trim() : `Person_${gIndex + 1}`; |
| | const filePrefix = hasName ? group.name.replace(/[^a-z0-9]/gi, '').toLowerCase() : 'face'; |
| | |
| | const selectedInGroup = group.faces.filter(f => selectedFaceIds.has(f.id)); |
| | |
| | if (selectedInGroup.length > 0) { |
| | const folder = zip.folder(folderName); |
| | selectedInGroup.forEach((face, fIndex) => { |
| | const base64Data = face.cropDataUrl.split(',')[1]; |
| | const fileName = hasName ? `${filePrefix}${fIndex + 1}.jpg` : `face_${fIndex + 1}.jpg`; |
| | folder.file(fileName, base64Data, {base64: true}); |
| | totalExported++; |
| | }); |
| | } |
| | }); |
| | |
| | const content = await zip.generateAsync({type: "blob"}); |
| | const url = URL.createObjectURL(content); |
| | const a = document.createElement("a"); |
| | a.href = url; |
| | a.download = `Extracted_Faces_${totalExported}.zip`; |
| | document.body.appendChild(a); |
| | a.click(); |
| | document.body.removeChild(a); |
| | URL.revokeObjectURL(url); |
| | } catch (e) { |
| | console.error("ZIP Generation Failed", e); |
| | alert("Failed to generate ZIP file."); |
| | } finally { |
| | setIsProcessing(false); |
| | setStatusText("Ready"); |
| | } |
| | }; |
| | |
| | const downloadSingleFace = (e, face, group, fIndex) => { |
| | e.stopPropagation(); |
| | const hasName = group.name && group.name.trim() !== ''; |
| | const filePrefix = hasName ? group.name.replace(/[^a-z0-9]/gi, '').toLowerCase() : 'face'; |
| | const fileName = hasName ? `${filePrefix}${fIndex + 1}.jpg` : `face_${fIndex + 1}.jpg`; |
| | |
| | const a = document.createElement("a"); |
| | a.href = face.cropDataUrl; |
| | a.download = fileName; |
| | document.body.appendChild(a); |
| | a.click(); |
| | document.body.removeChild(a); |
| | }; |
| | |
| | return ( |
| | <div className="min-h-screen"> |
| | <header className="sticky top-0 z-30 bg-neutral-950/80 backdrop-blur-md border-b border-neutral-800 px-6 py-4 flex items-center justify-between"> |
| | <div className="flex items-center gap-4"> |
| | <LogoIcon size={42} className="shadow-lg drop-shadow-md" /> |
| | <div className="flex flex-col"> |
| | <h1 className="text-2xl font-extrabold tracking-[0.2em] text-white uppercase" style={{ fontFamily: "'Montserrat', sans-serif" }}>immager</h1> |
| | <p className="text-[10px] sm:text-xs text-neutral-400 tracking-wider uppercase mt-0.5">crop faces easily in bulk</p> |
| | </div> |
| | </div> |
| | |
| | <div className="flex items-center gap-4"> |
| | <button |
| | onClick={() => setShowSettings(true)} |
| | className="text-sm flex items-center gap-2 text-neutral-400 hover:text-white transition-colors" |
| | > |
| | <SettingsIcon size={16} /> |
| | Crop Settings |
| | </button> |
| | {faceGroups.length > 0 && ( |
| | <button |
| | onClick={clearAll} |
| | className="text-sm flex items-center gap-2 text-neutral-400 hover:text-white transition-colors" |
| | > |
| | <Trash2Icon size={16} /> |
| | Start Over |
| | </button> |
| | )} |
| | </div> |
| | </header> |
| | |
| | <main className="max-w-7xl mx-auto p-6 pb-32"> |
| | {faceGroups.length === 0 && ( |
| | <div className="mt-12"> |
| | <div |
| | onDragOver={(e) => e.preventDefault()} |
| | onDrop={onDrop} |
| | onClick={() => !isModelLoading && !isProcessing && fileInputRef.current.click()} |
| | className={` |
| | relative w-full max-w-2xl mx-auto flex flex-col items-center justify-center p-16 |
| | border-2 border-dashed rounded-3xl transition-all duration-200 |
| | ${isModelLoading || isProcessing |
| | ? 'border-neutral-800 bg-neutral-900/30 cursor-not-allowed' |
| | : 'border-neutral-700 bg-neutral-900/50 hover:bg-neutral-800 hover:border-indigo-500 cursor-pointer'} |
| | `} |
| | > |
| | <input type="file" multiple accept="image/*" ref={fileInputRef} onChange={onFileChange} className="hidden" /> |
| | |
| | {(isModelLoading || isProcessing) ? ( |
| | <div className="flex flex-col items-center text-center"> |
| | <Loader2Icon size={48} className="text-indigo-500 animate-spin mb-6" /> |
| | <h3 className="text-xl font-medium text-white mb-2">{statusText}</h3> |
| | {isProcessing && progress > 0 && ( |
| | <div className="w-full max-w-xs bg-neutral-800 rounded-full h-2 mt-4 overflow-hidden"> |
| | <div className="bg-indigo-500 h-2 rounded-full transition-all duration-300 ease-out" style={{ width: `${progress}%` }} /> |
| | </div> |
| | )} |
| | </div> |
| | ) : ( |
| | <div className="flex flex-col items-center text-center"> |
| | <div className="bg-neutral-800 p-4 rounded-2xl mb-6 shadow-inner"> |
| | <UploadCloudIcon size={40} className="text-indigo-400" /> |
| | </div> |
| | <h3 className="text-2xl font-medium text-white mb-3">Upload Images</h3> |
| | <p className="text-neutral-400 max-w-sm mb-6">Drag and drop your photos here, or click to browse. We'll find and group the faces.</p> |
| | <button className="bg-white text-black px-6 py-2.5 rounded-full font-medium hover:bg-neutral-200 transition-colors">Select Images</button> |
| | </div> |
| | )} |
| | </div> |
| | |
| | {!isModelLoading && !isProcessing && ( |
| | <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto mt-16 text-center"> |
| | <div className="bg-neutral-900/30 p-6 rounded-2xl border border-neutral-800/50"> |
| | <UsersIcon size={24} className="mx-auto text-indigo-400 mb-4" /> |
| | <h4 className="font-medium text-white mb-2">Smart Clustering</h4> |
| | <p className="text-sm text-neutral-400">Groups faces of the same person together automatically.</p> |
| | </div> |
| | <div className="bg-neutral-900/30 p-6 rounded-2xl border border-neutral-800/50"> |
| | <ImageIcon size={24} className="mx-auto text-emerald-400 mb-4" /> |
| | <h4 className="font-medium text-white mb-2">Auto-Cropping</h4> |
| | <p className="text-sm text-neutral-400">Extracts perfectly framed headshots ready for use.</p> |
| | </div> |
| | <div className="bg-neutral-900/30 p-6 rounded-2xl border border-neutral-800/50"> |
| | <CheckCircleIcon size={24} className="mx-auto text-amber-400 mb-4" /> |
| | <h4 className="font-medium text-white mb-2">100% Private</h4> |
| | <p className="text-sm text-neutral-400">Everything runs entirely inside your browser. No server uploads.</p> |
| | </div> |
| | </div> |
| | )} |
| | </div> |
| | )} |
| | |
| | {faceGroups.length > 0 && ( |
| | <div className="animate-in"> |
| | |
| | {/* FLOATING OVERLAY to eliminate Layout Shift on drag start */} |
| | {isDraggingFace && ( |
| | <div |
| | className={`fixed top-24 left-1/2 -translate-x-1/2 z-50 w-full max-w-sm border-2 border-dashed rounded-2xl flex flex-col items-center justify-center p-6 shadow-2xl backdrop-blur-md transition-all ${dragOverGroupId === 'new-group' ? 'border-indigo-400 bg-indigo-500/30 scale-105' : 'border-neutral-500 bg-neutral-900/80 scale-100'}`} |
| | onDragOver={(e) => handleDragOver(e, 'new-group')} |
| | onDragLeave={handleDragLeave} |
| | onDrop={(e) => handleDrop(e, 'new-group')} |
| | > |
| | <UsersIcon size={32} className="text-white mb-2" /> |
| | <p className="text-white font-medium text-center">Drop here to create a new person</p> |
| | </div> |
| | )} |
| | |
| | <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8"> |
| | <div> |
| | <h2 className="text-2xl font-semibold tracking-tight">Found {faceGroups.length} People</h2> |
| | <div className="text-sm text-neutral-400 mt-1"> |
| | Total unique faces: {faceGroups.reduce((acc, curr) => acc + curr.faces.length, 0)} |
| | </div> |
| | </div> |
| | |
| | <div className="flex flex-col items-end gap-1 bg-neutral-900/80 p-3 rounded-xl border border-neutral-800 shadow-inner"> |
| | <label className="text-sm text-neutral-300 font-medium flex justify-between w-full"> |
| | <span>Grouping Tolerance</span> |
| | <span className="text-indigo-400 font-bold">{matchThreshold.toFixed(2)}</span> |
| | </label> |
| | <input |
| | type="range" |
| | min="0.30" max="0.70" step="0.01" |
| | value={matchThreshold} |
| | onChange={(e) => { |
| | const val = parseFloat(e.target.value); |
| | setMatchThreshold(val); |
| | clusterFaces(extractedFaces, val); |
| | }} |
| | className="w-48 md:w-64 accent-indigo-500 cursor-pointer" |
| | title="Lower = stricter matching. Higher = looser matching." |
| | /> |
| | <span className="text-xs text-neutral-500">Slide right to merge similar people</span> |
| | </div> |
| | </div> |
| | |
| | <div className="columns-1 md:columns-2 lg:columns-3 xl:columns-4 gap-6 space-y-6"> |
| | |
| | {faceGroups.map((group, groupIndex) => { |
| | const allSelected = group.faces.every(f => selectedFaceIds.has(f.id)); |
| | const someSelected = !allSelected && group.faces.some(f => selectedFaceIds.has(f.id)); |
| | |
| | return ( |
| | <div |
| | key={group.id} |
| | className={`break-inside-avoid bg-neutral-900 rounded-2xl border transition-colors overflow-hidden group ${dragOverGroupId === group.id ? 'border-indigo-500 shadow-[0_0_15px_rgba(99,102,241,0.3)]' : 'border-neutral-800'}`} |
| | onDragOver={(e) => handleDragOver(e, group.id)} |
| | onDragLeave={handleDragLeave} |
| | onDrop={(e) => handleDrop(e, group.id)} |
| | > |
| | <div className="px-5 py-4 flex items-center justify-between border-b border-neutral-800/50 bg-neutral-900/80"> |
| | <div className="flex items-center gap-3"> |
| | <div className="w-8 h-8 rounded-full overflow-hidden border border-neutral-700"> |
| | <img src={group.faces[0].cropDataUrl} className="w-full h-full object-cover pointer-events-none" alt={`Person ${groupIndex + 1}`} /> |
| | </div> |
| | <div className="flex flex-col"> |
| | <input |
| | type="text" |
| | value={group.name} |
| | placeholder={`Person ${groupIndex + 1}`} |
| | onChange={(e) => updateGroupName(group.id, e.target.value)} |
| | className="text-sm font-medium bg-transparent border-b border-transparent hover:border-neutral-600 focus:border-indigo-500 outline-none text-white w-32 placeholder:text-neutral-400 transition-colors" |
| | /> |
| | <div className="text-xs text-neutral-500">{group.faces.length} shots</div> |
| | </div> |
| | </div> |
| | <button onClick={() => toggleGroup(group)} className="text-neutral-400 hover:text-white transition-colors p-1" title={allSelected ? "Deselect All" : "Select All"}> |
| | {allSelected ? <CheckSquareIcon size={20} className="text-indigo-500" /> |
| | : someSelected ? <CheckSquareIcon size={20} className="text-indigo-500 opacity-50" /> |
| | : <SquareIcon size={20} />} |
| | </button> |
| | </div> |
| | |
| | <div className="p-4 grid grid-cols-3 gap-3"> |
| | {group.faces.map((face, fIndex) => { |
| | const isSelected = selectedFaceIds.has(face.id); |
| | return ( |
| | <div |
| | key={face.id} |
| | draggable={true} |
| | onDragStart={(e) => handleDragStart(e, face.id, group.id)} |
| | onDragEnd={handleDragEnd} |
| | onClick={() => toggleFace(face.id)} |
| | className={`relative aspect-square rounded-xl overflow-hidden cursor-grab active:cursor-grabbing group/item transition-all duration-200 border-2 ${isSelected ? 'border-indigo-500 scale-95' : 'border-transparent hover:border-neutral-600'}`} |
| | > |
| | <img src={face.cropDataUrl} alt="Crop" draggable="false" className="w-full h-full object-cover select-none pointer-events-none" loading="lazy" /> |
| | |
| | <div className={`absolute top-2 right-2 opacity-0 group-hover/item:opacity-100 transition-opacity z-10 flex gap-1.5`}> |
| | <button onClick={(e) => downloadSingleFace(e, face, group, fIndex)} className="p-1.5 bg-neutral-900/80 hover:bg-emerald-500 rounded-lg text-white backdrop-blur border border-neutral-700 transition-colors shadow-sm" title="Download Image"> |
| | <DownloadIcon size={14} /> |
| | </button> |
| | <button onClick={(e) => { e.stopPropagation(); openEditor(face, groupIndex, fIndex); }} className="p-1.5 bg-neutral-900/80 hover:bg-indigo-500 rounded-lg text-white backdrop-blur border border-neutral-700 transition-colors shadow-sm" title="Manual Crop"> |
| | <EditIcon size={14} /> |
| | </button> |
| | </div> |
| | |
| | <div className={`absolute inset-0 pointer-events-none flex items-center justify-center transition-opacity ${isSelected ? 'bg-indigo-500/20 opacity-100' : 'bg-black/40 opacity-0 group-hover/item:opacity-100'}`}> |
| | <div className={`w-6 h-6 rounded-full border-2 flex items-center justify-center ${isSelected ? 'bg-indigo-500 border-indigo-500' : 'border-white/70'}`}> |
| | {isSelected && <CheckCircleIcon size={14} className="text-white" />} |
| | </div> |
| | </div> |
| | </div> |
| | ); |
| | })} |
| | </div> |
| | </div> |
| | ); |
| | })} |
| | </div> |
| | </div> |
| | )} |
| | </main> |
| | |
| | {faceGroups.length > 0 && ( |
| | <div className={`fixed bottom-8 left-1/2 -translate-x-1/2 z-40 transition-all duration-300 ${selectedFaceIds.size > 0 ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0 pointer-events-none'}`}> |
| | <div className="bg-neutral-900 border border-neutral-800 shadow-2xl rounded-full p-2 pl-6 pr-3 flex items-center gap-6"> |
| | <div className="font-medium text-sm"> |
| | <span className="text-indigo-400 font-bold">{selectedFaceIds.size}</span> faces selected |
| | </div> |
| | <button onClick={downloadSelected} disabled={isProcessing} className={`flex items-center gap-2 bg-indigo-600 text-white px-5 py-2.5 rounded-full text-sm font-medium hover:bg-indigo-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed`}> |
| | {isProcessing ? <Loader2Icon size={18} className="animate-spin" /> : <DownloadIcon size={18} />} |
| | {isProcessing ? 'Creating ZIP...' : 'Download'} |
| | </button> |
| | </div> |
| | </div> |
| | )} |
| | |
| | {showSettings && ( |
| | <div className="fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4"> |
| | <div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-6 w-full max-w-md shadow-2xl animate-in"> |
| | <div className="flex items-center justify-between mb-6"> |
| | <h3 className="text-lg font-semibold text-white">Smart Crop Settings</h3> |
| | <button onClick={() => setShowSettings(false)} className="text-neutral-400 hover:text-white"><XIcon size={20}/></button> |
| | </div> |
| | <div className="space-y-4"> |
| | <div> |
| | <label className="block text-sm text-neutral-400 mb-2">Padding Style</label> |
| | <select |
| | disabled={isProcessing} |
| | value={cropSettings.padding} |
| | onChange={(e) => applyGlobalCropSettings({...cropSettings, padding: parseFloat(e.target.value)})} |
| | className="w-full bg-neutral-800 border border-neutral-700 rounded-lg p-2.5 text-white outline-none focus:border-indigo-500 disabled:opacity-50" |
| | > |
| | <option value="0.05">Very Tight (Exclude others)</option> |
| | <option value="0.15">Tight</option> |
| | <option value="0.3">Normal</option> |
| | <option value="0.5">Wide</option> |
| | </select> |
| | </div> |
| | <div> |
| | <label className="block text-sm text-neutral-400 mb-2">Shape</label> |
| | <select |
| | disabled={isProcessing} |
| | value={cropSettings.shape} |
| | onChange={(e) => applyGlobalCropSettings({...cropSettings, shape: e.target.value})} |
| | className="w-full bg-neutral-800 border border-neutral-700 rounded-lg p-2.5 text-white outline-none focus:border-indigo-500 disabled:opacity-50" |
| | > |
| | <option value="square">Square</option> |
| | <option value="original">Original Aspect</option> |
| | </select> |
| | </div> |
| | <p className="text-xs text-neutral-500 mt-4 leading-relaxed">Changes apply instantly to all currently extracted faces.</p> |
| | <button onClick={() => setShowSettings(false)} disabled={isProcessing} className="w-full mt-6 bg-indigo-600 hover:bg-indigo-500 text-white py-2.5 rounded-lg font-medium transition-colors disabled:opacity-50">Done</button> |
| | </div> |
| | </div> |
| | </div> |
| | )} |
| | |
| | {editingFace && ( |
| | <div className="fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4"> |
| | <div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-6 w-full max-w-lg flex flex-col items-center shadow-2xl animate-in"> |
| | <div className="w-full flex items-center justify-between mb-4"> |
| | <h3 className="text-lg font-semibold text-white">Manual Crop Adjust (Drag to Pan)</h3> |
| | <button onClick={() => setEditingFace(null)} className="text-neutral-400 hover:text-white"><XIcon size={20}/></button> |
| | </div> |
| | |
| | <div |
| | className={`relative w-64 h-64 bg-neutral-800 rounded-xl overflow-hidden mb-6 border border-neutral-700 flex items-center justify-center shadow-inner ${dragState.isDragging ? 'cursor-grabbing' : 'cursor-grab'}`} |
| | onMouseDown={(e) => { |
| | setDragState({ |
| | isDragging: true, |
| | startX: e.clientX, |
| | startY: e.clientY, |
| | initialOffsetX: editingFace.manualOffsets.x, |
| | initialOffsetY: editingFace.manualOffsets.y |
| | }); |
| | }} |
| | onMouseMove={(e) => { |
| | if (!dragState.isDragging || !editingFace) return; |
| | const dx = e.clientX - dragState.startX; |
| | const dy = e.clientY - dragState.startY; |
| | |
| | // Scale drag distance based on image zoom and box size to feel natural |
| | const scale = Math.max(1, editingFace.originalBox.width / 128) / editingFace.manualOffsets.zoom; |
| | |
| | updateManualCrop({ |
| | x: dragState.initialOffsetX - (dx * scale), |
| | y: dragState.initialOffsetY - (dy * scale) |
| | }); |
| | }} |
| | onMouseUp={() => setDragState(prev => ({ ...prev, isDragging: false }))} |
| | onMouseLeave={() => setDragState(prev => ({ ...prev, isDragging: false }))} |
| | > |
| | <img |
| | src={editingFace.previewUrl} |
| | style={{ imageRendering: editingFace.manualOffsets.resolution !== 'auto' && parseInt(editingFace.manualOffsets.resolution) < 150 ? 'pixelated' : 'auto' }} |
| | className="max-w-full max-h-full object-contain pointer-events-none select-none" |
| | alt="Preview" |
| | draggable="false" |
| | /> |
| | </div> |
| | |
| | <div className="w-full space-y-5"> |
| | <div> |
| | <label className="flex justify-between text-sm text-neutral-400 mb-2"> |
| | <span>Export Resolution</span> |
| | <span>{editingFace.manualOffsets.resolution === 'auto' ? 'Auto' : `${editingFace.manualOffsets.resolution}x${editingFace.manualOffsets.resolution}`}</span> |
| | </label> |
| | <select |
| | value={editingFace.manualOffsets.resolution} |
| | onChange={(e) => updateManualCrop({ resolution: e.target.value })} |
| | className="w-full bg-neutral-800 border border-neutral-700 rounded-lg p-2.5 text-white outline-none focus:border-indigo-500" |
| | > |
| | <option value="auto">Auto (Original Detected Size)</option> |
| | <option value="56">56 x 56</option> |
| | <option value="128">128 x 128</option> |
| | <option value="256">256 x 256</option> |
| | <option value="512">512 x 512</option> |
| | </select> |
| | </div> |
| | <div> |
| | <label className="flex justify-between text-sm text-neutral-400 mb-2"> |
| | <span>Zoom</span> |
| | <span>{editingFace.manualOffsets.zoom.toFixed(1)}x</span> |
| | </label> |
| | <input type="range" min="0.5" max="2.5" step="0.1" value={editingFace.manualOffsets.zoom} onChange={(e) => updateManualCrop({ zoom: parseFloat(e.target.value) })} className="w-full accent-indigo-500" /> |
| | </div> |
| | </div> |
| | |
| | <div className="w-full flex gap-3 mt-8"> |
| | <button onClick={() => setEditingFace(null)} className="flex-1 py-2.5 rounded-lg border border-neutral-700 text-white hover:bg-neutral-800 transition-colors">Cancel</button> |
| | <button onClick={saveManualCrop} className="flex-1 py-2.5 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white font-medium transition-colors shadow-lg">Apply Crop</button> |
| | </div> |
| | </div> |
| | </div> |
| | )} |
| | </div> |
| | ); |
| | } |
| | |
| | |
| | const root = ReactDOM.createRoot(document.getElementById('root')); |
| | root.render(<FaceExtractApp />); |
| | </script> |
| | </body> |
| | </html> |
