Browse Source

UI: Add dark mode theme to HTML report generated by compare_models.py

resnet
mht 3 weeks ago
parent
commit
0c40682ef6
  1. 31
      test/compare_models.py

31
test/compare_models.py

@ -1082,17 +1082,17 @@ class ComparisonRunner:
<head>
<title>Model Comparison Report</title>
<style>
body { font-family: sans-serif; margin: 20px; }
h1, h2, h3 { color: #333; }
table { border-collapse: collapse; width: 90%; margin-bottom: 20px; }
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
th { background-color: #f2f2f2; }
body { font-family: sans-serif; margin: 20px; background: #181a1b; color: #e8e6e3; }
h1, h2, h3 { color: #ffcc00; }
table { border-collapse: collapse; width: 90%; margin-bottom: 20px; background: #23272a; color: #e8e6e3; }
th, td { border: 1px solid #444; padding: 8px; text-align: left; }
th { background-color: #282c34; color: #ffcc00; }
.plot-container { margin-bottom: 30px; page-break-inside: avoid; }
img { max-width: 100%; height: auto; border: 1px solid #ccc; }
img { max-width: 100%; height: auto; border: 1px solid #555; background: #23272a; }
.nan { color: #999; font-style: italic; }
.collapsible {
background-color: #f2f2f2;
color: #444;
background-color: #23272a;
color: #ffcc00;
cursor: pointer;
padding: 10px;
width: 100%;
@ -1104,23 +1104,30 @@ class ComparisonRunner:
margin-bottom: 5px;
}
.active, .collapsible:hover {
background-color: #ddd;
background-color: #282c34;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f9f9f9;
background-color: #23272a;
}
.metric-explanation { margin-bottom: 20px; padding: 10px; border: 1px solid #eee; background-color: #f9f9f9; }
.metric-explanation { margin-bottom: 20px; padding: 10px; border: 1px solid #333; background-color: #23272a; color: #e8e6e3; }
.metric-explanation dt { font-weight: bold; }
.metric-explanation dd { margin-left: 20px; margin-bottom: 5px; }
a { color: #ffcc00; }
/* Auto dark mode for browsers that support it */
@media (prefers-color-scheme: dark) {
body { background: #181a1b; color: #e8e6e3; }
table { background: #23272a; color: #e8e6e3; }
th { background-color: #282c34; color: #ffcc00; }
td { color: #e8e6e3; }
}
</style>
</head>
<body>
<h1>Model Comparison Report</h1>
<p>Number of samples per model component: {self.num_samples}</p>
<div class="metric-explanation">
<h3>Understanding the Metrics:</h3>
<dl>

Loading…
Cancel
Save