Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Using machine learning to improve our WordPress Application [EN] - Fellyph Cintra

Using machine learning to improve our WordPress Application [EN] - Fellyph Cintra

WordCamp Thessaloniki 2019

Το Machine Learning είναι ένα από τα πιο μοδάτα πράγματα στον κόσμο της πληροφορικής, ένα πλήθος νέων υπηρεσιών εμφανίζονται κάθε στιγμή, μεγάλες εταιρείες έχουν αρχίσει να εφαρμόζουν/υλοποιούν διαφορετικά χαρακτηριστικά που χρησιμοποιούν το Machine Learning (ML). Αλλά…. πώς οι θνητοί προγραμματιστές και οι μικρομεσαίες επιχειρήσεις μπορούν να χρησιμοποιήσουν αποτελεσματικά το Machine Learning για να μάθουν να βελτιώνουν τις λύσεις τους;

Σε αυτή την ομιλία, πρόκειται να συζητήσουμε τις βασικές έννοιες γύρω από το MLand και τη χρήση βιβλιοθηκών υψηλού επιπέδου στο JavaScript για την υλοποίηση στην WordPress εφαρμογή μας , που περιγράφεται ως μια φιλική βιβλιοθήκη Machine Learning ml5.js θα είναι η πόρτα εισόδου μας στον κόσμο του Machine Learning.

Για να ολοκληρώσουμε το ταξίδι εισαγωγής, θα δούμε πώς μπορούμε να χρησιμοποιήσουμε ml5.js σε ένα πραγματικό έργο. Όπως ανέφερα προηγουμένως, το ml5.js είναι μια βιβλιοθήκη Javascript – η ομιλία επικεντρώνεται σε μια στοίβα front-end αλλά είναι ανοιχτή για ανθρώπους που θέλουν να μάθουν περισσότερα για τις βασικές έννοιες πίσω από το Machine Learning.

Ας γράψουμε κώδικα!!!

Machine Learning is one of the most trendy things in IT world right now, a bunch of new services pop-up every single moment, large companies have started to implement different features that utilise Machine Learning(ML). But…. how mortal developers and small and medium business can effectively use machine learn to improve their solutions?

In this talk, we are going to discuss the basic concepts around ML and using high-level libraries in JavaScript to implement on ourWordPress Application, described as a friendly Machine Learning library ml5.js will be our entry door to the Machine Learning world.

To wrap up the introduction journey, we will see how we can use ml5.js in a real project. As I mentioned before ml5.js is a Javascript library – the talk is focused on a front-end stack but is open for people who want to learn more about the basic concepts behind machine learning.

Let’s get coding!!!

WordPress Greek Community

October 12, 2019
Tweet

More Decks by WordPress Greek Community

Other Decks in Technology

Transcript

  1. @fellyph
    Using Machine Learning to
    improve the user experience
    Fellyph Cintra

    View full-size slide

  2. @fellyph
    Or: Machine learning for
    mortal developers

    View full-size slide

  3. @fellyph
    @fellyph
    Deloitte Digital
    Google Developer Expert

    View full-size slide

  4. @fellyph
    Artificial Intelligence ?

    View full-size slide

  5. @fellyph
    Artificial Intelligence ???

    View full-size slide

  6. @fellyph
    –Arthur Samuel
    “Field of study that gives computers the ability to
    learn without being explicitly programmed.”

    View full-size slide

  7. @fellyph
    250
    300
    100
    270
    4
    151
    Example: Normal computation
    If (x > 200) {
    side = right;
    } esle {
    side = left;
    }
    Right - 250
    Right - 300
    Left - 100
    Right - 270
    Left - 4
    Left - 151

    View full-size slide

  8. @fellyph
    Example: AI computation
    Right - 250
    Right - 300
    Left - 100
    Right - 270
    Left - 4
    Left - 151
    Predict next
    results

    View full-size slide

  9. @fellyph
    Example: AI computation
    Right - 250
    Right - 300
    Left - 100
    Right - 270
    Left - 4
    Left - 151
    Predict next
    results

    View full-size slide

  10. @fellyph
    AI Terms
    Natural Language
    Neural network
    Datasets
    Supervised Learning
    Unsupervised Learning
    Pre-trained models
    Machine Learning
    Deep Learning

    View full-size slide

  11. @fellyph
    AI Terms
    Natural Language
    Neural network
    Datasets
    Supervised Learning
    Unsupervised Learning
    Pre-trained models
    Machine Learning
    Deep Learning

    View full-size slide

  12. @fellyph
    Artificial Intelligence
    Machine Learning
    Deep Learning
    Natural
    Language
    Neural
    Network
    Supervised
    Learning
    Unsupervised
    Learning

    View full-size slide

  13. @fellyph
    ML5.js

    View full-size slide

  14. @fellyph
    What we can Classify?
    Images Sounds Text

    View full-size slide

  15. @fellyph
    Can we use ML5.js and
    WordPress?

    View full-size slide

  16. @fellyph
    Ναί!!!

    View full-size slide

  17. @fellyph
    Steps
    1. Create a Gutenberg Block(optional)
    2. Define labels(output) - Product ID
    3. Training model
    4. Export Pre-trained model
    5. Apply script to a Gutenberg block

    View full-size slide

  18. @fellyph
    LET’S CODE!

    View full-size slide

  19. @fellyph
    MAIN FUNCTIONS

    View full-size slide

  20. @fellyph
    Training

    View full-size slide

  21. @fellyph
    Solution

    View full-size slide

  22. @fellyph
    gotResults ruction

    View full-size slide

  23. @fellyph
    Solution

    View full-size slide

  24. @fellyph
    Considerations
    • KNN model - 500kb
    • FeatureExtractor model - 5MB(more than 2 labels).

    View full-size slide

  25. @fellyph
    Coming soon
    https://wicg.github.io/shape-detection-api/

    View full-size slide

  26. @fellyph
    Chrome support(behind flag)
    https://developers.google.com/web/updates/2019/01/shape-detection

    View full-size slide

  27. @fellyph
    Links
    https://p5js.org/
    https://ml5js.org/
    https://github.com/fellyph/ml5js-gutenberg
    https://www.youtube.com/watch?v=jmznx0Q1fP0 ml5.js course

    View full-size slide

  28. @fellyph
    Obrigado
    (thanks)

    View full-size slide