From 40f074cc99d538e007f646b6ba591bf18a71a789 Mon Sep 17 00:00:00 2001
From: Aherobo Ovie Victor <ovieaherobo0709@gmail.com>
Date: Fri, 11 Jul 2025 22:23:56 +0100
Subject: [PATCH] Add smart summary messages to custom upload results

---
 static/script.js | 28 +++++++++++++++++++++-------
 static/style.css | 27 +++++++++++++++++++++++++++
 2 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/static/script.js b/static/script.js
index c104f95..76325ea 100644
--- a/static/script.js
+++ b/static/script.js
@@ -315,7 +315,19 @@ async function testHardcodedImage() {
 function displayResults(result, title) {
     const resultsSection = document.getElementById('resultsSection');
     const resultsContent = document.getElementById('resultsContent');
-    
+
+    // Create smart summary message
+    let summaryMessage = '';
+    if (result.success) {
+        if (result.num_detections > 0) {
+            summaryMessage = `<div class="summary-message success">✅ Found ${result.num_detections} memory modules</div>`;
+        } else {
+            summaryMessage = `<div class="summary-message no-memory">❌ No memory modules</div>`;
+        }
+    } else {
+        summaryMessage = `<div class="summary-message error">❌ Error: ${result.error}</div>`;
+    }
+
     let detectionsHtml = '';
     if (result.detections && result.detections.length > 0) {
         detectionsHtml = result.detections.map((detection, index) => `
@@ -327,14 +339,16 @@ function displayResults(result, title) {
     } else {
         detectionsHtml = '<div class="detection-item">No memory modules detected</div>';
     }
-    
+
     resultsContent.innerHTML = `
         <div class="result-item">
             <div class="result-header">
                 <h3>${title}</h3>
                 <span class="badge">${new Date().toLocaleTimeString()}</span>
             </div>
-            
+
+            ${summaryMessage}
+
             <div class="result-stats">
                 <div class="stat-item">
                     <div class="stat-value">${result.num_detections}</div>
@@ -349,22 +363,22 @@ function displayResults(result, title) {
                     <div class="stat-label">Status</div>
                 </div>
             </div>
-            
+
             <div class="detection-list">
                 <h4>Detected Memory Modules:</h4>
                 ${detectionsHtml}
             </div>
-            
+
             ${result.annotated_image ? `
                 <div class="image-container">
                     <h4>Annotated Image:</h4>
-                    <img src="data:image/png;base64,${result.annotated_image}" 
+                    <img src="data:image/png;base64,${result.annotated_image}"
                          alt="Annotated Result" class="result-image">
                 </div>
             ` : ''}
         </div>
     `;
-    
+
     resultsSection.style.display = 'block';
     resultsSection.scrollIntoView({ behavior: 'smooth' });
 }
diff --git a/static/style.css b/static/style.css
index 397f46d..7ff40b5 100644
--- a/static/style.css
+++ b/static/style.css
@@ -347,6 +347,33 @@ main {
     flex: 1;
 }
 
+.summary-message {
+    padding: 15px;
+    margin: 15px 0;
+    border-radius: 8px;
+    font-weight: 600;
+    font-size: 1.1rem;
+    text-align: center;
+}
+
+.summary-message.success {
+    background: #d4edda;
+    color: #155724;
+    border: 1px solid #c3e6cb;
+}
+
+.summary-message.no-memory {
+    background: #f8d7da;
+    color: #721c24;
+    border: 1px solid #f5c6cb;
+}
+
+.summary-message.error {
+    background: #f8d7da;
+    color: #721c24;
+    border: 1px solid #f5c6cb;
+}
+
 .footer {
     text-align: center;
     margin-top: auto;