javascript
// Script.jsconst dropzone = document.getElementById('dropzone');
const results = document.getElementById('results');
const loading = document.getElementById('loading');// Hide loading initially
loading.style.display = 'none';// Add event listeners
dropzone.addEventListener('dragover', handleDragOver);
dropzone.addEventListener('drop', handleDrop);// Handle drag over
function handleDragOver(e) {e.preventDefault();e.dataTransfer.dropEffect = 'copy';
}// Handle drop
function handleDrop(e) {e.preventDefault();// Get the filesconst files = e.dataTransfer.files;// If there are no files, returnif (files.length === 0) {return;}// Show loadingloading.style.display = 'block';// Loop through the filesfor (let i = 0; i < files.length; i++) {const file = files[i];// Create a new FileReaderconst reader = new FileReader();// Read the filereader.onload = function () {// Get the image dataconst imageData = reader.result;// Send the image data to the serverfetch('/api/recognition', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({imageData})}).then(response => response.json()).then(data => {// Hide loadingloading.style.display = 'none';// Show the resultsconst resultsList = document.createElement('ul');for (let i = 0; i < data.length; i++) {const result = data[i];const resultItem = document.createElement('li');resultItem.textContent = `${result.name} (${result.confidence}%)`;resultsList.appendChild(resultItem);}results.appendChild(resultsList);}).catch(error => {// Hide loadingloading.style.display = 'none';// Show an error messagealert('Error: ' + error.message);});};reader.readAsDataURL(file);}
}
php
// api/recognition.php
faces->detect($imageData);// Return the recognition results
header('Content-Type: application/json');
echo json_encode($result);?>
