Implemented bounding box, and updated text overlay to be in corner of bounding box.

Author: apaezcastro

app.py

@@ -37,7 +37,7 @@ def preprocess_image(image_bytes):
     face_img = cv2.resize(face_img, (64, 64))
     face_img = face_img.astype(np.float32)
     face_img = face_img[np.newaxis, np.newaxis, :, :]  # shape: (1, 1, 64, 64)
-    return face_img
+    return face_img, faces[0]
 
 def softmax(x):
     e_x = np.exp(x - np.max(x, axis=1, keepdims=True))
@@ -59,21 +59,17 @@ def detect_emotion():
         with open("static/debug_frame.jpg", "wb") as f:
             f.write(img_data)
 
-        input_img = preprocess_image(img_data)
+        input_img,face_data = preprocess_image(img_data)
         if input_img is None:
             return jsonify({'error': 'Invalid image'}), 400
         debug_img = np.squeeze(input_img) * 255  # (64, 64) grayscale image
         debug_img = debug_img.astype(np.uint8)
         cv2.imwrite("static/debug_preprocessed.jpg", debug_img)
         inputs = {session.get_inputs()[0].name: input_img}
         raw_output = session.run(None, inputs)[0]
-        print(raw_output)
         probs = softmax(raw_output)
         top_idx = np.argmax(probs)
-        print(f"here is top_idx: {top_idx}")
-        print(emotion_table)
-        print(probs)
-        return jsonify({'emotion': emotion_table[top_idx],'confidence': float(probs[0][top_idx]),'raw_probabilities': probs[0].tolist()})
+        return jsonify({'face_data': face_data.tolist(), 'emotion': emotion_table[top_idx],'confidence': float(probs[0][top_idx]),'raw_probabilities': probs[0].tolist()})
 
     except Exception as e:
         print("Error:", e)

static/script.js

@@ -32,16 +32,45 @@ setInterval(() => {
   })
   .then(data => {
     overlay.textContent = data.emotion.charAt(0).toUpperCase() + data.emotion.slice(1);
+    const faceData = data.face_data;
 
-    // restart the pop animation
-    overlay.classList.remove('pop');
-    void overlay.offsetWidth;   // force reflow
-    overlay.classList.add('pop');
+    const container = document.querySelector(".video-wrapper");
+
+    const oldBoxes = container.querySelectorAll(".bounding-box");
+    oldBoxes.forEach(box => box.remove());
+
+
+    if (faceData && faceData.length > 0){
+      const x = faceData[0];
+      const y = faceData[1];
+      const w = faceData[2];
+      const h = faceData[3];
+
+      overlay.style.left = x + 'px';
+      overlay.style.top = y + 'px';
+      overlay.style.display = 'block';
+
+      const box = document.createElement("div");
+      box.className = "bounding-box"; 
+    
+      box.style.left   = x + 'px';   
+      box.style.top    = y + 'px'; 
+      box.style.width  = w + 'px';   
+      box.style.height = h + 'px';
+      // Add the new box div inside the container
+      container.appendChild(box);
+      // restart the pop animation
+      overlay.classList.remove('pop');
+      void overlay.offsetWidth;   // force reflow
+      overlay.classList.add('pop');
+    } else {
+      overlay.style.display = 'none';
+    }
 
   })
   .catch(err => {
     analyzing = false;
     overlay.textContent = 'Error';
     console.error('Detection error:', err);
   });
-}, 1000);
+}, 100);

static/styles.css

@@ -31,14 +31,23 @@ header p {
 
 .overlay {
   position: absolute;
-  bottom: 10px;
-  left: 50%;
-  transform: translateX(-50%);
+  transform: translateY(-100%);
+  margin-bottom: 5px; 
   background: rgba(0,0,0,0.7);
   padding: 0.5rem 1rem;
   border-radius: 6px;
   font-size: 1.2rem;
   color: #00bcd4;
+  z-index: 10;
+  display: none;
+}
+
+.bounding-box {
+  position: absolute;
+
+  border: 2px solid #00FF00; 
+  
+  box-sizing: border-box; 
 }
 
 /* Mobile */