Use decision trees to build drawable shortcuts

Machine learning is not only about neural networks. You can also use decision trees to find out what a user draw on the screen. Classification algorithms are an easy starting point to understand how to make your browser smarter. We will have a look at how they work and how to use them to make easy shortcuts in your browser by drawing geometric forms on the screen.

Transcript

1. Build drawable shortcuts by using decision trees in the browser
2. Martin Sonnenholzer work for Meetup organizer
3. I — Angular Math Cats
4. @chaos_monster
6. Shortcuts in PWA
7. The goal - predict user input ! draw geometric form with mouse on screen ! recognize the drawing and trigger shortcut
8. The goal - train a model ! show a geometric form ! trace the mouse movement ! build a model
10. Quick overview - machine learning
11. Forms of machine learning ! Supervised learning (e.g. classification) ! Unsupervised learning (e.g. clustering) ! Reinforcement learning (e.g. neural networks)
12. Complexity/ Flexibility Interpretable Linear Regression Decision Trees Naive Bayes Random Forest K-Nearest Neighbor Neural Networks Idea by André Lücke
13. What is a decision tree?
14. Definition (Wikipedia) A decision tree is a flowchart-like structure in which each internal node represents a "test" on an attribute [...], each branch represents the outcome of the test, and each leaf node represents a class label (decision taken after computing all attributes). “ ”
16. 3 steps to a decision trees collect data classify train & test
17. Collect data
18. Collect data ! x, y coordinates of the „mouse“ on a canvas while pressed/ touched ! the currently shown geometric form, that’s the label ! many iterations to get enough data
19. Train & Test
20. example data Season Temperature Rain Label Summer 20 false shorts Winter 10 true trousers Winter -5 false trousers Summer 12 true shorts
21. How it works ! Go through attributes of the sample ! create a node in the tree ! Repeat
22. But which attribute to use next?
23. Unicorn called “entropy”
24. unicorn called „entropy“ Season Temperature Rain Label Summer 20 false shorts Winter 10 true trousers Winter -5 false trousers Summer 12 true shorts
25. Unicorn called “entropy” Unicorn called “entropy” Unicorn called “entropy” Unicorn called “entropy” Unicorn called “entropy” Unicorn called “entropy” Unicorn called “entropy”
26. How do I know if it’s good? ! Test with another SampleSet ! Split your data set into training and testing
27. accuracy
28. Underfitting Optimal Overfitting
29. interpret accuracy bias error, when the model is to simple variance error, when the model is to close to the data
30. interpret accuracy - underfitting ! high bias ! low variance => More data
31. interpret accuracy - overfitting ! low bias ! high variance => pruning the tree 
 (to cut of subtrees to make it less exact)
32. Conclusion (so far) ! We collected data ! We created a model ! We tested it and know that it is good
33. Predict shortcut
34. expect and handle misfits
35. Thank you @chaos_monster