Add more videos

demos.js

@@ -12,7 +12,6 @@ const categoryDemos = [
         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',
@@ -46,7 +45,7 @@ const categoryDemos = [
     name: 'Transformers.js',
     description: 'Transformers.js',
     demos: {
-      benchmark: {
+      'tjs-benchmark': {
         name: 'Benchmark',
         description: `Benchmark by Transformers.js`,
         filename: "https://huggingface.co/spaces/Xenova/webgpu-embedding-benchmark",
@@ -57,41 +56,58 @@ const categoryDemos = [
         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: {
+      'tjs-depthAnything': {
         name: 'Depth Anything',
         description: `Depth Anything by Transformers.js`,
         filename: "https://huggingface.co/spaces/Xenova/webgpu-depth-anything",
         openInNewTab: true,
       },
-      removeImageBackground: {
+      '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,
       },
-      removeVideoBackground: {
+      '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 by YOLOv9',
+        description: `Realtime video object detection by Transformers.js`,
+        filename: "https://huggingface.co/spaces/Xenova/video-object-detection",
+        openInNewTab: true,
+      },
     },
   },
   {
     name: 'TVM',
     description: 'TVM',
     demos: {
-      sd: {
+      'tvm-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`,
+      'tvm-llama3': {
+        name: 'Web LLM Llama3',
+        description: `Web LLM Llama3`,
         filename: "https://webllm.mlc.ai/",
         openInNewTab: true,
       },
@@ -101,15 +117,10 @@ const categoryDemos = [
     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',
+      'dev-ort-phi3': {
+        name: 'phi3',
         description: `phi3 from Microsoft`,
-        filename: "ort-phi3-test",
+        filename: "dev-ort-phi3",
       },
     },
   },

demos/dev-ort-phi3/dev-ort-phi3.mp4

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

demos/ort-phi3/ort-phi3.mp4

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

demos/ort-yolo/ort-yolo.mp4

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

demos/tjs-benchmark/tjs-benchmark.mp4

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

demos/tjs-depthAnything/tjs-depthAnything.mp4

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

demos/tjs-musicGen/tjs-musicGen.mp4

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

demos/tjs-phi3/tjs-phi3.mp4

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

demos/tjs-removeImageBackground/tjs-removeImageBackground.mp4

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

demos/tjs-removeVideoBackground/tjs-removeVideoBackground.mp4

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

demos/tjs-yolo/tjs-yolo.mp4

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

demos/tvm-llama3/tvm-llama3.mp4

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

gallery.html

@@ -17,6 +17,17 @@
     text-align: center;
     display: block;
   }
+
+  video {
+    width: 480px;
+    height: 320px;
+    border:2px solid black;
+    box-shadow: 0px 3px 17px -3px rgba(0,0,0,0.36);
+    -webkit-box-shadow: 0px 3px 17px -3px rgba(0,0,0,0.36);
+    -moz-box-shadow: 0px 3px 17px -3px rgba(0,0,0,0.36);
+    object-fit: cover !important;
+    border-radius: 20px !important;
+  }
 </style>
 
 <body>
@@ -38,13 +49,7 @@
       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.src = `demos/${key}/${key}.mp4`;
 
         video.autoplay = true;
         video.muted = true;