FaceMesh example using ml5js

{"name":"ml5.js face mesh","description":"Demo of ml5js face mesh use. Fork this project and turn it into something cool, like a video filter!","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/t9sflseuvrzivmf72wgi","view_count":0,"fork_count":0,"expires_at":null,"created_at":"2025-04-03T18:11:23.743698Z","updated_at":"2025-04-03T18:11:23.743700Z","user_id":192,"status":"PRIVATE","parent_id":7069,"id":7094,"user":{"username":"xamseygo","id":192,"password_hash":null,"updated_at":"2024-08-21T18:42:26.417918Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":null,"recess_id":"cfb1457c-ce90-4d98-a6ed-7abb46cfc301","created_at":"2024-08-21T18:42:26.417915Z","reset_token":null,"stripe_customer_id":null,"seats":null},"code":{"script.js":"/*\nThis project uses the ml5.js library to detect facial landmarks in real-time using a webcam. \nml5.js is a friendly and easy-to-use library built on top of TensorFlow.js that provides \nmachine learning tools for the web.\n\nIn this project, we utilize the FaceMesh model to track facial features. The model identifies \nkey points on a detected face, which you can visualize and use creatively.\n\nIdeas for expanding this project:\n1. Develop an interactive mask or filter application that adds virtual elements to the user's face.\n2. Allow users to take a snapshot with the current filters or effects and download the image.\n3. Implement a simple emotion detection feature by analyzing the positions of facial landmarks.\n4. Introduce different drawing styles for the face points, like using emojis or shapes.\n\nRemember, the sky's the limit! Use your creativity to make this project uniquely yours.\n*/\n\nlet faceMesh;\nlet video;\nlet faces = [];\nlet options = { maxFaces: 1, refineLandmarks: false, flipHorizontal: false };\n\nfunction preload() {\n // Load the faceMesh model\n faceMesh = ml5.faceMesh(options);\n}\n\nfunction setup() {\n createCanvas(640, 480);\n // Create the webcam video and hide it\n video = createCapture(VIDEO);\n video.size(640, 480);\n video.hide();\n // Start detecting faces from the webcam video\n faceMesh.detectStart(video, gotFaces);\n}\n\nfunction draw() {\n // Draw the webcam video\n image(video, 0, 0, width, height);\n\n // Draw all the tracked face points\n for (let i = 0; i < faces.length; i++) {\n let face = faces[i];\n for (let j = 0; j < face.keypoints.length; j++) {\n let keypoint = face.keypoints[j];\n fill(0, 255, 0);\n noStroke();\n circle(keypoint.x, keypoint.y, 5);\n }\n }\n}\n\n// Callback function for when faceMesh outputs data\nfunction gotFaces(results) {\n // Save the output to the faces variable\n faces = results;\n}","style.css":"html,\nbody {\n margin: 0;\n padding: 0;\n}\n\ncanvas {\n display: block;\n}\n\n* {\n font-family: sans-serif;\n}","index.html":"\n\n\n\n \n FaceMesh example using ml5js\n\n \n \n \n\n\n\n \n\n\n"},"chat_history":[{"deleted":0,"code_id":228564,"input_tokens":null,"id":129564,"project_id":7094,"sender":"client_script","message":"Let's get started!\n Errors:\n","created_at":"2025-04-03T18:11:42.267701Z","output_tokens":null},{"deleted":0,"code_id":228564,"input_tokens":3256,"id":129565,"project_id":7094,"sender":"ai","message":"Great! It looks like you're working on a project that uses the ml5.js library to detect facial landmarks in real-time with a webcam. This is a fantastic way to explore computer vision and machine learning on the web.\n\nCould you tell me a bit more about what you'd like to add or improve in your project? Are you thinking about adding filters, taking snapshots, or something else? Let me know your thoughts!","created_at":"2025-04-03T18:11:42.361403Z","output_tokens":101},{"deleted":0,"code_id":228564,"input_tokens":null,"id":129568,"project_id":7094,"sender":"human","message":"make face filters","created_at":"2025-04-03T18:11:58.919851Z","output_tokens":null},{"deleted":0,"code_id":228564,"input_tokens":3254,"id":129569,"project_id":7094,"sender":"ai","message":"Adding face filters sounds like a fun idea! You can create simple face filters by overlaying images or shapes on specific facial landmarks. Let's start by adding a basic filter to your project. Could you tell me what kind of face filter you have in mind? For example, do you want to add glasses, a hat, or something else? Let me know!","created_at":"2025-04-03T18:11:58.926865Z","output_tokens":83}],"assets":[{"cloudinary_id":"wbannoyfyllzcs1rw7sf","project_id":7094,"created_at":"2025-04-03T18:11:23.751653Z","deleted":false,"name":"cover_pose","resource_type":"image","id":67150},{"cloudinary_id":"mzjdeskh9tg6hafhsm2y","project_id":7094,"created_at":"2025-04-03T18:11:23.750520Z","deleted":false,"name":"cover","resource_type":"image","id":67149},{"cloudinary_id":"t9sflseuvrzivmf72wgi","project_id":7094,"created_at":"2025-04-03T18:11:23.749116Z","deleted":false,"name":"coverImg1","resource_type":"image","id":67148}],"messages_sent":1,"comments":[],"steps":[]}