Upload 173 files

.gitattributes

@@ -33,3 +33,60 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+readme-resources/screenshot.png filter=lfs diff=lfs merge=lfs -text
+static/pyodide/astropy-5.0.4-cp310-cp310-emscripten_wasm32.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/b2d-0.7.2-cp310-cp310-emscripten_wasm32.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/biopython-1.79-cp310-cp310-emscripten_wasm32.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/bleach-5.0.0-py3-none-any.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/bokeh-2.4.2-py3-none-any.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/boost_histogram-1.3.1-cp310-cp310-emscripten_wasm32.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/cffi_example-0.1-cp310-cp310-emscripten_wasm32.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/cffi-1.15.0-cp310-cp310-emscripten_wasm32.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/cryptography-3.4.8-cp310-cp310-emscripten_wasm32.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/cytoolz-0.11.2-cp310-cp310-emscripten_wasm32.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/distlib-0.3.4-py2.py3-none-any.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/docutils-0.18.1-py2.py3-none-any.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/fonts/DejaVuSans-Bold.ttf filter=lfs diff=lfs merge=lfs -text
+static/pyodide/fonts/DejaVuSans-BoldOblique.ttf filter=lfs diff=lfs merge=lfs -text
+static/pyodide/fonts/DejaVuSans-Oblique.ttf filter=lfs diff=lfs merge=lfs -text
+static/pyodide/fonts/DejaVuSans.ttf filter=lfs diff=lfs merge=lfs -text
+static/pyodide/fonts/DejaVuSansMono-Bold.ttf filter=lfs diff=lfs merge=lfs -text
+static/pyodide/fonts/DejaVuSansMono-BoldOblique.ttf filter=lfs diff=lfs merge=lfs -text
+static/pyodide/fonts/DejaVuSansMono-Oblique.ttf filter=lfs diff=lfs merge=lfs -text
+static/pyodide/fonts/DejaVuSansMono.ttf filter=lfs diff=lfs merge=lfs -text
+static/pyodide/fonts/DejaVuSerif-Bold.ttf filter=lfs diff=lfs merge=lfs -text
+static/pyodide/fonts/DejaVuSerif-BoldItalic.ttf filter=lfs diff=lfs merge=lfs -text
+static/pyodide/fonts/DejaVuSerif-Italic.ttf filter=lfs diff=lfs merge=lfs -text
+static/pyodide/fonts/DejaVuSerif.ttf filter=lfs diff=lfs merge=lfs -text
+static/pyodide/fonts/STIXGeneral.ttf filter=lfs diff=lfs merge=lfs -text
+static/pyodide/fonts/STIXGeneralBol.ttf filter=lfs diff=lfs merge=lfs -text
+static/pyodide/fonts/STIXGeneralBolIta.ttf filter=lfs diff=lfs merge=lfs -text
+static/pyodide/fonts/STIXGeneralItalic.ttf filter=lfs diff=lfs merge=lfs -text
+static/pyodide/fonttools-4.32.0-py3-none-any.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/freesasa-2.1.0-cp310-cp310-emscripten_wasm32.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/future-0.18.2-py3-none-any.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/html5lib-1.1-py2.py3-none-any.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/imageio-2.16.1-py3-none-any.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/jedi-0.18.1-py2.py3-none-any.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/Jinja2-3.1.1-py3-none-any.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/joblib-1.1.0-py2.py3-none-any.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/lxml-4.8.0-cp310-cp310-emscripten_wasm32.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/matplotlib-3.5.1-cp310-cp310-emscripten_wasm32.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/mne-1.0.0-py3-none-any.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/mpmath-1.2.1-py3-none-any.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/networkx-2.7.1-py3-none-any.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/nlopt-2.7.0-cp310-cp310-emscripten_wasm32.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/nltk-3.7-py3-none-any.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/nose-1.3.7-py3-none-any.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/numcodecs-0.9.1-cp310-cp310-emscripten_wasm32.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/numpy-1.22.3-cp310-cp310-emscripten_wasm32.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/pandas-1.4.2-cp310-cp310-emscripten_wasm32.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/parso-0.8.3-py2.py3-none-any.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/patsy-0.5.2-py2.py3-none-any.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/PIL-9.1.0-cp310-cp310-emscripten_wasm32.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/pycparser-2.21-py2.py3-none-any.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/pydantic-1.9.0-py3-none-any.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/pyerfa-2.0.0.1-cp310-cp310-emscripten_wasm32.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/Pygments-2.11.2-py3-none-any.whl filter=lfs diff=lfs merge=lfs -text
+static/pyodide/pyodide.asm.data filter=lfs diff=lfs merge=lfs -text
+static/pyodide/pytest-7.1.1-py3-none-any.whl filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,163 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+#poetry.lock
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#pdm.lock
+#   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
+#   in version control.
+#   https://pdm.fming.dev/#use-with-ide
+.pdm.toml
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#  and can be added to the global gitignore or merged into this file.  For a more nuclear
+#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
+#.idea/
+
+unused-wheels/
+/.idea/workspace.xml

.idea/pyscript-pwa-example.iml

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="PYTHON_MODULE" version="4">
+  <component name="Flask">
+    <option name="enabled" value="true" />
+  </component>
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/venv" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+  <component name="PyDocumentationSettings">
+    <option name="format" value="PLAIN" />
+    <option name="myDocStringFormat" value="Plain" />
+  </component>
+  <component name="TemplatesService">
+    <option name="TEMPLATE_CONFIGURATION" value="Jinja2" />
+    <option name="TEMPLATE_FOLDERS">
+      <list>
+        <option value="$MODULE_DIR$/templates" />
+      </list>
+    </option>
+  </component>
+</module>

README.md

@@ -1,10 +1,26 @@
----
-title: Pyscript
-emoji: 👀
-colorFrom: gray
-colorTo: blue
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# pyscript PWA Example
+
+This app shows how using a PWA (Progressive Web App) along with [pyscript](https://pyscript.net)
+allows us to create Python-based web applications that install like regular applications and
+(mostly) don't suffer from the large file downloads needed for Python's WebAssembly runtime.
+
+![](readme-resources/screenshot.png)
+
+To run the app, just start it as a Flask application (keep the app running for the web weather API).
+
+```bash
+
+python3 -m venv venv
+. /venv/bin/activate
+pip install -r requirements.txt
+flask run
+
+```
+
+Then open 127.0.0.1:5000 and choose "install PWA". See 
+[these steps for Chrome](https://www.howtogeek.com/fyi/how-to-install-progressive-web-apps-pwas-in-chrome/), 
+google the actions if you are new to this in your browser.
+
+Unfortunately, Mozilla gave up on this feature for Firefox browser.
+
+If you have improvements for the PWA side of things, please open a PR. It's very bare-bones.

app.py

@@ -0,0 +1,50 @@
+import random
+from pathlib import Path
+
+import flask
+
+app = flask.Flask(__name__)
+
+
+@app.get('/')
+def index():
+    return flask.render_template('index.html')
+
+
+@app.get('/weather/data')
+def weather_data():
+    data = get_random_report()
+    return flask.jsonify(data)
+
+
+@app.get('/serviceWorker.js')
+def worker():
+    js = Path(__file__).parent / 'static' / 'js' / 'serviceWorker.js'
+    text = js.read_text()
+    resp = flask.make_response(text)
+    resp.content_type = 'application/javascript'
+    resp.headers['Service-Worker-Allowed'] = '/'
+
+    return resp
+
+
+def get_random_report() -> dict:
+    reports = [
+        {
+            'report': 'Clear and beautify skies today.',
+            'sky': 'sunny',
+            'temp': random.randint(65, 88),
+        },
+        {
+            'report': 'Cloudy and a bit cool today.',
+            'sky': 'cloudy',
+            'temp': random.randint(48, 60),
+        },
+        {
+            'report': 'Are those icicles falling from the sky? Get inside.',
+            'sky': 'rain',
+            'temp': random.randint(33, 40),
+        }
+    ]
+
+    return random.choice(reports)

requirements.txt

@@ -0,0 +1 @@
+flask

static/css/site.css

@@ -0,0 +1,121 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background: #fdfdfd;
+    font-family: "Nunito", sans-serif;
+    font-size: 1rem;
+    overflow: hidden;
+}
+
+html, body {
+    height: 100%;
+    min-height: 100%;
+}
+
+main {
+    max-width: 900px;
+    margin: auto;
+    padding: 0.5rem;
+    text-align: center;
+    height: 80%;
+}
+
+nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+ul {
+    list-style: none;
+    display: flex;
+}
+
+li {
+    margin-right: 1rem;
+}
+
+h1 {
+    margin-bottom: 0.5rem;
+}
+
+
+.container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+    grid-gap: 1rem;
+    justify-content: center;
+    align-items: center;
+    margin: auto;
+    padding: 1rem 0;
+}
+
+
+body.sunny {
+    background: #69caf8;
+}
+
+body.cloudy {
+    background: #cbcaca;
+}
+
+body.rain {
+    background: #607280;
+    color: white;
+}
+body.offline {
+    background: #e37f7f;
+    color: black;
+}
+
+#weather {
+    margin-top: 100px;
+}
+
+#weather #image-container {
+    float: left;
+}
+
+#weather #image {
+    width: 350px;
+}
+
+#weather #temp {
+    padding-top: 70px;
+    font-size: 100px;
+    font-weight: bold;
+}
+
+#weather #forecast {
+
+}
+
+footer {
+    text-align: center;
+    height: 20%;
+    background-color: #444;
+    color: #aaa;
+}
+
+.footer-content {
+    padding-top: 40px;
+}
+
+
+a {
+    cursor: pointer;
+    font-weight: bold;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+.hidden {
+    display: none;
+}

static/js/pwa-scaffold.js

@@ -0,0 +1,8 @@
+if ("serviceWorker" in navigator) {
+    window.addEventListener("load", function () {
+        navigator.serviceWorker
+            .register("/serviceWorker.js")
+            .then(res => console.log("service worker registered", res))
+            .catch(err => console.log("service worker not registered", err))
+    })
+}

static/js/serviceWorker.js

@@ -0,0 +1,52 @@
+const staticPyPWA = "dev-pypwa-v4"
+const assets = [
+    // "",
+    // "/",
+    "/static/css/site.css",
+    "/static/js/site.js",
+    "/static/js/pwa-scaffold.js",
+
+    "/static/python/client.py",
+    "/static/python/weather_api.py",
+
+    "/static/pyscript/pyscript.css",
+    "/static/pyscript/pyscript.js",
+    "/static/pyscript/pyscript.py",
+
+    "/static/images/weather/cloudy.png",
+    "/static/images/weather/rain.png",
+    "/static/images/weather/offline.png",
+    "/static/images/weather/sunny.png",
+
+    "/static/pyodide/pyodide.js",
+    "/static/pyodide/packages.json",
+    "/static/pyodide/pyodide_py.tar",
+    "/static/pyodide/pyodide.asm.js",
+    "/static/pyodide/pyodide.asm.data",
+    "/static/pyodide/pyodide.asm.wasm",
+    "/static/pyodide/micropip-0.1-py3-none-any.whl",
+    "/static/pyodide/pyparsing-3.0.7-py3-none-any.whl",
+    "/static/pyodide/packaging-21.3-py3-none-any.whl",
+    "/static/pyodide/distutils.tar",
+
+    "/static/images/icons/icon-144x144.png",
+]
+
+self.addEventListener("install", installEvent => {
+    installEvent.waitUntil(
+        caches.open(staticPyPWA).then(cache => {
+            cache.addAll(assets).then(r => {
+                console.log("Cache assets downloaded");
+            }).catch(err => console.log("Error caching item", err))
+            console.log(`Cache ${staticPyPWA} opened.`);
+        }).catch(err => console.log("Error opening cache", err))
+    )
+})
+
+self.addEventListener("fetch", fetchEvent => {
+    fetchEvent.respondWith(
+        caches.match(fetchEvent.request).then(res => {
+            return res || fetch(fetchEvent.request)
+        }).catch(err => console.log("Cache fetch error: ", err))
+    )
+})

static/manifest.json

@@ -0,0 +1,43 @@
+{
+  "name": "PyPWA Weather",
+  "short_name": "PyPWA Weather",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#69caf8",
+  "theme_color": "#444444",
+  "orientation": "portrait-primary",
+  "icons": [
+    {
+      "src": "/static/images/icons/icon-72x72.png",
+      "type": "image/png", "sizes": "72x72"
+    },
+    {
+      "src": "/static/images/icons/icon-96x96.png",
+      "type": "image/png", "sizes": "96x96"
+    },
+    {
+      "src": "/static/images/icons/icon-128x128.png",
+      "type": "image/png","sizes": "128x128"
+    },
+    {
+      "src": "/static/images/icons/icon-144x144.png",
+      "type": "image/png", "sizes": "144x144"
+    },
+    {
+      "src": "/static/images/icons/icon-152x152.png",
+      "type": "image/png", "sizes": "152x152"
+    },
+    {
+      "src": "/static/images/icons/icon-192x192.png",
+      "type": "image/png", "sizes": "192x192"
+    },
+    {
+      "src": "/static/images/icons/icon-384x384.png",
+      "type": "image/png", "sizes": "384x384"
+    },
+    {
+      "src": "/static/images/icons/icon-512x512.png",
+      "type": "image/png", "sizes": "512x512"
+    }
+  ]
+}

static/pyodide/CLAPACK-3.2.1.zip

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2662f266d19c2e684a0c7d67c045d3f0767447fe5c0eed3509bbd31a25e6ca31
+size 1277110

static/pyodide/Jinja2-3.1.1-py3-none-any.whl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:63992624b74ec0ebe62b1c10b44aff5e6a85b0b84a8668d6b681a2478fd11cf7
+size 132603

static/pyodide/PIL-9.1.0-cp310-cp310-emscripten_wasm32.whl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:38d692b74bb4c0614796f1e2c9beb931f5a6a79853611d0d2a205445957752f2
+size 852898

static/pyodide/Pygments-2.11.2-py3-none-any.whl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e735d55ccda6306fe3e36dc6c1867b97a45cf8aa20c4907b24df5eaa9dc63b24
+size 1063665

static/pyodide/astropy-5.0.4-cp310-cp310-emscripten_wasm32.whl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:78f779cfda0210401459497cf8eb20077b720dea9eb27bd74b5dffc10a4da75b
+size 6121279

static/pyodide/autograd-tests.tar

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:785d04b1a0b7288fcd318bda0343e418898aa12d42e9b5aff3dd3a1d67f76144
+size 10240

static/pyodide/b2d-0.7.2-cp310-cp310-emscripten_wasm32.whl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:73317f7d55dd2e307db75cae21d27307ca57847b1b12547356fdf8e3422c8e69
+size 308974

static/pyodide/biopython-1.79-cp310-cp310-emscripten_wasm32.whl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ed44cdce7d9b05e123a9cf9bea1defc9003257626cc2ad6e4ff5da0dbdcb8782
+size 2203790

static/pyodide/bleach-5.0.0-py3-none-any.whl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8335829b36ae9ef324ff8f66b7191683e0bc962cf82d0cf5c2db5d300354e547
+size 160294

static/pyodide/bokeh-2.4.2-py3-none-any.whl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bfd2e2ff2cf64b10dfaa48ef2fd9e57622c8a7fec3d86cf737dbefac96c2a1f7
+size 18470310

static/pyodide/boost_histogram-1.3.1-cp310-cp310-emscripten_wasm32.whl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7aafa2d98e202ae65cfa0d6f91965e262268f4e3c976c5aff04214dc10fc5efc
+size 936253

static/pyodide/cffi-1.15.0-cp310-cp310-emscripten_wasm32.whl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8a78d2f60271ce07f3516c2247df10782376b88149c5608bc41367b3f257bba2
+size 148396

static/pyodide/cffi_example-0.1-cp310-cp310-emscripten_wasm32.whl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:740611eac17de512fc711fad332e9146670e4244fd7ac8665af57e328d477eba
+size 262492

static/pyodide/cmyt-tests.tar

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a7a5efd425ceced01b7d33b72be12548b944c63fb48b572ed77768db8c7ea476
+size 20480

static/pyodide/console.html

@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/jquery"></script>
+    <script src="https://cdn.jsdelivr.net/npm/jquery.terminal@2.32.0/js/jquery.terminal.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/jquery.terminal@2.23.0/js/unix_formatting.min.js"></script>
+    <link
+      href="https://cdn.jsdelivr.net/npm/jquery.terminal@2.32.0/css/jquery.terminal.min.css"
+      rel="stylesheet"
+    />
+    <script src="./pyodide.js"></script>
+    <style>
+      .terminal {
+        --size: 1.5;
+        --color: rgba(255, 255, 255, 0.8);
+      }
+    </style>
+  </head>
+  <body>
+    <script>
+      "use strict";
+      function sleep(s) {
+        return new Promise((resolve) => setTimeout(resolve, s));
+      }
+
+      async function main() {
+        globalThis.pyodide = await loadPyodide();
+        let namespace = pyodide.globals.get("dict")();
+        pyodide.runPython(
+          `
+            import sys
+            from pyodide import to_js
+            from pyodide.console import PyodideConsole, repr_shorten, BANNER
+            import __main__
+            BANNER = "Welcome to the Pyodide terminal emulator 🐍\\n" + BANNER
+            pyconsole = PyodideConsole(__main__.__dict__)
+            import builtins
+            async def await_fut(fut):
+              res = await fut
+              if res is not None:
+                builtins._ = res
+              return to_js([res], depth=1)
+            def clear_console():
+              pyconsole.buffer = []
+        `,
+          { globals: namespace }
+        );
+        let repr_shorten = namespace.get("repr_shorten");
+        let banner = namespace.get("BANNER");
+        let await_fut = namespace.get("await_fut");
+        let pyconsole = namespace.get("pyconsole");
+        let clear_console = namespace.get("clear_console");
+        namespace.destroy();
+
+        let ps1 = ">>> ",
+          ps2 = "... ";
+
+        async function lock() {
+          let resolve;
+          let ready = term.ready;
+          term.ready = new Promise((res) => (resolve = res));
+          await ready;
+          return resolve;
+        }
+
+        async function interpreter(command) {
+          let unlock = await lock();
+          term.pause();
+          // multiline should be split (useful when pasting)
+          for (const c of command.split("\n")) {
+            let fut = pyconsole.push(c);
+            term.set_prompt(fut.syntax_check === "incomplete" ? ps2 : ps1);
+            switch (fut.syntax_check) {
+              case "syntax-error":
+                term.error(fut.formatted_error.trimEnd());
+                continue;
+              case "incomplete":
+                continue;
+              case "complete":
+                break;
+              default:
+                throw new Error(`Unexpected type ${ty}`);
+            }
+            // In JavaScript, await automatically also awaits any results of
+            // awaits, so if an async function returns a future, it will await
+            // the inner future too. This is not what we want so we
+            // temporarily put it into a list to protect it.
+            let wrapped = await_fut(fut);
+            // complete case, get result / error and print it.
+            try {
+              let [value] = await wrapped;
+              if (value !== undefined) {
+                term.echo(
+                  repr_shorten.callKwargs(value, {
+                    separator: "\n[[;orange;]<long output truncated>]\n",
+                  })
+                );
+              }
+              if (pyodide.isPyProxy(value)) {
+                value.destroy();
+              }
+            } catch (e) {
+              if (e.constructor.name === "PythonError") {
+                const message = fut.formatted_error || e.message;
+                term.error(message.trimEnd());
+              } else {
+                throw e;
+              }
+            } finally {
+              fut.destroy();
+              wrapped.destroy();
+            }
+          }
+          term.resume();
+          await sleep(10);
+          unlock();
+        }
+
+        let term = $("body").terminal(interpreter, {
+          greetings: banner,
+          prompt: ps1,
+          completionEscape: false,
+          completion: function (command, callback) {
+            callback(pyconsole.complete(command).toJs()[0]);
+          },
+          keymap: {
+            "CTRL+C": async function (event, original) {
+              clear_console();
+              term.enter();
+              term.echo("KeyboardInterrupt");
+              term.set_command("");
+              term.set_prompt(ps1);
+            },
+            TAB: (event, original) => {
+              const command = term.before_cursor();
+              // Disable completion for whitespaces.
+              if (command.trim() === "") {
+                term.insert("\t");
+                return false;
+              }
+              return original(event);
+            },
+          },
+        });
+        window.term = term;
+        pyconsole.stdout_callback = (s) => term.echo(s, { newline: false });
+        pyconsole.stderr_callback = (s) => {
+          term.error(s.trimEnd());
+        };
+        term.ready = Promise.resolve();
+        pyodide._api.on_fatal = async (e) => {
+          term.error(
+            "Pyodide has suffered a fatal error. Please report this to the Pyodide maintainers."
+          );
+          term.error("The cause of the fatal error was:");
+          term.error(e);
+          term.error("Look in the browser console for more details.");
+          await term.ready;
+          term.pause();
+          await sleep(15);
+          term.pause();
+        };
+      }
+      window.console_ready = main();
+    </script>
+  </body>
+</html>