Fixes #144: Corrected lip alignment for facemesh keypoints

[coding-jaguar]

Before

After

Problem

The facemesh model had an issue with the lips. The upper lips had more keypoints than the lower lips, which caused:

• Asymmetry in the lip shape.
• Gaps or improper alignment when drawing the lips.
• it wont be a problem if it were just points but we are doing it in a single stroke which made it look unexpected.

Solution

To fix this, I added the missing extreme left points for the lower lips:

1. For the outer lower lip, I used the extreme left point from the upper lip (keypoint 20) and added it to the lower lip at position 10.
2. For the inner lower lip, I used the last keypoint from the upper lip and added it to the lower lip at position 32.

This ensures the upper and lower lips now have the same number of keypoints and align perfectly.

Code Changes

I added the following lines:

face.lips.keypoints.splice(10, 0, face.lips.keypoints[20]); // missing point for outer lower lip
face.lips.keypoints.splice(32, 0, face.lips.keypoints[face.lips.keypoints.length - 1]); // missing point for inner lower lip

[shiffman]

Thank you so much for looking into this and proposing such a thoughtful and elegant solution!

The example you edited is designed to introduce beginners to the basic concept of iterating over keypoints with beginShape() and endShape(). I worry that adding array manipulation at this stage might make it a bit overwhelming for someone just getting started. That said, your idea of drawing the lips the way you did is so clever and valuable!

I wonder if it could work well as a separate example, tailored specifically on the lips, or perhaps as an addition to the documentation or wiki? I’d love to hear your thoughts on this! Maybe @MOQN has ideas regarding the website?

As nother reference, when I created a video tutorial for the FaceMesh model, I used custom lists of keypoints. You can check out the example here: FaceMesh - Custom List (Lips).

Looking around the issue discussions, it looks like the root might be related to this TensorFlow.js issue: tensorflow/tfjs#8221. I wonder if addressing it there could resolve the need for changes to this example. What do you think?

[coding-jaguar]

mate i think you have solved it in already by separating inner and outer lips, one other way could be to manipulate lips face["lips"] manually in src/FaceMesh/index.js and separating inner and outer lips there or adding these points like i did here, feels good to contribute man, its my first

[coding-jaguar]

admittedly it may not look elegant, feel free to let me know what you think