@@ -450,22 +450,74 @@ def _get_evaluation_html(eval_result_json: str) -> str:
450450 const candidateMetrics = (caseResult.response_candidate_results && caseResult.response_candidate_results[0] && caseResult.response_candidate_results[0].metric_results) || {{}};
451451 Object.entries(candidateMetrics).forEach(([name, val]) => {{
452452 let metricNameCell = name;
453- if (val.rubric_verdicts && val.rubric_verdicts.length > 0) {{
454- metricNameCell += '<div class="rubric-bubble-container" style="margin-top: 8px;">';
453+ let explanationHandled = false;
454+ let bubbles = '';
455+
456+ if (name.startsWith('hallucination') && val.explanation) {{
457+ try {{
458+ const explanationData = JSON.parse(val.explanation);
459+ if (Array.isArray(explanationData) && explanationData.length > 0 && explanationData[0].sentence) {{
460+ bubbles += '<div class="rubric-bubble-container" style="margin-top: 8px;">';
461+ explanationData.forEach(item => {{
462+ const sentence = item.sentence || 'N/A';
463+ const label = item.label ? item.label.toLowerCase() : '';
464+ const verdictText = label === 'no_rad' ? '<span class="pass">Pass</span>' : '<span class="fail">Fail</span>';
465+ const rationale = item.rationale || 'N/A';
466+ const itemJson = JSON.stringify(item, null, 2);
467+ bubbles += `
468+ <details class="rubric-details">
469+ <summary class="rubric-bubble">${{verdictText}}: ${{DOMPurify.sanitize(sentence)}}</summary>
470+ <div class="explanation" style="padding: 10px 0 0 20px;">${{DOMPurify.sanitize(rationale)}}</div>
471+ <pre class="raw-json-container">${{DOMPurify.sanitize(itemJson)}}</pre>
472+ </details>`;
473+ }});
474+ bubbles += '</div>';
475+ explanationHandled = true;
476+ }}
477+ }} catch (e) {{
478+ console.error("Failed to parse hallucination explanation:", e);
479+ }}
480+ }} else if (name.startsWith('safety') && val.score != null) {{
481+ try {{
482+ bubbles += '<div class="rubric-bubble-container" style="margin-top: 8px;">';
483+ const verdictText = val.score >= 1.0 ? '<span class="pass">Pass</span>' : '<span class="fail">Fail</span>';
484+ const explanation = val.explanation || (val.score >= 1.0 ? 'Safety check passed' : 'Safety check failed');
485+ const itemJson = JSON.stringify(val, null, 2);
486+ bubbles += `
487+ <details class="rubric-details">
488+ <summary class="rubric-bubble">${{verdictText}}: ${{DOMPurify.sanitize(explanation)}}</summary>
489+ <pre class="raw-json-container">${{DOMPurify.sanitize(itemJson)}}</pre>
490+ </details>`;
491+ bubbles += '</div>';
492+ explanationHandled = true;
493+ }} catch (e) {{
494+ console.error("Failed to process safety metric:", e);
495+ }}
496+ }}
497+
498+ if (!bubbles && val.rubric_verdicts && val.rubric_verdicts.length > 0) {{
499+ bubbles += '<div class="rubric-bubble-container" style="margin-top: 8px;">';
455500 val.rubric_verdicts.forEach(verdict => {{
456501 const rubricDescription = verdict.evaluated_rubric && verdict.evaluated_rubric.content && verdict.evaluated_rubric.content.property ? verdict.evaluated_rubric.content.property.description : 'N/A';
457502 const verdictText = verdict.verdict ? '<span class="pass">Pass</span>' : '<span class="fail">Fail</span>';
458503 const verdictJson = JSON.stringify(verdict, null, 2);
459- metricNameCell += `
504+ bubbles += `
460505 <details class="rubric-details">
461506 <summary class="rubric-bubble">${{verdictText}}: ${{DOMPurify.sanitize(rubricDescription)}}</summary>
462507 <pre class="raw-json-container">${{DOMPurify.sanitize(verdictJson)}}</pre>
463508 </details>`;
464509 }});
465- metricNameCell += '</div>';
510+ bubbles += '</div>';
511+ }}
512+
513+ if(bubbles) {{
514+ metricNameCell += bubbles;
466515 }}
516+
467517 metricTable += `<tr><td>${{metricNameCell}}</td><td><b>${{val.score != null ? val.score.toFixed(2) : 'N/A'}}</b></td></tr>`;
468- if (val.explanation) {{ metricTable += `<tr><td colspan="2"><div class="explanation">${{DOMPurify.sanitize(marked.parse(String(val.explanation)))}}</div></td></tr>`; }}
518+ if (val.explanation && !explanationHandled) {{
519+ metricTable += `<tr><td colspan="2"><div class="explanation">${{DOMPurify.sanitize(marked.parse(String(val.explanation)))}}</div></td></tr>`;
520+ }}
469521 }});
470522 card += metricTable + '</tbody></table>';
471523 container.innerHTML += card + '</details>';
0 commit comments