smart-accident-detector-frontend-v1

KO | EN

gitlite — search

#ai #android #machine-learning #linux #macos #java #windows #awesome #cli #kubernetes #pytorch #ios #openai #open-source

smart-accident-detector-frontend-v1

(★ 10)

This will showcase the main repo for the website

smart-accident-detector-frontend-v1 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Smart Accident Detector

![Have a Glance!](https://raw.githubusercontent.com/AzhaanGlitch/smart-accident-detector-frontend-v1/main/readme_assets/1.png)

Smart Accident Detector is a full-stack web application that leverages deep learning to provide real-time accident detection from video streams. This project aims to reduce emergency response times by automatically identifying traffic incidents and providing instant feedback. The platform features both a file-upload system for analyzing pre-recorded media and a live detection module that uses a webcam feed.

### Live Demos
* Live Web Application: [Discover the Future: Unleash Your Curiosity on My Website!](https://smart-accident-detector-frontend-v1-one.vercel.app/)
* Live Backend API Endpoint: [If you are interested in complex backend (⁠｡⁠•̀⁠ᴗ⁠-⁠)⁠✧](https://azhaanglitch-smart-accident-detector-real-time.hf.space)

---

## Key Features

* **Dual Detection Modes**:
    * **Dashboard**: Upload video or image files to get a prediction on whether an accident is present.
    * **Real-time Detection**: Use your webcam for live, frame-by-frame accident analysis.
* **AI-Powered Backend**: A robust Flask API serves a trained TensorFlow/Keras model for fast and accurate inference.
* **Modern Frontend**: A sleek, responsive user interface built with HTML5, CSS3, and Bootstrap 5.
* **Interactive UI**: Features include a dark/light mode theme toggle, smooth animations, and real-time feedback overlays.
* **Containerized Deployment**: The backend is containerized with Docker and deployed as a scalable Space on Hugging Face.

---

## Project Architecture

This application follows a classic client-server model, separating the user interface from the heavy computational tasks of machine learning.

<div id="architectureSlideshow" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="readme_assets/2.png" class="d-block w-100" alt="Client-Server Architecture Diagram">
    </div>
    <div class="carousel-item">
      <img src="readme_assets/3.png" class="d-block w-100" alt="Data Flow Diagram">
    </div>
    <div class="carousel-item">
      <img src="readme_assets/4.png" class="d-block w-100" alt="Real-time Detection Demo">
    </div>
  </div>
</div>
<br>
1. **Client (Frontend)**: A static web application that runs entirely in the user's browser. It handles user interaction, captures video frames from the webcam using the `getUserMedia` API, and displays results.
2. **Server (Backend API)**: A Python Flask API deployed on Hugging Face Spaces. It exposes a `/predict` endpoint that accepts image data.
3. **Communication**: The client sends a camera frame (encoded as a Base64 string in a JSON payload) to the backend API via an asynchronous `fetch` request. The backend processes the image, runs inference with the TensorFlow model, and returns a JSON response containing the prediction (`Accident`/`Normal`) and a confidence score.

```
[User's Browser (Frontend)] --- (1. Sends camera frame as base64 JSON) ---> [Hugging Face Space (Backend)]
       |
       V
[Gunicorn + Flask Server]
       |
       V
[OpenCV Preprocessing -> TensorFlow Model]
       |
       V
[User's Browser (Frontend)] <--- (2. Receives prediction as JSON) --- [Hugging Face Space (Backend)]
```

---

## Technology Stack

This project integrates a wide range of modern technologies for the frontend, backend, and machine learning components.

### AI & Machine Learning
* **TensorFlow & Keras**: For building, training, and running the convolutional neural network (CNN) model.
* **OpenCV (Headless)**: Used on the server for high-performance image preprocessing (resizing, color conversion).
* **NumPy & Pillow**: For numerical operations and image manipulation in Python.
* **H5py**: For loading the Keras model from the `.h5` file format.

### Backend
* **Python 3.9**: The core language for the server-side logic.
* **Flask**: A lightweight micro web framework used to build the REST API.
* **Gunicorn**: A production-ready WSGI server used to run the Flask application inside the container.
* **Docker**: For containerizing the backend application, ensuring a consistent and reproducible deployment environment.
* **Hugging Face Spaces**: The cloud platform used for hosting the Dockerized API.

### Frontend
* **HTML5 & CSS3**: For structuring and styling the web pages, including custom CSS variables for theming.
* **JavaScript (ES6+)**: For all client-side logic, including DOM manipulation, handling user events, and making asynchronous API calls (`fetch`, `async/await`).
* **Bootstrap 5**: A popular CSS framework used for the responsive grid layout, components (buttons, cards), and styling.
* **Font Awesome**: For scalable vector icons used throughout the user interface.

---

## Setup and Local Installation

To run this project on your local machine, follow these steps.

### Prerequisites
* [Git](https://git-scm.com/)
* [Python 3.9+](https://www.python.org/downloads/) and `pip`
* A modern web browser

### 1. Clone the Repository
Clone the project to your local machine using Git.
```bash
git clone https://github.com/AzhaanGlitch/Smart-Accident-Detector-frontend-v1.git
cd Smart-Accident-Detector
```

### 2. Backend Setup (API)
Navigate to the folder containing the backend files (api.py, etc.).

#### a. Create a Virtual Environment
```bash
# For Windows
python -m venv venv
venv\Scripts\activate

# For macOS/Linux
python3 -m venv venv
source venv/bin/activate
```

#### b. Install Dependencies
Install all the required Python packages.
```bash
pip install -r requirements.txt
```

#### c. Run the Flask Server
Start the local API server. The model will load, and the server will be available at http://127.0.0.1:5000.
```bash
python api.py
```

### 3. Frontend Setup
The frontend is a static site and requires no special server.

#### a. Update the API URL (if necessary)
Open `Realtime.html` and ensure the `API_URL` constant points to your local server: `const API_URL = "http://127.0.0.1:5000/predict";`.

#### b. Open in Browser
Simply open the `index.html` file in your web browser to start the application.

#### c. Include Bootstrap for Slideshow
To enable the slideshow in the README when viewed on your website, include Bootstrap 5 in your `index.html`:
```html
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
```

### SOLO DEVELOPER
* Azhaan Ali Siddiqui - Frontend, Backend, ML, Deployment, Version Controlling

### License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.

smart-accident-detector-frontend-v1

smart-accident-detector-frontend-v1 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

smart-accident-detector-frontend-v1

smart-accident-detector-frontend-v1 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README