Spaces:

YOUSEF2434
/

Computer-Vision-Lab

Paused

File size: 13,659 Bytes

a566fb0

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>MediaPipe Hands + FaceMesh (Bigger + Better)</title>

  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils@0.3.1675466862/camera_utils.js" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands@0.4.1675469240/hands.js" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh@0.4.1633559619/face_mesh.js" crossorigin="anonymous"></script>

  <style>

    :root { color-scheme: dark; }

    html, body { margin: 0; width: 100%; height: 100%; background: #000; overflow: hidden; }

    #video { position: absolute; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; z-index: -1; }

    #canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; background: #000; }



    #hud{

      position:fixed; left:14px; top:14px; z-index:10; display:none;

      padding:10px 12px; border-radius:10px;

      background:rgba(18,18,18,0.72); border:1px solid rgba(255,255,255,0.10);

      backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);

      box-shadow:0 10px 24px rgba(0,0,0,0.45);

      font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

      line-height:1.15; user-select:none; min-width: 190px;

    }

    .row{ display:flex; justify-content:space-between; gap:10px; }

    .k{ color:rgba(255,255,255,0.65); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; }

    .v{ font-size:18px; font-weight:800; }



    #start{

      position:fixed; inset:0; margin:auto; z-index:20;

      width:min(380px, calc(100vw - 36px)); height:56px;

      border:0; border-radius:999px; cursor:pointer;

      font-weight:800; letter-spacing:0.08em; text-transform:uppercase;

      color:#001114;

      background:linear-gradient(135deg, #00ffff 0%, #00d4ff 45%, #00ff9a 100%);

      box-shadow:0 0 0 1px rgba(0,255,255,0.18), 0 18px 44px rgba(0,255,255,0.18);

    }

  </style>
</head>

<body>
  <video id="video" playsinline muted></video>
  <canvas id="canvas"></canvas>

  <div id="hud">
    <div class="row"><div class="k">Render</div><div id="fpsR" class="v">0</div></div>
    <div class="row"><div class="k">Hands</div><div id="fpsH" class="v">0</div></div>
    <div class="row"><div class="k">Face</div><div id="fpsF" class="v">0</div></div>
    <div class="row"><div class="k">Face</div><div id="faceOn" class="v" style="font-size:14px;">OFF</div></div>
  </div>

  <button id="start">Start</button>

  <script>

    const HANDS_BASE = "https://cdn.jsdelivr.net/npm/@mediapipe/hands@0.4.1675469240/";

    const FACE_BASE  = "https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh@0.4.1633559619/";



    // Camera input (keep low for speed)

    const CAM_W = 320, CAM_H = 240;



    // Make face/hands BIGGER (visual-only scaling around their own centers)

    // This does NOT change tracking, only how we draw it.

    const HAND_SCALE = 1.35;

    const FACE_SCALE = 1.25;



    // Visual thickness/size (also makes them look bigger/better)

    const HAND_LINE_W = 3.5;

    const HAND_POINT  = 4;

    const FACE_POINT  = 1.4;



    // Scheduler rates

    const HANDS_HZ = 24;

    const FACE_HZ  = 10;



    // Model options

    const MAX_HANDS = 2;

    const HANDS_COMPLEXITY = 0;

    const FACE_REFINE = false; // set true for nicer eyes/lips (slower)



    const videoEl = document.getElementById('video');

    const canvasEl = document.getElementById('canvas');

    const ctx = canvasEl.getContext('2d', { alpha: false, desynchronized: true });



    function resizeCanvas() {

      const dpr = Math.min(window.devicePixelRatio || 1, 1.5);

      canvasEl.width = Math.floor(window.innerWidth * dpr);

      canvasEl.height = Math.floor(window.innerHeight * dpr);

      canvasEl.style.width = window.innerWidth + 'px';

      canvasEl.style.height = window.innerHeight + 'px';

      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);

      clearBlack();

    }

    function clearBlack() {

      ctx.fillStyle = '#000000';

      ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);

    }

    window.addEventListener('resize', resizeCanvas, { passive: true });

    resizeCanvas();



    // Contain mapping (camera aspect to screen)

    function getViewRect() {

      const cw = window.innerWidth, ch = window.innerHeight;

      const camAR = CAM_W / CAM_H;

      const canvasAR = cw / ch;

      let vw, vh, vx, vy;

      if (canvasAR > camAR) { vh = ch; vw = vh * camAR; vx = (cw - vw) * 0.5; vy = 0; }

      else { vw = cw; vh = vw / camAR; vx = 0; vy = (ch - vh) * 0.5; }

      return { x: vx, y: vy, w: vw, h: vh };

    }

    function mapLM(lm, view) {

      return { x: view.x + lm.x * view.w, y: view.y + lm.y * view.h };

    }



    // Compute centroid in pixel space (for visual scaling)

    function centroidPx(landmarks, view) {

      let sx = 0, sy = 0;

      const n = landmarks.length;

      for (let i = 0; i < n; i++) {

        const p = mapLM(landmarks[i], view);

        sx += p.x; sy += p.y;

      }

      return { x: sx / n, y: sy / n };

    }



    function drawPointsScaled(landmarks, color, sizePx, view, scale) {

      if (!landmarks || !landmarks.length) return;

      const c = centroidPx(landmarks, view);

      ctx.fillStyle = color;

      ctx.beginPath();

      for (let i = 0, n = landmarks.length; i < n; i++) {

        const p = mapLM(landmarks[i], view);

        const x = c.x + (p.x - c.x) * scale;

        const y = c.y + (p.y - c.y) * scale;

        ctx.rect(x, y, sizePx, sizePx);

      }

      ctx.fill();

    }



    function drawEdgesScaled(landmarks, edges, color, lineWidth, view, scale) {

      if (!landmarks || !landmarks.length) return;

      const c = centroidPx(landmarks, view);

      ctx.strokeStyle = color;

      ctx.lineWidth = lineWidth;

      ctx.beginPath();

      for (let i = 0; i < edges.length; i++) {

        const a = edges[i][0], b = edges[i][1];

        const p0 = mapLM(landmarks[a], view);

        const p1 = mapLM(landmarks[b], view);

        const x0 = c.x + (p0.x - c.x) * scale;

        const y0 = c.y + (p0.y - c.y) * scale;

        const x1 = c.x + (p1.x - c.x) * scale;

        const y1 = c.y + (p1.y - c.y) * scale;

        ctx.moveTo(x0, y0);

        ctx.lineTo(x1, y1);

      }

      ctx.stroke();

    }



    // Hands skeleton (21 landmarks)

    const HAND_EDGES = [

      [0,1],[1,2],[2,3],[3,4],

      [0,5],[5,6],[6,7],[7,8],

      [0,9],[9,10],[10,11],[11,12],

      [0,13],[13,14],[14,15],[15,16],

      [0,17],[17,18],[18,19],[19,20],

      [5,9],[9,13],[13,17]

    ];



    // ===== Smoothing + interpolation (normalized coords) =====

    const EMA_HANDS = 0.65;

    const EMA_FACE  = 0.45;



    function cloneLms(lms) {

      if (!lms) return null;

      const out = new Array(lms.length);

      for (let i = 0; i < lms.length; i++) out[i] = { x: lms[i].x, y: lms[i].y, z: lms[i].z };

      return out;

    }

    function emaUpdate(prev, next, alpha) {

      if (!next) return null;

      if (!prev || prev.length !== next.length) return cloneLms(next);

      const out = new Array(next.length);

      for (let i = 0; i < next.length; i++) {

        const p = prev[i], n = next[i];

        out[i] = { x: p.x + (n.x - p.x) * alpha, y: p.y + (n.y - p.y) * alpha, z: 0 };

      }

      return out;

    }

    function lerpFrame(a, b, t) {

      if (!a) return null;

      if (!b || a.length !== b.length) return a;

      const out = new Array(a.length);

      for (let i = 0; i < a.length; i++) {

        out[i] = { x: a[i].x + (b[i].x - a[i].x) * t, y: a[i].y + (b[i].y - a[i].y) * t, z: 0 };

      }

      return out;

    }



    let prevLH=null, currLH=null, prevRH=null, currRH=null;

    let prevFace=null, currFace=null;



    let prevHandsTs=0, lastHandsTs=0;

    let prevFaceTs=0, lastFaceTs=0;



    // HUD FPS

    const hudEl = document.getElementById('hud');

    const fpsREl = document.getElementById('fpsR');

    const fpsHEl = document.getElementById('fpsH');

    const fpsFEl = document.getElementById('fpsF');

    const faceOnEl = document.getElementById('faceOn');



    let rFrames = 0, rLastT = performance.now();

    function tickRenderFps() {

      rFrames++;

      const now = performance.now();

      const dt = now - rLastT;

      if (dt >= 500) {

        fpsREl.textContent = String(Math.round((rFrames * 1000) / dt));

        rLastT = now; rFrames = 0;

      }

    }

    let hFrames = 0, hLastT = performance.now();

    function tickHandsFps() {

      hFrames++;

      const now = performance.now();

      const dt = now - hLastT;

      if (dt >= 900) {

        fpsHEl.textContent = String(Math.round((hFrames * 1000) / dt));

        hLastT = now; hFrames = 0;

      }

    }

    let fFrames = 0, fLastT = performance.now();

    function tickFaceFps() {

      fFrames++;

      const now = performance.now();

      const dt = now - fLastT;

      if (dt >= 1100) {

        fpsFEl.textContent = String(Math.round((fFrames * 1000) / dt));

        fLastT = now; fFrames = 0;

      }

    }



    function renderLoop() {

      clearBlack();

      const view = getViewRect();

      const now = performance.now();



      const hdt = Math.max(1, lastHandsTs - prevHandsTs);

      const ht = Math.min(1, Math.max(0, (now - lastHandsTs) / hdt));

      const drawLH = lerpFrame(prevLH, currLH, ht);

      const drawRH = lerpFrame(prevRH, currRH, ht);



      const fdt = Math.max(1, lastFaceTs - prevFaceTs);

      const ft = Math.min(1, Math.max(0, (now - lastFaceTs) / fdt));

      const drawFace = lerpFrame(prevFace, currFace, ft);



      if (drawLH) {

        drawEdgesScaled(drawLH, HAND_EDGES, '#00ff00', HAND_LINE_W, view, HAND_SCALE);

        drawPointsScaled(drawLH, '#00ff00', HAND_POINT, view, HAND_SCALE);

      }

      if (drawRH) {

        drawEdgesScaled(drawRH, HAND_EDGES, '#ffff00', HAND_LINE_W, view, HAND_SCALE);

        drawPointsScaled(drawRH, '#ffff00', HAND_POINT, view, HAND_SCALE);

      }



      if (drawFace) {

        drawPointsScaled(drawFace, '#ff00ff', FACE_POINT, view, FACE_SCALE);

      }



      tickRenderFps();

      requestAnimationFrame(renderLoop);

    }



    // ===== Models =====

    const hands = new Hands({ locateFile: (f) => HANDS_BASE + f });

    hands.setOptions({

      maxNumHands: MAX_HANDS,

      modelComplexity: HANDS_COMPLEXITY,

      minDetectionConfidence: 0.5,

      minTrackingConfidence: 0.5,

    });

    hands.onResults((res) => {

      prevHandsTs = lastHandsTs;

      lastHandsTs = performance.now();

      tickHandsFps();



      let left = null, right = null;

      const lms = res.multiHandLandmarks || [];

      const hd  = res.multiHandedness || [];

      for (let i = 0; i < lms.length; i++) {

        const label = hd[i]?.label;

        if (label === 'Left') left = lms[i];

        else if (label === 'Right') right = lms[i];

      }



      prevLH = currLH; currLH = emaUpdate(currLH, left, EMA_HANDS);

      prevRH = currRH; currRH = emaUpdate(currRH, right, EMA_HANDS);

    });



    const faceMesh = new FaceMesh({ locateFile: (f) => FACE_BASE + f });

    faceMesh.setOptions({

      maxNumFaces: 1,

      refineLandmarks: FACE_REFINE,

      minDetectionConfidence: 0.5,

      minTrackingConfidence: 0.5,

    });

    faceMesh.onResults((res) => {

      prevFaceTs = lastFaceTs;

      lastFaceTs = performance.now();

      tickFaceFps();



      const face = res.multiFaceLandmarks?.[0] || null;

      prevFace = currFace;

      currFace = emaUpdate(currFace, face, EMA_FACE);



      faceOnEl.textContent = face ? "ON" : "OFF";

      faceOnEl.style.color = face ? "#00ff80" : "#ff3b3b";

    });



    // ===== Deterministic scheduler =====

    let busy = false;

    let lastHandsRun = 0, lastFaceRun = 0;

    let preferFaceNext = true;



    function due(now, lastT, hz) { return (now - lastT) >= (1000 / hz); }



    async function runScheduled(now) {

      if (busy) return;



      const handsDue = due(now, lastHandsRun, HANDS_HZ);

      const faceDue  = due(now, lastFaceRun,  FACE_HZ);



      let run = null;

      if (handsDue && !faceDue) run = 'hands';

      else if (!handsDue && faceDue) run = 'face';

      else if (handsDue && faceDue) run = (preferFaceNext ? 'face' : 'hands');

      else return;



      busy = true;

      try {

        if (run === 'hands') {

          lastHandsRun = now;

          preferFaceNext = true;

          await hands.send({ image: videoEl });

        } else {

          lastFaceRun = now;

          preferFaceNext = false;

          await faceMesh.send({ image: videoEl });

        }

      } finally {

        busy = false;

      }

    }



    const camera = new Camera(videoEl, {

      width: CAM_W,

      height: CAM_H,

      onFrame: async () => { await runScheduled(performance.now()); }

    });



    document.getElementById('start').addEventListener('click', async () => {

      document.getElementById('start').style.display = 'none';

      hudEl.style.display = 'block';

      clearBlack();



      const t = performance.now();

      prevHandsTs = lastHandsTs = t;

      prevFaceTs  = lastFaceTs  = t;



      lastHandsRun = t - 1000;

      lastFaceRun  = t - 1000;



      await camera.start();

      requestAnimationFrame(renderLoop);

    });

  </script>
</body>
</html>