Watcher AI

Watcher AI

Watcher AI

Watcher AI

NextJS Web App

NextJS Web App

NextJS Web App

NextJS Web App

Three iPhones displaying an app containing book covers
Three iPhones displaying an app containing book covers
Three iPhones displaying an app containing book covers
Three iPhones displaying an app containing book covers

Overview

Overview

WatcherAI is an innovative React-based real-time webcam application designed to leverage the power of TensorFlow.js and the COCO-SSD algorithm for object detection. This application is engineered to provide users with a comprehensive set of webcam functionalities, including video recording, screenshot capture, and automatic recording triggered by person detection. The interface is designed with user experience in mind, offering controls for dark mode, camera view flip, volume adjustment, and customizable time delay settings.

WatcherAI is an innovative React-based real-time webcam application designed to leverage the power of TensorFlow.js and the COCO-SSD algorithm for object detection. This application is engineered to provide users with a comprehensive set of webcam functionalities, including video recording, screenshot capture, and automatic recording triggered by person detection. The interface is designed with user experience in mind, offering controls for dark mode, camera view flip, volume adjustment, and customizable time delay settings.

WatcherAI is an innovative React-based real-time webcam application designed to leverage the power of TensorFlow.js and the COCO-SSD algorithm for object detection. This application is engineered to provide users with a comprehensive set of webcam functionalities, including video recording, screenshot capture, and automatic recording triggered by person detection. The interface is designed with user experience in mind, offering controls for dark mode, camera view flip, volume adjustment, and customizable time delay settings.

Built using NextJS for server-side rendering and styled with Shadcn UI, WatcherAI employs advanced technologies to ensure smooth performance and a sleek, intuitive interface. React libraries such as Webcam and Lucid Icons enhance the application's functionality and visual appeal. The integration of TensorFlow's COCO-SSD model enables real-time object detection, making WatcherAI a powerful tool for various practical applications, including security and surveillance.

Built using NextJS for server-side rendering and styled with Shadcn UI, WatcherAI employs advanced technologies to ensure smooth performance and a sleek, intuitive interface. React libraries such as Webcam and Lucid Icons enhance the application's functionality and visual appeal. The integration of TensorFlow's COCO-SSD model enables real-time object detection, making WatcherAI a powerful tool for various practical applications, including security and surveillance.

Built using NextJS for server-side rendering and styled with Shadcn UI, WatcherAI employs advanced technologies to ensure smooth performance and a sleek, intuitive interface. React libraries such as Webcam and Lucid Icons enhance the application's functionality and visual appeal. The integration of TensorFlow's COCO-SSD model enables real-time object detection, making WatcherAI a powerful tool for various practical applications, including security and surveillance.

Tech Stack

Figma

Design Tool

NextJS

React Framework

Visual Studio Code

IDE

Tech Stack

Figma

Design Tool

NextJS

React Framework

Visual Studio Code

IDE

Tech Stack

Figma

Design Tool

NextJS

React Framework

Visual Studio Code

IDE

Tech Stack

Figma

Design Tool

NextJS

React Framework

Visual Studio Code

IDE

Created

Created

2024

View Web App

View Web App

Process

Process

Site Page Overview

WatcherAI is designed as a Single Page Application (SPA) split into two main columns:

  • Left Column: This side of the screen is dedicated to the live webcam view, where real-time object detection occurs. Detected objects, such as persons, are highlighted with colored overlays for visual feedback.

  • Right Column: This section contains two parts:

    • Icon Menu: A vertical menu of icons that toggle various settings and features of the application.

    • Information Panel: Displays detailed information about the selected settings and features from the icon menu. Users can interact with settings for dark mode, camera flip, screenshot capture, video recording, auto record, volume adjustment, time delay, and object highlighting.

Site Page Overview

WatcherAI is designed as a Single Page Application (SPA) split into two main columns:

  • Left Column: This side of the screen is dedicated to the live webcam view, where real-time object detection occurs. Detected objects, such as persons, are highlighted with colored overlays for visual feedback.

  • Right Column: This section contains two parts:

    • Icon Menu: A vertical menu of icons that toggle various settings and features of the application.

    • Information Panel: Displays detailed information about the selected settings and features from the icon menu. Users can interact with settings for dark mode, camera flip, screenshot capture, video recording, auto record, volume adjustment, time delay, and object highlighting.

Site Page Overview

WatcherAI is designed as a Single Page Application (SPA) split into two main columns:

  • Left Column: This side of the screen is dedicated to the live webcam view, where real-time object detection occurs. Detected objects, such as persons, are highlighted with colored overlays for visual feedback.

  • Right Column: This section contains two parts:

    • Icon Menu: A vertical menu of icons that toggle various settings and features of the application.

    • Information Panel: Displays detailed information about the selected settings and features from the icon menu. Users can interact with settings for dark mode, camera flip, screenshot capture, video recording, auto record, volume adjustment, time delay, and object highlighting.

Site Page Overview

WatcherAI is designed as a Single Page Application (SPA) split into two main columns:

  • Left Column: This side of the screen is dedicated to the live webcam view, where real-time object detection occurs. Detected objects, such as persons, are highlighted with colored overlays for visual feedback.

  • Right Column: This section contains two parts:

    • Icon Menu: A vertical menu of icons that toggle various settings and features of the application.

    • Information Panel: Displays detailed information about the selected settings and features from the icon menu. Users can interact with settings for dark mode, camera flip, screenshot capture, video recording, auto record, volume adjustment, time delay, and object highlighting.

Design Decisions

The design of WatcherAI focuses on a clean, modern aesthetic with a black and white background palette, accentuated by blue highlights to draw attention to key interactive elements. The choice of NextJS for server-side rendering ensures fast load times and a responsive user experience. Shadcn UI was selected for its sleek and customizable components, which help maintain a consistent and visually appealing design. The application’s interface is intuitive, with mode toggles, action buttons, and sliders that make it easy for users to interact with the webcam features.

Design Decisions

The design of WatcherAI focuses on a clean, modern aesthetic with a black and white background palette, accentuated by blue highlights to draw attention to key interactive elements. The choice of NextJS for server-side rendering ensures fast load times and a responsive user experience. Shadcn UI was selected for its sleek and customizable components, which help maintain a consistent and visually appealing design. The application’s interface is intuitive, with mode toggles, action buttons, and sliders that make it easy for users to interact with the webcam features.

Design Decisions

The design of WatcherAI focuses on a clean, modern aesthetic with a black and white background palette, accentuated by blue highlights to draw attention to key interactive elements. The choice of NextJS for server-side rendering ensures fast load times and a responsive user experience. Shadcn UI was selected for its sleek and customizable components, which help maintain a consistent and visually appealing design. The application’s interface is intuitive, with mode toggles, action buttons, and sliders that make it easy for users to interact with the webcam features.

Notes

WatcherAI stands out due to its combination of advanced object detection and user-centric design. The use of TensorFlow's COCO-SSD model, particularly the MobileNetV2 variant, allows for efficient and accurate detection of objects in real-time. The application's features are tailored to provide maximum utility while optimizing resource use, addressing common issues such as excessive disk space consumption by recording selectively based on person detection.

Future Development

WatcherAI is primarily a prototype demonstrating how object detection can be integrated into camera surveillance systems. Future developments will focus on porting the project to IoT-based cameras and adapting the codebase accordingly. The model will be enhanced to detect weapons and automatically alert emergency services if a weapon is detected in public spaces, banks, or shops. This feature aims to improve security by automating the detection and reporting of potential threats, particularly in scenarios like robberies where weapons are often used.


Notes

WatcherAI stands out due to its combination of advanced object detection and user-centric design. The use of TensorFlow's COCO-SSD model, particularly the MobileNetV2 variant, allows for efficient and accurate detection of objects in real-time. The application's features are tailored to provide maximum utility while optimizing resource use, addressing common issues such as excessive disk space consumption by recording selectively based on person detection.

Future Development

WatcherAI is primarily a prototype demonstrating how object detection can be integrated into camera surveillance systems. Future developments will focus on porting the project to IoT-based cameras and adapting the codebase accordingly. The model will be enhanced to detect weapons and automatically alert emergency services if a weapon is detected in public spaces, banks, or shops. This feature aims to improve security by automating the detection and reporting of potential threats, particularly in scenarios like robberies where weapons are often used.


Notes

WatcherAI stands out due to its combination of advanced object detection and user-centric design. The use of TensorFlow's COCO-SSD model, particularly the MobileNetV2 variant, allows for efficient and accurate detection of objects in real-time. The application's features are tailored to provide maximum utility while optimizing resource use, addressing common issues such as excessive disk space consumption by recording selectively based on person detection.

Future Development

WatcherAI is primarily a prototype demonstrating how object detection can be integrated into camera surveillance systems. Future developments will focus on porting the project to IoT-based cameras and adapting the codebase accordingly. The model will be enhanced to detect weapons and automatically alert emergency services if a weapon is detected in public spaces, banks, or shops. This feature aims to improve security by automating the detection and reporting of potential threats, particularly in scenarios like robberies where weapons are often used.


Next Project

Next Project

Next Project

Beny's CV

Beny's CV

Beny's CV

->

->

->

Beny Dishon © 2024

Beny Dishon © 2024

Beny Dishon © 2024