---
title: Quadrocopter
emoji: ✈️
colorFrom: yellow
colorTo: blue
sdk: static
pinned: false
short_description: Quadcopter Simulation + AI Vision System (YOLOv11.onnx)
---

# Quadcopter Hunter: Autonomous Target Interception Simulation 

**An interactive web-based simulation of an autonomous "Hunter" quadcopter that uses AI-powered object detection to identify and intercept a target.** 

This project provides a hands-on experience with the principles of autonomous drone operation. Through a user-friendly interface, you can upload an image, witness the AI detect a target "airplane," and observe the quadcopter's flight control system as it calculates an intercept course and adjusts its motors to neutralize the threat. 

The entire simulation, including the AI object detection, runs directly in your browser, offering a seamless and responsive experience without the need for a backend server. 

## Key Features 

*   **Real-Time Simulation:** Instantly visualize how the quadcopter's motors react to the detected target's position. 
*   **In-Browser AI:** All object detection is performed on the client-side, ensuring privacy and speed. 
*   **Interactive Interface:** A dual-panel layout provides a clear view of both the quadcopter simulation and the AI vision system. 
*   **Detailed Telemetry:** An at-a-glance telemetry panel displays the drone's status and flight vectors. 
*   **Preset Gallery:** Quickly test the simulation with a selection of curated images. 
*   **Responsive Design:** The application is optimized for both desktop and mobile devices. 
*   **Light/Dark Mode:** Toggle between light and dark themes for user comfort. 

## How It Works 

The simulation follows a precise operational flow from image input to motor control: 

### 1. Image Input 

The user provides the quadcopter's "camera view" in one of three ways: 

*   **Drag & Drop:** Drag an image file directly onto the upload zone. 
*   **File Selection:** Click the "Select File" button to open a file browser. 
*   **Preset Gallery:** Choose from 10 sample images for a quick demonstration. 

### 2. AI Object Detection 

The application uses the `yolo11n.onnx` model, a lightweight and efficient object detection model, to process the uploaded image. The model is executed in the browser using the ONNX Runtime for JavaScript. The image is preprocessed to a 640x640 resolution to meet the model's input requirements. The model then outputs a list of all detected objects, their bounding boxes, and a confidence score for each detection. 

### 3. Target Acquisition 

The system specifically searches for the `airplane` class within the detected objects. If one or more airplanes are found, the one with the highest confidence score is designated as the primary target and its bounding box is highlighted in red. If no airplane is detected, the quadcopter remains in an "IDLE" or "SCANNING" state. 

### 4. Flight Vector Calculation 

To determine the intercept course, the system calculates the target's position relative to the center of the image. The center coordinates of the target's bounding box are normalized into a range of [-1, 1] for both the X and Y axes, creating a flight vector: 

*   **X-Vector (Roll):** A negative value indicates a required left roll, and a positive value indicates a right roll. 
*   **Y-Vector (Pitch):** A negative value indicates a required forward pitch, and a positive value indicates a backward pitch. 

### 5. Motor Control Simulation 

The calculated flight vectors are used to differentially adjust the speed of the four motors based on standard quadcopter flight dynamics. A base speed is set for hovering, and adjustments are made to achieve the desired pitch and roll. For example, to fly forward, the front motors decrease in speed while the rear motors increase, causing the quadcopter to tilt forward. The simulation visually represents these changes by altering the rotation speed of the propellers and updating the percentage values in the UI. 

## Technology Stack 

*   **Frontend:** HTML5, Tailwind CSS, Vanilla JavaScript 
*   **AI/Machine Learning:** ONNX Runtime for Web, YOLOv11n model