How do I show or serve panel in Colab?

I’ve tried to explore if Panel works in Colab and in my simple example it does.

But I then thought, wouldn’t it be powerful if I could show or serve the Panel app in order to get some quick feedback from colleagues or friends.

But it seems that the websockets pose a challenge. How do I solve that?

panel-colab

!pip install --upgrade panel bokeh ipykernel
import panel as pn
import param
pn.extension()
pn.pane.Markdown("Hello World")
pn.config.sizing_mode="stretch_width"

class App(param.Parameterized):
  value = param.Integer(default=5, bounds=(0,50), step=5)
  value2 = param.Integer(default=5, bounds=(0,50), step=5)
  progress = param.Parameter()
  view = param.Parameter()

  def __init__(self, **params):
    super().__init__(**params)
    self.progress = pn.widgets.Progress(value=10)
    self.view = pn.Column(
        "# Hello Panel-Colab World",
        pn.Param(self, parameters=["value", "value2"]),
        self.progress,
        max_width=500,
    )

  @param.depends("value", "value2", watch=True)
  def _update(self):
    self.progress.value = self.value+self.value2

app = App()
app.view
from google.colab.output import eval_js
url = eval_js("google.colab.kernel.proxyPort(8000)")
print(url)
websocket_origin = url.replace("https://", "").replace("/", "")
print(websocket_origin)
app.view.show(port=8000, websocket_origin=websocket_origin)
3 Likes

Anyone knows how to solve this?

See this topic in the Bokeh discourse. I think the limitation is on Google’s end and its restrictions on websocket connections.

https://discourse.bokeh.org/t/colabs-bokeh-server/5286

1 Like

@Marc I’m running into the same issue. When I use a Panel template, I do see the header of the template, just not the plots. I guess there is not a solution yet :smiling_face_with_tear: I’m going to see if ngrok works next

1 Like