added demo

Author: zzigak

images/diff-animation-natural.gif

@@ -92,6 +92,14 @@ <h2 id="abstract">Abstract</h2>
 		<p>Maintainable and general software allows developers to build robust applications efficiently, yet achieving these qualities often requires refactoring specialized solutions into reusable components. This challenge becomes particularly relevant as code agents become increasingly accurate at solving isolated programming problems. We investigate code agents' capacity to refactor code in ways supporting growth and reusability. We present both a method and a benchmark for refactoring: Librarian, a sample-and-rerank method for generating reusable libraries, and Minicode, a benchmark where code agents must minimize and refactor multiple independent solutions into a joint library. Compared to state-of-the-art code agents, Librarian achieves strong results on both compression and correctness on Minicode, obtaining compression rates 1.6-2x better than coding agents while also improving correctness. We open-source our code, benchmark, and benchmark scripting.</p>
 	</section>
 
+	<section>
+		<h2 id="demo">Demo</h2>
+		<figure id="demo-figure">
+			<img src="images/diff-animation-natural.gif" alt="Demo animation showing Librarian's refactoring process">
+			<figcaption>Librarian in action: watch as it identifies common patterns and refactors multiple code sources into shorter versions by creating a unified library with reusable components.</figcaption>
+		</figure>
+	</section>
+
 	<section>
 		<h2 id="contributions">Key Contributions</h2>
 		<div class="contributions-grid">

index.html

@@ -28,6 +28,25 @@ body {
 	padding: 2em 1em;
 }
 
+/* Abstract section with darker background */
+section:has(#abstract) {
+	background-color: var(--nord5);
+	padding: 2em 1.5em;
+	margin: 2em -1.5em;
+	border-radius: 8px;
+	border: 1px solid var(--nord4);
+	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
+}
+
+/* Fallback for browsers that don't support :has() */
+#abstract {
+	margin-top: 0;
+}
+
+#abstract + p {
+	margin-bottom: 0;
+}
+
 /* Headers */
 h1, h2, h3, h4, h5, h6 {
 	font-family: 'Noto Serif', Georgia, serif;
@@ -181,6 +200,34 @@ nav > ul > li {
 	color: var(--nord3);
 }
 
+/* Demo section */
+#demo-figure {
+	margin: 2em 0;
+	text-align: center;
+}
+
+#demo-figure > img {
+	width: 100%;
+	max-width: 900px;
+	margin: 0;
+	border-radius: 8px;
+	border: 3px solid var(--nord4);
+	padding: 1em;
+	box-sizing: border-box;
+	background-color: var(--nord6);
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+#demo-figure > figcaption {
+	font-style: italic;
+	font-size: 90%;
+	color: var(--nord3);
+	text-align: center;
+	max-width: 700px;
+	margin: 0 auto 1.5em auto;
+	line-height: 1.5;
+}
+
 /* Citation section */
 .section {
 	padding: 3rem 1.5rem;