<!-------------------------------------------------------------------------------------

 * Project     : Chest X-Ray Pathology Detection and Localization using Deep Learning

 * Author Name : Rammuni Ravidu Suien Silva

 * UoW No      : 16267097

 * IIT No      : 2016134

 * Module      : Final Year Project 20/21

 * Supervisor  : Mr Pumudu Fernando

 * Prototype    : Web Interface - FrontEnd - HTML

 * File         : UI elements

 * University of Westminster, UK || IIT Sri Lanka

-------------------------------------------------------------------------------------->

{% extends "base.html" %} {% block content %}

    <h4 style="text-align:center">Upload CXR Below</h4>

    <!--Main body div of the web app-->

    <div id="main-app-body">

        <!--Input form-->

        <form id="upload-cxr-form" method="post" enctype="multipart/form-data">

            <label for="imageUpload" class="upload-label btn btn-primary btn-lg btn-block">

                SELECT Chest X-Ray IMAGE

            </label>

            <div class="form-group">

                <label for="modelSelect">Model Selection</label>

                <select class="form-control" id="modelSelect">

                    <option>0</option>

                    <option>1</option>

                    <option>2</option>

                </select>

            </div>

            <input type="file" name="files" class="cxrImgUpload" id="imageUpload" accept="image/png, image/jpeg"

                   multiple/>

        </form>

        <!---CXR Image Preview Section-->

        <div class="image-section" style="display:none;">

            <div class="img-preview" style="display:none;">

                <div class="cxr-preview" id="cxr-preview-0"></div>

            </div>

            <div class="img-preview" style="display:none;">

                <div class="cxr-preview" id="cxr-preview-1"></div>

            </div>

            <div class="img-preview" style="display:none;">

                <div class="cxr-preview" id="cxr-preview-2"></div>

            </div>

            <div class="img-preview" style="display:none;">

                <div class="cxr-preview" id="cxr-preview-3"></div>

            </div>

            <div class="img-preview" style="display:none;">

                <div class="cxr-preview" id="cxr-preview-4"></div>

            </div>

            <div class="img-preview" style="display:none;">

                <div class="cxr-preview" id="cxr-preview-5"></div>

            </div>

            <div class="img-preview" style="display:none;">

                <div class="cxr-preview" id="cxr-preview-6"></div>

            </div>

            <div class="img-preview" style="display:none;">

                <div class="cxr-preview" id="cxr-preview-7"></div>

            </div>

            <div class="img-preview" style="display:none;">

                <div class="cxr-preview" id="cxr-preview-8"></div>

            </div>

            <div class="img-preview" style="display:none;">

                <div class="cxr-preview" id="cxr-preview-9"></div>

            </div>

            <div>

                <button type="button" class="btn btn-primary btn-lg" id="btn-detect">Run Scan</button>

                <button type="button" class="btn btn-primary btn-lg" id="btn-localize" style="display:none;">Run

                    Localization

                </button>

            </div>

        </div>

        <button id="loader_ani" class="btn btn-primary btn-lg" type="button" style="display:none;" disabled>

            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>

            Scanning...

        </button>

        <button id="loader_ani_localize" class="btn btn-primary btn-lg" type="button" style="display:none;" disabled>

            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>

            Localizing...

        </button>

        <button id="loader_localized" class="btn btn-primary btn-lg" type="button" style="display:none;" disabled>

            Localized

        </button>

        <button id="btn-save" class="btn btn-primary btn-lg" type="button" style="display:none;">

            Save

        </button>

        <!-- Displaying Results -->

        <div id="result"></div>

        <!---CXR result printing section-->

        <div class="loc-result-print"><h2 align="center"><u>LOCALIZATIONS</u></h2></div>

        <!---CXR Info Modal-->

        <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"

             aria-hidden="true">

            <div class="modal-dialog modal-lg">

                <div class="modal-content">

                    <div class="modal-header">

                        <h4 class="modal-title">LAB CXR Info</h4>

                        <button type="button" class="close" data-dismiss="modal">&times;</button>

                    </div>

                    <div class="modal-body">

                        Below pathologies can be detected through each model

                        <ol>

                            <li class="list-group-item d-flex justify-content-between align-items-start">

                                <div class="ms-2 me-auto">

                                    <div class="font-weight-bold">Model-0</div>

                                    Enlarged Cardiomediastinum, Cardiomegaly, Lung Lesion, Lung Opacity,

                                    Edema, Consolidation, Pneumonia, Atelectasis, Pneumothorax, Pleural Effusion,

                                    Pleural Other, Fracture

                                </div>

                                <span class="badge bg-primary rounded-pill">12 Pathologies</span>

                            </li>

                            <li class="list-group-item d-flex justify-content-between align-items-start">

                                <div class="ms-2 me-auto">

                                    <div class="font-weight-bold">Model-1</div>

                                    Nodule, Cardiomegaly, Emphysema, Fibrosis, Edema, Consolidation, Pneumonia,

                                    Atelectasis, Pneumothorax, Pleural Effusion, Mass, Infiltration, Hernia,

                                    Plueral Thickening

                                </div>

                                <span class="badge bg-primary rounded-pill">14 Pathologies</span>

                            </li>

                        </ol>

                        <ul>

                            <li>

                                <small class="author">Author : Rammuni Silva Ravidu Suien</small>

                            </li>

                            <li>

                                <small class="author">Contact : ravidu.2016134@iit.ac.lk |

                                    w1626709@my.westminster.ac.uk</small>

                            </li>

                            <li>

                                <small class="author">Final Year Project Prototype - Web App</small>

                            </li>

                            <li>

                                <a href="http://bit.ly/LABCXR_SAMPLE_XRAYS">Download Sample CXRs</a>

                            </li>

                        </ul>

                    </div>

                </div>

            </div>

        </div>

    </div>

{% endblock %}