+
+ );
+}
diff --git a/examples/webgpu-whisper-ts/src/components/Whisper.tsx b/examples/webgpu-whisper-ts/src/components/Whisper.tsx
new file mode 100644
index 000000000..c66c43577
--- /dev/null
+++ b/examples/webgpu-whisper-ts/src/components/Whisper.tsx
@@ -0,0 +1,300 @@
+import { useEffect, useRef, useState } from "react";
+import AudioVisualizer from "./AudioVisualizer";
+import { useWorker } from "../hooks/useWorker";
+import Progress from "./Progress";
+
+import { LanguageSelector } from "./LanguageSelector";
+
+const IS_WEBGPU_AVAILABLE = !!navigator.gpu;
+
+const WHISPER_SAMPLING_RATE = 16_000;
+const MAX_AUDIO_LENGTH = 30; // seconds
+const MAX_SAMPLES = WHISPER_SAMPLING_RATE * MAX_AUDIO_LENGTH;
+
+export default function Whisper() {
+ const {
+ worker,
+ status,
+ loadingMessage,
+ progressItems,
+ audioContextRef,
+ chunks,
+ recorderRef,
+ isProcessing,
+ recording,
+ text,
+ language,
+ stream,
+ setStatus,
+ setStream,
+ setRecording,
+ setChunks,
+ setLanguage,
+ tps,
+ } = useWorker();
+
+ // State for incremental word display
+ const [displayedText, setDisplayedText] = useState
+ {text} ({percentage.toFixed(2)}%
+ {isNaN(total) ? '' : ` of ${formatBytes(total)}`})
+
+
+
+ ) : (
+
+
+
+
+
+
+ 
+
+
+ + Whisper WebGPU +
++ Real-time in-browser speech recognition +
+
+ {status === null && (
+ <>
+
+
+
+
+ You are about to load{" "}
+
+ whisper-base
+
+ , a 73 million parameter speech recognition model that is
+ optimized for inference on the web. Once downloaded, the model
+ (~200 MB) will be cached and reused when you revisit the
+ page.
+
+
+ Everything runs directly in your browser using{" "}
+
+ 🤗 Transformers.js
+ {" "}
+ and ONNX Runtime Web, meaning no data is sent to a server. You
+ can even disconnect from the internet after the model has
+ loaded!
+
+
+
+
+ )}
+
+
+
+
+
+
+ {status === "ready" && (
+
+
+ {tps && (
+
+ )}
+
+ {status === "loading" && (
+
+ {tps?.toFixed(2)} tok/s
+
+ )}
+
+
+ )}
+ {loadingMessage}
+ {progressItems.map(({ file, progress, total }, i) => ( + + ))} +
+
+ );
+}
diff --git a/examples/webgpu-whisper-ts/src/hooks/useWorker.ts b/examples/webgpu-whisper-ts/src/hooks/useWorker.ts
new file mode 100644
index 000000000..50f1934bc
--- /dev/null
+++ b/examples/webgpu-whisper-ts/src/hooks/useWorker.ts
@@ -0,0 +1,154 @@
+import { useEffect, useRef, useState } from "react";
+
+type Status =
+ | "loading"
+ | "initiate"
+ | "progress"
+ | "done"
+ | "ready"
+ | "start"
+ | "update"
+ | "complete"
+ | "error";
+
+interface ProgressItem {
+ file: string;
+ loaded: number;
+ progress: number;
+ total: number;
+ name?: string;
+ status: string;
+}
+
+export const useWorker = () => {
+ const worker = useRef
+
+
+ WebGPU Not Supported
++ This browser doesn't support WebGPU, which is required for this + application. Please try using a modern browser like Chrome or Edge. +
+