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> |