Bhashini — Frontend (Quick Start & Server Integration)

This README explains how to run the frontend locally, connect it to the backend server, and includes useful commands for common Git fixes (node_modules, submodules, remotes). Use PowerShell or CMD on Windows.

Prerequisites

• Node.js (>= 16 recommended)
• npm (bundled with Node.js)
• Git
• Browser supporting getUserMedia (Chrome, Edge, Firefox). Microphone access requires HTTPS or localhost.

Project layout (important paths)

• Frontend: c:\Users\varsh\Desktop\BHASHINI\BHASHINI\frontend-react
• Backend: c:\Users\varsh\Desktop\BHASHINI\BHASHINI\backend
• Utilities: c:\Users\varsh\Desktop\BHASHINI\tools

1. Frontend — install & run (development) Open PowerShell or cmd and run:

cd "c:\Users\varsh\Desktop\BHASHINI\BHASHINI\frontend-react"
npm install
npm run dev

• Vite will print a local URL (usually http://localhost:5173). Open that URL in the browser.
• If port conflicts or you want a specific host, adjust Vite config or use environment variables as your setup requires.

2. Frontend — build & preview (production)

cd "c:\Users\varsh\Desktop\BHASHINI\BHASHINI\frontend-react"
npm run build
npm run preview

3. Backend — install & run Start the backend so the frontend can call the API:

cd "c:\Users\varsh\Desktop\BHASHINI\BHASHINI\backend"
npm install
# common options; check backend package.json for specific scripts
npm run dev         # for development (nodemon / hot reload)
# or
node index.js       # or the file that starts your server

• Ensure backend listens on the expected port (e.g., 3000) and provides the API endpoints the frontend calls (e.g., POST /api/sps).

4. Configure frontend → backend connectivity

• If the frontend needs to talk to backend at a different origin, either:
  • Add a proxy in vite.config.js, or
  • Set an environment variable (e.g., VITE_API_BASE=http://localhost:3000) and read it in the frontend when building requests.
• Example POST target inspected in frontend: POST /api/sps (change to ${API_BASE}/api/sps if using env/API_BASE).

5. How to use the frontend UI (speech flow)

• Open the app and choose "Speech" mode.
• Click "Start Recording" — browser prompts for microphone permission. Allow it.
• Click "Stop Recording" — playback preview appears and a WAV File is prepared.
• You can also choose an existing audio file using the fallback file chooser.
• Select Source Lang and Target Lang (the frontend includes all languages from backend models).
• Click "Translate Speech" — the app sends multipart/form-data with the audio file and language selections to the backend endpoint (/api/sps).
• Troubleshooting:
  • If mic permission never appears, confirm you are on localhost or HTTPS.
  • Check Developer Tools → Network to inspect the POST request and FormData parts.

6. Extract language list (utility) To regenerate the languages list from the backend models JSON:

node "c:\Users\varsh\Desktop\BHASHINI\tools\extract_languages.js"

This prints a deduplicated, sorted JSON array of languages that you can paste into the frontend LANGUAGES constant or use to drive a dynamic endpoint.

7. Git: remove node_modules from repo (safe) If node_modules was accidentally staged/committed, run:

# from repository root (adjust path to where node_modules exists)
echo node_modules/ >> .gitignore
git add .gitignore
git rm -r --cached node_modules
git commit -m "Remove node_modules from repo and add to .gitignore"
git push origin main

If node_modules is only staged and not committed:

git restore --staged node_modules
# or
git reset HEAD node_modules

8. Git: submodule changes (if BHASHINI is a submodule) If BHASHINI is a submodule and you created/modified files inside it, you must commit in the submodule and then update the superproject pointer:

# inside the submodule
cd "c:\Users\varsh\Desktop\BHASHINI\BHASHINI"
git status
git add <files>
git commit -m "Add helper / update files"
git push origin HEAD

# back in superproject
cd "c:\Users\varsh\Desktop\BHASHINI"
git add BHASHINI
git commit -m "Update BHASHINI submodule pointer"
git push origin main

If you want to move a file out of the submodule into the parent repo:

move "BHASHINI\tools\extract_languages.js" "tools\extract_languages.js"
git add tools\extract_languages.js
git commit -m "Move helper to main repo"
git push origin main

9. Git: fix remote origin errors If git pull origin main shows "origin does not appear to be a git repository", check remotes and re-add:

git remote -v
# if origin missing or incorrect:
git remote remove origin
git remote add origin https://github.com/your-username/your-repo.git
git fetch origin
git pull origin main

10. Debugging tips

• Network requests: DevTools → Network; check request payload and server response.
• Console logs: DevTools → Console for frontend errors (e.g., CORS, missing env).
• Microphone issues: Browser permission, secure context (HTTPS or localhost), test with other apps/sites.
• Long recordings: Browser memory grows; consider max recording length (e.g., 30s) or streaming.

11. Next improvements (suggested)

• Fetch languages dynamically from backend (so frontend always stays in sync).
• Add a max recording duration and UI countdown.
• Convert recordings to a fixed sample rate (e.g., 16kHz) if backend expects it.
• Replace ScriptProcessorNode with AudioWorklet for modern audio capture.

If anything in these steps fails, paste the exact error output and I will provide the precise command(s) to fix it.