Spaces:

oakerx
/

vanilla-js-portrait-matting

Running

App Files Files Community

oakerx commited on Feb 7, 2024

Commit

836cc89

•

1 Parent(s): 3a75a60

init

Browse files

Files changed (4) hide show

README.md +11 -8
index.html +14 -17
index.js +101 -61
style.css +44 -43

README.md CHANGED Viewed

@@ -1,13 +1,16 @@
 ---
-title: Transformers.js
-emoji: 🌐
-colorFrom: blue
-colorTo: yellow
 sdk: static
 pinned: false
-models:
-- Xenova/detr-resnet-50
-license: apache-2.0
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Vanilla Js Portrait Matting
+emoji: 🐠
+colorFrom: indigo
+colorTo: blue
 sdk: static
 pinned: false
 ---
+# Vanilla Js Portrait Matting
+Based [ZHKKKe/MODNet](https://github.com/ZHKKKe/MODNet) and [Transformers.js](https://huggingface.co/docs/transformers.js/index)
+Run: `npx live-server`
+Currently incompatible with Vite.

index.html CHANGED Viewed

@@ -1,29 +1,26 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
     <meta charset="UTF-8" />
     <link rel="stylesheet" href="style.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Transformers.js - Object Detection</title>
 </head>
 <body>
-    <h1>Object Detection w/ 🤗 Transformers.js</h1>
-    <label id="container" for="upload">
-        <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path fill="#000"
-                d="M3.5 24.3a3 3 0 0 1-1.9-.8c-.5-.5-.8-1.2-.8-1.9V2.9c0-.7.3-1.3.8-1.9.6-.5 1.2-.7 2-.7h18.6c.7 0 1.3.2 1.9.7.5.6.7 1.2.7 2v18.6c0 .7-.2 1.4-.7 1.9a3 3 0 0 1-2 .8H3.6Zm0-2.7h18.7V2.9H3.5v18.7Zm2.7-2.7h13.3c.3 0 .5 0 .6-.3v-.7l-3.7-5a.6.6 0 0 0-.6-.2c-.2 0-.4 0-.5.3l-3.5 4.6-2.4-3.3a.6.6 0 0 0-.6-.3c-.2 0-.4.1-.5.3l-2.7 3.6c-.1.2-.2.4 0 .7.1.2.3.3.6.3Z">
-            </path>
-        </svg>
-        Click to upload image
-        <label id="example">(or try example)</label>
-    </label>
-    <label id="status">Loading model...</label>
-    <input id="upload" type="file" accept="image/*" />
-    <script src="index.js" type="module"></script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
+<head><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
     <meta charset="UTF-8" />
     <link rel="stylesheet" href="style.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Portrait Matting demo</title>
 </head>
 <body>
+    <main class="container">
+        <label class="custom-file-select">
+            <input id="file-select" type="file" accept="image/*" />
+            select image
+        </label>
+        <p id="status"></p>
+        <div class="wrap">
+            <div id="image-container" class="left-column"></div>
+            <div id="output-container" class="right-column"></div>
+        </div>
+    </main>
+    <script src="./index.js" type="module"></script>
 </body>
 </html>

index.js CHANGED Viewed

@@ -1,79 +1,119 @@
-import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.10.1';
-// Since we will download the model from the Hugging Face Hub, we can skip the local model check
-env.allowLocalModels = false;
-// Reference the elements that we will need
 const status = document.getElementById('status');
-const fileUpload = document.getElementById('upload');
-const imageContainer = document.getElementById('container');
-const example = document.getElementById('example');
-const EXAMPLE_URL = 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/city-streets.jpg';
-// Create a new object detection pipeline
 status.textContent = 'Loading model...';
-const detector = await pipeline('object-detection', 'Xenova/detr-resnet-50');
 status.textContent = 'Ready';
-example.addEventListener('click', (e) => {
-    e.preventDefault();
-    detect(EXAMPLE_URL);
 });
-fileUpload.addEventListener('change', function (e) {
-    const file = e.target.files[0];
-    if (!file) {
-        return;
-    }
-    const reader = new FileReader();
-    // Set up a callback when the file is loaded
-    reader.onload = e2 => detect(e2.target.result);
-    reader.readAsDataURL(file);
-});
-// Detect objects in the image
-async function detect(img) {
-    imageContainer.innerHTML = '';
-    imageContainer.style.backgroundImage = `url(${img})`;
-    status.textContent = 'Analysing...';
-    const output = await detector(img, {
-        threshold: 0.5,
-        percentage: true,
-    });
-    status.textContent = '';
-    output.forEach(renderBox);
-}
-// Render a bounding box and label on the image
-function renderBox({ box, label }) {
-    const { xmax, xmin, ymax, ymin } = box;
-    // Generate a random color for the box
-    const color = '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, 0);
-    // Draw the box
-    const boxElement = document.createElement('div');
-    boxElement.className = 'bounding-box';
-    Object.assign(boxElement.style, {
-        borderColor: color,
-        left: 100 * xmin + '%',
-        top: 100 * ymin + '%',
-        width: 100 * (xmax - xmin) + '%',
-        height: 100 * (ymax - ymin) + '%',
-    })
-    // Draw label
-    const labelElement = document.createElement('span');
-    labelElement.textContent = label;
-    labelElement.className = 'bounding-box-label';
-    labelElement.style.backgroundColor = color;
-    boxElement.appendChild(labelElement);
-    imageContainer.appendChild(boxElement);
 }

+import { AutoProcessor, RawImage, AutoModel } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers';
 const status = document.getElementById('status');
+const fileSelect = document.getElementById('file-select');
+const imageContainer = document.getElementById('image-container');
+const outputContainer = document.getElementById('output-container');
 status.textContent = 'Loading model...';
+// Load model and processor
+const model = await AutoModel.from_pretrained('Xenova/modnet-onnx', { quantized: false });
+const processor = await AutoProcessor.from_pretrained('Xenova/modnet-onnx');
 status.textContent = 'Ready';
+// Load image from URL
+const url = 'https://images.pexels.com/photos/5965592/pexels-photo-5965592.jpeg?auto=compress&cs=tinysrgb&w=1024';
+function useRemoteImage(url) {
+  const image = document.createElement('img');
+  image.src = url;
+  imageContainer.appendChild(image);
+  start(url);
+}
+useRemoteImage(url)
+fileSelect.addEventListener('change', function (e) {
+  const file = e.target.files[0];
+  if (!file) {
+    return;
+  }
+  const reader = new FileReader();
+  // Set up a callback when the file is loaded
+  reader.onload = function (e2) {
+    status.textContent = 'Image loaded';
+    imageContainer.innerHTML = '';
+    outputContainer.innerHTML = '';
+    const image = document.createElement('img');
+    image.src = e2.target.result;
+    imageContainer.appendChild(image);
+    start(image.src);
+  };
+  reader.readAsDataURL(file);
 });
+async function start(source) {
+  status.textContent = 'processing';
+  console.log('start process')
+  const image = await RawImage.read(source);
+  // Process image
+  const { pixel_values: input } = await processor(image);
+  // Predict alpha matte
+  const { output } = await model({ input });
+  console.log('image', RawImage)
+  // Convert output tensor to RawImage
+  const matteImage = await RawImage.fromTensor(output[0].mul(255).to('uint8')).resize(image.width, image.height);
+  console.log('matteImage', matteImage, output)
+  status.textContent = 'Finish';
+  async function renderRawImage(image) {
+    let rawCanvas = await image.toCanvas();
+    const canvas = document.createElement('canvas');
+    outputContainer.appendChild(canvas); // 将新创建的 Canvas 添加到页面中
+    canvas.width = image.width;
+    canvas.height = image.height;
+    const ctx = canvas.getContext('2d');
+    ctx.drawImage(rawCanvas, 0, 0);
+  }
+  // renderRawImage(matteImage)
+  async function getForeground(rawImage, maskImage) {
+    const rawCanvas = rawImage.toCanvas();
+    const rawCtx = rawCanvas.getContext('2d');
+    const maskCanvas = maskImage.toCanvas();
+    const maskCtx = maskCanvas.getContext('2d');
+    const rawImageData = rawCtx.getImageData(0, 0, rawCanvas.width, rawCanvas.height);
+    const maskImageData = maskCtx.getImageData(0, 0, maskCanvas.width, maskCanvas.height);
+    for (let i = 0; i < rawImageData.data.length; i += 4) {
+      // 把灰度通道值（RGB 都一样，这里取 R），赋到原图的透明通道（每个像素的第 4 个值）
+      rawImageData.data[i + 3] = maskImageData.data[i];
+    }
+    rawCtx.putImageData(rawImageData, 0, 0);
+    return rawCanvas;
+  }
+  let foregroundCanvas = await getForeground(image, matteImage);
+  // 使用示例：
+  console.log('debug', foregroundCanvas);
+  // 模拟异步操作，确保在完成操作后才继续执行
+  foregroundCanvas.convertToBlob()
+    .then(function (blob) {
+      // 创建图片
+      let img = new Image();
+      // 创建 blob URL 并设置为图片的 src
+      img.src = URL.createObjectURL(blob);
+      // 将图片添加到 body 中或者其他 HTML 元素
+      outputContainer.appendChild(img);
+    })
+    .catch(function (error) {
+      // 捕获和处理 blob 创建过程中可能出现的错误
+      console.error("Blob creation error: ", error);
+    });
 }

style.css CHANGED Viewed

@@ -1,76 +1,77 @@
-* {
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-    font-family: sans-serif;
-}
 html,
 body {
-    height: 100%;
-}
-body {
-    padding: 32px;
 }
-body,
-#container {
     display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
 }
-#container {
-    position: relative;
-    gap: 0.4rem;
-    width: 640px;
-    height: 640px;
-    max-width: 100%;
-    max-height: 100%;
-    border: 2px dashed #D1D5DB;
-    border-radius: 0.75rem;
-    overflow: hidden;
-    cursor: pointer;
-    margin: 1rem;
-    background-size: 100% 100%;
-    background-position: center;
-    background-repeat: no-repeat;
-    font-size: 18px;
 }
-#upload {
-    display: none;
 }
-svg {
-    pointer-events: none;
 }
-#example {
-    font-size: 14px;
-    text-decoration: underline;
-    cursor: pointer;
 }
-#example:hover {
-    color: #2563EB;
 }
 .bounding-box {
     position: absolute;
     box-sizing: border-box;
-    border: solid 2px;
 }
 .bounding-box-label {
     color: white;
     position: absolute;
     font-size: 12px;
-    margin: -16px 0 0 -2px;
     padding: 1px;
 }

 html,
 body {
+    font-family: Arial, Helvetica, sans-serif;
 }
+.container {
+    margin: 40px auto;
+    width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
 }
+.wrap {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+.left-column,
+.right-column {
+    flex: 1;
+    padding: 10px;
+    box-sizing: border-box;
+    max-height: 500px;
+}
+@media (max-width: 508px) {
+    .left-column,
+    .right-column {
+        flex: 100%;
+    }
 }
+.custom-file-select {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    gap: 10px;
+    border: 2px solid black;
+    padding: 8px 16px;
+    cursor: pointer;
+    border-radius: 6px;
 }
+#file-select {
+    display: none;
 }
+#out-container {
+    width: 400px;
+    height: 500px;
 }
+img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    border: 1px dashed rgba(128, 128, 128, 0.5);
 }
 .bounding-box {
     position: absolute;
     box-sizing: border-box;
+    border-width: 2px;
+    border-style: solid;
 }
 .bounding-box-label {
     color: white;
     position: absolute;
     font-size: 12px;
+    margin-top: -16px;
+    margin-left: -2px;
     padding: 1px;
 }