--- a
+++ b/dash/main_2.py
@@ -0,0 +1,264 @@
+# - * -coding: utf - 8 - * -
+import base64
+import time
+import dash
+import dash_core_components as dcc
+import dash_html_components as html
+import dash_daq as daq
+
+
+import pandas as pd
+import numpy as np
+import numpy as np
+
+import cv2
+
+
+# prepare the data--begin
+
+cases = pd.read_csv('../data/valid-acl.csv',
+                    header=None,
+                    names=['Case', 'Abnormal'],
+                    dtype={
+                        'Case': str,
+                        'Abnormal': np.int64
+                    }
+                    )
+case_list = cases['Case'].tolist()
+
+
+predictions = pd.read_csv('./val_data.csv')
+
+
+# prepare the data--end
+
+
+app = dash.Dash()
+
+# Boostrap CSS.
+
+app.css.append_css({
+    'external_url': "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+})  # noqa: E501
+
+
+app.layout = html.Div(
+    [
+        html.Div(
+            html.H1(children='Interpretation of MRNet models through Class Activation Maps (CAM)',
+                    style={
+                        'text-align': 'center'
+                    }
+                    ),
+        ),
+
+        html.Div(
+            [
+                html.Div(
+                    [
+                        html.P('Select an MRI exam:'),
+                        html.Div([
+                            dcc.Dropdown(
+                                id='cases',
+                                options=[{
+                                    'label': case,
+                                    'value': case
+                                }
+                                    for case in case_list
+                                ],
+                                placeholder="Pick a case",
+                                clearable=False
+                            )
+                        ],
+                            style={
+                            'margin-bottom': 20
+                        }
+                        ),
+                    ],
+                    className='col-3',
+                    style={
+                        'margin-top': '10'
+                    }
+                ),
+                html.Div([
+                    html.Div([
+                        html.Div([
+                            html.P('Select true labels :'),
+                            dcc.RadioItems(
+                                id="label_radioitems",
+                                options=[
+                                    {'label': 'Positive (ACL tear)',
+                                     'value': 'acl'},
+                                    {'label': 'Negative (Normal)',
+                                     'value': 'normal'},
+                                ],
+                                value='acl',
+                                labelStyle={'display': 'inline-block'}
+                            ),
+                        ],
+                            style={'float': 'left', 'width': '45%'}
+                        ),
+
+                        html.Div([
+                            html.P('Select predicted labels :'),
+                            dcc.RadioItems(
+                                id="pred_radioitems",
+                                options=[
+                                    {'label': 'Positive (ACL tear)',
+                                     'value': 'acl'},
+                                    {'label': 'Negative (Normal)',
+                                     'value': 'normal'},
+                                ],
+                                value='acl',
+                                labelStyle={'display': 'inline-block'}
+                            ),
+                        ]
+                        ),
+                    ]),
+                ],
+                    className='col-6'
+                ),
+                html.Div([
+                    html.Div(id="number_of_cases"),
+                    html.Span(
+                        "txt",
+                        id="label_badge",
+                        className="badge badge-success badge-large",
+                        style={'font-size': '15px'}
+                    ),
+                ],
+                    className='col-3'
+
+                )
+
+            ],
+            className="row alert alert-success",
+        ),
+
+        html.Div([
+            html.Div([
+                html.P(id='summary', style={'font-size': '20px'}),
+                html.Div([
+                    html.Div('This probability is a weighted average of the three probabilities of tears over each plane', style={
+                        'float': 'left', 'font-size': '20px'}),
+                    html.Div('Slide over the slices of each MRI to inspect highlighted regions of tear as depicted by CAMs', style={
+                        'float': 'left', 'font-size': '20px'}),
+                ],
+                )
+            ],
+                className="col-12 alert alert-info"),
+        ],
+            className='row'
+        ),
+
+        html.Hr(),
+
+        html.Div(
+            [
+                html.Div([
+                    html.Div([
+                        dcc.Slider(id='slider_axial', updatemode='drag')
+                    ],
+                        style={'margin-right': '5px'}
+
+                    ),
+                    html.Hr(),
+                    html.P(id="score_axial", style={'text-align': 'center'}),
+                    html.Div([
+                        html.Div([
+                            html.Img(
+                                id="slice_axial",
+                            ),
+                        ],
+                            style={'float': 'left', 'margin-right': '5px'}
+                        ),
+                        html.Div([
+                            html.Img(
+                                id="cam_axial",
+                            ),
+                        ],
+                        )
+                    ],
+
+                    ),
+                    html.P(id="title_axial", style={'text-align': 'center'})
+                ],
+                    className="col-4"
+                ),
+                html.Div([
+                    html.Div([
+                        dcc.Slider(id='slider_coronal', updatemode='drag')
+                    ],
+                        style={'margin-right': '5px'}
+
+                    ),
+                    html.Hr(),
+                    html.P(id="score_coronal", style={'text-align': 'center'}),
+                    html.Div([
+                        html.Div([
+                            html.Img(
+                                id="slice_coronal",
+                            ),
+                        ],
+                            style={'float': 'left', 'margin-right': '5px'}
+                        ),
+                        html.Div([
+                            html.Img(
+                                id="cam_coronal",
+                            ),
+                        ],
+                        )
+                    ],
+
+                    ),
+                    html.P(id="title_coronal", style={'text-align': 'center'})
+                ],
+                    className="col-4"
+                ),
+                html.Div([
+                    html.Div([
+                        dcc.Slider(id='slider_sagittal', updatemode='drag')
+                    ]),
+                    html.Hr(),
+                    html.P(id="score_sagittal", style={
+                           'text-align': 'center'}),
+                    html.Div([
+                        html.Div([
+                            html.Img(
+                                id="slice_sagittal",
+                            ),
+                        ],
+                            style={'float': 'left', 'margin-right': '5px'}
+                        ),
+                        html.Div([
+                            html.Img(
+                                id="cam_sagittal",
+                            ),
+                        ],
+                        )
+                    ],
+
+                    ),
+                    html.P(id="title_sagittal", style={'text-align': 'center'})
+
+
+                ],
+                    className="col-4"
+                ),
+
+            ],
+            className='row'
+        )
+
+
+
+
+
+
+    ],
+    className='container-fluid',
+)
+
+
+if __name__ == '__main__':
+    app.run_server(debug=True, port=8060)