yigagilbert/lug-eng-step-audio-frontend

A production-ready Next.js App Router frontend for Luganda-to-English speech-to-speech translation using a deployed Modal Step-Audio2 API. # Luganda to English Voice Translator A production-ready Next.js App Router frontend for Luganda-to-English speech-to-speech translation using a deployed Modal Step-Audio2 API. ## Setup Install dependencies: ```bash npm install ``` Create a local environment file: ```bash cp .env.example .env.local ``` Set the required server-side variables: ```bash MODAL_TRANSLATE_URL=your-modal-url.modal.run MODAL_API_KEY=your-service-api-key TRANSLATE_ALLOWED_ORIGINS= ``` `MODAL_TRANSLATE_URL` may be either the Modal base URL or the full `your-modal-url.modal.run` endpoint. The server proxy normalizes both forms, and normalizes other versioned translate paths back to `/v1/translate`. Run the app: ```bash npm run dev ``` Open localhost. ## How It Works The browser records Luganda microphone audio with `MediaRecorder` and sends it to the local Next.js route `POST /api/translate` as multipart `FormData`. The UI is intentionally fixed to the stable focused Luganda to English model with the default female voice. The Next.js server route securely proxies the request to: ```text ${MODAL_TRANSLATE_URL}/v1/translate ``` It adds: ```text Authorization: Bearer ${MODAL_API_KEY} ``` The Modal API key is never referenced by a client component and is never sent to the browser. ## Vercel Deployment Vercel is the recommended production target for this app because it can host both the Next.js frontend and the server-side `POST /api/translate` route. The browser calls `/api/translate` on the same Vercel domain, while `MODAL_API_KEY` remains a server-only environment variable. 1. Push this repository to GitHub. 2. In Vercel, choose `Add New` -> `Project` and import the GitHub repository. 3. Use the default Next.js framework settings. 4. Set the production branch to `main`. 5. Add these Vercel environment variables for Production, Preview, and Development as needed: ```bash MODAL_TRANSLATE_URL=your-modal-url.modal.run MODAL_API_K …