Add vscode settings

.gitignore

@@ -6,5 +6,4 @@ node_modules
 *.pem
 dist
 *.log
-.vscode
 *.wasm

.vscode/settings.json

@@ -0,0 +1,15 @@
+{
+  "prettier.configPath": ".prettierrc",
+  "editor.formatOnType": false,
+  "editor.formatOnPaste": true,
+  "editor.formatOnSave": true,
+  "editor.formatOnSaveMode": "file",
+  "files.autoSave": "onFocusChange",
+  "prettier.requireConfig": true,
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

js/main.js

@@ -65,6 +65,30 @@ let SAMPLES = [
   },
 
   // WebGPU
+  {
+    id: "webgpu_llama32",
+    title: "Llama 3.2 1B",
+    desc: "Lightweight text-only model by Meta",
+    sampleUrl: "https://huggingface.co/spaces/webml-community/llama-3.2-webgpu",
+    models: ["llama"],
+    tasks: "Text Generation",
+    webApis: [BACKENDS.WEBGPU],
+    framework: "Transformers.js",
+    devices: [DEVICES.GPU],
+    update: "2024-10-02"
+  },
+  {
+    id: "webgpu_whisper_large",
+    title: "Whisper Large V3 Turbo",
+    desc: "Automatic speech recognition (ASR) with OpenAI Whisper Large V3 Turbo",
+    sampleUrl: "https://huggingface.co/spaces/webml-community/whisper-large-v3-turbo-webgpu",
+    models: ["Encoder", "Decoder"],
+    tasks: "Automatic Speech Recognition",
+    webApis: [BACKENDS.WEBGPU],
+    framework: "Transformers.js",
+    devices: [DEVICES.GPU],
+    update: "2024-10-02"
+  },
   {
     id: "webgpu_benchmark",
     title: "Benchmark",
@@ -251,7 +275,7 @@ let SAMPLES = [
     update: "2024-06-09"
   },
   {
-    id: "webgpu_whisper",
+    id: "webgpu_whisper_base",
     title: "Whisper Base",
     desc: "Real-time speech recognition with OpenAI Whisper across 100 different languages",
     sampleUrl: "https://huggingface.co/spaces/Xenova/realtime-whisper-webgpu",
@@ -466,43 +490,40 @@ function constructSampleHTML(samples) {
 
                 <div class="flex 2xl:font-medium rounded-2xl bg-fuchsia-600/60 px-2 text-stone-50 w-auto">${sample.tasks}</div>
 
-              ${
-                sample.models.length > 0
-                  ? ` ${sample.models
-                      .map(
-                        (model) =>
-                          `<div class="flex 2xl:font-medium rounded-2xl bg-stone-600/80 px-2 text-stone-50 w-auto">${model}</div>`
-                      )
-                      .join("")}`
-                  : ``
-              }
+              ${sample.models.length > 0
+          ? ` ${sample.models
+            .map(
+              (model) =>
+                `<div class="flex 2xl:font-medium rounded-2xl bg-stone-600/80 px-2 text-stone-50 w-auto">${model}</div>`
+            )
+            .join("")}`
+          : ``
+        }
 
                   <div
                     class="flex 2xl:font-medium rounded-2xl bg-teal-600/80 px-2 text-stone-50">${sample.framework}
                   </div>
 
-                  ${
-                    sample.webApis.length > 0
-                      ? `
+                  ${sample.webApis.length > 0
+          ? `
                  ${sample.webApis
-                   .map(
-                     (api) =>
-                       `<div class="flex 2xl:font-medium rounded-2xl bg-indigo-600/80 px-2 text-stone-50">${api}</div>`
-                   )
-                   .join("")}`
-                      : ``
-                  }
-
-                  ${
-                    sample.devices.length > 0
-                      ? `${sample.devices
-                          .map(
-                            (device) =>
-                              `<div class="flex 2xl:font-medium rounded-2xl bg-sky-600/80 px-2 text-stone-50">${device}</div>`
-                          )
-                          .join("")}`
-                      : ``
-                  }
+            .map(
+              (api) =>
+                `<div class="flex 2xl:font-medium rounded-2xl bg-indigo-600/80 px-2 text-stone-50">${api}</div>`
+            )
+            .join("")}`
+          : ``
+        }
+
+                  ${sample.devices.length > 0
+          ? `${sample.devices
+            .map(
+              (device) =>
+                `<div class="flex 2xl:font-medium rounded-2xl bg-sky-600/80 px-2 text-stone-50">${device}</div>`
+            )
+            .join("")}`
+          : ``
+        }
               </div>
 
                     </div>