[Bug] show user feedback when no face is detected instead of silent no-op

[OmanshiRaj]

Type of Change

• Bug fix / UX improvement

---

Problem

In MoodDetector.jsx, when the face detector finds no face in the webcam
frame, the app does nothing visible:

if (!detections || detections.length === 0) {
  console.log('No face detected');  // only logged to console
  return;                           // silent return — user sees nothing
}

From the user's perspective, they clicked "Detect face", nothing happened,
and they have no idea why. They are left wondering if the button worked,
if they need to reposition themselves, or if the app is broken.

---

Fix

Add a detectionMessage state to MoodDetector and render it below the
button. It covers both the "no face" case and clears itself when a
successful detection runs.

import React, { useEffect, useRef, useState } from 'react';
import * as faceapi from 'face-api.js';
import songApi from '../api/api';

const MoodDetector = ({ setSongs }) => {
  const videoRef = useRef(null);
  const [detectionMessage, setDetectionMessage] = useState('');

  const loadModels = async () => {
    const MODEL_URL = '/models';
    await faceapi.nets.tinyFaceDetector.loadFromUri(MODEL_URL);
    await faceapi.nets.faceLandmark68Net.loadFromUri(MODEL_URL);
    await faceapi.nets.faceExpressionNet.loadFromUri(MODEL_URL);
    console.log('Face-API models loaded');
  };

  const startVideo = async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
      videoRef.current.srcObject = stream;
    } catch (err) {
      console.error('Camera access denied', err);
    }
  };

  async function detectMood() {
    const detections = await faceapi
      .detectAllFaces(videoRef.current, new faceapi.TinyFaceDetectorOptions())
      .withFaceLandmarks()
      .withFaceExpressions();

    // ✅ show message instead of silent return
    if (!detections || detections.length === 0) {
      setDetectionMessage('No face detected. Please face the camera clearly.');
      return;
    }

    // ✅ clear message on successful detection
    setDetectionMessage('');

    const expressions = detections[0].expressions;
    const dominantMood = Object.keys(expressions).reduce((a, b) =>
      expressions[a] > expressions[b] ? a : b,
    );

    songApi.get(`/?mood=${dominantMood}`).then((response) => {
      setSongs(response.data.songs);
    });
  }

  useEffect(() => {
    loadModels().then(startVideo);
  }, []);

  return (
    <div className="flex justify-center flex-col gap-5 p-5 items-center">
      <video
        ref={videoRef}
        autoPlay
        muted
        className="w-80 shadow-md rounded-md object-cover aspect-video"
      />
      <button
        onClick={detectMood}
        className="shadow-md rounded-sm p-2 bg-amber-200 w-32 cursor-pointer"
      >
        Detect face
      </button>

      {/* ✅ user-facing feedback message */}
      {detectionMessage && (
        <p className="text-red-400 text-sm text-center">{detectionMessage}</p>
      )}
    </div>
  );
};

export default MoodDetector;

File changed: frontend/src/components/MoodDetector.jsx

---

Behaviour After Fix

Scenario	Before	After
No face in frame	Silent — nothing happens	"No face detected. Please face the camera clearly."
Face detected successfully	Songs load (message was already absent)	Message clears, songs load
Detection run multiple times	Console logs pile up	Message updates correctly each time

---

How to Test

1. Cover the webcam or step out of frame, click "Detect face"
   — confirm the message appears below the button
2. Position face correctly and click again
   — confirm the message disappears and songs load
3. Cover webcam again and click — message reappears correctly

---

Checklist

• User gets visible feedback on failed detection
• Message clears automatically on next successful detection
• Only one new state variable added — minimal footprint
• No new dependencies
• console.log('No face detected') replaced by proper UI feedback

PLEASE ASSIGN THE ISSUE TO ME UNDER SSoC'26