Coding Challenge 158: Shape Classifier Neural Network with ml5.js

Man, you are pure awesomeness and energy. I remember a few years back when I started with p5js thanks to your coding trains, how I grew my first fractal tree. Now I come back and the energy is the same. Screw the algorithm, there is nothing to change here.

[@deneb3525]

I just want to say thank you for this, a while ago I was trying to figure out how to build something to recognise Rune/Glyphs and had totaly hit a wall. This explained almost everything I'll need. Very Cool.

[@TheCodingTrain]

Please share if you make one for glyphs!

[@fire17102]

@@TheCodingTrainThank You! my upcoming is a model that estimates how much water is in a glass or cup, combine that with a selenoid valve and you got an autofilling water/beer faucet 🌈 guessing that I will start with this video's implementation then go embeding it into Espcam or pi_cam with TF light or js 🍻

[@Khoir]

If you want 100% circle: First, draw this head, then erase some of the more detailed features, and one, two, three, a circle, uh, thingy.

[@dingdong3021]

Theres no 100%

[@kevin42]

One of my all time fav eps. Distinctly remember seeing it for the first time back in 2014

[@caysonarlo5322]

I guess Im asking randomly but does someone know a trick to get back into an instagram account..? I somehow lost the login password. I would love any tricks you can give me!

[@christopherjeffery3715]

@Cayson Arlo Instablaster :)

[@caysonarlo5322]

@Christopher Jeffery I really appreciate your reply. I got to the site on google and I'm trying it out atm. I see it takes a while so I will reply here later with my results.

[@zaynababbaspour4717]

Your videos helped me pass my computing GCSEs in England. These energetic and informative videos saved me. Thank you!!!!!

[@scotttroyer]

circles squares 3angles Works for all shapes up to 9angles.

[@redstone_mason]

it can go up to 10 angles if you use the roman numeral for 10 Xangles

[@jakimoretti7771]

going with hex values you can go up to 15 angles, or Fangles, as we call them

[@kphk3428]

I think you meant: 0angles 4angles 3angles

[@micheledaffara9245]

It's awesome how 1 million people want to learn. Amazing work :D

[@victap8837]

Love the enthusiasm and the sheer joy you show when presenting! Thank you for sharing your valuable knowledge!

[@Zachucks]

Dan's energy is just so great, love learning from people that are so happily into what they do :)

[@YuriyKlyuch]

This guy teaches! But seriously, thanks man, your work is amazing

[@beda9beda]

Your energy and excitement ate insane! You are so cool :)

[@fernandosanchezvillanueva4762]

Great video,!! I trained my first model to classify 2D shapes two week ago. Now I found this video!! Its Amazing. :D

[@vietnamgamer9490]

No clue who this guy is but honestly he’s a god at coding and a REALLY good teacher

[@endyy6671]

Love these NN videos! One project that I think could be fun would be a neuroevolution based intelligence with multiple NNs/actors, all with a single fitness score. It could be interesting to see them evolve teamwork

[@shubhang2877]

I love your energy and enthusiasm Choo-choo!

[@Shinika01]

Epic, Very good! Keep this serie for the long term please, you'll change life of some younger and create the passion we NEED to change our world! Please, please!! DO MORE OF THAT and with time level up slowly. One thing that's epic, is that you go from scratch ;) love it

[@Shinika01]

The accelerated video is a very good solution to cover all your topic in somehow a live coding. At some point in this topic, i'd like you to fail at normal speed with your logic, and then fix it, because the thinking process is amazing to learn the why and how

[@huili4364]

Love it, the debugging of the "true" string is interesting, sort of the love hate relationship to JavaScript. Again appreciated everything you do on coding train!

[@ethancodes853]

@14:15 This is why static typing exists :-). We need TypeScript support for ml5. And a series of TypeScript videos for The Coding Train!

[@zaczourbang4454]

I laughed so many times during this 😂 thank you!!

[@rn.s9]

Went for 128x128 image training for time testing at epoch 49 loss was 0.00046 and when I changed the code to save the model then trained again loss was constant at 5.0 then retrained again got loss 0.0051 saved then used and it's working perfectly fine

[@justingolden21]

After Neural Network November (NNN) ended, now we start the learning, I see how it is...

[@moofymoo]

for next NNN I will build hotdog classifier.

[@max-yasgur]

If you’d like to be extra correct, # is called an octothorp 🤓. WARNING: you may lose some friends or respect from colleagues.

[@diegodemetillo5947]

@Chris Sears rephrasing that, it's also a way of finding out if you even have real friends to start with XD

[@zer001]

Yes, this is the Format that I like. And Processing is anyway a cool Tool. Thumbs up!

[@Roknok]

27:06 I have to say the scribble was beautiful

[@siddhantrai7529]

Hi Daniel, try using capsule nets instead of vanilla CNN's, they are much better and more robust against orientations. By the way, great video as always, I love your enthusiasm, keep up the good work.

[@TheCodingTrain]

Thanks for sharing this!

[@siddhantrai7529]

That literally meant a lot to me daniel, You had been my hero, since last 2 years. Your Genetic algo series brought in curiosity for intelligent systems to me. Thank you

[@kayadem]

such a satisfying coding challenge :D

[@josephglover4546]

I love this channel so much.

[@வணக்கம்-ங1ண]

Interesting and useful. Thanks Dan.

[@mrnobody2492]

I realy love his work. Thanks for all your wisdom ^_^

[@nazcaman]

Don't think I saw a single comment calling you out as a square! :)

[@TheCodingTrain]

OMG what is wrong with me for not making this a running gag!

[@SurrealBackrooms]

I love how the sun is wearing a mask lol

[@tatianaes3354]

THE GUY is such a funny silly character, while also being smart.

[@saifmalik4230]

anyone kindly tell me any simple video editing to tool to do that @9:04 (pause the video to state or highlight a point and then continue video)

[@ericmckevitt8308]

I’m getting “Error: Based on the provided shape, [1,64,64,4], the tensor should have 16328 values but it has 147456”. I know that if you multiply 1*64*64*4 you get 16328. My canvas is set at 64x64, but if I console.log(canvas), it shows the HTML element with width=“192” height=“192” attributes but then styled with style=“width: 64px; height: 64px;”. 192*192*4 = 147456, which is what the error pointed to. Does anyone know how to fix this? The classify function targets the width and heigh attributes rather than the style attributes, and resizing the canvas only affects the style attributes.

[@TheCodingTrain]

Ah! Are you on a "high density display" (for example mac "retina"?). Try adding pixelDensity(1) to setup() and see if that helps

[@ericmckevitt8308]

@@TheCodingTrain Yes! That fixed it, thank you!

[@tavl9108]

@@TheCodingTrain I had the same Issue and after looking everywhere (but not here for a while!) I couldn't figure it out, this fixed it. You are a treasure, thank you.

[@ccoodduu]

Are you gonna continue the series where you build your own Neural Network? For example with multiple hidden layers.

[@covereye5731]

Can't believe you resorted to having a red circle in your thumbnail. Never thought you would get to that level of clickbait.

[@TheCodingTrain]

I have no idea what this means!

[@covereye5731]

@@TheCodingTrain Just a joke about red arrows and red circles that are so often used in YT thumbnails. Nothing to worry about, you are awesome.

[@TheCodingTrain]

@@covereye5731 haha ok!

[@zaczourbang4454]

Wait this is actually a really clever comment 😂

[@younessfathi1739]

Thank you very much,it is very helpful

[@djsyntic]

I do find it interesting that your training set is ONLY stuff generated by a computer and it learning enough about what circles, triangles, and squares are so that it can then go on to correctly see what a human thinks is a circle, triangle, or square.

[@xXFirePlayerXx]

So I tried to create a shape classifier of my own with more training data but since I try to load a lot of images, I am getting this error: "Failed to load resource: net::ERR_INSUFFICIENT_RESOURCES" Could someone tell me if there is a way to work around that error? Thank you! :)

[@ricksanchez280]

load data in batches. for example in the start load 100 images of every class and train the model than load another 100 and repeat. 100 is a example you can make it 1000 or 10 depending on your computer and your data

[@xXFirePlayerXx]

@@ricksanchez280 Thank you very much for your effort! I fixed it by myself and submitted my thesis 2 months ago. :)

[@ricksanchez280]

@@xXFirePlayerXx yeah i figured its a little late xd

[@xXFirePlayerXx]

@@ricksanchez280 I appreciate your effort though! xd

[@ricksanchez280]

@@xXFirePlayerXx Thanks! What was your project about i got curious. i am working on a image classifyer too. Trying to train a model to understand emotions on images idk if i can do it but still learning

[@MiguelRodriguez-wn8mc]

Hello, as always in your videos an excellent explanation. I wanted to ask you it is possible to classify several figures at the same time and with these commands there is some way to know the location in x and y coordinates of each classified element

[@aparrot4254]

Great video! Could you please try to make a video where you solve Advent Of Code? It would be really cool to watch you solve those puzzles!

[@preetipanchal6422]

I saw your discord bots 4 video it was super Amazing 👍🏻🤩

[@akay9030]

Why the model data at 21:26 ,worked without parenthesis

[@akay9030]

The modelLoaded

[@akay9030]

@@peepeepoopoo7723 where it is used for callback in line 16

[@a7madx7]

Dude, you're awesome.

[@dge8419]

this guy is very excited:D

[@nadkine6601]

8:32 that was intentional, wasn't it?

[@greendsnow]

Hey there. Can you please show us how to use this exact model for real time Object Detection? Thank you

[@ozioma]

Is there a similar mL5 process but for sounds/audio?

[@cameronball3998]

This was awesome, thank you

[@hawaiidev4867]

Desided to take this concept and convert it into a number recognition for a sodoku solver

[@hetsmiecht1029]

7:50 can't you just open the index.html with your browser? I don't really see the need to fiddle around with local servers.

[@rmanky12]

I think it's related to issues with accessing local files, ie javascript won't let you access the "data" folder directly unless a server "serves" it? something like that...

[@spider853]

I think it uses an intermediate engine for JS parsing which requires a server. Like the way he saved images from JS will not be possible with just browser JS, there might be some backend generated based on the api he used.

[@Fun-Planet]

The browser won't allow to read the image files, as they are local files. Hence we have to "host" the images as well to access them with the local server Edit: I think also p5/ml5 doesn't work without using a server. Edit 2: you can check this out: github.com/processing/p5.js/wiki/Local-server

[@eyalhamtsany9472]

Hi.. For some reason - my NN does not train properly... Only when I give it one image of each type - the training curve drops down. Otherwise - it stays around 1.0... Not sure What I'm doing wrong here.... Getting the same results on Chrome and FireFox. (On IE or Edge it failed to run at all...) Any suggestions? Thanks!

[@TheCodingTrain]

Can you share the data you are using? You can join the Coding Train discord or the ml5 discord to get help! thecodingtrain.com/discord discord.gg/e2KA36N

[@eyalhamtsany9472]

@@TheCodingTrain Thanks for your response! I've placed a post, along with my dataset, on the help-with-ml5 channel on the Discrd.

[@ksokmesa]

Wonder work and so much appreciate this video. I am curious to know if I can use other language to work on the generated model. I am a newbie to deep learning and it will be very helpful to get thing done in python

[@lavrion6025]

Hello, I've learnt a lot from your videos. May I ask for reinforcement learning tutorial?

[@ibrahimaba8966]

Good. I will make the same project in python today. Thanks...! 😊.

[@SurrealBackrooms]

How did it go?

[@ibrahimaba8966]

@@SurrealBackrooms Hi, i finished the project in python and i extened it on mnist data in order to have a real time digit recognition. My idea is to build a smart virtual board. Now i am trying to add operator recognition such as add, subtract, multiply etc...!

[@nadavazari3060]

when im running it on my pc it works, but when im trying to run it on my mac it says Based on the provided shape, [1,64,64,4] the tensor should have 16384 values but has 65536. its the exact same code, what can i do?

[@chrismanning5232]

You should've done some squished ellipses for the circle training set.

[@TheCodingTrain]

ah, great point!

[@sohailahmed7462]

Can i train the data set for shapes in google collab, or sir can u provide me the code for circle triangle and square to train the data set.

[@SaYoOox]

I really liked the video, just wondering is there a tutorial for the same thing in python? or if you know a paper that can help i would be gladful

[@michaelarnold3947]

How many layers and neurons use the neural network?

[@SalimAli-bs8oy]

I'm trying to replicate this project in Python but I can't seem to find what the default learning rate is in ml5.js, does anyone happen to have this information?

[@Roknok]

I just want to ask that can the same thing be done with the neural network you made? I had followed you in that big series🙂. Btw I enjoyed a lot

[@jameerlawrencebondoc8162]

Circle, Triangle, Square, they all look familliar... AYO THEY'RE FROM SQUID GAME!!!!!!

[@mobilelegendbachaoibaba7875]

Can we also train like letters specially for me ? Example are O, L, P, and X ? O eggs, L larva P pupa X Butterfly. Thanks in advance.

[@sukursukur3617]

How a circle shape is far to a square shape?

[@anasadeelallawala4156]

very interesting

[@fadlisabda]

Hi iam fans you from Indonesia

[@aradhyabasak1610]

How this nf() work.

[@taureanwooley]

Switch statement. Don't retire on me dude!

[@taureanwooley]

you could fix the video recognition system by post processing the image for black and white and then auto correcting the contrast resolution (meaning constrast variables, from darkest to lightest)

[@KTN__69]

i am the 101 liker of the video.... don't hate me i am like the first guy but late but in perfect time but still late

[@shaileshrana7165]

AMAZEBALLS

[@aronmeeus]

very nice

[@humanoidx977]

OH NO THAT WORKs!!!

[@louaykhammar7268]

thanks

[@preetipanchal6422]

The best coding challenge make something in unity to dan

[@mzakyr342]

how p5 js in html

[@ThuanNguyen-wp8rj]

Elip ?

[@lankymoose1831]

Cool i can track everyone in my school now

[@akay9030]

Bring back the professor look

[@csicee]

What language?

[@subhamkumar7424]

please make machine learning in python coding videos please i am requesting you can make anything easy to understand .

[@el_chivo99]

hi Dan, I recently worked on a project similar to this, except I generate Hangul characters (Korean script) instead of shapes. One thing I found that helped was to apply elastic transformations (gist.github.com/fmder/e28813c1e8721830ff9c ) to the images! Maybe give this a try!

[@ashihsprajapati6739]

Hello Sir I have Question How can i convert flat image to curved image. Here is website link who convert flat to curved fontmeme.com/bend-images/ . i want to result flat to curved then stick the image on bottle using javascript.

[@nosknut]

14:15 When you have no typesafety :P

[@xdasdaasdasd4787]

I think you not using blank paper didn't help with it recognising the shapes

[@MrThetronica]

Not a pound. Not a hashtag. That be an octothorpe.

[@fire17102]

@TheCodingTrain

[@BrunnerNathan]

Hold up, you can do all these things in Javascript 0_0

[@irfanbaharudin469]

SQUID GAME

[@toastyPredicament]

I compiled Unreal

[@HazardOfExistance]

Octothorpes

[@maksymdudyk1718]

I got interested. I know JS, php, OOP, sql, node.js. But I could not understand a thing from this your video.

[@dingdong3021]

Its the framework

[@nbgarrett88]

A bug in debug. Classic.

[@toastyPredicament]

Bappu

[@thecscontent5110]

I also do videos about programming!😁

[@madwilliamflint]

Phew, turn it down a hair dude.