Skip to content

Commit ba0fa8c

Browse files
Lliar-liarLliar-liar
committed
Render method comparison from raw data
1 parent 9012a79 commit ba0fa8c

3 files changed

Lines changed: 638 additions & 22 deletions

File tree

‎index.html‎

Lines changed: 319 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -460,17 +460,177 @@
460460

461461
.comparison-frame {
462462
margin-top: 18px;
463+
padding: 18px;
464+
color: #f8faf7;
463465
background: #0b1018;
464466
border: 1px solid var(--line-strong);
465467
border-radius: 8px;
466-
overflow: hidden;
467468
box-shadow: var(--shadow);
468469
}
469470

470-
.comparison-frame img {
471-
display: block;
472-
width: 100%;
473-
background: #0b1018;
471+
.comparison-head {
472+
display: flex;
473+
justify-content: space-between;
474+
gap: 18px;
475+
align-items: end;
476+
margin-bottom: 16px;
477+
}
478+
479+
.comparison-heading span {
480+
color: #f4c542;
481+
font-family: var(--mono);
482+
font-size: 0.72rem;
483+
font-weight: 700;
484+
text-transform: uppercase;
485+
}
486+
487+
.comparison-heading h3 {
488+
margin: 6px 0 0;
489+
font-family: var(--display);
490+
font-size: 2rem;
491+
line-height: 1;
492+
letter-spacing: 0;
493+
}
494+
495+
.comparison-legend {
496+
display: flex;
497+
flex-wrap: wrap;
498+
justify-content: flex-end;
499+
gap: 8px;
500+
max-width: 560px;
501+
}
502+
503+
.legend-chip {
504+
display: inline-flex;
505+
align-items: center;
506+
gap: 7px;
507+
min-height: 26px;
508+
padding: 5px 8px;
509+
color: rgba(248, 250, 247, 0.82);
510+
background: rgba(248, 250, 247, 0.06);
511+
border: 1px solid rgba(248, 250, 247, 0.14);
512+
border-radius: 6px;
513+
font-family: var(--mono);
514+
font-size: 0.67rem;
515+
}
516+
517+
.legend-chip::before {
518+
content: "";
519+
width: 10px;
520+
height: 10px;
521+
background: var(--color);
522+
border-radius: 3px;
523+
}
524+
525+
.comparison-grid {
526+
display: grid;
527+
grid-template-columns: repeat(3, minmax(0, 1fr));
528+
gap: 12px;
529+
}
530+
531+
.benchmark-panel {
532+
min-width: 0;
533+
padding: 14px;
534+
background:
535+
linear-gradient(180deg, rgba(248, 250, 247, 0.055), rgba(248, 250, 247, 0.02)),
536+
rgba(13, 17, 23, 0.72);
537+
border: 1px solid rgba(248, 250, 247, 0.13);
538+
border-radius: 8px;
539+
}
540+
541+
.benchmark-top {
542+
display: flex;
543+
justify-content: space-between;
544+
gap: 10px;
545+
align-items: start;
546+
margin-bottom: 10px;
547+
}
548+
549+
.benchmark-top h4 {
550+
margin: 0;
551+
font-family: var(--display);
552+
font-size: 1.28rem;
553+
line-height: 1;
554+
letter-spacing: 0;
555+
}
556+
557+
.delta-pill {
558+
flex: none;
559+
padding: 5px 8px;
560+
color: #87d996;
561+
background: rgba(46, 123, 63, 0.2);
562+
border: 1px solid rgba(135, 217, 150, 0.5);
563+
border-radius: 6px;
564+
font-family: var(--mono);
565+
font-size: 0.67rem;
566+
font-weight: 700;
567+
white-space: nowrap;
568+
}
569+
570+
.bar-stage {
571+
position: relative;
572+
display: flex;
573+
align-items: flex-end;
574+
gap: 6px;
575+
height: 170px;
576+
padding: 24px 8px 22px 34px;
577+
background:
578+
linear-gradient(rgba(248, 250, 247, 0.08) 1px, transparent 1px) 0 24px / 100% 42px,
579+
rgba(0, 0, 0, 0.16);
580+
border-left: 1px solid rgba(248, 250, 247, 0.24);
581+
border-bottom: 1px solid rgba(248, 250, 247, 0.24);
582+
border-radius: 6px;
583+
}
584+
585+
.axis-range {
586+
position: absolute;
587+
left: 7px;
588+
bottom: 6px;
589+
color: rgba(248, 250, 247, 0.46);
590+
font-family: var(--mono);
591+
font-size: 0.58rem;
592+
writing-mode: vertical-rl;
593+
transform: rotate(180deg);
594+
text-transform: uppercase;
595+
}
596+
597+
.method-bar {
598+
position: relative;
599+
flex: 1;
600+
min-width: 0;
601+
height: max(8px, var(--h));
602+
background: var(--color);
603+
border-radius: 4px 4px 2px 2px;
604+
opacity: 0.86;
605+
}
606+
607+
.method-bar.skillopt {
608+
border: 2px solid rgba(248, 250, 247, 0.82);
609+
box-shadow: 0 0 16px rgba(135, 217, 150, 0.62);
610+
opacity: 1;
611+
}
612+
613+
.method-bar span {
614+
position: absolute;
615+
left: 50%;
616+
bottom: calc(100% + 6px);
617+
transform: translateX(-50%);
618+
padding: 2px 5px;
619+
color: #0b1018;
620+
background: #87d996;
621+
border-radius: 5px;
622+
font-family: var(--mono);
623+
font-size: 0.62rem;
624+
font-weight: 800;
625+
white-space: nowrap;
626+
}
627+
628+
.comparison-caption {
629+
margin: 14px 0 0;
630+
color: rgba(248, 250, 247, 0.62);
631+
font-family: var(--mono);
632+
font-size: 0.72rem;
633+
line-height: 1.55;
474634
}
475635

476636
.caption {
@@ -1059,6 +1219,19 @@
10591219
grid-template-columns: 1fr;
10601220
}
10611221

1222+
.comparison-head {
1223+
align-items: flex-start;
1224+
flex-direction: column;
1225+
}
1226+
1227+
.comparison-legend {
1228+
justify-content: flex-start;
1229+
}
1230+
1231+
.comparison-grid {
1232+
grid-template-columns: repeat(2, minmax(0, 1fr));
1233+
}
1234+
10621235
.hero h1 {
10631236
font-size: 4.1rem;
10641237
}
@@ -1103,6 +1276,7 @@
11031276

11041277
.method-grid,
11051278
.ablation-summary .mini-list,
1279+
.comparison-grid,
11061280
.transfer-grid,
11071281
.evolution-footnotes,
11081282
.steps {
@@ -1132,6 +1306,10 @@
11321306
border-left: 0;
11331307
}
11341308

1309+
.bar-stage {
1310+
height: 150px;
1311+
}
1312+
11351313
.chart-toolbar,
11361314
.chart-caption {
11371315
flex-direction: column;
@@ -1474,12 +1652,19 @@ <h2>SkillOpt improves GPT and Qwen target models.</h2>
14741652
</table>
14751653
</div>
14761654

1477-
<figure class="comparison-frame">
1478-
<img src="skillopt-assets/main-results-comparison.png" alt="Bar charts comparing SkillOpt with no skill, human skill, LLM skill, Trace2Skill, TextGrad, and GEPA across SearchQA, SpreadsheetBench, OfficeQA, DocVQA, LiveMath, and ALFWorld.">
1479-
<figcaption class="caption">
1480-
Method comparison from the project video. Bars report per-benchmark direct-chat accuracy averaged over seven target models; SkillOpt is best or tied-best in every panel.
1481-
</figcaption>
1482-
</figure>
1655+
<section class="comparison-frame" aria-labelledby="comparison-title">
1656+
<div class="comparison-head">
1657+
<div class="comparison-heading">
1658+
<span>Method comparison</span>
1659+
<h3 id="comparison-title">SkillOpt clears the strongest baseline on every benchmark.</h3>
1660+
</div>
1661+
<div class="comparison-legend" id="method-comparison-legend" aria-label="Compared methods"></div>
1662+
</div>
1663+
<div class="comparison-grid" id="method-comparison-grid" aria-label="Per-benchmark method comparison"></div>
1664+
<p class="comparison-caption">
1665+
Rendered from the raw values used in the project-video results scene. Bars report direct-chat benchmark means across seven target models; each panel uses a zoomed y-axis to keep method gaps readable.
1666+
</p>
1667+
</section>
14831668

14841669
</section>
14851670

@@ -1758,6 +1943,129 @@ <h2>The exported skill behaves like a reusable artifact.</h2>
17581943
</footer>
17591944
</main>
17601945
<script>
1946+
const methodComparison = {
1947+
methods: [
1948+
{ key: "NoSkill", label: "No skill", color: "#7a8290" },
1949+
{ key: "Human", label: "Human skill", color: "#a77bd8" },
1950+
{ key: "LLM", label: "LLM skill", color: "#5a9bdc" },
1951+
{ key: "Trace", label: "Trace2Skill", color: "#8aa9c9" },
1952+
{ key: "TextGrad", label: "TextGrad", color: "#d95b50" },
1953+
{ key: "GEPA", label: "GEPA", color: "#d7b646" },
1954+
{ key: "Ours", label: "SkillOpt", color: "#87d996" }
1955+
],
1956+
benches: [
1957+
{
1958+
name: "SearchQA",
1959+
yMin: 65,
1960+
yMax: 85,
1961+
values: { NoSkill: 71.3, Human: 74.5, LLM: 72.9, Trace: 76.5, TextGrad: 76.4, GEPA: 78.1, Ours: 80.0 }
1962+
},
1963+
{
1964+
name: "SpreadsheetBench",
1965+
yMin: 25,
1966+
yMax: 55,
1967+
values: { NoSkill: 32.6, Human: 46.5, LLM: 35.9, Trace: 39.3, TextGrad: 31.3, GEPA: 47.3, Ours: 51.7 }
1968+
},
1969+
{
1970+
name: "OfficeQA",
1971+
yMin: 25,
1972+
yMax: 55,
1973+
values: { NoSkill: 31.0, Human: 48.3, LLM: 29.0, Trace: 35.1, TextGrad: 38.7, GEPA: 47.8, Ours: 52.4 }
1974+
},
1975+
{
1976+
name: "DocVQA",
1977+
yMin: 70,
1978+
yMax: 92,
1979+
values: { NoSkill: 72.3, Human: 86.0, LLM: 86.0, Trace: 87.4, TextGrad: 83.2, GEPA: 85.0, Ours: 89.1 }
1980+
},
1981+
{
1982+
name: "LiveMath",
1983+
yMin: 20,
1984+
yMax: 45,
1985+
values: { NoSkill: 26.7, Human: 28.1, LLM: 29.1, Trace: 33.7, TextGrad: 24.9, GEPA: 32.2, Ours: 42.9 }
1986+
},
1987+
{
1988+
name: "ALFWorld",
1989+
yMin: 50,
1990+
yMax: 87,
1991+
values: { NoSkill: 60.8, Human: 54.7, LLM: 70.4, Trace: 73.4, TextGrad: 67.5, GEPA: 75.4, Ours: 84.3 }
1992+
}
1993+
]
1994+
};
1995+
1996+
function renderMethodComparison() {
1997+
const grid = document.getElementById("method-comparison-grid");
1998+
const legend = document.getElementById("method-comparison-legend");
1999+
if (!grid || !legend) return;
2000+
2001+
methodComparison.methods.forEach((method) => {
2002+
const chip = document.createElement("span");
2003+
chip.className = "legend-chip";
2004+
chip.style.setProperty("--color", method.color);
2005+
chip.textContent = method.label;
2006+
legend.appendChild(chip);
2007+
});
2008+
2009+
methodComparison.benches.forEach((bench) => {
2010+
const panel = document.createElement("article");
2011+
panel.className = "benchmark-panel";
2012+
2013+
const top = document.createElement("div");
2014+
top.className = "benchmark-top";
2015+
2016+
const title = document.createElement("h4");
2017+
title.textContent = bench.name;
2018+
2019+
const ours = bench.values.Ours;
2020+
const bestBaseline = Math.max(
2021+
...methodComparison.methods
2022+
.filter((method) => method.key !== "Ours")
2023+
.map((method) => bench.values[method.key])
2024+
);
2025+
const delta = ours - bestBaseline;
2026+
2027+
const deltaPill = document.createElement("span");
2028+
deltaPill.className = "delta-pill";
2029+
deltaPill.textContent = `SkillOpt +${delta.toFixed(1)}`;
2030+
2031+
top.appendChild(title);
2032+
top.appendChild(deltaPill);
2033+
2034+
const stage = document.createElement("div");
2035+
stage.className = "bar-stage";
2036+
2037+
const axis = document.createElement("span");
2038+
axis.className = "axis-range";
2039+
axis.textContent = `y ${bench.yMin}-${bench.yMax}`;
2040+
stage.appendChild(axis);
2041+
2042+
methodComparison.methods.forEach((method) => {
2043+
const value = bench.values[method.key];
2044+
const height = Math.max(4, ((value - bench.yMin) / (bench.yMax - bench.yMin)) * 100);
2045+
const bar = document.createElement("div");
2046+
bar.className = method.key === "Ours" ? "method-bar skillopt" : "method-bar";
2047+
bar.style.setProperty("--h", `${height}%`);
2048+
bar.style.setProperty("--color", method.color);
2049+
bar.title = `${method.label}: ${value.toFixed(1)}`;
2050+
bar.setAttribute("aria-label", `${bench.name} ${method.label} score ${value.toFixed(1)}`);
2051+
2052+
if (method.key === "Ours") {
2053+
const valueLabel = document.createElement("span");
2054+
valueLabel.textContent = value.toFixed(1);
2055+
bar.appendChild(valueLabel);
2056+
}
2057+
2058+
stage.appendChild(bar);
2059+
});
2060+
2061+
panel.appendChild(top);
2062+
panel.appendChild(stage);
2063+
grid.appendChild(panel);
2064+
});
2065+
}
2066+
2067+
renderMethodComparison();
2068+
17612069
const evolutionSteps = [
17622070
{
17632071
step: "Baseline",

‎skillopt-assets/main-results-comparison.png‎

-644 KB
Binary file not shown.

0 commit comments

Comments
 (0)