Thebe

A Javascript Hack to

Take Jupyter Outside Notebooks

Zach Schwartz / O'Reilly Media / @zischwartz

## What & Why - Uses the [Jupyter](https://github.com/jupyter/) (formerly [ipython](https://github.com/ipython/ipython)) front end - Outside the notebook context - Interactive, executable code examples on any page - One line of javascript Note: talked a fair bit about audience today -- use case, for when you don't want the whole notebook interface for your audience. We're using it at oreilly directly on oreilly.com, user facing. even works with ipywidgets.
## Caveats - It's a hack - _Everything_ is in active development - Package management Note: A terribly inelegant one The front end, back end, and the infrastructure are _all_ in active development Package management, esp. front end, but back end too, is pretty terrible. Docker helps.
## So, Seriously Then, Why - [Andrew Odewahn](https://github.com/odewahn) - [Kyle Kelley](https://github.com/rgbkrk) - Why not Note: Another, almost incidental advantage, is that we handle the setup, dependencies, etc, for the user, which is especially useful for users just starting out. How many people here have gone to learn something new only to spend hours installing and configuring it before you can actually use it?
## How The Front End Hack Works - `static` in the Thebe repo is `notebook/notebook/static` in [jupyter/notebook](https://github.com/jupyter/notebook/tree/master/notebook/static) - Nine changes - Lots of stubbing - Bundled
## How To Use #### (For A Few Users / Locally) - Simplest: Just run the notebook server ``` jupyter notebook --NotebookApp.allow_origin=* ``` - More complicated (but recommended): Use docker to run jupyter/scipy-notebook ``` docker run -d -p 8888:8888 jupyter/scipy-notebook \ start-notebook.sh --NotebookApp.allow_origin=* ```
## How To Use #### (For A Few Users / Locally) ``` <script src="https://cdn.rawgit.com/oreillymedia/thebe/master/static/main-built.js" type="text/javascript"> ``` (and jquery) and then ``` $(function(){ new Thebe({url:"http://localhost:8888", tmpnb_mode:false}); }); ``` note: that url needs to be wherever your notebook server is running. this will turn each pre with data-executable attr into a editable, executable code cell
## How To Use ### For Many Users - [tmpnb](https://github.com/jupyter/tmpnb) and [configurable-http-proxy](https://github.com/jupyter/configurable-http-proxy) - docker swarm and [carina](https://github.com/getcarina/carina) - Future: Use [binder](https://github.com/binder-project/binder) note: tmpnb downside: only works for a single image, need one setup per image dependencies are rough, binder will solve this ![tmpnb architecture](https://cloud.githubusercontent.com/assets/836375/5911140/c53e3978-a587-11e4-86a5-695469ef23a5.png)
## Selected Options/Defaults ``` default_options = selector: 'pre[data-executable]' url: '//192.168.59.103:8000/' tmpnb_mode: true kernel_name: "python2" codemirror_mode_name: "ipython" image_name: "jupyter/notebook" set_url_cookie: true ``` Complete list at https://github.com/oreillymedia/thebe note: jquery selector for elements we want to make runnable the url of either a tmnb server or a notebook server (default url assumes user is running tmpnb via boot2docker) is the url for tmpnb or for a notebook the kernel name to use, must exist on notebook server hack to set the codemirror mode correctly Experimental! For setting what docker image you want to run on the back end should we remember the url that we connect to
## Future - Currently: ~700 lines (not including actual notebook code) - Should eventually be ~50 lines note: once the notebook code is decoupled and modularized. stealjs?
## Examples - https://oreillymedia.github.io/thebe/ - https://www.oreilly.com/learning/an-illustrated-introduction-to-the-t-sne-algorithm - http://spark-video.s3-website-us-east-1.amazonaws.com note: we're attempting to use it in epubs kyle's https://github.com/rgbkrk/share-cell
%matplotlib inline
import matplotlib.pyplot as plt
import numpy as np
from ipywidgets import interactive
from IPython.display import Audio, display
import numpy as np
def beat_freq(f1=220.0, f2=224.0):
    max_time = 3
    rate = 8000
    times = np.linspace(0,max_time,rate*max_time)
    signal = np.sin(2*np.pi*f1*times) + np.sin(2*np.pi*f2*times)
    print(f1, f2, abs(f1-f2))
    display(Audio(data=signal, rate=rate))
    return signal

(from beat frequencies example)

v = interactive(beat_freq, f1=(200.0,300.0), f2=(200.0,300.0))
display(v)
plt.plot(v.result[0:6000])

Thanks!

The End