Unable to loading face-api.js models in Nextjs

Question

I was trying to load the face-api.js models in an Nextjs app but keep getting the error

Unhandled Runtime Error Error: Failed to parse URL from /model/ssd_mobilenetv1_model-weights_manifest.json

This is weird cause it happends on Nextjs only while i dont have any problems on a normal nodejs app.

code:

import * as faceapi from 'face-api.js';
import fs from 'fs';

export async function loadingModels() {
    const exists = fs.existsSync('public/model/tiny_face_detector_model-weights_manifest.json');
    console.log(exists)
    await faceapi.nets.ssdMobilenetv1.load('/model')
}

I thought that its because i placed my models in the wrong place but i checked and it is there. It just wont load :((

Answer 1

1. Make sure you have the public folder at the root of your Next.js project and that the models are located within the public/model directory.
2. You can access the path in code as below,

--

  export async function loadingModels() { 

      const modelPath = process.env.NEXT_PUBLIC_BASE_PATH || '';
    
      const modelUrl = `${modelPath}/model`;
    
      // Load the models
      await faceapi.nets.ssdMobilenetv1.loadFromUri(modelUrl);
    }

In .env file, add below line.

NEXT_PUBLIC_BASE_PATH = http://localhost:3000/ 

Updated:

Try to import the file .

Reference https://stackoverflow.com/questions/76145893/how-do-i-pull-my-data-from-my-json-file-in-the-public-folder-in-nextjs-13-3