├── .gitignore ├── README.md ├── images ├── adafruit.png ├── aiml.png ├── algomap.jpg ├── ann_350.png ├── brain.png ├── braincraft.png ├── braincraft_movie.gif ├── braincraft_movie.mp4 ├── braincraft_play.png ├── brilliant.png ├── deepracer.jpg ├── edge.jpg ├── facenumbers.png ├── google.png ├── hal.png ├── hardware.png ├── heartless.jpg ├── intel.jpg ├── knn.png ├── lobe.png ├── logic.png ├── mlmap.png ├── model1.png ├── model2.png ├── network.png ├── nn.png ├── nnchart.png ├── playground.png ├── pose.png ├── pythagorean.png ├── python.png ├── retriever.png ├── runwayml.png ├── teachablemachine.png ├── teleport.png ├── unity.png ├── unity_nn.png ├── unitydemo.png ├── unityterminal.png ├── weights.png ├── weights_activation_function.png └── wekinator.png └── snippets ├── .DS_Store ├── camera.md ├── csv.md ├── extractfeatures ├── app.js ├── features.png ├── index.html ├── readme.md └── style.css ├── introduction.md ├── layers.md ├── python.md ├── reactnative ├── README.md └── tensorflowjs.md ├── speech.md ├── unity.md └── uploadimage.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | .vscode -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Javascript Machine Learning 2 | 3 | This repository maintains a reading list of Machine Learning technologies, algorithms and API's focused on javascript. 4 | 5 | ### Why Javascript? 6 | 7 | - Can run on any web client, the end user doesn't have to install anything. 8 | - Easy integration with device sensors such as camera, microphone, gyroscope, light sensor, etc. 9 | - End user does not have to send privacy-sensitive data to a server. 10 | - Easy integration with user interface and interactive elements. 11 | - Easy install process for developer, less sensitive to computer setup issues, python setup issues, version conflicts. 12 | - Convert your AI code to a web server with one line of code. 13 | - Can still use models trained in Python. 14 | - Training uses the same underlying C / GPU capabilities of your computer. 15 | 16 | > *Python is used in the science community, so there are much more python libraries for math and computer science subjects available. Most AI tutorials will use python.* 17 | 18 |
19 | 20 | # Contents 21 | 22 | - [Getting started](#gettingstarted) 23 | - [Neural networks](#neuralnetworks) 24 | - [Algorithms](#algorithms) 25 | - [Language models](#languagemodels) 26 | - [Image recognition](#images) 27 | - [Speech](#speech) 28 | - [Loading and evaluating data](#loadingdata) 29 | - [Datasets](#datasets) 30 | - [Community](#community) 31 | - [Cloud GPU](#cloud) 32 | - [Random links](#examples) 33 | 34 |
35 |
36 |
37 | 38 | ![dog](./images/nn.png) 39 | 40 | ## Getting started with Machine Learning 41 | 42 | - [🔥 Elements of AI part 1](https://course.elementsofai.com) and [part 2](https://buildingai.elementsofai.com) 43 | - [De Nederlandse AI Cursus](https://www.ai-cursus.nl) 44 | - [Brilliant.org - tutorial app with daily questions](https://brilliant.org/courses/artificial-neural-networks/) 45 | - [A visual introduction to Machine Learning](http://www.r2d3.us/visual-intro-to-machine-learning-part-1/) 46 | 47 |
48 | 49 | ## Neural Networks in Javascript 50 | 51 | - [ML5](https://learn.ml5js.org/#/reference/neural-network) 52 | - [BrainJS](https://brain.js.org/#/getting-started) 53 | - [TensorflowJS](https://www.tensorflow.org/js). 54 | - [Build a Neural Network in JS without any libraries](https://dev.to/grahamthedev/a-noob-learns-ai-my-first-neural-networkin-vanilla-jswith-no-libraries-1f92) 55 | - [Get started with ML5 neural networks](https://learn.ml5js.org/#/reference/neural-network) and add [hidden layers](./snippets/layers.md) 56 | - [Building your first Neural Network in Tensorflow JS](https://towardsdatascience.com/build-a-simple-neural-network-with-tensorflow-js-d434a30fcb8) 57 | - [Regression with Tensorflow](https://codelabs.developers.google.com/codelabs/tfjs-training-regression/index.html) 58 | - [Getting started with TensorflowJS](https://curiousily.com/posts/getting-started-with-tensorflow-js/) 59 | - [CodePen](https://codepen.io/topic/tensorflow/templates), [Traversy](https://youtu.be/tZt6gRlRcgk) and [W3Schools](https://www.w3schools.com/ai/ai_tensorflow_intro.asp) tensorflow tutorials. 60 | - [Build rock-paper-scissors with Reinforcement Learning](https://towardsdatascience.com/a-beginners-guide-to-reinforcement-learning-using-rock-paper-scissors-and-tensorflow-js-37d42b6197b5) and [github](https://github.com/sachag678/freeCodeCamp) 61 | - [Reinforcement Learning library](https://epic-darwin-f8b517.netlify.app) with [github](https://github.com/ttumiel/gym.js/) and [game tutorial](https://medium.com/@pierrerouhard/reinforcement-learning-in-the-browser-an-introduction-to-tensorflow-js-9a02b143c099) 62 | 63 |
64 | 65 | ## Algorithms in Javascript 66 | 67 | - [A visual tour of machine learning algorithms](https://machinelearningmastery.com/a-tour-of-machine-learning-algorithms/) 68 | - [Machine Learning algorithms for newbies](https://towardsdatascience.com/a-tour-of-the-top-10-algorithms-for-machine-learning-newbies-dde4edffae11) 69 | - [Math concepts for Programmers](https://www.youtube.com/watch?v=2SpuBqvNjHI) 70 | - [K-Nearest Neighbour](https://github.com/NathanEpstein/KNear) and an [explanation of writing your own KNN in Javascript](https://burakkanber.com/blog/machine-learning-in-js-k-nearest-neighbor-part-1/) 71 | - [K-Means](https://miguelmota.com/blog/k-means-clustering-in-javascript/) 72 | - [Decision Tree, Random Forest](https://github.com/lagodiuk/decision-tree-js) and [Regression Tree](https://winkjs.org/wink-regression-tree/) 73 | - [Movie Recommender System in Javascript](https://github.com/javascript-machine-learning/movielens-recommender-system-javascript) and a [quick and dirty tutorial on building your own recommender system](https://dev.to/jimatjibba/build-a-content-based-recommendation-engine-in-js-2lpi) 74 | - [Create a self-driving car with a evolving genetic algorithm](https://github.com/gniziemazity/Self-driving-car) and another example on [dev.to](https://dev.to/trekhleb/self-parking-car-in-500-lines-of-code-58ea) 75 | 76 |
77 | 78 | ## Language models and API's for Javascript 79 | 80 | - [LangChain LLM library](https://js.langchain.com/docs/get_started/introduction) gives you a unified workflow for working with all kinds of different language models, providers, datastores, etc. 81 | - [OpenAI API](https://platform.openai.com/docs/introduction) 82 | - [Azure OpenAI library](https://github.com/Azure/azure-sdk-for-js/tree/main/sdk/openai/openai) and [docs](https://learn.microsoft.com/en-gb/javascript/api/%40azure/openai/), you can use this if you have a Microsoft Azure key instead of a OpenAI key. 83 | - [LLama API](https://www.llama-api.com), [Mistral API](https://docs.mistral.ai), [Claude API](https://support.anthropic.com/en/collections/5370014-claude-api). These models have API's so you don't have to install anything. 84 | - Use [OLLama](https://ollama.ai) to run language models locally, talk to the LLM with the built-in webserver. 85 | - [🐐 Geitje](https://goingdutch.ai/en/posts/introducing-geitje/) is a Dutch large language model. 86 | - [Read more about language processing](https://towardsdatascience.com/natural-language-processing-from-basics-to-using-rnn-and-lstm-ef6779e4ae66), [Natural Language Processing in Javascript](http://naturalnode.github.io/natural/), [Create your own mini-LLM in Paperspace](https://blog.paperspace.com/training-an-lstm-and-using-the-model-in-ml5-js/) 87 | - [What are word vectors?](https://gist.github.com/aparrish/2f562e3737544cf29aaf1af30362f469) and [📺 Understanding Word2Vec](https://youtu.be/MOo9iJ8RYWM) 88 | 89 |
90 | 91 | ## Image recognition 92 | 93 | - [Google MediaPipe for pose, object, image, segment detection](https://mediapipe-studio.webapps.google.com/home) 94 | - [ML5 Image Classifier](https://learn.ml5js.org/#/reference/image-classifier) and [Object Detection](https://learn.ml5js.org/#/reference/object-detector) in ML5.js 95 | - [Create teachable machine from scratch with TensorFlowJS](https://codelabs.developers.google.com/tensorflowjs-transfer-learning-teachable-machine#16) 96 | - [Use KNN to classify poses with ML5](https://learn.ml5js.org/#/reference/knn-classifier) 97 | - [Recognise handwriting in Javascript](https://github.com/cazala/mnist) 98 | - [Face-JS, a library to track facial expressions](https://justadudewhohacks.github.io/face-api.js/docs/index.html) 99 | - [Hand Tracking JS](https://victordibia.github.io/handtrack.js/) 100 | - [Image recognition with your own images](./snippets/extractfeatures) and [Feature Extraction documentation](https://ml5js.org/reference/api-FeatureExtractor/) 101 | 102 |
103 | 104 | ## Speech 105 | 106 | - [Generate voices with Elevenlabs](https://elevenlabs.io) 107 | - [Listen to human speech in the browser](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API), and a [Simple demo of listening and speaking with javascript](https://github.com/mdn/web-speech-api) 108 | - [OpenAI Whisper](https://platform.openai.com/docs/guides/speech-to-text) 109 | - [Recognise sound using the browser, microphone, and TensorflowJS](https://dev.to/devdevcharlie/acoustic-activity-recognition-in-javascript-2go4) 110 | - [Code example web speech](./snippets/speech.md) and [webcam](./snippets/camera.md) 111 | 112 |
113 | 114 | ## Loading and evaluating data 115 | 116 | - [Load CSV data in javascript with Papa Parse](https://www.papaparse.com), and [code example to load and filter data](./snippets/csv.md) 117 | - Visualise data with [D3.js](https://d3js.org), [VEGA](https://vega.github.io/vega/), [ChartJS](https://www.chartjs.org) or [PlotlyJS](https://plotly.com/javascript/) 118 | - [Code example for drawing Scatterplot from a CSV file](./snippets/scatterplot.md) 119 | - [Code example for data normalisation](./snippets/normalise.md) 120 | - [Visualise Tensorflow with TFVis](https://js.tensorflow.org/api_vis/1.4.3/) 121 | - [Manipulate large amounts of data with Danfo.js](https://danfo.jsdata.org) 122 | 123 |
124 | 125 | ## Datasets 126 | 127 | - [Google Dataset Search](https://datasetsearch.research.google.com) 128 | - [HuggingFace Datasets](https://huggingface.co/datasets?sort=trending) 129 | - [Kaggle Datasets](https://www.kaggle.com/datasets/) 130 | - [Customer Churn](https://www.kaggle.com/datasets/blastchar/telco-customer-churn) 131 | - [Mobile Phone Prices](https://www.kaggle.com/datasets/pratikgarai/mobile-phone-specifications-and-prices) 132 | - [UFO sightings](https://www.kaggle.com/NUFORC/ufo-sightings) 133 | - [Football results](https://www.kaggle.com/martj42/international-football-results-from-1872-to-2017) 134 | - [Speed Dating](https://www.kaggle.com/datasets/annavictoria/speed-dating-experiment) and [Marriage](https://www.kaggle.com/aagghh/divorcemarriage-dataset-with-birth-dates) 135 | - [Spam detection](https://www.kaggle.com/datasets/veleon/ham-and-spam-dataset) 136 | - [Socrata Open Data search](https://dev.socrata.com/data/) 137 | - [UCI Machine Learning Repository](https://archive-beta.ics.uci.edu) 138 | - [Open Images Dataset](https://storage.googleapis.com/openimages/web/index.html) 139 | - [MovieLens - data on 45.000 movies by 270.000 users](https://www.kaggle.com/rounakbanik/the-movies-dataset/data) 140 | - [🐱 440 Cat meows in different contexts](https://zenodo.org/record/4008297#.YNGgey8RppQ) and [Cats per square kilometer](https://data.gov.uk/dataset/9d475e06-3885-4a90-b8c0-77fea13f92e6/cats-per-square-kilometre) 141 | - [Speech Audio dataset](https://keithito.com/LJ-Speech-Dataset/) 142 | - [QuickDraw - Doodles dataset](https://github.com/googlecreativelab/quickdraw-dataset/) 143 | - [COCO - Common Objects in Context](https://cocodataset.org/#home) 144 | - [Rotterdam Open Data](http://rotterdamopendata.nl/dataset) en [Rotterdam 3D data](https://www.3drotterdam.nl/#/) 145 | - [Netherlands Open OV Data](https://www.openov.nl) 146 | - [Traffic data "persons in urban traffic scenes" TU Delft](https://eurocity-dataset.tudelft.nl) 147 | - [Dataregister van de Nederlandse Overheid](https://data.overheid.nl) 148 | - [Cars data with 20.000 images of 190 types of car](https://ai.stanford.edu/~jkrause/cars/car_dataset.html) 149 | - [Celebrity faces dataset on Kaggle](https://www.kaggle.com/jessicali9530/celeba-dataset) and [source](https://mmlab.ie.cuhk.edu.hk/projects/CelebA.html) 150 | - [International Football Results from 1872 to 2017](https://www.kaggle.com/martj42/international-football-results-from-1872-to-2017) 151 | - [Luchtmeetnet luchtvervuiling CSV data](https://data.rivm.nl/data/luchtmeetnet/Actueel-jaar/) 152 | - [Daily stock prices](https://www.alphavantage.co/documentation/) 153 | 154 |
155 | 156 | ## Community 157 | 158 | - [AI Stackoverflow](https://ai.stackexchange.com) 159 | - [Kaggle - Machine Learning challenges](https://www.kaggle.com) 160 | - [Welcome.ai Instagram](https://www.instagram.com/welcome.ai/) 161 | - [AI x Design Community](https://www.aixdesign.co), [Instagram](https://www.instagram.com/aixdesign.community/) and [Resources Reading List](http://bit.ly/aixd-library) 162 | - [Rotterdam AI Meetup](https://www.meetup.com/data-science-rdm/events/) 163 | 164 |
165 | 166 | ## Cloud GPU 167 | 168 | Cloud GPU enables you to train models with large amounts of data on professional infrastructure. 169 | 170 | - [Huggingface Spaces](https://huggingface.co/spaces) 171 | - [Google Vertex AI](https://cloud.google.com/vertex-ai) 172 | - [Google Colab](https://colab.research.google.com) 173 | - [PaperSpace](https://blog.paperspace.com/) 174 | - [Lambda Labs](https://lambdalabs.com/service/gpu-cloud) 175 | 176 |
177 | 178 | ## Hosting 179 | 180 | To host a `node.js` project, the best option is to create a [serverless](https://www.learnwithjason.dev/blog/serverless-functions/overview/) app. There are several providers that offer free *node* or *serverless* hosting options: 181 | 182 | - vercel.com 183 | - netlify.com 184 | - deno.com 185 | - amazon serverless 186 | - huggingface spaces 187 | - codesandbox.com 188 | - github codespaces 189 | - stackblitz.com 190 | 191 |
192 | 193 | ## Random links 194 | 195 | A collection of interesting links, tools and tutorials 196 | 197 | ![playground](./images/playground.png) 198 | 199 | - [Quick AI Introduction with javascript code examples](./snippets/introduction.md) 200 | - [Generate images with the Dall-e API](https://openai.com/blog/dall-e-api-now-available-in-public-beta) 201 | - [Tensorflow Playground](https://playground.tensorflow.org) 202 | - [React Native AI code snippets](./snippets/reactnative/) 203 | - [Visualise how a Neural Network recognises numbers](https://www.cs.cmu.edu/~aharley/vis/conv/flat.html) 204 | - [📺 Build a security camera with TensorflowJS and React](https://www.youtube.com/watch?v=7QBYX65t7Mw) 205 | - [Integrating TensorflowJS into your User Interface with Parcel](https://medium.com/codingthesmartway-com-blog/tensorflow-js-crash-course-machine-learning-for-the-web-getting-started-50694a575238) 206 | - [📺 Coding a single neuron (perceptron) in Javascript](https://youtu.be/o98qlvrcqiU) and the [result](https://beta.observablehq.com/@mpj/neural-network-from-scratch-part-1) 207 | - [Use BrainJS to get started with a simple neural network](https://brain.js.org/#/getting-started) or watch the [📺 video tutorial](https://www.youtube.com/watch?v=RVMHhtTqUxc) 208 | - [Perceptron (single neuron) code snippet](https://gist.github.com/primaryobjects/dfb8927f9f0ca21b6a24647168cead41) 209 | - [Creating a Recommender System in Javascript](https://github.com/javascript-machine-learning/movielens-recommender-system-javascript) 210 | - [😱 hacking a model to make a wrong prediction with Adversarial.js](https://kennysong.github.io/adversarial.js/) 211 | - [Predict your location in your home using the strength of your wifi signal](https://dev.to/devdevcharlie/predicting-indoor-location-using-machine-learning-and-wifi-information-m78) 212 | - [Using a Javascript Perceptron to classify dangerous snakes](https://github.com/elyx0/rosenblattperceptronjs) 213 | - [Classify an image on Codepen in 5 lines of Javascript](https://codepen.io/eerk/pen/JmKQLw) 214 | - [Neural Drum Machine](https://codepen.io/teropa/pen/JLjXGK) and [Voice-based beatbox](https://codepen.io/naotokui/pen/NBzJMW) created with [MagentaJS](https://magenta.tensorflow.org) 215 | - [Evolving Genetic Algorithm with Flappy Bird](https://github.com/ssusnic/Machine-Learning-Flappy-Bird) 216 | - [Google AI experiments](https://experiments.withgoogle.com/ai) 217 | - [Watch a perceptron learn](https://kokodoko.github.io/perceptron/) 218 | - [Synaptic JS Neural Networks](http://caza.la/synaptic/) and [Tutorial](https://medium.freecodecamp.org/how-to-create-a-neural-network-in-javascript-in-only-30-lines-of-code-343dafc50d49) 219 | - [Control a ThreeJS game with Teachable Machine](https://github.com/charliegerard/whoosh) 220 | - [Silence of the Fans - running TensorflowJS on Google Colab](https://dev.to/obenjiro/silence-of-the-fans-part-1-javascript-quickstart-5f3m) - and [code example](bit.ly/colabjs) 221 | - [Using AutoEncoders with TensorflowJS tutorial](https://douglasduhaime.com/posts/visualizing-latent-spaces.html) 222 | - [Figment uses an intuitive UI to use AI tools without coding](https://figmentapp.com) 223 | - [Hogeschool Rotterdam Datalab: Rob van der Willigen's Blog about AI](https://robfvdw.medium.com) 224 | - Google API's for [Translate](http://cloud.google.com/translate/), [Vision](http://cloud.google.com/vision/), [Speech](http://cloud.google.com/speech/) and [Language Processing](http://cloud.google.com/natural-language/) 225 | - [Microsoft Azure Machine Learning APIs](https://gallery.azure.ai/machineLearningAPIs) 226 | - [Teachable Machine](https://teachablemachine.withgoogle.com) and [Lobe.AI](https://lobe.ai) can export a model and all necessary code for your website. 227 | - [Cognimates: An AI education platform for building games, programming robots & training AI models](http://cognimates.me/home/) 228 | - [Obviously.ai](https://www.obviously.ai) can train a model with CSV data right in the browser. 229 | - Check the [Hardware, Python and Games](./snippets/python.md) reading list. 230 | 231 | ### Disclaimer 232 | 233 | Since the field of AI is evolving so rapidly, some links may be outdated. This list is maintained by [Erik Katerborg](https://kokodoko.github.io). 234 | 235 | >*Last updated: 22 january 2024.* 236 | 237 |
238 | 239 | ![SelfDrivingCar](https://imgs.xkcd.com/comics/self_driving_car_milestones.png) 240 | 241 | [https://xkcd.com/1925/](https://xkcd.com/1925/) -------------------------------------------------------------------------------- /images/adafruit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/adafruit.png -------------------------------------------------------------------------------- /images/aiml.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/aiml.png -------------------------------------------------------------------------------- /images/algomap.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/algomap.jpg -------------------------------------------------------------------------------- /images/ann_350.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/ann_350.png -------------------------------------------------------------------------------- /images/brain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/brain.png -------------------------------------------------------------------------------- /images/braincraft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/braincraft.png -------------------------------------------------------------------------------- /images/braincraft_movie.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/braincraft_movie.gif -------------------------------------------------------------------------------- /images/braincraft_movie.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/braincraft_movie.mp4 -------------------------------------------------------------------------------- /images/braincraft_play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/braincraft_play.png -------------------------------------------------------------------------------- /images/brilliant.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/brilliant.png -------------------------------------------------------------------------------- /images/deepracer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/deepracer.jpg -------------------------------------------------------------------------------- /images/edge.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/edge.jpg -------------------------------------------------------------------------------- /images/facenumbers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/facenumbers.png -------------------------------------------------------------------------------- /images/google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/google.png -------------------------------------------------------------------------------- /images/hal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/hal.png -------------------------------------------------------------------------------- /images/hardware.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/hardware.png -------------------------------------------------------------------------------- /images/heartless.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/heartless.jpg -------------------------------------------------------------------------------- /images/intel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/intel.jpg -------------------------------------------------------------------------------- /images/knn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/knn.png -------------------------------------------------------------------------------- /images/lobe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/lobe.png -------------------------------------------------------------------------------- /images/logic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/logic.png -------------------------------------------------------------------------------- /images/mlmap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/mlmap.png -------------------------------------------------------------------------------- /images/model1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/model1.png -------------------------------------------------------------------------------- /images/model2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/model2.png -------------------------------------------------------------------------------- /images/network.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/network.png -------------------------------------------------------------------------------- /images/nn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/nn.png -------------------------------------------------------------------------------- /images/nnchart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/nnchart.png -------------------------------------------------------------------------------- /images/playground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/playground.png -------------------------------------------------------------------------------- /images/pose.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/pose.png -------------------------------------------------------------------------------- /images/pythagorean.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/pythagorean.png -------------------------------------------------------------------------------- /images/python.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/python.png -------------------------------------------------------------------------------- /images/retriever.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/retriever.png -------------------------------------------------------------------------------- /images/runwayml.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/runwayml.png -------------------------------------------------------------------------------- /images/teachablemachine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/teachablemachine.png -------------------------------------------------------------------------------- /images/teleport.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/teleport.png -------------------------------------------------------------------------------- /images/unity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/unity.png -------------------------------------------------------------------------------- /images/unity_nn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/unity_nn.png -------------------------------------------------------------------------------- /images/unitydemo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/unitydemo.png -------------------------------------------------------------------------------- /images/unityterminal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/unityterminal.png -------------------------------------------------------------------------------- /images/weights.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/weights.png -------------------------------------------------------------------------------- /images/weights_activation_function.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/weights_activation_function.png -------------------------------------------------------------------------------- /images/wekinator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/images/wekinator.png -------------------------------------------------------------------------------- /snippets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/snippets/.DS_Store -------------------------------------------------------------------------------- /snippets/camera.md: -------------------------------------------------------------------------------- 1 | In dit voorbeeld halen we de input (stream) van de webcam op en laden deze in een video element. 2 | 3 | In de HTML plaats je een video element 4 | 5 | ```html 6 | 7 | ``` 8 | 9 | Met het attribuut `autoplay` zorg je ervoor dat het videobeeld direct zal afspelen als de stream aan het element is toegekend. 10 | 11 | Vanuit javascript haal je eerst de webcam feed op en deze ken je toe aan het video element 12 | 13 | ```javascript 14 | if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { 15 | navigator.mediaDevices.getUserMedia({ video: true }).then(function (stream) { 16 | video.srcObject = stream; 17 | video.onloadedmetadata = () => { 18 | video.play(); 19 | }; 20 | }); 21 | } 22 | ``` 23 | 24 | Met de functie `getUserMedia()` wordt er aan de bezoeker toestemming gevraagd om de media input te gebruiken. Hier kunnen verschillende [opties](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#parameters) aan meegegeven worden. 25 | -------------------------------------------------------------------------------- /snippets/csv.md: -------------------------------------------------------------------------------- 1 | # Data laden 2 | 3 | - CSV files 4 | - JSON files 5 | - Data filteren 6 | - Training data en test data 7 | 8 |
9 |
10 |
11 | 12 | ## CSV files 13 | 14 | Voeg de Papa Parse library toe aan je HTML 15 | 16 | ```HTML 17 | 18 | ``` 19 | of als je met modules werkt: 20 | ```bash 21 | npm install papaparse 22 | import Papa from './PapaParse/papaparse'; 23 | ``` 24 | 25 | ## Javascript 26 | 27 | Download eerst een CSV file, bijvoorbeeld de [overlevenden van de Titanic](https://www.kaggle.com/c/titanic/data?select=train.csv). 28 | 29 | ```javascript 30 | function loadData(){ 31 | Papa.parse("./data/titanic_survivors.csv", { 32 | download:true, 33 | header:true, 34 | dynamicTyping:true, 35 | complete: results => checkData(results.data) 36 | }) 37 | } 38 | 39 | function checkData(data) { 40 | console.table(data) 41 | } 42 | ``` 43 | [Papa Parse Documentatie](https://www.papaparse.com) 44 | 45 |
46 |
47 |
48 | 49 | ## JSON files 50 | 51 | Data in JSON formaat kan je ophalen met `fetch`. Hier gebruiken we `carsData.json` van google. 52 | 53 | ```javascript 54 | async function getData() { 55 | const response = await fetch('https://storage.googleapis.com/tfjs-tutorials/carsData.json') 56 | const json = await response.json() 57 | checkData(json) 58 | } 59 | 60 | function checkData(data) { 61 | console.log(data) 62 | } 63 | ``` 64 | 65 |
66 |
67 |
68 | 69 | ## Data filteren 70 | 71 | Met [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) kan je specifieke kolommen uit een dataset halen. 72 | 73 | ```javascript 74 | const selectedColumns = data.map(car => ({ 75 | mpg: car.mpg, 76 | horsepower: car.horsepower, 77 | })) 78 | ``` 79 | 80 | Met [filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) kan je checken of er geen ongeldige waarden in de data staan. Hier staan twee voorbeelden van filteren op `null` of op waarden die geen `number` zijn. 81 | 82 | ```javascript 83 | // check of waarden niet leeg zijn 84 | const cleanData = data.filter(car => ( 85 | car.mpg != null && 86 | car.horsepower != null 87 | )) 88 | 89 | // check of waarden een nummer zijn 90 | const cleanData = data.filter(car => ( 91 | !isNaN(car.mpg) && 92 | !isNaN(car.horsepower) 93 | )) 94 | ``` 95 | Je kan `map()` en `filter()` aan elkaar plakken, dat ziet er bv. zo uit: 96 | 97 | ```javascript 98 | const cleanData = data 99 | .map(day => ({ 100 | MinTemp: day.MinTemp, 101 | MaxTemp: day.MaxTemp 102 | })) 103 | .filter(day => 104 | typeof day.MinTemp === "number" && 105 | typeof day.MaxTemp === "number" 106 | ) 107 | ``` 108 | 109 |
110 |
111 |
112 | 113 | ## Training en test data 114 | 115 | Met `slice` kunnen we data opsplitsen in trainingdata en testdata. In dit geval is 80% van de data trainingdata en 20% is testdata. 116 | 117 | ```javascript 118 | let trainData = data.slice(0, Math.floor(data.length * 0.8)) 119 | let testData = data.slice(Math.floor(data.length * 0.8) + 1) 120 | ``` 121 | 122 | > ⚠️ Om te voorkomen dat je data *gesorteerd* is op bv. het label moet je je array shufflen **voordat** je splitst op traindata en testdata. 123 | 124 | ```javascript 125 | function shuffleArray(arr) { 126 | arr.sort(() => (Math.random() - 0.5)) 127 | } 128 | ``` 129 | 130 |
131 |
132 |
133 | 134 | ## Links 135 | 136 | - [Array map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) 137 | - [Array filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) 138 | -------------------------------------------------------------------------------- /snippets/extractfeatures/app.js: -------------------------------------------------------------------------------- 1 | const video = document.getElementById('webcam') 2 | const featureExtractor = ml5.featureExtractor('MobileNet', modelLoaded) 3 | const label = document.getElementById("label") 4 | let classifier 5 | 6 | const nomaskbtn = document.querySelector("#nomask") 7 | const maskbtn = document.querySelector("#mask") 8 | const trainbtn = document.querySelector("#train") 9 | 10 | nomaskbtn.addEventListener("click", () => addNoMask()) 11 | maskbtn.addEventListener("click", () => addMask()) 12 | trainbtn.addEventListener("click", () => train()) 13 | 14 | if (navigator.mediaDevices.getUserMedia) { 15 | navigator.mediaDevices.getUserMedia({ video: true }) 16 | .then((stream) => { 17 | video.srcObject = stream 18 | }) 19 | .catch((err) => { 20 | console.log("Something went wrong!"); 21 | }); 22 | } 23 | 24 | function modelLoaded(){ 25 | console.log("The mobileNet model is loaded!") 26 | classifier = featureExtractor.classification(video, videoReady) 27 | } 28 | 29 | function videoReady(){ 30 | console.log(classifier) 31 | } 32 | 33 | function addNoMask(){ 34 | classifier.addImage(video, "draagt geen masker", addedImage) 35 | } 36 | 37 | function addMask() { 38 | classifier.addImage(video, "draagt masker", addedImage) 39 | } 40 | 41 | function train(){ 42 | console.log("start training...") 43 | classifier.train((lossValue) => { 44 | console.log(lossValue) 45 | if(lossValue == null){ 46 | startClassifying() 47 | } 48 | }) 49 | } 50 | 51 | function startClassifying(){ 52 | setInterval(()=>{ 53 | classifier.classify(video, (err, result)=>{ 54 | if(err) console.log(err) 55 | console.log(result) 56 | label.innerHTML = result[0].label 57 | }) 58 | }, 1000) 59 | } 60 | 61 | function addedImage(){ 62 | console.log("added image to network") 63 | } -------------------------------------------------------------------------------- /snippets/extractfeatures/features.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HR-CMGT/Javascript-Machine-Learning/27c11a2574796d602f6970daebc28f233809d22c/snippets/extractfeatures/features.png -------------------------------------------------------------------------------- /snippets/extractfeatures/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | ML5 Feature Extraction 10 | 11 | 12 | 13 |

TRAINING FEATUREEXTRACTOR WITH WEBCAM

14 |
15 |

16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /snippets/extractfeatures/readme.md: -------------------------------------------------------------------------------- 1 | # Train your own image recognition with the Feature Extractor 2 | 3 | If you used the [ML5 ImageClassifier](https://learn.ml5js.org/#/reference/image-classifier) you may have noticed it doesn't always recognise what you want it to recognise. Using the [Feature Extractor](https://learn.ml5js.org/#/reference/feature-extractor) we can re-train the model to recognise your own images. 4 | 5 |
6 |
7 |
8 | 9 | ## Feature extraction 10 | 11 | ![features](./features.png) 12 | 13 | This term means we use a model that has learned **HOW** to look at images. It finds the most important defining features. With this knowledge, it can find the distinguishing features in our own images as well. 14 | 15 | [Watch this super cool visualisation of feature extraction](https://www.youtube.com/watch?v=f0t-OCG79-U) 16 | 17 |
18 |
19 |
20 | 21 | # ML5 Example code 22 | 23 | - Training and classifying with the webcam 24 | - Training and classifying with static images from a folder 25 | - Saving and loading the model 26 | - Regression instead of classification 27 | 28 |
29 |
30 |
31 | 32 | ## Training and classifying with webcam 33 | 34 | First include ML5, and include a video tag in your html 35 | 36 | ```html 37 | 38 | 39 | ``` 40 | In javascript, switch on the webcam with 41 | ```javascript 42 | if (navigator.mediaDevices.getUserMedia) { 43 | navigator.mediaDevices.getUserMedia({ video: true }) 44 | .then((stream) => { 45 | video.srcObject = stream 46 | }) 47 | .catch((err) => { 48 | console.log("Something went wrong!"); 49 | }); 50 | } 51 | ``` 52 |
53 |
54 |
55 | 56 | ### Add training data 57 | 58 | Create the featureExtractor, then in the `onloaded` callback you can create the classifier. 59 | 60 | ```javascript 61 | const featureExtractor = ml5.featureExtractor('MobileNet', modelLoaded) 62 | const video = document.getElementById('webcam') 63 | function modelLoaded() { 64 | console.log('Model Loaded!') 65 | classifier = featureExtractor.classification(video, videoReady) 66 | } 67 | function videoReady(){ 68 | console.log("the webcam is ready") 69 | } 70 | ``` 71 | Create buttons for all your labels in your HTML page. 72 | ```html 73 | 74 | ``` 75 | When you click a button, you can add the current webcam image with that label as a training image: 76 | ```javascript 77 | const maskbtn = document.getElementById("mask") 78 | maskbtn.addEventListener("click", () => addMaskImage()) 79 | 80 | function addMaskImage() { 81 | classifier.addImage(video, 'wearing a mask', ()=>{ 82 | console.log("added image to model!") 83 | })) 84 | } 85 | ``` 86 | The callback is just to check if the image was succesfully added to the model. 87 | 88 |
89 |
90 |
91 | 92 | ### Training 93 | 94 | After adding about 10-20 images for each label, you can call the training function. The loss value should be getting smaller while your network is learning. 95 | ```javascript 96 | classifier.train((lossValue) => { 97 | console.log('Loss is', lossValue) 98 | if(lossValue == null) console.log("Finished training") 99 | }) 100 | ``` 101 |
102 |
103 |
104 | 105 | ### Classifying 106 | 107 | When the lossvalue becomes `null`, you can start an interval that checks the webcam every second 108 | ```javascript 109 | label = document.getElementById("label") 110 | 111 | setInterval(()=>{ 112 | classifier.classify(video, (err, result) => { 113 | if (err) console.log(err) 114 | console.log(result) 115 | label.innerHTML = result[0].label 116 | }) 117 | }, 1000) 118 | ``` 119 | 120 |
121 |
122 |
123 | 124 | ## Training with folder of static images 125 | 126 | First you can add an image to your HTML or create it by javascript using `new Image()`. 127 | 128 | ```html 129 | 130 | 131 | ``` 132 | In this example we have a folder with numbered images: `data/train1.jpg, data/train2.jpg, data/train3.jpg`. We create a variable `index` to keep track of which image we're learning. 133 | 134 | Then we load numbered images from a folder one by one. After one image has been loaded (you can check that with an `eventListener`), we call the `addImage` function to add the image to the feature extractor. 135 | 136 | ```javascript 137 | const featureExtractor = ml5.featureExtractor('MobileNet', modelLoaded) 138 | const classifier = featureExtractor.classification() 139 | 140 | let index = 1 141 | let img = document.getElementById('trainme') 142 | 143 | function modelLoaded(){ 144 | loadImage() 145 | } 146 | 147 | function loadImage(){ 148 | img.src = `data/train${index}.jpg` 149 | img.addEventListener("load", addImage()) 150 | } 151 | ``` 152 | 153 | The `addImage` function adds the image to the feature extractor. We have to wait until that also finishes, and then we can add the next image from the folder. We do that by incrementing the `index` by 1. If there are still images left, we call the `loadImage` function again. 154 | 155 | ⚠️ When adding the image to the feature extractor, we supply the label. This is what we want to learn to recognise. In this case it's a pikachu. 156 | 157 | ```javascript 158 | function addImage(){ 159 | classifier.addImage(img, 'pikachu', imageAdded); 160 | } 161 | function imageAdded(){ 162 | if(index < 20){ 163 | loadImage() 164 | } else { 165 | train() 166 | } 167 | } 168 | ``` 169 | 170 | After all images from the folder have been added, we can call the `train` function and start classifying new images! 171 | 172 | ```javascript 173 | function train(){ 174 | classifier.train((lossValue) => { 175 | if(lossValue == null){ 176 | classify() 177 | } 178 | }); 179 | } 180 | function classify(){ 181 | classifier.classify(document.getElementById('classifyme'), (err, result) => { 182 | console.log(result); // Should output 'pikachu' 183 | }); 184 | } 185 | 186 | ``` 187 | 188 |
189 |
190 |
191 | 192 | ## Saving and loading the trained model 193 | 194 | You don't want to `train()` a model every time a user starts an app. [Use the ML5 save and load options to load your own trained model](https://learn.ml5js.org/docs/#/reference/feature-extractor?id=save). 195 | 196 |
197 |
198 |
199 | 200 | ## Regression 201 | 202 | Instead of classifying an image into class A,B or C, you might want to get a value from 0 to 100. For example, to assess how damaged a car door is. 203 | 204 | [regression](https://learn.ml5js.org/docs/#/reference/feature-extractor?id=regression) and [prediction](https://learn.ml5js.org/docs/#/reference/feature-extractor?id=predict) 205 | 206 |
207 |
208 |
209 | 210 | --- 211 | 212 | ## Links 213 | 214 | - [ML5.JS](https://ml5js.org/) 215 | - [ML5 Feature Extractor documentation](https://learn.ml5js.org/docs/#/reference/feature-extractor) 216 | - [ML5 Plain Javascript example code](https://github.com/ml5js/ml5-library/tree/main/examples/javascript/FeatureExtractor/FeatureExtractor_Image_Classification) 217 | - [Coding Train Tutorial Feature Extractor](https://www.youtube.com/watch?v=eeO-rWYFuG0) 218 | 219 | -------------------------------------------------------------------------------- /snippets/extractfeatures/style.css: -------------------------------------------------------------------------------- 1 | #label { 2 | width:533px; 3 | height:20px; 4 | color:white; 5 | background-color:black; 6 | } -------------------------------------------------------------------------------- /snippets/introduction.md: -------------------------------------------------------------------------------- 1 | # Quick Introduction 2 | 3 | - [Training, algorithms, and models](#basics) 4 | - [Machine Learning problems](#disciplines) 5 | - [Coding with Javascript](#javascript) 6 | - Brain.js 7 | - ml5.js 8 | - Tensorflow.js 9 | 10 |
11 |
12 |
13 | 14 | # Training, algorithms, and models 15 | 16 | In traditional programming, a programmer writes a *set of instructions*, that is executed by the computer. 17 | 18 | In Machine Learning, we let the computer find the optimal decision by itself. We provide **training data** to an **algorithm** and we receive a **trained model**. The model can make decisions for us! 19 | 20 | In this example, we train a model to recognise cats based on an existing set of cat drawings: 21 | 22 | ![model1](./images/model1.png) 23 | 24 | When we have a model, we can check if any new drawing is a cat or not! We can even ask it to generate a new cat drawing for us! 25 | 26 | ![model2](./images/model2.png) 27 | 28 | 29 | 30 |
31 |
32 |
33 |
34 | 35 | # Machine Learning problems 36 | 37 | ![pose](./images/pose.png) 38 | 39 | Depending on your data and your goal, you can use different approaches for your Javascript ML project. 40 | 41 | | Problem | Approach | Javascript example | 42 | |-------------------------------------|-------------------------------------------------------------------------------------------------------|--------------------------------------------------| 43 | | Find patterns in a simple excel sheet | Use K-Nearest-Neighbour to find patterns in arrays of numbers | [kNear](https://github.com/NathanEpstein/KNear), [KNNClassifier](https://ml5js.org/reference/api-KNNClassifier/) | 44 | | Find patterns in a complex excel sheet | Use a basic Neural Network to find patterns in arrays of numbers | [brainJS](https://github.com/BrainJS/brain.js#for-training-with-neuralnetwork), [ML5 Neural Network](https://learn.ml5js.org/docs/#/reference/neural-network), [Tensorflow Basics](https://www.tensorflow.org/js/tutorials/training/linear_regression) | 45 | | Understand meaning of text | Use LSTM Neural Network or Word2Vec to find meaning in sentences | [BrainJS LSTM](https://github.com/BrainJS/brain.js#for-training-with-rnn-lstm-and-gru), [Word2Vec](https://learn.ml5js.org/docs/#/reference/word2vec) | 46 | | Understand sentiment in text | Use existing sentiment model | [ML5 sentiment](https://ml5js.org/reference/api-Sentiment/), [TensorFlow sentiment](https://github.com/tensorflow/tfjs-examples/tree/master/sentiment), [Detect Comment Toxicity](https://storage.googleapis.com/tfjs-models/demos/toxicity/index.html) | 47 | | Recognise body poses | Use an existing pre-trained body pose model | [Train a Pose Model with Teachable Machine](https://teachablemachine.withgoogle.com) [ML5 PoseNet](https://learn.ml5js.org/docs/#/reference/posenet) | 48 | | Recognise objects in images | Use an existing pre-trained image model, or train your own model using a Convolutional Neural Network | [Train a model with Teachable Machine](https://teachablemachine.withgoogle.com), [ML5 YOLO](https://learn.ml5js.org/docs/#/reference/yolo), [Tensorflow Object Detection](https://github.com/tensorflow/tfjs-examples/tree/master/simple-object-detection) | 49 | | Recognise hand written text | Use the MNIST model | [Tensorflow MNIST](https://github.com/tensorflow/tfjs-examples/tree/master/mnist) | 50 | | Recognise facial expressions | Use an existing facial expression model | [Face-API](https://github.com/justadudewhohacks/face-api.js) | 51 | | Generate text or images | Use a Recurrent Neural Network | [ML5 Sketch RNN](https://learn.ml5js.org/docs/#/reference/sketchrnn), [BrainJS RNN](https://github.com/BrainJS/brain.js#for-training-with-rnn-lstm-and-gru) | 52 | 53 | 54 | --- 55 |
56 |
57 | 58 | ![brain](./images/brain.png) 59 | 60 | # Coding with Javascript 61 | 62 | Javascript allows us to publish our projects online, and provides easy ways to visualise our results using html and css. 63 | 64 | ## Brain.JS 65 | 66 | [BrainJS](https://github.com/BrainJS/brain.js) is a library that allows you to instantiate a Neural Network, train it and run a classification in just a few lines of code. This example learns if text on a RGB background should be white or black: 67 | 68 | ```javascript 69 | const net = new brain.NeuralNetwork() 70 | 71 | net.train([ 72 | { input: { r: 0.03, g: 0.7, b: 0.5 }, output: { black: 1 } }, 73 | { input: { r: 0.16, g: 0.09, b: 0.2 }, output: { white: 1 } }, 74 | { input: { r: 0.5, g: 0.5, b: 1.0 }, output: { white: 1 } }, 75 | ]) 76 | 77 | const output = net.run({ r: 1, g: 0.4, b: 0 }) // { white: 0.99, black: 0.002 } 78 | ``` 79 | 80 | - [Source code and examples for BrainJS](https://github.com/BrainJS/brain.js) 81 | - [Youtube BrainJS introduction](https://www.youtube.com/watch?v=RVMHhtTqUxc) 82 | - [Recognise letters](https://github.com/BrainJS/brain.js/blob/master/examples/which-letter-simple.js) 83 | - [Recognise a drawing](https://output.jsbin.com/mofaduk) and [code](https://gist.github.com/mac2000/fc54e6d6bdcbfde28b03dc2a43611270) 84 | - [Live code example using table data](https://scrimba.com/c/c36zkcb) 85 | 86 | ## ML5.JS 87 | 88 | ML5 supplies a simplified wrapper with clear documentation and examples for many existing Machine Learning libraries, such as TensorFlow and YOLO. In this example, we teach the machine what is left and what is right: 89 | 90 | ```javascript 91 | let nn = ml5.neuralNetwork({ 92 | inputs: 1, 93 | outputs: 2, 94 | task: 'classification', 95 | debug: true 96 | }) 97 | 98 | nn.addData( 100, ['left']) 99 | nn.addData( 600, ['right']) 100 | nn.addData( 150, ['left']) 101 | nn.addData( 800, ['right']) 102 | 103 | nn.normalizeData() 104 | nn.train(finishedTraining) 105 | 106 | function finishedTraining(){ 107 | nn.classify([160], (err, result) => console.log(result)) // LEFT 108 | } 109 | ``` 110 | 111 | - [Introduction to the ML5 library](https://ml5js.org) 112 | - [ML5 Neural Network](https://learn.ml5js.org/docs/#/reference/neural-network) 113 | - [ML5 Image Recogition](https://learn.ml5js.org/docs/#/reference/yolo) 114 | - [ML5 Pose Recogition](https://learn.ml5js.org/docs/#/reference/posenet) 115 | 116 | 117 | 118 | ## Tensorflow JS 119 | 120 | TensorFlow is Google's Neural Network library. TensorFlow is available for Javascript, Python and IoT devices. In TensorFlow you can build your own custom Neural Network to serve many different purposes. 121 | 122 | - [Tensorflow for Javascript](https://www.tensorflow.org/js/) 123 | - [Load an existing model and classify an image in 3 lines of code](./workshop/workshop3.md) 124 | - [Tensorflow JS Tutorials](https://www.tensorflow.org/js/tutorials) 125 | - [Tensorflow Neural Network](https://codelabs.developers.google.com/codelabs/tfjs-training-regression/index.html#0) 126 | - [Hello World in Tensorflow.JS](https://meowni.ca/posts/hello-tensorflow/) 127 | - [Audio example](https://codelabs.developers.google.com/codelabs/tensorflowjs-audio-codelab/), [Webcam example](https://codelabs.developers.google.com/codelabs/tensorflowjs-teachablemachine-codelab/index.html) 128 | - [Apply Anime Drawing Style on your images](https://leemeng.tw/generate-anime-using-cartoongan-and-tensorflow2-en.html) 129 | - [Detect toxicity in online comments](https://storage.googleapis.com/tfjs-models/demos/toxicity/index.html) 130 | 131 |
132 |
133 | 134 | -------------------------------------------------------------------------------- /snippets/layers.md: -------------------------------------------------------------------------------- 1 | # Hidden Layers in ML5 2 | 3 | De standaard instelling in ML5 is dat er één hidden layer is met 16 neurons. In deze afbeelding zie je dat er 4 inputs zijn en 2 outputs. 4 | 5 | 6 | 7 | ```javascript 8 | const options = { 9 | task: 'classification', 10 | debug: true 11 | } 12 | nn = ml5.neuralNetwork(options) 13 | ``` 14 | 15 | Dit kan je ook zien in het debug venster. 16 | 17 | 18 | 19 | 20 | 21 |
22 |
23 |
24 | 25 | ## Layers toevoegen 26 | 27 | Een neural network kan effectiever worden met een afgestemde configuratie van hidden layers. De juiste afstemming kan je vinden door te testen! Let op dat de configuratie voor classification en regression er iets anders uit ziet. 28 | 29 |
30 | 31 | ### Classification 32 | 33 | In dit voorbeeld maken we 3 hidden layers die elk 32 neurons hebben. 34 | 35 | 36 | 37 | In code ziet dit er als volgt uit. De laatste layer is de output layer. ML5 bedenkt zelf hoeveel output neurons er nodig zijn, gebaseerd op je data. De input layer hoef je helemaal niet mee te geven. 38 | 39 | ```javascript 40 | const options = { 41 | task: 'classification', 42 | debug: true, 43 | layers: [ 44 | { 45 | type: 'dense', 46 | units: 32, 47 | activation: 'relu', 48 | }, { 49 | type: 'dense', 50 | units: 32, 51 | activation: 'relu', 52 | }, { 53 | type: 'dense', 54 | units: 32, 55 | activation: 'relu', 56 | }, 57 | { 58 | type: 'dense', 59 | activation: 'softmax', 60 | }, 61 | ] 62 | } 63 | nn = ml5.neuralNetwork(options) 64 | ``` 65 | In de model summary kan je zien of je instellingen goed zijn gegaan: 66 | 67 | 68 | 69 |
70 |
71 | 72 | ### Regression 73 | 74 | Bij regression moet je opletten dat `activation` bij de output layer op `sigmoid` staat. Dit zorgt ervoor dat je output een getal tussen 0 en 1 wordt. Je kan dit ook leeg laten, dan krijg je een getal dat niet wordt afgerond. 75 | 76 | ```javascript 77 | const options = { 78 | task: 'regression', 79 | debug: true, 80 | layers: [ 81 | { 82 | type: 'dense', 83 | units: 32, 84 | activation: 'relu', 85 | }, { 86 | type: 'dense', 87 | units: 16, 88 | activation: 'relu', 89 | }, 90 | { 91 | type: 'dense', 92 | activation: 'sigmoid', // <-- opgelet! 93 | }, 94 | ] 95 | } 96 | nn = ml5.neuralNetwork(options) 97 | ``` 98 | 99 |
100 |
101 |
102 | 103 | ## Links 104 | 105 | - [Custom layers in ML5](https://learn.ml5js.org/#/reference/neural-network?id=defining-custom-layers) 106 | - [SVG Generator](https://alexlenail.me/NN-SVG/) 107 | -------------------------------------------------------------------------------- /snippets/python.md: -------------------------------------------------------------------------------- 1 | ## Hardware, Python en Games 2 | 3 | - Hardware 4 | - Python 5 | - Games 6 | 7 |
8 |
9 |
10 | 11 | # Hardware 12 | 13 | ![adafruit](../images/hardware.png) 14 | 15 | - [🔥 Teachable Machine Tiny Model for IoT](https://teachablemachine.withgoogle.com/train/tiny_image) 16 | - [Tensorflow Lite - Model Maker](https://www.tensorflow.org/lite/guide/model_maker) quickly creates a model for your custom data 17 | - [Adafruit Raspberry kit for Microsoft Lobe](https://www.adafruit.com/product/4963) 18 | - [Jetson NANO](https://developer.nvidia.com/embedded/jetson-nano-developer-kit) 19 | - [Braincraft AI kit for Raspberry Pi](https://learn.adafruit.com/adafruit-braincraft-hat-easy-machine-learning-for-raspberry-pi) 20 | - [Arduino edge impulse for AI applications](https://docs.arduino.cc/tutorials/nano-33-ble-sense/edge-impulse) 21 | - [🔥 Mycroft is a private smart home assistant](https://mycroft.ai) - no need to send your voice data to google, apple or amazon! 22 | - [Wekinator](http://www.wekinator.org) is a GUI that can apply Machine Learning to Arduino sensor data - [check the tutorial.](http://www.wekinator.org/kadenze/) 23 | - [Using Node.JS for tensorflow](https://www.tensorflow.org/js/guide/nodejs) 24 | - [Use Node.JS and tensorflow on the Raspberry Pi with draggable blocks](https://www.youtube.com/watch?v=cZj1d25eeWY) 25 | - [Google's Do-it-yourself Raspberry Pi AI Kits](https://aiyprojects.withgoogle.com/vision/) 26 | - [Edge microcontroller can run TensorFlow Lite](https://www.sparkfun.com/products/15170) from SparkFun 27 | - [Corel.AI Tensorflow Hardware](https://coral.ai/products/) en [📺 Marshmallow detector demo](https://coral.ai/projects/teachable-sorter/) 28 | - [Build a teachable robot with Raspberry Pi and Arduino](https://experiments.withgoogle.com/alto) 29 | - [📺 Simple demo to recognise speech with Raspberry](https://www.youtube.com/watch?v=7ercdl9YC1o) and [tutorial](https://learn.adafruit.com/how-to-train-new-tensorflow-lite-micro-speech-models?view=all) 30 | - [Building camera detection on a raspberry pi](https://www.youtube.com/watch?v=2kO8ScrqikM) 31 | - [Adafruit testing Tensorflow on a microcontroller](https://www.youtube.com/watch?v=4wC2jVvGSXs) 32 | - [Machine Learning for physical computing by Yining Shi](https://github.com/yining1023/Machine-Learning-for-Physical-Computing) 33 | - [Google's Do-it-yourself Raspberry Pi AI Kits](https://aiyprojects.withgoogle.com/vision/) 34 | 35 |
36 |
37 |
38 | 39 | # Python 40 | 41 | ![python](../images/python.png) 42 | 43 | [Python](https://www.python.org) is used by data scientists and in many Machine Learning courses online. Many algorithms and libraries are available in Python that may not always be available in Javascript. The big disadvantage of Python is that the code runs only in your own environment. You can still use Python to train a model, which you can then load in a Javascript frontend. Also, you can run a Python app "live" on a raspberry Pi. 44 | 45 | You can set up Python locally, but it's far easier to run a Jupyter Notebook in [Google Colab](https://colab.research.google.com/notebooks/intro.ipynb#recent=true), which also uses Google's GPU for heavy calculations. 46 | 47 | [🤯 Jupyter notebooks can also run inside Visual Studio Code](https://code.visualstudio.com/docs/python/data-science-tutorial) 48 | 49 |
50 | 51 | ## Python code examples 52 | 53 | - [Creating your first neural network in Python](https://www.analyticsindiamag.com/how-to-create-your-first-artificial-neural-network-in-python/) 54 | - [Machine learning for artists: guides and examples](http://ml4a.github.io/guides/) 55 | - [Building a perceptron from scratch](https://medium.com/@ismailghallou/build-your-perceptron-neural-net-from-scratch-e12b7be9d1ef) and [source code](https://github.com/smakosh/Perceptron-neural-net-from-scratch) 56 | - [Creating a perceptron in 9 lines of Python](https://medium.com/technology-invention-and-more/how-to-build-a-simple-neural-network-in-9-lines-of-python-code-cc8f23647ca1) 57 | - [Generating recipes with LSTM with cooking dataset](https://dev.to/trekhleb/generating-cooking-recipes-using-tensorflow-and-lstm-recurrent-neural-network-a-step-by-step-guide-973) 58 | - [Excellent video tutorial for the Perceptron](https://www.youtube.com/watch?v=kft1AJ9WVDk) 59 | - [Visualising data with Matplotlib](https://matplotlib.org/3.1.1/tutorials/index.html) 60 | - [Data Science Handbook](https://jakevdp.github.io/PythonDataScienceHandbook/) 61 | - [Train a Train - small game where a vehicle learns to drive](https://github.com/lkoppenol/train-a-train) 62 | - [Building a cat detector on a Raspberry Pi](https://planb.nicecupoftea.org/2018/12/01/cat-detector-with-tensorflow-on-a-raspberry-pi-3b/) 63 | - [NVidia AI playground](https://www.nvidia.com/en-us/research/ai-playground/) 64 | - [Recommender System](https://towardsdatascience.com/how-to-build-a-simple-recommender-system-in-python-375093c3fb7d) 65 | - [Algorithm notes](http://books.goalkicker.com/AlgorithmsBook/) 66 | - what is [YOLO?](https://www.youtube.com/watch?v=MPU2HistivI) 67 | 68 |
69 |
70 |
71 | 72 | ## Generative AI 73 | 74 | - [Play with Stable Diffusion on your own Google Colab](https://colab.research.google.com/drive/154esJFzO2_rw309Js30EmrseQ0269kgj?usp=sharing) 75 | 76 |
77 |
78 |
79 | 80 | 81 | ## Online courses 82 | 83 | - [Linear Regression course on Codecademy](https://www.codecademy.com/learn/linear-regression-mssp) and [Youtube explanation](https://www.youtube.com/watch?v=2htO1YFkpds&t=311s) 84 | - [Udacity course: Machine Learning with Python](https://www.udacity.com/course/intro-to-machine-learning--ud120) 85 | - [Mastering Machine Learning with MatLab for Python](https://nl.mathworks.com/campaigns/offers/mastering-machine-learning-with-matlab.html?s_eid=PSB_17921) 86 | 87 | ### Science Kit Learn 88 | 89 | - [SKLearn](http://scikit-learn.org/stable/) 90 | - [Introduction to machine learning with scikit-learn](http://scikit-learn.org/stable/tutorial/basic/tutorial.html#machine-learning-the-problem-setting) 91 | 92 | ### Tensorflow 93 | 94 | - [Google Tensorflow tutorials](https://www.tensorflow.org/tutorials/) 95 | - [Getting Started with TensorFlow](https://www.tensorflow.org/get_started/get_started) 96 | - [Get started with Tensorflow Lite for microcontrollers](https://www.tensorflow.org/lite/) 97 | 98 |
99 |
100 |
101 | 102 | # Games 103 | 104 | - [Getting started with ML Agents in Unity](./unity.md) 105 | - [Unity Learn: ML Agents Course](https://learn.unity.com/course/ml-agents-hummingbirds) 106 | - [AI learns how to play Tic-Tac-Toe with Genetic Algorithms](https://blog.paperspace.com/tic-tac-toe-genetic-algorithm-part-1/) 107 | - [Tensorflow Agent learns how to play a game](https://www.youtube.com/watch?v=52DTXidSVWc) 108 | - [OpenAI GYM - a game environment to train AI with Python](http://gym.openai.com) 109 | - [Self-driving car in Unity](https://github.com/udacity/self-driving-car-sim) and [Udacity Course: become a self-driving car engineer](https://www.udacity.com/course/self-driving-car-engineer-nanodegree--nd0013) 110 | -------------------------------------------------------------------------------- /snippets/reactnative/README.md: -------------------------------------------------------------------------------- 1 | # Machine Learning in React Native 2 | 3 | In deze readme vind je de werkwijze voor het toepassen van een aantal algoritmes uit de PRG8 lessen in React Native: 4 | 5 | - Workflow 6 | - KNN 7 | - CSV laden 8 | - Decision Tree 9 | - Neural Networks 10 | - Image Prediction 11 | - ChatGPT Assistent 12 | 13 |


14 | 15 | ## Workflow 16 | 17 | - Het laden van data en trainen van een model wil je maar 1 keer doen. Dit doe je in de `useEffect()` functie. Deze functie wordt 1 keer uitgevoerd bij het laden van de app. 18 | - Ditzelfde geldt voor het laden van een getrained model. 19 | - Het model zelf moet bewaard blijven in het component, zodat je later de voorspellingen kan uitvoeren. 20 | - Dit kan je doen in een `state`, maar omdat state continu gemonitord wordt door React, onthouden we het model met `useRef`. 21 | - Javascript code die gebruik maakt van `window`, HTML elementen, CSS, `