在 Google Colab Notebook 中启动 Dash 应用程序

Question

如何启动 Dash 应用程序 (http://dash.plot.ly) from Google Colab (https://colab.research.google.com)？

Answer 1

据我所知，目前没有直接的方法可以做到这一点。

在下面找到类似于设置 Tensorboard (https://www.dlology.com/blog/quick-guide-to-run-tensorboard-in-google-colab/) 的解决方法。

从设置此解决方法所需的所有内容的代码单元开始：

# How to run a Dash app in Google Colab

## Requirements

### Install ngrok
!wget https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-linux-amd64.zip
!unzip ngrok-stable-linux-amd64.zip

### Run ngrok to tunnel Dash app port 8050 to the outside world. 
### This command runs in the background.
get_ipython().system_raw('./ngrok http 8050 &')

### Get the public URL where you can access the Dash app. Copy this URL.
! curl -s http://localhost:4040/api/tunnels | python3 -c \
    "import sys, json; print(json.load(sys.stdin)['tunnels'][0]['public_url'])"

### Install Dash
!pip install dash==0.31.1  # The core dash backend
!pip install dash-html-components==0.13.2  # HTML components
!pip install dash-core-components==0.39.0  # Supercharged components
!pip install dash-table==3.1.7  # Interactive DataTable component (new!)

为您的 Dash 应用添加另一个代码单元：

## Dash app (https://dash.plot.ly/getting-started)

### Save file with Dash app on the Google Colab machine
%%writefile my_app1.py
import dash
import dash_core_components as dcc
import dash_html_components as html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    dcc.Graph(
        id='example-graph',
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
            ],
            'layout': {
                'title': 'Dash Data Visualization'
            }
        }
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

在最后一个代码单元格中，您可以启动您的 Dash 应用程序（此单元格将很忙，直到您停止执行并因此停止您的 Dash 应用程序）。

### Run Dash app
!python my_app1.py

要访问 Dash 应用程序，请将上面的 ngrok.io-URL 复制并粘贴到新的浏览器选项卡（不是 127.0.0.1:8050），然后等几秒钟。

Answer 2

JupyterDash（笔记本中运行 Dash 的官方库）现在支持 Colab 上的运行应用程序。

您可以将此代码粘贴到 colab notebook 中，您的应用将内联显示：

!pip install jupyter-dash

import plotly.express as px
from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
# Load Data
df = px.data.tips()
# Build App
app = JupyterDash(__name__)
app.layout = html.Div([
    html.H1("JupyterDash Demo"),
    dcc.Graph(id='graph'),
    html.Label([
        "colorscale",
        dcc.Dropdown(
            id='colorscale-dropdown', clearable=False,
            value='plasma', options=[
                {'label': c, 'value': c}
                for c in px.colors.named_colorscales()
            ])
    ]),
])
# Define callback to update graph
@app.callback(
    Output('graph', 'figure'),
    [Input("colorscale-dropdown", "value")]
)
def update_figure(colorscale):
    return px.scatter(
        df, x="total_bill", y="tip", color="size",
        color_continuous_scale=colorscale,
        render_mode="webgl", title="Tips"
    )
# Run app and display result inline in the notebook
app.run_server(mode='inline')

Here's a GIF of what the output looks like. You can also check out this Colab notebook.

这里有一些更有用的链接：

Answer 3

谢谢。伙计们，如果 xhlulu 的建议不符合预期运行你可以像这样编辑最后一行：

app.run_server(mode='inline',host="0.0.0.0",port=1005)

Answer 4

我不久前创建了一个 video tutorial 来展示如何在 Google Colab 中共享您的 Dash 应用程序。前5分钟。

在 Google Colab Notebook 中启动 Dash 应用程序

Launch a Dash app in a Google Colab Notebook

python

dashboard

plotly-dash