Fix/tensorflow face detection null error

[Ruthwik000]

Overview

This PR fixes a critical bug where the calibration page crashes due to a null reference error when attempting to perform face detection. The issue occurred when users navigated directly to the calibration page without going through the camera configuration flow.

Problem Statement

The DoubleCalibrationRecord.vue component was missing TensorFlow.js model initialization logic, causing it to fail when the model wasn't pre-loaded by the CameraConfiguration.vue component. This blocked the entire calibration workflow, especially for RuxaiLab integration users.

Error:

TypeError: Cannot read properties of null (reading 'estimateFaces')

Solution

Changes Made

1. Added TensorFlow.js Imports

const faceLandmarksDetection = require("@tensorflow-models/face-landmarks-detection");
require("@tensorflow/tfjs-backend-wasm");

2. Implemented Model Loading in created() Lifecycle

• Added automatic model loading when the component is created
• Checks if model is already loaded in Vuex store to avoid redundant loading
• Properly commits the loaded model to the store
• Includes error handling with user-friendly alerts

if (!this.$store.state.detect.model) {
  const model = await faceLandmarksDetection.load(
    faceLandmarksDetection.SupportedPackages.mediapipeFacemesh,
    { maxFaces: 1 }
  );
  this.$store.commit("setModel", model);
  this.$store.commit("setLoaded", model != null);
}

3. Enhanced detectFace() Method with Retry Logic

• Added maximum retry count (50 retries = 5 seconds) to prevent infinite recursion
• Implemented proper null checks for both video and model
• Added detailed console logging for debugging
• Throws meaningful errors after max retries

async detectFace(retryCount = 0) {
  const maxRetries = 50;
  
  // Check video readiness
  if (!video || video.videoWidth === 0 || video.videoHeight === 0) {
    if (retryCount < maxRetries) {
      await new Promise(resolve => setTimeout(resolve, 100));
      return this.detectFace(retryCount + 1);
    }
    throw new Error('Video not ready');
  }
  
  // Check model availability
  if (!this.model) {
    if (retryCount < maxRetries) {
      await new Promise(resolve => setTimeout(resolve, 100));
      return this.detectFace(retryCount + 1);
    }
    throw new Error('TensorFlow model not loaded');
  }
  
  return await this.model.estimateFaces({ input: video });
}

4. Added Vue Reactivity Fix

• Used $nextTick() to ensure Vue updates computed properties before proceeding
• Ensures the model is accessible via the computed property immediately after loading

Files Changed

• src/views/DoubleCalibrationRecord.vue (+50 lines, -5 lines)
  • Added TensorFlow.js imports
  • Enhanced created() lifecycle with model loading
  • Improved detectFace() method with retry logic

Related Issues

Fixes #122 - TensorFlow.js Face Detection Null Reference Error

Screenshots

Before Fix

*Console showing null reference error*

After Fix

*Calibration page loading successfully with model*

---

Type: Bug Fix
Priority: High
Component: Frontend - Calibration
Estimated Review Time: 15-20 minutes

[Ruthwik000]

@marcgc21 @KarinePistili @jvJUCA kindly review the pr ,let me know if any suggestions
Thankyou