Spaces:

mistpe
/

holistic

Running

App Files Files Community

mistpe commited on Oct 19, 2024

Commit

7183b21

verified ·

1 Parent(s): 7bc6818

Upload 4 files

Browse files

Files changed (4) hide show

holistic.css +132 -0
holistic.html +51 -0
holistic.js +260 -0
index.html +15 -0

holistic.css ADDED Viewed

	@@ -0,0 +1,132 @@

+@keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  .abs {
+    position: absolute;
+  }
+  a {
+    color: white;
+    text-decoration: none;
+  }
+  a:hover {
+    color: lightblue;
+  }
+  body {
+    bottom: 0;
+    font-family: "Titillium Web", sans-serif;
+    color: white;
+    left: 0;
+    margin: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform-origin: 0px 0px;
+    overflow: hidden;
+  }
+  .container {
+    position: absolute;
+    background-color: #596e73;
+    width: 100%;
+    max-height: 100%;
+  }
+  .input_video {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+  .input_video.selfie {
+    transform: scale(-1, 1);
+  }
+  .input_image {
+    position: absolute;
+  }
+  .canvas-container {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+  }
+  .output_canvas {
+    max-width: 100%;
+    display: block;
+    position: relative;
+    left: 0;
+    top: 0;
+  }
+  .logo {
+    bottom: 10px;
+    right: 20px;
+  }
+  .logo .title {
+    color: white;
+    font-size: 28px;
+  }
+  .logo .subtitle {
+    position: relative;
+    color: white;
+    font-size: 10px;
+    left: -30px;
+    top: 20px;
+  }
+  .control-panel {
+    position: absolute;
+    left: 10px;
+    top: 10px;
+  }
+  .loading {
+    display: flex;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    align-items: center;
+    backface-visibility: hidden;
+    justify-content: center;
+    opacity: 1;
+    transition: opacity 1s;
+  }
+  .loading .message {
+    font-size: x-large;
+  }
+  .loading .spinner {
+    position: absolute;
+    width: 120px;
+    height: 120px;
+    animation: spin 1s linear infinite;
+    border: 32px solid #bebebe;
+    border-top: 32px solid #3498db;
+    border-radius: 50%;
+  }
+  .loaded .loading {
+    opacity: 0;
+  }
+  .shoutout {
+    left: 0;
+    right: 0;
+    bottom: 40px;
+    text-align: center;
+    font-size: 24px;
+    position: absolute;
+  }

holistic.html ADDED Viewed

	@@ -0,0 +1,51 @@

+<!--
+    MediaPipe Holistic
+    https://google.github.io/mediapipe/solutions/holistic.html
+-->
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>演示</title>
+    <link rel="stylesheet" type="text/css" href="holistic.css" crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils@0.6/control_utils.css" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils@0.3/camera_utils.js" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils@0.6/control_utils.js" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils@0.3/drawing_utils.js" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/holistic@0.5/holistic.js" crossorigin="anonymous"></script>
+</head>
+<body>
+    <div class="container">
+        <video class="input_video"></video>
+        <div class="canvas-container">
+        <canvas class="output_canvas" width="1280px" height="720px">
+        </canvas>
+        </div>
+        <div class="loading">
+          <div class="spinner"></div>
+          <div class="message">
+            加载中
+          </div>
+        </div>
+        <a class="abs logo" href="http://www.mediapipe.dev" target="_blank">
+          <div style="display: flex;align-items: center;bottom: 0;right: 10px;">
+            <img class="logo" src="./img/logo_white.png" alt="" style="
+              height: 50px;">
+            <span class="title">MediaPipe</span>
+          </div>
+        </a>
+        <div class="shoutout">
+          <div>
+            <a href="https://solutions.mediapipe.dev/holistic" target="_blank">
+              点击这里获取更多信息
+            </a>
+          </div>
+        </div>
+      </div>
+      <div class="control-panel">
+    </div>
+</body>
+</html>
+<script type="module" src="holistic.js"></script>

holistic.js ADDED Viewed

	@@ -0,0 +1,260 @@

+import DeviceDetector from "https://cdn.skypack.dev/device-detector-js@2.2.10";
+// 用法: testSupport({client?: string, os?: string}[])
+// Client 和 os 是正则表达式。
+// 参见: https://cdn.jsdelivr.net/npm/device-detector-js@2.2.10/README.md
+// 了解 client 和 os 的合法值
+testSupport([
+    { client: 'Chrome' },
+]);
+function testSupport(supportedDevices) {
+    const deviceDetector = new DeviceDetector();
+    const detectedDevice = deviceDetector.parse(navigator.userAgent);
+    let isSupported = false;
+    for (const device of supportedDevices) {
+        if (device.client !== undefined) {
+            const re = new RegExp(`^${device.client}$`);
+            if (!re.test(detectedDevice.client.name)) {
+                continue;
+            }
+        }
+        if (device.os !== undefined) {
+            const re = new RegExp(`^${device.os}$`);
+            if (!re.test(detectedDevice.os.name)) {
+                continue;
+            }
+        }
+        isSupported = true;
+        break;
+    }
+    if (!isSupported) {
+        alert(`此演示在 ${detectedDevice.client.name}/${detectedDevice.os.name} 上运行时 ` +
+            `目前不能很好地支持，继续使用需自担风险。`);
+    }
+}
+const controls = window;
+const mpHolistic = window;
+const drawingUtils = window;
+const config = { locateFile: (file) => {
+        return `https://cdn.jsdelivr.net/npm/@mediapipe/holistic@` +
+            `${mpHolistic.VERSION}/${file}`;
+    } };
+// 我们的输入帧将来自这里。
+const videoElement = document.getElementsByClassName('input_video')[0];
+const canvasElement = document.getElementsByClassName('output_canvas')[0];
+const controlsElement = document.getElementsByClassName('control-panel')[0];
+const canvasCtx = canvasElement.getContext('2d');
+// 我们稍后会将这个添加到控制面板中，但我们会在这里保存它，
+// 以便每次图形运行时都可以调用 tick()。
+const fpsControl = new controls.FPS();
+// 优化：在隐藏动画完成后关闭动画旋转器。
+const spinner = document.querySelector('.loading');
+spinner.ontransitionend = () => {
+    spinner.style.display = 'none';
+};
+function removeElements(landmarks, elements) {
+    for (const element of elements) {
+        delete landmarks[element];
+    }
+}
+function removeLandmarks(results) {
+    if (results.poseLandmarks) {
+        removeElements(results.poseLandmarks, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 15, 16, 17, 18, 19, 20, 21, 22]);
+    }
+}
+function connect(ctx, connectors) {
+    const canvas = ctx.canvas;
+    for (const connector of connectors) {
+        const from = connector[0];
+        const to = connector[1];
+        if (from && to) {
+            if (from.visibility && to.visibility &&
+                (from.visibility < 0.1 || to.visibility < 0.1)) {
+                continue;
+            }
+            ctx.beginPath();
+            ctx.moveTo(from.x * canvas.width, from.y * canvas.height);
+            ctx.lineTo(to.x * canvas.width, to.y * canvas.height);
+            ctx.stroke();
+        }
+    }
+}
+let activeEffect = 'mask';
+function onResults(results) {
+    // 隐藏旋转器。
+    document.body.classList.add('loaded');
+    // 移除我们不想绘制的关键点。
+    removeLandmarks(results);
+    // 更新帧率。
+    fpsControl.tick();
+    // 绘制叠加层。
+    canvasCtx.save();
+    canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
+    if (results.segmentationMask) {
+        canvasCtx.drawImage(results.segmentationMask, 0, 0, canvasElement.width, canvasElement.height);
+        // 仅覆盖现有像素。
+        if (activeEffect === 'mask' || activeEffect === 'both') {
+            canvasCtx.globalCompositeOperation = 'source-in';
+            // 这可以是颜色、纹理或其他...
+            canvasCtx.fillStyle = '#00FF007F';
+            canvasCtx.fillRect(0, 0, canvasElement.width, canvasElement.height);
+        }
+        else {
+            canvasCtx.globalCompositeOperation = 'source-out';
+            canvasCtx.fillStyle = '#0000FF7F';
+            canvasCtx.fillRect(0, 0, canvasElement.width, canvasElement.height);
+        }
+        // 仅覆盖缺失的像素。
+        canvasCtx.globalCompositeOperation = 'destination-atop';
+        canvasCtx.drawImage(results.image, 0, 0, canvasElement.width, canvasElement.height);
+        canvasCtx.globalCompositeOperation = 'source-over';
+    }
+    else {
+        canvasCtx.drawImage(results.image, 0, 0, canvasElement.width, canvasElement.height);
+    }
+    // 连接肘部到手部。首先做这个，这样其他图形将绘制在这些标记之上。
+    canvasCtx.lineWidth = 5;
+    if (results.poseLandmarks) {
+        if (results.rightHandLandmarks) {
+            canvasCtx.strokeStyle = 'white';
+            connect(canvasCtx, [[
+                    results.poseLandmarks[mpHolistic.POSE_LANDMARKS.RIGHT_ELBOW],
+                    results.rightHandLandmarks[0]
+                ]]);
+        }
+        if (results.leftHandLandmarks) {
+            canvasCtx.strokeStyle = 'white';
+            connect(canvasCtx, [[
+                    results.poseLandmarks[mpHolistic.POSE_LANDMARKS.LEFT_ELBOW],
+                    results.leftHandLandmarks[0]
+                ]]);
+        }
+    }
+    // 姿势...
+    drawingUtils.drawConnectors(canvasCtx, results.poseLandmarks, mpHolistic.POSE_CONNECTIONS, { color: 'white' });
+    drawingUtils.drawLandmarks(canvasCtx, Object.values(mpHolistic.POSE_LANDMARKS_LEFT)
+        .map(index => results.poseLandmarks[index]), { visibilityMin: 0.65, color: 'white', fillColor: 'rgb(255,138,0)' });
+    drawingUtils.drawLandmarks(canvasCtx, Object.values(mpHolistic.POSE_LANDMARKS_RIGHT)
+        .map(index => results.poseLandmarks[index]), { visibilityMin: 0.65, color: 'white', fillColor: 'rgb(0,217,231)' });
+    // 手...
+    drawingUtils.drawConnectors(canvasCtx, results.rightHandLandmarks, mpHolistic.HAND_CONNECTIONS, { color: 'white' });
+    drawingUtils.drawLandmarks(canvasCtx, results.rightHandLandmarks, {
+        color: 'white',
+        fillColor: 'rgb(0,217,231)',
+        lineWidth: 2,
+        radius: (data) => {
+            return drawingUtils.lerp(data.from.z, -0.15, .1, 10, 1);
+        }
+    });
+    drawingUtils.drawConnectors(canvasCtx, results.leftHandLandmarks, mpHolistic.HAND_CONNECTIONS, { color: 'white' });
+    drawingUtils.drawLandmarks(canvasCtx, results.leftHandLandmarks, {
+        color: 'white',
+        fillColor: 'rgb(255,138,0)',
+        lineWidth: 2,
+        radius: (data) => {
+            return drawingUtils.lerp(data.from.z, -0.15, .1, 10, 1);
+        }
+    });
+    // 面部...
+    drawingUtils.drawConnectors(canvasCtx, results.faceLandmarks, mpHolistic.FACEMESH_TESSELATION, { color: '#C0C0C070', lineWidth: 1 });
+    drawingUtils.drawConnectors(canvasCtx, results.faceLandmarks, mpHolistic.FACEMESH_RIGHT_EYE, { color: 'rgb(0,217,231)' });
+    drawingUtils.drawConnectors(canvasCtx, results.faceLandmarks, mpHolistic.FACEMESH_RIGHT_EYEBROW, { color: 'rgb(0,217,231)' });
+    drawingUtils.drawConnectors(canvasCtx, results.faceLandmarks, mpHolistic.FACEMESH_LEFT_EYE, { color: 'rgb(255,138,0)' });
+    drawingUtils.drawConnectors(canvasCtx, results.faceLandmarks, mpHolistic.FACEMESH_LEFT_EYEBROW, { color: 'rgb(255,138,0)' });
+    drawingUtils.drawConnectors(canvasCtx, results.faceLandmarks, mpHolistic.FACEMESH_FACE_OVAL, { color: '#E0E0E0', lineWidth: 5 });
+    drawingUtils.drawConnectors(canvasCtx, results.faceLandmarks, mpHolistic.FACEMESH_LIPS, { color: '#E0E0E0', lineWidth: 5 });
+    canvasCtx.restore();
+}
+const holistic = new mpHolistic.Holistic(config);
+holistic.onResults(onResults);
+// 呈现一个控制面板，用户可以通过它操作解决方案选项。
+new controls
+    .ControlPanel(controlsElement, {
+    selfieMode: true,
+    modelComplexity: 1,
+    smoothLandmarks: true,
+    enableSegmentation: false,
+    smoothSegmentation: true,
+    minDetectionConfidence: 0.5,
+    minTrackingConfidence: 0.5,
+    effect: 'background',
+})
+    .add([
+    new controls.StaticText({ title: 'MediaPipe 全身姿态检测' }),
+    fpsControl,
+    new controls.Toggle({ title: '自拍模式', field: 'selfieMode' }),
+    new controls.SourcePicker({
+        onSourceChanged: () => {
+            // 重置，因为在源更改之间重置时，姿势会给出更好的结果。
+            holistic.reset();
+        },
+        onFrame: async (input, size) => {
+            const aspect = size.height / size.width;
+            let width, height;
+            if (window.innerWidth > window.innerHeight) {
+                height = window.innerHeight;
+                width = height / aspect;
+            }
+            else {
+                width = window.innerWidth;
+                height = width * aspect;
+            }
+            canvasElement.width = width;
+            canvasElement.height = height;
+            await holistic.send({ image: input });
+        },
+    }),
+    new controls.Slider({
+        title: '模型复杂度',
+        field: 'modelComplexity',
+        discrete: ['轻量', '完整', '重度'],
+    }),
+    new controls.Toggle({ title: '平滑关键点', field: 'smoothLandmarks' }),
+    new controls.Toggle({ title: '启用分割', field: 'enableSegmentation' }),
+    new controls.Toggle({ title: '平滑分割', field: 'smoothSegmentation' }),
+    new controls.Slider({
+        title: '最小检测置信度',
+        field: 'minDetectionConfidence',
+        range: [0, 1],
+        step: 0.01
+    }),
+    new controls.Slider({
+        title: '最小跟踪置信度',
+        field: 'minTrackingConfidence',
+        range: [0, 1],
+        step: 0.01
+    }),
+    new controls.Slider({
+        title: '效果',
+        field: 'effect',
+        discrete: { 'background': '背景', 'mask': '前景' },
+    }),
+])
+    .on(x => {
+    const options = x;
+    videoElement.classList.toggle('selfie', options.selfieMode);
+    activeEffect = x['effect'];
+    holistic.setOptions(options);
+});

index.html ADDED Viewed

	@@ -0,0 +1,15 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Redirecting to Holistic Demo</title>
+    <script>
+        window.location.href = "holistic.html";
+    </script>
+</head>
+<body>
+    <p>If you are not redirected automatically, please <a href="holistic.html">click here</a>.</p>
+</body>
+</html>