diff --git a/apps/dash-live-model-training/.gitignore b/apps/dash-live-model-training/.gitignore deleted file mode 100644 index c98b9ad60..000000000 --- a/apps/dash-live-model-training/.gitignore +++ /dev/null @@ -1,7 +0,0 @@ -.idea/* -run_log.csv -*.pyc -cifar10/.idea/* -*.gz -.vscode -venv diff --git a/apps/dash-live-model-training/README.md b/apps/dash-live-model-training/README.md index e1a2bbe64..84c49309f 100644 --- a/apps/dash-live-model-training/README.md +++ b/apps/dash-live-model-training/README.md @@ -9,7 +9,7 @@ Dash abstracts away all of the technologies and protocols required to build an i Try out the [demo app here](https://dash-gallery.plotly.host/dash-live-model-training/). -![animated1](images/animated.gif) +![animated1](assets/github/animated.gif) ## Getting Started @@ -46,7 +46,7 @@ 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: +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 these 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. @@ -70,7 +70,7 @@ _Dash's Live Model Training Viewer_ is a compact visualization app that monitors - **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) +![flowchart](assets/github/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. @@ -89,7 +89,7 @@ See also the list of [contributors](https://github.com/your/project/contributors ## Screenshots -![screenshot1](images/screenshot-1.png) +![screenshot1](assets/github/screenshot-1.png) -![screenshot2](images/screenshot-2.png) +![screenshot2](assets/github/screenshot-2.png) diff --git a/apps/dash-live-model-training/app.py b/apps/dash-live-model-training/app.py index 8bf17b394..cf672da34 100644 --- a/apps/dash-live-model-training/app.py +++ b/apps/dash-live-model-training/app.py @@ -1,10 +1,8 @@ import dash import pathlib -import dash_core_components as dcc -import dash_html_components as html +from dash import Dash, html, dcc, Input, Output, State, callback, callback_context import pandas as pd import plotly.graph_objs as go -from dash.dependencies import Input, Output from plotly import tools from demo_utils import demo_callbacks, demo_explanation diff --git a/apps/dash-live-model-training/assets/css/app.css b/apps/dash-live-model-training/assets/css/app.css new file mode 100644 index 000000000..8b3802ab0 --- /dev/null +++ b/apps/dash-live-model-training/assets/css/app.css @@ -0,0 +1,61 @@ +/* Header */ +.header { + height: 10vh; + display: flex; + padding-left: 2%; + padding-right: 2%; + font-family: playfair display, sans-serif; + font-weight: bold; +} + +.header .header-title { + font-size: 5vh; +} +.subheader-title { + font-size: 1.5vh; +} + +.header-logos { + margin-left: auto; +} +.header-logos img { + margin-left: 3vh !important; + max-height: 5vh; +} + + +/* Demo button css */ +.demo-button { + font-size: 1.5vh; + font-family: Open Sans, sans-serif; + text-decoration: none; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 8px; + font-weight: 700; + -webkit-padding-start: 1rem; + padding-inline-start: 1rem; + -webkit-padding-end: 1rem; + padding-inline-end: 1rem; + color: #ffffff; + letter-spacing: 1.5px; + border: solid 1.5px transparent; + box-shadow: 2px 1000px 1px #0c0c0c inset; + background-image: linear-gradient(135deg, #7A76FF, #7A76FF, #7FE4FF); + -webkit-background-size: 200% 100%; + background-size: 200% 100%; + -webkit-background-position: 99%; + background-position: 99%; + background-origin: border-box; + transition: all .4s ease-in-out; + padding-top: 1vh; + padding-bottom: 1vh; + vertical-align: super; +} + +.demo-button:hover { + color: #7A76FF; + background-position: 0%; +} \ No newline at end of file diff --git a/apps/dash-live-model-training/images/animated.gif b/apps/dash-live-model-training/assets/github/animated.gif similarity index 100% rename from apps/dash-live-model-training/images/animated.gif rename to apps/dash-live-model-training/assets/github/animated.gif diff --git a/apps/dash-live-model-training/images/flowchart.png b/apps/dash-live-model-training/assets/github/flowchart.png similarity index 100% rename from apps/dash-live-model-training/images/flowchart.png rename to apps/dash-live-model-training/assets/github/flowchart.png diff --git a/apps/dash-live-model-training/images/screenshot-1.png b/apps/dash-live-model-training/assets/github/screenshot-1.png similarity index 100% rename from apps/dash-live-model-training/images/screenshot-1.png rename to apps/dash-live-model-training/assets/github/screenshot-1.png diff --git a/apps/dash-live-model-training/images/screenshot-2.png b/apps/dash-live-model-training/assets/github/screenshot-2.png similarity index 100% rename from apps/dash-live-model-training/images/screenshot-2.png rename to apps/dash-live-model-training/assets/github/screenshot-2.png diff --git a/apps/dash-live-model-training/assets/dash-logo.png b/apps/dash-live-model-training/assets/images/dash-logo.png similarity index 100% rename from apps/dash-live-model-training/assets/dash-logo.png rename to apps/dash-live-model-training/assets/images/dash-logo.png diff --git a/apps/dash-live-model-training/assets/images/plotly-logo-light-theme.png b/apps/dash-live-model-training/assets/images/plotly-logo-light-theme.png new file mode 100644 index 000000000..4920c6e34 Binary files /dev/null and b/apps/dash-live-model-training/assets/images/plotly-logo-light-theme.png differ diff --git a/apps/dash-live-model-training/constants.py b/apps/dash-live-model-training/constants.py new file mode 100644 index 000000000..e69de29bb diff --git a/apps/dash-live-model-training/demo.md b/apps/dash-live-model-training/demo.md index 3a3cd188f..51d122737 100644 --- a/apps/dash-live-model-training/demo.md +++ b/apps/dash-live-model-training/demo.md @@ -31,7 +31,7 @@ _Dash's Live Model Training Viewer_ is a compact visualization app that monitors - **Plotly Graphs and Dash Integration**: Easily integrate the app into more complex Dash Apps, and includes all the tools found in Plotly graphs. Here is a flowchart of the process from model training to visualization: -![flowchart](https://raw.githubusercontent.com/plotly/dash-live-model-training/master/images/flowchart.png) +![flowchart](assets/github/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. diff --git a/apps/dash-live-model-training/demo_utils.py b/apps/dash-live-model-training/demo_utils.py index eae7f8aad..77561279a 100644 --- a/apps/dash-live-model-training/demo_utils.py +++ b/apps/dash-live-model-training/demo_utils.py @@ -1,7 +1,5 @@ -import dash_core_components as dcc -import dash_html_components as html +from dash import Dash, html, dcc, Input, Output, State, callback, callback_context import pandas as pd -from dash.dependencies import Input, Output, State import pathlib # get relative data folder diff --git a/apps/dash-live-model-training/gitignore b/apps/dash-live-model-training/gitignore new file mode 100644 index 000000000..d8e187da3 --- /dev/null +++ b/apps/dash-live-model-training/gitignore @@ -0,0 +1,191 @@ +# .gitignore specifies the files that shouldn't be included +# in version control and therefore shouldn't be included when +# deploying an application to Dash Enterprise +# This is a very exhaustive list! +# This list was based off of https://github.com/github/gitignore + +# Ignore data that is generated during the runtime of an application +# This folder is used by the "Large Data" sample applications +runtime_data/ +data/ + +# Omit SQLite databases that may be produced by dash-snapshots in development +*.db + +# Byte-compiled / optimized / DLL files +__pycache__/ +*.py[cod] +*$py.class + + +# Jupyter Notebook + +.ipynb_checkpoints +*/.ipynb_checkpoints/* + +# IPython +profile_default/ +ipython_config.py + +# Environments +.env +.venv +env/ +venv/ +ENV/ +env.bak/ +venv.bak/ + +# Spyder project settings +.spyderproject +.spyproject + +*.log +local_settings.py +db.sqlite3 +db.sqlite3-journal + + +# macOS General +.DS_Store +.AppleDouble +.LSOverride + +# Icon must end with two \r +Icon + +# Thumbnails +._* + +# Files that might appear in the root of a volume +.DocumentRevisions-V100 +.fseventsd +.Spotlight-V100 +.TemporaryItems +.Trashes +.VolumeIcon.icns +.com.apple.timemachine.donotpresent + +# Directories potentially created on remote AFP share +.AppleDB +.AppleDesktop +Network Trash Folder +Temporary Items +.apdisk + +# Windows thumbnail cache files +Thumbs.db +Thumbs.db:encryptable +ehthumbs.db +ehthumbs_vista.db + +# Dump file +*.stackdump + +# Folder config file +[Dd]esktop.ini + +# Recycle Bin used on file shares +$RECYCLE.BIN/ + +# Windows Installer files +*.cab +*.msi +*.msix +*.msm +*.msp + +# Windows shortcuts +*.lnk + +# History files +.Rhistory +.Rapp.history + +# Session Data files +.RData + +# User-specific files +.Ruserdata + +# Example code in package build process +*-Ex.R + +# Output files from R CMD check +/*.Rcheck/ + +# RStudio files +.Rproj.user/ + +# produced vignettes +vignettes/*.html +vignettes/*.pdf + +# OAuth2 token, see https://github.com/hadley/httr/releases/tag/v0.3 +.httr-oauth + +# knitr and R markdown default cache directories +*_cache/ +/cache/ + +# Temporary files created by R markdown +*.utf8.md +*.knit.md + +# R Environment Variables +.Renviron + +# Linux +*~ + +# temporary files which can be created if a process still has a handle open of a deleted file +.fuse_hidden* + +# KDE directory preferences +.directory + +# Linux trash folder which might appear on any partition or disk +.Trash-* + +# .nfs files are created when an open file is removed but is still being accessed +.nfs* + +# VSCode +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json +*.code-workspace + +# SublineText +# Cache files for Sublime Text +*.tmlanguage.cache +*.tmPreferences.cache +*.stTheme.cache + +# Workspace files are user-specific +*.sublime-workspace + +# Project files should be checked into the repository, unless a significant +# proportion of contributors will probably not be using Sublime Text +# *.sublime-project + +# SFTP configuration file +sftp-config.json + +# Package control specific files +Package Control.last-run +Package Control.ca-list +Package Control.ca-bundle +Package Control.system-ca-bundle +Package Control.cache/ +Package Control.ca-certs/ +Package Control.merged-ca-bundle +Package Control.user-ca-bundle +oscrypto-ca-bundle.crt +bh_unicode_properties.cache + +# Sublime-github package stores a github token in this file +# https://packagecontrol.io/packages/sublime-github +GitHub.sublime-settings \ No newline at end of file diff --git a/apps/dash-live-model-training/requirements.txt b/apps/dash-live-model-training/requirements.txt index 550c4d198..90f607c21 100644 --- a/apps/dash-live-model-training/requirements.txt +++ b/apps/dash-live-model-training/requirements.txt @@ -1,5 +1,4 @@ -dash==1.0.0 -gunicorn==19.9.0 -scipy==1.2.1 -numpy==1.16.3 -pandas==0.24.2 +dash==2.4.1 +pandas==1.4.2 +gunicorn==20.1.0 +scipy==1.8.1 diff --git a/apps/dash-live-model-training/runtime.txt b/apps/dash-live-model-training/runtime.txt new file mode 100644 index 000000000..cfa660c42 --- /dev/null +++ b/apps/dash-live-model-training/runtime.txt @@ -0,0 +1 @@ +python-3.8.0 \ No newline at end of file