Editing front-end code in colab is tricky - you can’t keep the code on the same screen as the output and you’re stuck typing in a giant text block:
This page shows how to set up a better, hot reloading dev environment. Code is edited locally, uploaded to a public server and polled for changes in the colab iframe.
First, add a python function for js to call and embed some HTML in the colab:
import IPython
from google.colab import output
def get_py_data(number):
output.eval_js('updateData({})'.format(number*2))
output.register_callback('get_py_data', get_py_data)
HTML = '''
<link rel='stylesheet' href='https://roadtolarissa.com/colab-test/style.css'>
<script src='https://roadtolarissa.com/worlds-group-2017/d3_.js'></script>
<div id='buttons'></div>
<div id='graph'></div>
<script>window.__hotReloadTimeoutMS = 250</script>
<script src='https://roadtolarissa.com/colab-test/watch-files.js'></script>
'''
IPython.display.display(IPython.display.HTML(HTML))Next, run this command locally to watch for changes and upload them to the public server:
ls *.* | entr rsync -a "$PWD" demo@roadtolarissa.com:../../usr/share/nginx/html/You could also directly edit the files on the server with vim or vscode.
In the colab iframe, watch-files.js checks for changes to roadtolarissa.com/colab-test/script.js every 250ms. If the file has changed, it is eval’d and your changes are immediately visible.
Future work
I think there’s a way to package this up as a python library that can run inside of colab. I just can’t figure out the right place to put code that:
- is accessible from the iframe without CORS issues
- can be updated and read in < 50ms
- persists for the next person
SSH into colab might work (and could replacing polling with web sockets!) but that requires sending traffic through ngrok — not good for private data.
Other things that would be nice:
- Showing the visualization without requiring everyone start a kernel is nice. Inlining static data as JSON inside the HTML does this.
- Sending an ArrayBuffer or npy to JS instead of a giant string. This could be done by running a python server in colab.
- Network round-trip is too slow to update on slider drag. Falcon does a neat trick where all possible values of the slider are computed and sent the client on dragstart.