{"_id":"@chand1012/whisper-web-transcriber-desktop","name":"@chand1012/whisper-web-transcriber-desktop","dist-tags":{"latest":"0.2.3"},"versions":{"0.2.3":{"name":"@chand1012/whisper-web-transcriber-desktop","version":"0.2.3","description":"Real-time audio transcription in the browser using OpenAI's Whisper model via WebAssembly","type":"module","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","private":false,"exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.js","types":"./dist/index.d.ts"}},"keywords":["whisper","speech-to-text","transcription","webassembly","audio","real-time","openai","whisper.cpp"],"author":{"name":"chand1012"},"license":"MIT","devDependencies":{"@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-typescript":"^11.1.5","rollup":"^4.9.2","rollup-plugin-copy":"^3.5.0","tslib":"^2.6.2","typescript":"^5.3.3"},"repository":{"type":"git","url":"git+https://github.com/perception30/whisper-web-transcriber.git"},"bugs":{"url":"https://github.com/perception30/whisper-web-transcriber/issues"},"homepage":"https://github.com/perception30/whisper-web-transcriber#readme","scripts":{"build":"rollup -c","dev":"rollup -c -w","demo":"python3 server.py"},"_id":"@chand1012/whisper-web-transcriber-desktop@0.2.3","_integrity":"sha512-GkE9XUE3E6XN/+cr/bl5HdtiIeREpf25UERrQW77cL/g+hoel4v+f8RvoVXz6A9j75tvko0W+zwcPLSiurM9AA==","_resolved":"/private/var/folders/4m/_vvtjb0s30920j0b8x6npj8h0000gn/T/4ed182855bfbed5508a6a72929637b5a/chand1012-whisper-web-transcriber-desktop-0.2.3.tgz","_from":"file:chand1012-whisper-web-transcriber-desktop-0.2.3.tgz","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-GkE9XUE3E6XN/+cr/bl5HdtiIeREpf25UERrQW77cL/g+hoel4v+f8RvoVXz6A9j75tvko0W+zwcPLSiurM9AA==","shasum":"67daa8f9c099849258e42b32b424a6886c7e2d84","tarball":"https://registry.npmjs.org/@chand1012/whisper-web-transcriber-desktop/-/whisper-web-transcriber-desktop-0.2.3.tgz","fileCount":13,"unpackedSize":4610175,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCICv+zqKhEpxb9/iPUgT9kI6QBR2h/B/GUFfmXA98D7bZAiEA/wvqnsYyLbykXj/liRm47cM5GVTo/eWkOk0nRZAh6gw="}]},"_npmUser":{"name":"chand1012","email":"chandler@chand1012.dev"},"directories":{},"maintainers":[{"name":"chand1012","email":"chandler@chand1012.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/whisper-web-transcriber-desktop_0.2.3_1756064570842_0.12309368684375843"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-24T19:42:50.705Z","0.2.3":"2025-08-24T19:42:51.200Z","modified":"2025-08-24T19:42:51.587Z"},"maintainers":[{"name":"chand1012","email":"chandler@chand1012.dev"}],"description":"Real-time audio transcription in the browser using OpenAI's Whisper model via WebAssembly","homepage":"https://github.com/perception30/whisper-web-transcriber#readme","keywords":["whisper","speech-to-text","transcription","webassembly","audio","real-time","openai","whisper.cpp"],"repository":{"type":"git","url":"git+https://github.com/perception30/whisper-web-transcriber.git"},"author":{"name":"chand1012"},"bugs":{"url":"https://github.com/perception30/whisper-web-transcriber/issues"},"license":"MIT","readme":"# Whisper Web Transcriber\n\nReal-time audio transcription in the browser using OpenAI's Whisper model via WebAssembly. This package provides an easy-to-use API for integrating speech-to-text capabilities into web applications without any server-side processing.\n\n**[Live Demo](https://demoproject1-jz33savrh-perception30s-projects.vercel.app)** 🎙️ | **[Live Usage on Real Site](https://interviewhacker.ai/)** 🚀\n\n## Features\n\n- 🎙️ Real-time audio transcription from microphone\n- 🌐 Runs entirely in the browser (no server required)\n- 📦 Multiple Whisper model options (tiny, base, quantized versions)\n- 💾 Automatic model caching in IndexedDB\n- 🔧 Simple, promise-based API\n- 📱 Works on all modern browsers with WebAssembly support\n- 🌍 Platform-independent (same WASM works on all OS)\n\n## Installation\n\n### NPM Package\n```bash\nnpm install whisper-web-transcriber\n```\n\nOr using yarn:\n```bash\nyarn add whisper-web-transcriber\n```\n\n### CDN Usage (Bundled Version)\n```html\n<!-- Single file with all dependencies included -->\n<script src=\"https://unpkg.com/whisper-web-transcriber/dist/index.bundled.min.js\"></script>\n```\n\n\n## Quick Start\n\n### Using NPM Package\n```javascript\nimport { WhisperTranscriber } from 'whisper-web-transcriber';\n\nconst transcriber = new WhisperTranscriber({\n  modelSize: 'base-en-q5_1',\n  onTranscription: (text) => {\n    console.log('Transcribed:', text);\n  }\n});\n\nawait transcriber.loadModel();\nawait transcriber.startRecording();\n```\n\n### Using CDN (Bundled Version)\n```html\n<script src=\"https://unpkg.com/whisper-web-transcriber/dist/index.bundled.min.js\"></script>\n<script>\n  const transcriber = new WhisperTranscriber.WhisperTranscriber({\n    modelSize: 'base-en-q5_1',\n    onTranscription: (text) => {\n      console.log('Transcribed:', text);\n    }\n  });\n\n  transcriber.loadModel().then(() => {\n    transcriber.startRecording();\n  });\n</script>\n```\n\n## API Reference\n\n### Constructor Options\n\n```typescript\ninterface WhisperConfig {\n  modelUrl?: string;              // Custom model URL (optional)\n  modelSize?: 'tiny.en' | 'base.en' | 'tiny-en-q5_1' | 'base-en-q5_1';\n  sampleRate?: number;            // Audio sample rate (default: 16000)\n  audioIntervalMs?: number;       // Audio processing interval (default: 5000ms)\n  onTranscription?: (text: string) => void;\n  onProgress?: (progress: number) => void;\n  onStatus?: (status: string) => void;\n  debug?: boolean;                // Enable debug logging (default: false)\n}\n```\n\n### Methods\n\n- `loadModel(): Promise<void>` - Downloads and initializes the Whisper model\n- `startRecording(): Promise<void>` - Starts microphone recording and transcription\n- `stopRecording(): void` - Stops recording\n- `destroy(): void` - Cleanup resources\n- `getServiceWorkerCode(): string | null` - Returns the COI service worker code (bundled version only)\n- `getCrossOriginIsolationInstructions(): string` - Returns setup instructions for Cross-Origin Isolation\n\n## Model Options\n\n| Model | Size | Description |\n|-------|------|-------------|\n| `tiny.en` | 75 MB | Fastest, lower accuracy |\n| `base.en` | 142 MB | Better accuracy, slower |\n| `tiny-en-q5_1` | 31 MB | Quantized tiny model, smaller size |\n| `base-en-q5_1` | 57 MB | Quantized base model, good balance |\n\n## Browser Requirements\n\n- WebAssembly support\n- SharedArrayBuffer support (requires Cross-Origin Isolation)\n- Microphone access permission\n- Modern browser (Chrome 90+, Firefox 89+, Safari 15+, Edge 90+)\n\n## Cross-Origin Isolation Setup\n\nWhisperTranscriber requires SharedArrayBuffer, which needs Cross-Origin Isolation. You have two options:\n\n### Option 1: Server Headers (Recommended)\nConfigure your server to send these headers:\n```\nCross-Origin-Embedder-Policy: require-corp\nCross-Origin-Opener-Policy: same-origin\n```\n\n### Option 2: Service Worker\nIf you can't modify server headers, use the included service worker:\n\n**For NPM users:**\n```html\n<!-- Include at the top of your HTML -->\n<script src=\"node_modules/whisper-web-transcriber/dist/coi-serviceworker.js\"></script>\n```\n\n**For CDN users:**\n```javascript\n// Get the service worker code\nconst transcriber = new WhisperTranscriber.WhisperTranscriber();\nconst swCode = transcriber.getServiceWorkerCode();\n\n// Save swCode as 'coi-serviceworker.js' on YOUR domain\n// Then include it in your HTML:\n// <script src=\"/coi-serviceworker.js\"></script>\n```\n\n**Important:** Service workers must be served from the same origin as your page. CDN users cannot directly use the service worker from unpkg.\n\n### Serving with proper headers\n\n**For local development:**\n```bash\nnpm run demo\n```\n\n**For production (examples):**\n\nVercel (`vercel.json`):\n```json\n{\n  \"headers\": [\n    {\n      \"source\": \"/(.*)\",\n      \"headers\": [\n        {\n          \"key\": \"Cross-Origin-Embedder-Policy\",\n          \"value\": \"require-corp\"\n        },\n        {\n          \"key\": \"Cross-Origin-Opener-Policy\", \n          \"value\": \"same-origin\"\n        }\n      ]\n    }\n  ]\n}\n```\n\nNginx:\n```nginx\nadd_header Cross-Origin-Embedder-Policy \"require-corp\" always;\nadd_header Cross-Origin-Opener-Policy \"same-origin\" always;\n```\n\n## Complete Examples\n\n### Example 1: Using NPM Package\n\n```html\n<!DOCTYPE html>\n<html>\n<head>\n  <title>Whisper Transcriber - NPM Version</title>\n  <!-- Include service worker for Cross-Origin Isolation -->\n  <script src=\"node_modules/whisper-web-transcriber/dist/coi-serviceworker.js\"></script>\n</head>\n<body>\n  <button id=\"start\">Start Recording</button>\n  <button id=\"stop\">Stop Recording</button>\n  <div id=\"transcription\"></div>\n\n  <script type=\"module\">\n    import { WhisperTranscriber } from './node_modules/whisper-web-transcriber/dist/index.esm.js';\n\n    const transcriber = new WhisperTranscriber({\n      modelSize: 'tiny-en-q5_1',\n      onTranscription: (text) => {\n        document.getElementById('transcription').textContent += text + ' ';\n      }\n    });\n\n    document.getElementById('start').onclick = async () => {\n      await transcriber.loadModel();\n      await transcriber.startRecording();\n    };\n\n    document.getElementById('stop').onclick = () => {\n      transcriber.stopRecording();\n    };\n  </script>\n</body>\n</html>\n```\n\n### Example 2: Using CDN (Bundled Version)\n\n```html\n<!DOCTYPE html>\n<html>\n<head>\n  <title>Whisper Transcriber - CDN Version</title>\n  <!-- Note: You still need to handle Cross-Origin Isolation -->\n  <!-- Either configure server headers OR save and include the service worker -->\n</head>\n<body>\n  <button id=\"start\">Start Recording</button>\n  <button id=\"stop\">Stop Recording</button>\n  <div id=\"transcription\"></div>\n\n  <!-- Single script include -->\n  <script src=\"https://unpkg.com/whisper-web-transcriber/dist/index.bundled.min.js\"></script>\n  <script>\n    const transcriber = new WhisperTranscriber.WhisperTranscriber({\n      modelSize: 'tiny-en-q5_1',\n      onTranscription: (text) => {\n        document.getElementById('transcription').textContent += text + ' ';\n      }\n    });\n\n    // Check if Cross-Origin Isolation is enabled\n    if (!window.crossOriginIsolated) {\n      console.log(transcriber.getCrossOriginIsolationInstructions());\n    }\n\n    document.getElementById('start').onclick = async () => {\n      await transcriber.loadModel();\n      await transcriber.startRecording();\n    };\n\n    document.getElementById('stop').onclick = () => {\n      transcriber.stopRecording();\n    };\n  </script>\n</body>\n</html>\n```\n\n\n## Bundled vs Standard Version\n\n### Bundled Version (`index.bundled.js`)\n- ✅ **Single file** - All workers and dependencies included\n- ✅ **CDN-friendly** - No CORS issues with web workers\n- ✅ **Zero configuration** - Works out of the box (except for Cross-Origin Isolation)\n- ❌ **Larger initial download** - ~220KB uncompressed, ~95KB minified\n- 📦 **Best for**: Quick prototypes, CDN usage, simple deployments\n\n### Standard Version (`index.js`)\n- ✅ **Smaller initial size** - Core library only\n- ✅ **Modular loading** - Workers loaded on demand\n- ❌ **Requires all files** - Must serve worker files from same origin\n- ❌ **More complex setup** - Need to copy files from node_modules\n- 📦 **Best for**: Production apps with bundlers, optimized loading\n\n## Performance Considerations\n\n- Transcription is CPU-intensive\n- Larger models provide better accuracy but require more processing power\n- Quantized models (Q5_1) offer good balance between size and quality\n- First-time model loading may take time (models are cached afterward)\n\n## Troubleshooting\n\n### \"SharedArrayBuffer is not defined\"\nYou need to enable Cross-Origin Isolation. See the [Cross-Origin Isolation Setup](#cross-origin-isolation-setup) section.\n\n### \"Failed to load worker\" when using CDN\nUse the bundled version (`index.bundled.min.js`) instead of the standard version.\n\n### \"Microphone access denied\"\nEnsure your site is served over HTTPS (or localhost) and the user has granted microphone permissions.\n\n### Service worker not working\n- Service workers must be served from the same origin as your page\n- Check browser console for specific error messages\n- Ensure the service worker file is accessible at the correct path\n\n## Technical Details\n\nBuilt using:\n- [whisper.cpp](https://github.com/ggerganov/whisper.cpp) compiled to WebAssembly\n- Web Audio API for microphone access\n- IndexedDB for model caching\n- Service Worker for Cross-Origin Isolation\n\n## License\n\nMIT\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## Acknowledgments\n\n- [whisper.cpp](https://github.com/ggerganov/whisper.cpp) by Georgi Gerganov\n- [OpenAI Whisper](https://github.com/openai/whisper) for the original model","readmeFilename":"README.md","_rev":"1-1a40e13fe4618a18387c306f83f17a82"}