@remotion/whisper-web 4.0.302

package/package.json

@@ -0,0 +1,52 @@
+{
+  "repository": {
+    "url": "https://github.com/remotion-dev/remotion/tree/main/packages/whisper-web"
+  },
+  "name": "@remotion/whisper-web",
+  "version": "4.0.302",
+  "main": "dist/index.js",
+  "sideEffects": false,
+  "author": "Hunain Ahmed <junaidhunain6@gmail.com>",
+  "license": "UNLICENSED",
+  "dependencies": {},
+  "devDependencies": {
+    "eslint": "9.19.0",
+    "@remotion/eslint-config-internal": "4.0.302"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.js",
+      "module": "./dist/esm/index.mjs",
+      "import": "./dist/esm/index.mjs"
+    },
+    "./main": {
+      "require": "./main.js",
+      "module": "./main.js",
+      "import": "./main.js"
+    },
+    "./worker": {
+      "require": "./worker.js",
+      "module": "./worker.js",
+      "import": "./worker.js"
+    }
+  },
+  "keywords": [
+    "remotion",
+    "openai",
+    "whisper",
+    "wasm"
+  ],
+  "homepage": "https://www.remotion.dev/docs/whisper-web",
+  "description": "Helpers for using Whisper.cpp in browser using WASM",
+  "scripts": {
+    "formatting": "prettier src --check",
+    "test": "bun test src",
+    "lint": "eslint src",
+    "make": "tsc -d && bun --env-file=../.env.bundle bundle.ts"
+  }
+}

package/src/can-use-whisper-web.ts

@@ -0,0 +1,103 @@
+import type {WhisperWebModel} from './constants';
+import {SIZES} from './constants';
+
+export enum WhisperWebUnsupportedReason {
+	WindowUndefined = 'window-undefined',
+	IndexedDbUnavailable = 'indexed-db-unavailable',
+	NavigatorStorageUnavailable = 'navigator-storage-unavailable',
+	StorageEstimationApiUnavailable = 'storage-estimation-api-unavailable',
+	QuotaUndefined = 'quota-undefined',
+	UsageUndefined = 'usage-undefined',
+	NotEnoughSpace = 'not-enough-space',
+	ErrorEstimatingStorage = 'error-estimating-storage',
+	NotCrossOriginIsolated = 'not-cross-origin-isolated',
+}
+
+export interface CanUseWhisperWebResult {
+	supported: boolean;
+	reason?: WhisperWebUnsupportedReason;
+	detailedReason?: string;
+}
+
+export const canUseWhisperWeb = async (
+	model: WhisperWebModel,
+): Promise<CanUseWhisperWebResult> => {
+	if (typeof window === 'undefined') {
+		return {
+			supported: false,
+			reason: WhisperWebUnsupportedReason.WindowUndefined,
+			detailedReason:
+				'`window` is not defined. This module can only be used in a browser environment.',
+		};
+	}
+
+	if (!window.crossOriginIsolated) {
+		return {
+			supported: false,
+			reason: WhisperWebUnsupportedReason.NotCrossOriginIsolated,
+			detailedReason:
+				'The document is not cross-origin isolated (window.crossOriginIsolated = false). This prevents the usage of SharedArrayBuffer, which is required by `@remotion/whisper-web`. Make sure the document is served with the HTTP header `Cross-Origin-Opener-Policy: same-origin` and `Cross-Origin-Embedder-Policy: require-corp`: https://developer.mozilla.org/en-US/docs/Web/API/Window/crossOriginIsolated',
+		};
+	}
+
+	if (!window.indexedDB) {
+		return {
+			supported: false,
+			reason: WhisperWebUnsupportedReason.IndexedDbUnavailable,
+			detailedReason: 'IndexedDB is not available in this environment.',
+		};
+	}
+
+	if (!navigator?.storage || !navigator?.storage.estimate) {
+		return {
+			supported: false,
+			reason: WhisperWebUnsupportedReason.NavigatorStorageUnavailable,
+			detailedReason:
+				'`navigator.storage.estimate()` API is not available in this environment.',
+		};
+	}
+
+	try {
+		const estimate = await navigator.storage.estimate();
+
+		if (estimate.quota === undefined) {
+			return {
+				supported: false,
+				reason: WhisperWebUnsupportedReason.QuotaUndefined,
+				detailedReason:
+					'navigator.storage.estimate() API returned undefined quota.',
+			};
+		}
+
+		if (estimate.usage === undefined) {
+			return {
+				supported: false,
+				reason: WhisperWebUnsupportedReason.UsageUndefined,
+				detailedReason:
+					'navigator.storage.estimate() API returned undefined usage.',
+			};
+		}
+
+		const remaining = estimate.quota - estimate.usage;
+		const modelSize = SIZES[model];
+
+		if (remaining < modelSize) {
+			return {
+				supported: false,
+				reason: WhisperWebUnsupportedReason.NotEnoughSpace,
+				detailedReason: `Not enough space to download the model. Required: ${modelSize} bytes, Available: ${remaining} bytes.`,
+			};
+		}
+	} catch (error) {
+		const errorMessage = error instanceof Error ? error.message : String(error);
+		return {
+			supported: false,
+			reason: WhisperWebUnsupportedReason.ErrorEstimatingStorage,
+			detailedReason: `Error estimating storage: ${errorMessage}`,
+		};
+	}
+
+	return {
+		supported: true,
+	};
+};

package/src/constants.ts

@@ -0,0 +1,232 @@
+export const DB_NAME = 'whisper-web';
+export const DB_VERSION = 1;
+export const DB_OBJECT_STORE_NAME = 'models';
+
+export const MODELS = [
+	'tiny',
+	'tiny.en',
+	'base',
+	'base.en',
+	'small',
+	'small.en',
+] as const;
+
+export type WhisperWebModel = (typeof MODELS)[number];
+
+export const LANGUAGES = [
+	// whisper allows passing 'auto' to auto-detect the language
+	'auto',
+	// short codes
+	'en',
+	'zh',
+	'de',
+	'es',
+	'ru',
+	'ko',
+	'fr',
+	'ja',
+	'pt',
+	'tr',
+	'pl',
+	'ca',
+	'nl',
+	'ar',
+	'sv',
+	'it',
+	'id',
+	'hi',
+	'fi',
+	'vi',
+	'he',
+	'uk',
+	'el',
+	'ms',
+	'cs',
+	'ro',
+	'da',
+	'hu',
+	'ta',
+	'no',
+	'th',
+	'ur',
+	'hr',
+	'bg',
+	'lt',
+	'la',
+	'mi',
+	'ml',
+	'cy',
+	'sk',
+	'te',
+	'fa',
+	'lv',
+	'bn',
+	'sr',
+	'az',
+	'sl',
+	'kn',
+	'et',
+	'mk',
+	'br',
+	'eu',
+	'is',
+	'hy',
+	'ne',
+	'mn',
+	'bs',
+	'kk',
+	'sq',
+	'sw',
+	'gl',
+	'mr',
+	'pa',
+	'si',
+	'km',
+	'sn',
+	'yo',
+	'so',
+	'af',
+	'oc',
+	'ka',
+	'be',
+	'tg',
+	'sd',
+	'gu',
+	'am',
+	'yi',
+	'lo',
+	'uz',
+	'fo',
+	'ht',
+	'ps',
+	'tk',
+	'nn',
+	'mt',
+	'sa',
+	'lb',
+	'my',
+	'bo',
+	'tl',
+	'mg',
+	'as',
+	'tt',
+	'haw',
+	'ln',
+	'ha',
+	'ba',
+	'jw',
+	'su',
+	'yue',
+	// aliases
+	'english',
+	'chinese',
+	'german',
+	'spanish',
+	'russian',
+	'korean',
+	'french',
+	'japanese',
+	'portuguese',
+	'turkish',
+	'polish',
+	'catalan',
+	'dutch',
+	'arabic',
+	'swedish',
+	'italian',
+	'indonesian',
+	'hindi',
+	'finnish',
+	'vietnamese',
+	'hebrew',
+	'ukrainian',
+	'greek',
+	'malay',
+	'czech',
+	'romanian',
+	'danish',
+	'hungarian',
+	'tamil',
+	'norwegian',
+	'thai',
+	'urdu',
+	'croatian',
+	'bulgarian',
+	'lithuanian',
+	'latin',
+	'maori',
+	'malayalam',
+	'welsh',
+	'slovak',
+	'telugu',
+	'persian',
+	'latvian',
+	'bengali',
+	'serbian',
+	'azerbaijani',
+	'slovenian',
+	'kannada',
+	'estonian',
+	'macedonian',
+	'breton',
+	'basque',
+	'icelandic',
+	'armenian',
+	'nepali',
+	'mongolian',
+	'bosnian',
+	'kazakh',
+	'albanian',
+	'swahili',
+	'galician',
+	'marathi',
+	'punjabi',
+	'sinhala',
+	'khmer',
+	'shona',
+	'yoruba',
+	'somali',
+	'afrikaans',
+	'occitan',
+	'georgian',
+	'belarusian',
+	'tajik',
+	'sindhi',
+	'gujarati',
+	'amharic',
+	'yiddish',
+	'lao',
+	'uzbek',
+	'faroese',
+	'haitian creole',
+	'pashto',
+	'turkmen',
+	'nynorsk',
+	'maltese',
+	'sanskrit',
+	'luxembourgish',
+	'myanmar',
+	'tibetan',
+	'tagalog',
+	'malagasy',
+	'assamese',
+	'tatar',
+	'hawaiian',
+	'lingala',
+	'hausa',
+	'bashkir',
+	'javanese',
+	'sundanese',
+	'cantonese',
+] as const;
+
+export type WhisperWebLanguage = (typeof LANGUAGES)[number];
+
+export const SIZES: {[key in WhisperWebModel]: number} = {
+	tiny: 77691713,
+	'tiny.en': 77704715,
+	base: 147951465,
+	'base.en': 147964211,
+	small: 487601967,
+	'small.en': 487614201,
+};

package/src/db/delete-object.ts

@@ -0,0 +1,16 @@
+import {openDb} from './open-db';
+
+export const deleteObject = async ({key}: {key: string}) => {
+	const objectStore = await openDb('readwrite');
+
+	return new Promise<void>((resolve, reject) => {
+		const request = objectStore.delete(key);
+		request.onsuccess = () => {
+			resolve();
+		};
+
+		request.onerror = () => {
+			reject(request.error);
+		};
+	});
+};

package/src/db/get-object-from-db.ts

@@ -0,0 +1,43 @@
+import {openDb} from './open-db';
+
+export const getObjectFromObjectStore = ({
+	objectStore,
+	key,
+}: {
+	objectStore: IDBObjectStore;
+	key: string;
+}) => {
+	return new Promise<Uint8Array>((resolve, reject) => {
+		const request = objectStore.get(key);
+		request.onsuccess = () => {
+			resolve(request.result as Uint8Array);
+		};
+
+		request.onerror = () => {
+			reject(request.error);
+		};
+	});
+};
+
+export const getKeysFromObjectStore = ({
+	objectStore,
+}: {
+	objectStore: IDBObjectStore;
+}) => {
+	return new Promise<IDBValidKey[]>((resolve, reject) => {
+		const request = objectStore.getAllKeys();
+		request.onsuccess = () => {
+			resolve(request.result as IDBValidKey[]);
+		};
+
+		request.onerror = () => {
+			reject(request.error);
+		};
+	});
+};
+
+export const getObject = async ({key}: {key: string}) => {
+	const objectStore = await openDb('readonly');
+
+	return getObjectFromObjectStore({objectStore, key});
+};

package/src/db/open-db.ts

@@ -0,0 +1,62 @@
+import {DB_NAME, DB_OBJECT_STORE_NAME, DB_VERSION} from '../constants';
+
+export const openDb = (transactionMode: IDBTransactionMode) => {
+	return new Promise<IDBObjectStore>((resolve, reject) => {
+		const rq = indexedDB.open(DB_NAME, DB_VERSION);
+
+		rq.onupgradeneeded = (event) => {
+			try {
+				const db = rq.result;
+				if (event.oldVersion < DB_VERSION) {
+					db.createObjectStore(DB_OBJECT_STORE_NAME, {autoIncrement: false});
+				} else {
+					const {transaction} = event.currentTarget as IDBOpenDBRequest;
+					if (!transaction) {
+						throw new Error('No transaction available during upgrade');
+					}
+
+					const objectStore = transaction.objectStore(DB_OBJECT_STORE_NAME);
+					if (!objectStore) {
+						throw new Error('Could not access object store during upgrade');
+					}
+
+					objectStore.clear();
+				}
+			} catch (err) {
+				reject(new Error(`Failed to upgrade database: ${err}`));
+			}
+		};
+
+		rq.onsuccess = () => {
+			try {
+				const db = rq.result;
+				const transaction = db.transaction(
+					[DB_OBJECT_STORE_NAME],
+					transactionMode,
+				);
+
+				transaction.onerror = () => {
+					reject(new Error('Transaction failed'));
+				};
+
+				transaction.onabort = () => {
+					reject(new Error('Transaction aborted'));
+				};
+
+				const objectStore = transaction.objectStore(DB_OBJECT_STORE_NAME);
+				resolve(objectStore);
+			} catch (err) {
+				reject(new Error(`Failed to open database: ${err}`));
+			}
+		};
+
+		rq.onerror = () => {
+			const error = rq.error?.message ?? 'Unknown error';
+			reject(new Error(`Failed to open IndexedDB: ${error}`));
+		};
+
+		rq.onblocked = () => {
+			reject(new Error('Database is blocked by another connection'));
+		};
+	});
+};

package/src/db/put-object.ts

@@ -0,0 +1,27 @@
+import {openDb} from './open-db';
+
+export const putObject = async ({
+	key,
+	value,
+}: {
+	key: string;
+	value: Uint8Array;
+}) => {
+	const objectStore = await openDb('readwrite');
+
+	return new Promise<void>((resolve, reject) => {
+		try {
+			const putRq = objectStore.put(value, key);
+
+			putRq.onsuccess = () => {
+				resolve();
+			};
+
+			putRq.onerror = () => {
+				reject(new Error(`Failed to store "${key}" in IndexedDB`));
+			};
+		} catch (e) {
+			reject(new Error(`Failed to store "${key}" in IndexedDB: ${e}`));
+		}
+	});
+};

package/src/delete-model.ts

@@ -0,0 +1,8 @@
+import type {WhisperWebModel} from './constants';
+import {deleteObject} from './db/delete-object';
+import {getModelUrl} from './get-model-url';
+
+export const deleteModel = async (model: WhisperWebModel) => {
+	const url = getModelUrl(model);
+	await deleteObject({key: url});
+};

package/src/download-model.ts

@@ -0,0 +1,52 @@
+export const fetchRemote = async ({
+	url,
+	onProgress,
+	expectedLength,
+}: {
+	url: string;
+	onProgress: (progress: number) => void;
+	expectedLength: number;
+}) => {
+	//  start the fetch
+	const response = await fetch(url, {method: 'get'});
+	if (!response.ok || !response.body) {
+		throw new Error(`failed to fetch: ${url}`);
+	}
+
+	const contentLength = response.headers.get('content-length') as string;
+	//  hugging face servers do include this header
+	const total = parseInt(contentLength, 10);
+	if (total !== expectedLength) {
+		throw new Error(
+			`Content-Length header is ${total} for ${url} but expected ${expectedLength}`,
+		);
+	}
+
+	const reader = response.body.getReader();
+
+	const chunks: Uint8Array[] = [];
+	let receivedLength = 0;
+
+	while (true) {
+		const {done, value} = await reader.read();
+
+		if (done) {
+			break;
+		}
+
+		chunks.push(value);
+		receivedLength += value.length;
+
+		onProgress(receivedLength);
+	}
+
+	let position = 0;
+	const chunksAll = new Uint8Array(receivedLength);
+
+	for (const chunk of chunks) {
+		chunksAll.set(chunk, position);
+		position += chunk.length;
+	}
+
+	return chunksAll;
+};

package/src/download-whisper-model.ts

@@ -0,0 +1,86 @@
+import {canUseWhisperWeb} from './can-use-whisper-web';
+import {MODELS, SIZES, type WhisperWebModel} from './constants';
+import {getObject} from './db/get-object-from-db';
+import {putObject} from './db/put-object';
+import {fetchRemote} from './download-model';
+import {getModelUrl} from './get-model-url';
+
+export type DownloadWhisperModelProgress = {
+	downloadedBytes: number;
+	totalBytes: number;
+	progress: number;
+};
+
+export type DownloadWhisperModelOnProgress = (
+	progress: DownloadWhisperModelProgress,
+) => void;
+
+export interface DownloadWhisperModelParams {
+	model: WhisperWebModel;
+	onProgress: DownloadWhisperModelOnProgress;
+}
+
+export type DownloadWhisperModelResult = {
+	alreadyDownloaded: boolean;
+};
+
+export const downloadWhisperModel = async ({
+	model,
+	onProgress,
+}: DownloadWhisperModelParams): Promise<DownloadWhisperModelResult> => {
+	if (!model || !MODELS.includes(model)) {
+		throw new Error(
+			`Invalid model name: ${model}. Supported models: ${MODELS.join(', ')}.`,
+		);
+	}
+
+	const usabilityCheck = await canUseWhisperWeb(model);
+
+	if (!usabilityCheck.supported) {
+		return Promise.reject(
+			new Error(
+				`Whisper.wasm is not supported in this environment. Reason: ${usabilityCheck.detailedReason}`,
+			),
+		);
+	}
+
+	const url = getModelUrl(model);
+	const modelSize = SIZES[model];
+
+	const existingModel = await getObject({key: url});
+	if (existingModel) {
+		onProgress({
+			downloadedBytes: modelSize,
+			totalBytes: modelSize,
+			progress: 1,
+		});
+
+		return {
+			alreadyDownloaded: true,
+		};
+	}
+
+	const data = await fetchRemote({
+		url,
+		onProgress: (bytes) => {
+			onProgress({
+				downloadedBytes: bytes,
+				progress: bytes / modelSize,
+				totalBytes: modelSize,
+			});
+		},
+		expectedLength: modelSize,
+	});
+
+	onProgress({
+		downloadedBytes: modelSize,
+		totalBytes: modelSize,
+		progress: 1,
+	});
+
+	await putObject({key: url, value: data});
+
+	return {
+		alreadyDownloaded: false,
+	};
+};

package/src/get-loaded-models.ts

@@ -0,0 +1,22 @@
+import type {WhisperWebModel} from './constants';
+import {MODELS} from './constants';
+import {getKeysFromObjectStore} from './db/get-object-from-db';
+import {openDb} from './db/open-db';
+import {getModelUrl} from './get-model-url';
+
+export const getLoadedModels = async (): Promise<WhisperWebModel[]> => {
+	const objectStore = await openDb('readonly');
+	const loadedModels: WhisperWebModel[] = [];
+
+	const result = await getKeysFromObjectStore({
+		objectStore,
+	});
+
+	for (const model of MODELS) {
+		if (result.includes(getModelUrl(model))) {
+			loadedModels.push(model);
+		}
+	}
+
+	return loadedModels;
+};