WebGazer Stuck on 'Initialising...' on Pavlovia after 403 Error Fix (Local Models)

Online experiments
1

Hello everyone, I hope you can help me with this:

OS: Win10
PsychoPy version: PsychoPy v2024.2.4
What are you trying to achieve?: Run an experiment using webcam eye-tracking with WebGazer.js.

Problem: My experiment, which uses WebGazer.js controlled via custom Code Components, was previously running fine online on Pavlovia. Recently, it started failing during startup with the following errors:

  • Error: Request to https://tfhub.dev/tensorflow/tfjs-model/blazeface/... failed with status code 403.

  • Error: Request to https://tfhub.dev/mediapipe/tfjs-model/facemesh/... failed with status code 403.

Attempted Solution (Local Models):

Based on common advice for this 403 error, I took the following steps:

  1. Downloaded Models: Obtained the blazeface and facemesh TensorFlow.js models (specifically the model.json and group1-shard1of1.bin files for each) from Kaggle.

  2. Organized Files: Created a models/ folder in my project root, with subfolders blazeface/ and facemesh/. Placed the respective model files inside these subfolders.

    MyProject/
├── Exp_E_complete.psyexp
├── models/
│   ├── blazeface/
│   │   ├── model.json
│   │   └── group1-shard1of1.bin
│   └── facemesh/
│       ├── model.json
│       └── group1-shard1of1.bin
└── (other experiment files...)

  3. Modified Code: Added code to the Before Experiment tab of my initial WebGazer Code Component (Initialize_ET) to set the modelUrl parameters before WebGazer initializes:

    JavaScript

    // Code in 'Before Experiment' tab of Initialize_ET
console.log("Configuring WebGazer BEFORE experiment...");
if (window.webgazer && window.webgazer.params) {
    if (!window.webgazer.params.blazeFace) { window.webgazer.params.blazeFace = {}; }
    window.webgazer.params.blazeFace.modelUrl = 'models/blazeface/model.json';
    console.log("blazeFace modelUrl set to: ", window.webgazer.params.blazeFace.modelUrl);

    if (!window.webgazer.params.faceMesh) { window.webgazer.params.faceMesh = {}; }
    window.webgazer.params.faceMesh.modelUrl = 'models/facemesh/model.json';
    console.log("faceMesh modelUrl set to: ", window.webgazer.params.faceMesh.modelUrl);

    window.webgazer.setGazeListener(function(data, clock) { /* ... listener code ... */ });
    console.log("GazeListener set in Before Experiment.");

    // Initialize gaze arrays etc.
    window.xGazes = new Array(10).fill(0);
    window.yGazes = new Array(10).fill(0);
    // ... other initializations ...

} else {
    console.error("WebGazer params not found in Before Experiment.");
}
// NO window.webgazer.begin() call here

  4. Verified Code in Begin Routine: Ensured the Begin Routine tab of the same code component (Initialize_ET) calls window.webgazer.begin(); and sets visual parameters (showVideoPreview, etc.), but does not set the modelUrls again.

  5. Synced: Synchronized the project with Pavlovia.

  6. Checked GitLab: Confirmed via the GitLab interface on Pavlovia that:

    • The models/ folder and all 4 model files exist in the repository.

    • The compiled .js file contains the new code setting the local modelUrl paths.

  7. Checked Pavlovia Status: Confirmed the experiment status on the Pavlovia dashboard is set to “Piloting”.

  8. Cleared Cache: Thoroughly cleared browser cache (Ctrl+Shift+R, full cache deletion) and tested in Incognito mode.

Current State: The good news is the 403 Forbidden errors no longer appear. However, the experiment now gets permanently stuck on the “initialising…” screen.

Question: hy would the experiment get stuck on “initialising…” after successfully redirecting WebGazer to use local models? Given that the 403 errors are gone, the files and code seem correct on the server, the project is Piloting, and browser cache is cleared, what could be preventing WebGazer from finishing its initialization process? Is there a known timing issue or conflict when loading models locally this way?

2

I can’t comment on WdbGazer. However,