{
"$type": "site.standard.document",
"content": {
"$type": "site.standard.content.markdown",
"text": "Turns out you can run Python in the browser thanks to WASM and, specifically, [PyScript](https://pyscript.net/). Let's try it out and integrate it with Hugo!\n\nSo... this is the current date and time, computed by Python running in your browser!\n\n<script defer src=\"https://pyscript.net/alpha/pyscript.js\"></script>\n<link rel=\"stylesheet\" href=\"https://pyscript.net/latest/pyscript.css\" />\n\n<py-env>\n - matplotlib\n - numpy\n - duckdb\n</py-env>\n\n```python\nfrom datetime import datetime\nnow = datetime.now()\nprint(now.strftime('%m/%d/%Y, %H:%M:%S'))\n```\n\n<py-script>\nfrom datetime import datetime\nnow = datetime.now()\nprint(now.strftime('%m/%d/%Y, %H:%M:%S'))\n</py-script>\n<br>\n\nNot only that! You can also use Python to generate plots, like this one:\n\n<py-script output=\"matplotlib-lineplot\">\n import matplotlib.pyplot as plt\n from datetime import datetime\n now = datetime.now()\n fig, ax = plt.subplots()\n x = ['Last Year', 'This Year', 'Next Year', 'Future']\n y = [10, 5, 9, 7]\n plt.plot(x, y)\n plt.xlabel('Date')\n plt.ylabel('Score')\n plt.title(f'Plot rendered at {now}')\n fig\n</py-script>\n\n<div id=\"matplotlib-lineplot\"></div>\n\nWhich comes from running this code:\n\n```python\nimport matplotlib.pyplot as plt\nfrom datetime import datetime\nnow = datetime.now()\nfig, ax = plt.subplots()\nx = ['Last Year', 'This Year', 'Next Year', 'Future']\ny = [10, 5, 9, 7]\nplt.plot(x, y)\nplt.xlabel('Date')\nplt.ylabel('Score')\nplt.title(f'Plot rendered at {now}')\nfig\n```\n\n## Using PyScript with Hugo\n\nTo use PyScript with Hugo, you need to add the following to your `config.toml`:\n\n```toml\n[markup.goldmark.renderer]\n unsafe= true\n```\n\nAnd then you can use PyScript like [I'm doing in this post](https://github.com/davidgasquez/davidgasquez.github.io/blob/main/content/posts/2023-08-08-pyscript.md?plain=1).\n\n## Jupyter REPL\n\nYou can also have an entire Jupyter REPL running in your browser, with the ability to run arbitrary Python code!\n\nGo ahead and try this out (`Shift+Enter` to run):\n\n```python\nfrom matplotlib import pyplot as plt\nimport numpy as np\nx, y, scale = np.random.randn(3, 100)\nfig, ax = plt.subplots()\nax.scatter(x=x, y=y, c=scale, s=np.abs(scale) * 500)\nax.set(title=\"Some random data!\")\nplt.show()\n```\n\n<iframe\n src=\"https://jupyterlite.github.io/demo/repl/index.html?kernel=python\"\n width=\"100%\"\n height=\"500px\"\n style=\"border: 4px solid #aaa;\"\n></iframe>",
"version": "1.0"
},
"description": "Turns out you can run Python in the browser thanks to WASM and, specifically, PyScript. Let's try it out and integrate it with Hugo! So... this is the current date and time, computed by Python running in your browser! matplotlib numpy duckdb from datetime import datetime now =...",
"path": "/pyscript",
"publishedAt": "2023-08-08T00:00:00.000Z",
"site": "at://did:plc:4z5i7njrld66ew36htufcwry/site.standard.publication/3mo43d2tmt2ov",
"textContent": "Turns out you can run Python in the browser thanks to WASM and, specifically, PyScript. Let's try it out and integrate it with Hugo!\n\nSo... this is the current date and time, computed by Python running in your browser!\nmatplotlib\nnumpy\nduckdb\n\nfrom datetime import datetime\nnow = datetime.now()\nprint(now.strftime('%m/%d/%Y, %H:%M:%S'))\n\nNot only that! You can also use Python to generate plots, like this one:\n\n import matplotlib.pyplot as plt\n from datetime import datetime\n now = datetime.now()\n fig, ax = plt.subplots()\n x = ['Last Year', 'This Year', 'Next Year', 'Future']\n y = [10, 5, 9, 7]\n plt.plot(x, y)\n plt.xlabel('Date')\n plt.ylabel('Score')\n plt.title(f'Plot rendered at {now}')\n fig\n\nWhich comes from running this code:\n\nUsing PyScript with Hugo\n\nTo use PyScript with Hugo, you need to add the following to your config.toml:\n\nAnd then you can use PyScript like I'm doing in this post.\n\nJupyter REPL\n\nYou can also have an entire Jupyter REPL running in your browser, with the ability to run arbitrary Python code!\n\nGo ahead and try this out (Shift+Enter to run):",
"title": "Using Pyscript"
}