Having a visual product, website or dashboard to show what your arduous efforts on a coding/machine learning project amounted to is something truly spectacular! Yet, it's often extremely difficult as numerous tools and technologies are usually required. Don't stress though, we'll discuss and compare two frameworks (Dash and Streamlit) which make it simple and easy to create an impressive portfolio (without a steep learning curve)!
You just created a machine learning model. It took a long time, but it's finally done, and you want to take in your victory for a second. You deserve a break... but wise old you knows the importance of creating a monument to show off your work.
It doesn't have to be that way though... you can find middle ground. Something simple enough to be understood in a few days, but complex enough... well, for nearly anything 🤓! Welcome to Dash. You still need to know a few web fundamentals (HTML and CSS), but at least your development journey has a clearly defined path ahead. Even if it feels slightly clunky, it does get the job done well enough!
The whole process can be dumbed down to three decisions:
- What you want on the page (text, graphs, tables, images, etc)
- How to arrange and style the page (using CSS)
- How you want the user to interact with the page
Get Started with Dash
To get started, make sure you have Dash installed.
With plain vanilla Python use
pip install dash and for Anaconda
conda install -c conda-forge dash.
Next, create a new Python file and import the relevant libraries:
import dash import dash_core_components as dcc import dash_html_components as html
If you try and run the app so far, you'll notice one thing - nothing happens. That's because we actually have to create a Dash app object and tell it to start.
app = dash.Dash(__name__, external_stylesheets=["https://codepen.io/chriddyp/pen/bWLwgP.css"]) app.title = "Allocate++" if __name__ == "__main__": app.run_server(debug=True)
We can include a style sheet (CSS using
external_stylesheets) and set our website's title (
app.title) to make things look better.
__name__ == "__main__" just ensures that the website only launches when directly started (not when imported in another file).
If we try to run this code, in the terminal we'll get a message like:
Running on http://127.0.0.1:8050/ Debugger PIN: 409-929-250 * Serving Flask app "Main" (lazy loading) * Environment: production WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead. * Debug mode: on Running on http://127.0.0.1:8050/ Debugger PIN: 791-028-264
It indicates that your app has started and can be found using the URL
Although it's currently just a blank page (real fancy-schmancy), it does indicate that everything is working fine.
Once you're ready to progress, try adding in a heading:
app.layout = html.H1(children="Fancy-Schmancy Website")
After you save the file, that website should automatically reload. If it hasn't reloaded, or there are popups on the screen, you probably have an error in the source code. Just check the actual terminal/debugger for more information.
Now that you're familiar with how to get a basic website, let's move onto transitioning your concept into code.
It starts with what's called a layout, which is composed of components.
Dash provides core (
dash_core_components) and HTML (
You always start using the HTML elements, since they provide the basic building blocks for text and grouping components together, before moving onto the core components.
Core components offer more interactivity (graphs, tables, check box's...).
It's now natural to ask, how to style the web page.
In short, you use CSS (cascading style sheets) for this.
Dash themselves provide concrete overviews of core components and trusty Mozilla have an amazing HTML and CSS intro.
Several examples of how to use the elements are here.
The last part of any Dash app is making it responsive. Getting the buttons you click, text you enter and images you upload... do something! This is where things would normally get difficult, but here it really isn't too bad. With Dash, all you've got to define is a function which receives and controls specific element/s properties. Properties start with the "@" symbol.
"output element id", "property to set value of")], [dash.dependencies.Input("input element id", "input property")] ) def update_output(value): return value[dash.dependencies.Output(
We can do this for multiple elements by adding more
Output objects to those lists!
One thing to watch out for here though - more
Input objects means more inputs to the function are required, and more
Output objects mean more values to return (sounds obvious, but it can easily slip your mind).
Also, note that you shouldn't modify global variables within these functions (this for technical reasons is an antipattern).
Further documentation is provided on these callbacks.
There it is, everything you'll need to know to start creating an interactive and impressive web application! It'll likely still be difficult to create one, but the official documentation and tutorials for Steamlit and Dash are amazing. There are also cool galleries of sample apps using Dash and Streamlit (so you can learn from others examples).
I hope this has helped you out! Dash helped me hack together my first dashboard in a day. If you've made a cool website, app or portfolio make sure to comment and tell me about them. Feel free to check out my other posts - some highlights are practical coding tools, web scrapping and machine learning (with the practical project). You can follow my newsletter and Twitter for updates 😉.
Photo by Luke Peters on Unsplash