Add Face

2026-06-19 18:19:30 +03:00
parent 794fc621ff
commit 90cbc7c506
14 changed files with 33988 additions and 0 deletions
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Face Recognition</title>
+    <style>
+        body {
+            font-family: sans-serif;
+            background: #222;
+            color: #fff;
+            text-align: center;
+        }
+
+        #gallery {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 10px;
+            margin-top: 20px;
+        }
+
+        .card {
+            background: #333;
+            padding: 10px;
+            border-radius: 8px;
+            width: 200px;
+        }
+
+        img {
+            width: 100%;
+            border: 3px solid red;
+            border-radius: 4px;
+        }
+
+        .known img {
+            border-color: green;
+        }
+
+        .name {
+            margin-top: 5px;
+            font-weight: bold;
+        }
+
+        .time {
+            font-size: 0.8em;
+            color: #aaa;
+        }
+    </style>
+</head>
+<body>
+    <h1>Live Face Detection</h1>
+    <div id="gallery"></div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/8.0.0/signalr.min.js"></script>
+    <script>
+        const connection = new signalR.HubConnectionBuilder().withUrl("/faceHub").build();
+
+        connection.on("NewFace", (data) => {
+            const div = document.createElement('div');
+            div.className = data.isRecognized ? 'card known' : 'card';
+            div.innerHTML = `
+                <img src="data:image/jpeg;base64,${data.image}" />
+                <div class="name">${data.isRecognized ? data.name : 'Unknown'}</div>
+                <div class="time">${new Date().toLocaleTimeString()}</div>
+            `;
+            const gallery = document.getElementById('gallery');
+            gallery.insertBefore(div, gallery.firstChild);
+            if (gallery.children.length > 20) gallery.lastChild.remove();
+        });
+
+        connection.start().catch(console.error);
+    </script>
+</body>
+</html>