last weekend there was a huge
announcement for the python and web
development world this is pi script
which allows you to run python in your
html code and this is super simple to
set up so this is a super exciting
project and today we have a first look
at it pi script gets developed by the
people from anaconda and now before i
show you how to use it let's quickly go
over the features that pi script offers
first of all it allows us to run python
in the browser so it enables drop in
content external file hosting and
application hosting without the reliance
on server side configuration so this is
just html in the end then we can use the
whole python ecosystem so of course we
can use all core modules but we can also
run many popular packages of python and
the scientific stack such as numpy
pandas scikit-learn and more this is
super cool for machine learning and data
science websites for example we can very
easily show matplotlib in the browser
then we can combine it with javascript
so we have a bi-directional
communication between python and
javascript objects and with this we can
for example very easily run a mario game
in the browser which i show you at the
end then we get environment management
so it allows users to define what
packages and files to include we get a
visual application development so we can
use readily available curated ui
components such as buttons containers
text boxes and more and we have a very
flexible framework so a flexible
framework that can be leveraged to
create and share new pluggable and
extensible components directly in python
so this all sounds super exciting and
now let's have a look at how to use it
so let's have a look at how to get
started so we could download it and
compile it ourselves so for this we need
node.js or we can simply click on
install and then we get just kidding you
don't need to install anything so we
just have to include one css file and
one javascript file and this is hosted
for us
so we can copy this and then here i have
a basic html code and in the head
section we now paste this in
so here we have the link to the style
sheet which is a css file and then we
include the script so this is pi script
dot js
and now if we go back to the website we
can grab this example script
so now in the body here we can start the
pi script element and now here we can
have any python
any python code that we want so for
example here we say print now you can
and then we have the closing tags
and this is all that we need so here i
have visual studio code and i have the
live server so now i can click on go
live
and this should start a website and now
here we have the
pi script tests and now you can so it's
printing what i print here so this is
how to use it now let's have a look at a
few more examples and you also find them
on the official github repository so
this is open source and there you find a
cool getting started markdown file that
you can check out
so now let's insert another pi script
element and here we can define a
function for example where we compute pi
then we return pi then we call this
function and then again we print the
result so now let's save this and then
go back to the website and if we refresh
this then here we see pi is
approximately
3.142 so this works as well so here are
a few more examples so this is how we
can set a html element afterwards so we
can give it a id for example today and
then in a pi script we say
pyscript.write
and then we use this id and here we
write the date of today
so then here we
again write the variable of pi which is
defined here
and for this we use a diff with the id
pi and we also give it a class for
styling so for this i included another
script which is using bootstrap so now
this is a class from bootstrap
and then let's also see how we can use
matplotlib and how we can use a local
file so in order to use this in the top
we define the pyent and here we define
all the libraries we need so the
scientific libraries like numpy and
matlab clip are already included so we
just have to list this here
then we can list the paths and here we
can list all the files that we want to
include so here i created a local file
data dot pi that is using numpy and is
creating two random arrays
so
now um let's again create another um pi
script
and here we have a new div with the id
plot and here we say output is plot so
this is where the plot will appear
then we can import the libraries like in
normal code we also import our function
from the local data file then we create
our data and then we say plt dot
subplots and and do what we want with
matplotlib and then here we simply list
the figure and now if we save this and
go back to the file
then this might take a few moments so
it's still not the fastest but now here
it works so here we have again this pie
with a different styling and here we
have our mud plot lip plot so yeah super
cool now i want to show you one more
cool feature and this is how easily we
can use a rebel on our website
so for this we just include this pi
rebel element and give it a id and then
we can say auto generate equals true and
if we refresh the website then here we
have a wrapper and here we can run any
python code that we want for example
again print hello world and then i press
shift enter and then it gets evaluated
and here we see the output for example i
can also import a module and then print
um let's say random rand in between 1
and 10 and then again shift enter and
then here we have an output so this is
super cool how easy we have a dynamic
rapple on the website so how does this
work for this i recommend to visit the
anaconda engineering blog so in this
post they go a little bit about what and
why
and then they go over the stack they use
and basically they build on top of an
existing ecosystem the main magic behind
this is web assembly so if you don't
know what web assembly is then i'll have
a link below the video so you can learn
more about this then they use emscripten
which is an open source compiler
toolchain to web assembly and pyodide
which is python implementations compiled
to webassembly this is another cool open
source project that makes all of this
possible so shout out to them
and yeah so this is in a very early
stage and so is pi script so this is
still in alpha so very early so it's
exciting what will come in the next
weeks but yeah
let me know in the comments what you
think about this and now finally let's
play mario
so yeah mario also is available in the
pi script repository under the example
so here you can check this out and here
you see that it combines the pi script
python code with javascript files this
is super cool let me know if you also
check it out and then i hope to see you
in the next video bye