App Capabilities

Features & Technical Design

An overview of the engineering, performance optimizations, local vector database search, and design mechanisms integrated within the AI Course Player.

YouTube-Style Seeking

Dragging the timeline updates progress elements locally at 60fps, preventing snapped slider jitters. Actual video range fetching only triggers once when you release the mouse, minimizing network requests.

Dual Execution Modes

Switch dynamically between Local mode (fast disk reading) and Google Drive Cloud mode (streaming directly from a secure Google Service Account using npm run local or npm run drive).

Low-Latency GDrive Proxy

Streams videos from GDrive API directly via raw Node HTTPS. We copy statuses/ranges on the fly and bypass SDK dependencies, making seeking instantaneous in cloud mode.

Auto-Stream Cancellation

When you seek to a new point, the browser cancels the request. Our server intercepts the close event and immediately aborts the active Google Drive connection, preventing network saturation.

Background AI Transcription

Uses ffmpeg-static to extract audio and runs Xenova/whisper-base.en locally inside an isolated worker thread. Transcriptions generate VTT subtitles on the fly in a background queue.

Tabbed Panel & Queue

Features tabbed headers to monitor Ongoing (queued/active) and Completed (success/history) transcription jobs with live counters and sticky scrollable layouts.

AI Pro Agent & Vector DB

Offline semantic Vector DB search (ONNX MiniLM) with Gemini/Ollama priority routing. Automatically scrapes DuckDuckGo for web grounding and executes player seek/lecture commands.

Stratified Technical Quiz System

Dynamic 5-question lecture and 20-question stratified multi-week course exams. Enforces 100% technical mechanics, auto-saves results on submission, and auto-pauses video playback during quizzes.

Admin Reports & Archive System

Dedicated analytics dashboard (reports.html) featuring live overview cards, data table pagination, student/quiz filters, title search, soft-delete archive view, icon tooltips, and custom glassmorphism confirmation modals.

Media Streaming Data Pipeline

How range requests travel from your browser to Google Cloud and back, optimized for low latency and high bandwidth conservation.

1

Browser Range Request Fired

Video player requests a specific frame range (e.g. bytes=150000-) when you seek or play.

2

API Connection Close Hook

If a previous request was active, the server immediately aborts the active GDrive connection to clear the buffer.

3

Direct HTTPS Token Fetch

Backend requests the video media using raw Node.js https.get and the Service Account Bearer token.

4

Stream Forwarding (HTTP 206)

Google replies with partial video bytes, and the server pipes the stream and headers directly to the browser.