2022 refactor - dash-live-training-model

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)
 

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

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%;
+} 

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.
 

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

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 

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

apps/dash-live-model-training/runtime.txt

@@ -0,0 +1 @@
+python-3.8.0