es.html

<html lang="es">

<head>
    <meta charset="utf-8">
    <title>WearMask: Detección de mascarilla facial | AI en tiempo real en el navegador</title>
    <meta name="description" content="Un detector de máscaras en tiempo real gratuito. ¡Solo una tableta, puede obtener una IA de detección de máscara! Diseñado para pequeñas empresas y lugares públicos, abordemos el COVID-19 juntos." />

    <!-- Global site tag (gtag.js) - Google Analytics -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=G-ZJ6JEE5PWX"></script>
        <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'G-ZJ6JEE5PWX');
        </script>
    <link rel="stylesheet" type="text/css" href="index.css?version=2.0.4">
    <style>
        a:link,a:visited{ 
            text-decoration:none;  
        } 
        a:hover{ 
            text-decoration:underline; 
        } 
        video {
            /* position: absolute;
            visibility: hidden; */
        }
        canvas {
            border: 1px solid lightgray;
        }
    </style>

</head>

<body>
    <div class="wrapper">
        <div class="logo-wrapper">
            <a href="https://facemask-detection.com/es.html" target="_parent" rel="noopener noreferrer">
              <img class="logo" src="gallary/logo.png">
            </a>
            <h3>WearMask: Detección de máscara facial</h3>
            <div class="tags">
                <a class="tag" href="https://facemask-detection.com/" title="English Version">English</a>
                <a class="tag" href="https://facemask-detection.com/es.html" title="Spanish Version">Español</a>
                <a class="tag" href="https://facemask-detection.com/cn.html" title="Chinese Version">中文</a>
            </div>
            <div class='remind_box'>
                <h1 id="remind">Cargando...</h1>
            </div>
        </div>

        <div class='video_box'>
            
            <canvas id="canvas" width="640"></canvas>
            <video autoplay muted playsinline id="video"></video>
        </div>


        <div class='box_bottom'>
            <div class='tips'>
                <p>
                    Consejos: Cúbrase <b>completamente</b> la nariz y la boca para prevenir el virus.
                </p>
            </div>

            <div class="feedback">
                <div class="tags">
                    <a class="tag" href="mailto:wearmask.feedback@gmail.com?subject=Feedback&body=If there is a screenshot of the wrong result, please put it here." title="Informe casos fallidos o hable con el desarrollador." >Feedback</a>
                </div>
            </div>
        </div>

        <br /><br /><br />

        <div class="intro">
            <details open>
                <summary>Introducción</summary>
                <h2>¿Cómo conseguir la mejor experiencia?</h2>
                <p>
                    1. Inicie la última versión del <a href="https://www.google.com/chrome/" target="_blank" rel="noopener noreferrer">navegador Chrome</a><br />
                    2. Ingresa <i>chrome://flags</i> en la barra de direcciones y ábrela<br />
                    3. Habilite todas las funciones de <i>WebAssembly</i><br />
                    4. Vuelva a iniciar Chrome, abra esta página web y permita el acceso a la cámara<br />

                    <br />El FPS depende de la CPU de su dispositivo. Solo Safari se puede usar en iOS y el FPS de detección puede ser menor.
                </p>
                <h2>Declaracion de privacidad</h2>
                <p>
                    No se preocupe. El programa de detección de mascarillas se ejecuta completamente en su navegador, 
                    y no se guardará ni se cargará ninguna información en el servidor. 
                    Incluso puede desconectar Internet después de que comience la detección.
                    <br />También puede ver la <a href="https://facemask-detection.com/statement_es.html" target="_parent" rel="noopener noreferrer">declaración de servicio</a>.
                </p>
                <h2>Resumen del proyecto</h2>
                <p>
                    Web-based efﬁcient AI recognition of masks (WearMask) es un proyecto de aprendizaje profundo. 
                    El modelo utilizado se modifica de 
                    <a href="https://github.com/dog-qiuqiu/Yolo-Fastest" target="_blank" rel="noopener noreferrer">Yolo-Fastest</a> 
                    y se entrena en base al marco de 
                    <a href="https://github.com/dog-qiuqiu/Yolo-Fastest" target="_blank" rel="noopener noreferrer">Pytorch</a>
                    . Se ejecuta en el navegador a través de 
                    <a href="https://github.com/Tencent/ncnn" target="_blank" rel="noopener noreferrer">NCNN</a> 
                    y 
                    <a href="https://webassembly.org/" target="_blank" rel="noopener noreferrer">WebAssembly</a>.
                </p>
                <p>
                    Todo el contenido ha sido de código abierto en mi 
                    <a href="https://github.com/waittim/mask-detector" target="_blank" rel="noopener noreferrer">Github</a>
                    . También puede visitar 
                    <a href="https://arxiv.org/abs/2101.00784" target="_blank" rel="noopener noreferrer">arXiv</a> 
                    y mi 
                    <a href="https://waittim.github.io/2020/11/27/mask-detection/" target="_blank" rel="noopener noreferrer">blog</a> 
                    para obtener más detalles. 
                    Si desea contribuir a este proyecto, envíe una captura de pantalla que contenga el resultado incorrecto a 
                    <a href="mailto:wearmask.feedback@gmail.com?subject=Incorrect case&body=Pon tu captura de pantalla aquí." title="" >este correo electrónico</a>,
                    ¡gracias!
                </p>

                <br /><br /><br /><br /><br />


                <div class='footer'>
                    <p>
                        <!-- <a href="https://www.linkedin.com/in/zekun-wang/" > <img src="gallary/linkedin-logo.png" alt="View Zekun Wang’s profile on LinkedIn"></a>
                        &nbsp;&nbsp;&nbsp; -->
                        <!-- <a href="https://github.com/waittim/mask-detector/" > <img src="gallary/github-logo.png"  alt="View Zekun Wang’s Github"></a>
                        &nbsp;&nbsp;&nbsp; -->
                        <a href="https://www.nsf.gov/" > <img src="gallary/nsf-logo.png"  alt="View National Science Foundation"></a>
                        &nbsp;&nbsp;&nbsp;
                        <a href="https://www.vanderbilt.edu/" > <img src="gallary/VU-logo.jpg" alt="View Vanderbilt University"></a>
                        
                        <br />
                        <br />
                        <a href="https://www.linkedin.com/in/zekun-wang/" target="_blank" rel="noopener noreferrer">Zekun Wang</a> | <a href="https://www.vanderbilt.edu/datascience/" target="_blank" rel="noopener noreferrer">Vanderbilt University</a>
                        <br />
                        <br />
                    </p>
                </div>
            </details>
        
        </div>

    </div>
    
    
    <script src="wasmFeatureDetect.js?version=2.0.3"></script>

    <script type='text/javascript'>
        var Module = {};

        var has_simd;
        var has_threads;

        var wasmModuleLoaded = false;
        var wasmModuleLoadedCallbacks = [];

        Module.onRuntimeInitialized = function() {
            wasmModuleLoaded = true;
            for (var i = 0; i < wasmModuleLoadedCallbacks.length; i++) {
                wasmModuleLoadedCallbacks[i]();
            }
        }

        wasmFeatureDetect.simd().then(simdSupported => {
            has_simd = simdSupported;

            wasmFeatureDetect.threads().then(threadsSupported => {
                has_threads = threadsSupported;

                if (has_simd & has_threads)
                {
                    yolo_module_name = 'yolo';
                    console.log('simd&threads enabled.');
                }
                else
                {
                    yolo_module_name = 'ios/yolo-ios';
                    console.log('cannot enable simd&threads.');
                }

                console.log('load ' + yolo_module_name);

                var yolowasm = yolo_module_name + '.wasm';
                var yolojs = yolo_module_name + '.js';

                fetch(yolowasm)
                    .then(response => response.arrayBuffer())
                    .then(buffer => {
                        Module.wasmBinary = buffer;
                        var script = document.createElement('script');
                        script.src = yolojs;
                        script.onload = function() {
                            console.log('Emscripten boilerplate loaded.');
                        }
                        document.body.appendChild(script);
                    });

            });
        });


        var dst = null;
        var resultarray = null;
        var resultbuffer = null;
        window.addEventListener('DOMContentLoaded', function() {
            var isStreaming = false;
            video = document.getElementById('video');
            canvas = document.getElementById('canvas');
            ctx = canvas.getContext('2d');
            w = 640;
            h = 480;
            var constraints = { audio: false, video: { width: w, height: h } };
            navigator.mediaDevices.getUserMedia(constraints)
                .then(function(mediaStream) {
                    var video = document.querySelector('video');
                    video.srcObject = mediaStream;
                    video.onloadedmetadata = function(e) {
                        video.play();
                    };
                })
                .catch(function(err) {
                    console.log(err.message);
                });
            // Wait until the video stream canvas play
            video.addEventListener('canplay', function(e) {
                if (!isStreaming) {
                    // videoWidth isn't always set correctly in all browsers
                    if (video.videoWidth > 0) h = video.videoHeight / (video.videoWidth / w);
                    canvas.setAttribute('width', w);
                    canvas.setAttribute('height', h);
                    isStreaming = true;
                }
            }, false);

            // Wait for the video to start to play
            video.addEventListener('play', function() {
                //Setup image memory
                var id = ctx.getImageData(0, 0, canvas.width, canvas.height);
                var d = id.data;

                if (wasmModuleLoaded) {
                    mallocAndCallSFilter();
                } else {
                    wasmModuleLoadedCallbacks.push(mallocAndCallSFilter);
                }

                function mallocAndCallSFilter() {
                    dst = _malloc(d.length);

                    // max 20 objects
                    resultarray = new Float32Array(6 * 20);
                    resultbuffer = _malloc(6 * 20 * Float32Array.BYTES_PER_ELEMENT);

                    HEAPF32.set(resultarray, resultbuffer / Float32Array.BYTES_PER_ELEMENT);

                    //console.log("What " + d.length);

                    sFilter();
                }
            });

        });

        var class_names = [
            "background",
            "No Mask", "Mask"
        ];

        var colors = [
            "rgb( 255, 69,   0)",
            "rgb( 32, 178, 170)"
        ];

        function ncnn_yolo() {
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');

            var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            var data = imageData.data;
            ctx.font = '12px sans-serif'

            HEAPU8.set(data, dst);

            _yolo_ncnn(dst, canvas.width, canvas.height, resultbuffer);

            // resultarray
            var qaqarray = HEAPF32.subarray(resultbuffer / Float32Array.BYTES_PER_ELEMENT, resultbuffer / Float32Array.BYTES_PER_ELEMENT + 6 * 20);

            var i;
            var remind_ctx = 'Bienvenido!'; 
            for (i = 0; i < 20; i++) {
                var label = qaqarray[i * 6 + 0];
                var prob = qaqarray[i * 6 + 1];
                var bbox_x = qaqarray[i * 6 + 2];
                var bbox_y = qaqarray[i * 6 + 3];
                var bbox_w = qaqarray[i * 6 + 4];
                var bbox_h = qaqarray[i * 6 + 5];

                if (label == -233)
                    continue;

                console.log('qaq ' + label + ' = ' + prob);

                //ctx.strokeStyle = colors[i % 19];
                if (label == 1) {
                    ctx.strokeStyle = colors[0];
                    ctx.fillStyle = colors[0];
                    remind_ctx = 'Por favor use una mascara!';
                }
                else {
                    ctx.strokeStyle = colors[1];
                    ctx.fillStyle = colors[1];
                }

                ctx.strokeRect(bbox_x, bbox_y, bbox_w, bbox_h);
                ctx.lineWidth = 2;

                var text = class_names[label] + ": " + parseFloat(prob * 100).toFixed(2) + "%";

                ctx.textBaseline = 'top';
                var text_width = ctx.measureText(text).width;
                var text_height = parseInt(ctx.font, 10);

                var x = bbox_x;
                var y = bbox_y - text_height;
                if (y < 0)
                    y = 0;
                if (x + text_width > canvas.width)
                    x = canvas.width - text_width;

                //ctx.fillStyle = "rgb(255,255,255)";
                ctx.fillRect(x-1, y-2, text_width+4, text_height+2);
                ctx.fillStyle = "rgb(255,255,255)";
                ctx.fillText(text, x+1, y-2);
            }
            // console.log(remind_ctx);
            var time = new Date((new Date()).valueOf());
            var s = time.getSeconds();
            console.log(s)
            
            document.getElementById('remind').innerHTML = remind_ctx;
        }

        //Request Animation Frame function
        var sFilter = function() {
            if (video.paused || video.ended) return;

            ctx.fillRect(0, 0, w, h);
            ctx.drawImage(video, 0, 0, w, h);

            ncnn_yolo();

            window.requestAnimationFrame(sFilter);
        }
        

    </script>

</body>

</html>