Teach JS About Aesthetics with Machine Learning

Move over Number 5: Artificial Intelligence is a relic of 1986. It’s 2014: the era of Machine Learning + Big Data.

Machine learning helps power everything from Google Now to the lowly OS X Preview app — but you don’t have to be a Prolog or eCommerce geek to harness its power!

We’ll take a whirlwind tour through the fundamental concepts and algorithms in machine learning, then explore a frontend application: selecting the “best” photos to feature on our photo sharing site.

Don’t expect mathematically laborious derivations of SVM kernels or the infinite VC dimension of Neural Nets, but we will gain enough intuition to make informed compromises (thanks to the No Free Lunch theorem, everything is a compromise) in our pursuit of aesthetically-intelligent machines!

Transcript

1. Aesthetics
   + Learning
   Aesthetics
   + Learning
   So long Fine Art.
   

   View Slide

2. Your trainer.
   with uncalibrated learning rate
   

   View Slide

3. Jonathan
   Big Nerd Ranch – Rails & Frontend
   

   View Slide

4. @nybblr
   Pssssst, follow me on Twitter
   

   View Slide

5. $$$
   Google haz them.
   

   View Slide

6. People.
   they’re irrational and unpredictable.
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. Decisions.
    Can’t we automate them?
    

    View Slide

11. f1
    f2 f3
    l1 l2 l3
    

    View Slide

12. View Slide

13. Instance
    Everything sounds so wonderful!
    

    View Slide

14. Features
    If Ethel orders Lamb Chops?
    

    View Slide

15. Label
    Pork chops tonight.
    

    View Slide

16. Perfect fits
    But no prediction power.
    

    View Slide

17. InfoGain
    Fred has a knack for reducing Lucy’s entropy.
    

    View Slide

18. Train & Test
    Take Lucy out for dinner 100x.
    

    View Slide

19. More $$$
    Y Combinator is chatting with your CFO.
    

    View Slide

20. p1
    p2
    p3
    p4
    p5
    p6
    p7
    p8
    p9
    

    View Slide

21. Perceptron
    p1
    f1
    f2
    f3
    out
    y = f(w1f1 + w2f2 + w3f3)
    

    View Slide

22. -1.5 -1 -0.5 0 0.5 1 1.5
    -1.5
    -1
    -0.5
    0.5
    1
    1.5
    Activation
    f(x) = tanh(x)
    

    View Slide

23. Free Lunch
    Sorry Lucy, there isn’t one.
    

    View Slide

24. Aesthetics.js
    Machines === Artists
    

    View Slide

25. All the pixels!
    So long, investors.
    

    View Slide

26. Composition
    You really don’t want rabbit ears on center.
    

    View Slide

27. https://www.flickr.com/
    photos/vanheerdenpieter
    

    View Slide

28. Loneliness
    if (things.length > 3) blowUp()
    

    View Slide

29. https://www.flickr.com/photos/wodkawarrior
    

    View Slide

30. Simplicity
    You won’t get that low DOF on your iPhone.
    

    View Slide

31. https://www.flickr.com/photos/wodkawarrior
    

    View Slide

32. Contrast
    Vintage faded is so old school.
    

    View Slide

33. https://www.flickr.com/photos/wodkawarrior
    

    View Slide

34. Color Theory
    Red and maroon, really?!
    

    View Slide

35. https://www.flickr.com/photos/wodkawarrior
    

    View Slide

36. Wavelets
    ...to help recruit another investor.
    

    View Slide

37. Let’s do it!
    $$$
    

    View Slide

38. ACQUINE
    http://wang.ist.psu.edu/IMAGE/
    

    View Slide

39. View Slide

40. Gotchas.
    Minor details like compute time...
    

    View Slide

41. Brain.js
    https://github.com/harthur/brain
    

    View Slide

42. var brain = require('brain');
    var net = new brain.NeuralNetwork();
    net.train([{input: { r: 0.03, g: 0.7, b: 0.5 }, output: { black: 1 }},
    {input: { r: 0.16, g: 0.09, b: 0.2 }, output: { white: 1 }},
    {input: { r: 0.5, g: 0.5, b: 1.0 }, output: { white: 1 }}]);
    var output = net.run({ r: 1, g: 0.4, b: 0 });
    // => { white: 0.99, black: 0.002 }
    

    View Slide

43. ConvNetJS
    https://github.com/karpathy/convnetjs
    

    View Slide

44. var layers = [{
    type: 'input',
    out_sx: 1,
    out_sy: 1,
    out_depth: 2
    }, {
    type: 'fc',
    num_neurons: 20,
    activation: 'relu'
    }, {
    type: 'fc',
    num_neurons: 40,
    activation: 'relu',
    drop_prob: 0.5
    }, {
    type: 'softmax',
    num_classes: 4
    }];
    var convnetjs = require('convnetjs');
    var net = new convnetjs.Net();
    net.makeLayers(layers);
    var input = new convnetjs.Vol(1,1,2); // feature vector
    var class_probabilities = net.forward(input);
    

    View Slide

45. Pep talk
    Machine learning can do anything.
    

    View Slide

46. View Slide

47. @nybblr
    Continue the conversation?
    

    View Slide