介绍
每位数据科学家都可以从了解如何在交互式且视觉上有吸引力的仪表板中展示他们的工作中受益。使用Dash Python 库，您可以创建时尚的自定义仪表板，而无需具备丰富的 Web 应用程序开发背景。通过本指南，您将立即制作出让同事和主管印象深刻的仪表板。
Dash 是一个基于 React.js、Flask 和 Plotly.js 构建的开源 Python 库。Dash 的优点在于，通常需要前端、后端和 DevOps 团队才能构建的全栈应用现在可以由数据科学家在数小时内部署。
Dash 应用程序概述
Dash 应用程序通常由两部分组成。在第一部分，即布局部分，您可以指定应用程序在用户眼中的外观。在第二部分，即回调部分，您可以指定应用程序的交互性。
布局由 HTML 类组成，其语法与 HTML 几乎相同。回调部分包含有关布局中 HTML（和其他）元素的交互应如何通过 Python 函数影响应用元素的规范。
设计深度神经网络图像预测仪表板
以下部分将教您如何创建仪表板来显示用于图像预测的深度神经网络的结果。具体来说，您将创建一个仪表板，该仪表板加载预先训练的神经网络模型和图像数据集，使用该模型对数据集进行预测，然后动态地向用户显示图像以及模型的预测。
安装
首先安装 Dash。只需运行
pip install dash
Dash 已经可以使用了！
加载预先训练的模型
您将在仪表板中显示的模型已经过预先训练，可与其余代码一起在https://github.com/emmanueltsukerman/Dash-Tutorial上获取。
具体来说，该模型是一个用于学习 MNIST 的简单卷积神经网络 (CNN)。作为仪表板的一部分，您将使用以下代码加载此预训练模型：
from keras.models import Sequential
from keras.layers import Dense, Dropout, Flatten
from keras.layers import Conv2D, MaxPooling2D
from tensorflow.keras.models import load_model
def load_MNIST_model(model_path="MNIST_model"):
img_rows, img_cols = 28, 28
input_shape = (img_rows, img_cols, 1)
model = Sequential()
model.add(
Conv2D(32, kernel_size=(3, 3), activation="relu", input_shape=input_shape)
)
model.add(Conv2D(64, (3, 3), activation="relu"))
model.add(MaxPooling2D(pool_size=(2, 2)))
model.add(Dropout(0.25))
model.add(Flatten())
model.add(Dense(128, activation="relu"))
model.add(Dropout(0.5))
model.add(Dense(10, activation="softmax"))
model.compile(
loss=keras.losses.categorical_crossentropy,
optimizer=keras.optimizers.Adadelta(),
metrics=["accuracy"],
)
loaded_model = load_model(r".\MNIST_model")
return loaded_model
首先，克隆存储库。在克隆的文件夹中，创建一个名为app_working.py的新 Python 文件。这将是您将 Dash 仪表板源代码编码到的文件，最终看起来就像app.py。
将上面的代码块粘贴到app_working.py中。您将在仪表板初始化过程中运行此代码，因为它只能在应用程序启动时运行一次。
接下来，加载数据集。粘贴以下代码块以加载 MNIST：
import keras
from keras.datasets import mnist
from keras import backend as K
def load_MNIST_dataset():
(x_train, y_train), (x_test, y_test) = mnist.load_data()
x_train = x_train.astype("float32")
x_test = x_test.astype("float32")
x_train /= 255
x_test /= 255
y_train = keras.utils.to_categorical(y_train, 10)
y_test = keras.utils.to_categorical(y_test, 10)
return x_train, x_test, y_train, y_test
最后，您将需要在仪表板加载时运行这些功能，因此将以下几行粘贴到您的文件app_working,py 中：
x_train, x_test, y_train, y_test = load_MNIST_dataset()
MNIST_model = load_MNIST_model()
Dash 导入
在开始配置布局和交互性之前，请导入 Dash 及其库。
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.exceptions import PreventUpdate
dash_html_components库包含每个典型 HTML 组件的 Dash 版本。例如：
- html.H1(…)对应<h1></h1>
- html.div(…)对应<div></div>
- html.label(...)对应于<label></label>
还有许多其他 HTML 组件。
dash_core_components库包含使用 JS、HTML、CSS 和 ReactJS 生成的交互式组件。其中包括以下组件：
- dcc.Input(…)是一个接受用户输入的元素
- dcc.Graph(…)，用于绘制图表的元素
- dcc.Markdown(…)用于显示 Markdown
它还包括许多其他组件。PreventUpdate函数稍后将用于控制仪表板中的执行流程。
现在您已经熟悉了这些导入，还可以将其包含在代码的开头：
external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
这些导入使您能够利用 CSS 样式表来设置仪表板的样式。
通过粘贴以下行来添加一个空布局（目前）：
app.layout = html.Div()
现在在文件底部添加：
if __name__ == "__main__":
app.run_server(debug=True)
运行仪表板
此时，您应该能够运行应用程序并初始化模型。要运行该应用程序，请在终端中执行：
python app_working.py
如果您遇到任何问题，很可能是因为您的 TensorFlow 或 Keras 版本与用于训练模型的版本不同（TensorFlow==2.2.0 和 Keras==2.3.1）。
打开浏览器访问https://127.0.0.1:8050/，除了右下角的调试菜单按钮外，您应该会看到一个空的仪表板。
Dash 的一个巧妙功能是热重载，这意味着当您更改代码时，浏览器将自动刷新。换句话说，您无需在每次更改代码时重新运行应用程序。
设计布局
布局由一系列 HTML 和其他元素组成。布局的架构如下：
app.layout = html.Div(
style={"textAlign": "center"},
children=[
title,
subtitle,
button,
space,
sample_image,
model_prediction,
intermediate,
],
)
分解一下，首先，布局整体是一个div，子组件将插入其中。其次，通过将textAlign设置为center，您将向所有组件应用 CSS 样式，使所有组件在页面上垂直居中。接下来，有一系列变量，您现在将声明它们。
title = html.H1(children="Deep Neural Network Model for MNIST")
subtitle = html.Div(
style={"padding-bottom": 10},
children="Click button to pick a random image from the MNIST dataset and display the deep neural network's prediction on that image.",
)
button = html.Button(children="Predict Random Image", id="submit-val")
space = html.Br()
sample_image = html.Img(
style={"padding": 10, "width": "400px", "height": "400px"}, id="image"
)
model_prediction = html.Div(id="pred", children=None)
intermediate = html.Div(id="intermediate-operation", style={"display": "none"})
- title只是一个 H1 元素，其中包含仪表板的文本标题。
- subtitle与title类似，但它是一个div，字体较小。它还具有附加样式，底部有额外的填充。
- 按钮是一个 HTML 按钮，您将在回调部分将其连接起来。
- 空格是一个 HTML <br>，用于创建换行符。
- sample_image是用于显示图像的组件。其style属性指定了图像的大小和填充。
- model_prediction是另一个类似于subtitle的div。它将显示模型的预测，稍后您将把它连接起来。
- 中间是一个隐藏的 div，这意味着它对用户是不可见的。其目的是保存可在回调中使用的数据。稍后将详细介绍这一点。
此时，你的布局应如下所示：
添加交互性
接下来，您将向assets文件夹添加随机图像样本。此文件夹可供您的 Dash 应用程序存储和加载图像。
只需将以下代码块添加到应用程序的初始化部分（加载 MNIST 和模型的代码旁边）：
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
