livecode-static/docs/languages/python-wasm/index.html

<!doctype html><html lang=en dir=ltr class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-languages/python-wasm" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.7.0"><title data-rh=true>Python (Wasm) | LiveCodes</title><meta data-rh=true name=viewport content="width=device-width, initial-scale=1.0"><meta data-rh=true name=twitter:card content=summary_large_image><meta data-rh=true property=og:url content=https://livecodes.io/docs/languages/python-wasm><meta data-rh=true property=og:locale content=en><meta data-rh=true name=docusaurus_locale content=en><meta data-rh=true name=docsearch:language content=en><meta data-rh=true name=docusaurus_version content=current><meta data-rh=true name=docusaurus_tag content=docs-default-current><meta data-rh=true name=docsearch:version content=current><meta data-rh=true name=docsearch:docusaurus_tag content=docs-default-current><meta data-rh=true property=og:title content="Python (Wasm) | LiveCodes"><meta data-rh=true name=description content="Pyodide is a Python distribution for the browser and Node.js based on WebAssembly."><meta data-rh=true property=og:description content="Pyodide is a Python distribution for the browser and Node.js based on WebAssembly."><link data-rh=true rel=icon href=/docs/img/favicon.ico><link data-rh=true rel=canonical href=https://livecodes.io/docs/languages/python-wasm><link data-rh=true rel=alternate href=https://livecodes.io/docs/languages/python-wasm hreflang=en><link data-rh=true rel=alternate href=https://livecodes.io/docs/languages/python-wasm hreflang=x-default><link data-rh=true rel=preconnect href=https://H9Z2PKYS80-dsn.algolia.net crossorigin=anonymous><link rel=search type=application/opensearchdescription+xml title=LiveCodes href=/docs/opensearch.xml><script type=ea-placeholder id=ea-placeholder data-ea-publisher=livecodesio data-ea-manual=true></script><script src=https://unpkg.com/prettier@2.4.1/standalone.js async></script><script src=https://unpkg.com/prettier@2.4.1/parser-babel.js async></script><script src=https://unpkg.com/prettier@2.4.1/parser-html.js async></script><script src=https://media.ethicalads.io/media/client/ethicalads.min.js async defer></script><link rel=stylesheet href=/docs/assets/css/styles.61e3dfbf.css><script src=/docs/assets/js/runtime~main.e1bd469b.js defer></script><script src=/docs/assets/js/main.72616d8f.js defer></script><body class=navigation-with-keyboard><script>!function(){var t,e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t=null!==e?e:"light",document.documentElement.setAttribute("data-theme",t)}(),function(){try{for(var[t,e]of new URLSearchParams(window.location.search).entries())if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id=__docusaurus><link rel=preload as=image href=/docs/img/livecodes-logo.svg><div role=region aria-label="Skip to main content"><a class=skipToContent_fXgn href=#__docusaurus_skipToContent_fallback>Skip to main content</a></div><nav aria-label=Main class="navbar navbar--fixed-top"><div class=navbar__inner><div class=navbar__items><button aria-label="Toggle navigation bar" aria-expanded=false class="navbar__toggle clean-btn" type=button><svg width=30 height=30 viewBox="0 0 30 30" aria-hidden=true><path stroke=currentColor stroke-linecap=round stroke-miterlimit=10 stroke-width=2 d="M4 7h22M4 15h22M4 23h22"/></svg></button><a class=navbar__brand href=/docs/><div class=navbar__logo><img src=/docs/img/livecodes-logo.svg alt="LiveCodes Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src=/docs/img/livecodes-logo.svg alt="LiveCodes Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate">LiveCodes</b></a><a aria-current=page class="navbar__item navbar__link navbar__link--active" href=/docs/overview>Docs</a><a class="navbar__item navbar__link" href=/docs/sdk>SDK</a><a href=https://blog.livecodes.io target=_self rel="noopener noreferrer" class="navbar__item navbar__link">Blog<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><a href=/docs/../stories target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">Storybook<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></div><div class="navbar__items navbar__items--right"><a href=/docs/../ target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">App<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><a href=https://twitter.com/livecodes_io target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">𝕏<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><a href=https://github.com/live-codes/livecodes target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type=button disabled title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live=polite aria-pressed=false><svg viewBox="0 0 24 24" width=24 height=24 class=lightToggleIcon_pyhR><path fill=currentColor d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 class=darkToggleIcon_wfgR><path fill=currentColor d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg></button></div><div class=navbarSearchContainer_Bca1><button type=button class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><span class=DocSearch-Button-Container><svg width=20 height=20 class=DocSearch-Search-Icon viewBox="0 0 20 20" aria-hidden=true><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke=currentColor fill=none fill-rule=evenodd stroke-linecap=round stroke-linejoin=round /></svg><span class=DocSearch-Button-Placeholder>Search</span></span><span class=DocSearch-Button-Keys></span></button></div></div></div><div role=presentation class=navbar-sidebar__backdrop></div></nav><div id=__docusaurus_skipToContent_fallback class="main-wrapper mainWrapper_z2l0"><div class=docsWrapper_hBAB><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type=button></button><div class=docRoot_UBD9><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class=sidebarViewport_aRkj><div class=sidebar_njMd><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--active" href=/docs/overview>Docs</a></div><ul style=display:block;overflow:visible;height:auto class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/why>Why Another Playground?</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/getting-started>Getting Started</a><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" tabindex=0 href=/docs/features/>Features</a><button aria-label="Expand sidebar category 'Features'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" tabindex=0 href=/docs/configuration/>Configuration</a><button aria-label="Expand sidebar category 'Configuration'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" tabindex=0 href=/docs/sdk/>SDK</a><button aria-label="Expand sidebar category 'SDK'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" tabindex=0 href=/docs/advanced/>Advanced</a><button aria-label="Expand sidebar category 'Advanced'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--active" tabindex=0 href=/docs/languages/>Languages</a><button aria-label="Collapse sidebar category 'Languages'" aria-expanded=true type=button class="clean-btn menu__caret"></button></div><ul style=display:block;overflow:visible;height:auto class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/art-template>art-template</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/asciidoc>AsciiDoc</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/assemblyscript>AssemblyScript</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/astro>Astro</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/autoprefixer>Autoprefixer</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/babel>Babel</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/bbcode>BBCode</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/blockly>Blockly</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/civet>Civet</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/clio>Clio</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/clojurescript>ClojureScript</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/coffeescript>CoffeeScript</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/commonlisp>Common Lisp</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/cpp-wasm>C/C++ (Wasm)</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/cpp>C++</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/csharp-wasm>C# (Wasm)</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/css>CSS</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/cssmodules>CSS Modules</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/cssnano>cssnano</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/diagrams>Diagrams</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/dot>doT</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/ejs>EJS</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/eta>Eta</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/fennel>Fennel</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/flow>Flow</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/gleam>Gleam</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/go>Go (Golang)</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/haml>Haml</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/handlebars>Handlebars</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/html>HTML</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/imba>Imba</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/java>Java</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/javascript>JavaScript</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/jinja>Jinja</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/jsx>JSX</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/julia>Julia</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/less>Less</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/lightningcss>Lightning CSS</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/liquid>Liquid</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/livescript>LiveScript</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/lua-wasm>Lua (Wasm)</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/lua>Lua</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/malina>Malina.js</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/markdown>Markdown</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/mdx>MDX</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/mjml>MJML</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/mustache>Mustache</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/nunjucks>Nunjucks</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/ocaml>OCaml</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/perl>Perl</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/php-wasm>PHP (Wasm)</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/php>PHP</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/postcss>PostCSS</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/postcssImportUrl>Import Url</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/postcssPresetEnv>Preset Env</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/postgresql>PostgreSQL</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/prolog>Prolog</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/pug>Pug</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/purgecss>PurgeCSS</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link menu__link--active" aria-current=page tabindex=0 href=/docs/languages/python-wasm>Python (Wasm)</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/python>Python</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/r>R</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/react-native-tsx>React Native (TSX)</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/react-native>React Native</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/react-tsx>React (TSX)</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/react>React</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/reason>Reason</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/rescript>ReScript</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/richtext>Rich Text Editor</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/riot>Riot.js</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/ruby-wasm>Ruby (Wasm)</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/ruby>Ruby</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/sass>Sass</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/scheme>Scheme</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/scss>SCSS</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/solid>Solid</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/solid.tsx>Solid (TS)</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/sql>SQL (SQLite)</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/stencil>Stencil</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/stylis>Stylis</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/stylus>Stylus</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/sucrase>Sucrase</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/svelte>Svelte</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/tailwindcss>Tailwind CSS</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/tcl>Tcl</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/teal>Teal</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/tokencss>Token CSS</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/tsx>TSX</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/twig>Twig</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/typescript>TypeScript</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/unocss>UnoCSS</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/vento>Vento</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/vue>Vue SFC</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/vue2>Vue 2 SFC</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/wat>WebAssembly Text</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/windicss>Windi CSS</a></ul><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/bookmarklet>Bookmarklet</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/gh-action>GitHub Action ⚡</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/markdown-to-livecodes>Markdown to LiveCodes</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/contribution>Contribution</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/credits>Credits</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/license>License</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/sponsor>Sponsor</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/contact>Contact</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/about>About us</a></ul></ul></nav><button type=button title="Collapse sidebar" aria-label="Collapse sidebar" class="button button--secondary button--outline collapseSidebarButton_PEFL"><svg width=20 height=20 aria-hidden=true class=collapseSidebarButtonIcon_kv0_><g fill=#7a7a7a><path d="M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0"/><path d="M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0"/></g></svg></button></div></div></aside><main class=docMainContainer_TBSr><div class="container padding-top--md padding-bottom--lg"><div class=row><div class="col docItemCol_z5aJ"><div class=docItemContainer_c0TR><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label=Breadcrumbs><ul class=breadcrumbs itemscope itemtype=https://schema.org/BreadcrumbList><li class=breadcrumbs__item><a aria-label="Home page" class=breadcrumbs__link href=/docs/><svg viewBox="0 0 24 24" class=breadcrumbHomeIcon_YNFT><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill=currentColor /></svg></a><li itemscope itemprop=itemListElement itemtype=https://schema.org/ListItem class=breadcrumbs__item><a class=breadcrumbs__link itemprop=item href=/docs/overview><span itemprop=name>Docs</span></a><meta itemprop=position content=1><li itemscope itemprop=itemListElement itemtype=https://schema.org/ListItem class=breadcrumbs__item><a class=breadcrumbs__link itemprop=item href=/docs/languages/><span itemprop=name>Languages</span></a><meta itemprop=position content=2><li itemscope itemprop=itemListElement itemtype=https://schema.org/ListItem class="breadcrumbs__item breadcrumbs__item--active"><span class=breadcrumbs__link itemprop=name>Python (Wasm)</span><meta itemprop=position content=3></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type=button class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Python (Wasm)</h1><div class="custom-content custom-content-header content_lMOZ undefined"><div data-ea-publisher=livecodesio data-ea-type=image class=horizontal data-ea-manual=true></div></div></header>
<!-- -->
<p><a href=https://pyodide.org target=_blank rel="noopener noreferrer">Pyodide</a> is a <a href=https://www.python.org/ target=_blank rel="noopener noreferrer">Python</a> distribution for the browser and Node.js based on <a href=https://webassembly.org/ target=_blank rel="noopener noreferrer">WebAssembly</a>.</p>
<blockquote>
<p>Pyodide makes it possible to install and run Python packages in the browser with <a href=https://micropip.pyodide.org target=_blank rel="noopener noreferrer">micropip</a>. Any pure Python package with a wheel available on PyPI is supported. Many packages with C extensions have also been ported for use with Pyodide. These include many general-purpose packages such as regex, pyyaml, lxml and scientific Python packages including numpy, pandas, scipy, matplotlib, and scikit-learn.</p>
<p><a href=https://pyodide.org target=_blank rel="noopener noreferrer">https://pyodide.org</a></p>
</blockquote>
<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class=admonitionHeading_Gvgb><span class=admonitionIcon_Rf37><svg viewBox="0 0 14 16"><path fill-rule=evenodd d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"/></svg></span>Note</div><div class=admonitionContent_BuS1><p>Pyodide is a port of <a href=https://github.com/python/cpython target=_blank rel="noopener noreferrer">CPython</a> to WebAssembly/Emscripten. This matches the behavior of the official Python interpreter and allows importing many Python packages. However, the full Python interpreter compiled to WebAssembly needs to be downloaded in the result page.<p>If you do not need to import external packages, you may want to use the lighter-weight <a href=/docs/languages/python>Python interpreter written in JavaScript</a>.</div></div>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=usage>Usage<a href=#usage class=hash-link aria-label="Direct link to Usage" title="Direct link to Usage"></a></h2>
<p>Using Pyodide allows running Python code in the browser. There is no server required to run the code and no need to install Python or explicitly install packages. Packages imported in code are automatically loaded using <a href=https://micropip.pyodide.org target=_blank rel="noopener noreferrer">micropip</a>.</p>
<p>In addition, since the Python code is running on the client-side, it has access to the <a href=#javascript-interoperability>JavaScript scope</a>, including the page DOM and browser APIs. See the <a href=#starter-template>starter template</a> for an example.</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=loading-modules>Loading Modules<a href=#loading-modules class=hash-link aria-label="Direct link to Loading Modules" title="Direct link to Loading Modules"></a></h3>
<p>Most of the modules in the Python standard library and many external packages can be used directly without explicit installs.</p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=standard-library>Standard Library<a href=#standard-library class=hash-link aria-label="Direct link to Standard Library" title="Direct link to Standard Library"></a></h4>
<p>Most of the Python standard library is functional, except for the modules <a href=https://pyodide.org/en/stable/usage/wasm-constraints.html target=_blank rel="noopener noreferrer">listed here</a>.</p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=external-packages>External Packages<a href=#external-packages class=hash-link aria-label="Direct link to External Packages" title="Direct link to External Packages"></a></h4>
<p>Pyodide allows using many external packages (all pure Python packages on PyPI and many general-purpose and scientific <a href=https://pyodide.org/en/stable/usage/packages-in-pyodide.html target=_blank rel="noopener noreferrer">packages built in Pyodide</a>).</p>
<p>Most of the time, a <a href=https://packaging.python.org/en/latest/discussions/distribution-package-vs-import-package/ target=_blank rel="noopener noreferrer">distribution package provides one single import package</a> (or non-package module), with a matching name. For example, <code>pip install numpy</code> lets you <code>import numpy</code>. In these cases, modules can just be imported in code without the need for any explicit installs. The modules are automatically loaded using <a href=https://micropip.pyodide.org target=_blank rel="noopener noreferrer">micropip</a>.</p>
<p>Example:</p>
<!-- -->
<div style=margin-bottom:30px class=""><a href="https://livecodes.io/#params=N4IgDgng9gJgljApiAXCOBbMUBOAXAAgGcA7KAdwCMBDAG1qL0Qw0RwB0THnWcCBeYmSp0GTFmwB03CTgAUAckQkA5rThEAFgoCUnMDjgk8cmb2niA6rhhFFKqAQeIiTqEZVuSiBdLDqTHSDOEAAaEFpqVQBXahUXVHBoeCQwkABjKC4oWmQ0ADNo%2BjTMrDhcmESybxAAXyA" target=_blank rel=noreferrer>Run in LiveCodes<svg width=12 height=12 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_node_modules-@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module style=margin-left:4px><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></div>
<p>However, modules with different import names (e.g. <code>pkg_resources</code> module from <code>setuptools</code> package) need to be explicitly installed using <a href=https://micropip.pyodide.org target=_blank rel="noopener noreferrer">micropip</a>.</p>
<p>Example:</p>
<!-- -->
<div style=margin-bottom:30px class=""><a href="https://livecodes.io/#params=N4IgDgng9gJgljApiAXCOBbMUBOAXAAgzgGMcow4wAdAOwEMB3euQ4siqgOjloGc89ADZCAFNRB9EeAK5g8UKEL4SAlHTqZs%2BAmADWAcwD6ORHygycJM3TA5eeUfuOnzl63y4HpR%2BAPsARjJ4cFC04pLScgpKKiCqXABuiDh8obTqtCAANCBC9LQGMvTefKjg0PBIOSAkYeZCyGgAZjIiNXVYcI0w5bRhyAC%2BQA" target=_blank rel=noreferrer>Run in LiveCodes<svg width=12 height=12 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_node_modules-@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module style=margin-left:4px><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></div>
<p>In addition, <a href=https://micropip.pyodide.org target=_blank rel="noopener noreferrer">micropip</a> can be used to load external packages from custom URLs. See <a href=https://micropip.pyodide.org/en/stable/project/usage.html#examples target=_blank rel="noopener noreferrer">examples</a>.</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=javascript-interoperability>JavaScript Interoperability<a href=#javascript-interoperability class=hash-link aria-label="Direct link to JavaScript Interoperability" title="Direct link to JavaScript Interoperability"></a></h3>
<p>The JavaScript scope can be accessed from Python using the <code>js</code> module.</p>
<p>See Pyodide documentations about <a href=https://pyodide.org/en/stable/usage/quickstart.html#accessing-javascript-scope-from-python target=_blank rel="noopener noreferrer">accessing JavaScript scope from Python</a> and <a href=https://pyodide.org/en/stable/usage/type-conversions.html target=_blank rel="noopener noreferrer">type translations</a> for more information.</p>
<p>Check the <a href=#starter-template>starter template</a> for an example.</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=language-info>Language Info<a href=#language-info class=hash-link aria-label="Direct link to Language Info" title="Direct link to Language Info"></a></h2>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=name>Name<a href=#name class=hash-link aria-label="Direct link to Name" title="Direct link to Name"></a></h3>
<p><code>python-wasm</code></p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=extensions>Extensions<a href=#extensions class=hash-link aria-label="Direct link to Extensions" title="Direct link to Extensions"></a></h3>
<p><code>.py3</code>, <code>.wasm.py</code></p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=aliases>Aliases<a href=#aliases class=hash-link aria-label="Direct link to Aliases" title="Direct link to Aliases"></a></h3>
<p><code>pyodide</code>, <code>py-wasm</code>, <code>pythonwasm</code>, <code>pywasm</code></p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=editor>Editor<a href=#editor class=hash-link aria-label="Direct link to Editor" title="Direct link to Editor"></a></h3>
<p><code>script</code></p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=compiler>Compiler<a href=#compiler class=hash-link aria-label="Direct link to Compiler" title="Direct link to Compiler"></a></h2>
<p><a href=https://pyodide.org target=_blank rel="noopener noreferrer">Pyodide</a></p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=version>Version<a href=#version class=hash-link aria-label="Direct link to Version" title="Direct link to Version"></a></h3>
<p>Pyodide v0.25.1, running Python v3.11.3</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=code-formatting>Code Formatting<a href=#code-formatting class=hash-link aria-label="Direct link to Code Formatting" title="Direct link to Code Formatting"></a></h2>
<p>Not supported.</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=live-reload>Live Reload<a href=#live-reload class=hash-link aria-label="Direct link to Live Reload" title="Direct link to Live Reload"></a></h2>
<p>By default, when code is updated, the Pyodide environment is re-used while the global variables are reset. This behavior is used for performance reasons. However, in order to fully reload Pyodide and start a new environment, insert this comment in the code:</p>
<div class="language-python codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-python codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token comment" style=color:#999988;font-style:italic># __livecodes_reload__</span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
<p>Think of this like restarting the kernel in Jupyter notebooks.</p>
<p>This comment can be added in the <a href=/docs/configuration/configuration-object#markup><code>hiddenContent</code> property of the editor</a> for embedded playgrounds.</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=example-usage>Example Usage<a href=#example-usage class=hash-link aria-label="Direct link to Example Usage" title="Direct link to Example Usage"></a></h2>
<!-- -->
<div class="container_Egsj undefined" style=height:80vh data-height=80vh></div><details class="alert alert--info details_iMJ2 details_sGeq" data-collapsed=true style="height:3.7rem;overflow:hidden;will-change:height;transition:height 250ms ease-in-out 0s;margin:1em 0"><summary>show code</summary><div style=display:block;overflow:hidden><div class=collapsibleContent_AEyV><div class="tabs-container tabList__CuJ"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_LNqP tabs__item--active">JS<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">TS<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">React<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Vue<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_LNqP">Svelte</ul><div class=margin-top--md><div role=tabpanel class=tabItem_Ymn6><div class="language-js codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-js codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#393A34>{</span><span class="token imports"> createPlayground </span><span class="token imports punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain">  </span><span class="token string-property property" style=color:#36acaa>"params"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain">    </span><span class="token string-property property" style=color:#36acaa>"python-wasm"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"# From: https://github.com/TheAlgorithms/Python\n# License: https://github.com/TheAlgorithms/Python/blob/master/LICENSE.mdx\n\n\"\"\"\nImplementation of a basic regression decision tree.\nInput data set: The input data set must be 1-dimensional with continuous labels.\nOutput: The decision tree maps a real number input to a real number output.\n\"\"\"\nimport numpy as np\n\n\nclass DecisionTree:\n    def __init__(self, depth=5, min_leaf_size=5):\n        self.depth = depth\n        self.decision_boundary = 0\n        self.left = None\n        self.right = None\n        self.min_leaf_size = min_leaf_size\n        self.prediction = None\n\n    def mean_squared_error(self, labels, prediction):\n        \"\"\"\n        mean_squared_error:\n        @param labels: a one dimensional numpy array\n        @param prediction: a floating point value\n        return value: mean_squared_error calculates the error if prediction is used to\n            estimate the labels\n        >>> tester = DecisionTree()\n        >>> test_labels = np.array([1,2,3,4,5,6,7,8,9,10])\n        >>> test_prediction = float(6)\n        >>> tester.mean_squared_error(test_labels, test_prediction) == (\n        ...     TestDecisionTree.helper_mean_squared_error_test(test_labels,\n        ...         test_prediction))\n        True\n        >>> test_labels = np.array([1,2,3])\n        >>> test_prediction = float(2)\n        >>> tester.mean_squared_error(test_labels, test_prediction) == (\n        ...     TestDecisionTree.helper_mean_squared_error_test(test_labels,\n        ...         test_prediction))\n        True\n        \"\"\"\n        if labels.ndim != 1:\n            print(\"Error: Input labels must be one dimensional\")\n\n        return np.mean((labels - prediction) ** 2)\n\n    def train(self, x, y):\n        \"\"\"\n        train:\n        @param x: a one dimensional numpy array\n        @param y: a one dimensional numpy array.\n        The contents of y are the labels for the corresponding X values\n\n        train does not have a return value\n        \"\"\"\n\n        \"\"\"\n        this section is to check that the inputs conform to our dimensionality\n        constraints\n        \"\"\"\n        if x.ndim != 1:\n            print(\"Error: Input data set must be one dimensional\")\n            return\n        if len(x) != len(y):\n            print(\"Error: X and y have different lengths\")\n            return\n        if y.ndim != 1:\n            print(\"Error: Data set labels must be one dimensional\")\n            return\n\n        if len(x) &lt; 2 * self.min_leaf_size:\n            self.prediction = np.mean(y)\n            return\n\n        if self.depth == 1:\n            self.prediction = np.mean(y)\n            return\n\n        best_split = 0\n        min_error = self.mean_squared_error(x, np.mean(y)) * 2\n\n        \"\"\"\n        loop over all possible splits for the decision tree. find the best split.\n        if no split exists that is less than 2 * error for the entire array\n        then the data set is not split and the average for the entire array is used as\n        the predictor\n        \"\"\"\n        for i in range(len(x)):\n            if len(x[:i]) &lt; self.min_leaf_size:\n                continue\n            elif len(x[i:]) &lt; self.min_leaf_size:\n                continue\n            else:\n                error_left = self.mean_squared_error(x[:i], np.mean(y[:i]))\n                error_right = self.mean_squared_error(x[i:], np.mean(y[i:]))\n                error = error_left + error_right\n                if error &lt; min_error:\n                    best_split = i\n                    min_error = error\n\n        if best_split != 0:\n            left_x = x[:best_split]\n            left_y = y[:best_split]\n            right_x = x[best_split:]\n            right_y = y[best_split:]\n\n            self.decision_boundary = x[best_split]\n            self.left = DecisionTree(\n                depth=self.depth - 1, min_leaf_size=self.min_leaf_size\n            )\n            self.right = DecisionTree(\n                depth=self.depth - 1, min_leaf_size=self.min_leaf_size\n            )\n            self.left.train(left_x, left_y)\n            self.right.train(right_x, right_y)\n        else:\n            self.prediction = np.mean(y)\n\n        return\n\n    def predict(self, x):\n        \"\"\"\n        predict:\n        @param x: a floating point value to predict the label of\n        the prediction function works by recursively calling the predict function\n        of the appropriate subtrees based on the tree's decision boundary\n        \"\"\"\n        if self.prediction is not None:\n            return self.prediction\n        elif self.left or self.right is not None:\n            if x >= self.decision_boundary:\n                return self.right.predict(x)\n            else:\n                return self.left.predict(x)\n        else:\n            print(\"Error: Decision tree not yet trained\")\n            return None\n\n\nclass TestDecisionTree:\n    \"\"\"Decision Tres test class\"\"\"\n\n    @staticmethod\n    def helper_mean_squared_error_test(labels, prediction):\n        \"\"\"\n        helper_mean_squared_error_test:\n        @param labels: a one dimensional numpy array\n        @param prediction: a floating point value\n        return value: helper_mean_squared_error_test calculates the mean squared error\n        \"\"\"\n        squared_error_sum = float(0)\n        for label in labels:\n            squared_error_sum += (label - prediction) ** 2\n\n        return float(squared_error_sum / labels.size)\n\n\ndef main():\n    \"\"\"\n    In this demonstration we're generating a sample data set from the sin function in\n    numpy.  We then train a decision tree on the data set and use the decision tree to\n    predict the label of 10 different test values. Then the mean squared error over\n    this test is displayed.\n    \"\"\"\n    x = np.arange(-1.0, 1.0, 0.005)\n    y = np.sin(x)\n\n    tree = DecisionTree(depth=10, min_leaf_size=10)\n    tree.train(x, y)\n\n    test_cases = (np.random.rand(10) * 2) - 1\n    predictions = np.array([tree.predict(x) for x in test_cases])\n    avg_error = np.mean((predictions - test_cases) ** 2)\n\n    print(\"Test values: \" + str(test_cases))\n    print(\"Predictions: \" + str(predictions))\n    print(\"Average error: \" + str(avg_error))\n\n\nif __name__ == \"__main__\":\n    main()\n    import doctest\n    doctest.testmod(name=\"mean_squarred_error\", verbose=True)\n"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain">    </span><span class="token string-property property" style=color:#36acaa>"languages"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"pyodide"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain">    </span><span class="token string-property property" style=color:#36acaa>"console"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"full"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain">    </span><span class="token string-property property" style=color:#36acaa>"compiled"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"none"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain">  </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token function" style=color:#d73a49>createPlayground</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'#container'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> options</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword" style=color:#00009f>import</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"> createPlayground</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>type</span><span class="token plain"> </span><span class="token class-name">EmbedOptions</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> EmbedOptions </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain">  </span><span class="token string-property property" style=color:#36acaa>"params"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain">    </span><span class="token string-property property" style=color:#36acaa>"python-wasm"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"# From: https://github.com/TheAlgorithms/Python\n# License: https://github.com/TheAlgorithms/Python/blob/master/LICENSE.mdx\n\n\"\"\"\nImplementation of a basic regression decision tree.\nInput data set: The input data set must be 1-dimensional with continuous labels.\nOutput: The decision tree maps a real number input to a real number output.\n\"\"\"\nimport numpy as np\n\n\nclass DecisionTree:\n    def __init__(self, depth=5, min_leaf_size=5):\n        self.depth = depth\n        self.decision_boundary = 0\n        self.left = None\n        self.right = None\n        self.min_leaf_size = min_leaf_size\n        self.prediction = None\n\n    def mean_squared_error(self, labels, prediction):\n        \"\"\"\n        mean_squared_error:\n        @param labels: a one dimensional numpy array\n        @param prediction: a floating point value\n        return value: mean_squared_error calculates the error if prediction is used to\n            estimate the labels\n        >>> tester = DecisionTree()\n        >>> test_labels = np.array([1,2,3,4,5,6,7,8,9,10])\n        >>> test_prediction = float(6)\n        >>> tester.mean_squared_error(test_labels, test_prediction) == (\n        ...     TestDecisionTree.helper_mean_squared_error_test(test_labels,\n        ...         test_prediction))\n        True\n        >>> test_labels = np.array([1,2,3])\n        >>> test_prediction = float(2)\n        >>> tester.mean_squared_error(test_labels, test_prediction) == (\n        ...     TestDecisionTree.helper_mean_squared_error_test(test_labels,\n        ...         test_prediction))\n        True\n        \"\"\"\n        if labels.ndim != 1:\n            print(\"Error: Input labels must be one dimensional\")\n\n        return np.mean((labels - prediction) ** 2)\n\n    def train(self, x, y):\n        \"\"\"\n        train:\n        @param x: a one dimensional numpy array\n        @param y: a one dimensional numpy array.\n        The contents of y are the labels for the corresponding X values\n\n        train does not have a return value\n        \"\"\"\n\n        \"\"\"\n        this section is to check that the inputs conform to our dimensionality\n        constraints\n        \"\"\"\n        if x.ndim != 1:\n            print(\"Error: Input data set must be one dimensional\")\n            return\n        if len(x) != len(y):\n            print(\"Error: X and y have different lengths\")\n            return\n        if y.ndim != 1:\n            print(\"Error: Data set labels must be one dimensional\")\n            return\n\n        if len(x) &lt; 2 * self.min_leaf_size:\n            self.prediction = np.mean(y)\n            return\n\n        if self.depth == 1:\n            self.prediction = np.mean(y)\n            return\n\n        best_split = 0\n        min_error = self.mean_squared_error(x, np.mean(y)) * 2\n\n        \"\"\"\n        loop over all possible splits for the decision tree. find the best split.\n        if no split exists that is less than 2 * error for the entire array\n        then the data set is not split and the average for the entire array is used as\n        the predictor\n        \"\"\"\n        for i in range(len(x)):\n            if len(x[:i]) &lt; self.min_leaf_size:\n                continue\n            elif len(x[i:]) &lt; self.min_leaf_size:\n                continue\n            else:\n                error_left = self.mean_squared_error(x[:i], np.mean(y[:i]))\n                error_right = self.mean_squared_error(x[i:], np.mean(y[i:]))\n                error = error_left + error_right\n                if error &lt; min_error:\n                    best_split = i\n                    min_error = error\n\n        if best_split != 0:\n            left_x = x[:best_split]\n            left_y = y[:best_split]\n            right_x = x[best_split:]\n            right_y = y[best_split:]\n\n            self.decision_boundary = x[best_split]\n            self.left = DecisionTree(\n                depth=self.depth - 1, min_leaf_size=self.min_leaf_size\n            )\n            self.right = DecisionTree(\n                depth=self.depth - 1, min_leaf_size=self.min_leaf_size\n            )\n            self.left.train(left_x, left_y)\n            self.right.train(right_x, right_y)\n        else:\n            self.prediction = np.mean(y)\n\n        return\n\n    def predict(self, x):\n        \"\"\"\n        predict:\n        @param x: a floating point value to predict the label of\n        the prediction function works by recursively calling the predict function\n        of the appropriate subtrees based on the tree's decision boundary\n        \"\"\"\n        if self.prediction is not None:\n            return self.prediction\n        elif self.left or self.right is not None:\n            if x >= self.decision_boundary:\n                return self.right.predict(x)\n            else:\n                return self.left.predict(x)\n        else:\n            print(\"Error: Decision tree not yet trained\")\n            return None\n\n\nclass TestDecisionTree:\n    \"\"\"Decision Tres test class\"\"\"\n\n    @staticmethod\n    def helper_mean_squared_error_test(labels, prediction):\n        \"\"\"\n        helper_mean_squared_error_test:\n        @param labels: a one dimensional numpy array\n        @param prediction: a floating point value\n        return value: helper_mean_squared_error_test calculates the mean squared error\n        \"\"\"\n        squared_error_sum = float(0)\n        for label in labels:\n            squared_error_sum += (label - prediction) ** 2\n\n        return float(squared_error_sum / labels.size)\n\n\ndef main():\n    \"\"\"\n    In this demonstration we're generating a sample data set from the sin function in\n    numpy.  We then train a decision tree on the data set and use the decision tree to\n    predict the label of 10 different test values. Then the mean squared error over\n    this test is displayed.\n    \"\"\"\n    x = np.arange(-1.0, 1.0, 0.005)\n    y = np.sin(x)\n\n    tree = DecisionTree(depth=10, min_leaf_size=10)\n    tree.train(x, y)\n\n    test_cases = (np.random.rand(10) * 2) - 1\n    predictions = np.array([tree.predict(x) for x in test_cases])\n    avg_error = np.mean((predictions - test_cases) ** 2)\n\n    print(\"Test values: \" + str(test_cases))\n    print(\"Predictions: \" + str(predictions))\n    print(\"Average error: \" + str(avg_error))\n\n\nif __name__ == \"__main__\":\n    main()\n    import doctest\n    doctest.testmod(name=\"mean_squarred_error\", verbose=True)\n"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain">    </span><span class="token string-property property" style=color:#36acaa>"languages"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"pyodide"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain">    </span><span class="token string-property property" style=color:#36acaa>"console"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"full"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain">    </span><span class="token string-property property" style=color:#36acaa>"compiled"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"none"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain">  </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token function" style=color:#d73a49>createPlayground</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'#container'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> options</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports maybe-class-name">LiveCodes</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'livecodes/react'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword module" style=color:#00009f>export</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>default</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>function</span><span class="token plain"> </span><span class="token function maybe-class-name" style=color:#d73a49>App</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain">  </span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> options </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain">  </span><span class="token string-property property" style=color:#36acaa>"params"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain">    </span><span class="token string-property property" style=color:#36acaa>"python-wasm"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"# From: https://github.com/TheAlgorithms/Python\n# License: https://github.com/TheAlgorithms/Python/blob/master/LICENSE.mdx\n\n\"\"\"\nImplementation of a basic regression decision tree.\nInput data set: The input data set must be 1-dimensional with continuous labels.\nOutput: The decision tree maps a real number input to a real number output.\n\"\"\"\nimport numpy as np\n\n\nclass DecisionTree:\n    def __init__(self, depth=5, min_leaf_size=5):\n        self.depth = depth\n        self.decision_boundary = 0\n        self.left = None\n        self.right = None\n        self.min_leaf_size = min_leaf_size\n        self.prediction = None\n\n    def mean_squared_error(self, labels, prediction):\n        \"\"\"\n        mean_squared_error:\n        @param labels: a one dimensional numpy array\n        @param prediction: a floating point value\n        return value: mean_squared_error calculates the error if prediction is used to\n            estimate the labels\n        >>> tester = DecisionTree()\n        >>> test_labels = np.array([1,2,3,4,5,6,7,8,9,10])\n        >>> test_prediction = float(6)\n        >>> tester.mean_squared_error(test_labels, test_prediction) == (\n        ...     TestDecisionTree.helper_mean_squared_error_test(test_labels,\n        ...         test_prediction))\n        True\n        >>> test_labels = np.array([1,2,3])\n        >>> test_prediction = float(2)\n        >>> tester.mean_squared_error(test_labels, test_prediction) == (\n        ...     TestDecisionTree.helper_mean_squared_error_test(test_labels,\n        ...         test_prediction))\n        True\n        \"\"\"\n        if labels.ndim != 1:\n            print(\"Error: Input labels must be one dimensional\")\n\n        return np.mean((labels - prediction) ** 2)\n\n    def train(self, x, y):\n        \"\"\"\n        train:\n        @param x: a one dimensional numpy array\n        @param y: a one dimensional numpy array.\n        The contents of y are the labels for the corresponding X values\n\n        train does not have a return value\n        \"\"\"\n\n        \"\"\"\n        this section is to check that the inputs conform to our dimensionality\n        constraints\n        \"\"\"\n        if x.ndim != 1:\n            print(\"Error: Input data set must be one dimensional\")\n            return\n        if len(x) != len(y):\n            print(\"Error: X and y have different lengths\")\n            return\n        if y.ndim != 1:\n            print(\"Error: Data set labels must be one dimensional\")\n            return\n\n        if len(x) &lt; 2 * self.min_leaf_size:\n            self.prediction = np.mean(y)\n            return\n\n        if self.depth == 1:\n            self.prediction = np.mean(y)\n            return\n\n        best_split = 0\n        min_error = self.mean_squared_error(x, np.mean(y)) * 2\n\n        \"\"\"\n        loop over all possible splits for the decision tree. find the best split.\n        if no split exists that is less than 2 * error for the entire array\n        then the data set is not split and the average for the entire array is used as\n        the predictor\n        \"\"\"\n        for i in range(len(x)):\n            if len(x[:i]) &lt; self.min_leaf_size:\n                continue\n            elif len(x[i:]) &lt; self.min_leaf_size:\n                continue\n            else:\n                error_left = self.mean_squared_error(x[:i], np.mean(y[:i]))\n                error_right = self.mean_squared_error(x[i:], np.mean(y[i:]))\n                error = error_left + error_right\n                if error &lt; min_error:\n                    best_split = i\n                    min_error = error\n\n        if best_split != 0:\n            left_x = x[:best_split]\n            left_y = y[:best_split]\n            right_x = x[best_split:]\n            right_y = y[best_split:]\n\n            self.decision_boundary = x[best_split]\n            self.left = DecisionTree(\n                depth=self.depth - 1, min_leaf_size=self.min_leaf_size\n            )\n            self.right = DecisionTree(\n                depth=self.depth - 1, min_leaf_size=self.min_leaf_size\n            )\n            self.left.train(left_x, left_y)\n            self.right.train(right_x, right_y)\n        else:\n            self.prediction = np.mean(y)\n\n        return\n\n    def predict(self, x):\n        \"\"\"\n        predict:\n        @param x: a floating point value to predict the label of\n        the prediction function works by recursively calling the predict function\n        of the appropriate subtrees based on the tree's decision boundary\n        \"\"\"\n        if self.prediction is not None:\n            return self.prediction\n        elif self.left or self.right is not None:\n            if x >= self.decision_boundary:\n                return self.right.predict(x)\n            else:\n                return self.left.predict(x)\n        else:\n            print(\"Error: Decision tree not yet trained\")\n            return None\n\n\nclass TestDecisionTree:\n    \"\"\"Decision Tres test class\"\"\"\n\n    @staticmethod\n    def helper_mean_squared_error_test(labels, prediction):\n        \"\"\"\n        helper_mean_squared_error_test:\n        @param labels: a one dimensional numpy array\n        @param prediction: a floating point value\n        return value: helper_mean_squared_error_test calculates the mean squared error\n        \"\"\"\n        squared_error_sum = float(0)\n        for label in labels:\n            squared_error_sum += (label - prediction) ** 2\n\n        return float(squared_error_sum / labels.size)\n\n\ndef main():\n    \"\"\"\n    In this demonstration we're generating a sample data set from the sin function in\n    numpy.  We then train a decision tree on the data set and use the decision tree to\n    predict the label of 10 different test values. Then the mean squared error over\n    this test is displayed.\n    \"\"\"\n    x = np.arange(-1.0, 1.0, 0.005)\n    y = np.sin(x)\n\n    tree = DecisionTree(depth=10, min_leaf_size=10)\n    tree.train(x, y)\n\n    test_cases = (np.random.rand(10) * 2) - 1\n    predictions = np.array([tree.predict(x) for x in test_cases])\n    avg_error = np.mean((predictions - test_cases) ** 2)\n\n    print(\"Test values: \" + str(test_cases))\n    print(\"Predictions: \" + str(predictions))\n    print(\"Average error: \" + str(avg_error))\n\n\nif __name__ == \"__main__\":\n    main()\n    import doctest\n    doctest.testmod(name=\"mean_squarred_error\", verbose=True)\n"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain">    </span><span class="token string-property property" style=color:#36acaa>"languages"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"pyodide"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain">    </span><span class="token string-property property" style=color:#36acaa>"console"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"full"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain">    </span><span class="token string-property property" style=color:#36acaa>"compiled"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"none"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain">  </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain">  </span><span class="token keyword control-flow" style=color:#00009f>return</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>(</span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag class-name" style=color:#00009f>LiveCodes</span><span class="token tag" style=color:#00009f> </span><span class="token tag spread punctuation" style=color:#393A34>{</span><span class="token tag spread operator" style=color:#393A34>...</span><span class="token tag spread" style=color:#00009f>options</span><span class="token tag spread punctuation" style=color:#393A34>}</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag class-name" style=color:#00009f>LiveCodes</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>setup</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports maybe-class-name">LiveCodes</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"livecodes/vue"</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>const</span><span class="token script language-javascript"> options </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript">  </span><span class="token script language-javascript string-property property" style=color:#36acaa>"params"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript">    </span><span class="token script language-javascript string-property property" style=color:#36acaa>"python-wasm"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"# From: https://github.com/TheAlgorithms/Python\n# License: https://github.com/TheAlgorithms/Python/blob/master/LICENSE.mdx\n\n\"\"\"\nImplementation of a basic regression decision tree.\nInput data set: The input data set must be 1-dimensional with continuous labels.\nOutput: The decision tree maps a real number input to a real number output.\n\"\"\"\nimport numpy as np\n\n\nclass DecisionTree:\n    def __init__(self, depth=5, min_leaf_size=5):\n        self.depth = depth\n        self.decision_boundary = 0\n        self.left = None\n        self.right = None\n        self.min_leaf_size = min_leaf_size\n        self.prediction = None\n\n    def mean_squared_error(self, labels, prediction):\n        \"\"\"\n        mean_squared_error:\n        @param labels: a one dimensional numpy array\n        @param prediction: a floating point value\n        return value: mean_squared_error calculates the error if prediction is used to\n            estimate the labels\n        >>> tester = DecisionTree()\n        >>> test_labels = np.array([1,2,3,4,5,6,7,8,9,10])\n        >>> test_prediction = float(6)\n        >>> tester.mean_squared_error(test_labels, test_prediction) == (\n        ...     TestDecisionTree.helper_mean_squared_error_test(test_labels,\n        ...         test_prediction))\n        True\n        >>> test_labels = np.array([1,2,3])\n        >>> test_prediction = float(2)\n        >>> tester.mean_squared_error(test_labels, test_prediction) == (\n        ...     TestDecisionTree.helper_mean_squared_error_test(test_labels,\n        ...         test_prediction))\n        True\n        \"\"\"\n        if labels.ndim != 1:\n            print(\"Error: Input labels must be one dimensional\")\n\n        return np.mean((labels - prediction) ** 2)\n\n    def train(self, x, y):\n        \"\"\"\n        train:\n        @param x: a one dimensional numpy array\n        @param y: a one dimensional numpy array.\n        The contents of y are the labels for the corresponding X values\n\n        train does not have a return value\n        \"\"\"\n\n        \"\"\"\n        this section is to check that the inputs conform to our dimensionality\n        constraints\n        \"\"\"\n        if x.ndim != 1:\n            print(\"Error: Input data set must be one dimensional\")\n            return\n        if len(x) != len(y):\n            print(\"Error: X and y have different lengths\")\n            return\n        if y.ndim != 1:\n            print(\"Error: Data set labels must be one dimensional\")\n            return\n\n        if len(x) &lt; 2 * self.min_leaf_size:\n            self.prediction = np.mean(y)\n            return\n\n        if self.depth == 1:\n            self.prediction = np.mean(y)\n            return\n\n        best_split = 0\n        min_error = self.mean_squared_error(x, np.mean(y)) * 2\n\n        \"\"\"\n        loop over all possible splits for the decision tree. find the best split.\n        if no split exists that is less than 2 * error for the entire array\n        then the data set is not split and the average for the entire array is used as\n        the predictor\n        \"\"\"\n        for i in range(len(x)):\n            if len(x[:i]) &lt; self.min_leaf_size:\n                continue\n            elif len(x[i:]) &lt; self.min_leaf_size:\n                continue\n            else:\n                error_left = self.mean_squared_error(x[:i], np.mean(y[:i]))\n                error_right = self.mean_squared_error(x[i:], np.mean(y[i:]))\n                error = error_left + error_right\n                if error &lt; min_error:\n                    best_split = i\n                    min_error = error\n\n        if best_split != 0:\n            left_x = x[:best_split]\n            left_y = y[:best_split]\n            right_x = x[best_split:]\n            right_y = y[best_split:]\n\n            self.decision_boundary = x[best_split]\n            self.left = DecisionTree(\n                depth=self.depth - 1, min_leaf_size=self.min_leaf_size\n            )\n            self.right = DecisionTree(\n                depth=self.depth - 1, min_leaf_size=self.min_leaf_size\n            )\n            self.left.train(left_x, left_y)\n            self.right.train(right_x, right_y)\n        else:\n            self.prediction = np.mean(y)\n\n        return\n\n    def predict(self, x):\n        \"\"\"\n        predict:\n        @param x: a floating point value to predict the label of\n        the prediction function works by recursively calling the predict function\n        of the appropriate subtrees based on the tree's decision boundary\n        \"\"\"\n        if self.prediction is not None:\n            return self.prediction\n        elif self.left or self.right is not None:\n            if x >= self.decision_boundary:\n                return self.right.predict(x)\n            else:\n                return self.left.predict(x)\n        else:\n            print(\"Error: Decision tree not yet trained\")\n            return None\n\n\nclass TestDecisionTree:\n    \"\"\"Decision Tres test class\"\"\"\n\n    @staticmethod\n    def helper_mean_squared_error_test(labels, prediction):\n        \"\"\"\n        helper_mean_squared_error_test:\n        @param labels: a one dimensional numpy array\n        @param prediction: a floating point value\n        return value: helper_mean_squared_error_test calculates the mean squared error\n        \"\"\"\n        squared_error_sum = float(0)\n        for label in labels:\n            squared_error_sum += (label - prediction) ** 2\n\n        return float(squared_error_sum / labels.size)\n\n\ndef main():\n    \"\"\"\n    In this demonstration we're generating a sample data set from the sin function in\n    numpy.  We then train a decision tree on the data set and use the decision tree to\n    predict the label of 10 different test values. Then the mean squared error over\n    this test is displayed.\n    \"\"\"\n    x = np.arange(-1.0, 1.0, 0.005)\n    y = np.sin(x)\n\n    tree = DecisionTree(depth=10, min_leaf_size=10)\n    tree.train(x, y)\n\n    test_cases = (np.random.rand(10) * 2) - 1\n    predictions = np.array([tree.predict(x) for x in test_cases])\n    avg_error = np.mean((predictions - test_cases) ** 2)\n\n    print(\"Test values: \" + str(test_cases))\n    print(\"Predictions: \" + str(predictions))\n    print(\"Average error: \" + str(avg_error))\n\n\nif __name__ == \"__main__\":\n    main()\n    import doctest\n    doctest.testmod(name=\"mean_squarred_error\", verbose=True)\n"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript">    </span><span class="token script language-javascript string-property property" style=color:#36acaa>"languages"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"pyodide"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript">    </span><span class="token script language-javascript string-property property" style=color:#36acaa>"console"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"full"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript">    </span><span class="token script language-javascript string-property property" style=color:#36acaa>"compiled"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"none"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript">  </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>template</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain">  </span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>LiveCodes</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>v-bind</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>options</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag punctuation" style=color:#393A34>/></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>template</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><div role=tabpanel class=tabItem_Ymn6 hidden><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> onMount </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>'svelte'</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style=color:#00009f>import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style=color:#393A34>{</span><span class="token script language-javascript imports"> createPlayground </span><span class="token script language-javascript imports punctuation" style=color:#393A34>}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style=color:#00009f>from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>'livecodes'</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>let</span><span class="token script language-javascript"> options </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>$state</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript">  </span><span class="token script language-javascript string-property property" style=color:#36acaa>"params"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript">    </span><span class="token script language-javascript string-property property" style=color:#36acaa>"python-wasm"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"# From: https://github.com/TheAlgorithms/Python\n# License: https://github.com/TheAlgorithms/Python/blob/master/LICENSE.mdx\n\n\"\"\"\nImplementation of a basic regression decision tree.\nInput data set: The input data set must be 1-dimensional with continuous labels.\nOutput: The decision tree maps a real number input to a real number output.\n\"\"\"\nimport numpy as np\n\n\nclass DecisionTree:\n    def __init__(self, depth=5, min_leaf_size=5):\n        self.depth = depth\n        self.decision_boundary = 0\n        self.left = None\n        self.right = None\n        self.min_leaf_size = min_leaf_size\n        self.prediction = None\n\n    def mean_squared_error(self, labels, prediction):\n        \"\"\"\n        mean_squared_error:\n        @param labels: a one dimensional numpy array\n        @param prediction: a floating point value\n        return value: mean_squared_error calculates the error if prediction is used to\n            estimate the labels\n        >>> tester = DecisionTree()\n        >>> test_labels = np.array([1,2,3,4,5,6,7,8,9,10])\n        >>> test_prediction = float(6)\n        >>> tester.mean_squared_error(test_labels, test_prediction) == (\n        ...     TestDecisionTree.helper_mean_squared_error_test(test_labels,\n        ...         test_prediction))\n        True\n        >>> test_labels = np.array([1,2,3])\n        >>> test_prediction = float(2)\n        >>> tester.mean_squared_error(test_labels, test_prediction) == (\n        ...     TestDecisionTree.helper_mean_squared_error_test(test_labels,\n        ...         test_prediction))\n        True\n        \"\"\"\n        if labels.ndim != 1:\n            print(\"Error: Input labels must be one dimensional\")\n\n        return np.mean((labels - prediction) ** 2)\n\n    def train(self, x, y):\n        \"\"\"\n        train:\n        @param x: a one dimensional numpy array\n        @param y: a one dimensional numpy array.\n        The contents of y are the labels for the corresponding X values\n\n        train does not have a return value\n        \"\"\"\n\n        \"\"\"\n        this section is to check that the inputs conform to our dimensionality\n        constraints\n        \"\"\"\n        if x.ndim != 1:\n            print(\"Error: Input data set must be one dimensional\")\n            return\n        if len(x) != len(y):\n            print(\"Error: X and y have different lengths\")\n            return\n        if y.ndim != 1:\n            print(\"Error: Data set labels must be one dimensional\")\n            return\n\n        if len(x) &lt; 2 * self.min_leaf_size:\n            self.prediction = np.mean(y)\n            return\n\n        if self.depth == 1:\n            self.prediction = np.mean(y)\n            return\n\n        best_split = 0\n        min_error = self.mean_squared_error(x, np.mean(y)) * 2\n\n        \"\"\"\n        loop over all possible splits for the decision tree. find the best split.\n        if no split exists that is less than 2 * error for the entire array\n        then the data set is not split and the average for the entire array is used as\n        the predictor\n        \"\"\"\n        for i in range(len(x)):\n            if len(x[:i]) &lt; self.min_leaf_size:\n                continue\n            elif len(x[i:]) &lt; self.min_leaf_size:\n                continue\n            else:\n                error_left = self.mean_squared_error(x[:i], np.mean(y[:i]))\n                error_right = self.mean_squared_error(x[i:], np.mean(y[i:]))\n                error = error_left + error_right\n                if error &lt; min_error:\n                    best_split = i\n                    min_error = error\n\n        if best_split != 0:\n            left_x = x[:best_split]\n            left_y = y[:best_split]\n            right_x = x[best_split:]\n            right_y = y[best_split:]\n\n            self.decision_boundary = x[best_split]\n            self.left = DecisionTree(\n                depth=self.depth - 1, min_leaf_size=self.min_leaf_size\n            )\n            self.right = DecisionTree(\n                depth=self.depth - 1, min_leaf_size=self.min_leaf_size\n            )\n            self.left.train(left_x, left_y)\n            self.right.train(right_x, right_y)\n        else:\n            self.prediction = np.mean(y)\n\n        return\n\n    def predict(self, x):\n        \"\"\"\n        predict:\n        @param x: a floating point value to predict the label of\n        the prediction function works by recursively calling the predict function\n        of the appropriate subtrees based on the tree's decision boundary\n        \"\"\"\n        if self.prediction is not None:\n            return self.prediction\n        elif self.left or self.right is not None:\n            if x >= self.decision_boundary:\n                return self.right.predict(x)\n            else:\n                return self.left.predict(x)\n        else:\n            print(\"Error: Decision tree not yet trained\")\n            return None\n\n\nclass TestDecisionTree:\n    \"\"\"Decision Tres test class\"\"\"\n\n    @staticmethod\n    def helper_mean_squared_error_test(labels, prediction):\n        \"\"\"\n        helper_mean_squared_error_test:\n        @param labels: a one dimensional numpy array\n        @param prediction: a floating point value\n        return value: helper_mean_squared_error_test calculates the mean squared error\n        \"\"\"\n        squared_error_sum = float(0)\n        for label in labels:\n            squared_error_sum += (label - prediction) ** 2\n\n        return float(squared_error_sum / labels.size)\n\n\ndef main():\n    \"\"\"\n    In this demonstration we're generating a sample data set from the sin function in\n    numpy.  We then train a decision tree on the data set and use the decision tree to\n    predict the label of 10 different test values. Then the mean squared error over\n    this test is displayed.\n    \"\"\"\n    x = np.arange(-1.0, 1.0, 0.005)\n    y = np.sin(x)\n\n    tree = DecisionTree(depth=10, min_leaf_size=10)\n    tree.train(x, y)\n\n    test_cases = (np.random.rand(10) * 2) - 1\n    predictions = np.array([tree.predict(x) for x in test_cases])\n    avg_error = np.mean((predictions - test_cases) ** 2)\n\n    print(\"Test values: \" + str(test_cases))\n    print(\"Predictions: \" + str(predictions))\n    print(\"Average error: \" + str(avg_error))\n\n\nif __name__ == \"__main__\":\n    main()\n    import doctest\n    doctest.testmod(name=\"mean_squarred_error\", verbose=True)\n"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript">    </span><span class="token script language-javascript string-property property" style=color:#36acaa>"languages"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"pyodide"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript">    </span><span class="token script language-javascript string-property property" style=color:#36acaa>"console"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"full"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript">    </span><span class="token script language-javascript string-property property" style=color:#36acaa>"compiled"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"none"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript">  </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style=color:#00009f>let</span><span class="token script language-javascript"> container </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>$state</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript keyword null nil" style=color:#00009f>null</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript function" style=color:#d73a49>onMount</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style=color:#393A34>=></span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript">  </span><span class="token script language-javascript function" style=color:#d73a49>createPlayground</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript">container</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> options</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name namespace" style=color:#00a4db;opacity:0.7>bind:</span><span class="token tag attr-name" style=color:#00a4db>this</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>{container}</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div></div></div></div></div></details>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=starter-template>Starter Template<a href=#starter-template class=hash-link aria-label="Direct link to Starter Template" title="Direct link to Starter Template"></a></h2>
<p><a href="https://livecodes.io/?template=python-wasm" target=_blank rel="noopener noreferrer">https://livecodes.io/?template=python-wasm</a></p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=links>Links<a href=#links class=hash-link aria-label="Direct link to Links" title="Direct link to Links"></a></h2>
<ul>
<li><a href=https://www.python.org/ target=_blank rel="noopener noreferrer">Python</a></li>
<li><a href=https://pyodide.org target=_blank rel="noopener noreferrer">Pyodide</a></li>
<li><a href=https://micropip.pyodide.org target=_blank rel="noopener noreferrer">micropip</a></li>
<li><a href=/docs/languages/python>Brython in LiveCodes</a></li>
</ul></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class=col><a href=https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/python-wasm.mdx target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_Z9Sw aria-hidden=true><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"/></g></svg>Edit this page</a></div><div class="col lastUpdated_JAkA"></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href=/docs/languages/purgecss><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>PurgeCSS</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/docs/languages/python><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>Python</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href=#usage class="table-of-contents__link toc-highlight">Usage</a><ul><li><a href=#loading-modules class="table-of-contents__link toc-highlight">Loading Modules</a><ul><li><a href=#standard-library class="table-of-contents__link toc-highlight">Standard Library</a><li><a href=#external-packages class="table-of-contents__link toc-highlight">External Packages</a></ul><li><a href=#javascript-interoperability class="table-of-contents__link toc-highlight">JavaScript Interoperability</a></ul><li><a href=#language-info class="table-of-contents__link toc-highlight">Language Info</a><ul><li><a href=#name class="table-of-contents__link toc-highlight">Name</a><li><a href=#extensions class="table-of-contents__link toc-highlight">Extensions</a><li><a href=#aliases class="table-of-contents__link toc-highlight">Aliases</a><li><a href=#editor class="table-of-contents__link toc-highlight">Editor</a></ul><li><a href=#compiler class="table-of-contents__link toc-highlight">Compiler</a><ul><li><a href=#version class="table-of-contents__link toc-highlight">Version</a></ul><li><a href=#code-formatting class="table-of-contents__link toc-highlight">Code Formatting</a><li><a href=#live-reload class="table-of-contents__link toc-highlight">Live Reload</a><li><a href=#example-usage class="table-of-contents__link toc-highlight">Example Usage</a><li><a href=#starter-template class="table-of-contents__link toc-highlight">Starter Template</a><li><a href=#links class="table-of-contents__link toc-highlight">Links</a></ul><div class="custom-content custom-content-toc content_kfNa">
<div class=sponsors>
  <div class=sponsors-title>Sponsors</div>
  <ul>

    <li><a href=https://livecodes.io/docs/sponsor title="Become a sponsor">Your Logo</a></li>
  </ul>
</div>
</div></div></div></div></div></main></div></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class=footer__title>Docs</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/docs/overview>Overview</a><li class=footer__item><a class=footer__link-item href=/docs/why>Why Another Playground?</a><li class=footer__item><a class=footer__link-item href=/docs/getting-started>Getting Started</a><li class=footer__item><a class=footer__link-item href=/docs/features>Features</a><li class=footer__item><a class=footer__link-item href=/docs/languages>Languages</a><li class=footer__item><a class=footer__link-item href=/docs/sdk>SDK</a></ul></div><div class="col footer__col"><div class=footer__title>LiveCodes</div><ul class="footer__items clean-list"><li class=footer__item><a href=/docs/../ target=_blank rel="noopener noreferrer" class=footer__link-item>App<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=/docs/../?new target=_blank rel="noopener noreferrer" class=footer__link-item>Starter Templates<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href="/docs/../?screen=import" target=_blank rel="noopener noreferrer" class=footer__link-item>Import...<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a class=footer__link-item href=/docs/features/ai>AI Code Assistant 🪄</a><li class=footer__item><a class=footer__link-item href=/docs/bookmarklet>Bookmarklet</a><li class=footer__item><span style="display: flex; gap: 0.5em; align-items: baseline;"><a href=/docs/llms.txt target=_blank class=footer__link-item>llms.txt</a>-<a href=/docs/llms-full.txt target=_blank class=footer__link-item>llms-full.txt</a></span></ul></div><div class="col footer__col"><div class=footer__title>Info</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/docs/credits>Credits</a><li class=footer__item><a class=footer__link-item href=/docs/license>License</a><li class=footer__item><a class=footer__link-item href=/docs/sponsor>Sponsor 💚</a><li class=footer__item><a class=footer__link-item href=/docs/contact>Contact</a><li class=footer__item><a class=footer__link-item href=/docs/about>About us</a></ul></div><div class="col footer__col"><div class=footer__title>More</div><ul class="footer__items clean-list"><li class=footer__item><a href=https://blog.livecodes.io target=_self rel="noopener noreferrer" class=footer__link-item>Blog<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://github.com/live-codes/livecodes target=_blank rel="noopener noreferrer" class=footer__link-item>GitHub<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://twitter.com/livecodes_io target=_blank rel="noopener noreferrer" class=footer__link-item>𝕏 / Twitter<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://dev.to/livecodes_io target=_blank rel="noopener noreferrer" class=footer__link-item>Dev<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://www.npmjs.com/package/livecodes target=_blank rel="noopener noreferrer" class=footer__link-item>npm<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://status.livecodes.io target=_blank rel="noopener noreferrer" class="footer__link-item status-link"><span>Status</span><svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24"><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div></div><div class="footer__bottom text--center"><div class=footer__copyright><br> Released under the MIT License <br>
        Copyright © 2025
        <a href=https://github.com/hatemhosny target=_blank rel="noopener noreferrer">Hatem Hosny</a></div></div></div></footer></div>