coatless-quarto / pyodide

Quarto extension to enable interactive Python code cells in HTML documents using Pyodide
http://quarto.thecoatlessprofessor.com/pyodide/
53 stars 3 forks source link

Proof of Concept Feedback Thread #2

Closed coatless closed 4 months ago

coatless commented 6 months ago

Have some feedback that you want to share about the proof of concept for the pyodide extension?

https://rd.thecoatlessprofessor.com/pyodide-quarto-demo/

Feel free to leave a comment here!

joelostblom commented 6 months ago

Thanks for working on this! I'm curious about the graphing limitations; are these limited to raster based libraries like matplotlib, or do they also include web native libraries like altair?

I tried exploring this myself following the instructions at https://shiny.posit.co/py/docs/shinylive.html#testing-whether-a-package-is-available to install altair, but I run into errors with the installation (which I also reported https://github.com/posit-dev/py-shiny/issues/890).

coatless commented 6 months ago

@joelostblom the issue is due to how images are being saved to a canvas in pyodide. Specifically, each downstream project needs to patch the matplotlib output to redirect it onto the designated area. Moreover, unlike with webr, the documentation for working with images is sparse; worse yet, many of the examples are out of date.

So, when the POC was made in ~Early August, this moved over to the back burner.

joelostblom commented 6 months ago

Interesting, since you mentioned images specifically, do you think it would be easier with the libraries that don't display charts as a raster image, but rather svg/html etc (such as altair, plotly, bokeh)? Or do they still need to go through the same image/matplotlib redirect?

coatless commented 6 months ago

The first issue with using an external package is whether it is available via either a pure Python wheel or wasm32/emscripten wheel. If it is, then we should be able to install it either via micropip.install() or through a requirements.txt file.

From there, it's a matter of understanding how the output of the package is being handled. Right now, this can be split into two camps:

  1. we need to pre-load the package when initializing pyodide alongside a patch to handle the output; or,
  2. the data is likely being sent out as raw text that can be immediately incorporated into the document.

So, in the case of 2., it's likely easier as everything should just work assuming the rendered output is added into the DOM using innerHTML instead of innerText.

joelostblom commented 6 months ago

Great, thanks for elaborating on how it works!

coatless commented 4 months ago

@joelostblom Feel free to check out the {quarto-pyodide} extension.

Install instructions are here:

https://github.com/coatless-quarto/pyodide

Rendered demos using the extension:

https://quarto.thecoatlessprofessor.com/pyodide/qpyodide-code-cell-demo.html