Interactive Pose Estimation with Teachable Machine

{"name":"Interactive Pose Estimation with Teachable Machine","description":"Dive into the world of interactive machine learning with this fascinating project! Leverage Teachable Machine to detect and classify poses using your webcam in real-time. Visualize the keypoints and skeletons of your poses on a canvas, making it a perfect blend of art and technology. Ideal for beginners, this project offers a hands-on experience with AI and JavaScript!","photo":null,"view_count":3,"fork_count":2,"expires_at":null,"created_at":"2025-07-23T16:21:40.715232Z","updated_at":"2025-07-23T16:21:40.715233Z","user_id":166,"status":"PRIVATE","parent_id":null,"id":9403,"user":{"photo":null,"email":"markivlev@gmail.com","recess_id":"38a987b1-569d-47cc-ae61-0c84198aa65c","created_at":"2024-08-05T03:36:08.774307Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"m_ivlev","id":166,"password_hash":"$2b$12$lM.SwMhsrEJrs7ZjNyj9e.FOyWqAZgNBSeOEkB8gCGEsXkmGPZLu6","updated_at":"2024-08-05T03:36:08.774314Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"// script.js\nconst URL = \"https://teachablemachine.withgoogle.com/models/BhrsT9NfU/\";\n\nlet model, webcam, ctx, labelContainer, maxPredictions;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235); // Sky blue background\n}\n\nfunction draw() {\n // Game logic will go here\n}\n\nasync function init() {\n const modelURL = URL + \"model.json\";\n const metadataURL = URL + \"metadata.json\";\n\n // Load the model and metadata\n model = await tmPose.load(modelURL, metadataURL);\n maxPredictions = model.getTotalClasses();\n\n // Setup webcam\n const size = 200;\n const flip = true; // Flip the webcam\n webcam = new tmPose.Webcam(size, size, flip);\n await webcam.setup(); // Request access to the webcam\n await webcam.play();\n window.requestAnimationFrame(poseLoop); // Updated function name here\n\n // Append elements to the DOM\n const canvas = document.getElementById(\"canvas\");\n canvas.width = size;\n canvas.height = size;\n ctx = canvas.getContext(\"2d\");\n labelContainer = document.getElementById(\"label-container\");\n for (let i = 0; i < maxPredictions; i++) {\n labelContainer.appendChild(document.createElement(\"div\"));\n }\n}\n\nasync function poseLoop(timestamp) { // Updated function name here\n webcam.update(); // Update the webcam frame\n await predict();\n window.requestAnimationFrame(poseLoop); // Updated function name here\n}\n\nasync function predict() {\n const { pose, posenetOutput } = await model.estimatePose(webcam.canvas);\n const prediction = await model.predict(posenetOutput);\n\n for (let i = 0; i < maxPredictions; i++) {\n const classPrediction = prediction[i].className + \": \" + prediction[i].probability.toFixed(2);\n labelContainer.childNodes[i].innerHTML = classPrediction;\n }\n\n // Draw the pose\n drawPose(pose);\n}\n\nfunction drawPose(pose) {\n if (webcam.canvas) {\n ctx.drawImage(webcam.canvas, 0, 0);\n if (pose) {\n const minPartConfidence = 0.5;\n tmPose.drawKeypoints(pose.keypoints, minPartConfidence, ctx);\n tmPose.drawSkeleton(pose.keypoints, minPartConfidence, ctx);\n }\n }\n}","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n\n \n \n Interactive Pose Estimation with Teachable Machine\n \n \n \n \n \n\n\n\n

Teachable Machine Pose Model

\n \n

\n \n\n\n"},"chat_history":[{"message":"

Teachable Machine Pose Model

","project_id":9403,"created_at":"2025-07-23T16:21:41.100325Z","output_tokens":null,"sender":"human","code_id":273451,"deleted":0,"input_tokens":null,"id":164195},{"message":"Let's get started!\n Errors:\n","project_id":9403,"created_at":"2025-07-23T16:22:11.880094Z","output_tokens":null,"sender":"client_script","code_id":273451,"deleted":0,"input_tokens":null,"id":164205},{"message":"","project_id":9403,"created_at":"2025-07-23T16:22:16.591430Z","output_tokens":0,"sender":"ai","code_id":273451,"deleted":0,"input_tokens":2669,"id":164208},{"message":"Let's get started!\n Errors:\n","project_id":9403,"created_at":"2025-07-23T16:22:24.402981Z","output_tokens":null,"sender":"client_script","code_id":273451,"deleted":0,"input_tokens":null,"id":164217},{"message":"Let's get started!\n Errors:\n","project_id":9403,"created_at":"2025-07-23T16:22:29.803787Z","output_tokens":null,"sender":"client_script","code_id":273451,"deleted":0,"input_tokens":null,"id":164220},{"message":"","project_id":9403,"created_at":"2025-07-23T16:22:31.169117Z","output_tokens":0,"sender":"ai","code_id":273451,"deleted":0,"input_tokens":2669,"id":164221},{"message":"","project_id":9403,"created_at":"2025-07-23T16:22:31.954787Z","output_tokens":0,"sender":"ai","code_id":273451,"deleted":0,"input_tokens":2669,"id":164224},{"message":"Let's get started!","project_id":9403,"created_at":"2025-07-23T16:23:51.049888Z","output_tokens":null,"sender":"human","code_id":273451,"deleted":0,"input_tokens":null,"id":164255},{"message":"What type of project are you looking to build? Can you share more about your idea and any specific features you have in mind?","project_id":9403,"created_at":"2025-07-23T16:23:51.740253Z","output_tokens":31,"sender":"ai","code_id":273451,"deleted":0,"input_tokens":2669,"id":164256},{"message":"use the provided code as a base","project_id":9403,"created_at":"2025-07-23T16:24:58.356839Z","output_tokens":null,"sender":"human","code_id":273451,"deleted":0,"input_tokens":null,"id":164275},{"message":"It looks like you're interested in integrating the Teachable Machine pose estimation code into your project. We can certainly add that functionality! \n\nFirst, could you clarify what specific features you want to implement with the pose estimation? For example, do you want to display predictions on the canvas, trigger actions based on poses, or something else?","project_id":9403,"created_at":"2025-07-23T16:24:59.867564Z","output_tokens":90,"sender":"ai","code_id":273451,"deleted":0,"input_tokens":2671,"id":164276},{"message":"lets set up the basics first","project_id":9403,"created_at":"2025-07-23T16:25:25.527737Z","output_tokens":null,"sender":"human","code_id":273451,"deleted":0,"input_tokens":null,"id":164295},{"message":"To set up the basics of your project with the Teachable Machine pose estimation, we need to integrate the provided HTML code into your existing project structure. \n\nHere's how we can update your `index.html` to include the necessary elements for the pose estimation and the webcam:\n\n```html\n\n\n\n \n \n Interactive Pose Estimation with Teachable Machine\n \n \n \n \n \n\n\n

Teachable Machine Pose Model

\n \n

\n \n\n\n```\n\n### Key Changes:\n- Added the `

` for the title and button to start the pose estimation.\n- Included the canvas element for displaying the webcam feed.\n- Added a container for the label output.\n- Imported the TensorFlow.js and Teachable Machine pose libraries.\n\n### Next Steps:\n1. Replace your existing `index.html` with the updated code above.\n2. We can then proceed to integrate the JavaScript code for initializing and running the pose estimation.\n\nLet me know when you're ready for the next step!","project_id":9403,"created_at":"2025-07-23T16:25:26.242382Z","output_tokens":426,"sender":"ai","code_id":273451,"deleted":0,"input_tokens":2670,"id":164296},{"message":"proceed","project_id":9403,"created_at":"2025-07-23T16:26:08.284823Z","output_tokens":null,"sender":"human","code_id":273486,"deleted":0,"input_tokens":null,"id":164312},{"message":"Now that we've set up the basics in your `index.html`, we can proceed to implement the JavaScript code in your `script.js` file to handle the pose estimation functionality.\n\nHere’s the code you need to add to your `script.js` file:\n\n```javascript\n// script.js\nconst URL = \"https://teachablemachine.withgoogle.com/models/BhrsT9NfU/\"; \nlet model, webcam, ctx, labelContainer, maxPredictions;\n\nasync function init() {\n const modelURL = URL + \"model.json\"; \n const metadataURL = URL + \"metadata.json\"; \n\n // Load the model and metadata\n model = await tmPose.load(modelURL, metadataURL);\n maxPredictions = model.getTotalClasses();\n\n // Setup webcam\n const size = 200;\n const flip = true; // Flip the webcam\n webcam = new tmPose.Webcam(size, size, flip); \n await webcam.setup(); // Request access to the webcam\n await webcam.play(); \n window.requestAnimationFrame(loop); \n\n // Append elements to the DOM\n const canvas = document.getElementById(\"canvas\");\n canvas.width = size; \n canvas.height = size; \n ctx = canvas.getContext(\"2d\"); \n labelContainer = document.getElementById(\"label-container\"); \n for (let i = 0; i < maxPredictions; i++) { \n labelContainer.appendChild(document.createElement(\"div\")); \n }\n}\n\nasync function loop(timestamp) {\n webcam.update(); // Update the webcam frame\n await predict(); \n window.requestAnimationFrame(loop); \n}\n\nasync function predict() { \n const { pose, posenetOutput } = await model.estimatePose(webcam.canvas); \n const prediction = await model.predict(posenetOutput);\n\n for (let i = 0; i < maxPredictions; i++) { \n const classPrediction = prediction[i].className + \": \" + prediction[i].probability.toFixed(2); \n labelContainer.childNodes[i].innerHTML = classPrediction; \n }\n\n // Draw the pose\n drawPose(pose); \n}\n\nfunction drawPose(pose) { \n if (webcam.canvas) { \n ctx.drawImage(webcam.canvas, 0, 0); \n if (pose) { \n const minPartConfidence = 0.5; \n tmPose.drawKeypoints(pose.keypoints, minPartConfidence, ctx); \n tmPose.drawSkeleton(pose.keypoints, minPartConfidence, ctx); \n } \n } \n}\n```\n\n### Key Points:\n- **Initialization**: The `init()` function loads the model and sets up the webcam.\n- **Looping**: The `loop()` function continuously updates the webcam feed and calls the `predict()` function.\n- **Prediction**: The `predict()` function estimates the pose and updates the labels in the DOM.\n- **Drawing**: The `drawPose()` function visualizes the detected keypoints and skeleton on the canvas.\n\n### Next Steps:\n1. Replace the content of your `script.js` with the provided code.\n2. Run your project and click the \"Start\" button to initialize the pose estimation.\n\nLet me know when you’re ready for the next feature or if you encounter any issues!","project_id":9403,"created_at":"2025-07-23T16:26:09.313483Z","output_tokens":713,"sender":"ai","code_id":273486,"deleted":0,"input_tokens":2783,"id":164313},{"message":"LOG: \n🌸 p5.js says: p5 had problems creating the global function \"loop\", possibly because your code is already using that name as a variable. You may want to rename your variable to something else. (http://p5js.org/reference/#/p5/loop)","project_id":9403,"created_at":"2025-07-23T16:27:12.445109Z","output_tokens":null,"sender":"human","code_id":273502,"deleted":0,"input_tokens":null,"id":164339},{"message":"The error message indicates that there's a conflict with the name \"loop,\" which is being used both as a function in your JavaScript code and as a built-in function in p5.js. To resolve this, we can rename your `loop` function to something else, like `poseLoop`.\n\nHere's the updated `script.js` with the necessary changes:\n\n```javascript\n// script.js\nconst URL = \"https://teachablemachine.withgoogle.com/models/BhrsT9NfU/\";\n\nlet model, webcam, ctx, labelContainer, maxPredictions;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235); // Sky blue background\n}\n\nfunction draw() {\n // Game logic will go here\n}\n\nasync function init() {\n const modelURL = URL + \"model.json\";\n const metadataURL = URL + \"metadata.json\";\n\n // Load the model and metadata\n model = await tmPose.load(modelURL, metadataURL);\n maxPredictions = model.getTotalClasses();\n\n // Setup webcam\n const size = 200;\n const flip = true; // Flip the webcam\n webcam = new tmPose.Webcam(size, size, flip);\n await webcam.setup(); // Request access to the webcam\n await webcam.play();\n window.requestAnimationFrame(poseLoop); // Change here\n\n // Append elements to the DOM\n const canvas = document.getElementById(\"canvas\");\n canvas.width = size;\n canvas.height = size;\n ctx = canvas.getContext(\"2d\");\n labelContainer = document.getElementById(\"label-container\");\n for (let i = 0; i < maxPredictions; i++) {\n labelContainer.appendChild(document.createElement(\"div\"));\n }\n}\n\nasync function poseLoop(timestamp) { // Change here\n webcam.update(); // Update the webcam frame\n await predict();\n window.requestAnimationFrame(poseLoop); // Change here\n}\n\nasync function predict() {\n const { pose, posenetOutput } = await model.estimatePose(webcam.canvas);\n const prediction = await model.predict(posenetOutput);\n\n for (let i = 0; i < maxPredictions; i++) {\n const classPrediction = prediction[i].className + \": \" + prediction[i].probability.toFixed(2);\n labelContainer.childNodes[i].innerHTML = classPrediction;\n }\n\n // Draw the pose\n drawPose(pose);\n}\n\nfunction drawPose(pose) {\n if (webcam.canvas) {\n ctx.drawImage(webcam.canvas, 0, 0);\n if (pose) {\n const minPartConfidence = 0.5;\n tmPose.drawKeypoints(pose.keypoints, minPartConfidence, ctx);\n tmPose.drawSkeleton(pose.keypoints, minPartConfidence, ctx);\n }\n }\n}\n```\n\n### Key Changes:\n- Renamed the `loop` function to `poseLoop` to avoid naming conflicts with p5.js.\n- Updated all references to the old `loop` function to `poseLoop`.\n\n### Next Steps:\n1. Replace your existing `script.js` content with the updated code above.\n2. Test your project again to see if the error is resolved.\n\nLet me know if you need further assistance or if you're ready for the next feature!","project_id":9403,"created_at":"2025-07-23T16:27:13.314745Z","output_tokens":721,"sender":"ai","code_id":273502,"deleted":0,"input_tokens":3286,"id":164340},{"message":"LOG %c * Tone.js v14.8.39 * \nWARNING webgl backend was already registered. Reusing existing backend factory. \nWARNING cpu backend was already registered. Reusing existing backend factory. \nWARNING Platform browser has already been set. Overwriting the platform with [object Object]. \nLOG \n🌸 p5.js says: p5 had problems creating the global function \"loop\", possibly because your code is already using that name as a variable. You may want to rename your variable to something else. (http://p5js.org/reference/#/p5/loop) ","project_id":9403,"created_at":"2025-07-24T14:55:14.815292Z","output_tokens":null,"sender":"human","code_id":273502,"deleted":0,"input_tokens":null,"id":165590},{"message":"It seems the issue persists because we have a conflict with the name `loop`, which is already a reserved function name in p5.js.\n\nTo resolve this, we need to rename your `loop` function to something else, like `poseLoop`. Here's the updated code for your `script.js`:\n\n```javascript\n// script.js\nconst URL = \"https://teachablemachine.withgoogle.com/models/BhrsT9NfU/\";\n\nlet model, webcam, ctx, labelContainer, maxPredictions;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235); // Sky blue background\n}\n\nfunction draw() {\n // Game logic will go here\n}\n\nasync function init() {\n const modelURL = URL + \"model.json\";\n const metadataURL = URL + \"metadata.json\";\n\n // Load the model and metadata\n model = await tmPose.load(modelURL, metadataURL);\n maxPredictions = model.getTotalClasses();\n\n // Setup webcam\n const size = 200;\n const flip = true; // Flip the webcam\n webcam = new tmPose.Webcam(size, size, flip);\n await webcam.setup(); // Request access to the webcam\n await webcam.play();\n window.requestAnimationFrame(poseLoop); // Updated function name here\n\n // Append elements to the DOM\n const canvas = document.getElementById(\"canvas\");\n canvas.width = size;\n canvas.height = size;\n ctx = canvas.getContext(\"2d\");\n labelContainer = document.getElementById(\"label-container\");\n for (let i = 0; i < maxPredictions; i++) {\n labelContainer.appendChild(document.createElement(\"div\"));\n }\n}\n\nasync function poseLoop(timestamp) { // Updated function name here\n webcam.update(); // Update the webcam frame\n await predict();\n window.requestAnimationFrame(poseLoop); // Updated function name here\n}\n\nasync function predict() {\n const { pose, posenetOutput } = await model.estimatePose(webcam.canvas);\n const prediction = await model.predict(posenetOutput);\n\n for (let i = 0; i < maxPredictions; i++) {\n const classPrediction = prediction[i].className + \": \" + prediction[i].probability.toFixed(2);\n labelContainer.childNodes[i].innerHTML = classPrediction;\n }\n\n // Draw the pose\n drawPose(pose);\n}\n\nfunction drawPose(pose) {\n if (webcam.canvas) {\n ctx.drawImage(webcam.canvas, 0, 0);\n if (pose) {\n const minPartConfidence = 0.5;\n tmPose.drawKeypoints(pose.keypoints, minPartConfidence, ctx);\n tmPose.drawSkeleton(pose.keypoints, minPartConfidence, ctx);\n }\n }\n}\n```\n\n### Key Changes:\n- Renamed the `loop` function to `poseLoop`.\n- Updated all references to the function to reflect this new name.\n\n### Next Steps:\n1. Replace your existing `script.js` content with the updated code above.\n2. Run your project again and click the \"Start\" button to see if the error is resolved.\n\nLet me know if you encounter any further issues or if you’re ready for the next features!","project_id":9403,"created_at":"2025-07-24T14:55:15.556583Z","output_tokens":718,"sender":"ai","code_id":273502,"deleted":0,"input_tokens":3347,"id":165591}],"assets":[],"messages_sent":7,"comments":[],"steps":[]}