Spaces:

Divytak
/

BrainIAC-Brainage-V0

Sleeping

App Files Files Community

Divytak commited on Apr 13

Commit

9736186

verified ·

1 Parent(s): b90878f

Update src/BrainIAC/templates/index.html

Browse files

Files changed (1) hide show

src/BrainIAC/templates/index.html +165 -7

src/BrainIAC/templates/index.html CHANGED Viewed

@@ -169,6 +169,38 @@
             color: #155724;
             border: 1px solid #c3e6cb;
         }
     </style>
 </head>
 <body>
@@ -194,7 +226,7 @@
           {% endif %}
         {% endwith %}
-        <form method="post" action="{{ url_for('predict') }}" enctype="multipart/form-data" class="upload-form">
             <div class="file-type-selector">
                 <label>Select file type:</label>
                 <span>
@@ -230,26 +262,152 @@
         </div>
         {% endif %}
-        {# Saliency Map Display Section #}
-        {% if saliency_images %}
         <div class="saliency-results">
-            <h2>Saliency Map Visualizations (Center Slice)</h2>
             <div class="saliency-plots">
                 <div class="saliency-plot">
                     <h4>Input Slice</h4>
-                    <img src="data:image/png;base64,{{ saliency_images.input_slice }}" alt="Input MRI Slice" width="200">
                 </div>
                 <div class="saliency-plot">
                     <h4>Saliency Heatmap</h4>
-                     <img src="data:image/png;base64,{{ saliency_images.saliency_heatmap }}" alt="Saliency Heatmap" width="200">
                 </div>
                 <div class="saliency-plot">
                     <h4>Overlay</h4>
-                    <img src="data:image/png;base64,{{ saliency_images.overlay }}" alt="Saliency Overlay" width="200">
                 </div>
             </div>
         </div>
         {% endif %}
     </div>
 </body>
 </html>

             color: #155724;
             border: 1px solid #c3e6cb;
         }
+        /* Loading Indicator Styles */
+        #loading-indicator {
+            display: none; /* Hidden by default */
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent white background */
+            z-index: 1000; /* Ensure it's on top */
+            justify-content: center;
+            align-items: center;
+            flex-direction: column; /* Stack spinner and text vertically */
+        }
+        .spinner {
+            border: 5px solid #f3f3f3; /* Light grey */
+            border-top: 5px solid #3498db; /* Blue */
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+            margin-bottom: 15px; /* Space between spinner and text */
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        #loading-indicator p {
+            font-weight: bold;
+            color: #333;
+        }
     </style>
 </head>
 <body>
           {% endif %}
         {% endwith %}
+        <form method="post" action="{{ url_for('predict') }}" enctype="multipart/form-data" class="upload-form" onsubmit="showLoader()">
             <div class="file-type-selector">
                 <label>Select file type:</label>
                 <span>
         </div>
         {% endif %}
+        {# Saliency Map Display Section - Modified for Dynamic Loading #}
+        {% if saliency_info %}
         <div class="saliency-results">
+            <h2>Saliency Map Visualizations (Axial View)</h2>
+            {# Slice Slider and Label #}
+            <div class="slice-slider-container" style="margin-bottom: 20px; text-align: center;">
+                <label for="slice-slider">Slice: <span id="slice-number-label">{{ saliency_info.center_slice_index + 1 }}</span> / {{ saliency_info.num_slices }}</label><br>
+                {# Store unique_id AND temp_dir_path as data attributes #}
+                <input type="range" id="slice-slider"
+                       min="0" max="{{ saliency_info.num_slices - 1 }}"
+                       value="{{ saliency_info.center_slice_index }}"
+                       style="width: 80%; margin-top: 5px;"
+                       data-unique-id="{{ saliency_info.unique_id }}"
+                       data-temp-path="{{ saliency_info.temp_dir_path }}">
+                 <span id="slice-loading-indicator" style="display: none; margin-left: 10px;">Loading...</span> {# Small loading text #}
+            </div>
             <div class="saliency-plots">
                 <div class="saliency-plot">
                     <h4>Input Slice</h4>
+                    {# Use initial center slice data #}
+                    <img id="input-slice-img" src="data:image/png;base64,{{ saliency_info.center_slice_plots.input_slice }}" alt="Input MRI Slice" width="200">
                 </div>
                 <div class="saliency-plot">
                     <h4>Saliency Heatmap</h4>
+                     {# Use initial center slice data #}
+                    <img id="heatmap-slice-img" src="data:image/png;base64,{{ saliency_info.center_slice_plots.heatmap_slice }}" alt="Saliency Heatmap" width="200">
                 </div>
                 <div class="saliency-plot">
                     <h4>Overlay</h4>
+                     {# Use initial center slice data #}
+                    <img id="overlay-slice-img" src="data:image/png;base64,{{ saliency_info.center_slice_plots.overlay_slice }}" alt="Saliency Overlay" width="200">
                 </div>
             </div>
         </div>
+        {# JavaScript for Slider Interaction with Fetch #}
+        <script>
+            // Get DOM elements
+            const slider = document.getElementById('slice-slider');
+            const sliceLabel = document.getElementById('slice-number-label');
+            const inputImg = document.getElementById('input-slice-img');
+            const heatmapImg = document.getElementById('heatmap-slice-img');
+            const overlayImg = document.getElementById('overlay-slice-img');
+            const loadingIndicator = document.getElementById('slice-loading-indicator');
+            // Get unique ID and TEMP PATH from data attributes
+            const uniqueId = slider.dataset.uniqueId;
+            const tempPath = slider.dataset.tempPath;
+            const totalSlices = parseInt(slider.max, 10) + 1;
+            let isLoading = false;
+            let debounceTimer;
+            // Function to fetch and update slice images
+            function updateSliceImages(sliceIndex) {
+                if (isLoading) return;
+                isLoading = true;
+                loadingIndicator.style.display = 'inline';
+                // Construct URL with path as a query parameter (URL-encoded)
+                const encodedPath = encodeURIComponent(tempPath);
+                const fetchUrl = `/get_slice/${uniqueId}/${sliceIndex}?path=${encodedPath}`;
+                console.log("Fetching:", fetchUrl);
+                fetch(fetchUrl)
+                    .then(response => {
+                        if (!response.ok) {
+                            throw new Error(`HTTP error! status: ${response.status}`);
+                        }
+                        return response.json();
+                    })
+                    .then(data => {
+                        // Log the received data for debugging
+                        console.log("Received data:", data);
+                        if (data.error) {
+                            console.error("Error fetching slice:", data.error);
+                            // Optionally display an error to the user
+                        } else {
+                            // Check if keys exist before assigning & log
+                            if (data.input_slice) {
+                                // PREPEND the Data URI prefix
+                                inputImg.src = `data:image/png;base64,${data.input_slice}`;
+                                console.log("Updated inputImg src");
+                            } else {
+                                console.error("input_slice key missing in response data");
+                            }
+                            if (data.heatmap_slice) {
+                                // PREPEND the Data URI prefix
+                                heatmapImg.src = `data:image/png;base64,${data.heatmap_slice}`;
+                                console.log("Updated heatmapImg src");
+                            } else {
+                                console.error("heatmap_slice key missing in response data");
+                            }
+                            if (data.overlay_slice) {
+                                // PREPEND the Data URI prefix
+                                overlayImg.src = `data:image/png;base64,${data.overlay_slice}`;
+                                console.log("Updated overlayImg src");
+                            } else {
+                                console.error("overlay_slice key missing in response data");
+                            }
+                             // Update label (display 1-based index)
+                             sliceLabel.textContent = sliceIndex + 1;
+                        }
+                    })
+                    .catch(error => {
+                        // Catch network errors or errors thrown from .then(response => ...)
+                        console.error('Error fetching or processing slice data:', error);
+                        // Optionally display an error to the user
+                    })
+                    .finally(() => {
+                        isLoading = false;
+                        loadingIndicator.style.display = 'none'; // Hide loading indicator
+                    });
+            }
+            // Add event listener to the slider with debouncing
+            slider.addEventListener('input', function() {
+                const sliceIndex = parseInt(this.value, 10);
+                sliceLabel.textContent = sliceIndex + 1; // Update label immediately
+                // Debounce the fetch call
+                clearTimeout(debounceTimer);
+                debounceTimer = setTimeout(() => {
+                    if (sliceIndex >= 0 && sliceIndex < totalSlices) {
+                         updateSliceImages(sliceIndex);
+                     }
+                }, 150); // Adjust debounce time (ms) as needed
+            });
+            // Initial state is set by Jinja server-side
+        </script>
         {% endif %}
     </div>
+    <!-- Loading Indicator HTML -->
+    <div id="loading-indicator">
+        <div class="spinner"></div>
+        <p>Processing... Please wait.</p>
+    </div>
+    <script>
+        function showLoader() {
+            // Display the loading indicator using flex for centering
+            document.getElementById('loading-indicator').style.display = 'flex';
+        }
+    </script>
 </body>
 </html>