Spaces:

asterioskryos
/

face-analysis

Running

App Files Files Community

asterioskryos commited on Jul 11

Commit

0150ef7

verified ·

1 Parent(s): a258da9

React face analysis app

Browse files

Files changed (9) hide show

assets/index-B3zpsVgk.css +1 -0
assets/index-Bv-INYt6.js +0 -0
favicon.svg +1 -0
icons.svg +24 -0
index.html +13 -32
js/mediapipe.js +0 -24
js/scoring.js +0 -109
js/ui.js +0 -139
style.css +0 -7

assets/index-B3zpsVgk.css ADDED Viewed

	@@ -0,0 +1 @@


1	+ *{box-sizing:border-box;margin:0;padding:0}body{color:#e0e0e0;background:#0f0f13;min-height:100vh;font-family:system-ui,-apple-system,sans-serif}#root{max-width:900px;margin:0 auto;padding:24px}

assets/index-Bv-INYt6.js ADDED Viewed

The diff for this file is too large to render. See raw diff

favicon.svg ADDED Viewed

icons.svg ADDED Viewed

index.html CHANGED Viewed

@@ -1,34 +1,15 @@
-<!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>

+<!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Face Analysis</title>
+    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.18/wasm/vision_bundle.js" crossorigin="anonymous"></script>
+    <script type="module" crossorigin src="/assets/index-Bv-INYt6.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-B3zpsVgk.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
 </html>

js/mediapipe.js DELETED Viewed

@@ -1,24 +0,0 @@
-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 DELETED Viewed

@@ -1,109 +0,0 @@
-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 DELETED Viewed

@@ -1,139 +0,0 @@
-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 DELETED Viewed

@@ -1,7 +0,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; }