Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dash live model training #211

Merged
merged 27 commits into from
Jul 24, 2019
Merged
Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
6ab1fc7
Initial Commit
celinehuang May 21, 2019
fec6e66
changed basic layout, updated README
celinehuang May 22, 2019
ec907ed
changed line chart colors and added containers to separate graphs
celinehuang May 22, 2019
1014f47
deleted unnescessary files and old links in the markdown files
celinehuang May 27, 2019
9038c93
added multi-output call back for learn more button
celinehuang May 28, 2019
7caa98a
removed unnecessary comments
celinehuang Jun 3, 2019
6fd5f99
added all csv files to the data folder and cleaned up code for the mo…
celinehuang Jun 4, 2019
be304bf
Fixed title bar, configured dropdown, centered radio items
christopherjeon Jun 25, 2019
e0634e1
Redesigned plot display mode and current accuracy
christopherjeon Jun 26, 2019
11473e5
Fixed interval control div
christopherjeon Jun 27, 2019
155c93e
Fixed run-log-storage and storage-simulated-run IDs
christopherjeon Jun 28, 2019
fc5b510
run black tests
christopherjeon Jul 5, 2019
b865f51
apply two column format for mobile layout
christopherjeon Jul 11, 2019
84895b2
correct Current Accuracy and Current Loss layouts + fix minor positio…
christopherjeon Jul 11, 2019
d8f6d25
get rid of stylesheet for iPad, will modify later
christopherjeon Jul 11, 2019
34524ef
run black tests
christopherjeon Jul 11, 2019
2f12071
implement correct layout for all mobile viewports
christopherjeon Jul 12, 2019
ccb4eec
run Black tests again
christopherjeon Jul 12, 2019
5ef771f
correct label beside radio buttoms + reposition steps
christopherjeon Jul 16, 2019
7fe92f2
update README dead link
christopherjeon Jul 17, 2019
9db3d43
fix positioning of radio buttons on second page
christopherjeon Jul 17, 2019
ee5aa44
Merge branch 'master' into dash-live-model-training
Jul 18, 2019
be62d10
fix issues brought up from Ronnie's/Sham's code review
christopherjeon Jul 18, 2019
e5a4f33
complete merge
christopherjeon Jul 18, 2019
2d6e55a
run black tests
christopherjeon Jul 18, 2019
ec44413
change color of step count
christopherjeon Jul 22, 2019
81a6e41
Merge branch 'master' into dash-live-model-training
christopherjeon Jul 24, 2019
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Binary file added .DS_Store
Binary file not shown.
Binary file added apps/.DS_Store
Binary file not shown.
7 changes: 7 additions & 0 deletions apps/dash-live-model-training/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.idea/*
run_log.csv
*.pyc
cifar10/.idea/*
*.gz
.vscode
venv
1 change: 1 addition & 0 deletions apps/dash-live-model-training/Procfile
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
web: gunicorn --pythonpath apps/dash-live-model-training app:server
93 changes: 93 additions & 0 deletions apps/dash-live-model-training/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
# Dash Live Model Training Viewer

![GitHub](https://img.shields.io/github/license/mashape/apistatus.svg)
[![GitHub stars](https://img.shields.io/github/stars/plotly/dash-live-model-training.svg)](https://github.com/plotly/dash-live-model-training/stargazers)

This is a demo of the Dash interactive Python framework developed by [Plotly](https://plot.ly/).

Dash abstracts away all of the technologies and protocols required to build an interactive web-based application and is a simple and effective way to bind a user interface around your Python code. To learn more check out our [documentation](https://plot.ly/dash).

Try out the [demo app here](https://dash-live-model-training.plot.ly/).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is a dead link!


![animated1](images/animated1.gif)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make sure this is updated!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated!


## Getting Started

### Using the demo

To use the demo, simply choose the model and dataset for which you want to replay the training, **using the two dropdown menus at the top of the page**. For every dataset, we trained a simple 1-layer Neural Network, and a small Convolutional Neural Network that were taken from the official [Tensorflow](https://www.tensorflow.org/tutorials/layers) and [Keras](https://github.com/keras-team/keras/blob/master/examples/cifar10_cnn.py) tutorials.

### Running the app locally

First create a virtual environment with conda or venv inside a temp folder, then activate it.

```
virtualenv dash-live-model-training-venv

# Windows
dash-live-model-training-venv\Scripts\activate
# Or Linux
source dash-live-model-training-venv/bin/activate
```

Clone the git repo, then install the requirements with pip

```
git clone https://github.com/plotly/dash-sample-apps.git
cd dash-sample-apps/apps/dash-live-model-training
pip install -r requirements.txt
```

Run the app

```
python app.py
```

### How to use the app

The demo app shows how the viewer works by simulating the training process of a few basic models. If you want to use the full app with your own model, follow theses steps:

1. Import the helper functions, `add_eval()` and `write_data()` from `tfutils.py`.
2. Use `add_eval()` to add the accuracy and cross-entropy operations in your tensorflow graph, if they are not already present. It takes as input `y_`, the Tensor containing the true target, aka labels, and `y`, which contains the predicted targets, aka logits. It will return two variables, accuracy and cross_entropy.
3. Create a feed dictionary ([read more about it here](https://www.tensorflow.org/versions/r1.0/programmers_guide/reading_data)) for both your training and validation batch.
4. At every step, after running the session once, call `write_data()` to write the data in the log file. Use the feed dicts, _accuracy_ and _cross_entropy_ generated in the previous steps as input. If the output log file is renamed, update the _LOGFILE_ variable inside `app.py` as well to reflect the changes.
5. Run `app.py`, and open the given link.

Make sure that you correctly clone the repo with all the required libraries. You also need the latest version of Tensorflow and Sci-kit Learn.

## About the app

### What does the app do?

For the majority of Deep Learning models, it is extremely helpful to keep track of the accuracy and loss as it is training. At the moment, the best application to do that is [Tensorboard](https://www.tensorflow.org/programmers_guide/summaries_and_tensorboard), which is a collection of visualization tools (metrics plots, image examples, graph representation, weight histogram, etc.) useful to debug and monitor the training of your model.

_Dash's Live Model Training Viewer_ is a compact visualization app that monitors core metrics of your **Tensorflow model** during training. It complements the Tensorboard by offering the following:

- **Real-time visualization**: The app is designed to visualize your metrics as they are updated inside your model.
- **Small and Lightweight**: The viewer loads a small number of important visualization, so that it loads and runs quickly.
- **Simple to use**: For simpler tensorflow models, all you need to do is to call `add_eval` to add the accuracy and cross entropy operations in the graph, and generate a log of the metrics using `write_data`. Both functions are inside `tfutils.py`, and examples are included in the `examples` directory.
- **Easy to modify**: The app is stored inside one module, and is written in under 400 lines. You can quickly modify and improve the app without breaking anything.
- **Plotly Graphs and Dash Integration**: Easily integrate the app into more complex Dash Apps, and includes all the tools found in Plotly graphs.

![flowchart](images/flowchart.png)

At the moment, the logging only works for iterative Tensorflow models. We are planning to extend it for PyTorch. You are encouraged to port the logging function (which is a simple csv logging) to Keras, Tensorflow's high-level API, MXNet, etc.

## Built With

- [Dash](https://dash.plot.ly/) - Main server and interactive components
- [Plotly Python](https://plot.ly/python/) - Used to create the interactive plots

## Authors

- **Celine Huang** [@celinehuang](https://github.com/celinehuang)
- **Xing Han Lu** - _Initial Work_ - [@xhlulu](https://github.com/xhlulu)

See also the list of [contributors](https://github.com/your/project/contributors) who participated in this project.

## Screenshots

![screenshot1](images/screenshot1.png)

![screenshot2](images/screenshot2.png)