Human Counting App

Overview

The Human Counting App is a modern web application designed to count humans in images or video streams using advanced detection algorithms. It features a robust backend API for processing and a user-friendly frontend interface built with Vue.js for seamless image uploads and real-time result visualization.

Features

• Image Upload: Easily upload images to detect and count humans
• Real-time Results: Receive instant feedback with the number of humans detected
• Responsive UI: A clean, intuitive interface powered by Vue.js and Vite for fast performance
• Scalable Backend: Processes images efficiently with a Python-based server

Project Structure

human-counting-app/
├── backend/
│   ├── main.py                 # Backend server entry point
│   ├── requirements.txt        # Python dependencies
│   └── .env                    # Environment variables for backend configuration
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   │   └── ImageUploader.vue  # Vue component for image uploads
│   │   ├── App.vue             # Main Vue app component
│   │   └── main.js             # Frontend app entry point
│   ├── public/
│   │   └── index.html          # Static HTML template
│   ├── package.json            # Frontend dependencies and scripts
│   └── vite.config.js          # Vite build tool configuration

Setup & Installation

Prerequisites

• Backend: Python 3.8+, pip
• Frontend: Node.js 16+, npm
• A modern web browser (e.g., Chrome, Firefox)

Backend Setup

1. Navigate to the backend directory:

   cd backend

2. (Optional) Create and activate a virtual environment:

   python3 -m venv venv
   source venv/bin/activate  # On Windows: venv\Scripts\activate

3. Install dependencies:

   pip install -r requirements.txt

4. Configure environment variables:

   • Create a .env file in the backend/ directory
   • Add necessary configurations (e.g., API keys, port settings)

5. Run the backend server:

   python main.py

Frontend Setup

1. Navigate to the frontend directory:

   cd frontend

2. Install Node.js dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser and visit the URL displayed in the terminal (typically http://localhost:3000)

Environment Variables

The backend uses a .env file to manage sensitive configurations (e.g., API keys, server port).

Example .env file:

API_KEY=your_api_key_here
PORT=8000

Ensure the .env file is created and configured before running the backend.

Usage

1. Launch the backend server (python main.py)
2. Start the frontend development server (npm run dev)
3. Open the app in your browser
4. Use the interface to upload an image and view the human count results in real time

Contributing

Contributions are welcome! To contribute:

1. Fork the repository
2. Create a new branch for your feature or bug fix:

   git checkout -b feature/your-feature-name

3. Commit your changes and push to your fork
4. Submit a pull request with a clear description of your changes

For major changes, please open an issue first to discuss the proposed updates.

License

This project is licensed under the MIT License.

Contact

For questions or support, please open an issue on the repository or contact the maintainers.