--- a
+++ b/static/js/serverRequests.js
@@ -0,0 +1,181 @@
+/**************************************************************************************
+ * 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
+ * File         : Server AJAX requests functions
+ * University of Westminster, UK || IIT Sri Lanka
+ **************************************************************************************/
+
+
+// Image upload front-end
+// Initialization of page
+jQuery(function () {
+    $('.image-section').hide();
+    $('.loader').hide();
+    detResults.hide();
+
+    // Uploaded CXR Preview
+    function readURL(input) {
+        if (input.files && input.files[0]) {
+            $('.img-preview').each(function (i, row_el) {
+                if (i >= input.files.length || !input.files[i].type.match('image.*')) {
+                    return false;
+                }
+
+                let reader = new FileReader();
+                let cxrPreviewId = "#cxr-preview-" + i;
+
+                $(this).css('display', 'inline-block');
+                reader.onload = function (e) {
+                    $(cxrPreviewId).css('background-image', 'url(' + e.target.result + ')');
+                    $(cxrPreviewId).hide();
+                    $(cxrPreviewId).fadeIn(650);
+                }
+                reader.readAsDataURL(input.files[i]);
+            });
+        }
+    }
+
+    // Image upload button events and animations
+    $("#imageUpload").on("change", function () {
+        if ($('#imageUpload').get(0).files.length !== 0) {
+            $('.image-section').show();
+            $('.cxr-preview').css('background-image', '');
+            $('#btn-detect').show();
+
+            $('.img-preview').hide();
+            $('#modelSelect').prop('disabled', false)
+            $('#loader_localized').hide();
+            $('#btn-save').hide();
+            $('#btn-localize').hide();
+            $('.det-row').off("click")
+            $(".cxr-loc-img").attr('src', "");
+            detResults.text('');
+            detResults.hide();
+            localized = false;
+
+            readURL(this);
+        }
+
+    });
+
+    // Detection results request
+    $('#btn-detect').on("click", function () {
+        $('#imageUpload').prop("disabled", true);
+
+        let form_data = new FormData();
+        // Read selected files
+        let totalFiles = document.getElementById('imageUpload').files.length;
+        for (let index = 0; index < totalFiles; index++) {
+            form_data.append("file_" + index, document.getElementById('imageUpload').files[index]);
+        }
+
+        // Model request link
+        let model_id = $("#modelSelect").val()
+        let urlLink = '/predict/' + model_id
+        $('#modelSelect').prop('disabled', true)
+
+        // Show loading animation
+        $(this).hide();
+        $('#loader_ani').show();
+
+        // Requesting the detection results by calling api /predict (ajax POST call)
+        $.ajax({
+            type: 'POST',
+            url: urlLink,
+            data: form_data,
+            dataType: 'json',
+            contentType: false,
+            cache: false,
+            processData: false,
+            async: true,
+            success: function (data) {
+                // Displaying detection results
+                $('#loader_ani').hide();
+                $('#btn-save').show();
+                detResults.fadeIn(600);
+                // Call for the creation of the detection results table
+                $(cxrResultsDisplayTable(data)).appendTo('#result');
+                console.log('Detection DONE!');
+                $('#btn-localize').show();
+                $('#imageUpload').prop("disabled", false);
+            },
+            error: function () {
+                $('#loader_ani').hide();
+                alert("Couldn't Scan CXR Image");
+            },
+        });
+        $.ajax({
+            type: 'GET',
+            url: '/get_symptoms',
+            dataType: 'json',
+            contentType: false,
+            cache: false,
+            processData: false,
+            async: true,
+            success: function (data) {
+                symptoms_json = data
+            },
+            error: function () {
+                alert("Couldn't Load Symptoms");
+            },
+        });
+    });
+
+    // Localization function
+    $('#btn-localize').on("click", function () {
+        setLoaderIcon();
+
+        $('#imageUpload').prop("disabled", true);
+
+        // Show loading animation
+        $(this).hide();
+        $('#loader_ani_localize').show();
+        $('#btn-save').prop("disabled", true);
+
+        // Initiating the localization
+        $.ajax({
+            url: '/localize',
+            dataType: 'text',
+            contentType: false,
+            cache: false,
+            processData: false,
+            async: true,
+            success: function (data) {
+                $('#imageUpload').prop("disabled", false);
+
+                // Displaying detection results
+                localized = true
+
+                // Setting initial localized images
+                $('.det-row').each(function (i, row_el) {
+                    let pathology_id = i;
+                    let cxr_popup_img_id = ".cxrPopupImg-" + pathology_id;
+                    srcAdd(pathology_id, cxr_popup_img_id);
+                })
+
+                $('#loader_ani_localize').hide();
+                detResults.fadeIn(600);
+                localizationPathAdd(data);
+
+                $('#loader_localized').show();
+                $('#btn-save').prop("disabled", false);
+                console.log('Path adding DONE!');
+            },
+            error: function () {
+                $('#loader_ani_localize').hide();
+                alert("Couldn't Localize CXR");
+            },
+        });
+    });
+
+    $('#btn-save').on("click", function () {
+        printResults();
+    });
+
+});
\ No newline at end of file