Spaces:
Running
Running
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <script src="js/face-api.min.js"></script> | |
| <!--<script src="https://cdn.jsdelivr.net/npm/face-api.js"></script>--> | |
| <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/body-pix"></script> | |
| <style> | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| video { | |
| position: absolute; | |
| z-index: 1; | |
| } | |
| canvas { | |
| position: relative; | |
| z-index: 20; | |
| } | |
| </style> | |
| <style> | |
| /* Máscara para tapar a la persona */ | |
| .mask { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(255, 255, 255, 0.5); | |
| pointer-events: none; /* Permite interactuar con elementos debajo */ | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <video width=640 height=480 onloadedmetadata="onPlay(this)" autoplay muted playsinline id="camera"></video> | |
| <div class="mask"></div> | |
| <canvas width=640 height=480 id="overlay"></canvas> | |
| <script> | |
| Promise.all([ | |
| faceapi.nets.ssdMobilenetv1.loadFromUri('/models'), | |
| faceapi.nets.tinyFaceDetector.loadFromUri('/models'), | |
| faceapi.nets.faceLandmark68Net.loadFromUri('/models'), | |
| faceapi.nets.faceRecognitionNet.loadFromUri('/models'), | |
| faceapi.nets.faceExpressionNet.loadFromUri('/models'), | |
| faceapi.nets.ageGenderNet.loadFromUri('/models'), | |
| ]).then(onPlay); | |
| const video = document.getElementById('camera'); | |
| const canvas = document.getElementById('overlay'); | |
| (async () => { | |
| const stream = await navigator.mediaDevices.getUserMedia({ video: {} }); | |
| video.srcObject = stream; | |
| })(); | |
| async function onPlay() { | |
| let fullFaceDescriptions = await faceapi.detectAllFaces(video) | |
| .withFaceLandmarks() | |
| .withFaceDescriptors() | |
| .withAgeAndGender(); | |
| const dims = faceapi.matchDimensions(canvas, video, true); | |
| const resizedResults = faceapi.resizeResults(fullFaceDescriptions, dims); | |
| resizedResults.forEach(async (detection) => { | |
| console.log(detection) | |
| const { age, gender, genderProbability } = detection; | |
| console.log(`Edad: ${Math.round(age)} años.`); | |
| if (age < 18) { | |
| const box = detection.detection.box; | |
| const ctx = canvas.getContext('2d'); | |
| ctx.fillStyle = "rgba(255, 255, 255, 0.7)"; // Color blanco opaco | |
| ctx.fillRect(box.x, box.y, box.width, box.height); | |
| } | |
| }); | |
| setTimeout(() => onPlay(), 100) | |
| } | |
| </script> | |
| </body> | |
| </html> |