yemount · smor · Nov 19, 2025 · Nov 19, 2025 · Nov 19, 2025 · Nov 19, 2025
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/assets/background-magritte.jpeg b/assets/background-magritte.jpeg
diff --git a/assets/background1.png b/assets/background1.png
diff --git a/assets/background2.png b/assets/background2.png
diff --git a/assets/background3.png b/assets/background3.png
diff --git a/assets/background4.png b/assets/background4.png
diff --git a/assets/futurebg.jpg b/assets/futurebg.jpg
diff --git a/camera.html b/camera.html
@@ -3,21 +3,23 @@
 
 <head>
     <title>PoseNet - Camera Feed Demo</title>
+
     <style>
         body {
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
+            background-image: url(assets/background2.png);
         }
 
         .canvas-container {
-            width: 800px;
+            width: 100%;
             max-width: 100%;
             display: flex;
             justify-content: center;
             position: relative;
-        }
+                }
 
         .camera-canvas {
             position: absolute;
@@ -34,7 +36,7 @@
         }
 
         .illustration-canvas {
-            border: 1px solid #eeeeee;
+            border: none;
         }
 
         .footer {
@@ -43,6 +45,7 @@
             bottom: 0;
             width: 100%;
             color: black;
+            display: none;
         }
 
         .footer-text {
@@ -103,6 +106,14 @@
         .spinner-text {
             float: left;
         }
+
+        #output, #keypoints {
+            display: none;
+        }
+        #message {
+            height: 100%;
+            border: solid 2px white;
+        }
     </style>
     <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
@@ -130,6 +141,8 @@
         </div>
         <canvas class="illustration-canvas"></cavnas>
     </div>
+    <div id="message">You found the correct pose! Thanks for participating!</div>
+
     <div class="footer">
         <div class="footer-text">
           <p>

diff --git a/camera.js b/camera.js
@@ -29,6 +29,8 @@ import {PoseIllustration} from './illustrationGen/illustration';
 import {Skeleton, facePartName2Index} from './illustrationGen/skeleton';
 import {FileUtils} from './utils/fileUtils';
 
+import * as magritteSVG from './resources/illustration/magritte.svg';
+import * as crocodileSVG from './resources/illustration/crocodile.svg';
 import * as girlSVG from './resources/illustration/girl.svg';
 import * as boySVG from './resources/illustration/boy.svg';
 import * as abstractSVG from './resources/illustration/abstract.svg';
@@ -44,8 +46,8 @@ let videoHeight = 300;
 let faceDetection = null;
 let illustration = null;
 let canvasScope;
-let canvasWidth = 800;
-let canvasHeight = 800;
+let canvasWidth = 1920;
+let canvasHeight = 1080;
 
 // ML models
 let facemesh;
@@ -59,6 +61,8 @@ let mobile = false;
 const stats = new Stats();
 const avatarSvgs = {
   'girl': girlSVG.default,
+  'magritte': magritteSVG.default,
+  'crocodile': crocodileSVG.default,
   'boy': boySVG.default,
   'abstract': abstractSVG.default,
   'blathers': blathersSVG.default,
@@ -210,6 +214,34 @@ function detectPoseInRealTime(video) {
     if (poses.length >= 1 && illustration) {
       Skeleton.flipPose(poses[0]);
 
+      // If both wrists are below hips, we are in the correct pose.
+      const skeleton = {};
+      poses[0].keypoints.forEach(kp => {
+        skeleton[kp.part] = kp;
+      });
+
+      const correctPoseRange = 30; // pixels above or below hips
+      const minConfidence = 0.1;
+      if (skeleton['rightWrist'].score > minConfidence &&
+          skeleton['leftWrist'].score > minConfidence &&
+          skeleton['rightHip'].score > minConfidence &&
+          skeleton['leftHip'].score > minConfidence &&
+          Math.abs(skeleton['leftWrist'].position.x - skeleton['leftHip'].position.x) < correctPoseRange &&
+          Math.abs(skeleton['rightWrist'].position.x - skeleton['rightHip'].position.x) < correctPoseRange
+) {
+        // Correct pose
+        console.log('Correct pose');
+        document.getElementById('message').style.display = 'block';
+        setTimeout(() => {
+          document.getElementById('message').style.display = 'none';
+        }, 10000);
+
+      } else {
+        // Not the correct pose
+        // document.getElementById('message').innerHTML = '&nbsp;';
+      }
+
+
       if (faceDetection && faceDetection.length > 0) {
         let face = Skeleton.toFaceFrame(faceDetection[0]);
         illustration.updateSkeleton(poses[0], face);
@@ -287,8 +319,8 @@ export async function bindPage() {
     throw e;
   }
 
-  setupGui([], posenet);
-  setupFPS();
+  // setupGui([], posenet);
+  // setupFPS();
 
   toggleLoadingUI(false);
   detectPoseInRealTime(video, posenet);

diff --git a/package.json b/package.json
@@ -15,11 +15,11 @@
     "@tensorflow/tfjs-converter": "^1.7.0",
     "@tensorflow/tfjs-core": "^1.7.0",
     "face-api.js": "^0.22.1",
-    "paper": "file:third_party/paper",
+    "paper": "^0.12.1",
     "stats.js": "^0.17.0"
   },
   "scripts": {
-    "watch": "cross-env NODE_ENV=development parcel index.html --no-hmr --open ",
+    "watch": "cross-env NODE_ENV=development parcel index.html --no-hmr --open --no-source-maps",
     "build": "cross-env NODE_ENV=production parcel build index.html --public-url ./",
     "build-camera": "cross-env NODE_ENV=production parcel build camera.html --public-url ./",
     "lint": "eslint .",

diff --git a/resources/backgrounds/background-magritte.jpeg b/resources/backgrounds/background-magritte.jpeg
diff --git a/resources/illustration/crocodile.svg b/resources/illustration/crocodile.svg