Added face position detection.

Added bounding box with JS to track
kirmorozov · Mar 31, 2024 · da62535 · da62535
1 parent 356ce01
commit da62535
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 11 deletions.
diff --git a/app.py b/app.py
@@ -17,7 +17,7 @@ def has_smile():
 
     if res:
         return "ok"
-    return "ko"
+    return { 'smiling': res}
 
 
 @app.route("/find_faces",  methods = ['POST'])
@@ -34,13 +34,10 @@ def has_smile_json():
     json_data = request.json
     with urlopen(json_data['image']) as response:
         image_data = response.read()
-
-    # image_data = requests.get(json_data['image'], stream=True).raw
+    foundFaces = smile_detector.findFaces(image_data)
     res = smile_detector.smileCheck(image_data)
 
-    if res:
-        return "ok"
-    return "ko"
+    return {'smiling': res, 'faces': foundFaces}
 
 if __name__ == '__main__':
     app.run()
diff --git a/smile_detector.py b/smile_detector.py
@@ -26,7 +26,8 @@ def initFaceDetectionModel(self):
         front_net.min_score_thresh = 0.75
         front_net.min_suppression_threshold = 0.3
 
-        self.faceDetectionModel = front_net
+        self.faceDetectionForwardModel = front_net
+        self.faceDetectionBackModel = back_net
     def initSmileModel(self):
         # Load the model an pass it to the proper device
         modelPath = 'model/LeNNon-Smile-Detector.pt'
@@ -72,5 +73,25 @@ def smileCheck(self, image_bytes: bytes):
         return predicted.item() > 0
 
     def findFaces(self, image_bytes: bytes):
-        # res = self.faceDetectionModel.predict_on_image()
-        pass
+        image_io = BytesIO(image_bytes)
+        image = Image.open(image_io)
+        width, height = image.size   # Get dimensions
+        baseDim = min(width,height)
+        transform = transforms.Compose([
+            transforms.CenterCrop((min(width,height),min(width,height))),
+            transforms.Resize((256, 256)),
+            transforms.ToTensor(),
+            lambda x: x*255 # to be compatible with the model
+        ])
+
+        detections = self.faceDetectionBackModel.predict_on_image(transform(image))
+        res = []
+        for i in range(detections.shape[0]):
+            faceMarkers = detections[i]
+
+            ymin = faceMarkers[0].item() * baseDim # + (width - height)/2
+            xmin = faceMarkers[1].item() * baseDim + (width - height)/2
+            ymax = faceMarkers[2].item() * baseDim # + (width - height)/2
+            xmax = faceMarkers[3].item() * baseDim + (width - height)/2
+            res.append((ymin,xmin,ymax,xmax))
+        return res
diff --git a/templates/index.html b/templates/index.html
@@ -24,24 +24,42 @@
         .d-none {
             display: none;
         }
+
+        #faceBox {
+            width: 100px;
+            height: 100px;
+            border: green 3px solid;
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 1000;
+        }
     </style>
 </head>
 
 <body>
 <div id="container">
+    <div id="faceBox"></div>
     <video id="webcam" autoplay playsinline width="640" height="480"></video>
     <canvas id="canvas" class="d-none"></canvas>
 </div>
 <div id="controls">
     <button id="btnStart">Start</button>
     <button id="btnStop">Stop</button>
     <button id="btnRun">Capture & Check</button>
-</div>
-<div id="log">
+    <br/>
+    <div>
+        Upon capture this application looks for faces on the image.<br/>
+        Once face is found, checks if there is a smile on the face.<br/>
+        Utilizes Face detection model and a model to confirm a smile.
+    </div>
+    <pre id="log">
 
+    </pre>
 </div>
 
 
+
 <script type="text/javascript" src="https://unpkg.com/webcam-easy/dist/webcam-easy.min.js"></script>
 <script>
     const webcamElement = document.getElementById('webcam');
@@ -51,6 +69,10 @@
     const btnStart = document.getElementById('btnStart');
     const btnStop  = document.getElementById('btnStop');
     const btnRun   = document.getElementById('btnRun');
+    const log = document.getElementById('log');
+
+    const faceBox = document.getElementById('faceBox');
+
     btnStart.addEventListener("click", (event) => {
         webcam.start()
             .then(result =>{
@@ -80,6 +102,16 @@
         }).then((resp) => {
             return resp.json();
         }).then((jsonRes) => {
+            var rect = webcamElement.getBoundingClientRect();
+
+            faceBox.style.top = (rect.top + jsonRes.faces[0][0]) +'px';
+            faceBox.style.left = (rect.left + jsonRes.faces[0][1]) +'px';
+            var h = jsonRes.faces[0][2] - jsonRes.faces[0][0];
+            var w = jsonRes.faces[0][3] - jsonRes.faces[0][1];
+            faceBox.style.height = Math.round(h) +'px';
+            faceBox.style.width  = Math.round(w) +'px';
+
+            log.innerHTML = JSON.stringify(jsonRes) + "\r\n" + log.innerHTML;
             console.log(jsonRes);
         });
     });