Upload demo files

.gitattributes

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+dist/video.mp4 filter=lfs diff=lfs merge=lfs -text
+public/video.mp4 filter=lfs diff=lfs merge=lfs -text

README.md

@@ -1,10 +1,15 @@
 ---
 title: Cohere Transcribe WebGPU
-emoji: 🚀
+emoji: ⚡️
 colorFrom: pink
 colorTo: pink
 sdk: static
 pinned: false
+thumbnail: >-
+  https://cdn-uploads.huggingface.co/production/uploads/61b253b7ac5ecaae3d1efe0c/AtkG76Hte5HytS3407lcp.png
+license: mit
+short_description: Run Cohere Transcribe locally in your browser on WebGPU.
+app_file: dist/index.html
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

dist/assets/index-D96roh91.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-50:oklch(97.1% .013 17.38);--color-red-100:oklch(93.6% .032 17.717);--color-red-200:oklch(88.5% .062 18.334);--color-red-500:oklch(63.7% .237 25.331);--color-emerald-600:oklch(59.6% .145 163.225);--color-white:#fff;--spacing:.25rem;--container-xl:36rem;--container-3xl:48rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--leading-relaxed:1.625;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--ease-out:cubic-bezier(0, 0, .2, 1);--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--blur-sm:8px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.inset-3{inset:calc(var(--spacing) * 3)}.start{inset-inline-start:var(--spacing)}.right-0{right:calc(var(--spacing) * 0)}.bottom-8{bottom:calc(var(--spacing) * 8)}.bottom-12{bottom:calc(var(--spacing) * 12)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-40{z-index:40}.ml-1{margin-left:calc(var(--spacing) * 1)}.ml-auto{margin-left:auto}.flex{display:flex}.hidden{display:none}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-2{height:calc(var(--spacing) * 2)}.h-4{height:calc(var(--spacing) * 4)}.h-6{height:calc(var(--spacing) * 6)}.h-16{height:calc(var(--spacing) * 16)}.h-72{height:calc(var(--spacing) * 72)}.h-full{height:100%}.h-screen{height:100vh}.max-h-\[500px\]{max-height:500px}.min-h-\[280px\]{min-height:280px}.w-2{width:calc(var(--spacing) * 2)}.w-4\/6{width:66.6667%}.w-5\/6{width:83.3333%}.w-16{width:calc(var(--spacing) * 16)}.w-72{width:calc(var(--spacing) * 72)}.w-80{width:calc(var(--spacing) * 80)}.w-full{width:100%}.w-screen{width:100vw}.max-w-3xl{max-width:var(--container-3xl)}.max-w-xl{max-width:var(--container-xl)}.flex-1{flex:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-pulse{animation:var(--animate-pulse)}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-5{gap:calc(var(--spacing) * 5)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-8{gap:calc(var(--spacing) * 8)}.gap-10{gap:calc(var(--spacing) * 10)}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-\[var\(--cohere-border\)\]{border-color:var(--cohere-border)}.border-\[var\(--cohere-purple\)\]{border-color:var(--cohere-purple)}.border-red-200{border-color:var(--color-red-200)}.border-transparent{border-color:#0000}.bg-\[var\(--cohere-border\)\]{background-color:var(--cohere-border)}.bg-\[var\(--cohere-purple\)\]{background-color:var(--cohere-purple)}.bg-\[var\(--cohere-surface\)\]{background-color:var(--cohere-surface)}.bg-red-50{background-color:var(--color-red-50)}.bg-red-500{background-color:var(--color-red-500)}.bg-white{background-color:var(--color-white)}.bg-white\/80{background-color:#fffc}@supports (color:color-mix(in lab, red, red)){.bg-white\/80{background-color:color-mix(in oklab, var(--color-white) 80%, transparent)}}.object-cover{object-fit:cover}.p-8{padding:calc(var(--spacing) * 8)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-8{padding-inline:calc(var(--spacing) * 8)}.px-16{padding-inline:calc(var(--spacing) * 16)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-5{padding-block:calc(var(--spacing) * 5)}.py-10{padding-block:calc(var(--spacing) * 10)}.py-12{padding-block:calc(var(--spacing) * 12)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.text-center{text-align:center}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.whitespace-pre-wrap{white-space:pre-wrap}.text-\[var\(--cohere-purple\)\]{color:var(--cohere-purple)}.text-\[var\(--cohere-text\)\]{color:var(--cohere-text)}.text-\[var\(--cohere-text-muted\)\],.text-\[var\(--cohere-text-muted\)\]\/50{color:var(--cohere-text-muted)}@supports (color:color-mix(in lab, red, red)){.text-\[var\(--cohere-text-muted\)\]\/50{color:color-mix(in oklab, var(--cohere-text-muted) 50%, transparent)}}.text-emerald-600{color:var(--color-emerald-600)}.text-red-500{color:var(--color-red-500)}.text-white{color:var(--color-white)}.text-white\/60{color:#fff9}@supports (color:color-mix(in lab, red, red)){.text-white\/60{color:color-mix(in oklab, var(--color-white) 60%, transparent)}}.italic{font-style:italic}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}@media (hover:hover){.group-hover\:text-\[var\(--cohere-purple\)\]:is(:where(.group):hover *){color:var(--cohere-purple)}.hover\:border-\[var\(--cohere-purple\)\]:hover{border-color:var(--cohere-purple)}.hover\:bg-\[var\(--cohere-purple\)\]:hover{background-color:var(--cohere-purple)}.hover\:bg-red-100:hover{background-color:var(--color-red-100)}.hover\:text-\[var\(--cohere-purple\)\]:hover{color:var(--cohere-purple)}.hover\:text-white:hover{color:var(--color-white)}.hover\:shadow-\[0_0_60px_-15px_var\(--cohere-purple\)\]:hover{--tw-shadow:0 0 60px -15px var(--tw-shadow-color,var(--cohere-purple));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}@media (width>=40rem){.sm\:flex-row{flex-direction:row}}}@font-face{font-family:CohereText;src:url(/CohereText-Regular.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}:root{--cohere-purple:#863bff;--cohere-deep-purple:#7e14ff;--cohere-cyan:#47bfff;--cohere-lavender:#ede6ff;--cohere-green:#355146;--cohere-bg:#fff;--cohere-surface:#f5f5f7;--cohere-surface-light:#eeeef0;--cohere-border:#e0e0e4;--cohere-text:#1a1a2e;--cohere-text-muted:#6b6b80}body{background:var(--cohere-bg);color:var(--cohere-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:CohereText,system-ui,-apple-system,sans-serif;overflow:hidden}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--cohere-surface)}::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#aaa}.screen{transition:opacity .6s,transform .6s;position:absolute;inset:0}.screen-enter{opacity:1;z-index:10;transform:scale(1)}.screen-exit{opacity:0;pointer-events:none;z-index:5;transform:scale(1.02)}.screen-hidden{opacity:0;pointer-events:none;z-index:0;transform:scale(.98)}@keyframes pulse-glow{0%,to{opacity:.4}50%{opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes fade-in-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-pulse-glow{animation:2s ease-in-out infinite pulse-glow}.animate-spin-slow{animation:1.2s linear infinite spin}.animate-fade-in-up{animation:.8s forwards fade-in-up}.animate-shimmer{background:linear-gradient(90deg, var(--cohere-surface) 25%, var(--cohere-surface-light) 50%, var(--cohere-surface) 75%);background-size:200% 100%;animation:1.5s ease-in-out infinite shimmer}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@keyframes pulse{50%{opacity:.5}}

dist/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cohere Transcribe — WebGPU</title>
+    <script type="module" crossorigin src="/assets/index-C1v3--OK.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-D96roh91.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

dist/video.mp4

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

eslint.config.js

@@ -0,0 +1,23 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+import { defineConfig, globalIgnores } from "eslint/config";
+
+export default defineConfig([
+  globalIgnores(["dist"]),
+  {
+    files: ["**/*.{ts,tsx}"],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+]);

index.html

@@ -1,19 +1,13 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cohere Transcribe — WebGPU</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 </html>

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "cohere-transcribe-webgpu",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@huggingface/transformers": "4.0.0-next.10",
+    "@tailwindcss/vite": "^4.2.2",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tailwindcss": "^4.2.2"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@types/node": "^24.12.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.57.0",
+    "vite": "^8.0.1"
+  }
+}

public/video.mp4

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

src/App.tsx

@@ -0,0 +1,635 @@
+import { useState, useRef, useCallback, useEffect } from "react";
+import { useTranscriber } from "./transcriberContext.ts";
+import Confetti, { type ConfettiHandle } from "./Confetti.tsx";
+import { langToFlag } from "./utils.ts";
+import {
+  CohereLogo,
+  UploadIcon,
+  MicrophoneIcon,
+  CopyIcon,
+  DownloadIcon,
+  CheckIcon,
+  FileIcon,
+  MicSmallIcon,
+} from "./icons.tsx";
+
+type Screen = "landing" | "loading" | "transcription";
+type TranscriptionMode = "idle" | "file" | "microphone";
+
+// ---- Constants ----
+
+const SCREEN_TRANSITION_MS = 600; // must match .screen CSS transition duration in index.css
+const COPY_FEEDBACK_MS = 2000;
+const POST_LOAD_DELAY_MS = 500;
+const AUDIO_SAMPLE_RATE = 16000;
+
+const LANGUAGES: { code: string; label: string; native: string }[] = [
+  { code: "en", label: "English", native: "English" },
+  { code: "fr", label: "French", native: "Français" },
+  { code: "de", label: "German", native: "Deutsch" },
+  { code: "es", label: "Spanish", native: "Español" },
+  { code: "it", label: "Italian", native: "Italiano" },
+  { code: "pt", label: "Portuguese", native: "Português" },
+  { code: "nl", label: "Dutch", native: "Nederlands" },
+  { code: "pl", label: "Polish", native: "Polski" },
+  { code: "el", label: "Greek", native: "Ελληνικά" },
+  { code: "ar", label: "Arabic", native: "العربية" },
+  { code: "ja", label: "Japanese", native: "日本語" },
+  { code: "zh", label: "Chinese", native: "中文" },
+  { code: "vi", label: "Vietnamese", native: "Tiếng Việt" },
+  { code: "ko", label: "Korean", native: "한국어" },
+];
+
+// ---- Formatting helpers ----
+
+function formatDuration(seconds: number): string {
+  if (seconds < 60) return `${seconds.toFixed(1)}s`;
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  return secs > 0 ? `${mins}m ${secs.toFixed(0)}s` : `${mins}m`;
+}
+
+// ---- Audio helpers ----
+
+async function decodeAudio(arrayBuffer: ArrayBuffer): Promise<Float32Array> {
+  const audioCtx = new AudioContext({ sampleRate: AUDIO_SAMPLE_RATE });
+  const decoded = await audioCtx.decodeAudioData(arrayBuffer);
+  const float32 = decoded.getChannelData(0);
+  await audioCtx.close();
+  return float32;
+}
+
+// ---- Main App ----
+
+function App() {
+  const [screen, setScreen] = useState<Screen>("landing");
+  const [prevScreen, setPrevScreen] = useState<Screen | null>(null);
+  const [mode, setMode] = useState<TranscriptionMode>("idle");
+  const [language, setLanguage] = useState("en");
+  const [transcriptionText, setTranscriptionText] = useState("");
+  const [streamedText, setStreamedText] = useState("");
+  const [isTranscribing, setIsTranscribing] = useState(false);
+  const [audioFileName, setAudioFileName] = useState<string | null>(null);
+  const [isRecording, setIsRecording] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const [stats, setStats] = useState<{
+    audioDuration: number;
+    elapsed: number;
+  } | null>(null);
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const audioChunksRef = useRef<Blob[]>([]);
+  const outputRef = useRef<HTMLDivElement>(null);
+  const streamedTextRef = useRef("");
+  const confettiRef = useRef<ConfettiHandle>(null);
+
+  const transcriber = useTranscriber();
+  const displayText = isTranscribing ? streamedText : transcriptionText;
+
+  // ---- Screen transitions ----
+
+  const transitionTo = useCallback(
+    (next: Screen) => {
+      setPrevScreen(screen);
+      setScreen(next);
+      setTimeout(() => setPrevScreen(null), SCREEN_TRANSITION_MS);
+    },
+    [screen],
+  );
+
+  const getScreenClass = useCallback(
+    (s: Screen) => {
+      if (s === screen) return "screen screen-enter";
+      if (s === prevScreen) return "screen screen-exit";
+      return "screen screen-hidden";
+    },
+    [screen, prevScreen],
+  );
+
+  // ---- Video autoplay fallback ----
+
+  useEffect(() => {
+    if (screen === "landing" && videoRef.current) {
+      videoRef.current.play().catch(() => {});
+    }
+  }, [screen]);
+
+  // ---- Model loading: start when entering loading screen ----
+
+  useEffect(() => {
+    if (screen !== "loading") return;
+    transcriber.load().then(() => {
+      setTimeout(() => transitionTo("transcription"), POST_LOAD_DELAY_MS);
+    });
+  }, [screen, transcriber, transitionTo]);
+
+  // ---- Auto-scroll output during streaming ----
+
+  useEffect(() => {
+    if (isTranscribing && outputRef.current) {
+      outputRef.current.scrollTop = outputRef.current.scrollHeight;
+    }
+  }, [streamedText, isTranscribing]);
+
+  // ---- Streaming callback ----
+
+  const onToken = useCallback((token: string) => {
+    streamedTextRef.current += token;
+    setStreamedText(streamedTextRef.current);
+  }, []);
+
+  // ---- Run transcription (shared by file + mic) ----
+
+  const runTranscription = useCallback(
+    async (audio: Float32Array) => {
+      setIsTranscribing(true);
+      setTranscriptionText("");
+      setStreamedText("");
+      setStats(null);
+      streamedTextRef.current = "";
+
+      const audioDuration = audio.length / AUDIO_SAMPLE_RATE;
+      const startTime = performance.now();
+
+      try {
+        const finalText = await transcriber.transcribe(
+          audio,
+          language,
+          onToken,
+        );
+        const elapsed = (performance.now() - startTime) / 1000;
+        setTranscriptionText(finalText);
+        setStats({ audioDuration, elapsed });
+      } catch (err) {
+        setTranscriptionText(
+          `Error: ${err instanceof Error ? err.message : "Transcription failed"}`,
+        );
+      } finally {
+        setIsTranscribing(false);
+      }
+    },
+    [transcriber, language, onToken],
+  );
+
+  // ---- File handling (shared by input + drag-and-drop) ----
+
+  const processFile = useCallback(
+    async (file: File) => {
+      setAudioFileName(file.name);
+      setMode("file");
+      const audioData = await decodeAudio(await file.arrayBuffer());
+      runTranscription(audioData);
+    },
+    [runTranscription],
+  );
+
+  const handleFileSelect = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+      processFile(file);
+    },
+    [processFile],
+  );
+
+  // ---- Drag and drop ----
+
+  const dragCounter = useRef(0);
+
+  const handleDragEnter = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      if (screen !== "transcription" || mode !== "idle") return;
+      dragCounter.current++;
+      if (dragCounter.current === 1) setIsDragging(true);
+    },
+    [screen, mode],
+  );
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    dragCounter.current--;
+    if (dragCounter.current === 0) setIsDragging(false);
+  }, []);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+  }, []);
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      dragCounter.current = 0;
+      setIsDragging(false);
+      if (screen !== "transcription" || mode !== "idle") return;
+      const file = e.dataTransfer.files?.[0];
+      if (!file) return;
+      processFile(file);
+    },
+    [screen, mode, processFile],
+  );
+
+  // ---- Microphone ----
+
+  const startRecording = useCallback(async () => {
+    setMode("microphone");
+    setIsRecording(true);
+    setTranscriptionText("");
+    setStreamedText("");
+    audioChunksRef.current = [];
+
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      const recorder = new MediaRecorder(stream);
+      mediaRecorderRef.current = recorder;
+
+      recorder.ondataavailable = (e) => {
+        if (e.data.size > 0) {
+          audioChunksRef.current.push(e.data);
+        }
+      };
+
+      recorder.onstop = async () => {
+        stream.getTracks().forEach((t) => t.stop());
+        setIsRecording(false);
+
+        try {
+          const blob = new Blob(audioChunksRef.current, { type: "audio/webm" });
+          const float32 = await decodeAudio(await blob.arrayBuffer());
+          runTranscription(float32);
+        } catch (err) {
+          setTranscriptionText(
+            `Error: ${err instanceof Error ? err.message : "Transcription failed"}`,
+          );
+        }
+      };
+
+      recorder.start();
+    } catch (err) {
+      setIsRecording(false);
+      setMode("idle");
+      console.error("Microphone access denied:", err);
+    }
+  }, [runTranscription]);
+
+  const stopRecording = useCallback(() => {
+    mediaRecorderRef.current?.stop();
+  }, []);
+
+  // ---- Copy to clipboard ----
+
+  const copyToClipboard = useCallback(() => {
+    navigator.clipboard.writeText(transcriptionText).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), COPY_FEEDBACK_MS);
+    });
+  }, [transcriptionText]);
+
+  // ---- Download as .txt ----
+
+  const downloadText = useCallback(() => {
+    const blob = new Blob([transcriptionText], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "transcription.txt";
+    a.click();
+    URL.revokeObjectURL(url);
+  }, [transcriptionText]);
+
+  // ---- Reset ----
+
+  const resetTranscription = useCallback(() => {
+    setMode("idle");
+    setTranscriptionText("");
+    setStreamedText("");
+    streamedTextRef.current = "";
+    setIsTranscribing(false);
+    setAudioFileName(null);
+    setIsRecording(false);
+    setCopied(false);
+    setStats(null);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  }, []);
+
+  // ---- Render ----
+
+  const isDone = !isTranscribing && !isRecording && !!transcriptionText;
+
+  return (
+    <div
+      className="relative w-screen h-screen overflow-hidden bg-white"
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+    >
+      {/* ==================== Screen 1: Landing ==================== */}
+      <div
+        className={`${getScreenClass("landing")} cursor-pointer`}
+        onClick={() => screen === "landing" && transitionTo("loading")}
+      >
+        {/* Video background */}
+        <video
+          ref={videoRef}
+          className="absolute inset-0 w-full h-full object-cover"
+          src="/video.mp4"
+          autoPlay
+          loop
+          muted
+          playsInline
+        />
+
+        {/* Click hint */}
+        <div className="absolute bottom-12 left-0 right-0 text-center z-10">
+          <p className="text-xl text-white animate-pulse-glow">
+            Click anywhere to begin
+          </p>
+        </div>
+      </div>
+
+      {/* ==================== Screen 2: Loading ==================== */}
+      <div
+        className={`${getScreenClass("loading")} flex flex-col items-center justify-center bg-white`}
+      >
+        <div className="flex flex-col items-center gap-8 animate-fade-in-up">
+          {/* Spinner */}
+          <div className="relative w-16 h-16">
+            <div
+              className="absolute inset-0 rounded-full animate-spin-slow"
+              style={{
+                border: "2px solid var(--cohere-border)",
+                borderTopColor: "var(--cohere-purple)",
+                borderRightColor: "var(--cohere-cyan)",
+              }}
+            />
+            <div className="absolute inset-3 flex items-center justify-center">
+              <CohereLogo size={24} />
+            </div>
+          </div>
+
+          {/* Status text */}
+          <div className="flex flex-col items-center gap-4">
+            <p className="text-xl text-[var(--cohere-text)]">
+              Loading model...
+            </p>
+
+            {/* Progress bar */}
+            <div className="w-80 h-1.5 bg-[var(--cohere-border)] rounded-full overflow-hidden">
+              <div
+                className="h-full rounded-full transition-all duration-300 ease-out"
+                style={{
+                  width: `${transcriber.progress}%`,
+                  background:
+                    "linear-gradient(90deg, var(--cohere-deep-purple), var(--cohere-purple), var(--cohere-cyan))",
+                }}
+              />
+            </div>
+
+            <p className="text-sm text-[var(--cohere-text-muted)]">
+              {transcriber.statusText}
+            </p>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <p className="absolute bottom-8 text-xs text-[var(--cohere-text-muted)]">
+          Powered by Transformers.js
+        </p>
+      </div>
+
+      {/* ==================== Screen 3: Transcription ==================== */}
+      <div
+        className={`${getScreenClass("transcription")} flex flex-col bg-white`}
+      >
+        {/* Header */}
+        <header className="flex items-center px-8 py-5 border-b border-[var(--cohere-border)]">
+          <img src="/cohere.svg" alt="Cohere" className="h-6" />
+        </header>
+
+        {/* Main content */}
+        <div className="flex-1 flex items-center justify-center px-8 py-10">
+          {mode === "idle" ? (
+            /* ---- Mode Selection + Language ---- */
+            <div className="flex flex-col items-center gap-10 animate-fade-in-up">
+              {/* Upload / Record cards */}
+              <div className="flex flex-col sm:flex-row gap-8">
+                {/* Upload File Card */}
+                <button
+                  onClick={() => fileInputRef.current?.click()}
+                  className="group w-72 h-72 rounded-2xl border border-[var(--cohere-border)] bg-[var(--cohere-surface)] hover:border-[var(--cohere-purple)] transition-all duration-300 cursor-pointer flex flex-col items-center justify-center gap-5 hover:shadow-[0_0_60px_-15px_var(--cohere-purple)]"
+                >
+                  <div className="text-[var(--cohere-text-muted)] group-hover:text-[var(--cohere-purple)] transition-colors duration-300">
+                    <UploadIcon />
+                  </div>
+                  <span className="text-xl text-[var(--cohere-text)]">
+                    Choose File
+                  </span>
+                  <span className="text-base text-[var(--cohere-text-muted)]">
+                    Select audio/video file
+                  </span>
+                </button>
+
+                {/* Record Audio Card */}
+                <button
+                  onClick={startRecording}
+                  className="group w-72 h-72 rounded-2xl border border-[var(--cohere-border)] bg-[var(--cohere-surface)] hover:border-[var(--cohere-purple)] transition-all duration-300 cursor-pointer flex flex-col items-center justify-center gap-5 hover:shadow-[0_0_60px_-15px_var(--cohere-purple)]"
+                >
+                  <div className="text-[var(--cohere-text-muted)] group-hover:text-[var(--cohere-purple)] transition-colors duration-300">
+                    <MicrophoneIcon />
+                  </div>
+                  <span className="text-xl text-[var(--cohere-text)]">
+                    Record Audio
+                  </span>
+                  <span className="text-base text-[var(--cohere-text-muted)]">
+                    Use your microphone
+                  </span>
+                </button>
+              </div>
+
+              {/* Language selector */}
+              <div className="flex flex-col items-center gap-3">
+                <span className="text-sm text-[var(--cohere-text-muted)]">
+                  Language
+                </span>
+                <div className="flex flex-wrap justify-center gap-2 max-w-xl">
+                  {LANGUAGES.map((lang) => (
+                    <button
+                      key={lang.code}
+                      onClick={(e) => {
+                        setLanguage(lang.code);
+                        const rect = e.currentTarget.getBoundingClientRect();
+                        confettiRef.current?.burst(
+                          rect.left + rect.width / 2,
+                          rect.top + rect.height / 2,
+                          langToFlag(lang.code),
+                        );
+                      }}
+                      className={`px-4 py-2 rounded-full text-sm transition-colors duration-200 cursor-pointer border ${
+                        language === lang.code
+                          ? "bg-[var(--cohere-purple)] text-white border-transparent"
+                          : "bg-[var(--cohere-surface)] text-[var(--cohere-text-muted)] border-[var(--cohere-border)] hover:border-[var(--cohere-purple)] hover:text-[var(--cohere-purple)]"
+                      }`}
+                    >
+                      {lang.label}
+                      {lang.label !== lang.native && (
+                        <span
+                          className={`ml-1 ${
+                            language === lang.code
+                              ? "text-white/60"
+                              : "text-[var(--cohere-text-muted)]/50"
+                          }`}
+                        >
+                          / {lang.native}
+                        </span>
+                      )}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+          ) : (
+            /* ---- Transcription Area ---- */
+            <div className="w-full max-w-3xl flex flex-col gap-6 animate-fade-in-up">
+              {/* Source indicator + status */}
+              <div className="flex items-center gap-3">
+                <div className="text-[var(--cohere-purple)]">
+                  {mode === "file" ? <FileIcon /> : <MicSmallIcon />}
+                </div>
+                <span className="text-[var(--cohere-text)] text-base">
+                  {mode === "file" ? audioFileName : "Microphone recording"}
+                </span>
+
+                {/* Recording controls */}
+                {isRecording && (
+                  <div className="flex items-center gap-3 ml-auto">
+                    <span className="flex items-center gap-2 text-sm text-red-500">
+                      <span className="w-2 h-2 bg-red-500 rounded-full animate-pulse" />
+                      Recording...
+                    </span>
+                    <button
+                      onClick={stopRecording}
+                      className="px-4 py-1.5 text-sm bg-red-50 text-red-500 border border-red-200 rounded-lg hover:bg-red-100 transition-colors cursor-pointer"
+                    >
+                      Stop
+                    </button>
+                  </div>
+                )}
+
+                {/* Status badge */}
+                {isTranscribing && !isRecording && (
+                  <span className="ml-auto flex items-center gap-2 text-sm text-[var(--cohere-text-muted)]">
+                    <svg
+                      className="animate-spin-slow"
+                      width="14"
+                      height="14"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                    >
+                      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+                    </svg>
+                    Transcribing...
+                  </span>
+                )}
+                {isDone && (
+                  <span className="ml-auto flex items-center gap-2 text-sm text-emerald-600">
+                    <CheckIcon />
+                    {stats
+                      ? `Transcribed ${formatDuration(stats.audioDuration)} of audio in ${formatDuration(stats.elapsed)}`
+                      : "Complete"}
+                  </span>
+                )}
+              </div>
+
+              {/* Transcription output */}
+              <div
+                ref={outputRef}
+                className="bg-[var(--cohere-surface)] rounded-xl p-8 min-h-[280px] max-h-[500px] overflow-y-auto border border-[var(--cohere-border)]"
+              >
+                {displayText ? (
+                  <p className="text-xl leading-relaxed text-[var(--cohere-text)] whitespace-pre-wrap">
+                    {displayText.trim()}
+                  </p>
+                ) : isRecording ? (
+                  <p className="text-[var(--cohere-text-muted)] italic">
+                    Listening... Press stop when you're done speaking.
+                  </p>
+                ) : isTranscribing ? (
+                  <div className="space-y-3">
+                    <div className="h-4 w-full rounded animate-shimmer" />
+                    <div className="h-4 w-5/6 rounded animate-shimmer" />
+                    <div className="h-4 w-4/6 rounded animate-shimmer" />
+                  </div>
+                ) : null}
+              </div>
+
+              {/* Actions */}
+              <div className="flex items-center justify-center gap-4">
+                {isDone && (
+                  <>
+                    <button
+                      onClick={copyToClipboard}
+                      className="flex items-center gap-2 px-5 py-2.5 text-base border border-[var(--cohere-border)] text-[var(--cohere-text-muted)] rounded-lg hover:border-[var(--cohere-purple)] hover:text-[var(--cohere-purple)] transition-all duration-200 cursor-pointer"
+                    >
+                      {copied ? <CheckIcon /> : <CopyIcon />}
+                      {copied ? "Copied" : "Copy"}
+                    </button>
+                    <button
+                      onClick={downloadText}
+                      className="flex items-center gap-2 px-5 py-2.5 text-base border border-[var(--cohere-border)] text-[var(--cohere-text-muted)] rounded-lg hover:border-[var(--cohere-purple)] hover:text-[var(--cohere-purple)] transition-all duration-200 cursor-pointer"
+                    >
+                      <DownloadIcon />
+                      Download
+                    </button>
+                    <button
+                      onClick={resetTranscription}
+                      className="flex items-center gap-2 px-5 py-2.5 text-base border border-[var(--cohere-purple)] text-[var(--cohere-purple)] rounded-lg hover:bg-[var(--cohere-purple)] hover:text-white transition-all duration-200 cursor-pointer"
+                    >
+                      New Transcription
+                    </button>
+                  </>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <p className="pb-4 text-center text-xs text-[var(--cohere-text-muted)]">
+          Runs 100% locally in your browser with WebGPU
+        </p>
+      </div>
+
+      {/* Drag overlay */}
+      {isDragging && (
+        <div className="fixed inset-0 z-40 flex items-center justify-center bg-white/80 backdrop-blur-sm pointer-events-none">
+          <div className="flex flex-col items-center gap-4 rounded-2xl border-2 border-dashed border-[var(--cohere-purple)] bg-[var(--cohere-surface)] px-16 py-12">
+            <UploadIcon />
+            <p className="text-lg text-[var(--cohere-text)]">
+              Drop audio/video file here
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* Confetti overlay */}
+      <Confetti ref={confettiRef} />
+
+      {/* Hidden file input */}
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="audio/*,video/*"
+        className="hidden"
+        onChange={handleFileSelect}
+      />
+    </div>
+  );
+}
+
+export default App;

src/Confetti.tsx

@@ -0,0 +1,563 @@
+import {
+  useRef,
+  useEffect,
+  useCallback,
+  useImperativeHandle,
+  forwardRef,
+} from "react";
+
+// ---- Types ----
+
+interface Particle {
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  angle: number;
+  spin: number;
+  tiltPhase: number;
+  tiltSpeed: number;
+  wobblePhase: number;
+  wobbleSpeed: number;
+  wobbleAmp: number;
+  width: number;
+  height: number;
+  age: number;
+  life: number;
+  fadeIn: number;
+  fadeOutStart: number;
+  flagCode: string;
+}
+
+interface Ribbon {
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  angle: number;
+  spin: number;
+  swayPhase: number;
+  swaySpeed: number;
+  swayAmp: number;
+  width: number;
+  length: number;
+  age: number;
+  life: number;
+  flagCode: string;
+}
+
+export interface ConfettiHandle {
+  burst: (x: number, y: number, flagCode: string) => void;
+}
+
+// ---- Constants ----
+
+const TAU = Math.PI * 2;
+const GRAVITY = 1080;
+
+// ---- Helpers ----
+
+function rand(min: number, max: number) {
+  return Math.random() * (max - min) + min;
+}
+
+function clamp(v: number, min: number, max: number) {
+  return Math.max(min, Math.min(max, v));
+}
+
+function lerp(a: number, b: number, t: number) {
+  return a + (b - a) * t;
+}
+
+function roundRect(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  r: number,
+) {
+  const rr = Math.min(r, w / 2, h / 2);
+  ctx.beginPath();
+  ctx.moveTo(x + rr, y);
+  ctx.arcTo(x + w, y, x + w, y + h, rr);
+  ctx.arcTo(x + w, y + h, x, y + h, rr);
+  ctx.arcTo(x, y + h, x, y, rr);
+  ctx.arcTo(x, y, x + w, y, rr);
+  ctx.closePath();
+}
+
+// ---- Flag rendering ----
+
+const flagCache = new Map<string, HTMLCanvasElement>();
+
+function createFlagFace(
+  code: string,
+  side: "front" | "back",
+): HTMLCanvasElement {
+  const key = `${code}-${side}`;
+  const cached = flagCache.get(key);
+  if (cached) return cached;
+
+  const off = document.createElement("canvas");
+  off.width = 160;
+  off.height = 108;
+  const g = off.getContext("2d")!;
+  const shade = side === "back";
+
+  const white = shade ? "#d6d9e3" : "#ffffff";
+  const red = shade ? "#aa4046" : "#c83b43";
+  const blue = shade ? "#2e4a82" : "#3c63b8";
+  const black = shade ? "#2c2d31" : "#111111";
+  const gold = shade ? "#b79a4c" : "#f0ca58";
+  const green = shade ? "#2f8456" : "#2fa86a";
+  const skyBlue = shade ? "#4a8ab0" : "#5bb5e8";
+  const darkRed = shade ? "#8a2020" : "#be1e2d";
+  const darkGreen = shade ? "#1a5e30" : "#1f8247";
+
+  const W = off.width;
+  const H = off.height;
+
+  g.clearRect(0, 0, W, H);
+  roundRect(g, 0, 0, W, H, 10);
+  g.clip();
+
+  switch (code) {
+    case "fr": {
+      g.fillStyle = blue;
+      g.fillRect(0, 0, W / 3, H);
+      g.fillStyle = white;
+      g.fillRect(W / 3, 0, W / 3, H);
+      g.fillStyle = red;
+      g.fillRect((W / 3) * 2, 0, W / 3, H);
+      break;
+    }
+    case "de": {
+      g.fillStyle = black;
+      g.fillRect(0, 0, W, H / 3);
+      g.fillStyle = red;
+      g.fillRect(0, H / 3, W, H / 3);
+      g.fillStyle = gold;
+      g.fillRect(0, (H / 3) * 2, W, H / 3);
+      break;
+    }
+    case "jp": {
+      g.fillStyle = white;
+      g.fillRect(0, 0, W, H);
+      g.fillStyle = red;
+      g.beginPath();
+      g.arc(W / 2, H / 2, H * 0.26, 0, TAU);
+      g.fill();
+      break;
+    }
+    case "it": {
+      g.fillStyle = green;
+      g.fillRect(0, 0, W / 3, H);
+      g.fillStyle = white;
+      g.fillRect(W / 3, 0, W / 3, H);
+      g.fillStyle = red;
+      g.fillRect((W / 3) * 2, 0, W / 3, H);
+      break;
+    }
+    case "es": {
+      g.fillStyle = red;
+      g.fillRect(0, 0, W, H / 4);
+      g.fillStyle = gold;
+      g.fillRect(0, H / 4, W, H / 2);
+      g.fillStyle = red;
+      g.fillRect(0, (H / 4) * 3, W, H / 4);
+      break;
+    }
+    case "pt": {
+      g.fillStyle = green;
+      g.fillRect(0, 0, W * 0.4, H);
+      g.fillStyle = red;
+      g.fillRect(W * 0.4, 0, W * 0.6, H);
+      // Simplified armillary sphere
+      g.fillStyle = gold;
+      g.beginPath();
+      g.arc(W * 0.4, H / 2, H * 0.22, 0, TAU);
+      g.fill();
+      break;
+    }
+    case "nl": {
+      g.fillStyle = darkRed;
+      g.fillRect(0, 0, W, H / 3);
+      g.fillStyle = white;
+      g.fillRect(0, H / 3, W, H / 3);
+      g.fillStyle = blue;
+      g.fillRect(0, (H / 3) * 2, W, H / 3);
+      break;
+    }
+    case "pl": {
+      g.fillStyle = white;
+      g.fillRect(0, 0, W, H / 2);
+      g.fillStyle = red;
+      g.fillRect(0, H / 2, W, H / 2);
+      break;
+    }
+    case "gr": {
+      // Greece: blue and white stripes with cross
+      const stripeH = H / 9;
+      for (let i = 0; i < 9; i++) {
+        g.fillStyle = i % 2 === 0 ? skyBlue : white;
+        g.fillRect(0, i * stripeH, W, stripeH + 0.5);
+      }
+      g.fillStyle = skyBlue;
+      g.fillRect(0, 0, W * 0.37, stripeH * 5);
+      g.fillStyle = white;
+      g.fillRect((W * 0.37) / 2 - stripeH * 0.5, 0, stripeH, stripeH * 5);
+      g.fillRect(0, stripeH * 2, W * 0.37, stripeH);
+      break;
+    }
+    case "sa": {
+      // Saudi Arabia (simplified): green with white
+      g.fillStyle = darkGreen;
+      g.fillRect(0, 0, W, H);
+      g.fillStyle = white;
+      g.font = `bold ${H * 0.18}px sans-serif`;
+      g.textAlign = "center";
+      g.textBaseline = "middle";
+      g.fillText("☪", W / 2, H / 2);
+      break;
+    }
+    case "cn": {
+      // China: red with yellow stars
+      g.fillStyle = red;
+      g.fillRect(0, 0, W, H);
+      g.fillStyle = gold;
+      g.beginPath();
+      g.arc(W * 0.22, H * 0.3, H * 0.14, 0, TAU);
+      g.fill();
+      // Small stars
+      for (const [sx, sy] of [
+        [0.38, 0.14],
+        [0.44, 0.24],
+        [0.44, 0.38],
+        [0.38, 0.48],
+      ] as const) {
+        g.beginPath();
+        g.arc(W * sx, H * sy, H * 0.05, 0, TAU);
+        g.fill();
+      }
+      break;
+    }
+    case "vn": {
+      // Vietnam: red with yellow star
+      g.fillStyle = red;
+      g.fillRect(0, 0, W, H);
+      g.fillStyle = gold;
+      g.beginPath();
+      g.arc(W / 2, H / 2, H * 0.22, 0, TAU);
+      g.fill();
+      break;
+    }
+    case "kr": {
+      // South Korea (simplified): white with red/blue circle
+      g.fillStyle = white;
+      g.fillRect(0, 0, W, H);
+      const cx = W / 2,
+        cy = H / 2,
+        r = H * 0.24;
+      g.fillStyle = red;
+      g.beginPath();
+      g.arc(cx, cy, r, Math.PI, 0);
+      g.fill();
+      g.fillStyle = blue;
+      g.beginPath();
+      g.arc(cx, cy, r, 0, Math.PI);
+      g.fill();
+      break;
+    }
+    case "us":
+    default: {
+      const stripeH = H / 13;
+      for (let i = 0; i < 13; i++) {
+        g.fillStyle = i % 2 === 0 ? red : white;
+        g.fillRect(0, i * stripeH, W, stripeH + 0.5);
+      }
+      g.fillStyle = blue;
+      g.fillRect(0, 0, W * 0.46, stripeH * 7);
+      g.fillStyle = white;
+      for (let row = 0; row < 5; row++) {
+        for (let col = 0; col < 6; col++) {
+          const sx = 12 + col * 10 + (row % 2) * 4;
+          const sy = 10 + row * 10;
+          g.beginPath();
+          g.arc(sx, sy, 1.6, 0, TAU);
+          g.fill();
+        }
+      }
+      break;
+    }
+  }
+
+  // Gloss / shade overlay
+  if (!shade) {
+    const gloss = g.createLinearGradient(0, 0, W, H);
+    gloss.addColorStop(0, "rgba(255,255,255,0.20)");
+    gloss.addColorStop(0.4, "rgba(255,255,255,0.02)");
+    gloss.addColorStop(1, "rgba(0,0,0,0.10)");
+    g.fillStyle = gloss;
+    g.fillRect(0, 0, W, H);
+  } else {
+    g.fillStyle = "rgba(0,0,0,0.22)";
+    g.fillRect(0, 0, W, H);
+  }
+
+  // Border
+  g.lineWidth = 2;
+  g.strokeStyle =
+    side === "front" ? "rgba(255,255,255,0.12)" : "rgba(255,255,255,0.08)";
+  roundRect(g, 1, 1, W - 2, H - 2, 10);
+  g.stroke();
+
+  flagCache.set(key, off);
+  return off;
+}
+
+// ---- Particle factories ----
+
+function makeParticle(x: number, y: number, flagCode: string): Particle {
+  const angle = rand(-Math.PI * 0.92, -Math.PI * 0.08);
+  const speed = rand(320, 860);
+  const size = rand(12, 24);
+  return {
+    x,
+    y,
+    vx: Math.cos(angle) * speed,
+    vy: Math.sin(angle) * speed,
+    angle: rand(0, TAU),
+    spin: rand(-10, 10),
+    tiltPhase: rand(0, TAU),
+    tiltSpeed: rand(8, 16),
+    wobblePhase: rand(0, TAU),
+    wobbleSpeed: rand(3.5, 8),
+    wobbleAmp: rand(4, 14),
+    width: size * rand(1.0, 1.35),
+    height: size * rand(0.55, 0.88),
+    age: 0,
+    life: rand(1.8, 2.85),
+    fadeIn: rand(0.04, 0.12),
+    fadeOutStart: rand(0.58, 0.78),
+    flagCode,
+  };
+}
+
+function makeRibbon(x: number, y: number, flagCode: string): Ribbon {
+  const angle = rand(-Math.PI * 0.92, -Math.PI * 0.08);
+  const speed = rand(280, 620);
+  return {
+    x,
+    y,
+    vx: Math.cos(angle) * speed,
+    vy: Math.sin(angle) * speed,
+    angle: rand(0, TAU),
+    spin: rand(-8, 8),
+    swayPhase: rand(0, TAU),
+    swaySpeed: rand(5, 10),
+    swayAmp: rand(5, 12),
+    width: rand(5, 7),
+    length: rand(22, 42),
+    age: 0,
+    life: rand(1.6, 2.3),
+    flagCode,
+  };
+}
+
+// ---- Alpha helper ----
+
+function alphaFor(
+  age: number,
+  life: number,
+  fadeIn: number,
+  fadeOutStart: number,
+) {
+  const t = age / life;
+  if (t < fadeIn) return t / fadeIn;
+  if (t < fadeOutStart) return 1;
+  return 1 - (t - fadeOutStart) / (1 - fadeOutStart);
+}
+
+// ---- Component ----
+
+const Confetti = forwardRef<ConfettiHandle>(function Confetti(_props, ref) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const particlesRef = useRef<Particle[]>([]);
+  const ribbonsRef = useRef<Ribbon[]>([]);
+  const rafRef = useRef<number | null>(null);
+  const lastTimeRef = useRef(0);
+  const sizeRef = useRef({ width: 0, height: 0, dpr: 1 });
+
+  // Resize handler
+  useEffect(() => {
+    function resize() {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const dpr = Math.max(1, Math.min(2, window.devicePixelRatio || 1));
+      const w = window.innerWidth;
+      const h = window.innerHeight;
+      canvas.width = Math.round(w * dpr);
+      canvas.height = Math.round(h * dpr);
+      canvas.style.width = `${w}px`;
+      canvas.style.height = `${h}px`;
+      const ctx = canvas.getContext("2d");
+      ctx?.setTransform(dpr, 0, 0, dpr, 0, 0);
+      sizeRef.current = { width: w, height: h, dpr };
+    }
+    resize();
+    window.addEventListener("resize", resize, { passive: true });
+    return () => window.removeEventListener("resize", resize);
+  }, []);
+
+  // Animation loop
+  const tick = useCallback((now: number) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    const dt = Math.min(0.033, (now - lastTimeRef.current) / 1000 || 0.016);
+    lastTimeRef.current = now;
+    const { width, height } = sizeRef.current;
+
+    ctx.clearRect(0, 0, width, height);
+
+    const particles = particlesRef.current;
+    const ribbons = ribbonsRef.current;
+
+    // Update particles
+    particlesRef.current = particles.filter((p) => {
+      p.age += dt;
+      if (p.age >= p.life) return false;
+      p.vx *= Math.pow(0.992, dt * 60);
+      p.vy += GRAVITY * dt;
+      p.vx += Math.sin(now * 0.0016 + p.wobblePhase) * 14 * dt;
+      p.x += p.vx * dt;
+      p.y += p.vy * dt;
+      p.angle += p.spin * dt;
+      p.tiltPhase += p.tiltSpeed * dt;
+      p.wobblePhase += p.wobbleSpeed * dt;
+      return p.y < height + 120 && p.x > -160 && p.x < width + 160;
+    });
+
+    // Update ribbons
+    ribbonsRef.current = ribbons.filter((r) => {
+      r.age += dt;
+      if (r.age >= r.life) return false;
+      r.vx *= Math.pow(0.989, dt * 60);
+      r.vy += GRAVITY * 0.75 * dt;
+      r.vx += Math.cos(now * 0.0012 + r.swayPhase) * 14 * 1.1 * dt;
+      r.x += r.vx * dt;
+      r.y += r.vy * dt;
+      r.angle += r.spin * dt;
+      r.swayPhase += r.swaySpeed * dt;
+      return r.y < height + 120 && r.x > -160 && r.x < width + 160;
+    });
+
+    // Draw ribbons
+    for (const r of ribbonsRef.current) {
+      const front = createFlagFace(r.flagCode, "front");
+      const back = createFlagFace(r.flagCode, "back");
+      const progress = r.age / r.life;
+      const alpha = clamp(1 - Math.pow(progress, 2.2), 0, 1);
+      const flip = Math.cos(r.swayPhase);
+      const img = flip >= 0 ? front : back;
+      const stretch = lerp(0.32, 1, Math.abs(flip));
+      const swayX = Math.sin(r.swayPhase) * r.swayAmp;
+
+      ctx.save();
+      ctx.globalAlpha = alpha * 0.86;
+      ctx.translate(r.x + swayX, r.y);
+      ctx.rotate(r.angle);
+      ctx.scale(stretch, 1);
+      ctx.drawImage(img, -r.width / 2, -r.length / 2, r.width, r.length);
+      ctx.restore();
+    }
+
+    // Draw particles
+    for (const p of particlesRef.current) {
+      const front = createFlagFace(p.flagCode, "front");
+      const back = createFlagFace(p.flagCode, "back");
+      const alpha = clamp(
+        alphaFor(p.age, p.life, p.fadeIn, p.fadeOutStart),
+        0,
+        1,
+      );
+      const progress = p.age / p.life;
+      const flip = Math.cos(p.tiltPhase);
+      const scaleX = Math.sign(flip) * lerp(0.14, 1, Math.abs(flip));
+      const wobbleX = Math.sin(p.wobblePhase) * p.wobbleAmp;
+      const wobbleY = Math.cos(p.wobblePhase * 0.8) * (p.wobbleAmp * 0.22);
+      const img = flip >= 0 ? front : back;
+
+      ctx.save();
+      ctx.globalAlpha = alpha * clamp(1 - progress * 0.1, 0.72, 1);
+      ctx.translate(p.x + wobbleX, p.y + wobbleY);
+      ctx.rotate(p.angle);
+      ctx.scale(scaleX, 1);
+      ctx.drawImage(img, -p.width / 2, -p.height / 2, p.width, p.height);
+      ctx.restore();
+    }
+
+    if (particlesRef.current.length || ribbonsRef.current.length) {
+      rafRef.current = requestAnimationFrame(tick);
+    } else {
+      rafRef.current = null;
+    }
+  }, []);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    };
+  }, []);
+
+  // Expose burst method
+  const burst = useCallback(
+    (x: number, y: number, flagCode: string) => {
+      if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+
+      const { width, height } = sizeRef.current;
+      const areaFactor = clamp((width * height) / (1440 * 900), 0.72, 1.3);
+      const particleCount = Math.round(80 * areaFactor);
+      const ribbonCount = Math.round(14 * areaFactor);
+
+      for (let i = 0; i < particleCount; i++) {
+        particlesRef.current.push(
+          makeParticle(x + rand(-8, 8), y + rand(-8, 8), flagCode),
+        );
+      }
+      for (let i = 0; i < ribbonCount; i++) {
+        ribbonsRef.current.push(
+          makeRibbon(x + rand(-12, 12), y + rand(-6, 6), flagCode),
+        );
+      }
+
+      if (!rafRef.current) {
+        lastTimeRef.current = performance.now();
+        rafRef.current = requestAnimationFrame(tick);
+      }
+    },
+    [tick],
+  );
+
+  useImperativeHandle(ref, () => ({ burst }), [burst]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      style={{
+        position: "fixed",
+        inset: 0,
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none",
+        zIndex: 50,
+      }}
+    />
+  );
+});
+
+export default Confetti;

src/TranscriberContext.tsx

@@ -0,0 +1,104 @@
+import { useRef, useState, useCallback, type ReactNode } from "react";
+import {
+  pipeline,
+  TextStreamer,
+  type AutomaticSpeechRecognitionPipeline,
+  type AutomaticSpeechRecognitionOutput,
+} from "@huggingface/transformers";
+import {
+  TranscriberContext,
+  type TranscriberState,
+} from "./transcriberContext.ts";
+
+const MODEL_ID = "onnx-community/cohere-transcribe-03-2026-ONNX";
+
+export function TranscriberProvider({ children }: { children: ReactNode }) {
+  const [status, setStatus] = useState<TranscriberState["status"]>("idle");
+  const [error, setError] = useState<string | null>(null);
+  const [progress, setProgress] = useState(0);
+  const [statusText, setStatusText] = useState("Initializing...");
+  const pipelineRef = useRef<AutomaticSpeechRecognitionPipeline | null>(null);
+  const loadingRef = useRef<Promise<void> | null>(null);
+
+  const load = useCallback(async () => {
+    if (pipelineRef.current) return;
+    if (loadingRef.current) return loadingRef.current;
+
+    const loadPromise = (async () => {
+      setStatus("loading");
+      setProgress(0);
+      setStatusText("Downloading model...");
+
+      try {
+        const transcriber = await pipeline(
+          "automatic-speech-recognition",
+          MODEL_ID,
+          {
+            dtype: "q4",
+            device: "webgpu",
+            progress_callback: (info: {
+              status: string;
+              progress?: number;
+            }) => {
+              if (info.status === "progress_total") {
+                const pct = Math.round(info.progress ?? 0);
+                setProgress(pct);
+                setStatusText(`Loading model... ${pct}%`);
+              }
+            },
+          },
+        );
+        pipelineRef.current = transcriber;
+        setProgress(100);
+        setStatusText("Ready");
+        setStatus("ready");
+      } catch (err) {
+        console.error("Failed to load transcription model:", err);
+        const message =
+          err instanceof Error ? err.message : "Failed to load model";
+        setStatus("error");
+        setError(message);
+        setStatusText(message);
+      }
+    })();
+
+    loadingRef.current = loadPromise;
+    return loadPromise;
+  }, []);
+
+  const transcribe = useCallback(
+    async (
+      audio: Float32Array,
+      language?: string,
+      onToken?: (token: string) => void,
+    ) => {
+      if (!pipelineRef.current) {
+        throw new Error("Model not loaded");
+      }
+
+      const streamer = onToken
+        ? new TextStreamer(pipelineRef.current.tokenizer, {
+            skip_prompt: true,
+            skip_special_tokens: true,
+            callback_function: onToken,
+          })
+        : undefined;
+
+      const result = (await pipelineRef.current(audio, {
+        max_new_tokens: 1024,
+        language,
+        streamer,
+      })) as AutomaticSpeechRecognitionOutput;
+      return result.text;
+    },
+    [],
+  );
+
+  return (
+    <TranscriberContext.Provider
+      value={{ status, error, progress, statusText, load, transcribe }}
+    >
+      {children}
+    </TranscriberContext.Provider>
+  );
+}

src/icons.tsx

@@ -0,0 +1,152 @@
+export function CohereLogo({ size = 48 }: { size?: number }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        clipRule="evenodd"
+        d="M8.128 14.099c.592 0 1.77-.033 3.398-.703 1.897-.781 5.672-2.2 8.395-3.656 1.905-1.018 2.74-2.366 2.74-4.18A4.56 4.56 0 0018.1 1H7.549A6.55 6.55 0 001 7.55c0 3.617 2.745 6.549 7.128 6.549z"
+        fill="#39594D"
+        fillRule="evenodd"
+      ></path>
+      <path
+        clipRule="evenodd"
+        d="M9.912 18.61a4.387 4.387 0 012.705-4.052l3.323-1.38c3.361-1.394 7.06 1.076 7.06 4.715a5.104 5.104 0 01-5.105 5.104l-3.597-.001a4.386 4.386 0 01-4.386-4.387z"
+        fill="#D18EE2"
+        fillRule="evenodd"
+      ></path>
+      <path
+        d="M4.776 14.962A3.775 3.775 0 001 18.738v.489a3.776 3.776 0 007.551 0v-.49a3.775 3.775 0 00-3.775-3.775z"
+        fill="#FF7759"
+      ></path>
+    </svg>
+  );
+}
+
+export function UploadIcon() {
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+      <polyline points="17 8 12 3 7 8" />
+      <line x1="12" y1="3" x2="12" y2="15" />
+    </svg>
+  );
+}
+
+export function MicrophoneIcon() {
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <rect x="9" y="2" width="6" height="11" rx="3" />
+      <path d="M5 10a7 7 0 0 0 14 0" />
+      <line x1="12" y1="17" x2="12" y2="21" />
+      <line x1="8" y1="21" x2="16" y2="21" />
+    </svg>
+  );
+}
+
+export function CopyIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+    </svg>
+  );
+}
+
+export function DownloadIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+      <polyline points="7 10 12 15 17 10" />
+      <line x1="12" y1="15" x2="12" y2="3" />
+    </svg>
+  );
+}
+
+export function CheckIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  );
+}
+
+export function FileIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    >
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+      <polyline points="14 2 14 8 20 8" />
+    </svg>
+  );
+}
+
+export function MicSmallIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    >
+      <rect x="9" y="2" width="6" height="11" rx="3" />
+      <path d="M5 10a7 7 0 0 0 14 0" />
+    </svg>
+  );
+}

src/index.css

@@ -0,0 +1,135 @@
+@import "tailwindcss";
+
+/* ---- Font ---- */
+@font-face {
+  font-family: "CohereText";
+  src: url("/CohereText-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* ---- CSS Custom Properties ---- */
+:root {
+  --cohere-purple: #863bff;
+  --cohere-deep-purple: #7e14ff;
+  --cohere-cyan: #47bfff;
+  --cohere-lavender: #ede6ff;
+  --cohere-green: #355146;
+  --cohere-bg: #ffffff;
+  --cohere-surface: #f5f5f7;
+  --cohere-surface-light: #eeeef0;
+  --cohere-border: #e0e0e4;
+  --cohere-text: #1a1a2e;
+  --cohere-text-muted: #6b6b80;
+}
+
+/* ---- Global ---- */
+body {
+  background: var(--cohere-bg);
+  color: var(--cohere-text);
+  font-family:
+    "CohereText",
+    system-ui,
+    -apple-system,
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  overflow: hidden;
+  margin: 0;
+}
+
+/* ---- Scrollbar ---- */
+::-webkit-scrollbar {
+  width: 6px;
+}
+::-webkit-scrollbar-track {
+  background: var(--cohere-surface);
+}
+::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #aaa;
+}
+
+/* ---- Screen Transitions ---- */
+.screen {
+  position: absolute;
+  inset: 0;
+  transition:
+    opacity 0.6s ease,
+    transform 0.6s ease;
+}
+.screen-enter {
+  opacity: 1;
+  transform: scale(1);
+  z-index: 10;
+}
+.screen-exit {
+  opacity: 0;
+  transform: scale(1.02);
+  pointer-events: none;
+  z-index: 5;
+}
+.screen-hidden {
+  opacity: 0;
+  transform: scale(0.98);
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* ---- Keyframes ---- */
+@keyframes pulse-glow {
+  0%,
+  100% {
+    opacity: 0.4;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-pulse-glow {
+  animation: pulse-glow 2s ease-in-out infinite;
+}
+.animate-spin-slow {
+  animation: spin 1.2s linear infinite;
+}
+.animate-fade-in-up {
+  animation: fade-in-up 0.8s ease forwards;
+}
+.animate-shimmer {
+  background: linear-gradient(
+    90deg,
+    var(--cohere-surface) 25%,
+    var(--cohere-surface-light) 50%,
+    var(--cohere-surface) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+}

src/main.tsx

@@ -0,0 +1,13 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
+import { TranscriberProvider } from "./TranscriberContext.tsx";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <TranscriberProvider>
+      <App />
+    </TranscriberProvider>
+  </StrictMode>,
+);

src/transcriberContext.ts

@@ -0,0 +1,24 @@
+import { createContext, useContext } from "react";
+
+export interface TranscriberState {
+  status: "idle" | "loading" | "ready" | "error";
+  error: string | null;
+  progress: number;
+  statusText: string;
+  load: () => Promise<void>;
+  transcribe: (
+    audio: Float32Array,
+    language?: string,
+    onToken?: (token: string) => void,
+  ) => Promise<string>;
+}
+
+export const TranscriberContext = createContext<TranscriberState | null>(null);
+
+export function useTranscriber() {
+  const ctx = useContext(TranscriberContext);
+  if (!ctx) {
+    throw new Error("useTranscriber must be used within TranscriberProvider");
+  }
+  return ctx;
+}

src/utils.ts

@@ -0,0 +1,21 @@
+// Map language codes to flag rendering codes
+const LANG_TO_FLAG: Record<string, string> = {
+  en: "us",
+  fr: "fr",
+  de: "de",
+  es: "es",
+  it: "it",
+  pt: "pt",
+  nl: "nl",
+  pl: "pl",
+  el: "gr",
+  ar: "sa",
+  ja: "jp",
+  zh: "cn",
+  vi: "vn",
+  ko: "kr",
+};
+
+export function langToFlag(langCode: string): string {
+  return LANG_TO_FLAG[langCode] ?? langCode;
+}

style.css

@@ -1,28 +0,0 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-
-.card p:last-child {
-	margin-bottom: 0;
-}

tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2023",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+});