fix timing of results

front-end/photo.html

@@ -19,7 +19,11 @@
         </div>
         <div> <button id="continuebutton">Continue</button></div>
     </div>
-
+    <div class="processing-overlay" id="processingOverlay">
+        <div class="spinner"></div>
+        <p>Processing your image...</p>
+        <p>This may take a few moments.</p>
+    </div>
 </div>
     </div>
     <script src="{{ url_for('static', filename='script/photo.js') }}" defer></script>

static/css/styles.css

@@ -301,8 +301,37 @@ body {
     border: 5px solid #FFFFFF; 
     object-fit: cover;
   }
-   p {
-      margin: 10px 0;
-      text-align: center;
-      font-size: medium;
+  p {
+    margin: 10px 0;
+    text-align: center;
+    font-size: medium;
+  }
+  .processing-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.7);
+    z-index: 9999;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    color: white;
+  }
+    
+  .spinner {
+    border: 4px solid #f3f3f3;
+    border-top: 4px solid #3498db;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
+    margin-bottom: 20px;
+  }
+    
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
   }

static/script/photo.js

@@ -58,6 +58,7 @@
         }, false);
 
         continuebutton.addEventListener('click', function() {
+            
             continueToResults();
         });
 
@@ -108,7 +109,7 @@
         var dataUrl = canvas.toDataURL('image/png');
         sessionStorage.setItem('capturedPhoto', dataUrl);
         // console.log("Image:", dataUrl);
-    
+        document.getElementById('processingOverlay').style.display = 'flex';
         // Upload the captured image
         fetch('/upload', {
             method: "POST",
@@ -130,14 +131,19 @@
 
             // Check if the result element exists before trying to update it
             // const resultElement = document.getElementById('result');
-            if (result) {
-                // resultElement.innerText = 'Result: ' + result;
-                sessionStorage.setItem('uploadResult', result);
-            }
-            window.location.href = 'results.html'; // Redirect after upload is complete
+            if (result.success) {
+            sessionStorage.setItem('session_id', result.session_id);
+            sessionStorage.setItem('model_results', JSON.stringify(result.results));
+            window.location.href = 'results.html';  //
+        } else {
+            alert('Error: ' + result.error);
+            document.getElementById('processingOverlay').style.display = 'none';
+        }
         })
         .catch(error => {
             console.error('Error:', error);
+            alert('Upload failed. Please try again.');
+            document.getElementById('processingOverlay').style.display = 'none';
         });
     }
     

static/script/script.js

@@ -14,7 +14,7 @@ document.addEventListener("DOMContentLoaded", function () {
     // Tap to Begin screen
     if (tapToBeginScreen) {
         tapToBeginScreen.addEventListener("click", function () {
-            window.location.href = "terms.html"; // Redirect to Terms and Conditions page
+            window.location.href = "terms.html";
         });
     }
 
@@ -56,43 +56,143 @@ document.addEventListener("DOMContentLoaded", function () {
             })
             .catch(function (err) {
                 console.log("An error occurred: " + err);
+                alert("Camera access is required for this study. Please enable camera permissions.");
             });
 
         // Capture photo
         if (captureButton) {
-            captureButton.addEventListener("click", function () {
+            captureButton.addEventListener("click", async function () {
+                // Disable button to prevent double-clicks
+                captureButton.disabled = true;
+                captureButton.textContent = "Processing...";
+
+                // Capture the image
                 canvas.width = video.videoWidth;
                 canvas.height = video.videoHeight;
                 canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
-                capturedImage.src = canvas.toDataURL("image/png");
-
-                // Show the captured image and hide the live cam
-                window.location.href = "results.html";
+                const imageData = canvas.toDataURL("image/png");
+                capturedImage.src = imageData;
 
-        
+                // Stop the camera
                 if (stream) {
                     stream.getTracks().forEach(track => track.stop());
                 }
+
+                try {
+                    // Send image to backend
+                    const response = await fetch('/upload', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify({ image: imageData })
+                    });
+
+                    const data = await response.json();
+
+                    if (data.success) {
+                        // Store session ID and results
+                        sessionStorage.setItem('session_id', data.session_id);
+                        sessionStorage.setItem('model_results', JSON.stringify(data.results));
+                        sessionStorage.setItem('captured_image', imageData);
+
+                        console.log('Results stored:', data.results);
+
+                        // Redirect to results page
+                        window.location.href = "results.html";
+                    } else {
+                        alert('Error processing image: ' + (data.error || 'Unknown error'));
+                        captureButton.disabled = false;
+                        captureButton.textContent = "Capture Photo";
+                    }
+                } catch (error) {
+                    console.error('Error uploading image:', error);
+                    alert('Failed to process image. Please try again.');
+                    captureButton.disabled = false;
+                    captureButton.textContent = "Capture Photo";
+                }
             });
         }
     }
 
     // Results page
-    if (resultsPage && userInfoForm) {
-        userInfoForm.addEventListener("submit", function (event) {
-            event.preventDefault(); // Prevent form submission
+    if (resultsPage) {
+        // Load and display AI results when page loads
+        window.addEventListener('load', function() {
+            const modelResults = sessionStorage.getItem('model_results');
+            const capturedImage = sessionStorage.getItem('captured_image');
 
-            // Get user input values
-            const userAge = document.getElementById("userAge").value;
-            const userRace = Array.from(document.getElementById("userRace").selectedOptions).map(option => option.value);
-            const userGender = document.getElementById("userGender").value;
+            if (!modelResults) {
+                alert('No results found. Please start over.');
+                window.location.href = 'index.html';
+                return;
+            }
 
-            // Here you can handle the submission of user information, e.g., sending it to the backend
-            // For simplicity, I'm not implementing this part
+            // Display the captured image if available
+            const imgElement = document.getElementById('capturedImageDisplay');
+            if (imgElement && capturedImage) {
+                imgElement.src = capturedImage;
+            }
 
-            // After handling the user information, proceed to the Results page
-            document.getElementById("aiResults").innerHTML = `<p>Age: ${userAge}</p><p>Race: ${userRace.join(', ')}</p><p>Gender: ${userGender}</p>`;
+            // Parse and display the AI results
+            try {
+                const results = JSON.parse(modelResults);
+                const aiResultsDiv = document.getElementById("aiResults");
+                
+                if (aiResultsDiv) {
+                    // Format the results nicely
+                    aiResultsDiv.innerHTML = `
+                        <h3>AI Model Predictions:</h3>
+                        <pre>${JSON.stringify(results, null, 2)}</pre>
+                    `;
+                }
+            } catch (error) {
+                console.error('Error parsing results:', error);
+                alert('Error displaying results. Please try again.');
+            }
         });
+
+        // Handle user info form submission
+        if (userInfoForm) {
+            userInfoForm.addEventListener("submit", function (event) {
+                event.preventDefault();
+
+                const sessionId = sessionStorage.getItem('session_id');
+                const userAge = document.getElementById("userAge").value;
+                const userRace = Array.from(document.getElementById("userRace").selectedOptions).map(option => option.value);
+                const userGender = document.getElementById("userGender").value;
+
+                // Store user responses
+                sessionStorage.setItem('user_age', userAge);
+                sessionStorage.setItem('user_race', JSON.stringify(userRace));
+                sessionStorage.setItem('user_gender', userGender);
+
+                // Send to backend
+                fetch('/save_survey', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        session_id: sessionId,
+                        age: userAge,
+                        race: userRace,
+                        gender: userGender
+                    })
+                }).then(response => response.json())
+                  .then(data => {
+                      if (data.success) {
+                          window.location.href = "gender.html";
+                      } else {
+                          alert('Error saving data. Please try again.');
+                      }
+                  })
+                  .catch(error => {
+                      console.error('Error:', error);
+                      alert('Error saving data. Please try again.');
+                  });
+            });
+        }
     }
 
     // End Session button
@@ -105,19 +205,50 @@ document.addEventListener("DOMContentLoaded", function () {
     // Restart button
     if (restartButton) {
         restartButton.addEventListener("click", function () {
+            sessionStorage.clear(); // Clear session data
             window.location.href = "index.html"; 
         });
     }
 
-    // Yes button
+    // Yes button (send results)
     const yesButton = document.getElementById("yesButton");
     if (yesButton) {
-        yesButton.addEventListener("click", function () {
+        yesButton.addEventListener("click", async function () {
+            const sessionId = sessionStorage.getItem('session_id');
+            const contactMethod = document.getElementById('contactMethod')?.value || 'none';
+            const contactInfo = document.getElementById('contactInfo')?.value || '';
+
+            if (contactMethod !== 'none' && contactInfo) {
+                try {
+                    const response = await fetch('/send_results', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify({
+                            session_id: sessionId,
+                            contact_method: contactMethod,
+                            contact_info: contactInfo
+                        })
+                    });
+
+                    const data = await response.json();
+                    
+                    if (data.success) {
+                        if (data.sent) {
+                            alert('Results sent successfully!');
+                        }
+                    }
+                } catch (error) {
+                    console.error('Error sending results:', error);
+                }
+            }
+
             window.location.href = "thankyou.html";
         });
     }
 
-    // No button
+    // No button (skip sending results)
     const noButton = document.getElementById("noButton");
     if (noButton) {
         noButton.addEventListener("click", function () {
@@ -127,9 +258,12 @@ document.addEventListener("DOMContentLoaded", function () {
 
     // Automatically restart session after 15 seconds on thank you page
     if (thankYouPage) {
+        // Clear session storage
+        sessionStorage.clear();
+        
         setTimeout(function () {
             window.location.href = "index.html";
-        }, 15000); // 15000 milliseconds = 15 seconds
+        }, 15000);
     }
 
     // Function to toggle visibility of subcategories and their text inputs
@@ -165,13 +299,9 @@ document.addEventListener("DOMContentLoaded", function () {
                 case 'white':
                     toggleSubcategories(event.target, 'whiteSubcategories', 'whiteInput');
                     break;
-                case 'native-american':
-                    toggleSubcategories(event.target, 'nativeSubcategories', 'nativeAmericanInput');
-                    break;
                 case 'other':
                     toggleSubcategories(event.target, '', 'otherInput');
                     break;
-                // Add more cases as needed for other categories
                 default:
                     break;
             }
@@ -199,37 +329,63 @@ document.addEventListener("DOMContentLoaded", function () {
             case 'white':
                 toggleSubcategories(checkbox, 'whiteSubcategories', 'whiteInput');
                 break;
-            case 'native-american':
-                toggleSubcategories(checkbox, 'nativeSubcategories', 'nativeAmericanInput');
-                break;
-            // Add more cases as needed for other categories
             default:
                 break;
         }
     });
 
-    // Add event listener for ethnicity form submission to navigate to the thank you page
+    // Add event listener for ethnicity form submission
     if (ethnicityForm) {
-        ethnicityForm.addEventListener("submit", function (event) {
-            event.preventDefault(); // Prevent the default form submission
-            window.location.href = "thankyou.html"; // Redirect to the Thank You page
+        ethnicityForm.addEventListener("submit", async function (event) {
+            event.preventDefault();
+            
+            const sessionId = sessionStorage.getItem('session_id');
+            
+            // Collect all checked ethnicities
+            const selectedEthnicities = [];
+            mainCategories.forEach(checkbox => {
+                if (checkbox.checked) {
+                    selectedEthnicities.push(checkbox.value || checkbox.id);
+                }
+            });
+
+            // Save ethnicity data
+            try {
+                await fetch('/save_survey', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        session_id: sessionId,
+                        race: selectedEthnicities
+                    })
+                });
+            } catch (error) {
+                console.error('Error saving ethnicity:', error);
+            }
+
+            window.location.href = "thankyou.html";
         });
     }
 
-    // Add event listener for the submit button
+    // Submit button
     if (submitButton) {
         submitButton.addEventListener("click", function () {
-            // Redirect to the Thank You page
             window.location.href = "thankyou.html";
         });
     }
-    // Add event listener for the submit button
+
+    // Continue button
+    const conButton = document.getElementById("conButton");
     if (conButton) {
         conButton.addEventListener("click", function () {
-            // Redirect to the Thank You page
             window.location.href = "race.html";
         });
     }
+
+    // Back buttons
+    const backButton = document.getElementById("backButton");
     if (backButton) {
         backButton.addEventListener("click", function () {
             window.location.href = "results.html";
@@ -240,4 +396,4 @@ document.addEventListener("DOMContentLoaded", function () {
             window.location.href = "gender.html";
         });
     }
-});
+});