Add smart summary messages to custom upload results
This commit is contained in:
+21
-7
@@ -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' });
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user