Spaces:

asterioskryos
/

face-analysis

Running

App Files Files Community

asterioskryos commited on Jul 11

Commit

a258da9

verified ·

1 Parent(s): 53cc695

Initial face analysis with MediaPipe

Browse files

Files changed (5) hide show

index.html +33 -18
js/mediapipe.js +24 -0
js/scoring.js +109 -0
js/ui.js +139 -0
style.css +7 -28

index.html CHANGED Viewed

@@ -1,19 +1,34 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Face Analysis</title>
+  <link rel="stylesheet" href="style.css">
+  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.18/wasm/vision_bundle.js" crossorigin="anonymous"></script>
+  <script type="module" src="js/ui.js"></script>
+</head>
+<body>
+  <div id="app">
+    <h1>Face Analysis</h1>
+    <div id="uploadArea">
+      <div id="uploadPrompt">
+        <p>Drop photo here or click to upload</p>
+      </div>
+      <img id="preview" style="display:none">
+      <input type="file" id="fileInput" accept="image/*">
+    </div>
+    <button id="analyzeBtn" disabled>Analyze</button>
+    <div id="status">Loading...</div>
+    <canvas id="resultCanvas" style="display:none"></canvas>
+    <div id="results" style="display:none">
+      <h2>Overall: <span id="overallScore"></span></h2>
+      <div id="scoreGrid"></div>
+    </div>
+  </div>
+</body>
 </html>

js/mediapipe.js ADDED Viewed

	@@ -0,0 +1,24 @@

+let faceLandmarker = null;
+export async function initModel() {
+  const { FilesetResolver, FaceLandmarker } = window.vision;
+  const resolver = await FilesetResolver.forVisionTasks(
+    'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.18/wasm/'
+  );
+  faceLandmarker = await FaceLandmarker.createFromOptions(resolver, {
+    baseOptions: {
+      modelAssetPath: 'https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task',
+      delegate: 'GPU',
+    },
+    runningMode: 'IMAGE',
+    numFaces: 1,
+  });
+  return true;
+}
+export function detectLandmarks(image) {
+  if (!faceLandmarker) return null;
+  const result = faceLandmarker.detect(image);
+  if (!result.faceLandmarks || result.faceLandmarks.length === 0) return null;
+  return result.faceLandmarks[0];
+}

js/scoring.js ADDED Viewed

	@@ -0,0 +1,109 @@

+const PAIRS = [
+  [33,263],[133,362],[157,387],[158,386],[159,385],[160,384],[161,398],[173,466],[246,380],
+  [46,276],[53,283],[52,282],[65,295],[66,296],[70,300],[105,334],[107,336],
+  [234,454],[93,351],[132,361],[58,288],[172,397],[136,377],[150,379],[149,378],[176,401],[148,384],
+  [61,291],[39,269],[37,267],[84,314],[181,321],[91,308],[146,375],[174,399],[89,359],[169,420],
+];
+const LEFT_EYE=[33,133,157,158,159,160,161,173,246];
+const RIGHT_EYE=[362,263,387,386,385,384,398,466,380];
+const LEFT_BROW=[46,53,52,65,66,70,105,107];
+const RIGHT_BROW=[276,283,282,295,296,300,334,336];
+const LIPS=[0,37,39,40,61,84,91,146,178,181,185,267,269,270,291,308,314,317,321,324,325,375,402,405];
+const FOREHEAD=10, CHIN=152, L_CHEEK=234, R_CHEEK=454;
+const NOSE_TIP=1, NOSE_BRIDGE=6, UPPER_LIP=13, LOWER_LIP=14;
+const L_EYE=159, R_EYE=386;
+function d(a,b){return Math.hypot(a.x-b.x,a.y-b.y)}
+export function computeAll(pts){
+  if(!pts||pts.length<468)return null;
+  const sym=computeSymmetry(pts);
+  const props=computeProps(pts);
+  const eyeS=featureSym(pts,LEFT_EYE,RIGHT_EYE);
+  const browS=featureSym(pts,LEFT_BROW,RIGHT_BROW);
+  const lipS=lipScore(pts);
+  const[chinShape,chinS]=chinScore(pts);
+  const overall=sym*0.35+props*0.35+eyeS*0.1+browS*0.05+lipS*0.1+chinS*0.05;
+  return{
+    overall:Math.round(overall*10)/10,
+    symmetry:Math.round(sym*10)/10,
+    proportions:Math.round(props*10)/10,
+    eyeSymmetry:Math.round(eyeS*10)/10,
+    browSymmetry:Math.round(browS*10)/10,
+    lipFullness:Math.round(lipS*10)/10,
+    chinShape,chinScore:Math.round(chinS*10)/10,
+  };
+}
+function computeSymmetry(pts){
+  let errs=[];
+  for(const[l,r]of PAIRS){
+    if(l<pts.length&&r<pts.length){
+      const mid=(pts[l].x+pts[r].x)/2;
+      errs.push(Math.abs(mid-0.5));
+    }
+  }
+  if(!errs.length)return 50;
+  const avg=errs.reduce((a,b)=>a+b,0)/errs.length;
+  return Math.max(0,Math.min(100,100-avg*500));
+}
+function featureSym(pts,left,right){
+  let ld=left.map(i=>pts[i]).filter(Boolean);
+  let rd=right.map(i=>pts[i]).filter(Boolean);
+  const len=Math.min(ld.length,rd.length);
+  if(!len)return 100;
+  let tot=0;
+  for(let i=0;i<len;i++)tot+=d(ld[i],rd[i]);
+  return Math.max(0,Math.min(100,100-(tot/len)*1000));
+}
+function lipScore(pts){
+  const lp=LIPS.map(i=>pts[i]).filter(Boolean);
+  if(lp.length<4)return 50;
+  const xs=lp.map(p=>p.x),ys=lp.map(p=>p.y);
+  const w=Math.max(...xs)-Math.min(...xs);
+  const h=Math.max(...ys)-Math.min(...ys);
+  if(!w)return 50;
+  const ratio=h/w,ideal=0.35;
+  return Math.max(0,Math.min(100,100-Math.abs(ratio-ideal)/ideal*150));
+}
+function chinScore(pts){
+  if(pts.length<=CHIN)return['Unknown',50];
+  const chin=pts[CHIN],jl=pts[136],jr=pts[377];
+  const jw=d(jl,jr);
+  const cj=Math.abs(chin.y-(jl.y+jr.y)/2);
+  const ratio=jw?cj/jw:0;
+  let shape=ratio<0.25?'Round':ratio<0.35?'Square':'Pointed';
+  return[shape,Math.max(0,Math.min(100,100-Math.abs(ratio-0.3)*300))];
+}
+function computeProps(pts){
+  const r={};
+  if(pts.length>Math.max(FOREHEAD,CHIN,L_CHEEK,R_CHEEK)){
+    const fw=pts[R_CHEEK].x-pts[L_CHEEK].x;
+    const fh=pts[CHIN].y-pts[FOREHEAD].y;
+    r.faceRatio=fh?fw/fh:0;
+  }
+  if(pts.length>Math.max(NOSE_BRIDGE,NOSE_TIP,L_EYE,R_EYE,UPPER_LIP,LOWER_LIP)){
+    const ed=d(pts[L_EYE],pts[R_EYE]);
+    const nl=d(pts[NOSE_BRIDGE],pts[NOSE_TIP]);
+    const mh=d(pts[UPPER_LIP],pts[LOWER_LIP]);
+    r.eyeToNose=nl?ed/nl:0;
+    r.noseToMouth=mh?nl/mh:0;
+    const fw=d(pts[L_CHEEK],pts[R_CHEEK]);
+    r.eyeToFace=fw?ed/fw:0;
+  }
+  return ratioScore(r);
+}
+function ratioScore(r){
+  const vals=[
+    r.faceRatio?Math.max(0,100-Math.abs(r.faceRatio-0.72)/0.72*150):null,
+    r.eyeToNose?Math.max(0,100-Math.abs(r.eyeToNose-1.6)/1.6*100):null,
+    r.noseToMouth?Math.max(0,100-Math.abs(r.noseToMouth-2)/2*100):null,
+    r.eyeToFace?Math.max(0,100-Math.abs(r.eyeToFace-0.46)/0.46*150):null,
+  ].filter(v=>v!==null);
+  return vals.length?vals.reduce((a,b)=>a+b,0)/vals.length:50;
+}

js/ui.js ADDED Viewed

	@@ -0,0 +1,139 @@

+import { initModel, detectLandmarks } from './mediapipe.js';
+import { computeAll } from './scoring.js';
+let currentImage = null;
+export function initUI() {
+  const upload = document.getElementById('uploadArea');
+  const input = document.getElementById('fileInput');
+  const btn = document.getElementById('analyzeBtn');
+  const status = document.getElementById('status');
+  status.textContent = 'Loading AI model...';
+  upload.onclick = () => input.click();
+  upload.ondragover = e => { e.preventDefault(); upload.style.borderColor = '#7c5cfc'; };
+  upload.ondragleave = () => { upload.style.borderColor = '#444'; };
+  upload.ondrop = e => {
+    e.preventDefault();
+    if (e.dataTransfer.files[0]) handleFile(e.dataTransfer.files[0]);
+  };
+  input.onchange = () => { if (input.files[0]) handleFile(input.files[0]); };
+  btn.onclick = analyze;
+  initModel().then(() => {
+    status.textContent = 'Ready. Upload a photo.';
+    btn.disabled = false;
+  }).catch(e => {
+    status.textContent = 'Failed to load model: ' + e.message;
+  });
+}
+function handleFile(file) {
+  if (!file || !file.type.startsWith('image/')) return;
+  const reader = new FileReader();
+  reader.onload = e => {
+    const img = new Image();
+    img.onload = () => {
+      currentImage = img;
+      document.getElementById('preview').src = e.target.result;
+      document.getElementById('preview').style.display = 'block';
+      document.getElementById('uploadPrompt').style.display = 'none';
+      document.getElementById('analyzeBtn').disabled = false;
+      document.getElementById('results').style.display = 'none';
+    };
+    img.src = e.target.result;
+  };
+  reader.readAsDataURL(file);
+}
+async function analyze() {
+  if (!currentImage) return;
+  const status = document.getElementById('status');
+  const btn = document.getElementById('analyzeBtn');
+  status.textContent = 'Analyzing...';
+  btn.disabled = true;
+  try {
+    const landmarks = detectLandmarks(currentImage);
+    if (!landmarks) {
+      status.textContent = 'No face detected. Try a front-facing photo.';
+      btn.disabled = false;
+      return;
+    }
+    const scores = computeAll(landmarks);
+    if (!scores) {
+      status.textContent = 'Could not compute scores.';
+      btn.disabled = false;
+      return;
+    }
+    drawLandmarks(currentImage, landmarks);
+    displayScores(scores);
+    status.textContent = `Done — ${landmarks.length} landmarks detected.`;
+  } catch (e) {
+    status.textContent = 'Error: ' + e.message;
+  }
+  btn.disabled = false;
+}
+function drawLandmarks(img, landmarks) {
+  const canvas = document.getElementById('resultCanvas');
+  canvas.width = img.width;
+  canvas.height = img.height;
+  canvas.style.display = 'block';
+  const ctx = canvas.getContext('2d');
+  ctx.drawImage(img, 0, 0);
+  const conns = [
+    [33,133],[133,157],[157,158],[158,159],[159,160],[160,161],[161,173],[173,246],[246,33],
+    [362,263],[263,387],[387,386],[386,385],[385,384],[384,398],[398,466],[466,380],[380,362],
+    [46,53],[53,52],[52,65],[65,66],[66,70],[70,105],[105,107],[107,46],
+    [276,283],[283,282],[282,295],[295,296],[296,300],[300,334],[334,336],[336,276],
+    [61,146],[146,91],[91,181],[181,84],[84,17],[17,314],[314,405],[405,321],[321,375],[375,291],[291,409],[409,270],[270,269],[269,0],
+    [10,338],[338,297],[297,332],[332,284],[284,251],[251,389],[389,356],[356,454],[454,323],[323,361],[361,288],[288,397],[397,365],[365,379],[379,378],[378,400],[400,377],[377,152],[152,148],[148,176],[176,149],[149,150],[150,136],[136,172],[172,58],[58,132],[132,93],[93,234],[234,127],[127,162],[162,21],[21,54],[54,103],[103,67],[67,109],[109,10],
+  ];
+  ctx.strokeStyle = '#00ff88';
+  ctx.lineWidth = 2;
+  for (const [i, j] of conns) {
+    if (i < landmarks.length && j < landmarks.length) {
+      ctx.beginPath();
+      ctx.moveTo(landmarks[i].x * img.width, landmarks[i].y * img.height);
+      ctx.lineTo(landmarks[j].x * img.width, landmarks[j].y * img.height);
+      ctx.stroke();
+    }
+  }
+  ctx.fillStyle = '#ff4444';
+  for (const lm of landmarks) {
+    ctx.beginPath();
+    ctx.arc(lm.x * img.width, lm.y * img.height, 2, 0, 2 * Math.PI);
+    ctx.fill();
+  }
+}
+function displayScores(s) {
+  document.getElementById('results').style.display = 'block';
+  document.getElementById('overallScore').textContent = s.overall;
+  const items = [
+    ['Facial Symmetry', s.symmetry],
+    ['Facial Proportions', s.proportions],
+    ['Eye Symmetry', s.eyeSymmetry],
+    ['Eyebrow Symmetry', s.browSymmetry],
+    ['Lip Fullness', s.lipFullness],
+    [`Chin (${s.chinShape})`, s.chinScore],
+  ];
+  const grid = document.getElementById('scoreGrid');
+  grid.innerHTML = '';
+  for (const [label, val] of items) {
+    const div = document.createElement('div');
+    div.className = 'score';
+    const color = val >= 70 ? '#4ade80' : val >= 50 ? '#facc15' : '#f87171';
+    div.innerHTML = `<span>${label}</span><span style="color:${color};font-weight:700;font-size:1.2em">${val}</span>`;
+    grid.appendChild(div);
+  }
+}

style.css CHANGED Viewed

@@ -1,28 +1,7 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
-}

+body { font-family: system-ui, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; background: #111; color: #eee; }
+#uploadArea { border: 2px dashed #444; padding: 30px; text-align: center; cursor: pointer; margin: 16px 0; }
+#uploadArea:hover { border-color: #7c5cfc; }
+img, canvas { max-width: 100%; }
+button { padding: 10px 24px; font-size: 16px; cursor: pointer; }
+.score { display: flex; justify-content: space-between; padding: 8px 12px; background: #222; margin: 4px 0; border-radius: 6px; }
+#status { margin-top: 8px; color: #888; }