Create static/script.js

static/script.js

@@ -0,0 +1,157 @@
+// عرض معاينة الصورة
+document.getElementById('enrollImage')?.addEventListener('change', function(e) {
+    previewImage(e, 'enrollPreview');
+});
+document.getElementById('searchImage')?.addEventListener('change', function(e) {
+    previewImage(e, 'searchPreview');
+});
+
+function previewImage(event, previewId) {
+    const file = event.target.files[0];
+    if (file) {
+        const reader = new FileReader();
+        reader.onload = function(e) {
+            const preview = document.getElementById(previewId);
+            preview.innerHTML = `<img src="${e.target.result}" alt="Preview">`;
+        };
+        reader.readAsDataURL(file);
+    }
+}
+
+// تسجيل وجه
+async function enrollFace() {
+    const imageFile = document.getElementById('enrollImage').files[0];
+    const personName = document.getElementById('personName').value;
+    
+    if (!imageFile || !personName) {
+        showResult('enrollResult', '❌ الرجاء اختيار صورة وإدخال الاسم', 'error');
+        return;
+    }
+    
+    const formData = new FormData();
+    formData.append('file', imageFile);
+    
+    showLoading('enrollResult', 'جاري تسجيل الوجه...');
+    
+    try {
+        const response = await fetch(`/api/enroll?name=${encodeURIComponent(personName)}`, {
+            method: 'POST',
+            body: formData
+        });
+        
+        const result = await response.json();
+        
+        if (result.success) {
+            showResult('enrollResult', `✅ ${result.message}\nالرقم: ${result.identity_id}`, 'success');
+            document.getElementById('personName').value = '';
+            document.getElementById('enrollImage').value = '';
+            document.getElementById('enrollPreview').innerHTML = '';
+        } else {
+            showResult('enrollResult', `❌ ${result.message}`, 'error');
+        }
+    } catch (error) {
+        showResult('enrollResult', '❌ حدث خطأ في الاتصال', 'error');
+    }
+}
+
+// البحث عن وجه
+async function searchFace() {
+    const imageFile = document.getElementById('searchImage').files[0];
+    
+    if (!imageFile) {
+        showResult('searchResult', '❌ الرجاء اختيار صورة للبحث', 'error');
+        return;
+    }
+    
+    const formData = new FormData();
+    formData.append('file', imageFile);
+    
+    showLoading('searchResult', 'جاري البحث...');
+    
+    try {
+        const response = await fetch('/api/search', {
+            method: 'POST',
+            body: formData
+        });
+        
+        const result = await response.json();
+        
+        if (result.success) {
+            const similarityPercent = (result.similarity * 100).toFixed(2);
+            showResult('searchResult', 
+                `✅ تم العثور على تطابق!\n👤 الاسم: ${result.name}\n📊 نسبة التشابه: ${similarityPercent}%\n🆔 الرقم: ${result.identity_id}`,
+                'success');
+        } else {
+            showResult('searchResult', `❌ ${result.message}`, 'error');
+        }
+    } catch (error) {
+        showResult('searchResult', '❌ حدث خطأ في الاتصال', 'error');
+    }
+}
+
+// تحميل قاعدة البيانات
+async function loadDatabase() {
+    showLoading('databaseList', 'جاري تحميل البيانات...');
+    
+    try {
+        const response = await fetch('/api/identities');
+        const result = await response.json();
+        
+        if (result.success && result.data.length > 0) {
+            let html = '<div class="identities-grid">';
+            result.data.forEach(person => {
+                html += `
+                    <div class="identity-card">
+                        <h3>${person.name}</h3>
+                        <p>🆔 ${person.id}</p>
+                        <p>📅 ${new Date(person.created_at).toLocaleDateString('ar-EG')}</p>
+                    </div>
+                `;
+            });
+            html += '</div>';
+            document.getElementById('databaseList').innerHTML = html;
+        } else {
+            showResult('databaseList', '📭 لا يوجد أشخاص مسجلين', 'info');
+        }
+    } catch (error) {
+        showResult('databaseList', '❌ خطأ في تحميل البيانات', 'error');
+    }
+}
+
+function showResult(elementId, message, type) {
+    const element = document.getElementById(elementId);
+    element.innerHTML = `<div class="alert alert-${type}">${message.replace(/\n/g, '<br>')}</div>`;
+    setTimeout(() => {
+        if (element.innerHTML.includes('alert')) {
+            element.innerHTML = '';
+        }
+    }, 5000);
+}
+
+function showLoading(elementId, message) {
+    document.getElementById(elementId).innerHTML = `<div class="loading">⏳ ${message}</div>`;
+}
+
+function showTab(tabName) {
+    // إخفاء كل التبويبات
+    document.querySelectorAll('.tab-content').forEach(tab => {
+        tab.classList.remove('active');
+    });
+    document.querySelectorAll('.tab-btn').forEach(btn => {
+        btn.classList.remove('active');
+    });
+    
+    // إظهار التبويب المختار
+    document.getElementById(tabName).classList.add('active');
+    event.target.classList.add('active');
+    
+    // تحميل قاعدة البيانات إذا تم اختيارها
+    if (tabName === 'database') {
+        loadDatabase();
+    }
+}
+
+// تحميل قاعدة البيانات تلقائياً عند بدء التشغيل
+document.addEventListener('DOMContentLoaded', () => {
+    loadDatabase();
+});