Embed Jupyter HTML output in a web page - html

Question

I want to embed the HTML output of Jupyter, in my own web page. The reason for this is primarily, so that I can use Jupyter from my own webapp - and also access my research notebooks from anywhere in the world - via the internet.
A typical use case scenario would be that I click on a button on my page, and an iframe will be inserted in my page; Jupyter will then be launched at the backend (if not already running), and the output of Jupyter will be 'piped' to the iframe - so that I can use Jupyter from within my page.
The naive solution it appeared, was to use <iframe>, but there were two problems:
The iframe cross domain policy problem
Jupyter generated a one time authentication token when first launched
Is there anyway I can overcome these issues, so I can embed the output of Jupyter in my own web page?

Answer 1

you need to check nbconvert - https://github.com/jupyter/nbconvert
there you have 2 options.
to use command line to run notebook and then to let some web server
to server .html
to use python, and nbconvert library
here is short code :
if you want to show already generated:
from nbconvert.preprocessors import ExecutePreprocessor
import nbformat
from nbconvert import HTMLExporter
from nbconvert.preprocessors.execute import CellExecutionError
src_notebook = nbformat.reads(ff.read(), as_version=4) #where ff is file opened with some open("path to notebook file")
html_exporter = HTMLExporter()
html_exporter.template_file = 'basic' #basic will skip generating body and html tags.... use "all" to gen all..
(body, resources) = html_exporter.from_notebook_node(src_notebook)
print(body) #body have html output
if you want also to run notebook, then :
from nbconvert.preprocessors import ExecutePreprocessor
import nbformat
from nbconvert import HTMLExporter
from nbconvert.preprocessors.execute import CellExecutionError
src_notebook = nbformat.reads(ff.read(), as_version=4) #where ff is file opened with some open("path to notebook file")
ep = ExecutePreprocessor(timeout=50, kernel_name='python3')
ep.preprocess(src_notebook, {})
html_exporter = HTMLExporter()
html_exporter.template_file = 'basic' #basic will skip generating body and html tags.... use "all" to gen all..
(body, resources) = html_exporter.from_notebook_node(src_notebook)
print(body) #body have html output

Answer 2

You can directly do that using the html_embed pre-processor:
$ jupyter nbconvert --to html_embed Annex.ipynb
[NbConvertApp] Converting notebook Annex.ipynb to html_embed
/usr/local/lib/python3.6/site-packages/nbconvert/filters/datatypefilter.py:41: UserWarning: Your element with mimetype(s) dict_keys(['image/pdf']) is not able to be represented.
mimetypes=output.keys())
[NbConvertApp] Writing 2624499 bytes to Annex.html
Strangely, I could not find a direct reference in the manual from nbconvert.

Answer 3

You can use ipython nbconvert - -to html notebook.ipynb to obtain the html code for the same.
Here is a guide on how to do it Blogging with the IPython notebook - see here
If your website is writing in python the use python embed docs
Also this Tutorial - see here
or use kyso.io
Here is how to embed Jupyter using Kyso platform - see here
(disclaimer - I’m a founder of kyso)