Frontend Documentation

🏠 Overview

This web application is designed for object detection and tracking tasks with a multi-page interface featuring camera-based functionality.

Repository Link

You can find the repository on GitHub: Visit the Repository

            Key Features
            Camera access and preview
Multiple task types
Responsive design
Interactive UI components

          

💻 Pages

            1. Home Page (`index.html`)
            Navigation bar
Task selection buttons
Instructional text

          

            2. Task Pages
            
                Packed Items Task (`objectTask.html`)
                Camera feed display
Camera preview overlay
Item list section
Finish task button

                Fruits Task (`fruitTask.html`)
                Similar structure to Packed Items Task

                Count Task (`countTask.html`)
                Similar structure to other task pages

🛠 Components

            1. Camera Modal
            Requests camera access
Allow/Deny buttons

          

            2. Camera Feed
            Main camera feed image
Camera preview overlay
Draggable and resizable preview

          

            3. Item List
            Dynamic list of detected items
Updates based on task type

          

🖥 Scripts

            Task-Specific Scripts
            `objectTaskScript.js`: Handles packed items task logic
`fruitTaskScript.js`: Manages fruits and vegetables task

                `countTaskScript.js`: Implements object counting functionality

            Common Script Functionalities
            Camera access management
Item detection and listing
Task completion handling

          