finalizing webpage for blazepose video

Author: shiffman

content/videos/ml5/7-bodypose/blazePose/images/blazepose.png

@@ -1,30 +1,36 @@
 {
   "title": "3D Pose Estimation with ml5.js",
-  "description": "In this video, I substitute the MoveNet model with the BlazePose model, showing how to track #D body keypoints and visualize 'skeleton' connections using recorded video.",
-  "videoId": "",
-  "nebulaSlug": "",
-  "date": "2024-12-1",
+  "description": "Building on BodyPose in ml5.js, this video explores the 3D capabilities of the BlazePose model, visualizing poses in a 3D space using WEBGL in p5.js.",
+  "videoId": "IF414I26_K8",
+  "nebulaSlug": "codingtrain-3d-pose-estimation-with-ml5js",
+  "date": "2024-12-01",
   "languages": ["ml5.js", "JavaScript"],
   "topics": ["machine learning (ML)", "webcam", "pose detection", "ml5.js", "MoveNet", "BlazePose"],
   "canContribute": true,
   "timestamps": [
     { "time": "0:00", "title": "Introduction" },
-    { "time": "2:00", "title": "Change to the BlazePose model" },
-    { "time": "2:37", "title": "x, y, z values are real world measurements" },
-    { "time": "4:30", "title": "Replace live camera feed with recorded video" },
-    { "time": "5:49", "title": "Render using p5 WEBGL renderer" },
-    { "time": "7:48", "title": "Use scale() to expand range of x, y, z values" },
-    { "time": "9:00", "title": "Add floor" },
-    { "time": "9:58", "title": "Rotate scene" },
-    { "time": "11:24", "title": "Use orbitControl() to rotate scene" },
-    { "time": "12:22", "title": "Translate to point" },
-    { "time": "13:42", "title": "Outro" }
+    { "time": "2:00", "title": "Incorporating BlazePose model" },
+    { "time": "2:37", "title": "What are the xyz values?" },
+    { "time": "4:30", "title": "Replace live camera with recorded video." },
+    { "time": "5:49", "title": "Render with p5.js WEBGL" },
+    { "time": "7:48", "title": "Use scale() to expand range of xyz values" },
+    { "time": "9:00", "title": "Creating 3D scene" },
+    { "time": "9:58", "title": "Rotating scene." },
+    { "time": "11:24", "title": "Using orbitControl()" },
+    { "time": "12:22", "title": "Using 3D shapes" },
+    { "time": "13:42", "title": "Goodbye!" }
   ],
   "codeExamples": [
+    {
+      "title": "BlazePose 3D",
+      "description": "Sketch demonstrating use of BlazePose model with 3D keypoints.",
+      "image": "blazepose.png",
+      "urls": { "p5": "https://editor.p5js.org/codingtrain/sketches/ftALPDieT" }
+    },
     {
       "title": "BlazePose Lerp",
-      "description": "Sketch demonstrating use of BlazePose model with lerp smoothing.",
-      "image": "image.jpg",
+      "description": "Sketch demonstrating linear interpolation of 3D keypoints.",
+      "image": "blazepose_lerp.png",
       "urls": { "p5": "https://editor.p5js.org/codingtrain/sketches/JMhDRpcxi_" }
     }
   ],
@@ -34,38 +40,56 @@
       "links": [
         {
           "icon": "💻",
-          "title": "ml5.js",
-          "url": "https://ml5js.org/",
-          "description": "ml5 page with documentation and supporting material."
+          "title": "ml5.js: BodyPose",
+          "url": "https://docs.ml5js.org/#/reference/bodypose",
+          "description": "ml5.js documentation on BodyPose models."
+        },
+        {
+          "icon": "📄",
+          "title": "On-device, Real-time Body Pose Tracking with MediaPipe BlazePose",
+          "url": "https://research.google/blog/on-device-real-time-body-pose-tracking-with-mediapipe-blazepose/",
+          "description": "Google Research blog post on the BlazePose model."
+        },
+        {
+          "icon": "📄",
+          "title": "3D Pose Detection with MediaPipe BlazePose GHUM and TensorFlow.js",
+          "url": "https://blog.tensorflow.org/2021/08/3d-pose-detection-with-mediapipe-blazepose-ghum-tfjs.html",
+          "description": "TensorFlow blog post on the BlazePose GHUM model."
         },
         {
           "icon": "📄",
-          "title": "BlazePose Paper",
-          "url": "https://arxiv.org/pdf/2006.10204",
-          "description": "On-device Real-time Body Pose tracking."
+          "title": "BlazePose GHUM Holistic:",
+          "url": "https://arxiv.org/pdf/2206.11678",
+          "description": "Research paper covering real-time 3D human landmarks and pose estimation."
         }
       ]
     },
     {
       "title": "Videos",
       "links": [
+        {
+          "icon": "🚂",
+          "title": "ml5.js Pose Estimation",
+          "url": "/tracks/ml5js-beginners-guide/ml5/7-bodypose/pose-detection",
+          "description": "Previous video covering BodyPose in ml5.js focusing on the MoveNet model."
+        },
         {
           "icon": "🚂",
           "title": "Custom Shapes",
           "url": "/tracks/p5-tips-and-tricks/more-p5/custom-shapes",
           "description": "In this video, I look at how to draw \"custom\" shapes in p5.js, using, `beginShape()`, `endShape()`, `vertex()` and `curveVertex()."
         },
-         {
-           "icon": "🚂",
-           "title": "Translate, Rotate, Push/Pop",
-           "url": "/tracks/transformations-in-p5/transformations/translate-rotate-push-pop",
-           "description": "In this video I cover the functions translate(), rotate(), push() and pop()."
-         }
+        {
+          "icon": "🚂",
+          "title": "Translate, Rotate, Push/Pop",
+          "url": "/tracks/transformations-in-p5/transformations/translate-rotate-push-pop",
+          "description": "In this video I cover the functions translate(), rotate(), push() and pop()."
+        }
       ]
     }
   ],
   "credits": [
     { "title": "Editing", "name": "Mathieu Blanchette" },
     { "title": "Animations", "name": "Jason Heglund" }
   ]
-}
+}