I tried to make a machine learning application with Dash (+ Docker) part1 ~ Environment construction and operation check ~

Introduction

Motivation

While studying machine learning, I wanted to create something, and I also wanted to touch Plotly, a visualization tool, so I worked on developing an app with Dash, which uses Plotly. The actually created deliverable will be here. I wrote this article for the purpose of keeping a learning record. I am a beginner in application development, but thank you.

Target audience

I hope it will be helpful for those who are interested in application development with Dash, or those who want to make deliverables related to machine learning and data science but are wondering what to make. It is assumed that you have knowledge of Docker. About Docker, [Kame-san's blog](https://datawokagaku.com/category/%e8%ac%9b%e5%ba%a7%e4%b8%80%e8%a6%a7/docker%e8% b6% 85% e5% 85% a5% e9% 96% 80 /) (Udemy course if you want to learn deeply) is easy to understand and recommended.

What is Dash?

Dash is one of Python's web application frameworks. It is an open source framework developed by Plotly, and can be used in other languages such as R. Django, flask, etc. are famous in Python's web application framework, but Dash is characterized by ** specializing in visualization **. Flask, Plotly.js, and React.js are running on the back end of Dash, and the core Plotly.js is a JavaScript-based visualization tool that allows you to draw interactive diagrams. In summary, Dash makes it easy to create dynamic dashboard apps without any ** knowledge of JavaScript **. Even if you explain it in words, it's hard to get an image, so please take a look at the sample app published on the Official Site. There are many machine learning apps, and the source code is available on GitHub, but not all, so I think it will be useful as one of the output methods for machine learning.

Environment

The environment was built with Docker by referring to Article of this person. Prepare the following files in the directory for the Dash application ('Dash_App' this time).

<Directory structure>
Dash_App/
　　├ app.py
　　├ Dockerfile
　　└ docker-compose.yml

Dockerfile

FROM python:3.7.3
USER root

RUN apt-get update
RUN apt-get install -y vim less
RUN apt-get install -y zsh less
RUN pip install --upgrade pip
RUN pip install --upgrade setuptools

RUN pip install \
    dash==1.16.3 \
    pandas \
    category_encoders \
    scikit-learn

ENV LANG ja_JP.UTF-8
ENV LANGUAGE ja_JP:ja
ENV LC_ALL ja_JP.UTF-8

EXPOSE 5050
CMD ["bash"]

docker-compose.yml

version: '3'
services:
  dash-app:
    restart: always
    build: .
    container_name: 'dash-app'
    ports:
      - "5050:5050"
    working_dir: '/root/'
    tty: true
    volumes:
      - .:/root/src/
      - ~/.zshrc:/root/.zshrc

I will write the contents of the application in app.py. First of all, to check the operation, copy the code in the official tutorial.

app.py

import dash
import dash_core_components as dcc 
import dash_html_components as html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(children=[

    html.H1(children='Hello Dash'),
    html.Div(children='Dash: A web application framework for Python.'),
    dcc.Graph(
        id='example-graph',
        figure={
            'data':[{'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                    {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'}],
            'layout':{'title': 'Dash Data Visualization'}
        }
    )
])

if __name__ == '__main__':
    app.run_server(host='0.0.0.0', port=5050, debug=True)

Note that host = '0.0.0.0' and port = 5050 are added and specified in the code part (bottom line) that starts the server. After creating the file, start the container with the following command.

$ docker-compose up -d --build

Once the container is up, enter the container and run app.py as in the following command. * Dash-app is the container name specified in docker-compose.yml.

$ docker-compose exec dash-app zsh -c "python src/app.py"

If there is no problem, the app will start. Access localhost: 5050 from your browser, and if the application screen shown below is displayed, it is successful. * Click "control + C" to exit the app.

in conclusion

I introduced how to build a Dash environment with a Docker container (although I just modified the Dockerfile a little while looking at another article ...). Docker is convenient because you can quickly build the most troublesome environment. In Next article (part2), I would like to introduce how to write app.py by focusing on the basic part while excerpting from the official tutorial. .. Thank you very much.