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.

Transcript

1. Actionable Machine
   Learning in the Browser
   with PyScript
   vmaggio@anaconda.com
   @leriomaggio
   

   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
   me
   pun
   Who?
   🧙
   
   
   “a short summary of myself in logos”
   @mtg_lotus_vale
   

   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
   fi
   c con
   fi
   guration
   
   
   • Deploy is as simple as “deploying” an HTML
   fi
   le
   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
   fi
   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
    ff
    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
    ff
    .glass/post/whats-new-pyscript-2023-03-1/
    

    View Slide

27. 🤞 Demo Time 🤞
    

    View Slide

28. View Code on PyScript.com
    https://leriomaggio.github.io/pyscript-dataviz/examples/starwars_pyscript.html
    

    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
    fi
    er | view on PyScript.com
    

    View Slide

30. Thank you very much
    

    for your kind attention
    Valerio Maggio
    vmaggio@anaconda.com
    @leriomaggio
    

    View Slide