Polish gallery mode

demos.js

@@ -7,49 +7,46 @@ const categoryDemos = [
         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,
       },
       'tjs-depthAnything': {
         name: 'Depth Anything',
         description: `Depth Anything by Transformers.js`,
         filename: "https://huggingface.co/spaces/Xenova/webgpu-depth-anything",
-        openInNewTab: true,
+      },
+      'tjs-moondream': {
+        name: 'Moondream',
+        description: `Moondream (Vision-Language Model) by Transformers.js`,
+        filename: "https://huggingface.co/spaces/Xenova/experimental-moondream-webgpu",
       },
       'tjs-musicGen': {
         name: 'Text to Music (WASM)',
         description: `Text to music by Transformers.js`,
         filename: "https://huggingface.co/spaces/Xenova/musicgen-web",
-        openInNewTab: true,
       },
       'tjs-phi3': {
         name: 'Phi3',
         description: `Phi3 by Transformers.js`,
         filename: "https://huggingface.co/spaces/Xenova/experimental-phi3-webgpu",
-        openInNewTab: true,
       },
       'tjs-removeImageBackground': {
         name: 'Remove Image Background',
         description: `Image Background Removal by Transformers.js`,
         filename: "https://huggingface.co/spaces/Xenova/remove-background-webgpu",
-        openInNewTab: true,
       },
       'tjs-removeVideoBackground': {
         name: 'Remove Video Background',
         description: `Video Background Removal by Transformers.js`,
         filename: "https://huggingface.co/spaces/Xenova/webgpu-video-background-removal",
-        openInNewTab: true,
       },
       'tjs-yolo': {
         name: 'Realtime Video Object Detection',
         description: `Realtime video object detection by Transformers.js`,
         filename: "https://huggingface.co/spaces/Xenova/video-object-detection",
-        openInNewTab: true,
       },
     },
   },
@@ -103,13 +100,11 @@ const categoryDemos = [
         name: 'Web Stable Diffusion',
         description: `Web Stable Diffusion`,
         filename: "https://websd.mlc.ai/",
-        openInNewTab: true,
       },
       'tvm-llama3': {
         name: 'Web LLM Llama3',
         description: `Web LLM Llama3`,
         filename: "https://webllm.mlc.ai/",
-        openInNewTab: true,
       },
     },
   },

demos/ort-phi2-test/index.html

@@ -26,6 +26,7 @@
         csv: 0,
         max_tokens: 256,
         local: 1,
+        ortUrl: "default",
       }
       let vars = query.split("&");
       for (var i = 0; i < vars.length; i++) {

demos/ort-phi3-test/index.html

@@ -22,6 +22,7 @@
         csv: 0,
         max_tokens: 256,
         local: 1,
+        ortUrl: "default",
       }
       let vars = query.split("&");
       for (var i = 0; i < vars.length; i++) {

demos/ort-sdturbo/index.html

@@ -261,7 +261,7 @@ fn main(@location(0) fragUV : vec2<f32>) -> @location(0) vec4<f32> {
   async function load_models(models) {
     let loadedCount = 0;
     for (const [name, model] of Object.entries(models)) {
-      const model_bytes = await getModelOPFS(model.url, `models/${model.url}`, false);
+      const model_bytes = await getModelOPFS(model.url.split('/').pop(), model.url, false);
       const sess_opt = { ...opt, ...model.opt };
       // profiling
       //ort.env.webgpu.profiling = { mode: "default" };
@@ -279,17 +279,17 @@ fn main(@location(0) fragUV : vec2<f32>) -> @location(0) vec4<f32> {
 
   const models = {
     "unet": {
-      url: "https://huggingface.co/webai-community/models/resolve/main/sdturbo-unet.onnx", size: 640,
+      url: `${getModelsPath()}sdturbo-unet.onnx`, size: 640,
       // should have 'steps: 1' but will fail to create the session
       opt: { freeDimensionOverrides: { batch_size: 1, num_channels: 4, height: 64, width: 64, sequence_length: 77, } }
     },
     "text_encoder": {
-      url: "https://huggingface.co/webai-community/models/resolve/main/sdturbo-text-encoder.onnx", size: 1700,
+      url: `${getModelsPath()}sdturbo-text-encoder.onnx`, size: 1700,
       // should have 'sequence_length: 77' but produces a bad image
       opt: { freeDimensionOverrides: { batch_size: 1, } },
     },
     "vae_decoder": {
-      url: "https://huggingface.co/webai-community/models/resolve/main/sdturbo-vae-decoder.onnx", size: 95,
+      url: `${getModelsPath()}sdturbo-vae-decoder.onnx`, size: 95,
       opt: { freeDimensionOverrides: { batch_size: 1, num_channels_latent: 4, height_latent: 64, width_latent: 64 } }
     }
   }

demos/tflite-gemma/index.js

@@ -14,14 +14,14 @@
 
 // ---------------------------------------------------------------------------------------- //
 
-import {FilesetResolver, LlmInference} from 'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-genai';
+import {FilesetResolver, LlmInference} from 'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-genai@0.10.12/wasm/genai_wasm_internal.min.js';
 
 const input = document.getElementById('input');
 const output = document.getElementById('output');
 const submit = document.getElementById('submit');
 const status = document.getElementById('status');
 
-const modelFileName = 'https://huggingface.co/webai-community/models/resolve/main/gemma-2b-it-gpu-int4.bin'; /* Update the file name */
+const modelFileName = `gemma-2b-it-gpu-int4.bin`; /* Update the file name */
 let startTime;
 
 /**
@@ -50,7 +50,7 @@ async function runDemo() {
   const genaiFileset = await FilesetResolver.forGenAiTasks(
       'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-genai/wasm');
   let llmInference;
-  const modelBuffer = new Int8Array(await getModelOPFS(modelFileName, modelFileName, false));
+  const modelBuffer = new Int8Array(await getModelOPFS(modelFileName.split('/').pop(), modelFileName, false));
 
   submit.onclick = () => {
     startTime = performance.now();

demos/tjs-moondream/tjs-moondream.mp4

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

gallery.html

@@ -65,16 +65,15 @@
         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';
+        if (demoInfo.filename.startsWith('https')) {
+          a.href = demoInfo.filename;
         } else {
-          a.onclick = (e) => {
-            setSampleIFrameURL(e, demoInfo);
-          };
+          a.href = `demos/${demoInfo.filename}`;
         }
+        a.textContent = `${demoInfo.name || key}`;
+        a.title = demoInfo.description;
+        a.style.fontSize = 28;
+          a.target = '_blank';
 
         li.appendChild(video);
         li.appendChild(a);