// Face SVG components & shared sub-pieces
const FacePortrait = ({ view = "frontal", warp = {} }) => {
const hump = warp.hump || 0;
const tipLift = warp.tipLift || 0;
const tipRot = warp.tipRot || 0;
const alar = warp.alar || 0;
if (view === "profile") {
// Profile silhouette of a face
const humpDelta = hump * 12; // mm-ish offset
const tipDelta = tipRot * 0.6;
return (
);
}
// Frontal / three-quarter
const alarShift = alar * 4;
return (
);
};
const SampleFace = ({ tag, view }) => (
);
const LandmarkOverlay = ({ visible, view }) => {
if (!visible) return null;
// Approximate mediapipe-like landmarks for the nose region
const frontalPoints = [
[50, 50], [50, 55], [50, 60], [50, 65],
[48, 67], [50, 68], [52, 67],
[47, 69], [50, 70], [53, 69],
[46, 65], [54, 65],
[47, 62], [53, 62],
[44, 57], [56, 57],
[42, 50], [58, 50], // eyes
[50, 75], // upper lip
];
const profilePoints = [
[55, 42], [60, 46], [65, 50], [70, 54], [73, 58], [70, 63], [65, 66], [60, 68],
[50, 38], [55, 35],
[62, 70], [60, 72],
];
const points = view === "profile" ? profilePoints : frontalPoints;
return (
<>
{points.map(([x, y], i) => (
))}
);
};
const WarpVectorOverlay = ({ visible, view }) => {
if (!visible) return null;
return (
);
};
const MaskOverlay = ({ visible, view }) => {
if (!visible) return null;
const style = view === "profile"
? { left: "58%", top: "44%", width: "22%", height: "32%", borderRadius: "40%" }
: { left: "39%", top: "55%", width: "22%", height: "24%", borderRadius: "50%" };
return ;
};
Object.assign(window, { FacePortrait, SampleFace, LandmarkOverlay, WarpVectorOverlay, MaskOverlay });