Hugging Face's logo

Spaces:
cahodk
/
live-ml5-facemesh-p5js
Running

App Files Community
cahodk commited on
Commit
05f068b
•
1 Parent(s): 275fcd1

Initial commit

Browse files
Files changed (4) hide show
  1. README.md +1 -1
  2. index.html +27 -18
  3. sketch.js +48 -0
  4. style.css +14 -22
README.md CHANGED
@@ -8,4 +8,4 @@ pinned: false
8
  license: lgpl-2.1
9
  ---
10
 
11
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
8
  license: lgpl-2.1
9
  ---
10
 
11
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,28 @@
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
+ <!--
2
+ Copyright (c) 2018 ml5
3
+
4
+ This software is released under the MIT License.
5
+ https://opensource.org/licenses/MIT
6
+ -->
7
+
8
  <html>
9
+
10
+ <head>
11
+ <meta charset="UTF-8">
12
+ <title>PoseNet example using p5.js</title>
13
+
14
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.min.js"></script>
15
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.dom.min.js"></script>
16
+ <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js" type="text/javascript"></script>
17
+ <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
18
+ <script src="https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh"></script>
19
+ <link rel="stylesheet" type="text/css" href="style.css">
20
+ </head>
21
+
22
+ <body>
23
+ <h1>PoseNet example using p5.js</h1>
24
+ <p id='status'>Loading model...</p>
25
+ <script src="sketch.js"></script>
26
+ </body>
27
+
28
+ </html>
sketch.js ADDED
@@ -0,0 +1,48 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ let facemesh;
2
+ let video;
3
+ let predictions = [];
4
+
5
+ function setup() {
6
+ createCanvas(640, 480);
7
+ video = createCapture(VIDEO);
8
+ video.size(width, height);
9
+
10
+ facemesh = ml5.facemesh(video, modelReady);
11
+
12
+ // This sets up an event that fills the global variable "predictions"
13
+ // with an array every time new predictions are made
14
+ facemesh.on("predict", results => {
15
+ predictions = results;
16
+ });
17
+
18
+ // Hide the video element, and just show the canvas
19
+ video.hide();
20
+ }
21
+
22
+ function modelReady() {
23
+ console.log("Model ready!");
24
+ }
25
+
26
+ function draw() {
27
+ background(0)
28
+ image(video, 0, 0, width, height);
29
+
30
+ // We can call both functions to draw all keypoints
31
+ drawKeypoints();
32
+ }
33
+
34
+ // A function to draw ellipses over the detected keypoints
35
+ function drawKeypoints() {
36
+ for (let i = 0; i < predictions.length; i += 1) {
37
+ console.log(predictions)
38
+ const keypoints = predictions[i].scaledMesh;
39
+
40
+ // Draw facial keypoints.
41
+ for (let j = 0; j < keypoints.length; j += 1) {
42
+ const [x, y] = keypoints[j];
43
+
44
+ fill(0, 255, 0);
45
+ ellipse(x, y, 5, 5);
46
+ }
47
+ }
48
+ }
style.css CHANGED
@@ -1,28 +1,20 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
- }
5
-
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
 
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
28
- }
 
1
+ html, body {
2
+ margin: 0;
3
+ padding: 0;
 
 
 
 
 
4
  }
5
 
6
+ body {
7
+ display: flex;
8
+ align-content: center;
9
+ justify-content: center;
10
+ flex-wrap: wrap;
11
+ flex-direction: column;
12
  }
13
 
14
+ canvas {
15
+ display: block;
 
 
 
 
16
  }
17
 
18
+ * {
19
+ font-family: sans-serif;
20
+ }