JN rendered as `*.html` in `iframe`

[MatteoRobbiati]

With this PR I'm taking into account issue #3. I have built a test page, called jntest.js in which a jupyter notebook is rendered in the form of an iframe. You can look at the page at: http://localhost:3000/jntest in developer mode.

This doesn't allow the user to run the JN like to be in a console, but looks like familiar and (maybe) quite better than a simple markdown page.

The simplest way for doing this is to save the JN as an html file, and this can be done directly from the console. Another method for creating the notebook.html file is to use jupyter converter running something like this:

jupyter nbconvert notebook.ipynb --to html

I attach an image, for showing you the graphical result:

[alecandido]

This doesn't allow the user to run the JN like to be in a console

This is not the goal: we are rendering static pages, and Jupyter needs a Python server to run. So, (unless you embed a Python server in the browser*) there is no way to run it without a server (that we don't want to put). In any case, it is not even useful, because we want to use Jupyter Notebooks for tutorials, so they have to be read only.

The only good, and very useful thing, is to add a link on the page pointing to the file in GitHub, such that readers can download the Jupyter Notebook, and run in their favorite way. (Also PennyLane example is not interactive, as you can see from your link in the issue)

*It is theoretically possible, and even reasonable, with WebAssembly. Someone has also done. Someone has done even more with WebAssembly. But this is not our core business, and it would be a pain to write and to maintain ^^

[alecandido]

However, congratulations, the screenshot looks extremely nice :D

[alecandido]

If possible, do not commit the HTML resulting from the notebook: that is generated, and it is also a big file.

Just leave the code generating it every time you compile the website :) (if you need some code to do it, add a script with the code required and add to the instructions - even if I hope it is done automatically by yarn build, at least eventually...)

[MatteoRobbiati]

@AleCandido I agree. I think this static "screenshot" of the JN can be really useful because brings the user in a "comfort zone". It can be read and used like a text or, adding a proper button at the end of the page, reached, jumping directly to the proper qibo folder (in which we must upload the notebooks, of course).

[alecandido]

Just to complete the ideas (please, summarize them in the issue for the future), other than the link to download we could add a link to another service, where the user can run the Notebook.

E.g.:

• https://mybinder.org/
• https://colab.research.google.com/
• our instance of Jupyter Hub

[MatteoRobbiati]

If possible, do not commit the HTML resulting from the notebook: that is generated, and it is also a big file.

Just leave the code generating it every time you compile the website :) (if you need some code to do it, add a script with the code required and add to the instructions - even if I hope it is done automatically by yarn build, at least eventually...)

I'll open an issue for this, because I must understand how to do this. Thank you.

[alecandido]

I'll open an issue for this, because I must understand how to do this. Thank you.

You're welcome

jumping directly to the proper qibo folder (in which we must upload the notebooks, of course).

Consider that (eventually) notebooks have to be in a single place: either they are in qibo (or the other repos) and the link points there, or they are in the website repo, and the link should point there. There should not be two versions of the notebooks, because otherwise one will be updated, and the other will lack behind.

[MatteoRobbiati]

Consider that (eventually) notebooks have to be in a single place: either they are in qibo (or the other repos) and the link points there, or they are in the website repo, and the link should point there. There should not be two versions of the notebooks, because otherwise one will be updated, and the other will lack behind.

Yes, it is wise.

[alecandido]

Ok, I finally read the code and understood the strategy, that is extremely simple, but possibly also efficient enough :D

If you have some time we can discuss this together, but I will first do some investigation, consider the advantages of alternatives, and discuss with @scarrazza (in case he has some time).

However, the current strategy is extremely basic: a Jupyter Notebook is a JSON, even if with a different extension. And the JSON contains a property cells, which contains a list of objects with two properties input and output, and they already contain HTML (the one displayed in your browser when you use the notebook). Schematically:

{
  "cells": [
    {"input": <html>, "output": <html>, ...},
    ...
  ]
  ...
}

So, what the current code is doing, it is just to extract the HTML from cells, and cook a separate file with HTML only: https://github.com/qibogang/qibogang.github.io/blob/c444aa81e466611899dcb6f6a4d8e244127ee8b6/components/render_jn.js#L1-L11