Hugging Face's logo

Spaces:
AllAideas
/
demo_faceapi
Running

App Files Community
1
fcernafukuzaki commited on
Commit
5e0e1b3
·
1 Parent(s): 6e0f5c7

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +89 -17
index.html CHANGED
@@ -1,19 +1,91 @@
1
  <!DOCTYPE html>
2
  <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  <!DOCTYPE html>
2
  <html>
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <script src="js/face-api.min.js"></script>
6
+ <!--<script src="https://cdn.jsdelivr.net/npm/face-api.js"></script>-->
7
+ <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/body-pix"></script>
9
+
10
+ <style>
11
+ * {
12
+ box-sizing: border-box;
13
+ margin: 0;
14
+ padding: 0;
15
+ }
16
+
17
+ video {
18
+ position: absolute;
19
+ z-index: 1;
20
+ }
21
+
22
+ canvas {
23
+ position: relative;
24
+ z-index: 20;
25
+ }
26
+ </style>
27
+ <style>
28
+ /* Máscara para tapar a la persona */
29
+ .mask {
30
+ position: absolute;
31
+ top: 0;
32
+ left: 0;
33
+ width: 100%;
34
+ height: 100%;
35
+ background-color: rgba(255, 255, 255, 0.5);
36
+ pointer-events: none; /* Permite interactuar con elementos debajo */
37
+ }
38
+ </style>
39
+ </head>
40
+ <body>
41
+ <video width=640 height=480 onloadedmetadata="onPlay(this)" autoplay muted playsinline id="camera"></video>
42
+ <div class="mask"></div>
43
+ <canvas width=640 height=480 id="overlay"></canvas>
44
+
45
+ <script>
46
+ Promise.all([
47
+ faceapi.nets.ssdMobilenetv1.loadFromUri('/models'),
48
+ faceapi.nets.tinyFaceDetector.loadFromUri('/models'),
49
+ faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
50
+ faceapi.nets.faceRecognitionNet.loadFromUri('/models'),
51
+ faceapi.nets.faceExpressionNet.loadFromUri('/models'),
52
+ faceapi.nets.ageGenderNet.loadFromUri('/models'),
53
+ ]).then(onPlay);
54
+
55
+ const video = document.getElementById('camera');
56
+ const canvas = document.getElementById('overlay');
57
+
58
+ (async () => {
59
+ const stream = await navigator.mediaDevices.getUserMedia({ video: {} });
60
+ video.srcObject = stream;
61
+ })();
62
+
63
+ async function onPlay() {
64
+
65
+ let fullFaceDescriptions = await faceapi.detectAllFaces(video)
66
+ .withFaceLandmarks()
67
+ .withFaceDescriptors()
68
+ .withAgeAndGender();
69
+
70
+ const dims = faceapi.matchDimensions(canvas, video, true);
71
+ const resizedResults = faceapi.resizeResults(fullFaceDescriptions, dims);
72
+
73
+ resizedResults.forEach(async (detection) => {
74
+ console.log(detection)
75
+ const { age, gender, genderProbability } = detection;
76
+ console.log(`Edad: ${Math.round(age)} años.`);
77
+ if (age < 18) {
78
+ const box = detection.detection.box;
79
+ const ctx = canvas.getContext('2d');
80
+ ctx.fillStyle = "rgba(255, 255, 255, 0.5)"; // Color blanco semi-transparente
81
+ ctx.fillRect(box.x, box.y, box.width, box.height);
82
+
83
+ }
84
+ });
85
+
86
+ setTimeout(() => onPlay(), 100)
87
+
88
+ }
89
+ </script>
90
+ </body>
91
+ </html>