Loading the Models - Error

[guilhermefurtado23]

I have been using the cordova face-api project together, when I'm loading the MODELS, I come across the following errors:

CODE - 1: net.load(await faceapi.fetchNetWeights('file:///android_asset/www/js/modelos/ssd_mobilenetv1_model-weights_manifest.json'))

ERROR - 1 Fetch API cannot load file:///android_asset/www/js/models/ssd_mobilenetv1_model-weights_manifest.json. URL scheme "file" is not supported.

i try

CODE - 2: await faceapi.nets.ssdMobilenetv1.loadFromDisk('file:///android_asset/www/js/modelos/ssd_mobilenetv1_model-weights_manifest.json');

ERROR - 2; Error: readFile - filesystem not available for browser environment

i try

CODE - 3: const res = await axios.get('file:///android_asset/www/js/modelos/ssd_mobilenetv1_model-weights_manifest.json', { responseType: 'arraybuffer' });
const weights = new Float32Array(res.data); net.load(weights);

ERROR - 3; Error: Based on the provided shape, [1,1,64,128], and dtype float32, the tensor should have 8192 values but has 2381 at assert (face-api.js:23)

[justadudewhohacks]

Hey not really familar with cordova, but I am assuming there is no difference in the webview and a browser in the following I am going to state:

ERROR - 1 Fetch API cannot load file:///android_asset/www/js/models/ssd_mobilenetv1_model-weights_manifest.json. URL scheme "file" is not supported.

A client application in a browser can not access your file system, thus using the fetch API with local files doesn't work. The same goes for XHR/axios (CODE 3).

ERROR - 2; Error: readFile - filesystem not available for browser environment

Using loadFromDisk only works in a nodejs environment and not in the browser.

To conclude:

If you want to load the model from disk, checkout how to read files from the webview with cordova and monkeyPatch readFile as I pointed out here.

[guilhermefurtado23]

Good afternoon,

I'm trying to use the "faceapi.env.monkeyPatch" but gave me the error below could tell me what I'm doing wrong. so I understand you're not loading the local files

code

faceapi.env.monkeyPatch({ createCanvasElement: () => document.getElementById('myCanvas'), createImageElement: () => document.getElementById('imageBase2'), readFile: () => fs.readFile('./home/guilherme/Documentos/modelos/') })

const input = document.getElementById('imageBase2');

    let fullFaceDescriptions = await faceapi.detectAllFaces(input).withFaceLandmarks().withFaceDescriptors();

Error:

Error: SsdMobilenetv1 - load model before inference at SsdMobilenetv1.forwardInput (face-api.js:4308)

[justadudewhohacks]

You probably forgot to load the model await faceapi.nets.ssdMobilenetv1.loadFromDisk(filePath). Also you probably want to monkey patch it like this readFile: (filePath) => fs.readFile(filePath)

[luisdemarchi]

@guilhermefurtado23 did you solve it? If so, can you share the solution?

[dymdev]

Anyone achieved to get it working on cordova or ionic? I have tried httpd plugin on ionic to start a server inside the device an serve files but getting also getting "not allowed by Access-Control-Allow-Origin". This api is great and It will be cool to load the models from local file system.

[paaber]

Anyone achieved to get it working on cordova or ionic? I have tried httpd plugin on ionic to start a server inside the device an serve files but getting also getting "not allowed by Access-Control-Allow-Origin". This api is great and It will be cool to load the models from local file system.

I DID THESAME AND I AM GETTING THIS ERROR

[paaber]

IN MY OWN CASE I AM USING THE BROWSER AND AFTER THE INITIAL ERROR I HAD TO MOVE THE MODELS TO A SERVER SO I COULD LOAD THEM FROM THERE ONLY TO GET ANOTHER ERROR

Access to fetch at 'http:BTLINK/models/tiny_face_detector_model-weights_manifest.json' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

[dymdev]

Hi paaber, if you can use an externar server you could try to create a .htacces file with this content:

Header set Access-Control-Allow-Origin "*" Header set Access-Control-Allow-Methods "GET,PUT,POST,DELETE" Header set Access-Control-Allow-Headers "Content-Type, Authorization"

Next, upload the file to the same folder you are trying to download the models . I made it with the more basic ionos.com hosting and it works.

I hope this helps you.

[paaber]

thank you for the reply, i just did as you've instructed but i still get the same error message i will keep on trying hopefully i get it working soon

On Tue, 11 Jun 2019 at 11:47, dymdev notifications@github.com wrote:

Hi paaber, if you can use an externar server you could try to create a .htacces file with this content:

Header set Access-Control-Allow-Origin "*" Header set Access-Control-Allow-Methods "GET,PUT,POST,DELETE" Header set Access-Control-Allow-Headers "Content-Type, Authorization"

Next, upload the file to the same folder you are trying to download the models . I made it with the more basic ionos.com hosting and it works.

I hope this helps you.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/justadudewhohacks/face-api.js/issues/212?email_source=notifications&email_token=AMEGI5VFQK53PUVPVM673L3PZ57DFA5CNFSM4GWEVDCKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODXMW3UI#issuecomment-500788689, or mute the thread https://github.com/notifications/unsubscribe-auth/AMEGI5VVDJ42GPMHWUDPMF3PZ57DFANCNFSM4GWEVDCA .

[luisdemarchi]

Hi @dymdev, @guilhermefurtado23, @justadudewhohacks

After many hours, get to run in Cordova with Android, it is worth remembering that I have no problems in the iOS, Electron and Browser.

I posted the solution in https://stackoverflow.com/questions/56544635/using-face-api-js-in-cordova-with-android/56544636#56544636

[paaber]

hi dymdev so I finally got it to work after following your fix all I had to do was to change the http in the URL to https and my models are loading thanks

[rajkishoreandia]

async detectFace(){ console.log('in 1'); const imageUpload = document.getElementById('imageUpload') as HTMLImageElement; faceapi.env.monkeyPatch({ readFile: () => fs.readFile(MODEL_URL) }) Promise.all([ await faceapi.loadFaceRecognitionModel(MODEL_URL), await faceapi.loadFaceLandmarkModel(MODEL_URL), await faceapi.loadSsdMobilenetv1Model(MODEL_URL) ]).then(start) async function start() {} can somebody help me how to write this.i am using it ionic 3. @justadudewhohacks

[HellsingMatt]

Hi @dymdev, @guilhermefurtado23, @justadudewhohacks

After many hours, get to run in Cordova with Android, it is worth remembering that I have no problems in the iOS, Electron and Browser.

I posted the solution in https://stackoverflow.com/questions/56544635/using-face-api-js-in-cordova-with-android/56544636#56544636

monkeypatched readFile with framework's own api, nothing resolved eventually, nothing happend, but can confirm the file has been readed

` const MODEL_URL = './models'

    faceapi.env.monkeyPatch({
        readFile: filePath =>
            new Promise(resolve => {
                plus.io.resolveLocalFileSystemURL(
                    filePath,
                    function(fileEntry) {
                        fileEntry.file(
                            function(file) {
                                var reader = new plus.io.FileReader();

                                let fileExtension = filePath
                                    .split("?")[0]
                                    .split(".")
                                    .pop();
                                if (fileExtension === "json") {
                                    reader.onloadend = function(e) {
                                        console.log('reader --- onloadend: ', e)
                                        resolve(e.target.result);
                                    };
                                    reader.readAsText(file);
                                } else {
                                    reader.onloadend = function(e) {
                                        console.log('reader --- onloadend: ', e)
                                        resolve(new Uint8Array(e.target.result));
                                    };

                                    reader.readAsArrayBuffer(file);
                                }
                            },
                            function() {
                                resolve(false);
                            }
                        );
                    },
                    function() {
                        resolve(false);
                    }
                );
            }),
        Canvas: HTMLCanvasElement,
        Image: HTMLImageElement,
        ImageData: ImageData,
        Video: HTMLVideoElement,
        createCanvasElement: () => document.createElement("canvas"),
        createImageElement: () => document.createElement("img")
    });

    await faceapi.nets.ssdMobilenetv1.loadFromDisk(MODEL_URL)
    await faceapi.nets.faceLandmark68Net.loadFromDisk(MODEL_URL)
    await faceapi.nets.faceRecognitionNet.loadFromDisk(MODEL_URL)

`

[u-wlkjyy]

Hi @dymdev, @guilhermefurtado23, @justadudewhohacks After many hours, get to run in Cordova with Android, it is worth remembering that I have no problems in the iOS, Electron and Browser. I posted the solution in https://stackoverflow.com/questions/56544635/using-face-api-js-in-cordova-with-android/56544636#56544636

monkeypatched readFile with framework's own api, nothing resolved eventually, nothing happend, but can confirm the file has been readed

` const MODEL_URL = './models'

    faceapi.env.monkeyPatch({
        readFile: filePath =>
            new Promise(resolve => {
                plus.io.resolveLocalFileSystemURL(
                    filePath,
                    function(fileEntry) {
                        fileEntry.file(
                            function(file) {
                                var reader = new plus.io.FileReader();

                                let fileExtension = filePath
                                    .split("?")[0]
                                    .split(".")
                                    .pop();
                                if (fileExtension === "json") {
                                    reader.onloadend = function(e) {
                                        console.log('reader --- onloadend: ', e)
                                        resolve(e.target.result);
                                    };
                                    reader.readAsText(file);
                                } else {
                                    reader.onloadend = function(e) {
                                        console.log('reader --- onloadend: ', e)
                                        resolve(new Uint8Array(e.target.result));
                                    };

                                    reader.readAsArrayBuffer(file);
                                }
                            },
                            function() {
                                resolve(false);
                            }
                        );
                    },
                    function() {
                        resolve(false);
                    }
                );
            }),
        Canvas: HTMLCanvasElement,
        Image: HTMLImageElement,
        ImageData: ImageData,
        Video: HTMLVideoElement,
        createCanvasElement: () => document.createElement("canvas"),
        createImageElement: () => document.createElement("img")
    });

    await faceapi.nets.ssdMobilenetv1.loadFromDisk(MODEL_URL)
    await faceapi.nets.faceLandmark68Net.loadFromDisk(MODEL_URL)
    await faceapi.nets.faceRecognitionNet.loadFromDisk(MODEL_URL)

`

thank you tell me can be use monkeyPatch rewrite readLine function, you can try it

faceapi.env.monkeyPatch({
                    readFile: filePath =>
                        new Promise(resolve => {
                            plus.io.resolveLocalFileSystemURL(
                                filePath,
                                function(fileEntry) {
                                    fileEntry.file(
                                        function(file) {
                                            var reader = new plus.io.FileReader();

                                            let fileExtension = filePath
                                                .split("?")[0]
                                                .split(".")
                                                .pop();
                                            if (fileExtension === "json") {
                                                reader.onloadend = function(e) {
                                                    console.log('reader --- onloadend: ', e)
                                                    resolve(e.target.result);
                                                };
                                                reader.readAsText(file);
                                            } else {
                                                reader.onloadend = function(e) {
                                                    var u8arr = (function(path, name) {
                                                        var arr = path.split(','),
                                                            mime = arr[0].match(/:(.*?);/)[
                                                                1],
                                                            bstr = atob(arr[1]),
                                                            n = bstr.length,
                                                            u8arr = new Uint8Array(n);
                                                        while (n--) {
                                                            u8arr[n] = bstr.charCodeAt(n);
                                                        }
                                                        // 这里就是ArrayBuffer数据  
                                                        return u8arr;
                                                    })(e.target.result, fileEntry.name);
                                                    resolve(u8arr);
                                                };
                                                reader.readAsDataURL(file);
                                            }
                                        },
                                        function() {
                                            resolve(false);
                                        }
                                    );
                                },
                                function() {
                                    resolve(false);
                                }
                            );
                        }),

                    Canvas: HTMLCanvasElement,
                    Image: HTMLImageElement,
                    ImageData: ImageData,
                    Video: HTMLVideoElement,
                    createCanvasElement: () => document.createElement("canvas"),
                    createImageElement: () => document.createElement("img")

                });