Add smart summary messages to custom upload results

This commit is contained in:
Aherobo Ovie Victor
2025-07-11 22:23:56 +01:00
parent 780e32c412
commit 40f074cc99
2 changed files with 48 additions and 7 deletions
+21 -7
View File
@@ -315,7 +315,19 @@ async function testHardcodedImage() {
function displayResults(result, title) { function displayResults(result, title) {
const resultsSection = document.getElementById('resultsSection'); const resultsSection = document.getElementById('resultsSection');
const resultsContent = document.getElementById('resultsContent'); 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 = ''; let detectionsHtml = '';
if (result.detections && result.detections.length > 0) { if (result.detections && result.detections.length > 0) {
detectionsHtml = result.detections.map((detection, index) => ` detectionsHtml = result.detections.map((detection, index) => `
@@ -327,14 +339,16 @@ function displayResults(result, title) {
} else { } else {
detectionsHtml = '<div class="detection-item">No memory modules detected</div>'; detectionsHtml = '<div class="detection-item">No memory modules detected</div>';
} }
resultsContent.innerHTML = ` resultsContent.innerHTML = `
<div class="result-item"> <div class="result-item">
<div class="result-header"> <div class="result-header">
<h3>${title}</h3> <h3>${title}</h3>
<span class="badge">${new Date().toLocaleTimeString()}</span> <span class="badge">${new Date().toLocaleTimeString()}</span>
</div> </div>
${summaryMessage}
<div class="result-stats"> <div class="result-stats">
<div class="stat-item"> <div class="stat-item">
<div class="stat-value">${result.num_detections}</div> <div class="stat-value">${result.num_detections}</div>
@@ -349,22 +363,22 @@ function displayResults(result, title) {
<div class="stat-label">Status</div> <div class="stat-label">Status</div>
</div> </div>
</div> </div>
<div class="detection-list"> <div class="detection-list">
<h4>Detected Memory Modules:</h4> <h4>Detected Memory Modules:</h4>
${detectionsHtml} ${detectionsHtml}
</div> </div>
${result.annotated_image ? ` ${result.annotated_image ? `
<div class="image-container"> <div class="image-container">
<h4>Annotated Image:</h4> <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"> alt="Annotated Result" class="result-image">
</div> </div>
` : ''} ` : ''}
</div> </div>
`; `;
resultsSection.style.display = 'block'; resultsSection.style.display = 'block';
resultsSection.scrollIntoView({ behavior: 'smooth' }); resultsSection.scrollIntoView({ behavior: 'smooth' });
} }
+27
View File
@@ -347,6 +347,33 @@ main {
flex: 1; 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 { .footer {
text-align: center; text-align: center;
margin-top: auto; margin-top: auto;