A common issue many people are running into is a 404 error when loading the models folder. This is caused when you are not running your code inside a server that loads the models folder. For example just right clicking the file and opening in Chrome will not work. I use Live Server with VSCode to run the code and that works for me.
Sir i copied your whole code still it is not working first i used wamp server to run the code and after that i also tried with my online server then also it is not working please tell what should i do
@@hrishikeshrane2429 I am not sure. Your problem could be that the root of your server is not the root of the project so you will need to change the model URLs to be from the root of the server.
@Asim Hussain was having the same issue, opened settings/live server config, checked and unchecked some stuff there( don't ask what, lol) and it's now working. I hope it helps))
I developed a site to detect faces, drawa face landmarks, detect facial expressions, and age Goto face-api-js-demo.netlify.app From your computer Share this if you can
Just wanted to let you, @Web Dev Simplified, know, that this video, as well as the sequel were helpful in an international project at my university. Thank you you for providing a fast and simple tutorial as a guide for our minimum viable solution for a part of the project
I know that this was a while ago. But, it is definitely still one of the better API recognition discovery / coding demonstrations that I have seen in quite some time. Well done, sir!!!!
Wow so many haters... thanks I think this video is really nice for anyone who wants to start playing with facedetection without deep knowledge of programming. Even if you don't build the facedetection I believe it's really impressive how you make things easy to understand. Thanks again
"how to implement a face detection api" not "how to creat" Anyway, making a face detection api takes at least a 5 hour run and will definitely makes less views in yt, after all people just like to see the cool part when everything works with press of a button not the time spent debugging. Nice video dude
"5 hour run and will definitely makes less views in yt" I'm gonna stop you right there. If done right, long tutorials get views. Other experienced youtubers can fastforward footages from their actual coding time, condensing it down to 10 minutes of contents with summaries. Others can make it a really interesting series to watch. Watch time is how you get money
Man you're gem ! People are actually really mean, believe me if they would have been paying for such informative tutorial they'd be like a kicked ass. They are getting such informative content for free that's why they are barking too much. Thank you so much for this tutorial. I had been searching for such content for long time and at last I got what I was looking for. You earned a subscriber. Stay blessed
If you like animation using image , 2d , 3d animated arbitrary shape using html. i will suggest ..Coding techno oregano channel.. th-cam.com/video/-VKhBdcuBqY/w-d-xo.html th-cam.com/video/_32EAm9Z08g/w-d-xo.html th-cam.com/video/JtS6N_z233A/w-d-xo.html -- sliding effect Hope that you will like
Despite all negative comments, this was really a eye opener for what JS is capable of. And now I can test how to fool face recognition algoritms. Thanks!
Nice flow, easy to listen to (didn't ramble, or divert), clear, simple and effective. Your a great presenter with a nice story type flow ability. Well done, excellent presentation.
@@WebDevSimplified thanks for the work... is there any way i could make the lips fill in blue, etc... or even get the pixels and shade it blue, like makeup?
Awesome! Love it that it is well explained. All done in less than 13 mins. Yes, please .... more AI goodness sounds real good. Now to have fun with this.
It doesn't matter because in the real world at these tech companies you will be using their APIs to implement stuff, this is a great project to complete and to have in a portofolio
Yes, thank you for this. Keep making awesome stuff like this! Maybe you could look into incorporating React Native with .TSX files into future projects.
If you like animation using image , 2d , 3d animated arbitrary shape using html. i will suggest ..Coding techno oregano channel.. th-cam.com/video/-VKhBdcuBqY/w-d-xo.html th-cam.com/video/_32EAm9Z08g/w-d-xo.html th-cam.com/video/JtS6N_z233A/w-d-xo.html -- sliding effect
I really like the way you teach.It is compact and this is my first time to know that Web browser can detect face by use javascript.I use to study python and keras to do object detection but those could not run on web browser easily. I will try to do the coding follow your step, hope I can run the same way as demonstration result.
If you like animation using image , 2d , 3d animated arbitrary shape using html. i will suggest ..Coding techno oregano channel.. th-cam.com/video/-VKhBdcuBqY/w-d-xo.html th-cam.com/video/_32EAm9Z08g/w-d-xo.html th-cam.com/video/JtS6N_z233A/w-d-xo.html -- sliding effect
Wow! This is super cool. Definitely gonna give it a try. Please do face recognition too. And extend it to a face unlock system perhaps. Please do more videos on ML, AI and AR.
If you like animation using image , 2d , 3d animated arbitrary shape using html. i will suggest ..Coding techno oregano channel.. th-cam.com/video/-VKhBdcuBqY/w-d-xo.html th-cam.com/video/_32EAm9Z08g/w-d-xo.html th-cam.com/video/JtS6N_z233A/w-d-xo.html -- sliding effect Hope that you will like
I am getting CORS error URL scheme must be "http" or "https" for CORS request. when i am including face-api.min.js in script tag in index.html . Can anyone help me
7:52 "and it saying tinyFaceDetectorOptions is not a constructor" --*cut* (10m-1h later) "Oh man you kidding me?!?!?! " *cut*-- "and this is super easy to fix, this just needs to be a captial T"
That would also be quite stupid if he would have done that, because it seems that someone already did that. Now I make something to see if the people at my frontdoor come with good intentions or not.
@@Illu07 I know he did, but still i enjoyed his video and enthusiasm. Let's just be glad he not your lawyer in a capital case and his claim would put you away forever. Now I watched this video very relaxed on my couch and learned about the API he used.
There’s 2 things... He is copying the code from another device. And he is not creating any detection algorithms rather he is just interacting with the Face detection algorithms API 🐝 But the explanation was good. Very cleaver guy.
I have a question How I can only fetch the expression and store it into a variable and print it in console. Nothing else I tried console.log (detections[0].expressions); but it shows all expressions value. I want only which is on the screen
A common issue many people are running into is a 404 error when loading the models folder. This is caused when you are not running your code inside a server that loads the models folder. For example just right clicking the file and opening in Chrome will not work. I use Live Server with VSCode to run the code and that works for me.
I used VSCode for this too. But I'm still getting the same error even though my folder arrangements are the same as yours.
@@tasnimzia4499 Do you have VSCode open to the root folder of your project. Also is your code the same as the code linked in the description.
Sir i copied your whole code still it is not working
first i used wamp server to run the code
and after that i also tried with my online server then also it is not working
please tell what should i do
@@hrishikeshrane2429 I am not sure. Your problem could be that the root of your server is not the root of the project so you will need to change the model URLs to be from the root of the server.
@Asim Hussain was having the same issue, opened settings/live server config, checked and unchecked some stuff there( don't ask what, lol) and it's now working. I hope it helps))
This isn't how to BUILD face detection with JavaScript but rather how to IMPLEMENT face detection with JavaScript.
как развернуть чужой гит и запустить с умным ебальником
Exactly
@@d33pFaiL Все в довольно интересной форме рассказал и показал, указал источник на гит, haters gonna hate:D
@@d33pFaiL жестко, у тебя очень конструктивная критика, в том числе моего коммента, тебе бы к психотерапевту сходить
@@d33pFaiL Yes
Don't get disheartened by odd comments, it's part of the trade mate!
But you sir, are doing a fantastic job!
Highly appreciated!
We do love your Ai videos. Make more of these
Will do!
@Web Dev Simplified YAY!!! Lmao.
I second that request. This was a great tutorial.
I developed a site to detect faces, drawa face landmarks, detect facial expressions, and age
Goto face-api-js-demo.netlify.app
From your computer
Share this if you can
Just wanted to let you, @Web Dev Simplified, know, that this video, as well as the sequel were helpful in an international project at my university. Thank you you for providing a fast and simple tutorial as a guide for our minimum viable solution for a part of the project
I know that this was a while ago. But, it is definitely still one of the better API recognition discovery / coding demonstrations that I have seen in quite some time. Well done, sir!!!!
next video how to build real time covid19 detection with js
Lol
You can't do that using software alone .
@@abh1yan lol😂
@Neutral Me 🤣
Hahhah
The intro was like a robot talking about robots. Appreciate the tutorial.
That is just how I am. My newer videos are slightly less robotic.
He was reading
@@murilomelo6752 I wasn't reading any script. I do not script any of my videos since I suck at writing and it would be even more robotic.
@@murilomelo6752 Your profile pic is in almost any youtube channel comment section I visit.
"Anything but mess my hairdo."
The best tutorial on AI face detection I have ever seen
Thank you!
th-cam.com/video/F5shV0pInJM/w-d-xo.htmlsub_confirmation=1 CHECK OUT MY PYTHON OPENCV TUTORIAL IN JUST 1 HOUR 🔥🔥
@@amoghamaiya3832 We prefer Javascript over PYTHON. So go away
Keep them coming dev, someone like i get to be enthusiastic and motivated by seeing such good works from the development side
Wow so many haters... thanks I think this video is really nice for anyone who wants to start playing with facedetection without deep knowledge of programming. Even if you don't build the facedetection I believe it's really impressive how you make things easy to understand. Thanks again
"how to implement a face detection api" not "how to creat"
Anyway, making a face detection api takes at least a 5 hour run and will definitely makes less views in yt, after all people just like to see the cool part when everything works with press of a button not the time spent debugging.
Nice video dude
"5 hour run and will definitely makes less views in yt"
I'm gonna stop you right there. If done right, long tutorials get views. Other experienced youtubers can fastforward footages from their actual coding time, condensing it down to 10 minutes of contents with summaries. Others can make it a really interesting series to watch. Watch time is how you get money
Syed, wallah !
In opposite of the majority of comments, I thank you for this tutorial. It's going very helpful so far and even a dummy can understand the steps.
You really are an amazing programmer and an awesome instructor. I never saw a video so straight into the topic, and understandable. :)
he's one of the worst instructors ever, nonetheless the argument treated is interesting
it's amazing to see some unusual videos like this as i'm always focusing on my web dev tutorials, please keep them up, and thank you.
It's always been great to visit your channel. All videos are very intuitive, simple to understand but full of learnings. Thank you!!!
Nobody:
Me:Don't know anything about coding but still watching this.
me 2
AI is just that interesting. I watch lots of AI videos even though I have no idea what is going on in many of them.
maybe you should start coding.
Me 2
@Kaya Beautymantra Yeah, you need the right tutorials to start
Man you're gem ! People are actually really mean, believe me if they would have been paying for such informative tutorial they'd be like a kicked ass. They are getting such informative content for free that's why they are barking too much. Thank you so much for this tutorial. I had been searching for such content for long time and at last I got what I was looking for. You earned a subscriber. Stay blessed
you hit it spot on! have you any examples on codepen. some ppl there get angry with questions, but u seem quite reasonable!
Hi, dude. Please make a second part of this, it would help me a lot. Thanks.
I just recorded a part 2 which will release Tuesday.
This is really good. I love it. Thanks for making this video. It's impressive how far just a little JavaScript can go.
Omar, that's not a little. its the ready made ingredients remixed.
If you like animation using image , 2d , 3d animated arbitrary shape using html. i will suggest ..Coding techno oregano channel..
th-cam.com/video/-VKhBdcuBqY/w-d-xo.html
th-cam.com/video/_32EAm9Z08g/w-d-xo.html
th-cam.com/video/JtS6N_z233A/w-d-xo.html -- sliding effect
Hope that you will like
Can you make a series about Javascript, I have watched a lot on youtube but I just understand your channel. Form Vietnam with love!
I plan to eventually, but haven't gotten around to it yet.
@@WebDevSimplified Thank you !
You can follow following channel as well.
th-cam.com/users/programmingwithmosh
Despite all negative comments, this was really a eye opener for what JS is capable of. And now I can test how to fool face recognition algoritms. Thanks!
Thanks bro
Love from INDIA
You're welcome!
This is really BEAUTIFUL video I have seen in a long time!! Terrific explanation in such a short time!!
Videos like yours are such inspirations for me to keep on coding. Thanks
I'm glad I could help!
Nice flow, easy to listen to (didn't ramble, or divert), clear, simple and effective. Your a great presenter with a nice story type flow ability. Well done, excellent presentation.
Thank you so much! I really appreciate it. I'm glad you enjoyed the video.
@@WebDevSimplified thanks for the work... is there any way i could make the lips fill in blue, etc... or even get the pixels and shade it blue, like makeup?
Awesome.... Thanks for great video...
Please make part 2 for login with face detection.
I don't think I will cover login in part 2 since that will require building a login system, but I definitely plan to cover face recognition.
@@WebDevSimplified Hey! The best way to do login with the face is saving the custom model in local session?
That's the way to do it, nothing but the necessary frameworks and all vanilla! Well done.
Awesome! Love it that it is well explained. All done in less than 13 mins. Yes, please .... more AI goodness sounds real good. Now to have fun with this.
Thank you! I try to keep all my videos short and to the point since I hate watching long drawn out tutorials.
can't believe this is free this man is a hero thank you sir.
12:25 This video has nothing to do with how the face detection works.
lol you are actually right :)
u right
u just made the world of programming so easy
"there's only one face apparently" he says as if expecting more than one 👀
Your videos are super exciting. Explained well. Keep up the work dude
"That's all it takes to create this simple face detection algorithm." No, you are not creating this algorithm, you are just interacting with the API.
Yes, everybody knows that here, you don't need to point that out
@@nadir2k He's polish "programmer" and he's angry coz he don't have any success with codding.
@@messiah2534 And you with english. "he don't"
It doesn't matter because in the real world at these tech companies you will be using their APIs to implement stuff, this is a great project to complete and to have in a portofolio
no one asks your opinion, you little polish peasant
Really glad TH-cam suggest me this video. Liked, subscribed cant wait for more epic stuff.
Thank you so much!
Yes, thank you for this. Keep making awesome stuff like this! Maybe you could look into incorporating React Native with .TSX files into future projects.
I do not use React Native so I probably will not cover it in the near future. Sorry.
If you like animation using image , 2d , 3d animated arbitrary shape using html. i will suggest ..Coding techno oregano channel..
th-cam.com/video/-VKhBdcuBqY/w-d-xo.html
th-cam.com/video/_32EAm9Z08g/w-d-xo.html
th-cam.com/video/JtS6N_z233A/w-d-xo.html -- sliding effect
@@WebDevSimplified Hey kyle it's showing, : Uncaught SyntaxError: Unexpected identifier 'faceapi'
Do you know what would have caused this?
Wow, thanks so much. I'm very happy that I can connect my camera to my site 😁
Bro Make a video on simplified JS series , love from India❤️
I plan to do that eventually. It is just really time consuming.
That’s a super good idea :)
Aaaaand that is my subscription of today!!
Thanks man your videos are amazing.
Thank you soooooo much this helped me out a ton!!!!
:D
I'm glad I could help!
@@WebDevSimplified is there angular version of this code available ??
Awesome man! Keep up the good work and congratulations on hitting 11k.
Thanks!
@@WebDevSimplified I should be thanking you!
That surprise expression 😆😆
I have been looking for this video. Finally ... got it. Thank You :)
>uses a face detection algorithm
>this is how to make a face detection algorithm.
I'm not sure I understand.
Your explanations are really impressive. I want you to make more videos like this using javascript. I am a lover of JavaScript.
Now I can be like the cool kids and include a face detection in my website in order to unlock my content lol.
The Best tutorial on AI face Detection I have ever seen ,Thank you Brother
You're welcome!
A lot of people are asking about part two of this video. It is already released and can be found here. th-cam.com/video/AZ4PdALMqx0/w-d-xo.html
Cannot wait to try this. Very nice tutorial would love more like this.
Thanks. I have a part 2 linked in the description and end screen as well.
Paaaaart 2
MAKE PART 2!!!!
love your videos!
Rename the title to "How To Use Face API to Build Real Time Face Detection"
up
I really like the way you teach.It is compact and this is my first time to know that Web browser can detect face by use javascript.I use to study python and keras to do object detection but those could not run on web browser easily. I will try to do the coding follow your step, hope I can run the same way as demonstration result.
Without Promise and Face API, I think I'm gonna have to sell watermelon for a living..
hahahhaha......you need assistance ??
Do the second part , these kind of content helps a lot Thanks man
I have a part 2 of this video already out linked in the description and end screen.
@@WebDevSimplified Got it man thank you so much..
When I added the Promise.all([... part I could no longer see the video, although when I inspect element there are no errors.
If you like animation using image , 2d , 3d animated arbitrary shape using html. i will suggest ..Coding techno oregano channel..
th-cam.com/video/-VKhBdcuBqY/w-d-xo.html
th-cam.com/video/_32EAm9Z08g/w-d-xo.html
th-cam.com/video/JtS6N_z233A/w-d-xo.html -- sliding effect
Wow! This is super cool. Definitely gonna give it a try. Please do face recognition too. And extend it to a face unlock system perhaps. Please do more videos on ML, AI and AR.
Great tutorial! Thanks man. But honestly: semicolons ffs!!
Never! Once you go semicolon-less you never go back 😜
If you like animation using image , 2d , 3d animated arbitrary shape using html. i will suggest ..Coding techno oregano channel..
th-cam.com/video/-VKhBdcuBqY/w-d-xo.html
th-cam.com/video/_32EAm9Z08g/w-d-xo.html
th-cam.com/video/JtS6N_z233A/w-d-xo.html -- sliding effect
Hope that you will like
@@WebDevSimplified Bro 🙄😁😂
Great Video man, keep making videos like this. I have subscribed
Thank you!
copy paste codes and tell my dad this is my first A.I. LOL xD
yes you're right , a lot of people make videos without any background, just copy paste. => it's a wasting time.
I am interested to learn more on AI Face Detection. Kindly provide more videos on such topics.
I have another video linked at the end of this one on face recognition.
I am getting CORS error URL scheme must be "http" or "https" for CORS request. when i am including face-api.min.js in script tag in index.html . Can anyone help me
Install the cors package :
Command: npm install cors
Also include this in the file like server.js or app.js
Santosh Gupta that has nothing to do with this???
I'm going to use this to learn how to break realtime facial recognition algos. Thanks for that. We must all resist this kind of technology.
error : face-api.min.js:1 Uncaught (in promise) Error: Failed to link vertex and fragment shaders. ........
Same
feel your pain! same
@@imacup5640 I answered in this thread what I think might have been causing it
@@_Moody_1502 Answered in the thread what worked for me
Great video! Congrats and keep up the awesome work!
7:52 "and it saying tinyFaceDetectorOptions is not a constructor" --*cut* (10m-1h later) "Oh man you kidding me?!?!?! " *cut*-- "and this is super easy to fix, this just needs to be a captial T"
So if i ever get an "is not a constructor" error, i should just put a capital T
lol true
@@animehero8648 not sure if trolling or serious haha
you are amazing, you make javascript look like adding 1+ 1
You didn't build the face detection algorithm, nor you've implemented it.
That would also be quite stupid if he would have done that, because it seems that someone already did that. Now I make something to see if the people at my frontdoor come with good intentions or not.
@@arumbai you are absolutely right. Yet he claimed to do so.
@@Illu07 I know he did, but still i enjoyed his video and enthusiasm. Let's just be glad he not your lawyer in a capital case and his claim would put you away forever. Now I watched this video very relaxed on my couch and learned about the API he used.
There’s 2 things...
He is copying the code from another device.
And he is not creating any detection algorithms rather he is just interacting with the Face detection algorithms API 🐝
But the explanation was good. Very cleaver guy.
i'm having trouble with google chrome, i can't get this to work on it, works great on opera.
I get this error:
DOMException
(anonymous)
have you figured out this error? :)
@@danpetre5414 If you know please kindly tell me
Really Simplified
good job bro
This doesnt seems simple. dont understand anything just the HTML.. ;(
keep working on learning. takes time to understand.
This is an amazing video. Please make more videos like this
These ar great videos and give a very helpful starter on the subjects. More please.
you mean use a library not build there is a big difference.
great work sir we want more tutorial on AI with projects
I have a question
How I can only fetch the expression and store it into a variable and print it in console. Nothing else
I tried
console.log (detections[0].expressions); but it shows all expressions value. I want only which is on the screen
@webdevsimplified
Video is crisp and clear... Thanks for the tutorial... Waiting for more AI tutorials...
Thanks! If you haven't already seen the face recognition video that is a followup to this video I would check it out.
12:17 I thought he will laugh hahahaha
Great video man, subscribed!
Thank you so much for the support.
It’s not building, nor implementing. Title should be ‘Calling face-detection API by JavaScript’
So?
Whoever published this project on github and ran into 404 error, replacing "/models" with "./models" in the script.js worked for me.
didn't appreciate the clickbaity title
Boom, im a new subscriber dude, keep it the good work
Thank you!
My favorite TH-camr !
Thank you so much!
Wow! very good demonstration of AI technology in simple js, thanks a lot for the good work.
Holly sh*t... Please do more videos like this. Thanks. Do more videos... You definitely master Js and take it to a whole new level.
Thank you. I have a part two of this video already out and linked in the description and end screen of this video.
I liked, please part two ❤
Part two is already released and linked in the description.
Awesome video sir... Love from india🇮🇳
Thank you
Thank you Kyle for the work you do. It is inspirational. Keep it up.
We need a translator from many country! Specifically from Indonesian hehe😁 good job brother 💪🏻
Implementing this was easier than I thought it would be, thanks man. Now all I need to do is find a use for it in my project.
he didn't implement it, he used preexisting solution (library) for it.
Very nice audio's are crystal clear 👍 !!!
Thank you.
This was very good. Thanks for the great work dude.
You're welcome!
Hey bro, this kind of tutorial is really good. This is what i like. Thanks for making this tuts.
Yes, a part two, please.
It is already released and linked in the description.
Very quick and informative. Thank you so much!
Awesome tutorial! I think I'll implement this to my robot
Thanks, bro!!Love from Bangladesh!
You're welcome.