[00:00.000 --> 00:17.040]  Hello. So yeah, I'm talking about PyScrip. So I'm trying to get a catchy title, so it's
[00:17.040 --> 00:21.600]  kind of like a clickbait. So with PyScrip, we replace Django. So maybe a lot of people
[00:21.600 --> 00:25.920]  will be like really, you know, sparking their interest because I mentioned Django, which
[00:25.920 --> 00:35.200]  is a very popular framework for web. But today, I'm not going to talk too much about Django,
[00:35.200 --> 00:39.360]  but I'm mainly going to talk about PyScrip. And I would have some crazy demo at the end,
[00:39.360 --> 00:46.960]  which is very interesting. So you may not want to miss it. But the most important thing
[00:46.960 --> 00:52.800]  is that this is the link to the slides. I should have used some QR code, but kind of lazy. So
[00:52.800 --> 00:58.240]  it's just the link that you could, you know, find the slide deck. It is also uploaded to the
[00:58.240 --> 01:04.320]  FOSTA website. You can find it to follow along if you can't see it very well or anything happened,
[01:04.320 --> 01:13.360]  then you can look at the slides. And all the links are there as well. So I hope that since you're
[01:13.360 --> 01:19.440]  here, you have heard of PyScrip, but who, how much do you know about PyScrip? Like, except that it's
[01:19.440 --> 01:30.000]  something to do with Python? So, yeah, silence. So, yeah. So I think most people that match,
[01:30.000 --> 01:33.680]  I've talked about PyScrip, and then they said that they have heard about PyScrip. They may have
[01:33.680 --> 01:39.760]  read a block or two about PyScrip. It's something that's relatively new. So that's why I think it's
[01:39.760 --> 01:46.000]  important to kind of, you know, to put information together so people have something to, you know,
[01:46.000 --> 01:51.200]  look at when they want to know more about PyScrip. So, by the way, I'm checked. Why am I talking
[01:51.200 --> 01:57.120]  about PyScrip? Why sounds like I know a lot about PyScrip? Because I work in Alaconda. So PyScrip
[01:57.120 --> 02:02.880]  is developed by a team in Alaconda. So I work with them a lot. So I have, you know, kind of,
[02:02.880 --> 02:07.040]  you know, very close to the source. So I kind of have some like information about what's the
[02:07.040 --> 02:11.680]  newest thing about PyScrip. And I love open source project. I have been involved in open source
[02:11.680 --> 02:16.320]  project in the past. I just want to put more pictures there. So that's why I put it here. And
[02:16.320 --> 02:26.640]  I organize a lot of events. So let's jump into it. What is PyScrip? PyScrip is actually a framework.
[02:26.640 --> 02:32.480]  Some people think that PyScrip is a new language, but it's not. It's actually Python. But this,
[02:32.480 --> 02:38.960]  you know, you can write Python in your HTML file. That's what it is. And also, like, it's, or it's
[02:38.960 --> 02:46.080]  a framework. Why? Because later you'll see why. We say PyScrip is a framework because of how you
[02:46.080 --> 02:51.200]  can change the backend and other stuff. So it lets you run Python application in the browser.
[02:51.200 --> 02:57.920]  Basically, it just means that you can, well, you can run, you know, you can write Python script
[02:58.640 --> 03:05.920]  as just like you run, like you write JavaScript in the HTML file. And then the browser would
[03:05.920 --> 03:11.760]  understand what you want it to do, and they would do something. So, but it's not trying to repage
[03:11.760 --> 03:17.200]  JavaScript. You can actually use it with JavaScript. For example, I'm using it with the D3 library,
[03:17.200 --> 03:26.240]  which is crazy. Who knows about D3? Yes. Okay, good. Okay. I'm not, like, speaking to other
[03:26.240 --> 03:32.720]  people. Yeah, it's good. So I will show something more like later. So basically, you can actually
[03:32.720 --> 03:37.440]  parse the objects back and forth. So you can change a Python object into JavaScript object,
[03:37.440 --> 03:44.480]  and then your JavaScript library, like D3, will understand it or the other way around. So it
[03:44.480 --> 03:52.880]  is something that is quite new. So also, so all these things that I talk about that you can,
[03:52.880 --> 03:56.560]  like, change the Python object into JavaScript object, all these stuff won't be happening
[03:56.560 --> 04:04.640]  if we don't have the PyLDI project, which they is, by the way, for those of you who haven't heard,
[04:04.640 --> 04:10.480]  it's kind of, it started as a monselors project called iLDI. They try to, like, have a lot of
[04:10.480 --> 04:17.520]  things that is, like, run, you know, in a WESM, WebAssembly, so the browser can run it. And then
[04:17.520 --> 04:24.560]  there's a, so within that, all those projects, there's a Python, you know, project that is actually,
[04:24.560 --> 04:32.480]  like, converting Python into WebAssembly. So that's the PyLDI project. So that's actually
[04:32.480 --> 04:42.720]  allowed you to run the Python. So without it, like, actually, PyScript won't work. So, well,
[04:42.720 --> 04:47.120]  PyScript will still work. You can change the backend, but, like, it started with PyLDI. Sorry,
[04:47.120 --> 04:53.680]  I'm, like, kind of, I'm trying to be correct in what I'm saying. But the main thing is that
[04:53.680 --> 05:02.160]  you need to, kind of, compile Python into a WebAssembly. So PyLDI is, like, the kind of one
[05:02.160 --> 05:08.000]  of the most popular one that is, like, having the whole, more or less, the whole thing that
[05:08.880 --> 05:14.640]  your standard Python offer is actually compiled into WebAssembly, so you can run Python on the
[05:14.640 --> 05:18.880]  browser. But there's also other things that we are trying, the team is trying now. For example,
[05:18.880 --> 05:24.320]  they are trying to compile MicroPython, which is a lighter version of Python, into WebAssembly. So
[05:25.040 --> 05:31.120]  it more or less works the same, but you have some kind of Python functionality that is not
[05:31.120 --> 05:38.880]  available on MicroPython. So you can actually choose which one you want to use. And also,
[05:38.880 --> 05:45.520]  because one thing about the PyLDI project that is, that is, why it, why it is the first one
[05:45.520 --> 05:50.240]  that PyScript adopts and why is the first one that is, like, why is it so popular? Because
[05:50.800 --> 05:56.960]  the project itself also provides a lot of Python packages. For example, those that we use a lot,
[05:56.960 --> 06:02.640]  for example, NumPy, like, scientists and data scientists use a lot, it's like, like, some of
[06:02.640 --> 06:10.000]  NumPy, SciPy, Cyclo and all those actually are quite difficult to run on the browser because
[06:10.000 --> 06:16.000]  they are not pure Python. So for pure Python, if you have a Python interpreter that actually is
[06:16.000 --> 06:21.840]  compiling to Wasm, of course you can do it because they are just Python, but something like NumPy,
[06:21.840 --> 06:28.240]  SciPy, Cyclo and they are not pure Python, then it's a bit tricky, but PyLDI project also provides
[06:28.240 --> 06:34.640]  that. So now we can also run those very complicated Python packages on the browser, which is cool.
[06:34.640 --> 06:40.640]  So I will show you a little bit of the PyScript basic and then I'll show you the demo and then,
[06:40.640 --> 06:49.440]  like, all the questions will come at the end. Is it too small? I don't know how to zoom in though.
[06:51.120 --> 06:58.880]  That's why the link is important at the beginning. So I can explain, but the content of this code
[06:58.880 --> 07:05.520]  is not the most important thing. It's just like how a typical PyScript will look like. So I'm just
[07:05.520 --> 07:09.920]  talking about this section here. So for the first two lines here, you don't need to see it, but I'm
[07:09.920 --> 07:16.080]  telling you what it is. It's just like when you have a JavaScript code, you would actually have a,
[07:16.080 --> 07:20.880]  probably you have a CSS, which is like the style of how your website would look like, the style
[07:20.880 --> 07:25.760]  sheet, and then you have a JavaScript that you kind of put in and then you can run all these,
[07:25.760 --> 07:32.800]  like, JavaScript functions that you have. So this is actually something like a path to a
[07:32.800 --> 07:40.560]  PyScript.js that's hosted on the PyScript.net. This is actually what allows you to write Python
[07:40.560 --> 07:49.120]  on the websites, on your HTML file. Well, you may ask, like, why is it.js? This is just how
[07:49.120 --> 07:56.240]  awesome work. So we have to follow the standard. So yeah, that's.js, but that's not important.
[07:56.240 --> 08:00.800]  You're not writing JavaScript, so don't worry about it. Next is there is a section that you can
[08:00.800 --> 08:06.240]  actually write Python code. So here is just some NumPy code that is plotting some NumPy
[08:06.240 --> 08:13.680]  random numbers. Okay. So here, like, if it's, sorry, I'm not expecting the room to be this big.
[08:13.680 --> 08:21.600]  So if you can see it, so the first line is basically a HTML tag and it's PyScript, and then
[08:21.600 --> 08:26.800]  it also has a little bit of settings, like output equals to plot and stuff like that. And it is
[08:26.800 --> 08:32.400]  just a Python script. It's just like input NumPy, input Mapolyb, and all that stuff.
[08:32.400 --> 08:37.360]  And then it's, you know, it's Python code. It's just like, you know, you can copy and paste your
[08:37.360 --> 08:42.720]  Python code there. It's more or less the same thing. And the other thing that you may have
[08:42.720 --> 08:47.840]  when you are using PyScript is a PyConfig file. So this PyConfig file is actually,
[08:48.720 --> 08:53.920]  there's multiple format that is supported in this example. It's in JSON format. It's just a
[08:53.920 --> 09:01.520]  JSON file with, like, saying packages is NumPy and Mapolyb, because we are using it in the code,
[09:01.520 --> 09:06.560]  in the Python code. That's why we have to, like, put it there to say that we are using those packages,
[09:06.560 --> 09:12.080]  kind of like your PIP install. It's like putting it in your, in the environment,
[09:12.080 --> 09:17.600]  within your browser. So that's what it does. So this is the code. That's typically how it looks
[09:17.600 --> 09:22.320]  like. One catch is that it's using the latest version in the first two lines there. So if you
[09:22.320 --> 09:28.400]  don't want to, you know, break your code, you can pin a version. Now you can also pin a specific
[09:28.400 --> 09:36.640]  version with the releases and then the version number. Now we are named. We are, we are, we are
[09:36.640 --> 09:42.640]  tacking it as, like, the year, month, date, year month, probably, and then the versions. So,
[09:44.000 --> 09:48.480]  so yeah, you, if, for example, you don't want it to, because now PyScript is still changing a lot.
[09:48.480 --> 09:53.520]  So if you don't want your code to be not working next month, so you may want to pin the version
[09:53.520 --> 09:57.280]  until you want to update it manually when you look at the code again and update it.
[09:58.000 --> 10:01.040]  You can do it. So don't worry about it. I know people will have questions about it.
[10:01.040 --> 10:08.720]  Or you may think that, oh, like, you know, you're a web developer and, like, you, you don't like
[10:08.720 --> 10:13.520]  the CDN, like, calling in from another website that you have no control of, you know, if that
[10:13.520 --> 10:19.200]  website got attacked or something that won't work, it may be very dangerous. You can host it yourself.
[10:19.200 --> 10:24.400]  You can download that two things, you know, the, the, the style sheet and the JavaScript code yourself
[10:24.400 --> 10:27.760]  and, you know, and, and the other things with it as well. There's, there's also a few other things,
[10:27.760 --> 10:31.440]  but they're all downloadable. You can download it and host it yourself if you want to.
[10:33.760 --> 10:39.040]  So, uh, it's getting more complicated because, you know, now we're, like, the PyScript is
[10:39.040 --> 10:44.800]  getting, like, more developed and now there's more things you can config about how PyScript works.
[10:44.800 --> 10:53.120]  So the PyConfig tag is where you can change all those. So first of all, the tag itself,
[10:53.120 --> 10:58.000]  so we're, within inside, there's multiple format you can use. There's the Tomo format,
[10:58.000 --> 11:03.280]  which is the default. So if you don't tell this tag what format you're writing, so it would just
[11:03.280 --> 11:09.120]  assume you're using a Tomo format. So in this demo here, it says, like, packages and, and paths,
[11:09.120 --> 11:13.360]  so it's just, like, you know, what package you're putting in just, like, again, like the pigment
[11:13.360 --> 11:18.720]  store thing you have to, there's an environment within the browser that's running the other
[11:18.720 --> 11:24.320]  PyScript code. So you have to first say what packages you are using, so, uh, to allow it to be
[11:24.320 --> 11:29.680]  usable. Um, the JSON format, again, it's just different format. It's more or less the same thing.
[11:30.240 --> 11:34.320]  Or you can actually have another source. You can write your file in another, for example, either,
[11:34.320 --> 11:41.200]  either JSON file or Tomo file. You can also put it in because, well, you know, you don't want
[11:41.200 --> 11:45.520]  everything to be in your HTML file, right? So you can actually put in other source as well.
[11:45.520 --> 11:56.960]  And also, um, yeah, the PyConfig tag is, uh, it's not just used for putting all your packages
[11:56.960 --> 12:02.800]  and other stuff. There's also other things that you could, uh, you could set in a PyConfig tag.
[12:02.800 --> 12:07.280]  So, you know, you can also host the wheel of the, of the packages. It doesn't need to be
[12:07.280 --> 12:13.680]  using the one that's provided by PyOdi. Um, you can also, if you have your, like, for example,
[12:13.680 --> 12:19.040]  in Python, you can actually import your local script as well. You can also do that. Uh, you can,
[12:19.920 --> 12:24.800]  uh, you can do it by the fetch tag. Uh, but, uh, I'm not showing it here. You can, if you're
[12:24.800 --> 12:28.720]  interested, you can look at the documentation of PyScript. It will show you how to use the
[12:28.720 --> 12:35.120]  fetch tag to actually load in, uh, your other Python script. You can do it as well. Um, you
[12:35.120 --> 12:39.600]  can change the runtime setting, like I said before, uh, because PyOdi is the default one
[12:39.600 --> 12:46.320]  at the, when we first started having PyScript. Now, uh, is, is, I think it's like in development
[12:46.320 --> 12:51.360]  that, like, you can actually change the backend, like, which one time you want to use. If you,
[12:51.360 --> 12:56.240]  like, for example, just want to do some demonstration with Python or you are using, it's a tool to
[12:56.240 --> 13:01.760]  teach, uh, kids how to code in this. You may not want to use PyOdi because it's slow, it's heavy,
[13:01.760 --> 13:07.680]  it's, like, powerful, and it's useful, useful for other things. You can use MicroPython, which
[13:07.680 --> 13:13.680]  take no time to load, um, but it provides some other basic Python, um, code that you could write,
[13:13.680 --> 13:19.440]  uh, in the HTML file. So you can quickly teach someone Python without installing Python and just,
[13:19.440 --> 13:26.240]  like, running, running it on the HTML file. Um, you can also add some metadata. For example,
[13:26.240 --> 13:30.320]  you know, you want to add the author who write this script and the license. You can also do that.
[13:30.320 --> 13:37.840]  No problem. So, uh, another thing that, uh, you may put in your HTML file while you are using
[13:37.840 --> 13:42.720]  PyScript is the PyRepoll, uh, is something that's just like Jupyter Notebook. If you have
[13:42.720 --> 13:47.920]  Jupyter Notebook, you know, it's, like, very nice, um, repo that you can, like, put in the Python code,
[13:47.920 --> 13:54.560]  shift, enter, and then it will execute and give you the result. Um, you can also embed that in your
[13:54.560 --> 14:01.360]  HTML page when you are using PyScript. So you just need to do the same thing, you know,
[14:01.360 --> 14:07.760]  having those two lines of the style sheet and the, um, PyScript.js. And then you can just put the
[14:07.760 --> 14:12.400]  PyRepoll tag and then you will have a Jupyter-like repo that you could use in your site.
[14:14.240 --> 14:18.320]  So why is it so useful, right? Like, uh, it's a new thing, it's exciting, but
[14:18.320 --> 14:25.360]  can I really use it? Um, or is it just a fun thing to do? Um, why doing it on the front-end, right?
[14:25.360 --> 14:30.800]  Like, now you can have, like, application, like Django, like I said, it's a kind of people love
[14:30.800 --> 14:39.440]  Django. And like, I, you know, uh, why do we want PyScript? Um, because sometimes, like, things just
[14:39.440 --> 14:45.680]  need to be run on the front-end. Sometimes, like, we can't really, um, rely on, you know, uh, an
[14:45.680 --> 14:53.120]  application like Django or other Python application to handle all this Python code. Um, for example,
[14:53.120 --> 14:59.440]  if you don't want to use up all your resources, right? Like, if you have a back-end and then the
[14:59.440 --> 15:05.040]  back-end is actually hosted by you or the cloud service that you pay for, if there's a lot of
[15:05.040 --> 15:11.760]  user and like the, if every single user had a very, like, um, heavy use of your resources,
[15:11.760 --> 15:17.680]  then the bills can be expensive. And then you may not want that. You want to maybe, um, you know,
[15:17.680 --> 15:22.800]  give, give back the low into the, the users who is using it, right? So you could, you could maybe
[15:22.800 --> 15:29.680]  push things to the front-end. Um, on all, if I've heard, like, maintainers said that, like, they
[15:29.680 --> 15:35.600]  may want people to try out their code, you know, you can build a sandbox that let people to, um,
[15:35.600 --> 15:41.120]  to run it. Like, for example, a lot of the data science stuff, you know, uh, for example,
[15:41.120 --> 15:46.000]  the NumPy, SciPy, they, they will have, before they will have the binder thing that actually load
[15:46.000 --> 15:49.920]  in, you know, another application, you know, that have the, have the back-end and then they
[15:49.920 --> 15:56.480]  could run some code there to do it as an example. But for these services, uh, they're provided,
[15:56.480 --> 16:01.520]  if they're provided for free, usually they're quite slow or, you know, they have limits. So, um,
[16:02.320 --> 16:08.000]  if you want to provide a, uh, a sandbox for, for users, if it can run on their machine,
[16:08.000 --> 16:12.640]  you don't have to worry about people abusing it as well. Like, for example, some people, if you,
[16:12.640 --> 16:17.200]  that whoever run whatever on your sandbox, they could do crypto mining and then it's not a good
[16:17.200 --> 16:22.960]  thing. So if it's on the front-end, it's, it's using the user's resources, not your resources,
[16:22.960 --> 16:26.800]  which if they want to mine Bitcoin, it's fine. It's on their machine or on your machine, you don't
[16:26.800 --> 16:32.880]  have to pay the bill. Um, also, uh, sometimes, uh, we have applications that, for example,
[16:32.880 --> 16:38.240]  it's some, uh, research data, some medical data, very sensitive. Uh, so you, you can't really,
[16:38.240 --> 16:43.040]  you know, it's like the rules that you, the, the, the data can't leave the machine. So
[16:43.760 --> 16:48.720]  you can't send it to a back-end somewhere to do it. Then, you know, um, maybe you can provide that,
[16:49.360 --> 16:54.960]  you know, provide the code that, um, you know, someone can use it to run on the browser. So
[16:54.960 --> 16:58.960]  it's run on their machine. So instead of, you know, you have, you have built the application
[16:58.960 --> 17:04.960]  and they have to send the data over to your app or whatever the back-end is and then, uh,
[17:04.960 --> 17:09.840]  to run the application. So it's also easier to set up as well. Otherwise, you may have to
[17:09.840 --> 17:15.440]  provide a separate secure environment with the whole kind of, uh, set up of the back-end and
[17:15.440 --> 17:20.080]  the front-end together and stuff. You know, uh, if you just have the front-end, it's much easier.
[17:20.080 --> 17:26.160]  You don't have to worry about it. So, uh, with high script, with page Django, I know that you
[17:26.160 --> 17:33.040]  already know the answer is no, but, uh, actually it's very fun if you use them together. Um,
[17:33.040 --> 17:39.920]  I will show you a few things that I like, uh, that is done by either me or some of my friends.
[17:39.920 --> 17:46.720]  There's actually quite cool things that we have used, like both Django and high script. So, uh,
[17:46.720 --> 17:53.680]  for example, this is what I have done with, um, can I just pass away? Yeah, okay. So this is something
[17:53.680 --> 18:00.000]  that I've done. It's like, uh, using high script with, uh, with Django that I've, so this is what
[18:00.000 --> 18:05.040]  I, I will show you what it is first and then I would explain. So here, this is the thing. I
[18:05.040 --> 18:10.080]  think this one, this one I can assume is cool. So this is a recommender system, right? So I have
[18:10.080 --> 18:16.400]  all these movies that I download from the movie dataset on, uh, cargo and then, um, is there,
[18:16.400 --> 18:21.200]  there are a bunch of ratings. So this recommender, if you put in a movie that you like, if you try
[18:21.200 --> 18:26.400]  to find all the potential movie that you like after, for example, I always like putting Iron Man
[18:26.400 --> 18:32.560]  because I know it works. And then give me five recommendations. If I like Iron Man, what else
[18:32.560 --> 18:37.760]  would you recommend me? And then if I click recommend, and I've got five of them, right? So
[18:37.760 --> 18:43.360]  most of them sci-fi, sci-fi movie, which is quite cool. Um, there's also the Dark Knight, which is,
[18:43.360 --> 18:49.040]  I think it's the, the movie about the Batman, which is also, I like it. Um, so yeah, that's nice. Um,
[18:49.040 --> 18:54.800]  so, but this thing, right? This thing, usually you think of, oh, it's like a machine learning thing,
[18:54.800 --> 19:01.520]  right? It's a, uh, it's a recommend, recommender system. You know, can I run it on the front end?
[19:01.520 --> 19:08.400]  Yes, you can. As long as you have your model already trained, then, um, for example, in my example
[19:08.400 --> 19:15.520]  here, actually you have a link to see the, the, uh, the, how it's set up. If you click on this link,
[19:15.520 --> 19:22.640]  uh, it will show you how I set it up. So you can play around yourself as well. So, um, what I did
[19:22.640 --> 19:26.880]  is just like, I, of course, I download the data as a gif, and you have to have the data to make
[19:26.880 --> 19:32.320]  it work, right? Um, and then after that, you just, uh, you know, run, run some of this script. You
[19:32.320 --> 19:37.680]  can actually do, do it in a more beautiful way. I'm just using some command line to run all this
[19:37.680 --> 19:44.000]  script to load in the data to, uh, to train your model and stuff. You can do it with other ways.
[19:44.000 --> 19:48.880]  For example, you have a user, uh, a mean user interface, right? They upload a new data and
[19:48.880 --> 19:53.680]  other stuff. Then, uh, it will automatically retrain the model when there's new data.
[19:53.680 --> 19:57.680]  You can set that up as well, but it's just a demo. So this is like this. But after that,
[19:57.680 --> 20:03.040]  there will be a model that's already, um, trained. It will deploy to the front end. And then in the
[20:03.040 --> 20:06.960]  front end, that's how this come in. That's like, that's how it works. So this is just a trained
[20:06.960 --> 20:12.160]  model. It's very lightweight. Um, and then you don't have to host all the data. It could be done
[20:12.160 --> 20:18.000]  somewhere else. But, uh, for the user, they, you know, they have a trained model and then they
[20:18.000 --> 20:23.200]  just need to put in the input and it will give you some results. So if a machine learning model
[20:23.200 --> 20:28.560]  deployed on the front end, another thing that my friend has done, which is quite cool, is
[20:30.320 --> 20:36.320]  front end as a back end. So it's, it's running Django on the browser. So
[20:36.320 --> 20:46.960]  yes, this is so small, but yeah, someone has done it. Um, this is not my doing. So I, I, I don't
[20:46.960 --> 20:52.560]  like, uh, you know, I don't have any responsibility, but you know, have a look. So this is actually
[20:52.560 --> 20:59.040]  like you have, so you have two, basically you have two browser, two, uh, browser, like HTML page.
[20:59.040 --> 21:04.560]  One page is the server. One page is the front end. So this is what it is. So you have a back end
[21:04.560 --> 21:11.600]  and a front end on the same page. Yay. Um, so yeah, you can do that. So I, I was like, oh, this is
[21:11.600 --> 21:16.640]  a bit fun, but is it useful? But my friend here, Hugo told me that you can actually use it to test
[21:16.640 --> 21:22.000]  things because you now can run an application on the browser. So everybody have a browser. So you
[21:22.000 --> 21:27.600]  can, you can run an application on it, which is very cool. So, um, yeah, check that out. Um,
[21:27.600 --> 21:34.400]  other things that I use pie square four is not, uh, with Django is, uh, with, uh, other things,
[21:34.400 --> 21:39.200]  for example, use it together with D3. I have this example here. I already preload them because I,
[21:39.200 --> 21:44.320]  I'm not going to like fool you. It's actually take quite a while to load. So that's why I preload
[21:44.320 --> 21:49.920]  them. Um, but yeah, but because I'm using the whole kind of package, right? Here I'm using
[21:49.920 --> 21:55.680]  network X. I have put in a network graph. I have all these network analysis, which is super cool.
[21:55.680 --> 22:01.280]  But, you know, I don't like the network X, uh, visualization because it's kind of basic. So
[22:01.280 --> 22:05.920]  that's why I use D3 for the visualization. I can do this, right? Very cool animation. I can click
[22:05.920 --> 22:10.960]  on things and things change. You know, now I see all the neighbors are colored coded. Um, so yeah,
[22:10.960 --> 22:16.800]  like, uh, you can combine the cool stuff that JavaScript provide, for example, D3 and the
[22:16.800 --> 22:21.440]  cool stuff that Python provide, which is all these like data science stuff, which is cool. Um,
[22:21.440 --> 22:28.640]  also there are other plots as well. You know, um, before, you know, it's, you know, you can't have
[22:28.640 --> 22:35.360]  these interactive, um, things that you could, you know, interactive graph done easily on your
[22:35.360 --> 22:40.800]  website. Um, so yeah, and also a map as well. This is not again, not my demo, but, you know,
[22:40.800 --> 22:45.600]  you can now have this map thingy where you can use folium, which is a, again, Python library. Now
[22:45.600 --> 22:51.600]  you can use it on the browser. Super cool. Um, yeah. And also I have actually a, start building a
[22:51.600 --> 22:56.240]  Pyscript tutorial. Again, this is working progress because things keep changing. I can't keep it
[22:56.240 --> 23:01.440]  up, but, um, if you're interested, if you want to try it, that may be a place you want to have a
[23:01.440 --> 23:07.200]  look at. Um, so yeah, all of these slides, again, is this on the slide. So, uh, yeah, so download
[23:07.200 --> 23:14.640]  my slides if you need to. So, uh, I think I don't, don't have too much, um, time left. I would, uh,
[23:14.640 --> 23:19.360]  I would like to answer your questions, but there are these common questions that I would also
[23:19.360 --> 23:24.720]  ask and answer myself. So, for example, people ask me, can you pull in a Python script? Yes,
[23:24.720 --> 23:29.520]  you can. You can use the fashion now, look at the documentation if you want to. Um, what Python
[23:29.520 --> 23:34.640]  version you're using, it depends on the runtime, which is the, again, PyConfig settings that you
[23:34.640 --> 23:39.280]  could, um, you know, uh, that you can look at it and see which one you want to use, you know,
[23:39.280 --> 23:45.200]  PyOdi version, which version you want to use, you can choose it yourself. And, uh, you know, why we
[23:45.200 --> 23:51.840]  can't do it like JavaScript, having script tag equals to Python, because, uh, this is so new,
[23:51.840 --> 23:57.920]  all the, uh, browsers, they don't support it yet, so we have to make a custom tag, which is PyScript.
[23:58.960 --> 24:05.440]  Okay. Uh, why don't you just use PyOdi? I think PyScript is just easier to use. PyOdi is very
[24:05.440 --> 24:11.440]  nice, um, but, you know, uh, sometimes get quite complicated for beginners, especially, um, also
[24:11.440 --> 24:15.920]  you can change the runtime with PyScript. So it's not just PyOdi, you can, again, you know, there's,
[24:16.720 --> 24:21.200]  my colleague is now working on a compiled version of Michael Python. It would be much faster, much,
[24:21.200 --> 24:27.760]  much more lightweight. So try that. Um, a bunch more other things. So, uh, can you pin a version
[24:28.480 --> 24:33.120]  of the light, of the packages that you use? If you want, well, if you want, then you better
[24:33.120 --> 24:37.680]  host the wheel yourself than, you know, which version you're using, and it's there frozen and
[24:37.680 --> 24:43.280]  changed forever. Um, so also some, do you know Brighton? Maybe some of you have heard about
[24:43.280 --> 24:48.800]  Brighton. So Brighton is a project that tried to, uh, translate Python into JavaScript and then run
[24:48.800 --> 24:53.040]  it in the browser. Um, the difference is that PyScript actually is not using JavaScript, it's
[24:53.040 --> 25:00.160]  actually using Wasm. So, uh, Python is compiled to Wasm, so, uh, more packages is available. Um,
[25:00.160 --> 25:05.200]  so yeah, also you can, again, change the runtime, the backend, which one you want to use. Beware,
[25:05.200 --> 25:10.560]  as someone mentioned, Beware in my previous talk. Uh, so yes, I would love to, I would love to see
[25:10.560 --> 25:16.160]  more support for Beware, but I can't say for the company, so I'm not saying that. Um, yeah, so, uh,
[25:16.160 --> 25:20.800]  that's the end of my talk. I know I have a few minutes left for Q and A, so, or if you didn't
[25:20.800 --> 25:32.000]  get the sticker at the beginning, come to talk to me, I'll give you a sticker.
[25:36.560 --> 25:42.160]  Thank you. Uh, we have a few minutes for questions and, uh, before the questions, I want to thank
[25:42.160 --> 25:48.800]  everyone for joining the Python Dev Room. And I want to thank also Eric Gasoni, uh, my friend who
[25:48.800 --> 25:56.800]  organized, uh, all of the planning of the day and, um, everything upstream. Um, and he made a great
[25:56.800 --> 26:00.880]  worry for the, yeah, all the selection of the speakers are planning everything. He couldn't
[26:00.880 --> 26:06.800]  make it here today, but, um, I really want to, to thank him as well. Thanks everybody.
[26:06.800 --> 26:17.600]  And thanks to Arnaud also for joining me today, uh, to help the Dev Room. Uh, questions, yeah.
[26:23.600 --> 26:30.000]  Hi, uh, thank you for the wonderful talk. Uh, PyScript is, uh, very exciting. Uh, I know people
[26:30.000 --> 26:35.760]  are using WebAssembly to run untrusted code in the browser. You can use it like a sandbox. So,
[26:35.760 --> 26:43.360]  uh, it's very exciting. But my question is, so you are importing packages. Is that easy to do? Do
[26:43.360 --> 26:49.760]  the packages have to be on the machine already? Yeah. So, uh, if you have internet connection,
[26:49.760 --> 26:55.680]  so the, uh, package, if you just simply put in like, you know, in the PyConfig, you put in package
[26:55.680 --> 27:01.840]  equals to something. So those will be actually proved from whatever PyAlgize provided. So it
[27:01.840 --> 27:06.400]  needs to be loaded from online. So you'll see if you have a web page, it will take quite a while
[27:06.400 --> 27:11.520]  to load. But you also have an alternative that you can download the will of the package. As long
[27:11.520 --> 27:18.480]  as that will is purely written in Python. So something like, uh, NumPy, SciPy, those, because
[27:18.480 --> 27:22.560]  they have extension, they are not purely written in Python. Those, you don't have an option. You
[27:22.560 --> 27:26.800]  have to use the one that PyAlgize provided. But otherwise, if it's in other library, for example,
[27:26.800 --> 27:30.720]  first you will see, you know, it's purely written in Python. You can download the will and it can
[27:30.720 --> 27:39.680]  run locally. Yeah. Yeah. My question is about mudplotlib. It's okay. But, um, how is this
[27:39.680 --> 27:47.440]  base map or cartoply? Can it be used also? Uh, mudplotlib, sorry. Mudplotlib is for graphics,
[27:47.440 --> 27:54.640]  but if you have cards, maps, base map, can such a tool also be used then in the browser?
[27:55.280 --> 28:00.480]  Yeah. Most of the library that if it's available in Python, it will also be available. So,
[28:00.480 --> 28:13.920]  it must be pure Python or it's, uh, I'm not sure. I don't know. I try. Yeah. So you have,
[28:13.920 --> 28:18.480]  you have to check like the library that you want to import. Is it purely in Python or not? So, yeah.
[28:23.360 --> 28:29.360]  I'm a bit confused because, uh, the, what we loaded in the browser is a JavaScript module. So
[28:29.360 --> 28:35.440]  is there some WebAssembly somewhere? Yeah. So you see the script that was import is.js, right?
[28:35.440 --> 28:41.040]  But actually that's a WebAssembly. It's just that the standard, the WebAssembly standard is like,
[28:41.040 --> 28:47.520]  when my team provided, like, when they released the thing, which is in WebAssembly, but it's,
[28:47.520 --> 28:51.680]  the extension is.js. It's a bit confusing, but actually it's in WebAssembly. It's not in JavaScript.
[28:51.680 --> 28:57.840]  It's just how the WebAssembly kind of standard work. You have a JS file somehow after you have,
[28:57.840 --> 29:03.760]  will, you know, then the release, the build, and the source. It become, I thought you guessed.
[29:04.560 --> 29:08.000]  We have time for one more question. If you have one. Yeah, there.
[29:13.520 --> 29:20.160]  Thanks for your talk. Um, does PyScript use any web workers? And if so, how do, can you control them?
[29:20.160 --> 29:27.040]  There's the web. Sorry. Does PyScript use any web workers? Like, does your code run parallel?
[29:27.840 --> 29:33.600]  It's purely in the browser. So, um, if you host everything locally, actually, is, is,
[29:33.600 --> 29:37.440]  is just on the browser. So there's no web worker that communicate with other applications.
[29:38.240 --> 29:42.240]  Yeah.
[29:44.400 --> 29:48.320]  How does it, does it all came in with different browsers or Firefox,
[29:48.320 --> 29:52.000]  Chrome? Because I guess it depends on your, your browser supporting that.
[29:52.000 --> 29:58.400]  Yeah. Now definitely work on Chrome. Uh, Firefox, maybe others. I can't guarantee you.
[29:58.400 --> 30:18.480]  Yeah. Yeah. Yeah. But it's very young, the project. So later it will be more support.