Add WebGPU whisper large and llama 3.2

js/main.js

@@ -65,6 +65,31 @@ 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 +276,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",

samples/phi3-webgpu/postcss.config.js

@@ -1,6 +1,6 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};

samples/phi3-webgpu/src/components/Chat.css

@@ -1,112 +1,109 @@
-@scope (.markdown) {
-
-    /* Code blocks */
-    pre {
-        margin: 0.5rem 0;
-        white-space: break-spaces;
-    }
-
-    code {
-        padding: 0.2em 0.4em;
-        border-radius: 4px;
-        font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-        font-size: 0.9em;
-    }
-
-    pre,
-    code {
-        background-color: #f2f2f2;
-    }
-
-    @media (prefers-color-scheme: dark) {
-
-        pre,
-        code {
-            background-color: #333;
-        }
-
-    }
-
-    pre:has(code) {
-        padding: 1rem 0.5rem;
-    }
-
-    pre>code {
-        padding: 0;
-    }
-
-    /* Headings */
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-        font-weight: 600;
-        line-height: 1.2;
-    }
-
-    h1 {
-        font-size: 2em;
-        margin: 1rem 0;
-    }
-
-    h2 {
-        font-size: 1.5em;
-        margin: 0.83rem 0;
-    }
-
-    h3 {
-        font-size: 1.25em;
-        margin: 0.67rem 0;
-    }
-
-    h4 {
-        font-size: 1em;
-        margin: 0.5rem 0;
-    }
-
-    h5 {
-        font-size: 0.875em;
-        margin: 0.33rem 0;
-    }
-
-    h6 {
-        font-size: 0.75em;
-        margin: 0.25rem 0;
-    }
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6:first-child {
-        margin-top: 0;
-    }
-
-    /* Unordered List */
-    ul {
-        list-style-type: disc;
-        margin-left: 1.5rem;
-    }
-
-    /* Ordered List */
-    ol {
-        list-style-type: decimal;
-        margin-left: 1.5rem;
-    }
-
-    /* List Items */
-    li {
-        margin: 0.25rem 0;
-    }
-
-    p:not(:first-child) {
-        margin-top: 0.75rem;
-    }
-
-    p:not(:last-child) {
-        margin-bottom: 0.75rem;
-    }
-}
+@scope (.markdown) {
+  /* Code blocks */
+  pre {
+    margin: 0.5rem 0;
+    white-space: break-spaces;
+  }
+
+  code {
+    padding: 0.2em 0.4em;
+    border-radius: 4px;
+    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+    font-size: 0.9em;
+  }
+
+  pre,
+  code {
+    background-color: #f2f2f2;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    pre,
+    code {
+      background-color: #333;
+    }
+  }
+
+  pre:has(code) {
+    padding: 1rem 0.5rem;
+  }
+
+  pre > code {
+    padding: 0;
+  }
+
+  /* Headings */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: 600;
+    line-height: 1.2;
+  }
+
+  h1 {
+    font-size: 2em;
+    margin: 1rem 0;
+  }
+
+  h2 {
+    font-size: 1.5em;
+    margin: 0.83rem 0;
+  }
+
+  h3 {
+    font-size: 1.25em;
+    margin: 0.67rem 0;
+  }
+
+  h4 {
+    font-size: 1em;
+    margin: 0.5rem 0;
+  }
+
+  h5 {
+    font-size: 0.875em;
+    margin: 0.33rem 0;
+  }
+
+  h6 {
+    font-size: 0.75em;
+    margin: 0.25rem 0;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6:first-child {
+    margin-top: 0;
+  }
+
+  /* Unordered List */
+  ul {
+    list-style-type: disc;
+    margin-left: 1.5rem;
+  }
+
+  /* Ordered List */
+  ol {
+    list-style-type: decimal;
+    margin-left: 1.5rem;
+  }
+
+  /* List Items */
+  li {
+    margin: 0.25rem 0;
+  }
+
+  p:not(:first-child) {
+    margin-top: 0.75rem;
+  }
+
+  p:not(:last-child) {
+    margin-bottom: 0.75rem;
+  }
+}

samples/phi3-webgpu/tailwind.config.js

@@ -1,12 +1,8 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}
-
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {}
+  },
+  plugins: []
+};