{"componentChunkName":"component---src-templates-blog-post-js","path":"/jupyter_book_notes/","result":{"data":{"site":{"siteMetadata":{"title":"tigue.com"}},"markdownRemark":{"id":"8901ce09-9620-51e4-8360-20fccf836994","excerpt":"This is an addendum to my 2020-01 post entitled, \nJupyter Book to Colab. Jupyter Book is a\ntool which generates static HTML renderings of Jupyter  files.\nIt can…","html":"<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 640px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/74d039ad4fe7d25fcdf76c90f10c7278/70d1f/four_reps_of_ipynb.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 75%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsSAAALEgHS3X78AAACEklEQVQ4y5VTaXeiQBD0//+o3U1W45m4iKggcg3IDV7EeNb2zAYTiPmw/d68nsG2pqq7poFaXK9XkU+nEzzmgFkGjPkMgcfobCPPUiRRiPP5XKkvo/Et4PGImP6oazNYCx3MNqFOFWzWa6zXKxzp9/8C5AxsYmcZOszFv7XKc6xXKyRxJBSU9Z9BG1WwD8BdUcAliRxEGY+gyBImlDkY/1aXXOZvAbkk17ERBj4BOwj8pciWacA2TWxJeh3sBljS/rx4hEEgALM0QZLEIqdJAt/3keQZ0jSt1PPcqN9Q7ovdDlEY4V5kWY4jrgSe4nA4VCXfhkBNFpIvF3FO4hi77VYUXt6/8dhuNsQ6JLYZmOOInhbU7wpD3uCl66Hb7mDQ6+OlP4A0/AN1pgrg0kb+0ofnLWHbNp6ppvnwCE1V4RDwF8m6pqP71Ea31UaH1liS0e/04VgOQpLuENDh7Q2MuWQnC8ZigbmmQZYk2hu3qQtAnxo9mUzJFgoVyJgqU5K2hUesmc2wIenFe6+iKIKiKBhJZKXJRKhgDqsCnujAb/n98wGPP34Rsx4Z2SDbMLpgVHmOfBBc8lzVMBgOiTE9SdcVM6gMhT+pgOzAbRFHsdjzKe/3+4o1Aj8QrFrNJsYjGcPnF5hGTXL9Pd6LD0AfPRrejFrU63Tx1GyJAX6xzT1z3zP7a/FKL4aJ6fPFVXALlfEXyEp39DUrnYoAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"four reps of ipynb\"\n        title=\"four reps of ipynb\"\n        src=\"/static/74d039ad4fe7d25fcdf76c90f10c7278/70d1f/four_reps_of_ipynb.png\"\n        srcset=\"/static/74d039ad4fe7d25fcdf76c90f10c7278/1abb1/four_reps_of_ipynb.png 250w,\n/static/74d039ad4fe7d25fcdf76c90f10c7278/7217d/four_reps_of_ipynb.png 500w,\n/static/74d039ad4fe7d25fcdf76c90f10c7278/70d1f/four_reps_of_ipynb.png 640w\"\n        sizes=\"(max-width: 640px) 100vw, 640px\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<p>This is an addendum to my 2020-01 post entitled,\n<a href=\"http://tigue.com/jupyter_book_to_colab/\">Jupyter Book to Colab</a>.</p>\n<p><a href=\"https://jupyterbook.org/features/interact.html\">Jupyter Book</a> is a\ntool which generates static HTML renderings of Jupyter <code class=\"language-text\">.ipynb</code> files.\nIt can optionally generate links to live Python kernels which can run\nthe code in the original <code class=\"language-text\">.ipynb</code> files. This is called the “interact”\nbutton.</p>\n<p>In <a href=\"http://tigue.com/jupyter_book_to_colab/\">my earlier post</a> I\ndescribed how I extended the interact button to work with Colab rather\nthan one of Jupyter Books’ already built-out interacts to Jupyer services\n(e.g. <a href=\"https://mybinder.org/\">Binder</a>).</p>\n<p>While discussing this little hack, I have found this whiteboard sketch\nhelps explain what is going on under the hood. In the context of\nJupyter-Book-interact-Colab deploy, any given Jupyter notebook\n<code class=\"language-text\">.ipynb</code> file can have four manifestions. </p>\n<p>Let’s walk through the five steps.</p>\n<h2>1. The source notebook at home</h2>\n<p>A git repository is archived somewhere, say, Microsoft GitHub (but it\ncould be any git repo). In the context of this post the repo is one\nbuilt out to work with Jupyter Book, which means is it essentially\njust a collection of Jupyter notebooks and markdown files.</p>\n<h2>2. Pre-run notebook as HTML</h2>\n<p>For step 2, the repo has been fetched from GitHub and run through\nJupyter Book with the output being a bunch of static web content\n(HTML, JavaScript, CSS, and images).</p>\n<p>Static web sites are the simplest kind of web site: they are simply\nfile servers talking HTTP. In this diagram the example static site is\n<a href=\"http://static-bar.com\">http://static-bar.com</a>.</p>\n<h2>3. Hand off to Colab</h2>\n<p>This is what in Jupyter Book is referred to as interacting, moving\nfrom a static web page rendering of an (optionally pre-run) notebook\nto something backed by a live Jupyter kernel. Normally, Jupyter Book\nwill hand off to Binder for provisioning Jupyter kernels. In my hack,\nopen source Binder is replaced with commercial\n<a href=\"https://colab.research.google.com/\">Google Colab</a>.</p>\n<p>The hand off is simply an <code class=\"language-text\">http://</code> URL to Colab, which includes/ends-with a\nmap to the <code class=\"language-text\">.ipynb</code> file that Colab should load from GitHub. That mapping\nwill result in an URL of the form:</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">https://colab.research.google.com/github/my_org/my_repo/blob/my_branch/my_file.ipynb</code></pre></div>\n<h2>4. Colab kernel spin-up</h2>\n<p>Next, the web browser follows the <code class=\"language-text\">http://colab.research.google.com</code> URL,\nloading a new web page. At Colab, an HTTP GET arrives and the URL is\nparsed. When colab sees the <code class=\"language-text\">/github/</code> part, it knows that the user is\nrequesting that an <code class=\"language-text\">.ipynb</code> file be fetched from GitHub. The tail of\nthe URL provides the organization, repo name, and relative file\npath. Colab then fetches the specified file from <code class=\"language-text\">github.com</code>.</p>\n<p>Behind the scene Colab spins up a new virtual machine to provide a\nJupyter kernel for the request. (Anyone with a gMail email address can\nhave up to two VMs running simultaneously.)</p>\n<p>Eventually (quickly) the HTTP response goes down to the browser where\nthe user sees the notebook and can run the code. </p>\n<h2>5. Persisting a modified version</h2>\n<p>“Playground mode” is the Colab term for a transient, unpersisted\nversion of a notebook running in a Colab VM.  If a reader wants to\nplay with and run the code (read: modify the input notebook) and keep\na copy, exiting playground mode will save a copy of the modified\n<code class=\"language-text\">.ipynb</code> in the users Google Drive.</p>\n<p><strong>The take away is</strong> that open source tools make it possible to have a\nstatic web site showing HTML rendering of <code class=\"language-text\">.ipynb</code> files. Those static\nHTML files can then link to Colab (or Binder) to on-demand hook the\nnotebook up to a new VM. <strong>A static web site linking to free compute.</strong></p>","frontmatter":{"title":"Jupyter Books' Many Manifestations of a Notebook","date":"March 03, 2020","description":"TODO: a discription for cover card"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/jupyter_book_notes/","previous":{"fields":{"slug":"/monocle3_on_colab/"},"frontmatter":{"title":"Monocle3 on Colab"}},"next":{"fields":{"slug":"/eight_bit_gauges/"},"frontmatter":{"title":"Eight Bit Gauges in Jupyter"}}}}}