readme.md added

harshitj183 · Aug 20, 2024 · 9613290 · 9613290
1 parent e35264f
commit 9613290
Show file tree

Hide file tree

Showing 4 changed files with 188 additions and 28 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,77 @@
+
+# Object Detector DLM Web
+
+## Overview
+
+`Object-Detector-DLM-WEB` is a web-based application that utilizes deep learning models for real-time object detection and tracking using your camera feed. The application is built using HTML, CSS, and JavaScript, and leverages TensorFlow.js with the COCO-SSD model to detect and label objects in the video stream.
+
+## Features
+
+- Real-time object detection using TensorFlow.js and COCO-SSD model.
+- Camera access to stream live video for detection.
+- Display of detected object names and confidence scores.
+- Responsive design with Google UI/UX styling.
+
+## Getting Started
+
+### Prerequisites
+
+- A modern web browser that supports HTML5, CSS3, and JavaScript.
+- Internet connection to load TensorFlow.js and COCO-SSD model from CDNs.
+
+### Installation
+
+1. **Clone the Repository:**
+
+   ```bash
+   git clone https://github.com/harshitj183/Object-Detector-DLM-WEB.git
+   ```
+
+2. **Navigate to the Project Directory:**
+
+   ```bash
+   cd Object-Detector-DLM-WEB
+   ```
+
+3. **Open `index.html` in Your Browser:**
+
+   You can open the `index.html` file directly in your browser to view and use the application.
+
+### Usage
+
+1. **Allow Camera Access:**
+
+   When you first load the application, you'll be prompted to allow access to your camera. Grant permission for the application to use the camera.
+
+2. **View Object Detection:**
+
+   Once camera access is granted, the application will start streaming video and detecting objects in real-time. The detected objects and their names will be displayed on the video feed.
+
+## Files
+
+- `index.html`: The main HTML file that sets up the page structure.
+- `style.css`: Contains the styling for the application, including Google UI/UX design.
+- `script.js`: Contains the JavaScript code for handling video streaming, object detection, and drawing bounding boxes.
+
+## Contributing
+
+If you would like to contribute to this project, please follow these steps:
+
+1. Fork the repository.
+2. Create a new branch for your feature or bug fix.
+3. Commit your changes and push to your fork.
+4. Open a pull request with a description of your changes.
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## Acknowledgements
+
+- [TensorFlow.js](https://www.tensorflow.org/js) for providing deep learning capabilities in JavaScript.
+- [COCO-SSD Model](https://github.com/tensorflow/tfjs-models/tree/master/coco-ssd) for object detection.
+- Google UI/UX for design inspiration.
+
+## Contact
+
+For any questions or feedback, please contact [Harshit Jaiswal](mailto:harshitj183@gmail.com).
diff --git a/index.html b/index.html
@@ -1,18 +1,29 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Object Detection and Tracking</title>
-    <link rel="stylesheet" href="style.css">
-</head>
-<body>
-    <div class="container">
-        <video id="video" width="640" height="480" autoplay></video>
-        <canvas id="canvas" width="640" height="480"></canvas>
-    </div>
-    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
-    <script src="script.js"></script>
-</body>
-</html>
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Object Detection and Tracking</title>
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+        <div class="container">
+            <div class="loader" id="loader"></div>
+            <div class="instructions" id="instructions">
+                Please allow camera access to use this application.
+            </div>
+            <video id="video" autoplay></video>
+            <canvas id="canvas"></canvas>
+        </div>
+        <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
+        <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
+        <script src="script.js"></script>
+
+
+
+
+        <script src="https://cdn.githubraw.com/harshitj183/harshitj183/main/badge/floating.js">
+        </script>
+
+    </body>
+    </html>
diff --git a/script.js b/script.js
@@ -1,15 +1,28 @@
 const video = document.getElementById('video');
 const canvas = document.getElementById('canvas');
 const ctx = canvas.getContext('2d');
+const instructions = document.getElementById('instructions');
 
-// Set up video stream
-navigator.mediaDevices.getUserMedia({ video: true })
-    .then(stream => {
+// Function to set up video stream and handle permissions
+async function setupCamera() {
+    try {
+        // Prompt user for camera access
+        const stream = await navigator.mediaDevices.getUserMedia({ video: true });
         video.srcObject = stream;
-    })
-    .catch(err => {
+
+        // Update canvas size to match video size
+        video.onloadedmetadata = () => {
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+            // Hide instructions once the camera is active
+            instructions.classList.add('hidden');
+        };
+    } catch (err) {
+        // Handle the error if user denies camera access or other issues occur
         console.error("Error accessing video stream: ", err);
-    });
+        instructions.textContent = "Camera access is required for this application to function. Please allow camera access.";
+    }
+}
 
 // Load COCO-SSD model
 let model;
@@ -62,6 +75,10 @@ async function detectObjects() {
 }
 
 // Initialize
-loadModel().then(() => {
+async function initialize() {
+    await loadModel();
+    await setupCamera();
     detectObjects();
-});
+}
+
+initialize();
diff --git a/style.css b/style.css
@@ -1,18 +1,73 @@
+/* Base Styles */
 body {
+    font-family: 'Roboto', sans-serif;
+    background-color: #f5f5f5; /* Light grey background */
+    margin: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
-    margin: 0;
-    background-color: black;
 }
 
 .container {
     position: relative;
+    width: 100%; /* Full width of the viewport */
+    height: 100vh; /* Full height of the viewport */
+    max-width: 1200px; /* Max width for large screens */
+    max-height: 900px; /* Max height for large screens */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
+    border-radius: 8px; /* Rounded corners */
+    background-color: #ffffff; /* White background */
+    overflow: hidden; /* Hide overflow */
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
+/* Video and Canvas */
 video, canvas {
     position: absolute;
     top: 0;
     left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover; /* Maintain aspect ratio */
+}
+
+/* Loader */
+.loader {
+    position: absolute;
+    border: 8px solid #f3f3f3; /* Light grey */
+    border-top: 8px solid #4285f4; /* Google blue */
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    animation: spin 1s linear infinite;
 }
+
+/* Spin animation */
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Instructions */
+.instructions {
+    position: absolute;
+    color: #1f305e; /* Dark blue for text */
+    font-size: 16px;
+    font-weight: 400;
+    padding: 10px;
+    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
+    border-radius: 4px;
+    z-index: 10; /* Ensure it is above other elements */
+    display: block; /* Ensure it is visible */
+}
+
+/* Hide instructions when camera is active */
+.instructions.hidden {
+    display: none;
+}
+
+/* Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');