0

estoy intentando hacer uso de la librería de face-api.js, y como soy algo nuevo en laravel estoy un poco perdido, siguiendo la documentación en el repositorio de github ejecute el siguiente comando en mi proyecto:

npm i face-api.js

Y hasta el momento parecia estar normal, el problema vino cuando intenté iniciar el proyecto, algo como un init que me generará los archivos necesarios, pero para ser sincero, no entendí como iniciarlo, intente importar la librería desde un componente de vue.js, con la siguiente linea:

import faceapi from 'face-api.js';

No funcionó, al momento de compilar me lanzo el siguiente error:

WARNING in ./resources/js/components/CameraComponent.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5[0].rules[0].use[0]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/components/CameraComponent.vue?vue&type=script&lang=js&) 31:23-62 export 'default' (imported as 'faceapi') was not found in 'face-api.js' (possible exports: AgeGenderNet, BoundingBox, Box, ComposableTask, ComputeAllFaceDescriptorsTask, ComputeFaceDescriptorsTaskBase, ComputeSingleFaceDescriptorTask, DetectAllFaceLandmarksTask, DetectAllFacesTask, DetectFaceLandmarksTaskBase, DetectFacesTaskBase, DetectSingleFaceLandmarksTask, DetectSingleFaceTask, Dimensions, FACE_EXPRESSION_LABELS, FaceDetection, FaceDetectionNet, FaceExpressionNet, FaceExpressions, FaceLandmark68Net, FaceLandmark68TinyNet, FaceLandmarkNet, FaceLandmarks, FaceLandmarks5, FaceLandmarks68, FaceMatch, FaceMatcher, FaceRecognitionNet, Gender, LabeledBox, LabeledFaceDescriptors, Mtcnn, MtcnnOptions, NetInput, NeuralNetwork, ObjectDetection, Point, PredictedBox, Rect, SsdMobilenetv1, SsdMobilenetv1Options, TinyFaceDetector, TinyFaceDetectorOptions, TinyYolov2, TinyYolov2Options, TinyYolov2SizeType, allFaces, allFacesMtcnn, allFacesSsdMobilenetv1, allFacesTinyYolov2, awaitMediaLoaded, bufferToImage, computeFaceDescriptor, createCanvas, createCanvasFromMedia, createFaceDetectionNet, createFaceRecognitionNet, createMtcnn, createSsdMobilenetv1, createTinyFaceDetector, createTinyYolov2, detectAllFaces, detectFaceLandmarks, detectFaceLandmarksTiny, detectLandmarks, detectSingleFace, draw, env, euclideanDistance, extendWithAge, extendWithFaceDescriptor, extendWithFaceDetection, extendWithFaceExpressions, extendWithFaceLandmarks, extendWithGender, extractFaceTensors, extractFaces, fetchImage, fetchJson, fetchNetWeights, fetchOrThrow, getContext2dOrThrow, getMediaDimensions, imageTensorToCanvas, imageToSquare, inverseSigmoid, iou, isMediaElement, isMediaLoaded, isWithAge, isWithFaceDetection, isWithFaceExpressions, isWithFaceLandmarks, isWithGender, loadAgeGenderModel, loadFaceDetectionModel, loadFaceExpressionModel, loadFaceLandmarkModel, loadFaceLandmarkTinyModel, loadFaceRecognitionModel, loadMtcnnModel, loadSsdMobilenetv1Model, loadTinyFaceDetectorModel, loadTinyYolov2Model, loadWeightMap, locateFaces, matchDimensions, minBbox, mtcnn, nets, nonMaxSuppression, normalize, padToSquare, predictAgeAndGender, recognizeFaceExpressions, resizeResults, resolveInput, shuffleArray, sigmoid, ssdMobilenetv1, tf, tinyFaceDetector, tinyYolov2, toNetInput, utils, validateConfig)

Entendí que la liberia no existe, y no se como iniciarlo, una ayudita por favor.

3
  • Hola @porloscerrosΨ hice lo que me dijiste, y me arrojó el siguiente error WARNING in ./node_modules/face-api.js/build/es6/env/createFileSystem.js 5:17-30 Module not found: Error: Can't resolve 'fs' in 'C:\Users\elias\Documents\PC_IV\Programacion_Computacional_IV\proyecto_final\node_modules\face-api.js\build\es6\env' Commented el 15 abr. 2022 a las 22:52
  • Gracias por tu ayuda @porloscerrosΨ, ya me funciono Commented el 15 abr. 2022 a las 23:37
  • Sí, lo hare, pero en un momento Commented el 16 abr. 2022 a las 0:12

1 respuesta 1

1

Solución:

Primero que nada cambie import faceapi from 'face-api.js'; por import * as faceapi from 'face-api.js'; como me sugirió @porloscerrosΨ.

Aclaro que utilizo vue, e hice el import dentro de un componente en el script, algo así:

<template>
</template>
<script>
    import * as faceapi from 'face-api.js';
    export default {
        
    }
</script>

Esto debido a que una vez trabajé con vue-select y los estilos solo me funcionaron importando la librería dentro del complemento, y quería evitar problemas, pero no estoy seguro si se puede utilizar dentro de resources/js/app.js un window.faceapi = require('face-api.js');. Luego de hacer eso cada vez que compilaba me daba el siguiente error:

WARNING in ./node_modules/face-api.js/build/es6/env/createFileSystem.js 5:17-30 Module not found: Error: Can't resolve 'fs' in 'C:\Users\elias\Documents\PC_IV\Programacion_Computacional_IV\proyecto_final\node_modules\face-api.js\build\es6\env'

Para solucionarlo agregué la siguiente línea dentro de el archivo webpack.mix.js

mix.webpackConfig({ resolve: { fallback: { fs: false } }});

Ahora el problema eran los módulos, pero eso es sencillo, dentro de la carpeta storage/app/public agrego una carpeta modules donde agrego todos los módulos, dentro de la carpeta config/ se encuentra filesystems.php, asegurarse de que exista las siguientes líneas de código:

'links' => [
    public_path('storage') => storage_path('app/public'),
],

Y si no existe ejecutar el siguiente comando dentro de consola (Yo uso windows, no estoy seguro si el comando puede cambiar según el SO):

>php artisan serve

Y al referenciar los modulos mediante loadFromUri se debe hacer así ('storage/modules').

Dejaré todo el código del componente por si les interesa:

CameraComponent.vue

<template>
    <div id="camera" class="border border-dark rounded-lg bg-slate-300 h-64 w-64 flex justify-center items-center">
        <video id="video" width="400" height="300" autoplay muted ref="video"></video>
    </div>
</template>

<script>
    import * as faceapi from 'face-api.js';
    export default {
        data() {
            return {
            }
        },
        methods: {
            startVideo() {
                const video = this.$refs.video;
                console.log(video, this.$refs.video);
                navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
                console.log(navigator.getUserMedia);
                if (navigator.getUserMedia) {
                    navigator.mediaDevices.getUserMedia({
                        video: true
                    }).then(
                        stream => (video.srcObject = stream),
                        err => console.log(err)
                    );
                }
                video.addEventListener('play', function () {
                    const canvas = faceapi.createCanvasFromMedia(video);
                    document.body.append(canvas);
                    const displaySize = {
                        width: video.width,
                        height: video.height
                    };
                    faceapi.matchDimensions(canvas, displaySize);
                    setInterval(async () => {
                        const detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceExpressions();
                        console.log(detections);
                        const resizedDetections = faceapi.resizeResults(detections, displaySize);
                        canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
                        faceapi.draw.drawDetections(canvas, resizedDetections);
                        faceapi.draw.drawFaceExpressions(canvas, resizedDetections);
                        faceapi.draw.drawFaceLandmarks(canvas, resizedDetections);
                    }, 100);
                });
            },
            loadModels() {
                Promise.all([
                    faceapi.nets.tinyFaceDetector.loadFromUri('/storage/models'),
                    faceapi.nets.faceLandmark68Net.loadFromUri('/storage/models'),
                    faceapi.nets.faceRecognitionNet.loadFromUri('/storage/models'),
                    faceapi.nets.faceExpressionNet.loadFromUri('/storage/models'),
                    faceapi.nets.ageGenderNet.loadFromUri('/storage/models'),
                ]).then(this.startVideo).catch(err => console.log(err));
            }
        },
        mounted() {
            this.loadModels();
        }
    }
</script>

app.js

require('./bootstrap');

window.Vue = require('vue').default;

Vue.component('camera-component', require('./components/CameraComponent.vue').default);

const app = new Vue({
    el: '#app',
    data: {
        
    },
});

welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel - Face-Api</title>
        <link rel="stylesheet" href="{{asset('css/app.css')}}">
    </head>
    <body class="antialiased dark">
        <div id="app">
            <div class="bg-red-400 dark:bg-orange-400 w-full text-center text-white p-4 flex flex-wrap space-x-4">
                <h1 class="text-5xl">App Emotiva</h1>
                @include('partials.nav')
            </div>

            <camera-component></camera-component>
        </div>

        <script src="{{asset('js/app.js')}}"></script>
    </body>
</html>

Modulos

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.