A web application that transcribes an HVAC service call recording, analyzes technician performance across six compliance stages, and presents the findings in a clean, readable dashboard.
This project analyzes a real-world HVAC service call (~32 minutes) in which a technician performed a refrigerant recharge and presented four equipment replacement options to the customer. The app displays:
- Call Type Identification — classifies the call and explains the reasoning
- Compliance Scorecard — evaluates 6 standard service call stages with a numeric score (out of 10) and pass/partial/fail rating
- Segmented Transcript — full transcript divided by call stage with inline analysis annotations
- Sales Insights — highlights what the technician did well and what opportunities were missed
- Two-panel layout with independently scrollable sidebar and transcript
- Color-coded compliance badges (pass / partial / fail) with progress bars
- Per-stage numeric scores and overall average
- Verbatim transcript with speaker labels and timestamps
- Detailed annotation under each call stage grounded in specific quotes
- Responsive — stacks to single column on mobile
- React 18 + Vite 5
- AssemblyAI — audio transcription with speaker diarization
- Plain CSS with CSS custom properties
- Deployed on Vercel
app/
├── scripts/
│ └── transcribe.js # One-time transcription script (Node.js)
├── src/
│ ├── data/
│ │ ├── transcript.json # Generated by transcription script
│ │ ├── analysis.js # Hand-written call analysis
│ │ └── utils.js # Data helpers (stage filtering, formatting)
│ ├── components/
│ │ ├── Sidebar.jsx # Left panel wrapper
│ │ ├── TranscriptPanel.jsx # Right panel wrapper
│ │ ├── CallTypeCard.jsx # Call type identification card
│ │ ├── ComplianceScore.jsx # Scorecard with progress bars
│ │ ├── SalesInsights.jsx # Sales opportunities panel
│ │ ├── CallStageSection.jsx # Per-stage transcript + annotation
│ │ └── TranscriptLine.jsx # Individual utterance row
│ ├── App.jsx
│ └── index.css # Global design tokens and utilities
└── vercel.json
Prerequisites: Node.js 18+
# Install dependencies
cd app
npm install
# Start dev server
npm run devOpen http://localhost:5173.
The transcript is pre-generated and committed. To re-run transcription against a new audio file:
-
Create a
.envfile in theapp/directory:ASSEMBLYAI_API_KEY=your_api_key_hereGet a free key at assemblyai.com ($50 free credits).
-
Place the audio file at
../39472_N_Darner_Dr_2.m4a(one level aboveapp/). -
Run:
npm run transcribe
This uploads the audio, requests transcription with speaker diarization, and writes the result to
src/data/transcript.json.
The app builds to a static site — no backend required.
npm run build # outputs to dist/Deployed via Vercel. Connect the GitHub repository at vercel.com/new and Vercel will auto-detect Vite and deploy on every push to main.
Transcription was performed using AssemblyAI with speaker diarization (speaker_labels: true, speakers_expected: 2). The compliance analysis and sales insights were written manually after reading the full transcript, following the six-stage framework:
| Stage | Criteria |
|---|---|
| Introduction | Technician identifies themselves and their company, greets customer by name, sets agenda |
| Problem Diagnosis | Asks open-ended questions, presents findings with data, confirms customer understanding |
| Solution Explanation | Clearly explains the service performed and/or replacement options in accessible language |
| Upsell Attempts | Introduces additional services tied to customer needs, not forced |
| Maintenance Plan Offer | Pitches a recurring service plan with pricing and clear value proposition |
| Closing & Thank You | Summarizes next steps, thanks the customer, ends the call warmly |
Scores are assigned on a 1–10 scale based on completeness, quality, and customer engagement at each stage.
- The audio file is not committed to this repository.
- The
.envfile (API key) is gitignored and never committed. - The repository is kept private to protect customer information in the transcript.