Add gallery mode

demos.js

@@ -0,0 +1,116 @@
+const categoryDemos = [
+  {
+    name: `ONNX Runtime`,
+    description: `ONNX Runtime`,
+    demos: {
+      'ort-phi3': {
+        name: 'phi3',
+        description: `phi3 from Microsoft`,
+        filename: "ort-phi3",
+      },
+      'ort-sam': {
+        name: 'Segment Anything',
+        description: `Segment Anything from https://github.com/guschmue/ort-webgpu/tree/master/segment-anything`,
+        filename: "ort-sam",
+        video: "ort-sam.mp4",
+      },
+      'ort-sdturbo': {
+        name: 'Stable Diffusion Turbo',
+        description: `Stable Diffusion Turbo from https://github.com/guschmue/ort-webgpu/tree/master/sd-turbo`,
+        filename: "ort-sdturbo",
+      },
+      'ort-tinyllama': {
+        name: 'Tiny Llama',
+        description: `Tiny Llama from https://github.com/guschmue/ort-webgpu/tree/master/chat`,
+        filename: "ort-tinyllama",
+      },
+      'ort-yolo': {
+        name: 'Yolo',
+        description: `Yolo V9 from https://github.com/guschmue/ort-webgpu/tree/master/yolov9`,
+        filename: "ort-yolo",
+      },
+    },
+  },
+  {
+    name: `TFLite`,
+    description: `TFLite`,
+    demos: {
+      'tflite-gemma': {
+        name: 'Gemma',
+        description: `Gemma with TFLite and MediaPipe from https://github.com/googlesamples/mediapipe/tree/main/examples/llm_inference/js, <a href=https://developers.googleblog.com/2024/03/running-large-language-models-on-device-with-mediapipe-andtensorflow-lite.html>more info.</a>`,
+        filename: "tflite-gemma",
+      },
+    },
+  },
+  {
+    name: 'Transformers.js',
+    description: 'Transformers.js',
+    demos: {
+      benchmark: {
+        name: 'Benchmark',
+        description: `Benchmark by Transformers.js`,
+        filename: "https://huggingface.co/spaces/Xenova/webgpu-embedding-benchmark",
+        openInNewTab: true,
+      },
+      'tjs-clip': {
+        name: 'OpenAI Clip',
+        description: `Zero-shot Image Classification with OpenAI's CLIP by Transformers.js`,
+        filename: "https://huggingface.co/spaces/Xenova/webgpu-clip",
+        openInNewTab: true,
+        video: 'tjs-clip.mp4',
+      },
+      depthAnything: {
+        name: 'Depth Anything',
+        description: `Depth Anything by Transformers.js`,
+        filename: "https://huggingface.co/spaces/Xenova/webgpu-depth-anything",
+        openInNewTab: true,
+      },
+      removeImageBackground: {
+        name: 'Remove Image Background',
+        description: `Image Background Removal by Transformers.js`,
+        filename: "https://huggingface.co/spaces/Xenova/remove-background-webgpu",
+        openInNewTab: true,
+      },
+      removeVideoBackground: {
+        name: 'Remove Video Background',
+        description: `Video Background Removal by Transformers.js`,
+        filename: "https://huggingface.co/spaces/Xenova/webgpu-video-background-removal",
+        openInNewTab: true,
+      },
+    },
+  },
+  {
+    name: 'TVM',
+    description: 'TVM',
+    demos: {
+      sd: {
+        name: 'Web Stable Diffusion',
+        description: `Web Stable Diffusion`,
+        filename: "https://websd.mlc.ai/",
+        openInNewTab: true,
+      },
+      llm: {
+        name: 'Web LLM (Gemma/LLama/Mistral/Phi)',
+        description: `Web LLM`,
+        filename: "https://webllm.mlc.ai/",
+        openInNewTab: true,
+      },
+    },
+  },
+  {
+    name: `Developer Only`,
+    description: `Developer Only`,
+    demos: {
+      'ort-phi2-test': {
+        name: 'phi2 test',
+        description: `phi2 from Microsoft`,
+        filename: "ort-phi2-test",
+      },
+      'ort-phi3-test': {
+        name: 'phi3 test',
+        description: `phi3 from Microsoft`,
+        filename: "ort-phi3-test",
+      },
+    },
+  },
+];

demos/ort-sam/ort-sam.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:263faf257fc41043f809470a42b3b4e33d436162072339c7fd83eb88f0518a51
+size 356958

demos/tjs-clip/tjs-clip.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0197ad09e1ad13b24bad2faa64368777c472a05e8bbabda8ccfaff5372b17b82
+size 2723436

gallery.html

@@ -0,0 +1,76 @@
+<style>
+  h1 {
+    align: center;
+  }
+
+  ul {
+    list-style: none;
+  }
+
+  li {
+    display: inline-block;
+    margin-right: 10px;
+    /* add spacing between items */
+  }
+
+  a {
+    text-align: center;
+    display: block;
+  }
+</style>
+
+<body>
+  <h1 align="center">WebAI Demos (Gallery Mode)</h1>
+  <script src="demos.js"></script>
+  <script>
+    "use strict";
+
+    const demosElem = document.createElement('div');
+    document.body.appendChild(demosElem);
+    demosElem.style.width = screen.width;
+    demosElem.style.height = screen.height;
+
+    for (const { name, description, demos } of categoryDemos) {
+      const ul = document.createElement('ul');
+      const h2 = document.createElement('h2');
+      h2.textContent = name;
+      ul.appendChild(h2);
+      for (const [key, demoInfo] of Object.entries(demos)) {
+        const li = document.createElement('li');
+        const video = document.createElement('video');
+        video.width = 600;
+        video.height = 600;
+        if (demoInfo.video) {
+          video.src = `demos/${key}/${demoInfo.video}`;
+        } else {
+          video.src = 'video-na.mp4';
+        }
+
+        video.autoplay = true;
+        video.muted = true;
+        video.loop = true;
+        video.controls = true;
+
+        const a = document.createElement('a');
+        a.href = `demos/${demoInfo.filename}`;
+        a.textContent = `${demoInfo.name || key}${demoInfo.openInNewTab ? '' : ''}`;
+        a.style.fontSize = 28;
+        if (demoInfo.openInNewTab) {
+          a.target = '_blank';
+        } else {
+          a.onclick = (e) => {
+            setSampleIFrameURL(e, demoInfo);
+          };
+        }
+
+        li.appendChild(video);
+        li.appendChild(a);
+        ul.appendChild(li);
+      }
+      demosElem.appendChild(ul);
+    }
+
+  </script>
+
+
+</body>

index.html

@@ -2,6 +2,7 @@
   <title>WebAI Demos</title>
   <link href="css/styles.css" rel="stylesheet">
 </head>
+<script src="demos.js"></script>
 <script defer type="module" src="main.js"></script>
 <body>
   <div class="wrapper">

main.js

@@ -49,121 +49,6 @@ function createElem(tag, attrs = {}, children = []) {
   return elem;
 }
 
-const demoCategories = [
-  {
-    name: `ONNX Runtime`,
-    description: `ONNX Runtime`,
-    demos: {
-      'ort-phi3': {
-        name: 'phi3',
-        description: `phi3 from Microsoft`,
-        filename: "ort-phi3",
-      },
-      'ort-sam': {
-        name: 'Segment Anything',
-        description: `Segment Anything from https://github.com/guschmue/ort-webgpu/tree/master/segment-anything`,
-        filename: "ort-sam",
-      },
-      'ort-sdturbo': {
-        name: 'Stable Diffusion Turbo',
-        description: `Stable Diffusion Turbo from https://github.com/guschmue/ort-webgpu/tree/master/sd-turbo`,
-        filename: "ort-sdturbo",
-      },
-      'ort-tinyllama': {
-        name: 'Tiny Llama',
-        description: `Tiny Llama from https://github.com/guschmue/ort-webgpu/tree/master/chat`,
-        filename: "ort-tinyllama",
-      },
-      'ort-yolo': {
-        name: 'Yolo',
-        description: `Yolo V9 from https://github.com/guschmue/ort-webgpu/tree/master/yolov9`,
-        filename: "ort-yolo",
-      },
-    },
-  },
-  {
-    name: `TFLite`,
-    description: `TFLite`,
-    demos: {
-      'tflite-gemma': {
-        name: 'Gemma',
-        description: `Gemma with TFLite and MediaPipe from https://github.com/googlesamples/mediapipe/tree/main/examples/llm_inference/js, <a href=https://developers.googleblog.com/2024/03/running-large-language-models-on-device-with-mediapipe-andtensorflow-lite.html>more info.</a>`,
-        filename: "tflite-gemma",
-      },
-    },
-  },
-  {
-    name: 'Transformers.js',
-    description: 'Transformers.js',
-    demos: {
-      benchmark: {
-        name: 'Benchmark',
-        description: `Benchmark by Transformers.js`,
-        filename: "https://huggingface.co/spaces/Xenova/webgpu-embedding-benchmark",
-        openInNewTab: true,
-      },
-      clip: {
-        name: 'OpenAI Clip',
-        description: `Zero-shot Image Classification with OpenAI's CLIP by Transformers.js`,
-        filename: "https://huggingface.co/spaces/Xenova/webgpu-clip",
-        openInNewTab: true,
-      },
-      depthAnything: {
-        name: 'Depth Anything',
-        description: `Depth Anything by Transformers.js`,
-        filename: "https://huggingface.co/spaces/Xenova/webgpu-depth-anything",
-        openInNewTab: true,
-      },
-      removeImageBackground: {
-        name: 'Remove Image Background',
-        description: `Image Background Removal by Transformers.js`,
-        filename: "https://huggingface.co/spaces/Xenova/remove-background-webgpu",
-        openInNewTab: true,
-      },
-      removeVideoBackground: {
-        name: 'Remove Video Background',
-        description: `Video Background Removal by Transformers.js`,
-        filename: "https://huggingface.co/spaces/Xenova/webgpu-video-background-removal",
-        openInNewTab: true,
-      },
-    },
-  },
-  {
-    name: 'TVM',
-    description: 'TVM',
-    demos: {
-      sd: {
-        name: 'Web Stable Diffusion',
-        description: `Web Stable Diffusion`,
-        filename: "https://websd.mlc.ai/",
-        openInNewTab: true,
-      },
-      llm: {
-        name: 'Web LLM (Gemma/LLama/Mistral/Phi)',
-        description: `Web LLM`,
-        filename: "https://webllm.mlc.ai/",
-        openInNewTab: true,
-      },
-    },
-  },
-  {
-    name: `Developer Only`,
-    description: `Developer Only`,
-    demos: {
-      'ort-phi2-test': {
-        name: 'phi2 test',
-        description: `phi2 from Microsoft`,
-        filename: "ort-phi2-test",
-      },
-      'ort-phi3-test': {
-        name: 'phi3 test',
-        description: `phi3 from Microsoft`,
-        filename: "ort-phi3-test",
-      },
-    },
-  },
-];
-
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -32456,7 +32341,7 @@ function setSampleIFrame(demoInfo, search = '') {
   // Replace the iframe because changing src adds to the user's history.
   demoContainerElem.innerHTML = '';
   if (filename) {
-    const src = url || `demo/${filename}${search}/index.html`;
+    const src = url || `demos/${filename}${search}/index.html`;
     if (window.location.origin.includes("hf")) {
       demoContainerElem.appendChild(createElem('iframe', { src: `/${src}` }));
      } else {
@@ -32489,7 +32374,7 @@ function setSampleIFrameURL(e, demoInfo) {
 // from those keys to each demo.
 const samplesByKey = new Map();
 // Generate the list of demos
-for (const { name, description, demos } of demoCategories) {
+for (const { name, description, demos } of categoryDemos) {
   for (const [key, demoInfo] of Object.entries(demos)) {
     samplesByKey.set(key, demoInfo);
   }

util.js

@@ -1,3 +1,5 @@
+"use strict";
+
 function updateGetModelProgress(name, loaded, total) {
   const progressElement = document.getElementById('model-progress');
   if (total === 0) {
@@ -134,3 +136,55 @@ async function loadScript(url) {
     document.body.append(script);
   })
 }
+
+/*
+const webgpuCanvas = new OffscreenCanvas(canvasWidth, canvasHeight);
+const webglCanvas = new OffscreenCanvas(canvasWidth, canvasHeight);
+const gl = webglCanvas.getContext('webgl2');
+const webglTexture = gl.createTexture();
+*/
+function readGPUBufferSync(buffer, byteOffset, webgpuCanvas, gl, glTexture, device) {
+  const bufferSize = buffer.size;
+  const dataBytes = bufferSize - byteOffset;
+
+  const canvasWidth = 8192;
+  const canvasHeight = dataBytes / 4 / canvasWidth + 1;
+
+  // Copy WebGPU buffer to WebGPU texture
+  const webgpuContext = webgpuCanvas.getContext('webgpu');
+  webgpuContext.configure({
+    device: device,
+    format: 'rgb8unorm',
+    usage: GPUTextureUsage.COPY_DST,
+    alphaMode: 'premultiplied',
+  });
+  const webgpuTexture = webgpuContext.getCurrentTexture();
+  const bytesPerRow = canvasWidth * 4;
+  const commandEncoder = device.createCommandEncoder();
+  commandEncoder.copyBufferToTexture(
+    {
+      buffer,
+      bytesPerRow,
+      byteOffset,
+    },
+    {
+      webgpuTexture,
+    },
+    {
+      canvasWidth,
+      canvasHeight,
+    });
+  device.queue.submit([commandEncoder.finish()]);
+  commandEncoder = null;
+
+  // Read WebGPU texture via WebGL
+  gl.bindTexture(gl.TEXTURE_2D, webglTexture);
+  gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, gl.RGBA, gl.UNSIGNED_BYTE, webgpuCanvas);
+  gl.bindFramebuffer(gl.FRAMEBUFFER, gl.createFramebuffer());
+  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, webglTexture, 0);
+  const pixels = new Uint8Array(dataBytes);
+  gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
+
+  return pixels;
+}

video-na.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d676f789a59ee5572bda9f12501f750e8b9f71282f3174b14249c82177e5b280
+size 10492