{"id":34847543,"url":"https://github.com/europanite/client_side_audio_transcription","last_synced_at":"2026-04-06T21:34:29.439Z","repository":{"id":328663078,"uuid":"1111875852","full_name":"europanite/client_side_audio_transcription","owner":"europanite","description":"A Browser-Based AI Audio Transcription Playground Powered by Whisper.","archived":false,"fork":false,"pushed_at":"2026-03-22T04:42:16.000Z","size":1060,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-22T19:38:43.656Z","etag":null,"topics":["ai","audio","audio-processing","audio-transcription","client-side","docker","docker-compose","huggingface","huggingface-transformers","jest","react","speech-recognition","transcription","transformer","transformer-js","transformerjs","typescipt","typescript","vite","whisper"],"latest_commit_sha":null,"homepage":"https://europanite.github.io/client_side_audio_transcription/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/europanite.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-12-07T19:49:53.000Z","updated_at":"2026-03-22T04:42:20.000Z","dependencies_parsed_at":"2025-12-17T05:05:11.266Z","dependency_job_id":null,"html_url":"https://github.com/europanite/client_side_audio_transcription","commit_stats":null,"previous_names":["europanite/client_side_audio_transcription"],"tags_count":0,"template":false,"template_full_name":"europanite/frontend_vite_template","purl":"pkg:github/europanite/client_side_audio_transcription","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/europanite%2Fclient_side_audio_transcription","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/europanite%2Fclient_side_audio_transcription/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/europanite%2Fclient_side_audio_transcription/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/europanite%2Fclient_side_audio_transcription/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/europanite","download_url":"https://codeload.github.com/europanite/client_side_audio_transcription/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/europanite%2Fclient_side_audio_transcription/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31491097,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-06T17:22:55.647Z","status":"ssl_error","status_checked_at":"2026-04-06T17:22:54.741Z","response_time":112,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","audio","audio-processing","audio-transcription","client-side","docker","docker-compose","huggingface","huggingface-transformers","jest","react","speech-recognition","transcription","transformer","transformer-js","transformerjs","typescipt","typescript","vite","whisper"],"created_at":"2025-12-25T18:51:58.529Z","updated_at":"2026-04-06T21:34:29.431Z","avatar_url":"https://github.com/europanite.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# [Client-Side Audio Transcription](https://github.com/europanite/client_side_audio_transcription \"Client-Side Audio Transcription\")\n\n[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)\n![OS](https://img.shields.io/badge/OS-Linux%20%7C%20macOS%20%7C%20Windows-blue)\n[![CI](https://github.com/europanite/client_side_audio_transcription/actions/workflows/ci.yml/badge.svg)](https://github.com/europanite/client_side_audio_transcription/actions/workflows/ci.yml)\n[![docker](https://github.com/europanite/client_side_audio_transcription/actions/workflows/docker.yml/badge.svg)](https://github.com/europanite/client_side_audio_transcription/actions/workflows/docker.yml)\n[![pages](https://github.com/europanite/client_side_audio_transcription/actions/workflows/pages.yml/badge.svg)](https://github.com/europanite/client_side_audio_transcription/actions/workflows/pages.yml)\n\n![React](https://img.shields.io/badge/react-%2320232a.svg?logo=react\u0026logoColor=%2361DAFB)\n![Jest](https://img.shields.io/badge/-jest-%23C21325?logo=jest\u0026logoColor=white)\n![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?logo=vite\u0026logoColor=white)\n\n![\"web_ui\"](./assets/images/web_ui.png)\n\n [PlayGround](https://europanite.github.io/client_side_audio_transcription/)\n\nA Browser-Based AI Audio Transcription Playground Powered by Whisper.\nNo installation, registration, or payment required.\n\n---\n\n## 🚀 Overview\n\nThis browser-based tool takes an `.mp3` (or `.wav`) file and returns an **Transcription** using [Transformers.js](https://github.com/xenova/transformers.js) and the Whisper **tiny.en** model.  \nAll speech-to-text runs **inside your browser** – no backend server and no audio leaves your machine.\n\n## ✨ Features\n\n- **Client-side speech-to-text**  \n  The React app calls the `automatic-speech-recognition` pipeline from `@huggingface/transformers` directly in the browser, so transcription runs entirely on the client.\n\n- **Simple 3-step workflow**  \n  The UI guides you through:\n  1. Loading the Whisper model.\n  2. Checking model status.\n  3. Uploading audio and running transcription, with clear status messages for each step.\n\n- **MP3 / WAV support**  \n  Drag \u0026 drop or select an `.mp3` (or `.wav`) file. Short, speech-focused clips work best for this demo.\n\n- **Whisper tiny**  \n  Uses Xenova's `whisper-tiny.en` model via ONNX in Transformers.js, optimized for speech and small enough to load comfortably in the browser.\n\n- **Modern tooling**  \n  Built with React, TypeScript, and Vite, tested with Jest, containerized with Docker, and wired to GitHub Actions for CI, Docker-based tests, and GitHub Pages deployment.\n\n---\n\n## 🧱 Tech stack\n\n- **Frontend**: React + TypeScript + Vite 7 (SPA)\n- **ML runtime**: `@huggingface/transformers` (Transformers.js, ONNX backend, Whisper tiny.en)\n- **Testing**: Jest + Testing Library (`jsdom` environment)\n- **Tooling / CI**:\n  - Docker \u0026 `docker-compose` for deterministic dev/test environments\n  - GitHub Actions:\n\n---\n\n\n## 🧰 How the transcription flow works\n\nAt a high level:\n\n1. **UI layer – `App.tsx` \u0026 `HomeScreen.tsx`**  \n   - `App.tsx` renders the header, GitHub link, and a short description (“Drop an mp3 file, run Whisper in your browser, and read the transcript.”), plus the `SettingsBar` and `HomeScreen`.  \n   - `HomeScreen` implements a simple form:\n     - Step 1: A button to load the model.\n     - Step 2: A model status panel (idle / loading / ready / error).\n     - Step 3: An audio file input (`.mp3` / `.wav`), a “Transcribe” button, and a textarea to display the transcript.\n\n2. **Transcription hook – `useTranscription.ts`**  \n   - Exposes `status`, `error`, `transcript`, `transcribeFile(file)`, and `reset()`.\n   - Lazily loads the ASR pipeline on first use:\n     - Configures `env.allowRemoteModels = true` and a lightweight WASM backend for browsers.\n     - Instantiates a cached `automatic-speech-recognition` pipeline using `Xenova/whisper-tiny.en`.\n   - When you call `transcribeFile(file)`, it:\n     - Ensures the model is loaded.\n     - Sets status to `\"transcribing\"`.\n     - Passes the `File` object to the pipeline and waits for the transcription result.\n     - Stores the resulting text in `transcript` and updates the status to `\"done\"` or `\"error\"`.\n\n3. **Settings bar – `SettingsBar.tsx` \u0026 utilities**  \n   - Displays the currently used model (`Xenova/whisper-tiny.en (Transformers.js, in-browser)`) and can be extended later with additional settings (e.g., language, model size, chunk length).\n   - `HomeScreenUtil.tsx` keeps the GitHub repo and GitHub Pages URLs in one place so you can reuse them in the UI.\n\n4. **Optional auth context – `Auth.tsx`**  \n   - Provides an `AuthProvider` with `login`, `logout`, and `authHeader()` helper.\n   - Currently not required for basic transcription, but useful if you later add authenticated APIs.\n\n---\n\n## ⚠️ Notes \u0026 limitations\n\n- Long audio files will be slower to process in the browser and may hit memory limits on low-end devices.\n- A modern desktop browser with WebAssembly support (e.g., recent Chrome / Edge / Firefox) is recommended.\n\n---\n\n## 🚀 Getting Started\n\n### 1. Prerequisites\n- [Docker Compose](https://docs.docker.com/compose/)\n\n### 2. Build and start all services:\n\n```bash\n\n# Build the image\ndocker compose build\n\n# Run the container\ndocker compose up\n\n```\n\n### 3. Test:\n```bash\ndocker compose \\\n-f docker-compose.test.yml up \\\n--build --exit-code-from \\\nfrontend_test\n```\n\n---\n\n# License\n- Apache License 2.0","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feuropanite%2Fclient_side_audio_transcription","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feuropanite%2Fclient_side_audio_transcription","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feuropanite%2Fclient_side_audio_transcription/lists"}