mirror of
https://github.com/microsoft/SkillOpt.git
synced 2026-07-03 14:02:58 +08:00
2184 lines
64 KiB
HTML
2184 lines
64 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SkillOpt | Executive Strategy for Self-Evolving Agent Skills</title>
|
|
<meta name="description" content="Project webpage for SkillOpt, a text-space optimizer that trains reusable natural-language skills for frozen language agents.">
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Literata:opsz,wght@7..72,400;7..72,600;7..72,700;7..72,800&family=Newsreader:opsz,wght@6..72,600;6..72,700;6..72,800&display=swap');
|
|
|
|
:root {
|
|
--paper: #f7f8f3;
|
|
--paper-2: #ebeef0;
|
|
--ink: #15191f;
|
|
--muted: #5d6672;
|
|
--quiet: #7b8490;
|
|
--line: #cfd4d8;
|
|
--line-strong: #2d333b;
|
|
--panel: #ffffff;
|
|
--panel-warm: #fff9e8;
|
|
--blue: #2359b6;
|
|
--teal: #0b7974;
|
|
--red: #bb352d;
|
|
--gold: #b17300;
|
|
--green: #2e7b3f;
|
|
--black: #0d1117;
|
|
--shadow: 0 18px 45px rgba(18, 24, 31, 0.12);
|
|
--mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
|
|
--serif: "Literata", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
|
|
--display: "Newsreader", "Literata", Georgia, serif;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
color: var(--ink);
|
|
background:
|
|
linear-gradient(rgba(21, 25, 31, 0.045) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(21, 25, 31, 0.035) 1px, transparent 1px),
|
|
var(--paper);
|
|
background-size: 42px 42px;
|
|
font-family: var(--serif);
|
|
line-height: 1.55;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration-thickness: 1px;
|
|
text-underline-offset: 4px;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.topbar {
|
|
position: fixed;
|
|
z-index: 20;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 18px;
|
|
padding: 14px 28px;
|
|
color: #f8faf7;
|
|
background: rgba(13, 17, 23, 0.78);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
|
|
backdrop-filter: blur(12px);
|
|
font-family: var(--mono);
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
.brandmark {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.brandmark::before {
|
|
content: "";
|
|
width: 13px;
|
|
height: 13px;
|
|
background: linear-gradient(135deg, var(--red) 0 48%, var(--gold) 48% 66%, var(--teal) 66%);
|
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.nav {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
flex-wrap: wrap;
|
|
gap: 8px 16px;
|
|
}
|
|
|
|
.nav a {
|
|
color: rgba(248, 250, 247, 0.86);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid transparent;
|
|
}
|
|
|
|
.nav a:hover {
|
|
color: #ffffff;
|
|
border-color: var(--gold);
|
|
}
|
|
|
|
.hero {
|
|
position: relative;
|
|
min-height: 74vh;
|
|
display: grid;
|
|
align-items: end;
|
|
padding: 112px 28px 54px;
|
|
color: #f8faf7;
|
|
overflow: hidden;
|
|
background:
|
|
linear-gradient(90deg, rgba(13, 17, 23, 0.98) 0%, rgba(13, 17, 23, 0.94) 58%, rgba(13, 17, 23, 0.8) 100%),
|
|
linear-gradient(135deg, transparent 0 49.5%, rgba(244, 197, 66, 0.22) 49.5% 50.35%, transparent 50.35%),
|
|
linear-gradient(90deg, rgba(248, 250, 247, 0.08) 1px, transparent 1px),
|
|
linear-gradient(0deg, rgba(248, 250, 247, 0.07) 1px, transparent 1px),
|
|
#111820;
|
|
background-size: auto, 720px 720px, 36px 36px, 36px 36px, auto;
|
|
}
|
|
|
|
.hero-inner {
|
|
width: min(1160px, 100%);
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 0.95fr) minmax(260px, 0.45fr);
|
|
gap: 36px;
|
|
align-items: end;
|
|
}
|
|
|
|
.kicker {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
width: fit-content;
|
|
padding: 8px 11px;
|
|
color: #111820;
|
|
background: #f4c542;
|
|
border: 1px solid rgba(13, 17, 23, 0.35);
|
|
font-family: var(--mono);
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.hero h1 {
|
|
margin: 22px 0 12px;
|
|
font-family: var(--display);
|
|
font-size: 5.4rem;
|
|
line-height: 0.88;
|
|
letter-spacing: 0;
|
|
max-width: 820px;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
max-width: 760px;
|
|
margin: 0;
|
|
color: rgba(248, 250, 247, 0.88);
|
|
font-size: 1.35rem;
|
|
line-height: 1.42;
|
|
}
|
|
|
|
.hero-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 42px;
|
|
padding: 10px 15px;
|
|
font-family: var(--mono);
|
|
font-size: 0.78rem;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
border: 1px solid currentColor;
|
|
border-radius: 6px;
|
|
transition: transform 160ms ease, background 160ms ease, color 160ms ease;
|
|
}
|
|
|
|
.button:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.button.primary {
|
|
color: #111820;
|
|
background: #f8faf7;
|
|
border-color: #f8faf7;
|
|
}
|
|
|
|
.button.secondary {
|
|
color: #f8faf7;
|
|
background: rgba(248, 250, 247, 0.08);
|
|
border-color: rgba(248, 250, 247, 0.48);
|
|
}
|
|
|
|
.hero-ledger {
|
|
position: relative;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
padding: 24px;
|
|
color: #f8faf7;
|
|
background:
|
|
linear-gradient(135deg, rgba(46, 123, 63, 0.94), rgba(17, 24, 32, 0.98) 54%, rgba(17, 24, 32, 0.96)),
|
|
var(--black);
|
|
border: 1px solid rgba(244, 197, 66, 0.44);
|
|
border-radius: 8px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.hero-ledger::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
linear-gradient(90deg, rgba(244, 197, 66, 0.12) 1px, transparent 1px),
|
|
linear-gradient(0deg, rgba(244, 197, 66, 0.08) 1px, transparent 1px);
|
|
background-size: 26px 26px;
|
|
opacity: 0.34;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero-ledger > * {
|
|
position: relative;
|
|
}
|
|
|
|
.ledger-kicker {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 28px;
|
|
padding: 5px 9px;
|
|
color: var(--ink);
|
|
background: #f4c542;
|
|
border-radius: 6px;
|
|
font-family: var(--mono);
|
|
font-size: 0.71rem;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.ledger-hero {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.ledger-value {
|
|
font-family: var(--display);
|
|
font-size: 5.85rem;
|
|
font-weight: 800;
|
|
line-height: 0.9;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ledger-denominator {
|
|
color: rgba(248, 250, 247, 0.64);
|
|
font-family: var(--display);
|
|
font-size: 2.65rem;
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
}
|
|
|
|
.ledger-copy {
|
|
max-width: 320px;
|
|
margin: 12px 0 0;
|
|
color: rgba(248, 250, 247, 0.84);
|
|
font-size: 1.02rem;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.ledger-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 0;
|
|
margin-top: 22px;
|
|
border-top: 1px solid rgba(248, 250, 247, 0.22);
|
|
}
|
|
|
|
.ledger-stat {
|
|
padding-top: 14px;
|
|
}
|
|
|
|
.ledger-stat + .ledger-stat {
|
|
padding-left: 16px;
|
|
border-left: 1px solid rgba(248, 250, 247, 0.18);
|
|
}
|
|
|
|
.ledger-stat span {
|
|
display: block;
|
|
color: rgba(248, 250, 247, 0.62);
|
|
font-family: var(--mono);
|
|
font-size: 0.68rem;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.ledger-stat b {
|
|
display: block;
|
|
margin-top: 6px;
|
|
color: #f4c542;
|
|
font-family: var(--display);
|
|
font-size: 2.25rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
main {
|
|
width: min(1160px, calc(100% - 40px));
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.section {
|
|
padding: 74px 0 0;
|
|
}
|
|
|
|
.section-header {
|
|
display: grid;
|
|
grid-template-columns: minmax(200px, 0.42fr) minmax(0, 1fr);
|
|
gap: 48px;
|
|
align-items: start;
|
|
margin-bottom: 26px;
|
|
border-top: 2px solid var(--line-strong);
|
|
padding-top: 18px;
|
|
}
|
|
|
|
.section-eyebrow {
|
|
font-family: var(--mono);
|
|
color: var(--red);
|
|
font-size: 0.78rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
h2 {
|
|
margin: 0;
|
|
font-family: var(--display);
|
|
font-size: 2.55rem;
|
|
line-height: 1.04;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.section-lede {
|
|
margin: 10px 0 0;
|
|
color: var(--muted);
|
|
font-size: 1.05rem;
|
|
max-width: 740px;
|
|
}
|
|
|
|
.manifesto {
|
|
display: grid;
|
|
grid-template-columns: 1.05fr 0.95fr;
|
|
gap: 18px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.statement {
|
|
padding: 30px;
|
|
background: var(--black);
|
|
color: #f8faf7;
|
|
border-radius: 8px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.statement h3,
|
|
.panel h3 {
|
|
margin: 0 0 12px;
|
|
font-family: var(--display);
|
|
font-size: 1.45rem;
|
|
line-height: 1.12;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.statement p {
|
|
margin: 0;
|
|
color: rgba(248, 250, 247, 0.82);
|
|
font-size: 1.04rem;
|
|
}
|
|
|
|
.chip-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 9px;
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 30px;
|
|
padding: 6px 9px;
|
|
color: var(--ink);
|
|
background: #f4c542;
|
|
border: 1px solid rgba(248, 250, 247, 0.2);
|
|
border-radius: 6px;
|
|
font-family: var(--mono);
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.steps {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.step {
|
|
min-height: 128px;
|
|
padding: 18px;
|
|
background: var(--panel);
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.step strong {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-family: var(--mono);
|
|
color: var(--blue);
|
|
font-size: 0.78rem;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.step p {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 0.96rem;
|
|
}
|
|
|
|
.figure-frame {
|
|
margin-top: 22px;
|
|
background: var(--panel);
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.figure-frame img {
|
|
width: 100%;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.comparison-frame {
|
|
margin-top: 18px;
|
|
padding: 18px;
|
|
color: var(--ink);
|
|
background: var(--panel);
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.comparison-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 18px;
|
|
align-items: end;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.comparison-heading span {
|
|
color: var(--red);
|
|
font-family: var(--mono);
|
|
font-size: 0.72rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.comparison-heading h3 {
|
|
margin: 6px 0 0;
|
|
font-family: var(--display);
|
|
font-size: 2rem;
|
|
line-height: 1;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.comparison-legend {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
max-width: 560px;
|
|
}
|
|
|
|
.legend-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
min-height: 26px;
|
|
padding: 5px 8px;
|
|
color: var(--muted);
|
|
background: rgba(235, 238, 240, 0.66);
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
font-family: var(--mono);
|
|
font-size: 0.67rem;
|
|
}
|
|
|
|
.legend-chip::before {
|
|
content: "";
|
|
width: 10px;
|
|
height: 10px;
|
|
background: var(--color);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.comparison-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.benchmark-panel {
|
|
min-width: 0;
|
|
padding: 14px;
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(248, 250, 247, 0.64)),
|
|
var(--paper);
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.benchmark-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
align-items: start;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.benchmark-top h4 {
|
|
margin: 0;
|
|
font-family: var(--display);
|
|
font-size: 1.28rem;
|
|
line-height: 1;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.delta-pill {
|
|
flex: none;
|
|
padding: 5px 8px;
|
|
color: var(--green);
|
|
background: rgba(46, 123, 63, 0.12);
|
|
border: 1px solid rgba(46, 123, 63, 0.32);
|
|
border-radius: 6px;
|
|
font-family: var(--mono);
|
|
font-size: 0.67rem;
|
|
font-weight: 700;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.bar-stage {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 6px;
|
|
height: 170px;
|
|
padding: 24px 8px 22px 34px;
|
|
background:
|
|
linear-gradient(rgba(21, 25, 31, 0.08) 1px, transparent 1px) 0 24px / 100% 42px,
|
|
rgba(235, 238, 240, 0.38);
|
|
border-left: 1px solid rgba(21, 25, 31, 0.25);
|
|
border-bottom: 1px solid rgba(21, 25, 31, 0.25);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.axis-range {
|
|
position: absolute;
|
|
left: 7px;
|
|
bottom: 6px;
|
|
color: var(--quiet);
|
|
font-family: var(--mono);
|
|
font-size: 0.58rem;
|
|
writing-mode: vertical-rl;
|
|
transform: rotate(180deg);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.method-bar {
|
|
position: relative;
|
|
flex: 1;
|
|
min-width: 0;
|
|
height: max(8px, var(--h));
|
|
background: var(--color);
|
|
border-radius: 4px 4px 2px 2px;
|
|
opacity: 0.86;
|
|
}
|
|
|
|
.method-bar.skillopt {
|
|
border: 2px solid rgba(21, 25, 31, 0.62);
|
|
box-shadow: 0 0 0 3px rgba(46, 123, 63, 0.16), 0 10px 18px rgba(46, 123, 63, 0.22);
|
|
opacity: 1;
|
|
}
|
|
|
|
.method-bar span {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: calc(100% + 6px);
|
|
transform: translateX(-50%);
|
|
padding: 2px 5px;
|
|
color: #f8faf7;
|
|
background: var(--green);
|
|
border-radius: 5px;
|
|
font-family: var(--mono);
|
|
font-size: 0.62rem;
|
|
font-weight: 800;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.caption {
|
|
padding: 13px 16px;
|
|
color: var(--muted);
|
|
border-top: 1px solid var(--line);
|
|
font-family: var(--mono);
|
|
font-size: 0.72rem;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.teaser-showcase {
|
|
position: relative;
|
|
margin-top: -28px;
|
|
padding: 22px;
|
|
background: var(--panel);
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: 8px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.video-showcase {
|
|
margin-top: -28px;
|
|
margin-bottom: 22px;
|
|
}
|
|
|
|
.video-frame {
|
|
margin: 18px 0 0;
|
|
padding: 14px;
|
|
background: #0d1117;
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: 6px;
|
|
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.video-frame iframe {
|
|
width: 100%;
|
|
aspect-ratio: 16 / 9;
|
|
display: block;
|
|
background: #0d1117;
|
|
border: 0;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.teaser-heading {
|
|
display: grid;
|
|
grid-template-columns: 160px 1fr;
|
|
gap: 20px;
|
|
align-items: start;
|
|
padding-bottom: 16px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.teaser-heading span {
|
|
color: var(--red);
|
|
font-family: var(--mono);
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.teaser-heading h2 {
|
|
font-size: 2.25rem;
|
|
}
|
|
|
|
.teaser-figure {
|
|
margin: 18px 0 0;
|
|
padding: 14px;
|
|
background: #ffffff;
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.teaser-figure img {
|
|
width: 100%;
|
|
min-width: 760px;
|
|
height: auto;
|
|
}
|
|
|
|
.teaser-caption {
|
|
margin: 12px 0 0;
|
|
color: var(--muted);
|
|
font-family: var(--mono);
|
|
font-size: 0.73rem;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.table-wrap {
|
|
overflow-x: auto;
|
|
background: var(--panel);
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
min-width: 1040px;
|
|
font-family: var(--mono);
|
|
font-size: 0.78rem;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
th {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
padding: 12px 14px;
|
|
text-align: left;
|
|
color: #f8faf7;
|
|
background: var(--black);
|
|
border-bottom: 1px solid var(--line-strong);
|
|
font-weight: 600;
|
|
}
|
|
|
|
td {
|
|
padding: 12px 14px;
|
|
border-bottom: 1px solid var(--line);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
tr:last-child td {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
tbody tr:nth-child(even) td {
|
|
background: rgba(235, 238, 240, 0.62);
|
|
}
|
|
|
|
.harness-group td {
|
|
border-top: 2px solid var(--line-strong);
|
|
}
|
|
|
|
.num {
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.heat {
|
|
color: var(--ink);
|
|
background:
|
|
linear-gradient(90deg, rgba(46, 123, 63, 0.22) 0%, rgba(46, 123, 63, 0.22) calc(var(--heat) * 1%), transparent calc(var(--heat) * 1%)) !important;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.heat-avg {
|
|
color: #f8faf7;
|
|
background: var(--teal) !important;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.method-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.panel {
|
|
padding: 22px;
|
|
background: var(--panel);
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.panel.accent-blue {
|
|
border-top: 5px solid var(--blue);
|
|
}
|
|
|
|
.panel.accent-red {
|
|
border-top: 5px solid var(--red);
|
|
}
|
|
|
|
.panel.accent-gold {
|
|
border-top: 5px solid var(--gold);
|
|
}
|
|
|
|
.panel.accent-green {
|
|
border-top: 5px solid var(--green);
|
|
}
|
|
|
|
.panel p {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 0.96rem;
|
|
}
|
|
|
|
.callout {
|
|
margin-top: 18px;
|
|
padding: 18px 20px;
|
|
color: var(--ink);
|
|
background: var(--panel-warm);
|
|
border: 1px solid #e0c76f;
|
|
border-left: 7px solid var(--gold);
|
|
border-radius: 8px;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.ablation-layout {
|
|
display: grid;
|
|
gap: 16px;
|
|
}
|
|
|
|
.ablation-layout table {
|
|
min-width: 720px;
|
|
}
|
|
|
|
.ablation-summary .mini-list {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.evolution-shell {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.42fr) minmax(300px, 0.58fr);
|
|
gap: 16px;
|
|
align-items: start;
|
|
}
|
|
|
|
.evolution-chart {
|
|
background: var(--panel);
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
box-shadow: var(--shadow);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.chart-toolbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 14px;
|
|
padding: 16px 18px 12px;
|
|
border-bottom: 1px solid var(--line);
|
|
font-family: var(--mono);
|
|
font-size: 0.72rem;
|
|
color: var(--muted);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.chart-legend {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 9px 14px;
|
|
}
|
|
|
|
.legend-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.legend-item::before {
|
|
content: "";
|
|
width: 22px;
|
|
height: 3px;
|
|
background: var(--legend);
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.chart-scroller {
|
|
overflow-x: auto;
|
|
padding: 10px 14px 0;
|
|
}
|
|
|
|
.skill-chart {
|
|
width: 100%;
|
|
min-width: 760px;
|
|
height: auto;
|
|
display: block;
|
|
font-family: var(--mono);
|
|
}
|
|
|
|
.chart-grid {
|
|
stroke: rgba(21, 25, 31, 0.13);
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.chart-axis {
|
|
stroke: rgba(21, 25, 31, 0.42);
|
|
stroke-width: 1.2;
|
|
}
|
|
|
|
.chart-label {
|
|
fill: var(--quiet);
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.line-train,
|
|
.line-selection {
|
|
fill: none;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-width: 4;
|
|
vector-effect: non-scaling-stroke;
|
|
}
|
|
|
|
.line-train {
|
|
stroke: var(--teal);
|
|
}
|
|
|
|
.line-selection {
|
|
stroke: var(--blue);
|
|
}
|
|
|
|
.chart-point {
|
|
cursor: pointer;
|
|
outline: none;
|
|
}
|
|
|
|
.chart-point circle:not(.hit) {
|
|
fill: var(--panel);
|
|
stroke-width: 3;
|
|
transition: r 140ms ease, fill 140ms ease, stroke-width 140ms ease;
|
|
vector-effect: non-scaling-stroke;
|
|
}
|
|
|
|
.chart-point .hit {
|
|
fill: transparent;
|
|
stroke: transparent;
|
|
stroke-width: 26;
|
|
}
|
|
|
|
.chart-point[data-state="accepted"] circle:not(.hit) {
|
|
stroke: var(--green);
|
|
}
|
|
|
|
.chart-point[data-state="rejected"] circle:not(.hit) {
|
|
stroke: var(--red);
|
|
}
|
|
|
|
.chart-point[data-state="slow"] circle:not(.hit) {
|
|
stroke: var(--gold);
|
|
}
|
|
|
|
.chart-point[data-state="baseline"] circle:not(.hit) {
|
|
stroke: var(--line-strong);
|
|
}
|
|
|
|
.chart-point.is-active circle:not(.hit),
|
|
.chart-point:hover circle:not(.hit),
|
|
.chart-point:focus circle:not(.hit) {
|
|
r: 7;
|
|
fill: #f4c542;
|
|
stroke-width: 4;
|
|
}
|
|
|
|
.chart-caption {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 14px;
|
|
padding: 12px 18px 16px;
|
|
color: var(--muted);
|
|
border-top: 1px solid var(--line);
|
|
font-family: var(--mono);
|
|
font-size: 0.72rem;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.evolution-detail {
|
|
min-height: 438px;
|
|
padding: 20px;
|
|
color: #f8faf7;
|
|
background: var(--black);
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: 8px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.detail-kicker {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
margin-bottom: 14px;
|
|
font-family: var(--mono);
|
|
font-size: 0.72rem;
|
|
color: rgba(248, 250, 247, 0.7);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.detail-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 26px;
|
|
padding: 5px 8px;
|
|
color: var(--ink);
|
|
background: #f4c542;
|
|
border-radius: 6px;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.evolution-detail h3 {
|
|
margin: 0 0 14px;
|
|
font-family: var(--display);
|
|
font-size: 1.9rem;
|
|
line-height: 1;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.detail-metrics {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
margin: 0 0 16px;
|
|
}
|
|
|
|
.detail-metric {
|
|
padding: 12px;
|
|
background: rgba(248, 250, 247, 0.08);
|
|
border: 1px solid rgba(248, 250, 247, 0.16);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.detail-metric span {
|
|
display: block;
|
|
color: rgba(248, 250, 247, 0.62);
|
|
font-family: var(--mono);
|
|
font-size: 0.67rem;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.detail-metric b {
|
|
display: block;
|
|
margin-top: 4px;
|
|
font-family: var(--display);
|
|
font-size: 1.62rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.detail-summary {
|
|
margin: 0 0 14px;
|
|
color: rgba(248, 250, 247, 0.8);
|
|
font-size: 0.96rem;
|
|
}
|
|
|
|
.detail-edits {
|
|
display: grid;
|
|
gap: 9px;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.detail-edits li {
|
|
padding: 10px 11px;
|
|
color: rgba(248, 250, 247, 0.84);
|
|
background: rgba(248, 250, 247, 0.08);
|
|
border-left: 4px solid var(--gold);
|
|
border-radius: 6px;
|
|
font-size: 0.92rem;
|
|
line-height: 1.42;
|
|
}
|
|
|
|
.evolution-footnotes {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 12px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.evolution-note {
|
|
padding: 14px;
|
|
background: var(--panel);
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
font-family: var(--mono);
|
|
font-size: 0.72rem;
|
|
color: var(--muted);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.evolution-note b {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
color: var(--ink);
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.mini-list {
|
|
display: grid;
|
|
gap: 10px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.mini-item {
|
|
display: grid;
|
|
grid-template-columns: 96px 1fr;
|
|
gap: 14px;
|
|
padding: 13px;
|
|
background: rgba(255, 255, 255, 0.7);
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.mini-item b {
|
|
color: var(--red);
|
|
font-family: var(--mono);
|
|
font-size: 0.76rem;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.mini-item span {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.transfer-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.transfer {
|
|
padding: 18px;
|
|
color: #f8faf7;
|
|
background: var(--black);
|
|
border-radius: 8px;
|
|
min-height: 160px;
|
|
}
|
|
|
|
.transfer:nth-child(2) {
|
|
background: var(--blue);
|
|
}
|
|
|
|
.transfer:nth-child(3) {
|
|
background: var(--red);
|
|
}
|
|
|
|
.transfer:nth-child(4) {
|
|
background: var(--teal);
|
|
}
|
|
|
|
.transfer .big {
|
|
display: block;
|
|
margin: 8px 0;
|
|
font-family: var(--display);
|
|
font-size: 2.15rem;
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
}
|
|
|
|
.transfer p {
|
|
margin: 0;
|
|
color: rgba(248, 250, 247, 0.82);
|
|
font-size: 0.92rem;
|
|
}
|
|
|
|
.footer {
|
|
margin-top: 80px;
|
|
padding: 32px 0 44px;
|
|
border-top: 2px solid var(--line-strong);
|
|
color: var(--muted);
|
|
font-family: var(--mono);
|
|
font-size: 0.75rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 18px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
@media (max-width: 980px) {
|
|
.topbar {
|
|
position: static;
|
|
color: var(--ink);
|
|
background: var(--paper);
|
|
border-bottom: 1px solid var(--line);
|
|
backdrop-filter: none;
|
|
}
|
|
|
|
.nav a {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.hero {
|
|
min-height: auto;
|
|
padding-top: 60px;
|
|
}
|
|
|
|
.hero-inner,
|
|
.manifesto,
|
|
.teaser-heading,
|
|
.section-header,
|
|
.evolution-shell {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.comparison-head {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.comparison-legend {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.comparison-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 4.1rem;
|
|
}
|
|
|
|
.method-grid,
|
|
.transfer-grid,
|
|
.evolution-footnotes {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 680px) {
|
|
main {
|
|
width: min(100% - 24px, 1160px);
|
|
}
|
|
|
|
.topbar {
|
|
padding: 12px;
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.nav {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.hero {
|
|
padding: 36px 12px 34px;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 3.1rem;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 1.08rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.method-grid,
|
|
.ablation-summary .mini-list,
|
|
.comparison-grid,
|
|
.transfer-grid,
|
|
.evolution-footnotes,
|
|
.steps {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.mini-item,
|
|
.detail-metrics,
|
|
.chart-caption {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.ledger-value {
|
|
font-size: 4.35rem;
|
|
}
|
|
|
|
.ledger-denominator {
|
|
font-size: 2.05rem;
|
|
}
|
|
|
|
.ledger-stats {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.ledger-stat + .ledger-stat {
|
|
padding-left: 0;
|
|
border-left: 0;
|
|
}
|
|
|
|
.bar-stage {
|
|
height: 150px;
|
|
}
|
|
|
|
.chart-toolbar,
|
|
.chart-caption {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.teaser-showcase {
|
|
margin-top: 12px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.teaser-figure {
|
|
padding: 8px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="topbar" aria-label="Page navigation">
|
|
<a class="brandmark" href="#top">SkillOpt</a>
|
|
<nav class="nav" aria-label="Sections">
|
|
<a href="#idea">Idea</a>
|
|
<a href="#method">Method</a>
|
|
<a href="#results">Results</a>
|
|
<a href="#ablations">Ablations</a>
|
|
<a href="#evolution">Evolution</a>
|
|
<a href="#transfer">Transfer</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<section class="hero" id="top">
|
|
<div class="hero-inner">
|
|
<div>
|
|
<span class="kicker">Text-space optimization for frozen agents</span>
|
|
<h1>SkillOpt</h1>
|
|
<p class="hero-subtitle">
|
|
Executive Strategy for Self-Evolving Agent Skills. SkillOpt treats a compact
|
|
natural-language skill document as the trainable state of a frozen language
|
|
agent, then learns that document through rollouts, reflection, bounded edits,
|
|
and held-out validation gates.
|
|
</p>
|
|
<div class="hero-actions" aria-label="Primary links">
|
|
<a class="button primary" href="#idea">Core Idea</a>
|
|
<a class="button secondary" href="#method">Method</a>
|
|
<a class="button secondary" href="#results">View Results</a>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="hero-ledger" aria-label="Key result summary">
|
|
<span class="ledger-kicker">Main result</span>
|
|
<div class="ledger-hero" aria-label="52 out of 52 settings">
|
|
<span class="ledger-value">52</span>
|
|
<span class="ledger-denominator">/52</span>
|
|
</div>
|
|
<p class="ledger-copy">
|
|
Best or tied-best in every model x benchmark and harness x benchmark setting.
|
|
</p>
|
|
<div class="ledger-stats" aria-label="Evaluation coverage">
|
|
<div class="ledger-stat">
|
|
<span>Target models</span>
|
|
<b>7</b>
|
|
</div>
|
|
<div class="ledger-stat">
|
|
<span>Harnesses</span>
|
|
<b>2</b>
|
|
</div>
|
|
<div class="ledger-stat">
|
|
<span>Benchmarks</span>
|
|
<b>6</b>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
|
|
<main>
|
|
<section class="teaser-showcase video-showcase" aria-labelledby="video-title">
|
|
<div class="teaser-heading">
|
|
<span>Project Video</span>
|
|
<div>
|
|
<h2 id="video-title">SkillOpt in motion.</h2>
|
|
<p class="section-lede">
|
|
A short visual overview of how SkillOpt treats natural-language skills
|
|
as trainable artifacts: roll out, reflect, edit, validate, and export.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<figure class="video-frame">
|
|
<iframe
|
|
src="https://www.youtube.com/embed/JUBMDTCiM0M"
|
|
title="SkillOpt project video"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen>
|
|
</iframe>
|
|
</figure>
|
|
<p class="teaser-caption">
|
|
Promotional video for the SkillOpt project page. The static paper teaser is shown below for high-resolution inspection.
|
|
</p>
|
|
</section>
|
|
|
|
<section class="teaser-showcase" aria-labelledby="teaser-title">
|
|
<div class="teaser-heading">
|
|
<span>Paper Teaser</span>
|
|
<div>
|
|
<h2 id="teaser-title">The core loop at a glance.</h2>
|
|
<p class="section-lede">
|
|
The teaser summarizes the SkillOpt training loop: rollout evidence,
|
|
optimizer-side reflection, bounded skill edits, validation gating,
|
|
and the exported reusable skill.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<figure class="teaser-figure">
|
|
<img src="skillopt-assets/teaser-1.png" alt="SkillOpt teaser figure showing the target model, optimizer model, bounded edits, validation gate, and exported best skill.">
|
|
</figure>
|
|
<p class="teaser-caption">
|
|
Figure from the SkillOpt paper. On small screens, the figure area scrolls horizontally to preserve the original details.
|
|
</p>
|
|
</section>
|
|
|
|
<section class="section" id="idea">
|
|
<div class="section-header">
|
|
<div class="section-eyebrow">01 / Core Idea</div>
|
|
<div>
|
|
<h2>Train the procedure, not the weights.</h2>
|
|
<p class="section-lede">
|
|
SkillOpt makes the skill document itself the optimization target. The
|
|
target model, backend, and harness stay fixed; the procedure that guides
|
|
evidence gathering, tool use, verification, and output formatting evolves.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="manifesto">
|
|
<article class="statement">
|
|
<h3>A skill is external state for an agent.</h3>
|
|
<p>
|
|
Instead of fine-tuning a model or hand-maintaining prompts, SkillOpt runs
|
|
the frozen agent on scored batches, asks a separate optimizer model to
|
|
propose structured edits, and accepts a candidate only when validation
|
|
performance improves.
|
|
</p>
|
|
<div class="chip-row">
|
|
<span class="chip">Frozen target model</span>
|
|
<span class="chip">Optimizer model</span>
|
|
<span class="chip">Add / delete / replace edits</span>
|
|
<span class="chip">Held-out gate</span>
|
|
</div>
|
|
</article>
|
|
|
|
<div class="steps" aria-label="Optimization loop summary">
|
|
<div class="step">
|
|
<strong>Rollout</strong>
|
|
<p>The target model executes tasks with the current skill and records scored trajectories.</p>
|
|
</div>
|
|
<div class="step">
|
|
<strong>Reflect</strong>
|
|
<p>The optimizer analyzes success and failure minibatches to find reusable procedures.</p>
|
|
</div>
|
|
<div class="step">
|
|
<strong>Edit</strong>
|
|
<p>Candidate add, delete, and replace operations are merged and ranked under a budget.</p>
|
|
</div>
|
|
<div class="step">
|
|
<strong>Gate</strong>
|
|
<p>The candidate skill is kept only if it improves held-out selection performance.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section" id="method">
|
|
<div class="section-header">
|
|
<div class="section-eyebrow">02 / Method</div>
|
|
<div>
|
|
<h2>A training loop for natural-language skills.</h2>
|
|
<p class="section-lede">
|
|
The loop deliberately mirrors a learning algorithm: rollout evidence acts
|
|
like a forward pass, reflection acts like a language-level backward pass,
|
|
and the textual learning rate bounds how far the skill can move.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="method-grid">
|
|
<article class="panel accent-blue">
|
|
<h3>Evidence</h3>
|
|
<p>Rollout batches capture messages, tool calls, verifier feedback, task metadata, and final scores.</p>
|
|
</article>
|
|
<article class="panel accent-red">
|
|
<h3>Minibatches</h3>
|
|
<p>Failures and successes are reflected separately so edits correct recurring errors while preserving working behavior.</p>
|
|
</article>
|
|
<article class="panel accent-gold">
|
|
<h3>Bounded Edits</h3>
|
|
<p>An edit budget functions as a textual learning rate, preventing useful rules from being overwritten by broad rewrites.</p>
|
|
</article>
|
|
<article class="panel accent-green">
|
|
<h3>Memory</h3>
|
|
<p>Rejected edits, slow update, and optimizer-side meta skill provide longer-horizon feedback without bloating deployment.</p>
|
|
</article>
|
|
</div>
|
|
|
|
<figure class="figure-frame">
|
|
<img src="skillopt-assets/pipeline-1.png" alt="SkillOpt pipeline showing rollout, reflection, bounded edits, validation gate, slow update, and meta skill.">
|
|
<figcaption class="caption">
|
|
SkillOpt pipeline from the paper. The frozen target model executes with the current skill; the optimizer model proposes bounded edits; held-out validation decides whether the candidate becomes the new current skill.
|
|
</figcaption>
|
|
</figure>
|
|
</section>
|
|
|
|
<section class="section" id="results">
|
|
<div class="section-header">
|
|
<div class="section-eyebrow">03 / Main Results</div>
|
|
<div>
|
|
<h2>SkillOpt improves GPT and Qwen target models.</h2>
|
|
<p class="section-lede">
|
|
The table reports main-result gains across target models and
|
|
execution harnesses, comparing no-skill execution with the final
|
|
SkillOpt skill on held-out test splits.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-wrap">
|
|
<table aria-label="Main result gain heatmap by model, harness, and benchmark">
|
|
<thead>
|
|
<tr>
|
|
<th>Target model</th>
|
|
<th>Harness</th>
|
|
<th class="num">SearchQA</th>
|
|
<th class="num">Sheet</th>
|
|
<th class="num">Office</th>
|
|
<th class="num">DocVQA</th>
|
|
<th class="num">LiveMath</th>
|
|
<th class="num">ALFWorld</th>
|
|
<th class="num">Avg gain</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>GPT-5.5</td>
|
|
<td>Direct chat</td>
|
|
<td class="num heat" style="--heat: 19;">+9.6</td>
|
|
<td class="num heat" style="--heat: 77;">+38.9</td>
|
|
<td class="num heat" style="--heat: 77;">+39.0</td>
|
|
<td class="num heat" style="--heat: 24;">+12.4</td>
|
|
<td class="num heat" style="--heat: 58;">+29.3</td>
|
|
<td class="num heat" style="--heat: 23;">+11.9</td>
|
|
<td class="num heat-avg">+23.5</td>
|
|
</tr>
|
|
<tr>
|
|
<td>GPT-5.4</td>
|
|
<td>Direct chat</td>
|
|
<td class="num heat" style="--heat: 12;">+6.2</td>
|
|
<td class="num heat" style="--heat: 42;">+21.1</td>
|
|
<td class="num heat" style="--heat: 25;">+12.8</td>
|
|
<td class="num heat" style="--heat: 27;">+13.6</td>
|
|
<td class="num heat" style="--heat: 14;">+7.2</td>
|
|
<td class="num heat" style="--heat: 31;">+15.6</td>
|
|
<td class="num heat-avg">+12.8</td>
|
|
</tr>
|
|
<tr>
|
|
<td>GPT-5.4-mini</td>
|
|
<td>Direct chat</td>
|
|
<td class="num heat" style="--heat: 8;">+4.3</td>
|
|
<td class="num heat" style="--heat: 22;">+11.4</td>
|
|
<td class="num heat" style="--heat: 53;">+26.7</td>
|
|
<td class="num heat" style="--heat: 33;">+16.5</td>
|
|
<td class="num heat" style="--heat: 9;">+4.8</td>
|
|
<td class="num heat" style="--heat: 25;">+12.7</td>
|
|
<td class="num heat-avg">+12.7</td>
|
|
</tr>
|
|
<tr>
|
|
<td>GPT-5.4-nano</td>
|
|
<td>Direct chat</td>
|
|
<td class="num heat" style="--heat: 37;">+19.0</td>
|
|
<td class="num heat" style="--heat: 16;">+8.2</td>
|
|
<td class="num heat" style="--heat: 66;">+33.7</td>
|
|
<td class="num heat" style="--heat: 97;">+49.4</td>
|
|
<td class="num heat" style="--heat: 8;">+4.0</td>
|
|
<td class="num heat" style="--heat: 69;">+35.1</td>
|
|
<td class="num heat-avg">+24.9</td>
|
|
</tr>
|
|
<tr>
|
|
<td>GPT-5.2</td>
|
|
<td>Direct chat</td>
|
|
<td class="num heat" style="--heat: 22;">+11.2</td>
|
|
<td class="num heat" style="--heat: 37;">+18.9</td>
|
|
<td class="num heat" style="--heat: 42;">+21.5</td>
|
|
<td class="num heat" style="--heat: 33;">+16.5</td>
|
|
<td class="num heat" style="--heat: 30;">+15.2</td>
|
|
<td class="num heat" style="--heat: 32;">+16.4</td>
|
|
<td class="num heat-avg">+16.6</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Qwen3.5-4B</td>
|
|
<td>Direct chat</td>
|
|
<td class="num heat" style="--heat: 6;">+3.1</td>
|
|
<td class="num heat" style="--heat: 29;">+14.6</td>
|
|
<td class="num heat" style="--heat: 30;">+15.2</td>
|
|
<td class="num heat" style="--heat: 4;">+2.1</td>
|
|
<td class="num heat" style="--heat: 58;">+29.6</td>
|
|
<td class="num heat" style="--heat: 100;">+50.7</td>
|
|
<td class="num heat-avg">+19.2</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Qwen3.6-35B-A3B</td>
|
|
<td>Direct chat</td>
|
|
<td class="num heat" style="--heat: 15;">+7.6</td>
|
|
<td class="num heat" style="--heat: 18;">+9.3</td>
|
|
<td class="num heat" style="--heat: 2;">+1.2</td>
|
|
<td class="num heat" style="--heat: 7;">+3.8</td>
|
|
<td class="num heat" style="--heat: 21;">+10.4</td>
|
|
<td class="num heat" style="--heat: 44;">+22.4</td>
|
|
<td class="num heat-avg">+9.1</td>
|
|
</tr>
|
|
<tr class="harness-group">
|
|
<td>GPT-5.5</td>
|
|
<td>Codex</td>
|
|
<td class="num heat" style="--heat: 11;">+5.5</td>
|
|
<td class="num heat" style="--heat: 100;">+57.5</td>
|
|
<td class="num heat" style="--heat: 25;">+12.8</td>
|
|
<td class="num heat" style="--heat: 10;">+5.0</td>
|
|
<td class="num heat" style="--heat: 55;">+28.0</td>
|
|
<td class="num">N/A</td>
|
|
<td class="num heat-avg">+21.8</td>
|
|
</tr>
|
|
<tr>
|
|
<td>GPT-5.5</td>
|
|
<td>Claude Code</td>
|
|
<td class="num heat" style="--heat: 8;">+4.0</td>
|
|
<td class="num heat" style="--heat: 100;">+58.3</td>
|
|
<td class="num heat" style="--heat: 27;">+13.9</td>
|
|
<td class="num heat" style="--heat: 7;">+3.5</td>
|
|
<td class="num heat" style="--heat: 26;">+13.3</td>
|
|
<td class="num">N/A</td>
|
|
<td class="num heat-avg">+18.6</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<section class="comparison-frame" aria-labelledby="comparison-title">
|
|
<div class="comparison-head">
|
|
<div class="comparison-heading">
|
|
<span>Method comparison</span>
|
|
<h3 id="comparison-title">SkillOpt clears the strongest baseline on every benchmark.</h3>
|
|
</div>
|
|
<div class="comparison-legend" id="method-comparison-legend" aria-label="Compared methods"></div>
|
|
</div>
|
|
<div class="comparison-grid" id="method-comparison-grid" aria-label="Per-benchmark method comparison"></div>
|
|
</section>
|
|
|
|
</section>
|
|
|
|
<section class="section" id="ablations">
|
|
<div class="section-header">
|
|
<div class="section-eyebrow">04 / Ablations</div>
|
|
<div>
|
|
<h2>The controls are doing real work.</h2>
|
|
<p class="section-lede">
|
|
The paper isolates the optimizer components that keep skill learning stable:
|
|
enough evidence, bounded textual updates, rejected-edit feedback, slow
|
|
update, and optimizer-side memory.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ablation-layout">
|
|
<div class="table-wrap">
|
|
<table aria-label="Component ablations">
|
|
<thead>
|
|
<tr>
|
|
<th>Component</th>
|
|
<th>Setting</th>
|
|
<th class="num">SearchQA</th>
|
|
<th class="num">Spreadsheet</th>
|
|
<th class="num">LiveMath</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Learning rate</td>
|
|
<td>lr=4 default</td>
|
|
<td class="num"><strong>87.1</strong></td>
|
|
<td class="num"><strong>77.5</strong></td>
|
|
<td class="num"><strong>61.3</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Learning rate</td>
|
|
<td>without lr</td>
|
|
<td class="num">84.6</td>
|
|
<td class="num">75.7</td>
|
|
<td class="num">57.3</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Rejected buffer</td>
|
|
<td>with buffer</td>
|
|
<td class="num"><strong>87.1</strong></td>
|
|
<td class="num"><strong>77.5</strong></td>
|
|
<td class="num"><strong>61.3</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Rejected buffer</td>
|
|
<td>without buffer</td>
|
|
<td class="num">85.5</td>
|
|
<td class="num">72.9</td>
|
|
<td class="num">58.9</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Update memory</td>
|
|
<td>meta skill + slow update</td>
|
|
<td class="num"><strong>87.1</strong></td>
|
|
<td class="num"><strong>77.5</strong></td>
|
|
<td class="num"><strong>61.3</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Update memory</td>
|
|
<td>without both</td>
|
|
<td class="num">86.3</td>
|
|
<td class="num">55.0</td>
|
|
<td class="num">59.7</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<article class="panel ablation-summary">
|
|
<h3>What the ablations say</h3>
|
|
<div class="mini-list">
|
|
<div class="mini-item">
|
|
<b>Bounded</b>
|
|
<span>Textual learning rates prevent destructive rewrites while keeping enough plasticity to learn new procedures.</span>
|
|
</div>
|
|
<div class="mini-item">
|
|
<b>Gated</b>
|
|
<span>Held-out selection turns reflection into propose-and-test optimization rather than unconditional self-editing.</span>
|
|
</div>
|
|
<div class="mini-item">
|
|
<b>Buffered</b>
|
|
<span>Rejected edits become negative feedback, helping the optimizer avoid repeating harmful directions.</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<figure class="figure-frame">
|
|
<img src="skillopt-assets/epoch-trends-1.png" alt="Epoch checkpoint trends for SpreadsheetBench, SearchQA, and LiveMath.">
|
|
<figcaption class="caption">
|
|
Epoch checkpoint trends from the paper. Selection-best checkpoints are compared with train rollout score and unseen test performance.
|
|
</figcaption>
|
|
</figure>
|
|
</section>
|
|
|
|
<section class="section" id="evolution">
|
|
<div class="section-header">
|
|
<div class="section-eyebrow">05 / Skill Evolution</div>
|
|
<div>
|
|
<h2>A typical run turns failures into concrete operating rules.</h2>
|
|
<p class="section-lede">
|
|
This ALFWorld run uses GPT-5.4-mini as the frozen target model and
|
|
GPT-5.5 as the optimizer model. The plot tracks train rollout and
|
|
held-out selection scores; hover or focus a point to inspect the
|
|
skill edit proposed at that stage.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="evolution-shell">
|
|
<article class="evolution-chart" aria-label="ALFWorld skill evolution chart">
|
|
<div class="chart-toolbar">
|
|
<span>ALFWorld / train-sel evolution</span>
|
|
<div class="chart-legend" aria-label="Chart legend">
|
|
<span class="legend-item" style="--legend: var(--teal)">Train rollout</span>
|
|
<span class="legend-item" style="--legend: var(--blue)">Selection gate</span>
|
|
</div>
|
|
</div>
|
|
<div class="chart-scroller">
|
|
<svg class="skill-chart" viewBox="0 0 790 340" role="img" aria-labelledby="evolution-chart-title evolution-chart-desc">
|
|
<title id="evolution-chart-title">ALFWorld skill evolution scores</title>
|
|
<desc id="evolution-chart-desc">Selection score rises from 68.6 percent to 81.4 percent, while rejected edits are visible as downward candidate points.</desc>
|
|
<line class="chart-grid" x1="70" y1="60" x2="730" y2="60"></line>
|
|
<line class="chart-grid" x1="70" y1="115" x2="730" y2="115"></line>
|
|
<line class="chart-grid" x1="70" y1="170" x2="730" y2="170"></line>
|
|
<line class="chart-grid" x1="70" y1="225" x2="730" y2="225"></line>
|
|
<line class="chart-grid" x1="70" y1="280" x2="730" y2="280"></line>
|
|
<line class="chart-axis" x1="70" y1="280" x2="730" y2="280"></line>
|
|
<line class="chart-axis" x1="70" y1="60" x2="70" y2="280"></line>
|
|
<text class="chart-label" x="25" y="64">85%</text>
|
|
<text class="chart-label" x="25" y="119">80%</text>
|
|
<text class="chart-label" x="25" y="174">75%</text>
|
|
<text class="chart-label" x="25" y="229">70%</text>
|
|
<text class="chart-label" x="25" y="284">65%</text>
|
|
<text class="chart-label" x="50" y="318">base</text>
|
|
<text class="chart-label" x="181" y="318">step 1</text>
|
|
<text class="chart-label" x="311" y="318">step 2</text>
|
|
<text class="chart-label" x="441" y="318">step 3</text>
|
|
<text class="chart-label" x="563" y="318">slow</text>
|
|
<text class="chart-label" x="701" y="318">step 4</text>
|
|
<polyline class="line-selection" points="70,240.7 200,201.4 330,162.1 460,232.9 590,99.3 720,146.4"></polyline>
|
|
<polyline class="line-train" points="200,238.8 330,156.3 460,142.5 590,115 720,87.5"></polyline>
|
|
<g class="chart-point" data-index="0" data-state="baseline" tabindex="0" role="button" aria-label="Baseline selection score 68.6 percent">
|
|
<circle class="hit" cx="70" cy="240.7" r="12"></circle>
|
|
<circle cx="70" cy="240.7" r="5"></circle>
|
|
</g>
|
|
<g class="chart-point" data-index="1" data-state="accepted" tabindex="0" role="button" aria-label="Step 1 accepted, selection score 72.1 percent">
|
|
<circle class="hit" cx="200" cy="201.4" r="12"></circle>
|
|
<circle cx="200" cy="201.4" r="5"></circle>
|
|
<circle cx="200" cy="238.8" r="4"></circle>
|
|
</g>
|
|
<g class="chart-point" data-index="2" data-state="accepted" tabindex="0" role="button" aria-label="Step 2 accepted, selection score 75.7 percent">
|
|
<circle class="hit" cx="330" cy="162.1" r="12"></circle>
|
|
<circle cx="330" cy="162.1" r="5"></circle>
|
|
<circle cx="330" cy="156.3" r="4"></circle>
|
|
</g>
|
|
<g class="chart-point" data-index="3" data-state="rejected" tabindex="0" role="button" aria-label="Step 3 rejected, candidate selection score 69.3 percent">
|
|
<circle class="hit" cx="460" cy="232.9" r="12"></circle>
|
|
<circle cx="460" cy="232.9" r="5"></circle>
|
|
<circle cx="460" cy="142.5" r="4"></circle>
|
|
</g>
|
|
<g class="chart-point" data-index="4" data-state="slow" tabindex="0" role="button" aria-label="Slow update accepted, selection score 81.4 percent">
|
|
<circle class="hit" cx="590" cy="99.3" r="12"></circle>
|
|
<circle cx="590" cy="99.3" r="5"></circle>
|
|
<circle cx="590" cy="115" r="4"></circle>
|
|
</g>
|
|
<g class="chart-point" data-index="5" data-state="rejected" tabindex="0" role="button" aria-label="Step 4 rejected, candidate selection score 77.1 percent">
|
|
<circle class="hit" cx="720" cy="146.4" r="12"></circle>
|
|
<circle cx="720" cy="146.4" r="5"></circle>
|
|
<circle cx="720" cy="87.5" r="4"></circle>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="chart-caption">
|
|
<span>Accepted edits become the current skill only after held-out selection improves.</span>
|
|
<span>Step 3 is rescued by a slow update; Step 4 trains higher but fails selection.</span>
|
|
</div>
|
|
</article>
|
|
|
|
<aside class="evolution-detail" aria-live="polite">
|
|
<div class="detail-kicker">
|
|
<span id="evo-step">Slow update</span>
|
|
<span class="detail-badge" id="evo-status">Accepted</span>
|
|
</div>
|
|
<h3 id="evo-title">Epoch 3 slow update</h3>
|
|
<div class="detail-metrics">
|
|
<div class="detail-metric">
|
|
<span>Train rollout</span>
|
|
<b id="evo-train">80.0%</b>
|
|
</div>
|
|
<div class="detail-metric">
|
|
<span>Selection gate</span>
|
|
<b id="evo-selection">81.4%</b>
|
|
</div>
|
|
</div>
|
|
<p class="detail-summary" id="evo-summary">
|
|
Longitudinal comparison found no regressions and three improvements, so a broader search-memory update became the new best skill.
|
|
</p>
|
|
<ul class="detail-edits" id="evo-edits">
|
|
<li>Count any generic target receptacle instance as valid.</li>
|
|
<li>Keep a strict numbered searched set and do not re-check observed locations.</li>
|
|
<li>Broaden search after several misses in one location type.</li>
|
|
</ul>
|
|
</aside>
|
|
</div>
|
|
|
|
<div class="evolution-footnotes">
|
|
<div class="evolution-note">
|
|
<b>Run setup</b>
|
|
Target model: GPT-5.4-mini. Optimizer model: GPT-5.5. The skill starts from a compact ALFWorld instruction file and is edited in text space.
|
|
</div>
|
|
<div class="evolution-note">
|
|
<b>Selection rule</b>
|
|
Candidate edits are accepted only when held-out selection improves the current best score.
|
|
</div>
|
|
<div class="evolution-note">
|
|
<b>Outcome</b>
|
|
The selected skill improves final ALFWorld test hard score from 70.9% to 85.8%.
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section" id="transfer">
|
|
<div class="section-header">
|
|
<div class="section-eyebrow">06 / Transfer</div>
|
|
<div>
|
|
<h2>The exported skill behaves like a reusable artifact.</h2>
|
|
<p class="section-lede">
|
|
SkillOpt exports a compact <code>best_skill.md</code>. The paper tests
|
|
whether that artifact transfers across model sizes, execution harnesses,
|
|
and nearby benchmarks without further target-side optimization.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="transfer-grid">
|
|
<article class="transfer">
|
|
<span>Cross-model</span>
|
|
<span class="big">+15.2</span>
|
|
<p>GPT-5.4 LiveMath skill transferred to GPT-5.4-nano on LiveMathBench.</p>
|
|
</article>
|
|
<article class="transfer">
|
|
<span>Cross-harness</span>
|
|
<span class="big">+31.8</span>
|
|
<p>Codex-trained SpreadsheetBench skill transferred into Claude Code.</p>
|
|
</article>
|
|
<article class="transfer">
|
|
<span>Self-optimizer</span>
|
|
<span class="big">+10.4</span>
|
|
<p>GPT-5.4-nano used as its own optimizer improved SpreadsheetBench over baseline.</p>
|
|
</article>
|
|
<article class="transfer">
|
|
<span>Deployment</span>
|
|
<span class="big">1 file</span>
|
|
<p>The target model consumes only the final skill, not optimizer memory.</p>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="callout">
|
|
A stronger optimizer model gives the largest gains, but the loop is not merely
|
|
distillation from a stronger model. Even matched target-as-optimizer settings
|
|
can discover useful edits when the update is constrained, buffered, and
|
|
validated.
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="footer">
|
|
<span>SkillOpt: Executive Strategy for Self-Evolving Agent Skills</span>
|
|
</footer>
|
|
</main>
|
|
<script>
|
|
const methodComparison = {
|
|
methods: [
|
|
{ key: "NoSkill", label: "No skill", color: "#7a8290" },
|
|
{ key: "Human", label: "Human skill", color: "#a77bd8" },
|
|
{ key: "LLM", label: "LLM skill", color: "#5a9bdc" },
|
|
{ key: "Trace", label: "Trace2Skill", color: "#8aa9c9" },
|
|
{ key: "TextGrad", label: "TextGrad", color: "#d95b50" },
|
|
{ key: "GEPA", label: "GEPA", color: "#d7b646" },
|
|
{ key: "Ours", label: "SkillOpt", color: "#87d996" }
|
|
],
|
|
benches: [
|
|
{
|
|
name: "SearchQA",
|
|
yMin: 65,
|
|
yMax: 85,
|
|
values: { NoSkill: 71.3, Human: 74.5, LLM: 72.9, Trace: 76.5, TextGrad: 76.4, GEPA: 78.1, Ours: 80.0 }
|
|
},
|
|
{
|
|
name: "SpreadsheetBench",
|
|
yMin: 25,
|
|
yMax: 55,
|
|
values: { NoSkill: 32.6, Human: 46.5, LLM: 35.9, Trace: 39.3, TextGrad: 31.3, GEPA: 47.3, Ours: 51.7 }
|
|
},
|
|
{
|
|
name: "OfficeQA",
|
|
yMin: 25,
|
|
yMax: 55,
|
|
values: { NoSkill: 31.0, Human: 48.3, LLM: 29.0, Trace: 35.1, TextGrad: 38.7, GEPA: 47.8, Ours: 52.4 }
|
|
},
|
|
{
|
|
name: "DocVQA",
|
|
yMin: 70,
|
|
yMax: 92,
|
|
values: { NoSkill: 72.3, Human: 86.0, LLM: 86.0, Trace: 87.4, TextGrad: 83.2, GEPA: 85.0, Ours: 89.1 }
|
|
},
|
|
{
|
|
name: "LiveMath",
|
|
yMin: 20,
|
|
yMax: 45,
|
|
values: { NoSkill: 26.7, Human: 28.1, LLM: 29.1, Trace: 33.7, TextGrad: 24.9, GEPA: 32.2, Ours: 42.9 }
|
|
},
|
|
{
|
|
name: "ALFWorld",
|
|
yMin: 50,
|
|
yMax: 87,
|
|
values: { NoSkill: 60.8, Human: 54.7, LLM: 70.4, Trace: 73.4, TextGrad: 67.5, GEPA: 75.4, Ours: 84.3 }
|
|
}
|
|
]
|
|
};
|
|
|
|
function renderMethodComparison() {
|
|
const grid = document.getElementById("method-comparison-grid");
|
|
const legend = document.getElementById("method-comparison-legend");
|
|
if (!grid || !legend) return;
|
|
|
|
methodComparison.methods.forEach((method) => {
|
|
const chip = document.createElement("span");
|
|
chip.className = "legend-chip";
|
|
chip.style.setProperty("--color", method.color);
|
|
chip.textContent = method.label;
|
|
legend.appendChild(chip);
|
|
});
|
|
|
|
methodComparison.benches.forEach((bench) => {
|
|
const panel = document.createElement("article");
|
|
panel.className = "benchmark-panel";
|
|
|
|
const top = document.createElement("div");
|
|
top.className = "benchmark-top";
|
|
|
|
const title = document.createElement("h4");
|
|
title.textContent = bench.name;
|
|
|
|
const ours = bench.values.Ours;
|
|
const bestBaseline = Math.max(
|
|
...methodComparison.methods
|
|
.filter((method) => method.key !== "Ours")
|
|
.map((method) => bench.values[method.key])
|
|
);
|
|
const delta = ours - bestBaseline;
|
|
|
|
const deltaPill = document.createElement("span");
|
|
deltaPill.className = "delta-pill";
|
|
deltaPill.textContent = `SkillOpt +${delta.toFixed(1)}`;
|
|
|
|
top.appendChild(title);
|
|
top.appendChild(deltaPill);
|
|
|
|
const stage = document.createElement("div");
|
|
stage.className = "bar-stage";
|
|
|
|
const axis = document.createElement("span");
|
|
axis.className = "axis-range";
|
|
axis.textContent = `y ${bench.yMin}-${bench.yMax}`;
|
|
stage.appendChild(axis);
|
|
|
|
methodComparison.methods.forEach((method) => {
|
|
const value = bench.values[method.key];
|
|
const height = Math.max(4, ((value - bench.yMin) / (bench.yMax - bench.yMin)) * 100);
|
|
const bar = document.createElement("div");
|
|
bar.className = method.key === "Ours" ? "method-bar skillopt" : "method-bar";
|
|
bar.style.setProperty("--h", `${height}%`);
|
|
bar.style.setProperty("--color", method.color);
|
|
bar.title = `${method.label}: ${value.toFixed(1)}`;
|
|
bar.setAttribute("aria-label", `${bench.name} ${method.label} score ${value.toFixed(1)}`);
|
|
|
|
if (method.key === "Ours") {
|
|
const valueLabel = document.createElement("span");
|
|
valueLabel.textContent = value.toFixed(1);
|
|
bar.appendChild(valueLabel);
|
|
}
|
|
|
|
stage.appendChild(bar);
|
|
});
|
|
|
|
panel.appendChild(top);
|
|
panel.appendChild(stage);
|
|
grid.appendChild(panel);
|
|
});
|
|
}
|
|
|
|
renderMethodComparison();
|
|
|
|
const evolutionSteps = [
|
|
{
|
|
step: "Baseline",
|
|
status: "Initial",
|
|
title: "Initial ALFWorld skill",
|
|
train: "-",
|
|
selection: "68.6%",
|
|
summary: "The starting skill solves many direct cases, but failures cluster around repeated search, loose object matching, and unfinished pick-two progress.",
|
|
edits: [
|
|
"Generic search and delivery rules, with no persistent numbered-location memory.",
|
|
"Selection baseline before any optimizer edit is applied.",
|
|
"The run uses this score as the acceptance floor for future candidates."
|
|
]
|
|
},
|
|
{
|
|
step: "Step 1",
|
|
status: "Accepted",
|
|
title: "Search memory and exact targets",
|
|
train: "68.8%",
|
|
selection: "72.1%",
|
|
summary: "The first accepted edit fixes recurring navigation loops and makes object matching stricter.",
|
|
edits: [
|
|
"Add a persistent checklist for observed receptacles, surfaces, containers, and appliances.",
|
|
"Use semantic search priors, then broaden without revisiting checked locations.",
|
|
"Require exact object nouns; do not treat similar items as substitutes."
|
|
]
|
|
},
|
|
{
|
|
step: "Step 2",
|
|
status: "Accepted",
|
|
title: "Delivery, transforms, and pick-two bookkeeping",
|
|
train: "76.3%",
|
|
selection: "75.7%",
|
|
summary: "The second accepted edit turns several procedural hints into executable rules for ALFWorld task types.",
|
|
edits: [
|
|
"Open the target receptacle if needed and place the held goal object directly.",
|
|
"Treat clean, heat, and cool adjectives as mandatory transformations.",
|
|
"For pick-two tasks, place one object, count progress, then fetch only the remaining instance."
|
|
]
|
|
},
|
|
{
|
|
step: "Step 3",
|
|
status: "Rejected",
|
|
title: "Candidate overfits search bookkeeping",
|
|
train: "77.5%",
|
|
selection: "69.3%",
|
|
summary: "The local train rollout improves, but held-out selection drops below the current best, so the candidate is rejected.",
|
|
edits: [
|
|
"Proposed a more executable search ledger in every search-oriented thought.",
|
|
"The gate prevents this narrower rewrite from replacing the stronger Step 2 skill.",
|
|
"Rejected-edit feedback is kept as negative evidence for future updates."
|
|
]
|
|
},
|
|
{
|
|
step: "Slow update",
|
|
status: "Accepted",
|
|
title: "Epoch 3 slow update",
|
|
train: "80.0%",
|
|
selection: "81.4%",
|
|
summary: "Longitudinal comparison finds no regressions and three improvements, so a broader search-memory update becomes the new best skill.",
|
|
edits: [
|
|
"Count any generic target receptacle instance as valid.",
|
|
"Keep a strict numbered searched set and do not re-check observed locations.",
|
|
"Broaden search after several misses in one location type."
|
|
]
|
|
},
|
|
{
|
|
step: "Step 4",
|
|
status: "Rejected",
|
|
title: "Higher train score, lower selection score",
|
|
train: "82.5%",
|
|
selection: "77.1%",
|
|
summary: "The final candidate looks better on the training batch but fails to beat the slow-update checkpoint on selection.",
|
|
edits: [
|
|
"Tried to make numbered-location memory even more explicit.",
|
|
"Added stronger failed-route marking after repeated impossible moves.",
|
|
"Selection rejects it, preserving the 81.4% slow-update best skill."
|
|
]
|
|
}
|
|
];
|
|
|
|
const pointNodes = document.querySelectorAll(".chart-point");
|
|
const detailFields = {
|
|
step: document.getElementById("evo-step"),
|
|
status: document.getElementById("evo-status"),
|
|
title: document.getElementById("evo-title"),
|
|
train: document.getElementById("evo-train"),
|
|
selection: document.getElementById("evo-selection"),
|
|
summary: document.getElementById("evo-summary"),
|
|
edits: document.getElementById("evo-edits")
|
|
};
|
|
|
|
function showEvolutionStep(index) {
|
|
const item = evolutionSteps[index];
|
|
if (!item || !detailFields.title) return;
|
|
|
|
detailFields.step.textContent = item.step;
|
|
detailFields.status.textContent = item.status;
|
|
detailFields.title.textContent = item.title;
|
|
detailFields.train.textContent = item.train;
|
|
detailFields.selection.textContent = item.selection;
|
|
detailFields.summary.textContent = item.summary;
|
|
detailFields.edits.innerHTML = "";
|
|
|
|
item.edits.forEach((edit) => {
|
|
const li = document.createElement("li");
|
|
li.textContent = edit;
|
|
detailFields.edits.appendChild(li);
|
|
});
|
|
|
|
pointNodes.forEach((node) => {
|
|
node.classList.toggle("is-active", Number(node.dataset.index) === index);
|
|
});
|
|
}
|
|
|
|
pointNodes.forEach((node) => {
|
|
const index = Number(node.dataset.index);
|
|
node.addEventListener("mouseenter", () => showEvolutionStep(index));
|
|
node.addEventListener("focus", () => showEvolutionStep(index));
|
|
node.addEventListener("click", () => showEvolutionStep(index));
|
|
});
|
|
|
|
showEvolutionStep(4);
|
|
</script>
|
|
</body>
|
|
</html>
|