Actionable Machine Learning in the Browser with PyScript

Speaker 1 [00:02]

I do apologize for the small detail. I should have known by now, but actually I was in the wrong room. That's the most stupid mistake I should have made. Anyway, I apologize for that. Anyway, I just want to introduce myself a little bit. I am very happy to be here. In the end, I called this slide a short summary of myself in logos. You will be seeing lots of logos here. I have a background in computer science. My PhD is in machine learning for software engineering, which is kind of interesting. field. I've been doing some research for machine learning and biomedical field. I'm now a data science lead scientist advocate for Anaconda, as well as software sustainability institute fellow in the UK. I'm also a Python geek, so you can talk me Python. I'm organising PyData, EuroSciPy, Pyke in Italy. You might be probably hearing something about it later, maybe lighting talk, who knows. I'm also a casual Magic the Gathering player. I keep on saying this. Thank you. I actually brought my deck, so if you want. I keep on saying this, and the first time I said that, I didn't have my deck with me, and there were players there, so, yeah, I do have it. Nice. So, very, very glad that some of you are also playing. On my screen there's the next slide. I don't know why I didn't... There you go. I think there's one slide. Anyway, that was just to ask you for patience and a show of hands, I'm going to ask you a few questions just to understand where we're at with this talk. And I wanted to ask you first, how many of you know what PyScript is? Nice, I've not completely ruined my presentation. Good, I do have slides for those of you not knowing what PyScript is actually. good for me. How many of you have actually used PyScript now? Okay, good, right. I hope you will be using after this talk, maybe, maybe. And how many of you have already seen me blabbing about PyScript? Good, I can reuse old memes, nice. And how many of you have attended Antonio's talk from yesterday on WebAssembly. Fantastic. So for those of you who were there, yesterday Antonio, my colleague from Anaconda, talked about WebAssembly, the project, blah, blah, blah. I will be essentially, this is a good segue, I will be talking about PyScript, which is one application on WebAssembly. So for those of you, I hope that we sort of closed the circle from Antonio's talk from yesterday, which was fantastic indeed. Nice. So, what if we could run Python in the browser, and in particular, what if we could actually embed Python code within HTML? Actually this is what you look at when you see PyScript.net, which is the website for PyScript, the project. And indeed, Python in the browser is as simple as you just have a new tag which is called py-script, and within this tag you can actually write some Python code. And the way in which you do this is essentially importing some kind of a weird py-script.js on the top. I know this might look strange to you, and the first time I've seen this was like, okay, what's going on? Is it like really Python? Is it like JavaScript Python? What was that? So I decided to, and I know you might be thinking, hmm, PHP vibes, nice, so we'll be back again in having HTML code mixed with logic code and something else, so it's like a mixture of different things. I won't shout, I promise. And so I will be starting telling you what PyScript is by telling you what PyScript is not. And in particular, I just want to make crystal clear in the very beginning that PyScript is not at all comparable to any server-side technology like PHP or any technology injecting server-side code into HTML. That is completely not the point. And in fact, it's a client-side technology. happens in the browser, doesn't necessarily require a remote server to run, and you can deploy a PyScript application as simple as you can deploy an HTML file, which means you just put there and it works. And so, again, when I started looking at this, it was like, okay, like, HTML quivering a little bit, you know, Tomcat, Java, Java server pages, and for those of you who had the pleasure, myself to work with this kind of things, this is how Java server pages look like. It's just like some sort of a strange Java code within HTML to do some computation. But this specific technology requires Tomcat server engine, so it's a server-side technology again. And the main drawback of this technology is where you're mixing essentially everything altogether. So presentation logic, programming logic, no, that's really bad. So at that point, templating languages were developed, so if you're familiar with Django, for example, you might know that Django has a template language which is specific to the framework, and the very point of that template language is I don't want to have any Python, real Python running in the browser, because that would be business logic, I just want to have presentation logic. And so this is the new feature of template language, specifically designed for presentation, But PyScript is a client-side technology, so there's no server bringing the business logic or the data into the browser. Everything lives within the browser. And for what it's worth, at this point, we might say that the mixture you have with PyScript with presentation and logic programming is the same as you have with JavaScript. Same thing. Speaking of which, elephant in the room, that's one of the memes I can reuse. For PyScript, we can summarise that in case you were choosing between JavaScript or Python, you would probably go for Python, in this room, I guess, but now you can actually choose both. And this is one of the main advantages of using PyScript, I will be showing a concrete example in a second, I will be actually looking at the time as well. So one of the main advantage of PyScript is, well, first off, PyScript is not like JavaScript. And for those of you attending the talk yesterday, you might know this already, but it's the point is not replacing JavaScript. They are two completely different technologies at all. So even from a technical and architectural perspective. But there's a big but. But PyScript can interact with JavaScript. And so you can announce for interoperability. So for example, in the snippet, you already might see something like that. So this is PyScript, and so everything is within PyScript is Python code. So what you're looking at is genuine Python code that makes available to interoperate directly, and I promise you this works, directly with the JavaScript interpreter running in the browser. So you can do something like from JS, import a document, console, JSON, and then you do document.getElementById, as you would do in JavaScript code, but you do it in Python. So now we're in this room, PyData conference, I think I want to put the attention on what is the benefit of using this technology for PyData projects, and actually this might probably what you might be expecting from me now, as in, where is the actionable machine learning you've been blabbing about in the title? This was one of the first pictures sketched by Peter and Fabio, the creators of the project, and this is indeed a genuine representation of the architecture of the project. PyScript is essentially built on top of Pyodide, which is the interpreter by default. Pyodide is a CPython interpreter compiled via Emscripten to WebAssembly. And so this is how the stack works. At the very end of the stack, you have WASM, which is the actual computational engine that makes everything working in the browser. And just for you to know, it's been announced, I think late March, this year in the PyScript ecosystem, that we might be supporting other interpreters, like MicroPython, for example, which is another implementation of a Python interpreter over WebAssembly. So I can probably show you this, I hope. So for example, in this example here, you might find the link in the slides, you can switch between, so this code is, I promise you, is running in the browser. There's no server there, apart from hosting the HTML, by the way. So I can switch between two interpreters, and everything works. So now I'm using Pyodide, and you can tell because of the spinning wheel here, and you might also realise that it takes some time, because of a reason I will be telling you in a second, and this is the code executed in Pyodide, and this is MicroPython, it's instant speed. So the advantages of having multiple interpreters means that you might have multiple use cases, multiple requirements, so Pyodide has lots of advantages, and I will tell you in a second what are those, but if you don't need what Pyodide is actually giving to you, but you need speed and performance, you might want to switch to a different interpreter, Like MicroBython, for example. And I will be happy to talk about it, actually, later. This is just the wrong presentation. Let me go back to that. There you go. Sorry. Good. So let's have a quick look, and to time as well, about what's the difference between PyScript and Pyodide. I've been telling you that PyScript sits on top of Pyodide. So at some point, you might be wondering, okay, but why do I want to use PyScript instead of using Pyodide directly? Well, Pyodide is fantastic, and the first thing that Pyodide brings to you is like you have full Python standard library, and I want to stress this out very clearly. You're actually writing within PyScript tags genuine Python code. I will be having an example later on, like bringing a Python code works on my computer, standard Python, bringing it to the browser, and it works, okay? So there's no difference between the Python you write there on your computer and in the browser. It is indeed foolish, Python standard library, because everything is supported in the standard library but a few modules, something like EnsurePip, IdleLib, Lib2, Lib3, they're not supported, but you might hardly need them. And also, they're included but not really working, multiprocessing, threading, and sockets. The reason for this is because these libraries actually work different on WebAssembly. So that's why they're not supported yet. Just for you to know, Pyodide is a spin-off project for the Yodide project which was kicked off by Mozilla, now discontinued, and essentially the goal of Yodide back in the days was bringing scientific computing in the browser. So I think we are exactly talking about the right thing. And because of this, Pyodide, since it's Python in the browser for scientific computing, Pyodide, and this is probably one of the main advantages brought by Pyodide and so by extent to PyScript, is providing the full PyData stack already in the browser. So you don't need to install NumPy, you don't need to install anything, most of the packages are already there thanks to Pyodide bringing those packages to WebAssembly. is the main advantage. So you already have Empyodide, BokehNetworkX, NumPy, SciPy, Scikit-learn, you name it. And indeed, there is a web page telling you the exact version and list of packages supported by default in Empyodide, and the list actually goes on and on, and you can spot some of those very popular there. You have SciPy, Scikit-learn, Scikit-image, you have X-Array, plenty of libraries already there. And so this means that the browser now becomes a ubiquitous virtual machine. And the reason for that is like you can have, you can enable scientific computing by just writing this code into an HTML file, bring this file to somebody who doesn't require to have at all Python installed on their computer. They just open the browser and it works. So because the interpreter is actually downloaded automatically, and the Pyodide interpreter, so the Python interpreter on Pyodide. And so whatever you have installed on your computer doesn't matter. Everything works within the sandbox of the WebAssembly in the browser. And this is one of the main advantages and one of the main goals of the PyScript project, bringing programming to the 99%. You can program Python code in the browser with no installation whatsoever. You don't need any installed interpreter on your computer anymore. And so just to make you appreciate a little bit the difference between the now Pyodide and PyScript, so this is genuine Pyodide. If you want to write Pyodide code and to install some packages within your page, this is the code you should be running. Something like asynchronous coroutines in Python, Pyodide load package, and essentially Pyodide includes a submodule which is called a micropip, which is how Pyodide installs packages from the web. In Pyodide, you can install will packages as well as soon as they're compiled specifically for Wasm, as in this example, or they're pure Python, so no C dependency, because they work on Wasm, otherwise they don't. Thank you. I'll go very quick now. In PyScript, on the other hand, And what you can do is just having a tag specifying the config of your application. So you have PyConfig, packages, NumPy, Bokeh, and essentially they're calling for you micropip on Pyodide. These are another example, another good bit of having PyConfig with respect to Pyodide. In PyScript you can actually load custom modules. So for example, I can load custom data files and have it working. This is other options you have in PyConfig, and JSON format is also supported, not just Toml. And now I want to introduce probably another quite interesting contribution of PyScript, which is called PyRepl. So in PyScript, we do have a tag which is called PyRepl. The FireApple is indeed implementing what you're expecting, a read and evaluation command line. I don't know why it's taking so long, I should have checked the internet connection, I need the internet for everything. Let me check that. Taking some time. There you go. with the Internet at this time. So what I can do here, I can do... Oh, let me zoom a little bit. I can import anti-gravity. That's actually quite a nice example here. Do you know what anti-gravity does? This is what anti-gravity does normally, no? So if you do this in your terminal, this is what you get. But in PyScript, you can also do anti-gravity.fly. And the way you do this is is, you can actually look at the code, is genuine Python code is a rewritten version of anti-gravity class. But what you're doing is essentially you're manipulating through a few lines of Python the SVG generated by the anti-gravity thing. Let me go back to the example now. And before diving into a few demos I have, let me just tell you one important thing. Because at some point you might be wondering, okay, how do I actually work with PyScript. Should I actually write everything in the HTML file? You can, but I would recommend, well, there is IDE and editor support, you have PyCharm support, now actually the Pyodide team has released a stub file that you can actually use to integrate within your editor, so when you're writing in VS Code, for example, you have auto-completion for the JS module for the Pyodine module, specifically for the GS module. And also, I'm very glad to announce to you that we, as an Anaconda, we launched a new project, it's called PyScript.com, which you might think of it, as of now, as what JES Fiddle is for JavaScript. I'll be showing you exactly that. So that's demo time, I have very few time, so I will be going through many things. The first example I thought to talk through is not really relating to machine learning, but it was taken from a previous presentation of mine, and essentially what I'm doing here is, well, I'm showing some connections using networks, connections of Star Wars characters in different movies. And the internet is not helping me at all here. There you go. But what I'm actually doing here, I'm using D3.js to generate the graph. So I'm indeed integrating Python code within D3. And I can switch here, generating D3, and if you want to have a look at the code, and also have a look at how PyScribble.com looks like. So we can click on view code, and one of the main advantage of PySql.com is it's totally free, you just need to log in and it works. You have everything all together, so you have code and the preview here, but the good bits in this particular case is that since you've been seeing someone else's project, like I'm doing, pretending I'm not myself at this moment, I can actually copy this project and bring this into my account. So that's That's a pretty convenient feature, and as soon as I do this, essentially I'm copying everything into my environment now, I can add as many files as I want. And essentially all the code I was showing you was like genuine Python code at some point integrating with D3.js. I'm taking time from questions now, so I think I will be showing you a few of the examples. I have actually plenty here. But let me just quickly, I just want to show you two things super quickly. The first thing is this. So let me show you this file here. I don't know what's going on. Okay, so this is a genuine Python file, and I can show you it's like nothing particularly fancy. is just like importing some data in the main like from scikit-learn, and it's plotting the class distribution and plot feature metrics, all right? So if you don't trust me, as you should, I can just run this project in the terminal. Is it doing anything? demo time nice alright let's try again it's not even JavaScript anyway so let's try different things let me just I'll go on. No, no, no. I'll take the time. I want to show the demo. That's fine for the questions. That's fine. I think I have five minutes, do I? I have five minutes left, right? Three. Three. Nice. I can do that. Stay with me. Where is this? Yes. Oh, nice. It doesn't exist anymore oh yeah because it's not a folder yes so what I'm trying to do here is running this thingy I'm probably not in the right environment yes I'm plotting this stupid and then I'm plotting another one stupid as well but what I want to do now is like taking everything here and it's not fancy code it's just like code I create a new project I plot it in in main which is automatically created for me there you go and then I just replace the main here into HTML everything is already prepared for me what I will probably wanting to do is something different as in utility let's say utils not by okay then main is it big enough by the way. I see clapping, so I'm late, I know, as usual. I just want to copy this here. There you go. Then I want to import this, and probably I should also import some dependencies, because I need, for this code, I need NumPy. I need scikit-learn. I need matplotlib nice and also I want to fetch a local module which is called utils dot by nice last bit I want to now copy the main here nice I just need to import the functions I need from utils, I call it utils this time, and then, blah, blah, blah, I have to just avoid using this plot show, but I will be doing this, I will be, so this is figure, I display the figure into a target, which doesn't exist yet, but it will, class, yeah, wrap up, I know. Sorry, I'm giving you the hard time, I know. I apologize for that. Fig and target feature. And last bit. Stay with me. Where's the typo there? Thank you. You're very kind. Okay, now we have the ID we have to create which is class, is it? How do I call it? Class and feature I know you've been very pushy Just let me show you this and I'm done I know, I know Just bear with me, I promise I know, I know, you're right You're very German and I'm very Italian to be honest please work it takes actually a bit of time because the competition runs in the browser and I do thank you very much for your patience everybody it should be working though it doesn't I forgot pandas. Yes.