--- a
+++ b/templates/index.html
@@ -0,0 +1,151 @@
+<!-------------------------------------------------------------------------------------
+ * 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 %}
\ No newline at end of file