Add browser-based MAVLink .tlog analyzer with OpenAI ELI5 flight reports

[Copilot]

Bootstraps the repo from a bare README into a fully functional offline-first, single-page web app that decodes MAVLink .tlog binary telemetry and generates plain-English flight reports via OpenAI — no Mission Planner or QGroundControl knowledge required.

Architecture

• No build step, no backend. Vanilla ES modules + Tailwind CSS CDN. Serve with any static HTTP server.
• Binary parsing runs entirely in-browser via FileReader + DataView. Only lightweight extracted JSON is sent to OpenAI — never raw binary — sidestepping both the batching problem and privacy concerns.
• OpenAI gpt-4o-mini replaces the Gemini model referenced in the spec (user has no Gemini key).

New files

File	Role
index.html	Three-view SPA (upload → processing → results), Tailwind UI, settings panel
js/parser.js	MAVLink v1 (0xFE) / v2 (0xFD) byte-scanner; decodes MsgIDs 0, 1, 33, 74, 253; handles .tlog 8-byte timestamp prefix
js/openai.js	Chat-completions REST client; builds ELI5 prompt from extracted metrics
js/app.js	UI state machine, per-file processing pipeline, Master Summary + per-flight tab rendering

MAVLink packets decoded

MsgID   0  HEARTBEAT          → flight mode (ArduPilot Copter map), armed status
MsgID   1  SYS_STATUS         → battery remaining % (byte 30)
MsgID  33  GLOBAL_POSITION_INT → relative_alt mm → m (bytes 16–19)
MsgID  74  VFR_HUD            → groundspeed float32 (bytes 4–7)
MsgID 253  STATUSTEXT         → severity ≤ 4 warnings only (bytes 0–50)

API key

Stored in sessionStorage only — cleared on tab close, never touches any server other than api.openai.com. The Settings panel (⚙) includes inline step-by-step instructions for obtaining and entering the key.

Original prompt

we will start a new repo. you help name it. make it catchy. The follow are the details for the project with a subtle change in the AI model we will use. here in this master prompt it says we will be using gemini. Because I possess no gemini api key we will be using my openai_api_key. You must inform me of where to provide that key at and exactly how to do it properly. The following is the MASTER PROMPT:

Master AI Agent Prompt: MAVLink .tlog Interpretation System

Project Overview & Target Audience
Project Goal: Create an offline-first, browser-based web application that converts MAVLink .tlog files (standard ArduPilot/PX4 telemetry records) into human-readable, highly accessible incident reports. Target Audience: "Normal people" – Hobbyists, commercial pilots, and operations managers who do not know how to operate Mission Planner, QGroundControl, or perform binary/hexadecimal translation. The output must be "ELI5" (Explain It Like I'm 5) while retaining precise, actionable data. Core Features:

Multi-file upload support (up to 20 .tlog files simultaneously).

A unified "Summary Dashboard" providing aggregated stats across all uploaded flights.

Individual "Flight Report Tabs" to drill down into a specific mission's granular data.

AI-driven narrative generation interpreting the data (e.g., explaining why a failsafe happened, not just that it happened).

Technical Architecture & Practical Approach
To keep this efficient and practical, do not attempt to use Node backend servers or massive external MAVLink parsing libraries.

Recommended Stack:

Frontend: Vanilla HTML/CSS/JavaScript with Tailwind CSS (for rapid, modern UI).

Processing: FileReader with ArrayBuffer and DataView for native binary byte-scanning directly in the user's browser.

AI Integration: Google Gemini API (gemini-2.5-flash-preview-09-2025 model) via direct REST calls for narrative generation.

Efficiency Strategy:

The Batching Problem: Browsers will crash if you attempt to send 20 full flight logs to an LLM at once.

The Extraction Solution: The JavaScript must natively decode the binary .tlog files first. It must extract only the key metrics (Max Altitude, Groundspeed, Battery Delta, and an array of critical events like Mode Changes and Failsafes) into a lightweight JSON object.

The LLM Solution: The LLM receives only the lightweight JSON objects to generate the human-readable narratives, not the raw binary data.

Data Extraction Specifications (The "How-To")
The .tlog file is a continuous stream of binary MAVLink packets. The app must scan the ArrayBuffer for sync bytes (0xFE for MAVLink v1, 0xFD for v2).

When a packet is found, decode the MsgID. You must extract data from the following specific packets based on the official MAVLink standard:

MsgID 0 (HEARTBEAT):

Purpose: Flight Mode and Armed Status.

Offset Map: Byte 6 contains the base_mode bitmask (Check 0x80 bit for armed status). Bytes 0-3 (Uint32) contain the custom_mode (translate ArduPilot Copter modes: 0=Stabilize, 3=Auto, 5=Loiter, 6=RTL, etc.).

MsgID 1 (SYS_STATUS):

Purpose: Battery Health.

Offset Map: Byte 30 (Int8) contains battery_remaining (percentage).

MsgID 33 (GLOBAL_POSITION_INT):

Purpose: Altitude.

Offset Map: Bytes 16-19 (Int32, Little Endian) contain relative_alt in millimeters.

MsgID 74 (VFR_HUD):

Purpose: Speed.

Offset Map: Bytes 4-7 (Float32, Little Endian) contain groundspeed in m/s.

MsgID 253 (STATUSTEXT):

Purpose: System Warnings (e.g., "PreArm: Compass not healthy").

Offset Map: Byte 0 is severity. Bytes 1-50 are the C-style null-terminated string. Only extract messages where severity is <= 4 (Warning or worse).

UI/UX Flow & Component Structure
Upload View: A large drag-and-drop zone accepting multiple .tlog files.

Processing View: A progress bar indicating the binary parsing status and AI generation status.

Main Dashboard:

Sidebar/Top Bar: Tabs representing each uploaded file, plus a "Master Summary" tab.

Master Summary Tab: Aggregates data (e.g., "Total Flight Time: 45m", "Total Flights: 5", "Most Common Error: GPS Glitch").

Individual Tab: Contains the LLM's ELI5 narrative, the Max/Min/Avg metrics, and a chronological event timeline.

Authority & Reference Sources
The AI Agent must rely strictly on these authorities when constructing the parser:

MAVLink Protocol Standard: (mavlink.io/en/messages/common.html) - For byte offsets and data types.

ArduPilot Flight Modes: (ardupilot.org/copter/docs/flight-modes.html) - For translating the custom_mode integers into human terms.

Google Gemini API Docs: For structuring the JSON payload to the REST endpoint.

Execution Command
"Begin by writing the HTML structure and the Tailwind UI for the Master Summary and Individual Tabs layout. Once complete, implement the JavaScript binary byte-scanner to handle multiple files sequentially."

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.