Computer Vision Web Development: YOLOv8 and TensorFlow.js

In this lecture, I'll be showcasing a demo of the Photoshop Application that we're set to create in this section

In this lecture, I'll discuss the template layout that we'll be creating in this section.

In this lecture, we will be focusing on to create an image template, where we will have an image within our webpage.  We will write the initial code to get started with OpenCV and Web Development.

In this lecture, we will learn how to convert an image to gray scale, apply the blur effect and how to use the Canny Edge Detector to identify edges.

In  this lecture, we're creating a Photoshop Application. Our focus will be on incorporating a few buttons that perform certain actions such as converting an image to grayscale, applying a blur effect, or identifying its edges.

In this lecture, I'll present a demo of the Color Detection Application that we're going to build in this section.

In this lecture, the focus will be on creating a web layout for the Color Detection Application.

This lecture will focus on adding trackbars into our web application.

In this lecture, we'll convert the input image from BGR to HSV color space, create event listeners for trackbars, and retrieve the latest values from them. Subsequently, we'll create a mask and apply it to the original image.

In this lecture, I'll present a demo of the Shapes Detection Application we're building in this section

In this lecture, we'll concentrate on Shapes Detection using OpenCV.js, organized into 7 parts:

1. Update icons for our web app

2. Convert the input image to grayscale

3. Find edges using the Canny Edge Detector

4. Find corner points, draw bounding boxes around objects, and detect shapes

5. Add an image upload option to our web application

6. Integrate a download button in our web app for image downloads

In this lecture, I'll be presenting a demo of the Face Detection Application we're creating in this section, focusing on detecting multiple faces. We'll be utilizing OpenCV.js and the Haar Cascade Classifier for this purpose.

The entire project is broken down into several smaller steps, outlined as follows:

1. Update Icons in the Side Bar:

   • In the first step, the icons in the sidebar will be updated.

2. Convert Input Image to Gray Scale:

   • The second step involves converting the input image to grayscale.

3. Load Haar Cascade Frontal Face Classifier:

   • Moving on to the third step, the Haar Cascade Frontal Face classifier will be loaded.

4. Detect Faces in the Gray Scale Image:

   • After loading the Haar Cascade Frontal Face classifier in the fourth step, the gray scale image will be passed as input. This step will result in obtaining the x, y, width, and height coordinates for all faces detected in the image.

5. Draw Rectangles and Add Text to Detected Faces:

   • Utilizing the obtained coordinates (x, y, width, height), rectangles will be drawn around each detected face. Additionally, a text label "Face" will be added above the bounding box for each detected face.

In this lecture, we'll be creating the primary layout for the web application  to perform face detection on the live webcam feed. This will be achieved through the utilization of OpenCV.js and the Haar Cascade Classifier.

In this lecture, we'll enhance the web app layout by adding a sideline, sidebar, and right panel.

In this lecture, we'll complete our web app by introducing the option to perform face detection on both image and  live webcam feed. This feature provides users with the flexibility to choose between image or live webcam for face detection within a unified web application.

In this lecture, we'll cover displaying video and controlling video playback in the browser.

In this lecture, we'll delve into adding play and pause buttons to the web app for video playback control.

In this lecture, we'll explore the process of converting an input video from RGB to Gray Scale using OpenCV.js.

In this lecture, we'll be doing face detection on a video using OpenCV.js and Haar Cascade Classifier.

In this lecture, we'll  add an "Upload Video" option, enabling users to upload videos and perform face detection on their chosen files.

In this lecture, we'll enhance the web app layout by adding a sideline, sidebar, and right panel.

In this lecture, I'll be presenting a demo of the real-time object detection application we're building in this section, with a focus on detecting multiple objects. We'll use OpenCV.js and the Tensorflow.js COCO-SSD Model for this purpose.

In this lecture, we'll focus on creating a web layout for the Object Detection Application, and implement basic functions such as converting an image to grayscale.

In this lecture, we'll learn the process of detecting different objects in images using the TensorFlow.js COCO-SSD Model.

In this lecture, we'll complete our web app by adding the option to perform object detection on both image and on the live webcam feed. This feature provides users with the flexibility to choose between image or live webcam object detection within a unified web application.

In this lecture, I'll be presenting a demo of the object detection application we're building in this section, with a focus on detecting multiple objects in both images and videos using the TensorFlow.js COCO-SSD Model.

In this lecture, we'll learn the process of detecting different objects in images using the TensorFlow.js COCO-SSD Model.

In this lecture, we'll complete our web app by adding the option to perform object detection on both images and videos. This feature provides users with the flexibility to choose between image or video for object detection within a unified web application.

In this lecture, I'll be presenting a demo of the real-time object detection application we're building in this section, with a focus on detecting multiple objects. We'll use OpenCV.js and the YOLOv8 Model for this purpose.

This lecture provides a step-by-step guide on exporting YOLOv8 Model Weights into TensorFlow.js format.

This lecture provides a step-by-step guide on performing object detection in images using YOLOv8 and TensorFlow.js.

In this lecture, we will complete our web app by adding the option to perform object detection using YOLO8 on both images and the live webcam feed. This feature provides users the flexibility to choose between image or live webcam object detection within a unified web application.