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

Actionable Machine Learning in the Browser with PyScript

Actionable Machine Learning in the Browser with PyScript

PyScript is the new open source platform that brings Python to web front-end applications. In fact, PyScript makes it possible to inject *standard* Python code into HTML, which is then _interpreted_ and _executed_ directly in the browser. And all that, with **no server-side** technology needed, and **no installation** required (_not even a local Python interpreter!, ed._) 🔮.

But there's more! Thanks to its built-in integration with [`pyodide`](https://pyodide.org/en/stable/), PyScript brings the [full](https://pyodide.org/en/stable/usage/packages-in-pyodide.html) PyData stack into the browser, along with a native integration with the Javascript interpreter, then enabling full support for front-end interactivity.

As a result, PyScript has the potential to radically change the way in which interactive data-driven web apps could be designed and developed: the seamless bi-directional integration of **Python** and **Javascript** is complemented by the full support to reliable numerical computation, enabled by the Python scientific ecosystem (e.g. `numpy` `scikit-learn`), using the browser as a ubiquitous virtual machine.

In this talk, we will explore how PyScript enables the creation of full-fledged font-end _interactive machine learning_ (`ML`) apps using PyScript. Multiple examples of supervised and unsupervised ML apps will be presented, and analysed in details, in order to fully understand how PyScript works, and what key features are provided (e.g. _built-in Javascript integration_; _local modules_ ). Similarly, we will also discuss new_ data & design patterns (e.g. _loading heterogeneous data in the browser_; _multi-core vs multi-threading; _performance considerations_) which are required to adapt to the new _atypical_ environment in which we operate: the **browser**.

No specific prior knowledge is required to attend the talk. Familiarity with Python programming, and the main `pydata` packages (i.e. `numpy`, `scikit-learn`, `Matplotlib` ) is desirable, along with a general understanding of how the web DOM works (for the Javascript interaction part) and basic principles of data processing.

Valerio Maggio

April 18, 2023

More Decks by Valerio Maggio

Other Decks in Programming


  1. Actionable Machine
    Learning in the Browser
    with PyScript
    [email protected]

    View Slide

  2. also me
    • Background in CS

    • PhD in Machine Learning for SE

    • Research: ML/DL for BioMedicine

    • Data Scientists Advocate

    • SSI Fellow

    • Python Geek

    • Casual M:TG Player

    “a short summary of myself in logos”

    View Slide

  3. View Slide

  4. What is
    Python in HTML the Browser

    View Slide

  5. You might be thinking…

    View Slide

  6. What is
    Is PyScript ~similar (i.e. comparable to):

    • Q: PHP ?

    • (or any other similar technology injecting server-side code into HTML)

    • A: No

    • it’s a client-side technology

    • Everything happens in the browser

    • Doesn’t necessarily require a remote server to run

    • Although it could run everywhere with no speci
    c con

    • Deploy is as simple as “deploying” an HTML
    I’ll start by telling you what it is not 🙃

    View Slide

  7. View Slide

  8. Java Server Nightmares

    View Slide

  9. • Template Language: is a new language only designed for presentation! Requires an engine to
    ll in the data.

    • PyScript: Client-side Technology, No server needed, no installation is required

    • FWIW: presentation + program logic mixture in PyScript is the same as with Javascript!

    View Slide

  10. View Slide

  11. View Slide

  12. The sign still applies, btw 🙃

    View Slide

  13. What is
    PyScript is not like Javascript

    • it’s a completely di
    erent technology!

    • But PyScript can interact with Javascript (Interoperability)

    • Python Javascript
    I’ll start by telling you what it is not 🙃

    View Slide

  14. View Slide

  15. PyScript Architecture
    • (By default)

    PyScript builds on top of Pyodide

    • pyodide:

    CPython interpreter compiled
    with Emscripten

    to WebAssembly (WASM)
    MicroPython Tech Preview: https://pyscript.net/tech-preview/micropython/about.html

    View Slide

  16. View Slide

  17. View Slide

  18. https://pyodide.org/en/0.22.1/usage/packages-in-pyodide.html

    View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. https://pyscript.net/examples/repl2.html

    View Slide

  25. Before diving into the demos…

    View Slide

  26. Source: https://je

    View Slide

  27. 🤞 Demo Time 🤞

    View Slide

  28. View Code on PyScript.com

    View Slide

  29. View Examples on PyScript.com
    • 🍷 data distribution | view on PyScript.com

    • Interactive feature exploration with Bokeh | view on PyScript.com

    • Interactive Clustering with feature scaling | view on PyScript.com

    • Wine 🍷 XGBoost classi
    er | view on PyScript.com

    View Slide

  30. Thank you very much

    for your kind attention
    Valerio Maggio
    [email protected]

    View Slide