File size: 9,523 Bytes
ed9f15f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 |
/**
* Results Display - Show evaluation results to user
*/
/**
* Interpret Gardner grade
*/
export function interpretGrade(grade) {
if (grade === 'poor grade embryo' || !grade || grade.length < 3) {
return '<p>This embryo has been classified as <strong>poor grade</strong>.</p>';
}
const stage = grade[0];
const icm = grade[1];
const te = grade[2];
const stageDesc = {
'3': 'Early Blastocyst (cavity < 50% of embryo)',
'4': 'Expanded Blastocyst (cavity >= 50% of embryo)',
'5': 'Hatching/Hatched Blastocyst'
};
const icmDesc = {
'A': 'Excellent - Tightly packed, many cells',
'B': 'Good - Loosely grouped, several cells',
'C': 'Fair - Very few cells'
};
const teDesc = {
'A': 'Excellent - Many cells, cohesive epithelium',
'B': 'Good - Few cells, loose epithelium',
'C': 'Fair - Very few large cells'
};
return `
<ul style="list-style: none; padding-left: 0; margin-top: 15px;">
<li style="margin: 10px 0;"><strong>Stage ${stage}:</strong> ${stageDesc[stage] || 'Unknown stage'}</li>
<li style="margin: 10px 0;"><strong>ICM Quality ${icm}:</strong> ${icmDesc[icm] || 'Unknown quality'}</li>
<li style="margin: 10px 0;"><strong>TE Quality ${te}:</strong> ${teDesc[te] || 'Unknown quality'}</li>
</ul>
`;
}
/**
* Display top predictions
*/
export function displayPredictions(predictions, container) {
if (!predictions || Object.keys(predictions).length === 0) {
container.innerHTML = '';
return;
}
const sortedPredictions = Object.entries(predictions)
.sort((a, b) => b[1] - a[1])
.slice(0, 5);
container.innerHTML = sortedPredictions.map(([label, confidence]) => `
<div class="prediction-item">
<span class="prediction-label">${label}</span>
<span class="prediction-confidence">${(confidence * 100).toFixed(1)}%</span>
<div class="prediction-bar">
<div class="prediction-bar-fill" style="width: ${confidence * 100}%"></div>
</div>
</div>
`).join('');
}
/**
* Get image quality tip HTML
*/
function getImageQualityTip() {
return `
<div style="background: #fff3cd; border-left: 4px solid #ffc107; padding: 15px; border-radius: 4px; margin-top: 15px;">
<h4 style="margin: 0 0 10px 0; color: #856404;">Image Quality Tip</h4>
<p style="margin: 0; color: #856404;">If this result seems incorrect, please ensure:</p>
<ul style="margin: 10px 0 0 20px; color: #856404;">
<li>The image is clear and well-focused</li>
</ul>
<p style="margin: 10px 0 0 0; color: #856404;"><strong>Try uploading a clearer image for more accurate results.</strong></p>
</div>
`;
}
/**
* Display single embryo results
*/
export function displaySingleEmbryoResults(result) {
const resultsDiv = document.getElementById('singleResults');
const predictionsDiv = document.getElementById('singlePredictions');
if (!resultsDiv || !predictionsDiv) return;
if (result.quality === 'poor') {
resultsDiv.innerHTML = `
<div class="grade-result grade-poor">
<h2>Quality: Poor Grade Embryo</h2>
</div>
<hr style="margin: 20px 0;">
<h3>Assessment</h3>
<p>This embryo has been classified as <strong>poor quality</strong> and is <strong>not suitable for transfer</strong>.</p>
<p><strong>Recommendation:</strong> This embryo does not meet the minimum quality standards for viable transfer.</p>
<hr style="margin: 20px 0;">
${getImageQualityTip()}
`;
predictionsDiv.innerHTML = '';
} else {
resultsDiv.innerHTML = `
<div class="grade-result grade-good">
<h2>Predicted Grade: ${result.grade}</h2>
</div>
<hr style="margin: 20px 0;">
<h3>Grade Interpretation</h3>
${interpretGrade(result.grade)}
`;
displayPredictions(result.predictions, predictionsDiv);
}
}
/**
* Display cropped embryo results
*/
export function displayCroppedEmbryoResults(result) {
const resultsDiv = document.getElementById('croppedResults');
const predictionsDiv = document.getElementById('croppedPredictions');
if (!resultsDiv || !predictionsDiv) return;
if (result.quality === 'poor') {
resultsDiv.innerHTML = `
<div class="grade-result grade-poor">
<h2>Quality: Poor Grade Embryo</h2>
</div>
<p style="margin-top: 15px;">This embryo is <strong>not suitable for transfer</strong>.</p>
<div style="background: #fff3cd; border-left: 4px solid #ffc107; padding: 12px; border-radius: 4px; margin-top: 15px;">
<p style="margin: 0; color: #856404; font-size: 0.95em;"><strong>Tip:</strong> If this seems incorrect, try uploading a clearer, well-focused image of the embryo for more accurate assessment.</p>
</div>
`;
predictionsDiv.innerHTML = '';
} else {
resultsDiv.innerHTML = `
<div class="grade-result grade-good">
<h2>Predicted Grade: ${result.grade}</h2>
</div>
${interpretGrade(result.grade)}
`;
displayPredictions(result.predictions, predictionsDiv);
}
}
/**
* Display quick evaluation results
*/
export function displayQuickResults(result) {
const resultsDiv = document.getElementById('quickResults');
const predictionsDiv = document.getElementById('quickPredictions');
if (!resultsDiv || !predictionsDiv) return;
if (result.quality === 'poor') {
resultsDiv.innerHTML = `
<div class="grade-result grade-poor">
<h2>Quality: Poor Grade Embryo</h2>
</div>
<hr style="margin: 20px 0;">
<p>This embryo has been classified as <strong>poor quality</strong> and is <strong>not suitable for transfer</strong>.</p>
${getImageQualityTip()}
`;
predictionsDiv.innerHTML = '';
} else {
resultsDiv.innerHTML = `
<div class="grade-result grade-good">
<h2>Predicted Grade: ${result.grade}</h2>
</div>
<hr style="margin: 20px 0;">
${interpretGrade(result.grade)}
`;
displayPredictions(result.predictions, predictionsDiv);
}
}
/**
* Display classification status
*/
export function displayClassificationStatus(result) {
const statusDiv = document.getElementById('classificationStatus');
if (!statusDiv) return;
const isEmbryo = result.label === 'yes';
if (isEmbryo) {
statusDiv.innerHTML = `
<div class="grade-result grade-good">
<h3>Embryo Detected</h3>
</div>
<hr style="margin: 15px 0;">
<p><strong>Image successfully classified as embryo.</strong></p>
<p>Confidence: ${(result.confidence * 100).toFixed(1)}%</p>
<p style="margin-top: 10px;">Click 'Next: Detect Embryos' to continue.</p>
`;
} else {
statusDiv.innerHTML = `
<div class="grade-result grade-poor">
<h3>Not an Embryo</h3>
</div>
<hr style="margin: 15px 0;">
<p><strong>The image does not appear to contain an embryo.</strong></p>
<p>Confidence: ${(result.confidence * 100).toFixed(1)}%</p>
<p style="margin-top: 10px;">Please upload a valid embryo image to proceed.</p>
`;
}
}
/**
* Display final results in Step 5
*/
export function displayFinalResults(result) {
const resultsDiv = document.getElementById('finalResults');
const predictionsDiv = document.getElementById('finalPredictions');
if (!resultsDiv || !predictionsDiv) return;
if (result.quality === 'poor') {
resultsDiv.innerHTML = `
<div class="grade-result grade-poor">
<h2>Quality: Poor Grade Embryo</h2>
</div>
<hr style="margin: 20px 0;">
<h3>Assessment</h3>
<p>This embryo has been classified as <strong>poor quality</strong> and is <strong>not suitable for transfer</strong>.</p>
<p><strong>Recommendation:</strong> This embryo does not meet the minimum quality standards for viable transfer.</p>
<hr style="margin: 20px 0;">
${getImageQualityTip()}
`;
predictionsDiv.innerHTML = '';
} else {
resultsDiv.innerHTML = `
<div class="grade-result grade-good">
<h2>Predicted Grade: ${result.grade}</h2>
</div>
<hr style="margin: 20px 0;">
<h3>Grade Interpretation</h3>
${interpretGrade(result.grade)}
<hr style="margin: 20px 0;">
<h3>Analysis Complete</h3>
<p>The embryo has been successfully evaluated using AI-powered analysis.</p>
`;
displayPredictions(result.predictions, predictionsDiv);
}
}
|