Coding Challenge

In this challenge, I demonstrate the entire process of training and deploying a machine learning classification model in JavaScript -- data collection, model training, and prediction! 💻 Code: thecodingtrain.com/challenges...
🎥 ml5.js: DoodleNet: • ml5.js: Classifying Dr...
Links discussed in this video:
🔗 Processing: processing.org/
🔗 p5.js Web Editor: editor.p5js.org/
🔗 ml5.js Loading a pre trained model: learn.ml5js.org/#/reference/n...
🔗 p5.js copy() reference: p5js.org/reference/#/p5.Image...
🔗 DoodleNet (GitHub): github.com/yining1023/doodleNet
Other videos mentioned in this video:
🎥 Workflow Series: • 2018 Workflow: Editor,...
🎥 ml5.js: Training a CNN for Image Classification: • ml5.js: Training a Con...
🎥 ml5.js: Train a Neural Network with Pixels as Input: • ml5.js: Train a Neural...
🎥 ml5.js: Train Your Own Neural Network: • ml5.js: Train Your Own...
🎥 ml5.js: What is a Convolutional Neural Network?: • ml5.js: What is a Conv...
🎥 ml5.js: Save Neural Network Trained Model: • ml5: Save Neural Netwo...
🎥 Quick, Draw! - Coding Challenge #122: • Coding Challenge #122:...
Timestamps:
0:00 Introduction
1:33 Generating the dataset in Processing
5:50 Loading images in p5.js
8:34 Create a ml5 neural network
10:54 Adding the data
12:39 About training the model
13:53 Test training
15:21 Training with full dataset
16:44 Improving the dataset
18:20 Saved model
19:01 Separate sketch for prediction
19:40 Loading the model
21:13 Testing the model with shapes drawn in p5.js
24:41 Mouse drawn shapes
31:01 Using a webcam and a notebook
33:49 Wrap up
34:33 What's next?
🚂 Website: thecodingtrain.com/
👾 Share Your Creation! thecodingtrain.com/Guides/com...
🚩 Suggest Topics: github.com/CodingTrain/Rainbo...
💡 GitHub: github.com/CodingTrain
💬 Discord: / discord
💖 Membership: kzbin.infojoin
🛒 Store: standard.tv/codingtrain
📚 Books: www.amazon.com/shop/thecoding...
🖋️ Twitter: / thecodingtrain
📸 Instagram: / the.coding.train
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org/
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-o...

[@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 🍻

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.

[@victap8837]

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

[@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.

[@Zachucks]

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

[@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

[@zaynababbaspour4717]

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

[@beda9beda]

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

[@micheledaffara9245]

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

[@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!

[@fernandosanchezvillanueva4762]

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

[@YuriyKlyuch]

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

[@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

[@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

[@shubhang2877]

I love your energy and enthusiasm Choo-choo!

[@zer001]

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

[@josephglover4546]

I love this channel so much.

[@zaczourbang4454]

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

[@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

[@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.

[@user-rb6sp7bv5t]

Interesting and useful. Thanks Dan.

[@vietnamgamer9490]

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

[@a7madx7]

Dude, you're awesome.

[@kayadem]

such a satisfying coding challenge :D

[@cameronball3998]

This was awesome, thank you

[@mrnobody2492]

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

[@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!

[@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!

[@beforeikillyou7430]

Love you sir. You are AMAZING

[@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

[@younessfathi1739]

Thank you very much,it is very helpful

[@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

[@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 😂

[@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

[@dge8419]

this guy is very excited:D

[@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

[@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.

[@ccoodduu]

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

[@preetipanchal6422]

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

[@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

[@Roknok]

27:06 I have to say the scribble was beautiful

[@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

[@hawaiidev4867]

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

[@tatianaes3354]

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

[@humanoidx977]

OH NO THAT WORKs!!!

[@anasadeelallawala4156]

very interesting

[@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...!

[@louaykhammar7268]

thanks

[@kapoyaaa3945]

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

[@aronmeeus]

very nice

[@greendsnow]

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

[@chrismanning5232]

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

[@TheCodingTrain]

ah, great point!

[@ozioma]

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

[@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?

[@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)

[@shaileshrana7165]

AMAZEBALLS

[@michaelarnold3947]

How many layers and neurons use the neural network?

[@jameerlawrencebondoc8162]

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

[@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.

[@fadlisabda]

Hi iam fans you from Indonesia

[@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.

[@nadkine6601]

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

[@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?

[@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.

[@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

[@lankymoose1831]

Cool i can track everyone in my school now

[@sukursukur3617]

How a circle shape is far to a square shape?

[@preetipanchal6422]

The best coding challenge make something in unity to dan

[@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.

[@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)

[@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

[@akay9030]

Bring back the professor look

[@subhamkumar7424]

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

[@fire17102]

@TheCodingTrain

[@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!

[@nosknut]

14:15 When you have no typesafety :P

[@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

[@BrunnerNathan]

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

[@toastyPredicament]

I compiled Unreal

[@aradhyabasak1610]

How this nf() work.

[@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

[@MrThetronica]

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

[@xdasdaasdasd4787]

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

[@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

[@HazardOfExistance]

Octothorpes

[@ThuanNguyen-wp8rj]

Elip ?

[@csicee]

What language?

[@mzakyr342]

how p5 js in html

[@irfanbaharudin469]

SQUID GAME

[@nbgarrett88]

A bug in debug. Classic.

[@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.

[@thecscontent5110]

I also do videos about programming!😁

[@toastyPredicament]

Bappu

[@madwilliamflint]

Phew, turn it down a hair dude.