Web Dashboard

Relevant source files

The following files were used as context for generating this wiki page:

• web_app/src/main.js
• web_app/index.html
• PROJECT_STRUCTURE.md
• README.md
• docker-compose.prod.yml
• COMPETITIVE_ANALYSIS.md

The Web Dashboard is a Progressive Web App (PWA) designed to provide a browser-based interface for the ClassMate AI meeting assistant. It enables users to record meetings, view real-time transcriptions, manage AI-generated notes, and track session statistics through a responsive web interface.

The dashboard integrates with the FastAPI backend via REST APIs for session management and WebSockets for live, low-latency audio streaming and transcription updates. It is served through an Nginx reverse proxy and is optimized for both mobile and desktop support.

Sources: PROJECT_STRUCTURE.md:120-123, web_app/src/main.js:1-10, README.md:14-19

System Architecture

The Web Dashboard follows a modular frontend architecture that interacts with the "Control Plane" of the ClassMate ecosystem. It utilizes Tailwind CSS for styling and a custom JavaScript class, ClassMateWebApp, to manage application state, media recording, and network connectivity.

The diagram shows the relationship between the browser-based components and the backend API services.
Sources: web_app/index.html:1-60, web_app/src/main.js:1-25, README.md:10-25

Core Components

1. Session Management

The dashboard handles user identity and session persistence through local storage. On initialization, it either restores an existing session or creates a new one by communicating with the /api/v1/sessions endpoint.

• Logic: Uses localStorage key classmate_session to store userId and sessionId.
• Endpoint: POST /api/v1/sessions
• Data Structure:

  {
    "user_id": "user_string",
    "title": "Meeting timestamp"
  }
  

Sources: web_app/src/main.js:58-94

2. Audio Recording Pipeline

The recording system uses the browser's MediaRecorder API to capture audio in 1-second chunks. Audio is captured using the audio/webm;codecs=opus MIME type and a sample rate of 16,000 Hz for optimal AI processing.

Component	Functionality	Configuration
MediaRecorder	Captures raw mic input	1000ms timeslices
Constraints	Audio enhancement	Echo cancellation, Noise suppression
Encoding	Base64 Conversion	Blobs converted for WS transmission

Sources: web_app/src/main.js:111-147

3. Real-time Transcription

The dashboard maintains a persistent WebSocket connection to the backend to facilitate live transcription. As audio chunks are sent, the backend returns transcription results which are dynamically injected into the UI.

The sequence diagram illustrates the live audio streaming and result handling flow.
Sources: web_app/src/main.js:150-200, web_app/src/main.js:256-278

User Interface Modules

The dashboard is divided into several primary views, managed by a simple data-attribute-based router (data-page-content).

Dashboard View

Displays high-level statistics and recent activity.

• Stats: Total Recordings, Notes Generated, and Transcription Hours.
• Recent Sessions: A dynamic list of historical recording sessions.
  Sources: web_app/index.html:105-155

Recording Interface

A dedicated interface for active sessions featuring:

• Controls: Start, Stop, and Pause/Resume buttons.
• Status Indicators: A pulsing red indicator for "Recording" and yellow for "Paused".
• Live Transcript: A scrollable area displaying segments with speaker names, timestamps, and confidence scores.
  Sources: web_app/index.html:158-195, web_app/src/main.js:203-231, web_app/src/main.js:304-338

Settings Module

Allows users to configure application behavior across three categories:

Category	Options	Description
Recording	Quality, Auto-transcribe, Speaker ID	Controls audio capture and AI processing triggers.
AI Assistant	Summary Length, Key Points, Action Items	Configures the output format of generated notes.
Storage	Cloud Sync, Storage Location	Manages where session data is persisted (Cloud vs. Local).

Sources: web_app/index.html:215-265

Deployment & Monitoring

The Web Dashboard is containerized using Nginx and integrated into the production Docker Compose stack. It serves the index.html and static assets on port 80.

• Service Name: nginx
• Ports: 80 (HTTP), 443 (HTTPS)
• Dependencies: Depends on the api service to be healthy before starting.
• Health Checks: The system uses a /health endpoint to verify the backend's availability to the dashboard.

Sources: docker-compose.prod.yml:118-132, scripts/launch.sh:46-52, scripts/verify_deployment.sh:16-25

Conclusion

The Web Dashboard serves as the primary visual interface for the ClassMate ecosystem, bridging user interactions with complex AI backend services. By leveraging WebSockets and the MediaRecorder API, it provides a seamless real-time experience for meeting transcription and note management. Significant focus is placed on session persistence and live feedback, ensuring a reliable tool for capturing lecture and meeting data.