FaceSearch - Free Pimeyes Remake

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap'); body { margin: 0; padding: 0; font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #232526 0%, #414345 100%); min-height: 100vh; color: #f5f5f5; } #app { max-width: 600px; margin: 40px auto; background: #23272f; border-radius: 18px; box-shadow: 0 8px 32px rgba(0,0,0,0.25); padding: 32px 24px 24px 24px; } h1 { text-align: center; font-size: 2.2rem; margin-bottom: 8px; font-weight: 700; letter-spacing: 1px; } .subtitle { text-align: center; color: #b0b3b8; margin-bottom: 32px; font-size: 1.1rem; } .upload-section { display: flex; flex-direction: column; align-items: center; margin-bottom: 32px; } .upload-label { background: #3a3f47; border-radius: 10px; padding: 18px 32px; cursor: pointer; font-size: 1.1rem; font-weight: 500; transition: background 0.2s; margin-bottom: 12px; border: 2px dashed #5e5e5e; color: #e0e0e0; } .upload-label:hover { background: #4a505a; } .upload-section input[type="file"] { display: none; } .preview-img { max-width: 180px; max-height: 180px; border-radius: 12px; margin-bottom: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.18); border: 2px solid #444; background: #181a1b; object-fit: cover; } .search-btn { background: linear-gradient(90deg, #4f8cff 0%, #38e7b0 100%); color: #fff; border: none; border-radius: 8px; padding: 14px 36px; font-size: 1.1rem; font-weight: 700; cursor: pointer; margin-top: 10px; transition: background 0.2s, transform 0.1s; box-shadow: 0 2px 8px rgba(79,140,255,0.12); } .search-btn:active { transform: scale(0.97); } .search-btn:disabled { opacity: 0.5; cursor: not-allowed; } .results-section { margin-top: 36px; } .results-title { font-size: 1.3rem; font-weight: 600; margin-bottom: 18px; color: #b0eaff; text-align: center; } .results-list { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; } .result-card { background: #2c313a; border-radius: 10px; padding: 14px 12px 10px 12px; width: 170px; box-shadow: 0 2px 8px rgba(0,0,0,0.13); display: flex; flex-direction: column; align-items: center; transition: box-shadow 0.2s; } .result-card:hover { box-shadow: 0 4px 16px rgba(56,231,176,0.13); } .result-img { width: 120px; height: 120px; border-radius: 8px; object-fit: cover; margin-bottom: 10px; border: 2px solid #3a3f47; background: #181a1b; } .result-link { color: #4f8cff; text-decoration: none; font-size: 0.98rem; font-weight: 500; margin-bottom: 4px; word-break: break-all; transition: color 0.2s; } .result-link:hover { color: #38e7b0; text-decoration: underline; } .result-score { font-size: 0.92rem; color: #b0b3b8; margin-top: 2px; } .loading { text-align: center; color: #38e7b0; font-size: 1.1rem; margin-top: 18px; } .error { color: #ff6b6b; text-align: center; margin-top: 18px; font-size: 1.05rem; } @media (max-width: 700px) { #app { max-width: 98vw; padding: 16px 4vw 18px 4vw; } .results-list { gap: 14px; } .result-card { width: 98vw; max-width: 220px; } } import { loadModels, findFaces } from './src/faceSearch.js' import { renderResults, renderError, renderLoading, clearResults } from './src/ui.js' const app = document.getElementById('app') let selectedImage = null let previewUrl = null function render() { app.innerHTML = `

FaceSearch

Free, private, and beautiful face search. Upload a face photo to find visually similar faces across the web.

Click to upload a face photo

` const fileInput = document.getElementById('file-input') const previewImg = document.getElementById('preview-img') const searchBtn = document.getElementById('search-btn') const uploadText = document.getElementById('upload-text') fileInput.addEventListener('change', e => { const file = e.target.files[0] if (!file) return if (previewUrl) URL.revokeObjectURL(previewUrl) previewUrl = URL.createObjectURL(file) previewImg.src = previewUrl previewImg.style.display = 'block' selectedImage = file searchBtn.disabled = false uploadText.textContent = file.name clearResults() }) searchBtn.addEventListener('click', async () => { if (!selectedImage) return searchBtn.disabled = true renderLoading() try { await loadModels() const results = await findFaces(selectedImage) renderResults(results) } catch (err) { renderError('Face not detected or search failed. Try another photo.') } searchBtn.disabled = false }) } render() // This module handles face detection and "search". // For demo, we use face-api.js and a mock dataset. import * as faceapi from '../node_modules/face-api.js/dist/face-api.esm.js' // Mock dataset: Each entry is {img, url, name} const MOCK_DATA = [ { img: 'https://randomuser.me/api/portraits/men/32.jpg', url: 'https://randomuser.me/api/portraits/men/32.jpg', name: 'John Doe' }, { img: 'https://randomuser.me/api/portraits/women/44.jpg', url: 'https://randomuser.me/api/portraits/women/44.jpg', name: 'Jane Smith' }, { img: 'https://randomuser.me/api/portraits/men/65.jpg', url: 'https://randomuser.me/api/portraits/men/65.jpg', name: 'Alex Johnson' }, { img: 'https://randomuser.me/api/portraits/women/68.jpg', url: 'https://randomuser.me/api/portraits/women/68.jpg', name: 'Emily Brown' }, { img: 'https://randomuser.me/api/portraits/men/12.jpg', url: 'https://randomuser.me/api/portraits/men/12.jpg', name: 'Michael Lee' }, { img: 'https://randomuser.me/api/portraits/women/21.jpg', url: 'https://randomuser.me/api/portraits/women/21.jpg', name: 'Sophia Green' } ] let modelsLoaded = false let datasetDescriptors = null export async function loadModels() { if (modelsLoaded) return const MODEL_URL = 'https://cdn.jsdelivr.net/npm/face-api.js@0.22.2/weights' await Promise.all([ faceapi.nets.ssdMobilenetv1.loadFromUri(MODEL_URL), faceapi.nets.faceRecognitionNet.loadFromUri(MODEL_URL), faceapi.nets.faceLandmark68Net.loadFromUri(MODEL_URL) ]) modelsLoaded = true // Precompute dataset face descriptors datasetDescriptors = await Promise.all( MOCK_DATA.map(async entry => { const img = await faceapi.fetchImage(entry.img) const detection = await faceapi .detectSingleFace(img) .withFaceLandmarks() .withFaceDescriptor() return detection ? detection.descriptor : null }) ) } export async function findFaces(file) { // Detect face and get descriptor from uploaded image const img = await fileToImage(file) const detection = await faceapi .detectSingleFace(img) .withFaceLandmarks() .withFaceDescriptor() if (!detection) throw new Error('No face detected') const queryDescriptor = detection.descriptor // Compare with dataset const results = [] for (let i = 0; i < MOCK_DATA.length; ++i) { const desc = datasetDescriptors[i] if (!desc) continue const dist = faceapi.euclideanDistance(queryDescriptor, desc) results.push({ ...MOCK_DATA[i], score: dist }) } // Lower distance = more similar results.sort((a, b) => a.score - b.score) // Map to similarity percent (fake, for demo) return results.slice(0, 4).map(r => ({ ...r, similarity: Math.max(100 - Math.round(r.score * 100), 60) })) } function fileToImage(file) { return new Promise((resolve, reject) => { const img = new Image() img.onload = () => resolve(img) img.onerror = reject img.src = URL.createObjectURL(file) }) } export function renderResults(results) { const section = document.getElementById('results-section') if (!results.length) { section.innerHTML = `

No similar faces found.

` return } section.innerHTML = `

Similar Faces Found

${results .map( r => `

${r.name}

Similarity: ${r.similarity}%

` ) .join('')}

` } export function renderError(msg) { const section = document.getElementById('results-section') section.innerHTML = `

${msg}

` } export function renderLoading() { const section = document.getElementById('results-section') section.innerHTML = `

Searching for similar faces...

` } export function clearResults() { const section = document.getElementById('results-section') section.innerHTML = '' } { "name": "facesearch-pimeyes-remake", "version": "1.0.0", "type": "module", "dependencies": { "face-api.js": "^0.22.2" } }