No Black Box Machine Learning Course - Learn Without Libraries
ฝัง
- เผยแพร่เมื่อ 1 พ.ค. 2024
- In this No Black Box Machine Learning Course in JavaScript, you will gain a deep understanding of machine learning systems by coding without relying on libraries. This unique approach not only demystifies the inner workings of machine learning but also significantly enhances software development skills.
✏️ Course created by @Radu (PhD in Computer Science)
🎥 Watch part two: • Machine Learning & Neu...
HOMEWORK
🏠 1st assignment spreadsheet: docs.google.com/spreadsheets/...
🏠 Submit all other assignments to Radu's Discord Server: / discord
GITHUB LINKS
💻 Drawing App: github.com/gniziemazity/drawi...
💻 Data: github.com/gniziemazity/drawi...
💻 Custom Chart Component: github.com/gniziemazity/javas...
💻 Full Course Code (In Parts): github.com/gniziemazity/ml-co...
PREREQUISITES
🎥 Interpolation: • Linear Interpolation (...
🎥 Linear Algebra: • Learn 2D Vectors with ...
🎥 Trigonometry: • Learn Trigonometry wit...
LINKS
🔗 Check out the Recognizer we'll build in this course: radufromfinland.com/projects/...
🔗 Draw for Radu, Call for help video: • Help me make a NEW Mac...
🔗 Draw for Radu, Data collection tool: radufromfinland.com/projects/ml
🔗 Radu's Self-driving Car Course: • Self-driving Car :: Ph...
🔗 Radu's older Machine Learning video: • Learn Machine Learning...
🔗 CHART TUTORIAL (mentioned at 01:45:27): • Build a Chart using Ja...
🔗 CHART CODE: github.com/gniziemazity/javas...
TOOLS
🔧 Visual Studio Code: code.visualstudio.com/download
🔧 Google Chrome: www.google.com/chrome
🔧 Node JS: nodejs.org/en/download
(make sure you add 'node' and 'npm' to the PATH environment variables when asked!)
TIMESTAMPS
⌨️(0:00:00) Introduction
⌨️(0:05:04) Drawing App
⌨️(0:46:46) Homework 1
⌨️(0:47:05) Working with Data
⌨️(1:08:54) Data Visualizer
⌨️(1:29:52) Homework 2
⌨️(1:30:05) Feature Extraction
⌨️(1:38:07) Scatter Plot
⌨️(1:46:12) Custom Chart
⌨️(2:01:03) Homework 3
⌨️(2:01:35) Nearest Neighbor Classifier
⌨️(2:43:21) Homework 4 (better box)
⌨️(2:43:53) Data Scaling
⌨️(2:54:45) Homework 5
⌨️(2:55:23) K Nearest Neighbors Classifier
⌨️(3:04:18) Homework 6
⌨️(3:04:49) Model Evaluation
⌨️(3:21:29) Homework 7
⌨️(3:22:01) Decision Boundaries
⌨️(3:39:26) Homework 8
⌨️(3:39:59) Python & SkLearn
⌨️(3:50:35) Homework 9
Next, learn from Radu how to create a virtual world, populated by self-driving cars: th-cam.com/video/V_C7L7zelz8/w-d-xo.html
I woke up here
bruh same
@@reynoxhaha2365 I saw someone who woke up here but some how when I wanted to reply the comment disappeared😂
💀 me too
@@Ar7xM we’ve gotta start a club
@@Schnickenpick hahahaha
Hope you have fun with this course! If you have questions, comments, or suggestions, please reach out in the comments section or on my Discord server.
Happy Coding :-)
Your channel’s ‘My Weird Stuff’ section captivated me, even though I was looking for ML 😆wish u all the best
@@2plus2eqaul5 Haha! Good :-)
Hey buddy! I so enjoyed our exchange in the car AI course. I'm dying to do this but I'm still very busy...
I'm curious why you convert to csv for python, json works just fine in python. I suspect that json is just as common in python as csv, maybe more so. Meh, csv works fine too.
Anyway, just wanted to thank you for spending so much time helping me and listening to my silly ideas. A huge thank you!!!
@@davidmurphy563 True, they are both natively supported in python. It's just my guess that CSV is more popular (me and my colleagues, at least, used it in combination with Excel and it made some things easier)
You're the one of the best and wholesome teachers I've met in my entire life.
Best part the course is not using a Library. So by learning implementation steps one can write in any language. Dr. Radu is just awesome
Thanks :-) glad you like the course.
This guy is one of the best teachers on TH-cam and he is totally underrated.
Thanks, Aitor :-)
@Franks Laboratory too
@@niyagentleman8143 I know his channel and I agree with you, he is also a really good teacher.
^^@@aitorplaza2560
This man is the most underrated in this community. The content he made is just insane.
Thanks Iván for the nice comment :-)
Yeah and it's free 🤯🤯🤯 its unbelievable for me
@@RaduI really love your calm and friendly teaching style. I feel you’re a very good person. Thankyou!
I have a saying for myself "I don't want to learn to use a library, I want to learn how to write that library." Free online courses like this help everyone. Thank you. I haven't started it, but I've wanted to get into learning more about ML, specifically from Javascript. I have a feeling this is going to fit my needs perfectly.
Glad to hear you found this course. Hope you'll like it :-)
@@Radu 30 minutes in while also modifying the code slightly for what I like. I don't want to use Node, so I'm going to try to translate it to C# for the server side stuff. But I'm enjoying it so far. Although I we aren't at the ML part yet, still nice to see everything. Huge thanks from all of us.
@@stbuchok Good luck porting it to C#. I don't think there'll be any problem with that.
This Guy is a genius and really good teacher, be blessed
Thanks :-) but not really a genius. Just a lot of practice.
I really love your calm and friendly teaching style. Also very well explained! WOW! Thank you so much
Thanks for watching :-)
phenomenal course! Dr Radu is the best and with such a patient and explanatory demeanor, a genuine pleasure to watch and learn from.
Thanks :-)
Imagine having this guy as your professor
So good 👍 👏
Thanks :-)
By watching this video, we do!
@@PhilR0gers :-)
you can change all the onmouse*** to onpointer*** to not set the ontouch*** events. THe onpointer**** registers the event for both mouse and touch.
Thanks! I'll try it out :-)
loved the earlier part of the video but it got kinda hard for me since I'm not that proficient in JS, will definitely revert back later. Thanks Dr. Radu
Sure. You can also ask if something is unclear.
This is fantastic. I've been following along, keystroke for keystroke all day today, 5 hours to reach the 54 min mark - I pause a lot to double check everything. Unfortunately, I've hit a wall and I think it might be a Mac thing. When trying to run the dataset_generator for the first time, about 54:30 in the video, it throws an "unexpected token in JSON at position 0" (two spaces after 'token" implying a null/undefined value there). figured I'd share this in case, 1) someone else has worked through it, and 2) you might not have received much feedback from mac users if your students are a PC clan.
In any event, I'll eventually debug this, I'm just so thankful for you and this content. Please keep up the good work.
Can you share your code on my Discord? I'll have a look.
Hi Radu, I just finished the first part of the course. Great so far, thank you. You asked if there was a better way to handle the download anchor click. I'd like to suggest the following:
const element = document.createElement("a");
element.setAttribute(
"href",
"data:text/plain;charset=utf-8," +
encodeURIComponent(JSON.stringify(data))
);
const fileName = data.session + ".json";
element.setAttribute("download", fileName);
element.click();
There shouldn't be any need to actually inject the anchor into the document. You can simply create the element and invoke the click directly in memory. Hope this helps :)
Ok. Thanks! I'll try it out.
Really looking forward to part two. This is a very effective teaching style for this subject.
Thank you. Working on it now.
@@Radu eagerly waiting ☺
@@KiyotakaAyanokoji1 there are already few videos out on my channel.
Occasionally I have to play you at 0.25 speed just to keep up with the coding ( because I want to write it with you ), which it might take me more than a day's working hours to complete. But I'll make it, and thank you for the engaging teaching style!
Sure, what I do is really scripted so I can be quite fast. Understanding these things well can be really time consuming, though. Just implementing by following along may not be enough :-)
awesome loved it was no library, great way to get a grasp of how things are made under the hood.
great tutorial doc! make more!!!!! always the best free code camp, I learned coding better with you guys.
Thank you :-)
'Code without libraries and create my own machine learning driven application' is what I dreamed of before I got my laptop. Thank you guys for this course
The fact this is free content blows my mind, incredible value. Thanks!
You're welcome!
Just as a quick aside in the beginning part, if you set the content type to "text/plain" in the data string, you may run into issues when downloading file data because the browser thinks it should be a .txt file. If you instead set the content type to be "application/json", it will download just fine without a warning. Like so: "data:application/json;charset=utf-8"
Chrome warned me on MacOS whenever I wanted to download this file with a .json extension that had a content type of text/plain.
Hi, thanks for the tip!
Dr. Radu is a true inspiration for me, I always liked the way he delves deep into the underlying implementation and the inner workings of these complex topics. Sir, You are truely awesome.
Happy to hear you like my content :-)
I decide watch this course just to validate the summer, and it catch all my attention. Thank you very much.
Thanks for watching :-)
He's very genius, I'm amazed by his fundamental understanding of concepts. True computer scientist
Thank you :-)
I've apple silicon, somehow I was finding difficulty in most of the node version on using canvas. When I tried with node version 10 it worked. sharing it as information. as it might help someone out there.
Machine learning is not a metaphysical abstraction that will allow machines to dominate humanity. Which is already dominated by the interests of large corporations that have governments in their pockets. Technically it's just fine-tuned probability based on sophisticated code and a lot of processing power. And this guy is a root programmer with excellent teaching skills. The best and most demystifying introduction to the topic I've seen in 5235 YT videos...
Thank you :-)
Hey Dr.Radu, can you create a video on how you went about creating your own Chart component? That was an amazing moment when you went out of your way to create something like that and inspired me to build my tools like this. Any source or recommendations for learning this?
The tutorial for how I made the Chart is in linked in the description. Or is your question: Why I decided to do it?
vow, best teacher ever! thank you so much!
On touchscreen scetchpad and whole page starts scrolling when I draw. As suggested fix in css file:
body{
overscroll-behavior: none;
} did not work, but
html{
overscroll-behavior: none;
} worked
Thanks!
Watched the first 30 minutes & really looks great
Thanks! Let me know if you eventually go all the way :-)
Excellent course Sir! I have learnt so many things from this video that it is difficult to note them down! Sir , you should come to any university in India for teaching computer science since your teaching style and personality skills are in most demand here 😀
:-) thanks for the invite
May I ask how do you insert your video in the output window in VS Code?
I'm using OBS to record my videos. You can add a video input on top of any window and resize it so it fits :-)
Wow! Thanks Radu. I already usted OBS, but I thought you used the Visual Studio Output Window with something like a web page. I googled trying to find how to do that in vain. The simplest solutions are the best as you always do. Thanks again!
@@robertosotoalvarez817 no, nothing fancy like that :-)
Such a great course , I am enjoying it 😊
Looking forward to part 2. This one was very interesting
It starts next week on my channel :-)
i want more videos like this where i can learn depper concepts of cnn , rnn like that . This video was great 🔥🔥
foreign variables that apply to UTF-8
Better and secure way to save json data - create blob, create a temporary url for the blob, trigger the download, clean up the temporary url
Thanks for the tip!
This is an awesome course, but I just want to add, so many of the little annoyances on the drawing app can be avoided by using pointerevents, which work for touch and mouse events, and allow you to capture the event instead of having to put the listener on the document itself.
Thanks for the tip!
I would like to thank u, I dont work in the software industry but it was nice listening u when improving my english novadays!!
You know I'm not a native English speaker, right?
Maybe not the best to learn from me :-))
@@Radu Yup I know but It's good to hear you, man Maybe you could stop talking tech and sing a song? I'm a rock guitarist anyway, and we could blast a good English song together.
@@Radu Man, if I listen to you any more, I'm gonna put my guitar away and start coding :))
@@northernsamiko :-))))
@@northernsamiko :-)) I do have an intro song on videos on my channel :-D if you listen to that you might change your mind about me singing :-)))
I havent watched yet but can tell by the comments that you are a great teacher
Thank you :-) hope you'll watch it at some point :-D
Very good post. Guy was coding non-stop without error. Funny laugh at 40:37 😆"Please draw an undefined"
Great job Radu (felicitari sunt mandru de tine)
Merci, Alex :-)
Amazing! Radu is probably one of the best programming teachers, easy to follow and comprehensive delivery of complex content. Bravo!
Thank you!
Always delivery fire ❤️
I like the "Garbage --> cogs --> Garbage" diagram at 2:40 in the explanation to summarise the importance of understanding your training data. 🤣
Thanks! :-)
(1) Thank You.
(2) iCON Use For Graph.
(3) # of Neighbors For Classification.
(4) "Country-Bubble-Color" For Each Object iNSTANCE, Was Enlightening.
(5) Details = Better Graphical Pointing.
(6) Label Which Pieces Of Code, Correct Which Errors (Error Database)...To Differentiate Between Base Code & ECC (Error Correcting Code).
(7) Play Video @ A Faster Speed (For Longer Videos).
(8) What Are Your Top 10 Companies That You Work For?
Fantastic hack! I did everything you showed here and it worked! Thanks a lot!
Glad to hear :-)
This, Monte Carlo, Linear Algebra, GeoSpatial, Trees and Classifiers and you have a good background of ML and Stats
I do plan to extend this course with more things. Thanks for the tips :-)
Ooooooo Radu's going mainstream now, this is so cool! Hopefully he's going to gain some subscribers from this, which is super great, Radu deserves the recognition for the amount of valuable education he provides!
Gonna code, debug, and have fuuuuun,
Coding with Radu... Coding with Radu
Haha, thanks :-)
Pretty cool both from a thearical point, of view and from a pure JS code pov.
It makes it pretty accessible.
Thanks a lot, great job
Thank you.
Bro, do videos for newbies too. This is very complex. Why did you create image recognizer? why did you do this with simple text values?
You didn't get the DOCTOR House joke apparently, which I found quite funny 😁
Really nice course!
There was a Doctor House joke? :-)) I don't remember adding one
Completed after one and a half weeks. This channel is amazing!
Great content, thank you!
You're welcome!
Sir, I need help on this because the canvas doesn't show up
You can try submitting your code on my Discord and I'll have a look.
28:11 try to change height of #content to height:90vh
Yup I always used to wonder why do we learn from existing datasets, when we have to built a dataset from scratch for real-time applications
Because you can jump right in... and datasets have some 'good properties' that can demonstrate some specific things better than others. It's also the reason why courses change datasets from time to time to demonstrate different things. Here I hope to have a more realistic setting :-)
Thanks Radu bhai kya course banaya phad diye bhaiii
You're welcome!
We need part 2! Please!
It's now out :-)
At 2:24:00 hrs, professor asks about the possibility for some heights or widths going beyond 400, the most easy solution could be fault in the user's code where instead of 400 height and width, the user accidentally filled a bigger value!
Yes, but I've collected the data using the app on my website = my code :-) and it was 400 x 400.
@@Radu That's true for me as well, which might mean that in certain laptop_os+browser set, mouse click beyond the borders results in >400 width/height.
@@duke_adi could be :-) the beauty of web development...
Essentially centering a div in the first ten minutes. What a flex.
:-))
bro please do this python js code makes my head hurt and i think python makes the code more readable and easy to follow
Sorry :-( I don't publish many videos about Python (not at the moment, at least).
Your video is very good, deserves a subscription and I hope so too. Thank you for your enthusiasm.
You're welcome :-)
You are outstanding ❤
perfect 🎉 thanks a lot!!
You're welcome!
Is there any specific reason or benefit he doesn't use spaces when assigning variables, declaring conditionals, or creating for loops? Is it simply preference?
I think most people (including me) would write like this:
const foo = 'bar';
for (let i = 0; i < baz.length; i++) {
...
}
but he writes like this (and I've seen some others):
const foo='bar';
for (let i=0;i
I normally use spaces (as you describe).
But when I make tutorials I try to keep the font size as large as possible (some people watch on their phones). I also don't want the code to go off-screen to the right so that viewers don't have to scroll through the video to see the part they need to see... Removing spaces helps with that. But in phase 2 of this course I tried using a wider screen and added the spaces (experimenting all the time...)
Does this course have any prerequisites? Do you need to know JS, or can you be a beginner programmer? What about maths requirements?
Yes, check the description for some videos that teach what you need to know (math and code fundamentals)
sometimes people just want to go vanilla all the way. amazing content.
Thanks! :-)
Hi, to fix the issue with moving screen on apple devices touch screens, in the css stylesheet, body selector, set the touch-action to none and you good to go.
Really? Thanks! I'll try it out as soon as I get my hands on an apple device :-)
@@Raduall good, it worked perfectly for me on my iphone!.
@@meso9497 Awesome, thanks!
Great topic, thanks 👍
Got introduced to REST API!
Helpful❤
just woke up n realized i watched almost an entire ML 4 hour course. i slept watching a video about hedge funds or sumn...
Why this is interesting and enjoy the course alot.
Happy you like the course!
@Dr. Radu add the following to your css will make the font responsive:
:root {
font-size: calc(0.5em + 1vw);
}
Hi, Thanks for the tip :-)
For web developers that js, css and html code is a messy, but lets exchange skills 😁
Sure! Can you share some tips to make it better? :-)
Can't we combine this with Python?
JS for the web app and Python for the ML code implementation?
Sure you can, you just need to reimplement some of the functions that are used both on the front-end and back-end.
A course of federated learning with a project please!!
I was watching a swift tutorial on recursion and I woke up to this video
Hey Radu, great course ! But when I run the final project on my computer, it lags and is pretty slow. Is it because my computer only has 8 gb RAM?
The implementation could be made more efficient. I gave some homework tasks about optimizing, you can try them out, or see phase 2 where I implemented some of them (that may work faster for you).
Amazing!!!!
I’m still a newbie in programming, but I thought that Python was best for ML, this is awesome that JS can be used as well
JS is "Jack of all trades'".
Python is only ever considered good at ML because some of the most popular ML libraries happened to be made available for it. The libraries are usually not even written in python.
@@nonstopper yeah, Python is just the API language
Sure, machine learning algorithms can be implemented in any language, pretty much... The best languages to use are those that run the fastest (like C / C++) and the easiest to use are those that have a lot of libraries for it (like Python). I use JavaScript to make some working apps that are easy to share, not just the machine learning part in isolation.
@@nonstopper True.
As always, just on time
The same happened yo me somehow i woke up here
1:00:52 Don't you get import and export keywords in JavaScript?
They are... But they only work via http, not locally. And for some reason, the live server extension was slow and glitchy (for me) when I implemented this project. So... some things could have been made nicer.
What vs code color theme u use on video ??
I use 'Ice Contrast'
I am planning to learn ML AI and all, which language will be better for long term? PY or JS ?
Python is more useful because it has a lot of learning methods implemented in various libraries. But it's a slippery slope if you just use those blindly without understanding what ML is what those methods actually do.
PY works really good, but start with Tensorflow.
thank you for helping us to learn
Glad to hear you're learning!
Fell asleep to something else woke up to this. I may have to actually watch it 😂
excellent, hope to see videos like this one in c++ or python ( without libraries ).
Visualization part takes extra amount of effort in c++ and python
Thanks!
20:56 Can someone explain what he has done here? Why create a const draw with the curly brackets and what is draw.path? You can also just tell me the topic name if you don't want to explain here, I can do research on it myself then
I'm just grouping drawing methods part of the draw object. So, draw.path is just calling the path function (method). I do this because it will be easy to import the object later in Node, as well.
@@Radu Thanks!
@@fahad_hassan_92 No problem.
It happened to me that when I touched the screen and dragged my finger, the whole screen and the canvas were dragged together (28 min.).
I saw that this is the default behavior. So I just added a "preventDefault();" to functions associated with events.
Code:
this.canvas.ontouchstart = (and) => {
e.preventDefault();
const loc = e.touches[0];
this.canvas.onmousedown(loc);
}
this.canvas.ontouchmove = (and) => {
e.preventDefault();
const loc = e.touches[0];
this.canvas.onmousemove(loc);
}
this.canvas.ontouchend = (and) => {
e.preventDefault();
this.canvas.onmouseup();
}
Thanks!
Last week, I actually started phase 2 of the course on my channel. And in the first lesson I mentioned doing this, others suggested I do the same, hope it works!
Thank you
You're welcome.
2:35:15 just pass the nearestSample it got all the value
Good point!
Do I need JavaScript knowledge to follow this course?
Ofcoursw
of course this course, thisisa course
I guess you can do this course but you gotta translate all these codes to python..
You do, and some math. Prerequisites are in the description. Those videos teach you some math and coding as well.
thank you sir, appreciated!! ❤❤
You're welcome!
You are the best❤
Thanks :-)
1:01:03 it creates a buffer with black color, it does not take ctx data into it... all of the images are black... anyone has a hint here?
Strange. Can you try drawing a white rectangle over the canvas first, before drawing the paths?
@@Radu thank you very much for advice, I will report back after trying.
I have resolved the issue by doing this:
// draw.paths = (ctx, paths); // commented out
for (const path of paths) {
draw.path(ctx, path, "black")
}
what is the point of having those javascript objects in the project files?
They are so we can load them in the web visualizer. Can't load JSON files because of cors without a server and my live server extension is buggy so I had to use this 'not so straightforward' solution.
Jenius