DetectPro is an AI-powered object detection web application with Next.js, TailwindCSS, TensorFlow.js, TypeScript, and ShadCN-UI, specializing in real-time object detection through webcam feeds. It automatically records upon detecting persons or objects, features dark mode, mirror cam, screenshot, video recording, volume control, and an accessibility button for streamlined functionality. Ideal for professional, security, and personal applications, DetectPro combines cutting-edge AI for accurate analysis and comprehensive documentation, offering flexibility and efficiency in operational workflows

• Real-time Object Detection: Utilizes TensorFlow.js for on-the-fly object detection.
• Automatic Recording: Detects a person via webcam and automatically starts recording with a notification sound.
• Manual Detection and Recording: Allows users to manually detect objects.
• Dark Mode: Toggle between light and dark themes for better accessibility and user experience.
• Mirror Cam: Mirror the webcam feed.
• Screenshot: Capture screenshots from the webcam feed manually by using screenshot button.
• Video Recording: Manually start and stop video recording by using video capture button.
• Volume Control: Adjust the volume for the notification sound.
• Accessibility feature : When turned on, it automatically starts recording the first 30 seconds upon detecting a person with a notification sound for better accessibility.

Ensure you have the following installed on your system:

• Node.js (version 14.x or later)
• npm (version 6.x or later) or yarn

1. Clone the repository: git clone https://github.com/yourusername/DetectPro.git cd DetectPro
2. Install dependencies: npm install

To start the development server, run: npm run dev

• Open your browser and navigate to http://localhost:3000 to see the application in action.

To build the application for production, run: npm run build

• This will create an optimized build in the .next directory.

• When a person is detected via the webcam, the application will automatically start recording with a notification sound.
• You can manually start and stop recording using the "Record" button.

• Toggle the dark mode button to switch between light and dark themes.

• Use the mirror cam button to mirror the webcam feed.

• Capture screenshots from the webcam feed using the screenshot button.

• Adjust the volume of the notification sound using the volume control button.

• When turned on, the accessibility feature will automatically start recording the first 30 seconds upon detecting a person, accompanied by a notification sound for enhanced accessibility.

screenshot of DetectPro in action:

Watch the video to see DetectPro in action:

• Next.js
• TailwindCSS
• TensorFlow.js
• TypeScript
• ShadCN-UI