var Component=(()=>{var d=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var g=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),y=(e,n)=>{for(var s in n)l(e,s,{get:n[s],enumerable:!0})},p=(e,n,s,c)=>{if(n&&typeof n=="object"||typeof n=="function")for(let t of u(n))!k.call(e,t)&&t!==s&&l(e,t,{get:()=>n[t],enumerable:!(c=m(n,t))||c.enumerable});return e};var v=(e,n,s)=>(s=e!=null?d(N(e)):{},p(n||!e||!e.__esModule?l(s,"default",{value:e,enumerable:!0}):s,e)),w=e=>p(l({},"__esModule",{value:!0}),e);var r=g((_,o)=>{o.exports=_jsx_runtime});var q={};y(q,{default:()=>b});var a=v(r());function h(e){let n=Object.assign({h2:"h2",a:"a",span:"span",p:"p",ul:"ul",li:"li",pre:"pre",code:"code"},e.components),{Image:s,Ads:c,Embed:t}=n;return c||i("Ads",!0),t||i("Embed",!0),s||i("Image",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(n.h2,{id:"introduction",children:[(0,a.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#introduction",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"Introduction"]}),` `,(0,a.jsx)(n.p,{children:"PyScript is a framework for building rich Python programs in the browser using the HTML interface. similar to javascript, but written in the Python programming language."}),` `,(0,a.jsx)(n.p,{children:"Before we start, I'm going to say in the beginning that PyScript does not replace JavaScript."}),` `,(0,a.jsx)(s,{alt:"Meme about PyScript",src:"/jagad.dev/posts/is-pyscript-going-to-take-the-place-of-javascript/meme_about_pyscript_qw3wgf.gif",width:"720",height:"396"}),` `,(0,a.jsxs)(n.p,{children:["PyScript does not have a lot of features like JavaScript. If we open ",(0,a.jsx)(n.a,{href:"https://pyscript.net/",children:"PyScript | Run Python in your HTML"}),", we will see that Pyscript is very alpha and under heavy development."]}),` `,(0,a.jsx)(n.p,{children:"But it's not fun if we finish there. We will discuss more about PyScript in this post."}),` `,(0,a.jsxs)(n.h2,{id:"pyscript-features",children:[(0,a.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#pyscript-features",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"PyScript Features"]}),` `,(0,a.jsx)(n.p,{children:"The following are some of the PyScript features that can be used:"}),` `,(0,a.jsxs)(n.ul,{children:[` `,(0,a.jsx)(n.li,{children:"Python in the browser: Enable drop-in content, external file hosting, and application hosting without the reliance on server-side configuration"}),` `,(0,a.jsx)(n.li,{children:"Python ecosystem: Run many popular packages of Python and the scientific stack (such as numpy, pandas, scikit-learn, and more)"}),` `,(0,a.jsx)(n.li,{children:"Python with JavaScript: Bi-directional communication between Python and Javascript objects and namespaces"}),` `,(0,a.jsx)(n.li,{children:"Environment management: Allow users to define what packages and files to include for the page code to run"}),` `,(0,a.jsx)(n.li,{children:"Visual application development: Use readily available curated UI components, such as buttons, containers, text boxes, and more"}),` `,(0,a.jsx)(n.li,{children:"Flexible framework: A flexible framework that can be leveraged to create and share new pluggable and extensible components directly in Python"}),` `]}),` `,(0,a.jsxs)(n.h2,{id:"getting-started",children:[(0,a.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#getting-started",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"Getting Started"]}),` `,(0,a.jsxs)(n.p,{children:["To install PyScript it's very easy. You just open the ",(0,a.jsx)(n.a,{href:"https://pyscript.net/",children:"PyScript | Run Python in your HTML"})," and follow the instructions."]}),` `,(0,a.jsx)(s,{alt:"Installation instructions",src:"/jagad.dev/posts/is-pyscript-going-to-take-the-place-of-javascript/installation_jd8dso.png",width:"1104",height:"491"}),` `,(0,a.jsx)(n.p,{children:"PyScript cracked a funny joke \u{1F602}\u{1F602}\u{1F602}"}),` `,(0,a.jsx)(n.p,{children:"By the way, we don't need to install PyScript. We simply insert the following tag into our html."}),` `,(0,a.jsx)(n.pre,{className:"language-html",children:(0,a.jsxs)(n.code,{className:"language-html code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token doctype",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"html"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"lang"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"en",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"head"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"meta"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"charset"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"UTF-8",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"meta"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"http-equiv"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"X-UA-Compatible",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"content"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"IE=edge",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"meta"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"name"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"viewport",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"content"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"width=device-width, initial-scale=1.0",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"title"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"PyScript Playground",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"link"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"rel"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"stylesheet",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"href"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"https://pyscript.net/alpha/pyscript.css",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"script"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"defer"})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"src"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"https://pyscript.net/alpha/pyscript.js",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token script"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"body"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]})]})}),` `,(0,a.jsx)(n.p,{children:"After that, we can open html with a live server extension or just open it in browser by clicking the html file."}),` `,(0,a.jsxs)(n.h2,{id:"pyscript-component",children:[(0,a.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#pyscript-component",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"PyScript Component"]}),` `,(0,a.jsxs)(n.p,{children:["To run PyScript, we need to add the ",(0,a.jsx)(n.code,{children:""})," tag and specify the python code that can be executed within the web page."]}),` `,(0,a.jsxs)(n.p,{children:["for example, We want to print ",(0,a.jsx)(n.code,{children:"hello world"})," in the web page. We can do it like this:"]}),` `,(0,a.jsx)(n.pre,{className:"language-html",children:(0,a.jsxs)(n.code,{className:"language-html code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token doctype",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"html"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"lang"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"en",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"head"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"meta"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"charset"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"UTF-8",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"meta"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"http-equiv"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"X-UA-Compatible",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"content"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"IE=edge",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"meta"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"name"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"viewport",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"content"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"width=device-width, initial-scale=1.0",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"title"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"PyScript Playground",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"link"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"rel"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"stylesheet",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"href"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"https://pyscript.net/alpha/pyscript.css",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"script"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"defer"})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"src"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"https://pyscript.net/alpha/pyscript.js",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token script"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"body"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"py-script"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]})," print('hello world') ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]})]})}),` `,(0,a.jsx)(s,{alt:"Print hello world",src:"/jagad.dev/posts/is-pyscript-going-to-take-the-place-of-javascript/print_hello_world_ko8ndb.png",width:"959",height:"519"}),` `,(0,a.jsxs)(n.h2,{id:"pyscript-with-popular-library",children:[(0,a.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#pyscript-with-popular-library",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"PyScript with Popular Library"]}),` `,(0,a.jsx)(n.p,{children:"We can also use popular library on PyScript. For example, we can use pandas to read csv files."}),` `,(0,a.jsxs)(n.p,{children:["Because we need external Library, we need to declare them in the ",(0,a.jsx)(n.code,{children:""})," tag."]}),` `,(0,a.jsx)(n.pre,{className:"language-html",children:(0,a.jsxs)(n.code,{className:"language-html code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token doctype",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"html"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"lang"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"en",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"head"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"meta"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"charset"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"UTF-8",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"meta"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"http-equiv"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"X-UA-Compatible",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"content"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"IE=edge",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"meta"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"name"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"viewport",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"content"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"width=device-width, initial-scale=1.0",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"title"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"PyScript Playground",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"link"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"rel"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"stylesheet",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"href"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"https://pyscript.net/alpha/pyscript.css",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"script"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"defer"})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"src"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"https://pyscript.net/alpha/pyscript.js",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token script"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"py-env"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]})," - pandas ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"body"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` ..... `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]})]})}),` `,(0,a.jsx)(n.p,{children:"After that, we can use pandas in PyScript code like this:"}),` `,(0,a.jsx)(n.pre,{className:"language-html",children:(0,a.jsxs)(n.code,{className:"language-html code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token doctype",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"html"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"lang"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"en",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"head"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"meta"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"charset"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"UTF-8",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"meta"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"http-equiv"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"X-UA-Compatible",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"content"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"IE=edge",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"meta"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"name"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"viewport",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"content"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"width=device-width, initial-scale=1.0",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"title"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"PyScript Playground",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"link"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"rel"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"stylesheet",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"href"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"https://pyscript.net/alpha/pyscript.css",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"script"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"defer"})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"src"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"https://pyscript.net/alpha/pyscript.js",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token script"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"py-env"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]})," - pandas ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"body"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"py-script"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:` import pandas as pd `}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:` from pyodide.http import open_url `}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:` `}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:` data_training = pd.read_csv(open_url("https://raw.githubusercontent.com/jagadyudha/jagadyudha/main/data_training.csv")) `}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:` data_training.head() `}),(0,a.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]})]})}),` `,(0,a.jsx)(s,{alt:"PyScript with pandas",src:"/jagad.dev/posts/is-pyscript-going-to-take-the-place-of-javascript/PyScript_with_pandas_dxoeu1.png",width:"953",height:"507"}),` `,(0,a.jsx)(n.p,{children:"Not only that, we can use the library sklearn to run machine learning."}),` `,(0,a.jsx)(n.p,{children:"In this case, I want to know use sklearn.naive_bayes"}),` `,(0,a.jsx)(n.pre,{className:"language-html",children:(0,a.jsxs)(n.code,{className:"language-html code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token doctype",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"html"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"lang"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"en",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"head"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"meta"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"charset"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"UTF-8",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"meta"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"http-equiv"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"X-UA-Compatible",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"content"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"IE=edge",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"meta"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"name"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"viewport",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"content"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"width=device-width, initial-scale=1.0",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"title"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"PyScript Playground",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"link"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"rel"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"stylesheet",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"href"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"https://pyscript.net/alpha/pyscript.css",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"script"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"defer"})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"src"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"https://pyscript.net/alpha/pyscript.js",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token script"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"py-env"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:` - pandas `}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:` - scikit-learn `}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:` - numpy `}),(0,a.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"body"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"py-script"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:` import pandas as pd `}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:` from sklearn.model_selection import train_test_split `}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:` from sklearn.naive_bayes import GaussianNB `}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:` from pyodide.http import open_url `}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:` from sklearn.metrics import classification_report `}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:` import numpy as np `}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:` `}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:` data_training = pd.read_csv(open_url("https://raw.githubusercontent.com/jagadyudha/jagadyudha/main/data_training.csv")) `}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:` x = data_training.drop(["Jenis Gangguan"], axis=1) `}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:` y = data_training["Jenis Gangguan"] `}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:` x_train, x_test, y_train, y_test = train_test_split(x, y, test_size=0.18, random_state=45) `}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:` modelnb = GaussianNB() `}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:` nbtrain = modelnb.fit(x_train, y_train) `}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:` y_pred = nbtrain.predict(x_test) `}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:` `}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:` print("Predict :", y_pred) `}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:` print("Actual :", np.array(y_test)) `}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:` `}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:` print(classification_report(y_test, y_pred)) `}),(0,a.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]})]})}),` `,(0,a.jsx)(s,{alt:"PyScript with sklearn",src:"/jagad.dev/posts/is-pyscript-going-to-take-the-place-of-javascript/Pyscript_with_sklearn_uratq8.png",width:"959",height:"524"}),` `,(0,a.jsx)(n.p,{children:"I'm not going to show how to read the data because it's going to take a lot of time. However, we can see that PyScript is also working to run machine learning."}),` `,(0,a.jsx)(c,{}),` `,(0,a.jsxs)(n.h2,{id:"pyrepl-component",children:[(0,a.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#pyrepl-component",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"PyRepl Component"]}),` `,(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:""})," creates a REPL component that is rendered to the page as a code editor and allows users to write executable code."]}),` `,(0,a.jsx)(n.pre,{className:"language-html",children:(0,a.jsxs)(n.code,{className:"language-html code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token doctype",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"html"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"lang"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"en",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"head"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"meta"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"charset"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"UTF-8",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"meta"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"http-equiv"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"X-UA-Compatible",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"content"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"IE=edge",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"meta"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"name"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"viewport",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"content"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"width=device-width, initial-scale=1.0",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"title"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"PyScript Playground",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"link"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"rel"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"stylesheet",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"href"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"https://pyscript.net/alpha/pyscript.css",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"script"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"defer"})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"src"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"https://pyscript.net/alpha/pyscript.js",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token script"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"body"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"py-repl"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"id"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"repl",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"auto-generate"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"true",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"p"]})," ",(0,a.jsxs)(n.span,{className:"token special-attr",children:[(0,a.jsx)(n.span,{className:"token attr-name",children:"style"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),(0,a.jsxs)(n.span,{className:"token value css language-css",children:[(0,a.jsx)(n.span,{className:"token property",children:"margin-left"}),(0,a.jsx)(n.span,{className:"token punctuation",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"30"}),(0,a.jsx)(n.span,{className:"token unit",children:"px"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"shift + enter to run",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]})]})}),` `,(0,a.jsx)(s,{alt:"PyRepl Component",src:"/jagad.dev/posts/is-pyscript-going-to-take-the-place-of-javascript/PyRepl_Component_rpptsk.png",width:"958",height:"517"}),` `,(0,a.jsxs)(n.h2,{id:"play-mario-with-pyscript",children:[(0,a.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#play-mario-with-pyscript",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"Play Mario with PyScript"]}),` `,(0,a.jsxs)(n.p,{children:["PyScript can also be used to run games like Mario Bros. You can check the source code at the following link: ",(0,a.jsx)(n.a,{href:"https://github.com/pyscript/pyscript/tree/main/examples/mario",children:"pyscript/examples/mario at main pyscript/pyscript (github.com)"})]}),` `,(0,a.jsx)(t,{src:"https://www.youtube.com/embed/4BPWRRmX6c4"}),` `,(0,a.jsxs)(n.h2,{id:"conclusion",children:[(0,a.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#conclusion",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"Conclusion"]}),` `,(0,a.jsx)(n.p,{children:"It's too early for PyScript to match JavaScript. In fact, my personal opinion is that it's almost impossible to beat JavaScript."}),` `,(0,a.jsx)(n.p,{children:"Do you think PyScript will beat Javascript? let me know what you think in the comments."})]})}function f(e={}){let{wrapper:n}=e.components||{};return n?(0,a.jsx)(n,Object.assign({},e,{children:(0,a.jsx)(h,e)})):h(e)}var b=f;function i(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return w(q);})(); ;return Component;