*The above image is just for your reference.
Yo! What’s up Coders. In the class 135, you have started making an AI Video Surveillance Web App. You can also Download the file of "ADV-C-135 AI OBJECT FINDER PART 1" or If you face any problem or error so you can figure out.
What is the Goal Of Project?
This project is divided into 3 parts. You have to make an AI object finder Web App. In this you
will be writing the name of the object which you want to search, and then the webcam will start and object detection should start happening on the webcam live view.
Then you show different types of objects but nothing will happen, and when you show the object which you have mentioned your system will speak out the object name and say object found, and the webcam and object detection will stop working.
For reference click on the link - Demo
What was the Story?
Protractor is an animal rescue organization. And it works with an aim to give home to all the homeless animals in the state, but since they don’t know which are they places where they can find such homeless dogs so they take help from video surveillance department and ask them to tell if they find any such animals on they webcam but since a person can’t keep an eye on the webcam all day so they have decided to build a web app where they system will speak out when it finds any animal(desired object). They need your help to build this web application.
What to do in First Part?
First you will have to create the UI of this website.
When the web app starts it should look like this:
When you write the object name and when the object gets detected:
.png "AI OBJECT FINDER - PART 1 | project 135 whitehat jr download")
*These images is just for your reference.
Getting Started:
1. Copy the code below or you can download the file.
<html> <head> <title>AI Video Surveillance</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js"></script> <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <center> /center> <footer> <p>Developed by BOT_SB</p> </footer>
2. Add background related to object detection. Here is the example:
3. add an input tag which will be used to take the object name which you want to search with the model.
<input type="search" id="search" class="form-control" placeholder="Enter the object name"/>
4. Add a start button with an onclick function with start() function which will be defined in the next project.
<button type="submit" class="btn btn-success" onclick="start();">S T A R T</button>
5. Add a HTML element and keep it empty, this HTML element will be used to hold the status of the model.
<h3 id="status" class="btn btn-primary"></h3>
I used h3 tag. You can use whatever you want.
6. Add an HTML element same as step 3, this HTML element will be used to hold the status of whether the mentioned object is found or not.
<h3 id="object" class="btn btn-warning"></h3>
I used h3 tag. You can use whatever you want.
7. You should use bootstrap classes to make the heading tags look good. Also add some additional styling like background color, text color, font-size, padding, margin to make the heading tags look beautiful. I make it like:
/*This is for the body */
body{
min-height: 800px;
}
/*This is for heading of the website */
.heading{
width: 100%;
margin: 0px;
}
/*This is for input */
#search{
width: 40%;
}
/*This is for the footer */
footer{
bottom: 0px;
width: 100%;
position: fixed;
text-align: center;
background-color: rgb(202, 6, 6);
color: #353535;
}
/*This is for the canvas */
canvas{
border: 3px solid #3535;
border-radius: 10px;
margin-top: 100px;
box-shadow: 20px 20px 100px red;
z-index: -1;
}
Click the Button Below to Download the File.
0 Comments