PyScript is officially here!🚀 Build web apps with Python & HTML

hi everyone I'm Patrick and welcome back to my channel so one year ago Anaconda announced spy script which allows you to create Rich web applications using only HTML and Python and the team behind Pi script has spent the last year improving the open source project a lot and it grew to almost 16 000 stars on GitHub and now they just announced Pi script.com which is a platform you can use for free that makes it really simple to get started with pi script and here you can code websites directly in your browser so in this video we take a look at the platform and I show you how to use Pi script and we go over all important features and in the end I quickly show you three example websites I built with it just to show you what's possible with pi script I built a data science web app a 2d retro game and a website to chat with jet GPT so let's get started so before we take a look at the pi script.com platform let's take a look at the project itself and the project lives under Pi script.net so don't get confused here and I already created a video about this last year so you can check this out as well but now let's go over the features again very quickly so the project itself is powered by two other projects that are called piodight and webassembly and this allows to run python directly in your browser so you only need to include a link in your HTML file and then you can run python code and it supports many popular python packages especially these scientific Stacks such as numpy pandas and scikit-learn and of course it also allows bi-directional communication with python and JavaScript and yeah it's a very flexible framework and in the end it's just HTML powered with python and in my opinion this is a pretty awesome project so let's take a look at the new Pi script.com platform and then code some example websites so first of course you have to create an account and you can do this for free I already did this so I can sign in so after signing in you see your dashboard with all the projects you have and one thing I want to mention is that right now you have the opportunity to become a Founder so you can support the project and then receive exclusive swag and some more cool benefits but of course this is optional so here you can manage your projects you can create a new one you can edit them and you can also already view the site so each project will be deployed and then you can have a look at the website and share the link with your friends or colleagues so this is super cool for collaboration so let's create a new project and see how this works so this initialized a new project with three files we have a main.pi file an index.html and an empty Pi scriptoml file and as you can see here we get an editor in our browser where we can write our code and on the right side we have a preview of our website so for example if we change the text in here then this will be Auto saved but in order to refresh the page we have to click on run so here you can see the updated output and now let's go over the code so the most important one is the index HTML file and Pi script works by including this script here so this is the latest Pi script.js file and then they also have a pi script CSS file for some styling and the rest of this is normal HTML code so for example here let's add a H1 tag for example and then let's give this a heading so let's say this is a demo tutorial and then again this is auto saved but I have to click on run again and then here you see the updated page so this is already a live website that we can visit for example here we can open this in a new tab and here you can grab the full link that you can share with others and then everyone who visit it's the site can also click on view code here in the bottom right to see how the code works so let's continue with the code here so Pi script adds three major new text that you can now use in HTML the first one is pi config and here you can include a pi script Tama file here you can for example Define some settings and also the packages you want to include we will do this in a moment and the second tag is the pi script tag and here you can directly write the python code in here but it's also cool to separate this away so here we can simply include the main.pi file and then here we can write whatever python code we want and one thing to note is that here we print and by default this will create a new console window with some output so that's why we see this black window here and then the last tag that is added is that you can easily add a pi rapple by saying Pi Ripple and then the closing tag and now if we refresh this then we see we already have a rapple that we can use and now here we can write code on the website so we can say for example a equals 5 and then if we say a and then hit shift enter Then This will be evaluated and so here we have an interactive window on our site with this Pi rapper so now let me show you some of the features you can do with pi script so first let me show you how you can write the pi Ripple also to an output so here let's create a new div for example and here we give the div an ID so we say ID and then we can call this for example Rebel output and then here in our PI reple we can specify the output put and say the output has the same name so this is also the rebel output and now if we run the site again and then again Define some code we say hello equals hello world and then hello and then shift enter Then you see this is now be written to this diff with the rebel output ID the next thing so I already mentioned this is that whenever we print something then by default this is written to a console window that we see here and here we can write any python code we want for example we can import other modules so let's say Imports date time as DT then let's also create a function define show time and here for example let's print the date time dot date today and now if we also call this function so here we say show time and then let's run this I again then you see we also get the current time now in the output the next thing I want to show you is how instead of writing it to the console window we want to write it to an HTML element so let's create a new one for example this time let's use a P tag and then we have to give it an ID I call this today and then in our python code we can say element and this is already included from PI script so we don't have to import this here and then we use the same ID today and then we can call Dot right and then here we want to write date time date today and here we have to be careful because this will now be the pure date time object but we also want to have the string representation so let's convert this to a string and now let's run this again and now you see we have a P tag where we show the output we computed in Python the next thing I want to show you is how we can hand handle click events so this time I already prepared the code so let me simply copy and paste this here so here we create a button and then here we use the pi click attribute and here we use a function name and call this function then here we also have a P tag with an ID where we want to write the output in and then here I included another Pi script um text so you can have multiple ones in one and this time I'm not referencing a file so this time I write it directly in here just to show you that this is also possible so here again we import date time and have a function and now this is the same name current time and then here again we get the element with the current time and then we say element and then write this and now again we have this Pi click so if we run this again then whenever we click on this button this will execute compute the function so you can see the time is updated and it shows the latest time in this P tag the next thing I want to show you is how we can call an API with the requests module so for this let's create another Pi script tag and here we import requests and then in order to make it work with pi script we have to patch it so we have to import piodite HTTP and then call piodight http.patch all and now we can work with requests like we normally do so for example we can say requests.get and then send a get request to this endpoint and in this example we print response.json and now we have to list those two dependencies and we can do this with pi script.toma and here we say packages equals and now as a list here we give it all the required packages so in this case we want requests and then we want piodite Dash HTTP and now when we click run this will be automatically installed for us and now we should see the output in our window and as you can see here we get the Json response so the requests module is working now let me show you how we can pass objects from PI script to JavaScript and vice versa so first let's pass some objects from JavaScript to python so let's write some JavaScript code by including a script so a normal script not a pi script and here we can write JavaScript code so we can also Define a variable for example name equals Patrick and then we can also Define a function by saying function at to numbers and this gets two input variables X and Y and here we simply return X Plus Y and now we want to call those to vary so the variable and the function in Python so for this we can say import JS so this is provided from pyths PI script and now for example we can say print js.name so we can access all the variables and we can also say print js.ed to numbers and now call all the functions with some variables we computed in Python for example here let's hard code this with three and four and now if we run this again and then you see we have some more outputs so we printed the name and we printed the sum of three and four so this is working and now let me show you how to do it the other way around so let's say we have a variable in Python so we call this a underscore python equals and this is a number with the value 10 and now in order to use this in JavaScript for example we can say plus and then we call Pi script dot interpreter dot Global so it has access to all Global variables and then we get the variable with this name a underscore Python and now remember right now the result is 7 and if we also add 10 then let's see if we correctly get 17 and now you can see we get a 17 so this is working and this is how we can access python objects in JavaScript so this one here is the simplest way by simply accessing the global variables there are a few more ways how you can do this but for this I recommend to Simply check out the documentation so these are all the main features I wanted to show you in pi script and now as a last thing let me quickly show you three more example websites that I built so the first one is the ml demo that uses scikit-learn and matplotlib so this one applies a k nearest neighbor classifier to classify and then plot the iris data set so here for example I can select the number of K and then it will run the classifier show the accuracy and then also show the plot so for example if we change k then you should see how the plot changes and also the accuracy so let's quickly go over how this works so in the index HTML we have a few input labels and then here again we use the pi click and every time we click on one of those numbers it will run this function classify and plot and then here we have some P tags where I have an ID and there I will write the output and then we include the main dot pi and here we write our normal python code so this is all done with SK learn and then we use matplotlip and also Seaborn to plot this and one important thing to mention here is that in the end in instead of saying PLT dot show here we say display and then we get displayed the figure and then we reference a Target and we listed the graph area in our index HTML with this ID and then it will write the plot to this element and then of course we also have to define the packages matplotlips I could learn and Seaborn and yeah this is how simply you can bring a fully featured machine learning application to a website with pi script the second Cool website I want to show you is this cool 2D game you can easily build so let me turn off the sound and then you can control this bird here with your keyboard but it's not working in this preview so for this you have to open this in a new tab and I didn't implement this myself this is from one of the pi script maintainers so the way it works is that you again include your Pi script python script and then here in the this demo 10 file it is based on the pixel Library so this is a 2d game engine and then here you simply code your app and then in the end run app.pi and yeah it only takes a few lines of code to have a fully functional 2D game in your browser made with python and the last example I want to show you is how we can build a website to chat with openai's jet GPT so here we have this message box and then here we have the output where it asks what type of chatbot would you like to create and then I can for example say a friendly bot and then click on send and then here we get the text and then it says say hello to your new assistant so I can say hi and now it's calling the open AI API and we get a response so it says hello how can I assist you and then I want to say for example I want to talk about Pi script and then again it's calling the API and we can talk with our or bot and the way it works is that for this we again have to do a small work around because it's not working with the official open AI python SDK at the moment so again we have to do this work around that I mentioned earlier so we have to import requests and then call piodite http.patch all and then we have to send the requests ourselves so here we Define the endpoint that we find in the API documentation and then we send a post request to this endpoint and here we Define for example the model and then send over our messages and then in the index htmls we simply Define a small UI with this chat box and then the button and then in the end we call our PI script main.pi and yeah this is how we can set up open ai's chat GPT with pi script alright so I hope you now have a good overview of the pi script.com platform and how to build websites Python and Pi script so I hope you enjoyed this tutorial let me know in the comments if you like Pi script and if you want to try it yourself and then I hope to see you in the next video bye

Channel: Patrick Loeber

Views: 221,093

Keywords: Python

Id: owopzp436jM

Length: 17min 9sec (1029 seconds)

Published: Tue Apr 18 2023