webcam-interview-analyzer-js

Mock Interviewer is a React + Vite web app for practicing interview answers with live camera posture cues, audio/video recording, and Deepgram-powered transcription.

Current app version: 1.10.24

Highlights

• Deepgram BYOK settings with local key persistence and optional server-side validation endpoint
• Advanced Settings now groups API keys at the end of Settings, including a Use default keys quick-reset action
• Default internal API key values are masked in Settings while key fields remain editable
• Generate Questions now supports selectable question types (Behavioural, Technical, Situational) with persisted selections and type-specific prompt steering
• Questions List editing controls are disabled while question generation is running to prevent concurrent list mutations
• LLM model dropdown labels now include model path values in brackets for faster endpoint verification
• AM report prompt templates now exclude overall score requirements/output
• NVIDIA NIM default report-model routing now uses Nano Omni for both Detailed and AM reports when Default model is selected
• NVIDIA NIM model presets now include explicit Nano Omni and Ultra 550B A55B selectable options, with a dedicated Default model selection and consistent descriptive labels
• Combined report completion now auto-downloads both generated PDFs (Detailed + AM)
• Report PDFs modal now includes a primary-style Feedback Form button in the header actions row (next to the close button)
• Mock Interview mode now includes a Show/Hide Questions List button to the right of Modify JD/CV and Generate Questions
• In desktop view, the Show Questions List button stacks words on separate lines for readability
• Combined report generation modal title now shows Generating Reports...
• Detailed report stream now renders live formatted markdown output while generation is in progress
• Detailed and AM report stream previews are now both non-selectable
• Detailed question headings are now normalized from malformed patterns like ### ### Question1: to ### Question 1:
• Report PDF Generated: metadata row now includes the LLM provider and model used
• Interview Mode controls were removed from Settings; mode switching remains in the topbar
• Desktop/mobile practice control layout was stabilized by separating mobile-only controls from desktop recording controls
• Curated 3-option preset model lists (plus Custom) for OpenRouter and NVIDIA NIM, including inclusionai/ling-3.0-flash:free
• LLM provider HTTP errors now show provider name, status code, and truncated message in a 10-second notification
• Live MediaPipe face analysis with eye-contact and gaze feedback metrics
• Start Video Recording and Start Audio Recording workflows
• Stop and Transcribe flow with transcript and interview metrics
• Add to Summary action for current answer/transcript
• Copy Summary for Gem export in Gemini-friendly markdown format
• Open Gemini topbar action that launches Gemini in a right-side popup panel for quick paste-and-iterate workflow
• CV/JD modal for storing company name, consultant details, CV, and job description
• Generate Questions flow from CV/JD/company/job-title context with streaming output
• Generate Questions now prompts for question count (default 10) before generating
• Question-count normalization now reliably enforces the supported 3-40 range across browsers
• Question-count modal now enforces 3-40 directly in UI validation and input bounds
• Re-generating questions now warns before overwriting existing questions
• Unified Generate Reports flow that runs AM and detailed report generation in parallel
• Side-by-side report generation modal (AM Report left, Detailed Report right)
• Side-by-side PDF preview modal for AM and detailed outputs with separate download actions
• Detailed report PDFs now start Detailed Per-Question Analysis on a new page and place each question after Question 1 on its own page
• AM feedback PDF preview with download icon action and exit-confirmation discard warning
• PDF metric/unit formatting keeps %/° attached to numbers in generated reports
• URL-based multi-question import on page load
• Interviewer mock image mode with optional self-view PiP
• Camera controls in Settings: Enable Camera, Show Interviewer, Show Self View
• Allow Camera Access button has been removed from the camera panel
• Camera video toggle defaults to disabled/red when camera access is unavailable
• Camera empty state now shows No Camera Access when permission is not allowed
• Camera/session panel spacing refined to better use available vertical space
• Session action controls are placed above the interview question field for faster access
• Select Save Folder prompt now includes a dismiss (X) control
• Invert camera toggle in Settings with local persistence
• Key-saved status shown as a bottom-right popup notification
• Save session files to a selected folder when File System Access is supported
• Previous Answers modal with recorded media and metrics history
• Previous Answers source toggle (Source: Local Storage | Folder) in the history header
• Previous Answers Folder source option is disabled when browser folder access is unavailable, with automatic fallback to Local Storage
• Completed recording transcript + metrics now persist to browser local storage (latest 20 entries, no media files)
• Previous Answers local-storage detail view now hides file/media sections (Total file size, Files, Recording) that only apply to folder-backed entries
• Previous Answers Delete Answer now works for local-storage history entries
• Previous Answers Copy Transcript and Metrics now works for local-storage history entries
• Previous Answers disabled tooltip now layers above webcam imagery and overlay
• Closing Settings with unsaved LLM changes now prompts users to Save LLM Settings, Discard, or Stay
• Interview question text-to-speech option
• Theme toggle and responsive mobile layout improvements

Platform behavior

• Start Video Recording is disabled until camera access is available
• Disabled actions show a hover reason where applicable
• On iPhone browsers:
  • Previous Answers is disabled
  • Save folder selection and folder-backed saving features are disabled

Local development

npm install
npm start

Alternative dev server command:

npm run dev

Run with Docker

docker build -t [container_name] -f src/Dockerfile .
docker run -p 5173:5173 [container_name]

Build and lint

npm run lint
npm run test
npm run build

Manual build and deploy (no GitHub Actions)

Use this when you want to publish manually to any static host.

1. Build the site locally:

npm install
npm run build

2. Confirm the production output exists in dist/.

3. Optional local validation of the built site:

npm run preview

4. Deploy the dist/ folder using one of these approaches:

• Generic static host (Netlify, Vercel static, Cloudflare Pages, S3+CloudFront): upload dist/ as the site root/output directory.
• Manual GitHub Pages publish to a gh-pages branch:

git checkout --orphan gh-pages
git rm -rf .
cp -r dist/* .
git add .
git commit -m "Manual deploy"
git push -f origin gh-pages

If you use Windows PowerShell for the manual GitHub Pages publish, replace the copy step with:

Copy-Item -Recurse -Force dist\* .

5. If using a custom domain, make sure your deployed output includes public/CNAME content (or configure the domain directly in your host).

Notes

• Deepgram transcription requests are performed from the browser using the user-provided key.
• LLM generation requests (question generation + AM/detailed report generation) are performed from the browser using user-provided OpenRouter or NVIDIA NIM API keys.
• NVIDIA NIM direct browser calls can be blocked by CORS. In deployed environments, set VITE_NIM_BASE_URL to a proxy endpoint (or use the in-app NVIDIA NIM Base URL setting).
• LLM keys are stored in browser local storage by default; use Clear keys and reset to defaults in Settings to remove saved keys and reset provider settings.
• Interview question playback uses OS/system text-to-speech in the browser.
• If no Deepgram key is present and missing-key fallback is enabled, transcription falls back to local Whisper (in-browser) and question playback uses OS/system TTS.
• Folder-based save/history features rely on the browser File System Access API and permission grants.

LLM generation setup

1. Open Settings.
2. Under "LLM Chat Providers", enter at least one provider API key.
3. Configure model and base URL for the provider you want to use.
4. Save LLM settings.
5. Use Generate Questions or Generate Reports from the left-side tabs.

Behavior:

• If provider settings are missing or invalid, generation returns an actionable error toast.
• Auto provider mode tries OpenRouter first, then retries with NVIDIA NIM if OpenRouter fails.
• Generation context can include current question, transcript, interview metrics summary, and optional CV/JD/company/job-title fields.

NVIDIA NIM on deployed sites

If you see a browser CORS error for integrate.api.nvidia.com, configure a proxy URL:

1. In repository secrets, add VITE_NIM_BASE_URL with your proxy URL base (for example https://<your-proxy-domain>/v1).
2. Re-run the deploy workflow (main or dev).
3. Optionally override at runtime in Settings using NVIDIA NIM Base URL.

URL question import

You can preload multiple interview questions when opening the app.

• Preferred format (newline separated):

?questions=Tell%20me%20about%20yourself%0AWhat%20is%20your%20biggest%20strength%3F%0ADescribe%20a%20challenging%20project.

• Alternate format (repeated parameter):

?q=Tell%20me%20about%20yourself&q=What%20is%20your%20biggest%20strength%3F&q=Describe%20a%20challenging%20project.

Behavior:

• Imported questions are loaded into the Questions Import list on first render.
• The first imported question becomes the active Interview question.
• Duplicate questions are automatically de-duplicated.

Changelog

• See CHANGELOG.md for release history, recent feature additions, and general bug-fix categories.

GitHub Pages and custom domain

• Deployment workflow: .github/workflows/deploy-pages.yml
• Dev deployment workflow: .github/workflows/deploy-pages-dev.yml
• Production target repository: haydenmlh/webcam-interview-analyzer-page
• Production target branch: gh-pages
• Dev target repository: haydenmlh/webcam-interview-analyzer-js (this source repository)
• Dev target branch: gh-pages-dev
• Custom domain file: public/CNAME
• Configured domain: interview.haydenmlh.com
• Dev configured domain: dev.interview.haydenmlh.com

Required secret in source repository

• PAGES_DEPLOY_TOKEN: Personal Access Token with write access to haydenmlh/webcam-interview-analyzer-page
• VITE_NIM_BASE_URL: NVIDIA NIM proxy base URL used at build time for deployed pages (for example https://<your-proxy-domain>/v1)

After first deploy, enable GitHub Pages on haydenmlh/webcam-interview-analyzer-page with source branch gh-pages, then set your DNS CNAME record for interview.haydenmlh.com to haydenmlh.github.io.

For dev deploys, enable GitHub Pages on haydenmlh/webcam-interview-analyzer-js with source branch gh-pages-dev and set DNS CNAME for dev.interview.haydenmlh.com to haydenmlh.github.io.