Create index.js

index.js

@@ -0,0 +1,139 @@
+import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]';
+
+// 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://i.imgur.com/mLvqQws.jpg';
+
+// Create a new image segmentation pipeline
+status.textContent = 'Loading model...';
+const segmenter = await pipeline('image-segmentation', 'Xenova/face-parsing');
+status.textContent = 'Ready';
+
+example.addEventListener('click', (e) => {
+    e.preventDefault();
+    segment(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 => segment(e2.target.result);
+
+    reader.readAsDataURL(file);
+});
+
+// Perform image segmentation
+async function segment(img) {
+    imageContainer.innerHTML = '';
+    imageContainer.style.backgroundImage = `url(${img})`;
+
+    status.textContent = 'Analysing...';
+    const output = await segmenter(img);
+    status.textContent = '';
+    output.forEach(renderMask);
+}
+
+// Mapping of label to colour
+const colours = [
+    [234, 76, 76], // red
+    [28, 180, 129], // sea green
+    [234, 155, 21], // orange
+    [67, 132, 243], // blue
+    [243, 117, 36], // orange-red
+    [145, 98, 243], // purple
+    [21, 178, 208], // cyan
+    [132, 197, 33], // lime
+];
+
+// Render a mask on the image
+function renderMask({mask, label}, i) {
+    // Create new canvas
+    const canvas = document.createElement('canvas');
+    canvas.width = mask.width;
+    canvas.height = mask.height;
+    canvas.setAttribute('data-label', label);
+    
+    // Create context and allocate buffer for pixel data
+    const context = canvas.getContext('2d');
+    const imageData = context.createImageData(canvas.width, canvas.height);
+    const pixelData = imageData.data;
+
+    // Choose colour based on index
+    const [r, g, b] = colours[i % colours.length];
+
+    // Fill mask with colour
+    for (let i = 0; i < pixelData.length; ++i) {
+        if (mask.data[i] !== 0) {
+            const offset = 4 * i;
+            pixelData[offset] = r;          // red
+            pixelData[offset + 1] = g;      // green
+            pixelData[offset + 2] = b;      // blue
+            pixelData[offset + 3] = 255;    // alpha (fully opaque)
+        }
+    }
+    
+    // Draw image data to context
+    context.putImageData(imageData, 0, 0);
+
+    // Add canvas to container    
+    imageContainer.appendChild(canvas);
+}
+
+// Clamp a value inside a range [min, max]
+function clamp(x, min=0, max=1) {
+    return Math.max(Math.min(x, max), min)
+}
+
+// Attach hover event to image container
+imageContainer.addEventListener('mousemove', e => {
+    const canvases = imageContainer.getElementsByTagName('canvas');
+    if (canvases.length === 0) return;
+
+    // Get bounding box
+    const bb = imageContainer.getBoundingClientRect();
+    
+    // Get the mouse coordinates relative to the container
+    const mouseX = clamp((e.clientX - bb.left) / bb.width);
+    const mouseY = clamp((e.clientY - bb.top) / bb.height);
+        
+    // Loop over all canvases
+    for (const canvas of canvases) {
+
+        const canvasX = canvas.width * mouseX;
+        const canvasY = canvas.height * mouseY;
+
+        // Get the pixel data of the mouse coordinates
+        const context = canvas.getContext('2d');
+        const pixelData = context.getImageData(canvasX, canvasY, 1, 1).data;
+
+        // Apply hover effect if not fully opaque
+        if (pixelData[3] < 255) {
+            canvas.style.opacity = 0.1;
+        } else {
+            canvas.style.opacity = 0.8;
+            status.textContent = canvas.getAttribute('data-label');
+        }
+    }
+});
+
+// Reset canvas opacities on mouse exit
+imageContainer.addEventListener('mouseleave', e => {
+    const canvases = [...imageContainer.getElementsByTagName('canvas')];
+    if (canvases.length > 0) {
+        canvases.forEach(c => c.style.opacity = 0.6);
+        status.textContent = '';
+    }
+})