File size: 51,116 Bytes
dbd761b 8f44476 757dfee 8f44476 fd28ec7 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b e70cc5e 8f44476 dbd761b 8f44476 fffdc96 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 757dfee dbd761b 8f44476 dbd761b 8f44476 fd28ec7 8f44476 dbd761b fd28ec7 dbd761b fffdc96 9e029e8 fffdc96 9e029e8 fffdc96 757dfee fffdc96 757dfee fffdc96 757dfee fffdc96 fd28ec7 fffdc96 9e029e8 fffdc96 9e029e8 fffdc96 dbd761b 8f44476 dbd761b 8f44476 dbd761b 7a3f6e0 8f44476 7a3f6e0 8f44476 dbd761b 8f44476 dbd761b 757dfee 8f44476 7a3f6e0 8f44476 dbd761b fd28ec7 dbd761b 8f44476 dbd761b 8f44476 dbd761b 48d282a dbd761b 48d282a dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 7a3f6e0 8f44476 dbd761b 8f44476 dbd761b 8f44476 7a3f6e0 8f44476 dbd761b 757dfee dbd761b 8f44476 dbd761b 9e029e8 48d282a 9e029e8 dbd761b 8f44476 dbd761b 8f44476 757dfee dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b 8f44476 dbd761b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How We Fought Gradio and Won. PaperProf Field Notes</title>
<meta name="description" content="Field notes from the Build Small Hackathon: building PaperProf, an AI study buddy running MiniCPM4.1-8B and FLUX.2-klein on ZeroGPU with a fully custom UI over a hidden-Gradio bridge.">
<meta property="og:title" content="PaperProf Field Notes. How We Fought Gradio and Won">
<meta property="og:description" content="101 commits, 10 days, zero external APIs. What we built and what we learned.">
<meta property="og:type" content="article">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root {
--bg: #07090F;
--bg-raise: #0C101C;
--line: rgba(255,255,255,0.07);
--line-hot: rgba(167,139,250,0.4);
--violet: #A78BFA;
--violet-d: #7C3AED;
--cyan: #67E8F9;
--cyan-d: #06B6D4;
--green: #4ADE80;
--red: #F87171;
--text: #DDE3EE;
--dim: #8A94A8;
--faint: #525C70;
--grad: linear-gradient(100deg, #A78BFA, #67E8F9);
--display: 'Space Grotesk', sans-serif;
--body: 'Inter', system-ui, sans-serif;
--mono: 'JetBrains Mono', monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: dark; }
body {
background: var(--bg); color: var(--text);
font-family: var(--body); font-size: 1.05rem; line-height: 1.75;
-webkit-font-smoothing: antialiased; overflow-x: hidden;
}
::selection { background: rgba(124,58,237,0.5); color: #fff; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
}
/* grain */
body::after {
content: ''; position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: .035;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* drifting glows */
.glow { position: fixed; border-radius: 50%; filter: blur(130px); pointer-events: none; z-index: 0; }
.g1 { width: 600px; height: 600px; background: rgba(124,58,237,0.14); top: -220px; left: -150px; animation: drift1 26s ease-in-out infinite alternate; }
.g2 { width: 500px; height: 500px; background: rgba(6,182,212,0.10); top: 50vh; right: -180px; animation: drift2 32s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(120px, 80px) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-100px, -120px) scale(0.9); } }
/* custom cursor */
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 99; border-radius: 50%; }
.cursor-dot { width: 6px; height: 6px; background: var(--cyan); transform: translate(-50%,-50%); }
.cursor-ring {
width: 36px; height: 36px; border: 1.5px solid rgba(167,139,250,0.5);
transform: translate(-50%,-50%);
transition: width .25s, height .25s, border-color .25s, background .25s;
}
.cursor-ring.hot { width: 58px; height: 58px; border-color: var(--cyan); background: rgba(103,232,249,0.06); }
@media (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }
/* skip + focus + progress */
.skip-link { position: absolute; top: -48px; left: 16px; z-index: 100; background: var(--violet-d); color: #fff; padding: 10px 18px; border-radius: 8px; font-weight: 600; text-decoration: none; transition: top .2s; }
.skip-link:focus { top: 12px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
#progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--grad); z-index: 90; }
a { color: var(--cyan); text-decoration: none; border-bottom: 1px solid rgba(103,232,249,0.3); transition: border-color .2s; }
a:hover { border-color: var(--cyan); }
/* ============ HERO ============ */
.hero {
position: relative; z-index: 1; min-height: 92vh;
display: flex; flex-direction: column; justify-content: center;
max-width: 1060px; margin: 0 auto; padding: 90px 28px 40px;
}
.hero-tag {
font-family: var(--mono); font-size: .78rem; letter-spacing: 3px;
text-transform: uppercase; color: var(--cyan); margin-bottom: 30px;
display: flex; align-items: center; gap: 12px;
opacity: 0; animation: fadeUp .7s .15s ease forwards;
}
.hero-tag::before { content: ''; width: 36px; height: 1px; background: var(--cyan); }
.hero h1 {
font-family: var(--display); font-weight: 700;
font-size: clamp(2.4rem, 6.8vw, 5.2rem);
line-height: 1.04; letter-spacing: -2.5px; color: #fff;
max-width: 16ch;
}
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span { display: inline-block; transform: translateY(110%); animation: riseIn .8s cubic-bezier(.22,1,.36,1) forwards; }
.hero h1 .line:nth-child(2) > span { animation-delay: .1s; }
.hero h1 .line:nth-child(3) > span { animation-delay: .2s; }
.hero h1 .accent {
background: var(--grad); -webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: var(--violet);
}
@keyframes riseIn { to { transform: translateY(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero-sub {
margin-top: 34px; max-width: 540px; font-size: 1.15rem; color: var(--dim);
opacity: 0; animation: fadeUp .7s .45s ease forwards;
}
.hero-meta {
margin-top: 44px; display: flex; flex-wrap: wrap; gap: 10px 34px;
font-family: var(--mono); font-size: .8rem; color: var(--faint);
opacity: 0; animation: fadeUp .7s .6s ease forwards;
}
.hero-meta b { color: var(--text); font-weight: 500; }
.scroll-hint {
position: absolute; bottom: 34px; left: 28px;
font-family: var(--mono); font-size: .72rem; letter-spacing: 2px; color: var(--faint);
display: flex; align-items: center; gap: 10px;
opacity: 0; animation: fadeUp .7s .9s ease forwards;
}
.scroll-hint::after { content: ''; width: 1px; height: 38px; background: linear-gradient(var(--violet), transparent); animation: pulseLine 1.8s ease-in-out infinite; }
@keyframes pulseLine { 50% { opacity: .3; } }
/* ============ MARQUEE ============ */
.marquee {
position: relative; z-index: 1; overflow: hidden;
border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
padding: 16px 0; background: rgba(255,255,255,0.015);
}
.marquee-track { display: flex; gap: 0; width: max-content; animation: scrollX 30s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scrollX { to { transform: translateX(-50%); } }
.marquee span {
font-family: var(--mono); font-size: .82rem; letter-spacing: 2px;
text-transform: uppercase; color: var(--dim); padding: 0 34px;
display: inline-flex; align-items: center; gap: 34px; white-space: nowrap;
}
.marquee span::after { content: '/'; color: var(--violet); }
/* ============ STATS ============ */
.stats {
position: relative; z-index: 1; max-width: 1060px; margin: 0 auto;
padding: 70px 28px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
background: transparent;
}
.stat { padding: 28px 20px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: none; }
.stat-num { font-family: var(--display); font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; letter-spacing: -2px; color: #fff; display: block; line-height: 1; }
.stat-label { font-family: var(--mono); font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--faint); margin-top: 10px; display: block; }
@media (max-width: 680px) { .stats { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(3) { border-left: none; } }
/* ============ ARTICLE ============ */
main { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 90px 28px 0; }
main > * + * { margin-top: 1.6em; }
p strong { color: #fff; }
em { color: var(--dim); font-style: italic; }
p code, li code {
font-family: var(--mono); font-size: .84em; color: var(--violet);
background: rgba(124,58,237,0.1); border: 1px solid rgba(124,58,237,0.22);
padding: 1px 7px; border-radius: 5px;
}
.lede { font-size: 1.3rem; line-height: 1.7; color: var(--text); font-family: var(--display); font-weight: 400; }
/* chapter headings with ghost numbers */
.chapter { position: relative; margin-top: 4.5em !important; scroll-margin-top: 80px; }
.chapter .ghost {
position: absolute; top: -0.55em; left: -0.08em; z-index: -1;
font-family: var(--display); font-weight: 700;
font-size: clamp(5rem, 14vw, 9rem); line-height: 1;
color: transparent; -webkit-text-stroke: 1px rgba(167,139,250,0.13);
user-select: none; pointer-events: none;
}
.chapter h2 {
font-family: var(--display); font-weight: 700;
font-size: clamp(1.7rem, 4vw, 2.4rem); letter-spacing: -1px; line-height: 1.15;
color: #fff; padding-top: .9em;
}
.chapter .kicker { font-family: var(--mono); font-size: .74rem; letter-spacing: 3px; text-transform: uppercase; color: var(--cyan); display: block; margin-bottom: 12px; }
h3 { font-family: var(--display); font-size: 1.3rem; font-weight: 600; color: #fff; margin-top: 2.4em !important; letter-spacing: -0.3px; scroll-margin-top: 80px; }
/* terminal */
.term {
background: #0A0E1A; border: 1px solid var(--line); border-radius: 12px;
overflow: hidden; margin: 2.2em 0 !important;
box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.term-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.term-bar i { width: 11px; height: 11px; border-radius: 50%; background: #2A3148; }
.term-bar i:nth-child(1) { background: #F87171; } .term-bar i:nth-child(2) { background: #FBBF24; } .term-bar i:nth-child(3) { background: #4ADE80; }
.term-bar span { font-family: var(--mono); font-size: .72rem; color: var(--faint); margin-left: 10px; }
.term-body { padding: 20px 22px; font-family: var(--mono); font-size: .84rem; line-height: 1.9; min-height: 230px; }
.term-body .ln { display: block; white-space: pre-wrap; word-break: break-word; }
.term-body .p { color: var(--cyan); }
.term-body .ok { color: var(--green); }
.term-body .fx { color: var(--red); }
.term-body .ft { color: var(--violet); }
.term-body .out { color: var(--dim); }
.caret { display: inline-block; width: 8px; height: 1.05em; background: var(--cyan); vertical-align: text-bottom; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* code blocks */
pre {
background: var(--bg-raise); border: 1px solid var(--line); border-radius: 12px;
padding: 22px 24px; overflow-x: auto; position: relative;
font-family: var(--mono); font-size: .85rem; line-height: 1.7; margin: 1.9em 0 !important;
}
pre::before { content: attr(data-lang); position: absolute; top: 10px; right: 16px; font-size: .66rem; letter-spacing: 2px; text-transform: uppercase; color: var(--faint); }
.tok-c { color: var(--faint); font-style: italic; }
.tok-k { color: var(--violet); }
.tok-s { color: var(--green); }
.tok-f { color: var(--cyan); }
.tok-n { color: #FBBF24; }
/* quote */
blockquote {
margin: 3em 0 !important; padding-left: 28px;
border-left: 2px solid; border-image: var(--grad) 1;
font-family: var(--display); font-weight: 500; font-style: normal;
font-size: clamp(1.3rem, 2.6vw, 1.65rem); line-height: 1.45; color: #fff;
letter-spacing: -0.5px;
}
/* timeline */
.timeline { margin: 2.4em 0 !important; }
.tl {
position: relative; padding: 26px 28px; margin-bottom: 16px;
background: var(--bg-raise); border: 1px solid var(--line); border-radius: 14px;
transition: border-color .3s, transform .3s;
}
.tl:hover { border-color: var(--line-hot); transform: translateX(6px); }
.tl-tag { font-family: var(--mono); font-size: .7rem; letter-spacing: 2.5px; text-transform: uppercase; display: block; margin-bottom: 8px; }
.tl.fail .tl-tag { color: var(--red); }
.tl.win .tl-tag { color: var(--green); }
.tl.win { border-color: rgba(74,222,128,0.25); }
.tl h4 { font-family: var(--display); font-size: 1.12rem; color: #fff; margin-bottom: 7px; letter-spacing: -0.3px; }
.tl p { font-size: .95rem; color: var(--dim); }
/* tilt cards */
.cards { display: grid; gap: 16px; margin: 2.2em 0 !important; grid-template-columns: repeat(2, 1fr); perspective: 900px; }
@media (max-width: 620px) { .cards { grid-template-columns: 1fr; } }
.card {
position: relative; background: var(--bg-raise); border: 1px solid var(--line);
border-radius: 16px; padding: 28px; overflow: hidden;
transform-style: preserve-3d; transition: border-color .3s;
will-change: transform;
}
.card:hover { border-color: var(--line-hot); }
.card .glare {
position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(167,139,250,0.13), transparent 60%);
}
.card:hover .glare { opacity: 1; }
.card .idx { font-family: var(--mono); font-size: .72rem; letter-spacing: 2px; color: var(--violet); display: block; margin-bottom: 14px; }
.card h4 { font-family: var(--display); font-size: 1.08rem; color: #fff; margin-bottom: 9px; letter-spacing: -0.3px; }
.card p { font-size: .93rem; color: var(--dim); line-height: 1.65; }
/* commit chip */
.commit {
font-family: var(--mono); font-size: .8rem; color: var(--green);
background: rgba(74,222,128,0.05); border: 1px solid rgba(74,222,128,0.18);
border-radius: 10px; padding: 12px 18px; display: block;
overflow-x: auto; white-space: nowrap; margin: 1.6em 0 !important;
}
.commit::before { content: 'commit '; color: var(--faint); }
/* takeaways */
.takeaways { list-style: none; margin: 2.2em 0 !important; counter-reset: tk; }
.takeaways li {
counter-increment: tk; position: relative;
padding: 24px 0 24px 76px; border-top: 1px solid var(--line);
color: var(--dim); font-size: .98rem;
}
.takeaways li:last-child { border-bottom: 1px solid var(--line); }
.takeaways li::before {
content: '0' counter(tk);
position: absolute; left: 0; top: 22px;
font-family: var(--display); font-size: 1.7rem; font-weight: 700; letter-spacing: -1px;
background: var(--grad); -webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: var(--violet);
}
.takeaways strong { color: #fff; display: block; margin-bottom: 4px; font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
/* table */
.tbl-wrap { overflow-x: auto; margin: 2.2em 0 !important; border: 1px solid var(--line); border-radius: 14px; }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th { text-align: left; font-family: var(--mono); font-size: .68rem; letter-spacing: 2px; text-transform: uppercase; color: var(--violet); padding: 16px 22px; border-bottom: 1px solid var(--line); }
td { padding: 14px 22px; border-bottom: 1px solid rgba(255,255,255,0.035); color: var(--dim); }
tr:last-child td { border-bottom: none; }
td strong { color: #fff; font-weight: 600; }
/* reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }
/* team */
.team { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 2.4em 0 !important; }
@media (max-width: 620px) { .team { grid-template-columns: 1fr; } }
.member {
position: relative; background: var(--bg-raise); border: 1px solid var(--line);
border-radius: 18px; overflow: hidden; transition: border-color .3s, transform .3s;
}
.member:hover { border-color: var(--line-hot); transform: translateY(-5px); }
.member-photo { position: relative; aspect-ratio: 1; overflow: hidden; }
.member-photo img {
width: 100%; height: 100%; object-fit: cover; display: block;
filter: saturate(.85); transition: transform .6s cubic-bezier(.22,1,.36,1), filter .4s;
}
.member:hover .member-photo img { transform: scale(1.05); filter: saturate(1.05); }
.member-photo::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(to top, var(--bg-raise) 0%, transparent 36%);
}
.member-info { padding: 6px 26px 26px; }
.member-info .role { font-family: var(--mono); font-size: .7rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--cyan); display: block; margin-bottom: 8px; }
.member-info h4 { font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.5px; color: #fff; margin-bottom: 16px; }
.member-links { display: flex; gap: 10px; }
.member-links a {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--mono); font-size: .76rem; letter-spacing: 1px;
color: var(--dim); border: 1px solid var(--line); border-radius: 50px;
padding: 8px 16px; transition: color .25s, border-color .25s, background .25s;
}
.member-links a:hover { color: #fff; border-color: var(--line-hot); background: rgba(124,58,237,0.08); }
.member-links svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }
/* ============ CTA ============ */
.cta { position: relative; z-index: 1; max-width: 1060px; margin: 110px auto 0; padding: 0 28px; }
.cta-inner {
position: relative; border: 1px solid var(--line); border-radius: 22px;
padding: clamp(48px, 8vw, 90px) clamp(28px, 6vw, 70px); overflow: hidden;
background: var(--bg-raise);
}
.cta-inner::before {
content: ''; position: absolute; inset: -40%; pointer-events: none;
background: conic-gradient(from 0deg, transparent 70%, rgba(124,58,237,0.18), rgba(6,182,212,0.18), transparent 100%);
animation: spin 14s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }
.cta-inner > * { position: relative; }
.cta h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 4.6vw, 3.2rem); letter-spacing: -1.5px; line-height: 1.1; color: #fff; max-width: 14ch; }
.cta p { color: var(--dim); margin: 22px 0 38px; max-width: 460px; }
.btn {
display: inline-block; position: relative;
font-family: var(--display); font-weight: 600; font-size: 1.02rem; color: #fff;
background: var(--bg); border: 1px solid var(--line-hot); border-radius: 60px;
padding: 17px 42px; overflow: hidden; transition: color .3s, border-color .3s;
will-change: transform;
}
.btn::before { content: ''; position: absolute; inset: 0; background: var(--grad); opacity: 0; transition: opacity .3s; }
.btn span { position: relative; }
.btn:hover { border-color: transparent; }
.btn:hover::before { opacity: 1; }
.btn:hover span { color: #07090F; }
footer { position: relative; z-index: 1; max-width: 1060px; margin: 0 auto; padding: 70px 28px 46px; display: flex; flex-wrap: wrap; gap: 12px 40px; justify-content: space-between; font-family: var(--mono); font-size: .74rem; letter-spacing: 1px; color: var(--faint); }
/* ============ BADGES ============ */
.badges-section { position: relative; z-index: 1; max-width: 1060px; margin: 72px auto 0; padding: 0 28px; }
.badges-header { display: flex; align-items: flex-end; gap: 28px; margin-bottom: 32px; flex-wrap: wrap; }
.badges-eyebrow { font-family: var(--mono); font-size: .74rem; letter-spacing: 3px; text-transform: uppercase; color: var(--cyan); display: block; margin-bottom: 10px; }
.badges-score { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -2px; color: #fff; line-height: 1; }
.badges-score em { font-style: normal; font-size: .55em; color: var(--dim); font-weight: 400; letter-spacing: -0.5px; }
.badges-note { font-family: var(--mono); font-size: .76rem; color: var(--dim); max-width: 340px; line-height: 1.6; border-left: 2px solid var(--line-hot); padding-left: 16px; }
.badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.badge {
background: var(--bg-raise); border: 1px solid var(--line); border-radius: 18px;
padding: 24px 22px; display: flex; flex-direction: column; gap: 13px;
transition: border-color .3s, transform .3s;
}
.badge.earned { border-color: rgba(74,222,128,0.28); }
.badge.earned:hover { border-color: rgba(74,222,128,0.6); transform: translateY(-5px); }
.badge.locked { opacity: 0.42; }
.badge-icon { font-size: 2rem; line-height: 1; }
.badge-name { font-family: var(--display); font-weight: 700; font-size: 1rem; color: #fff; letter-spacing: -0.3px; }
.badge-desc { font-family: var(--mono); font-size: .72rem; color: var(--dim); line-height: 1.6; flex: 1; }
.badge-chip {
display: inline-block; align-self: flex-start;
font-family: var(--mono); font-size: .65rem; letter-spacing: 2px; text-transform: uppercase;
border-radius: 50px; padding: 4px 12px;
}
.badge.earned .badge-chip { color: var(--green); background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.22); }
.badge.locked .badge-chip { color: var(--faint); background: transparent; border: 1px solid rgba(255,255,255,0.08); }
</style>
</head>
<body>
<a class="skip-link" href="#article">Skip to article</a>
<div id="progress" role="presentation"></div>
<div class="glow g1"></div><div class="glow g2"></div>
<div class="cursor-dot" aria-hidden="true"></div><div class="cursor-ring" aria-hidden="true"></div>
<header class="hero">
<p class="hero-tag">Field Notes · Build Small Hackathon · June 2026</p>
<h1 id="title">
<span class="line"><span>How we fought</span></span>
<span class="line"><span><span class="accent" data-scramble>Gradio</span>, won,</span></span>
<span class="line"><span>and shipped in 10 days.</span></span>
</h1>
<p class="hero-sub">PaperProf turns any course PDF into a personal professor. Open-weight models, free GPUs, and a frontend Gradio was never meant to allow.</p>
<div class="hero-meta">
<span>READ <b>9 min</b></span>
<span>TEAM <b>PaperProf · EPITA</b></span>
<span>STACK <b>MiniCPM4.1-8B fine-tune / FLUX.2 / ZeroGPU</b></span>
</div>
<span class="scroll-hint">SCROLL</span>
</header>
<div class="marquee" aria-hidden="true">
<div class="marquee-track">
<span>MiniCPM4.1-8B fine-tune</span><span>FLUX.2-klein</span><span>ZeroGPU</span><span>PyMuPDF</span><span>Gradio 6</span><span>Zero external APIs</span><span>101 commits</span><span>10 days</span>
<span>MiniCPM4.1-8B fine-tune</span><span>FLUX.2-klein</span><span>ZeroGPU</span><span>PyMuPDF</span><span>Gradio 6</span><span>Zero external APIs</span><span>101 commits</span><span>10 days</span>
</div>
</div>
<section class="stats" aria-label="Project statistics">
<div class="stat reveal"><span class="stat-num" data-count="101">0</span><span class="stat-label">commits</span></div>
<div class="stat reveal"><span class="stat-num" data-count="10">0</span><span class="stat-label">days</span></div>
<div class="stat reveal"><span class="stat-num" data-count="2">0</span><span class="stat-label">AI models</span></div>
<div class="stat reveal"><span class="stat-num" data-count="0">0</span><span class="stat-label">external APIs</span></div>
</section>
<section class="badges-section" aria-label="Hackathon badges earned">
<div class="badges-header reveal">
<div>
<span class="badges-eyebrow">Build Small Hackathon · Merit Badges</span>
<p class="badges-score">6 <em>/ 6 earned</em></p>
</div>
<p class="badges-note">Build Small awards badges for specific technical achievements. We collected all six — every badge earned by shipping real, verifiable work.</p>
</div>
<div class="badges-grid">
<div class="badge earned reveal">
<span class="badge-icon">🔌</span>
<strong class="badge-name">Off the Grid</strong>
<span class="badge-desc">Zero external APIs. MiniCPM4.1-8B and FLUX.2-klein run entirely on ZeroGPU — no OpenAI key, no rate limits, no data leaving the machine.</span>
<span class="badge-chip">✓ Earned</span>
</div>
<div class="badge earned reveal">
<span class="badge-icon">🎯</span>
<strong class="badge-name">Well-Tuned</strong>
<span class="badge-desc">QLoRA fine-tune on SQuAD + SciQ via Modal. Model published at <code>build-small-hackathon/MiniCPM4.1-8B-PaperProf</code>.</span>
<span class="badge-chip">✓ Earned</span>
</div>
<div class="badge earned reveal">
<span class="badge-icon">🎨</span>
<strong class="badge-name">Off-Brand</strong>
<span class="badge-desc">Hand-built HTML/CSS/JS over a hidden-Gradio bridge. Glassmorphism, animated score ring, dark academia palette — no default Gradio chrome visible.</span>
<span class="badge-chip">✓ Earned</span>
</div>
<div class="badge earned reveal">
<span class="badge-icon">🦙</span>
<strong class="badge-name">Llama Champion</strong>
<span class="badge-desc">GGUF published at <code>build-small-hackathon/MiniCPM4.1-8B-PaperProf-GGUF</code>. llama.cpp CPU runtime wired in via <code>PAPERPROF_RUNTIME=llamacpp</code>.</span>
<span class="badge-chip">✓ Earned</span>
</div>
<div class="badge earned reveal">
<span class="badge-icon">📝</span>
<strong class="badge-name">Field Notes</strong>
<span class="badge-desc">This post — 101 commits, 10 days, zero sugarcoating. Honest account of what broke and what shipped.</span>
<span class="badge-chip">✓ Earned</span>
</div>
<div class="badge earned reveal">
<span class="badge-icon">🤝</span>
<strong class="badge-name">Sharing is Caring</strong>
<span class="badge-desc">12 live LLM steps across 3 sessions published at <code>build-small-hackathon/PaperProf-traces</code>.</span>
<span class="badge-chip">✓ Earned</span>
</div>
</div>
</section>
<main id="article">
<p class="lede reveal">It's 11 PM, the exam is tomorrow, and you're re-reading the same lecture PDF for the fourth time, feeling productive while learning nothing. Passive re-reading is one of the worst study techniques on record. Active recall, forcing yourself to answer questions, is one of the best.</p>
<p class="reveal">So we built <strong>PaperProf</strong>: drop in any course PDF and it becomes your personal professor. It reads the material, generates exam-style questions from it, grades your answers like a patient tutor, and paints you a parting image when you finish. Everything runs on free infrastructure with <strong>zero external API calls</strong>. No OpenAI key, no rate limits, no data leaving the machine.</p>
<section class="chapter reveal" id="team">
<span class="ghost" aria-hidden="true">01</span>
<span class="kicker">Chapter 01</span>
<h2>The team</h2>
</section>
<p class="reveal">PaperProf was built by two EPITA students who spent ten days arguing with Gradio so you don't have to.</p>
<div class="team reveal">
<article class="member">
<div class="member-photo"><img src="assets/ryad.jpg" alt="Portrait of Ryad Gazenay" width="640" height="640"></div>
<div class="member-info">
<span class="role">Co-creator</span>
<h4>Ryad Gazenay</h4>
<div class="member-links">
<a href="https://github.com/ryadg-kura" target="_blank" rel="noopener" aria-label="Ryad Gazenay on GitHub">
<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
GitHub
</a>
<a href="https://www.linkedin.com/in/ryad-gazenay/" target="_blank" rel="noopener" aria-label="Ryad Gazenay on LinkedIn">
<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M14.5 0h-13C.67 0 0 .67 0 1.5v13c0 .83.67 1.5 1.5 1.5h13c.83 0 1.5-.67 1.5-1.5v-13c0-.83-.67-1.5-1.5-1.5zM4.74 13.64H2.38V6.04h2.36v7.6zM3.56 5c-.76 0-1.37-.62-1.37-1.38S2.8 2.25 3.56 2.25s1.37.62 1.37 1.37S4.32 5 3.56 5zm10.08 8.64h-2.36V9.94c0-.88-.02-2.02-1.23-2.02-1.23 0-1.42.96-1.42 1.95v3.77H6.27V6.04h2.27v1.04h.03c.32-.6 1.09-1.23 2.24-1.23 2.39 0 2.83 1.57 2.83 3.62v4.17z"/></svg>
LinkedIn
</a>
</div>
</div>
</article>
<article class="member">
<div class="member-photo"><img src="assets/mehdi.jpg" alt="Portrait of Mehdi Azouz" width="640" height="640"></div>
<div class="member-info">
<span class="role">Co-creator</span>
<h4>Mehdi Azouz</h4>
<div class="member-links">
<a href="https://github.com/gitmehdii" target="_blank" rel="noopener" aria-label="Mehdi Azouz on GitHub">
<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
GitHub
</a>
<a href="https://www.linkedin.com/in/mehdi-azouz-b3b537300/" target="_blank" rel="noopener" aria-label="Mehdi Azouz on LinkedIn">
<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M14.5 0h-13C.67 0 0 .67 0 1.5v13c0 .83.67 1.5 1.5 1.5h13c.83 0 1.5-.67 1.5-1.5v-13c0-.83-.67-1.5-1.5-1.5zM4.74 13.64H2.38V6.04h2.36v7.6zM3.56 5c-.76 0-1.37-.62-1.37-1.38S2.8 2.25 3.56 2.25s1.37.62 1.37 1.37S4.32 5 3.56 5zm10.08 8.64h-2.36V9.94c0-.88-.02-2.02-1.23-2.02-1.23 0-1.42.96-1.42 1.95v3.77H6.27V6.04h2.27v1.04h.03c.32-.6 1.09-1.23 2.24-1.23 2.39 0 2.83 1.57 2.83 3.62v4.17z"/></svg>
LinkedIn
</a>
</div>
</div>
</article>
</div>
<section class="chapter reveal" id="what-it-does">
<span class="ghost" aria-hidden="true">02</span>
<span class="kicker">Chapter 02</span>
<h2>What it does</h2>
</section>
<div class="cards reveal">
<div class="card"><div class="glare"></div><span class="idx">MODE A</span><h4>Open questions</h4><p>Write a free-form answer and get structured tutor feedback: a verdict, what you got right, what you missed, and a model answer.</p></div>
<div class="card"><div class="glare"></div><span class="idx">MODE B</span><h4>MCQ</h4><p>Four plausible options, instant client-side grading, and a one-sentence explanation for every choice, not just the right one.</p></div>
<div class="card"><div class="glare"></div><span class="idx">LIVE</span><h4>Score ring</h4><p>An animated SVG arc tracks your session in real time and shifts color with your accuracy.</p></div>
<div class="card"><div class="glare"></div><span class="idx">REWARD</span><h4>Session image</h4><p>End the session and FLUX.2-klein generates a unique image from the topics you just studied.</p></div>
</div>
<p class="reveal">The whole loop runs on <strong>MiniCPM4.1-8B</strong>, our QLoRA fine-tune of openbmb's latest 8B model, loaded once and shared between question generation and answer evaluation. PyMuPDF extracts the text, a chunker splits it into thematic sections, and the model picks up from there.</p>
<section class="chapter reveal" id="real-story">
<span class="ghost" aria-hidden="true">03</span>
<span class="kicker">Chapter 03</span>
<h2>What the git log actually says</h2>
</section>
<p class="reveal">A hackathon README tells you what was built. The git log tells you what happened. Ours has 101 commits and roughly two-thirds of them start with <code>fix:</code>. Here is the honest version.</p>
<div class="term reveal" id="terminal">
<div class="term-bar"><i></i><i></i><i></i><span>paperprof — git log</span></div>
<div class="term-body" id="term-body" aria-label="Selected commits from the project history"></div>
</div>
<h3 class="reveal" id="lesson-1">Model choice is a compatibility problem, not a benchmark problem</h3>
<p class="reveal">We started with MiniCPM3-4B, upgraded to MiniCPM4-8B for better reasoning, and immediately hit the classic open-model trap: the model card says one thing, the <code>transformers</code> version on your machine says another.</p>
<span class="commit reveal">fix: pin transformers==4.57.1 for MiniCPM4-8B compatibility</span>
<p class="reveal">The follow-up lesson came from quantization. Bitsandbytes 4-bit is great on a 16 GB local GPU and completely unnecessary on ZeroGPU hardware, so we made it conditional:</p>
<pre class="reveal" data-lang="python"><code><span class="tok-c"># HF Spaces (ZeroGPU): skip quantization, use bfloat16 directly</span>
<span class="tok-k">if</span> os.environ.get(<span class="tok-s">"SPACE_ID"</span>):
<span class="tok-k">return</span> <span class="tok-k">None</span>
<span class="tok-c"># Locally: 4-bit when VRAM < 17 GB</span></code></pre>
<p class="reveal">Same code, two deployment targets, zero config files. Detect the environment, adapt.</p>
<h3 class="reveal" id="lesson-2">The custom UI nearly broke us, and taught us the most</h3>
<p class="reveal">The hackathon has an <strong>Off-Brand</strong> badge: ship a UI that doesn't look like the framework you built it with. We wanted PaperProf to look like a real product. Glassmorphism, animated score ring, dark academia palette. Not a Gradio demo.</p>
<div class="timeline reveal">
<div class="tl fail">
<span class="tl-tag">Attempt 01 / Failed</span>
<h4>Restyle Gradio with CSS</h4>
<p>Eleven consecutive commits of theme warfare. Gradio's theming always had one more <code>!important</code> than we did.</p>
</div>
<div class="tl fail">
<span class="tl-tag">Attempt 02 / Failed</span>
<h4>Nuke it from orbit: Docker + FastAPI</h4>
<p>Raw HTML served by FastAPI, Gradio relegated to a backend. Worked locally, died on Spaces. ZeroGPU only flows through the Gradio SDK.</p>
</div>
<div class="tl win">
<span class="tl-tag">Attempt 03 / Shipped</span>
<h4>The hidden-component bridge</h4>
<p>Keep Gradio as an invisible backend inside the page. A fully custom HTML/CSS/JS interface in <code>gr.HTML</code>, every real Gradio component hidden off-screen, and a 300 ms polling loop ferrying data between the two worlds.</p>
</div>
</div>
<p class="reveal">This pattern produced the three hardest-won discoveries of the hackathon.</p>
<p class="reveal"><strong><code>display: none</code> silently kills Gradio.</strong> Components hidden that way never get their Svelte event handlers attached. The fix is the oldest trick in CSS:</p>
<pre class="reveal" data-lang="css"><code><span class="tok-c">/* collapsed but NOT display:none, so Gradio attaches handlers */</span>
<span class="tok-f">#hidden-row-question</span> { <span class="tok-n">height</span>: 0 !important; <span class="tok-n">overflow</span>: visible !important; }</code></pre>
<p class="reveal"><strong>You can't <code>.click()</code> a Gradio button from JS.</strong> Server-side rendering means the synthetic click goes nowhere. What does work: setting a hidden textbox's value through the native property descriptor, then dispatching events so Svelte notices:</p>
<pre class="reveal" data-lang="javascript"><code><span class="tok-k">function</span> <span class="tok-f">setGradioTA</span>(sel, val) {
<span class="tok-k">const</span> el = document.<span class="tok-f">querySelector</span>(sel);
Object.<span class="tok-f">getOwnPropertyDescriptor</span>(HTMLTextAreaElement.prototype, <span class="tok-s">'value'</span>)
.set.<span class="tok-f">call</span>(el, val);
el.<span class="tok-f">dispatchEvent</span>(<span class="tok-k">new</span> <span class="tok-f">Event</span>(<span class="tok-s">'input'</span>, {bubbles: <span class="tok-k">true</span>}));
el.<span class="tok-f">dispatchEvent</span>(<span class="tok-k">new</span> <span class="tok-f">Event</span>(<span class="tok-s">'change'</span>, {bubbles: <span class="tok-k">true</span>}));
}</code></pre>
<p class="reveal">Every action in PaperProf, from generating a question to submitting an answer, is a timestamp written into a hidden textbox, picked up by a <code>.change()</code> listener on the Python side. Buttons that aren't buttons.</p>
<blockquote class="reveal">Sometimes the dumb solution is the senior solution.</blockquote>
<p class="reveal"><strong>MutationObserver loses to Svelte.</strong> Gradio's reactive DOM updates don't always fire observers the way you'd expect. We surrendered and switched to a humble <code>setInterval</code> polling loop. Less elegant, infinitely more reliable.</p>
<h3 class="reveal" id="lesson-3">ZeroGPU makes you think in seconds</h3>
<p class="reveal">ZeroGPU gives you a serious GPU for free, but only in short decorated windows. That budget reshapes your architecture:</p>
<div class="cards reveal">
<div class="card"><div class="glare"></div><span class="idx">COLD START</span><h4>60 to 90 seconds, be honest about it</h4><p>Loading an 8B model takes a while the first time. The UI shows a live elapsed-time counter, escalating messages, and a 3-minute hard timeout that unlocks the UI instead of spinning forever.</p></div>
<div class="card"><div class="glare"></div><span class="idx">PREFETCH</span><h4>Never download inside the GPU window</h4><p>FLUX.2-klein weighs about 16 GB. We prefetch it in a daemon thread at startup, so the <code>@spaces.GPU</code> window is spent generating, not downloading.</p></div>
<div class="card"><div class="glare"></div><span class="idx">CLIENT-SIDE</span><h4>Don't burn GPU on what JS can do</h4><p>MCQ grading needs no model call. The LLM emits a structured format once, we parse it to JSON, and the browser grades clicks instantly. Zero latency, zero GPU seconds.</p></div>
<div class="card"><div class="glare"></div><span class="idx">TRIM</span><h4>Skip what you never read</h4><p>The FLUX repo ships a 7.75 GB duplicate ComfyUI checkpoint that diffusers never touches. One ignore pattern saved half the download.</p></div>
</div>
<h3 class="reveal" id="lesson-4">The bug that fired twice</h3>
<p class="reveal">Late in the hackathon, our session-summary modal showed every MCQ answer <strong>duplicated</strong>: answer one question, see it counted twice, score 0/2.</p>
<p class="reveal">The cause was textbook event handling. MCQ buttons had <code>btn.onclick = handler</code> assigned in the display function <em>and</em> an <code>addEventListener</code> registered by the global wiring function. One click, two handlers, two score increments. Our first fix removed the wrong one and clicks then did nothing at all. The final fix kept the <code>onclick</code>, reassigned fresh with each question and inherently idempotent, plus a re-entrancy guard.</p>
<blockquote class="reveal">When two pieces of code both helpfully wire the same button, you don't have redundancy. You have a race.</blockquote>
<h3 class="reveal" id="lesson-5">Prompts are product decisions</h3>
<p class="reveal">Small prompt details made the difference between tech demo and usable study tool. Early questions were rambling multi-part monsters. The fix was brutal constraint: <em>"ONE question only, on ONE concept. Maximum 25 words. No sub-questions."</em> The evaluator follows a fixed 4-part structure so the frontend can parse and render it as styled sections. <strong>Prompt format is API contract.</strong></p>
<p class="reveal">And with French source PDFs, the model kept drifting into French. Polite instructions lost to the gravitational pull of the context. What finally worked: <code>IMPORTANT: Always write in English</code>, stated twice, top and bottom of the prompt. With 8B models, subtlety is wasted. Repetition is a feature.</p>
<section class="chapter reveal" id="takeaways">
<span class="ghost" aria-hidden="true">04</span>
<span class="kicker">Chapter 04</span>
<h2>What we'd tell past us</h2>
</section>
<ol class="takeaways reveal">
<li><strong>Read the git log of your own project.</strong>Two-thirds <code>fix:</code> commits isn't failure. It's the actual texture of shipping, and each one was a lesson nobody had written down for us.</li>
<li><strong>Frameworks fight back hardest at the edges.</strong>Using Gradio normally is easy. Using it as an invisible backend required understanding how it actually renders.</li>
<li><strong>Free infrastructure imposes honest engineering.</strong>No API credits to hide behind means caring about cold starts, GPU seconds, and weight prefetching. Constraints made the architecture better.</li>
<li><strong>Client-side everything you can.</strong>The MCQ mode is the snappiest feature in the app precisely because it never touches the server after generation.</li>
<li><strong>Ship the small thing.</strong>PaperProf does one loop, read, ask, grade, encourage, and does it end-to-end. A project that completes one circle beats one that sketches five.</li>
</ol>
<section class="chapter reveal" id="stack">
<span class="ghost" aria-hidden="true">05</span>
<span class="kicker">Chapter 05</span>
<h2>The stack</h2>
</section>
<div class="tbl-wrap reveal">
<table>
<thead><tr><th scope="col">Layer</th><th scope="col">Choice</th></tr></thead>
<tbody>
<tr><td><strong>Q&A + evaluation</strong></td><td>MiniCPM4.1-8B · QLoRA fine-tune (build-small-hackathon/MiniCPM4.1-8B-PaperProf) · bfloat16 · transformers 4.57.1</td></tr>
<tr><td><strong>Session images</strong></td><td>FLUX.2-klein-4B (Black Forest Labs) · diffusers</td></tr>
<tr><td><strong>PDF parsing</strong></td><td>PyMuPDF</td></tr>
<tr><td><strong>Backend / hosting</strong></td><td>Gradio 6 on Hugging Face Spaces · ZeroGPU</td></tr>
<tr><td><strong>Frontend</strong></td><td>Hand-written HTML/CSS/JS over a hidden-Gradio bridge</td></tr>
<tr><td><strong>External APIs</strong></td><td><strong>None. Fully off the grid.</strong></td></tr>
</tbody>
</table>
</div>
<section class="chapter reveal" id="epilogue">
<span class="ghost" aria-hidden="true">06</span>
<span class="kicker">Chapter 06</span>
<h2>After the deadline: upgrading to MiniCPM4.1-8B</h2>
</section>
<p class="reveal">The hackathon ended. Then openbmb released <strong>MiniCPM4.1-8B</strong> — a new version with better reasoning and a built-in thinking mode. We upgraded.</p>
<p class="reveal">Three things changed in the pipeline:</p>
<div class="cards reveal">
<div class="card"><div class="glare"></div><span class="idx">UPGRADE</span><h4>New base model</h4><p>Swapped <code>openbmb/MiniCPM4-8B</code> for <code>openbmb/MiniCPM4.1-8B</code>. The new model has a thinking mode — chain-of-thought reasoning tokens that bloat structured outputs. We disable it: <code>enable_thinking=False</code>.</p></div>
<div class="card"><div class="glare"></div><span class="idx">RE-TUNE</span><h4>New fine-tune on the same data</h4><p>Same QLoRA recipe (r=16, all-linear, 1 epoch), same 3 500 training pairs from SQuAD and SciQ in PaperProf's exact prompt format. Published at <code>build-small-hackathon/MiniCPM4.1-8B-PaperProf</code>.</p></div>
<div class="card"><div class="glare"></div><span class="idx">GGUF</span><h4>New quantized runtime</h4><p>The merged bf16 model is converted to Q4_K_M GGUF via llama.cpp and published at <code>build-small-hackathon/MiniCPM4.1-8B-PaperProf-GGUF</code> for the llama.cpp CPU runtime.</p></div>
<div class="card"><div class="glare"></div><span class="idx">TRACE</span><h4>Agent trace on the Hub</h4><p>12 live LLM calls across 3 sessions (OS, ML, Networking) — exact prompts, raw outputs, timings — published as a dataset at <code>build-small-hackathon/PaperProf-traces</code> for the community to learn from.</p></div>
</div>
<p class="reveal">The upgrade took less than an hour of code changes. The fine-tune ran in ~20 minutes on a Modal A100-80GB. The lesson from the hackathon held: <strong>constraints make the architecture honest</strong>, and a well-structured pipeline makes iteration cheap.</p>
</main>
<section class="cta">
<div class="cta-inner reveal">
<h2>Bring a PDF. Let the professor grill you.</h2>
<p>The Space is live on Hugging Face. Upload your course material and start an active-recall session in seconds.</p>
<a class="btn" id="magnet" href="https://huggingface.co/spaces/build-small-hackathon/PaperProf" target="_blank" rel="noopener"><span>Try PaperProf live</span></a>
</div>
</section>
<footer>
<span>Build Small Hackathon · June 5–15, 2026</span>
<span>MiniCPM4.1-8B / FLUX.2-klein / ZeroGPU / 0 external APIs</span>
</footer>
<script>
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
/* progress */
const prog = document.getElementById('progress');
addEventListener('scroll', () => {
const h = document.documentElement;
prog.style.width = (h.scrollTop / (h.scrollHeight - h.clientHeight) * 100) + '%';
}, { passive: true });
/* custom cursor */
if (matchMedia('(pointer: fine)').matches && !reduce) {
const dot = document.querySelector('.cursor-dot');
const ring = document.querySelector('.cursor-ring');
let mx = innerWidth/2, my = innerHeight/2, rx = mx, ry = my;
addEventListener('mousemove', e => {
mx = e.clientX; my = e.clientY;
dot.style.transform = `translate(${mx}px,${my}px) translate(-50%,-50%)`;
const hot = e.target.closest('a, button, .card, .tl');
ring.classList.toggle('hot', !!hot);
}, { passive: true });
(function loop() {
rx += (mx - rx) * 0.16; ry += (my - ry) * 0.16;
ring.style.transform = `translate(${rx}px,${ry}px) translate(-50%,-50%)`;
requestAnimationFrame(loop);
})();
}
/* title scramble decode */
const scrambleEl = document.querySelector('[data-scramble]');
if (scrambleEl && !reduce) {
const final = scrambleEl.textContent;
const glyphs = '!<>-_\\/[]{}=+*^?#ABCDEF';
let frame = 0;
const total = 36;
(function tick() {
frame++;
scrambleEl.textContent = final.split('').map((ch, i) => {
const settle = (i + 1) * (total / (final.length + 2));
return frame >= settle ? ch : glyphs[Math.random() * glyphs.length | 0];
}).join('');
if (frame < total) requestAnimationFrame(tick);
else scrambleEl.textContent = final;
})();
}
/* reveal on scroll */
const io = new IntersectionObserver(es => {
for (const e of es) if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); }
}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
document.querySelectorAll('.reveal').forEach(el => io.observe(el));
/* counters */
const cio = new IntersectionObserver(es => {
for (const e of es) {
if (!e.isIntersecting) continue;
cio.unobserve(e.target);
const el = e.target, target = +el.dataset.count;
if (reduce || target === 0) { el.textContent = target; continue; }
const t0 = performance.now(), dur = 1200;
(function tick(now) {
const p = Math.min((now - t0) / dur, 1);
el.textContent = Math.round(target * (1 - Math.pow(1 - p, 3)));
if (p < 1) requestAnimationFrame(tick);
})(t0);
}
}, { threshold: 0.6 });
document.querySelectorAll('.stat-num').forEach(el => cio.observe(el));
/* terminal typing */
const termLines = [
{ t: '$ git log --oneline | wc -l', c: 'p' },
{ t: '68', c: 'out' },
{ t: '$ git log --oneline | grep -c "fix:"', c: 'p' },
{ t: '45', c: 'out' },
{ t: '$ git log --oneline -5', c: 'p' },
{ t: 'fix: MCQ double-count, remove duplicate onclick handler', c: 'fx' },
{ t: 'fix: force English output in all LLM prompts', c: 'fx' },
{ t: 'feat: FLUX session image in End Session modal', c: 'ft' },
{ t: 'fix: replace display:none with height:0 so Gradio mounts handlers', c: 'fx' },
{ t: 'fix: btn.click() dead in Gradio SSR, use textbox triggers', c: 'fx' },
];
const termBody = document.getElementById('term-body');
const tio = new IntersectionObserver(es => {
if (!es[0].isIntersecting) return;
tio.disconnect();
if (reduce) {
termBody.innerHTML = termLines.map(l => `<span class="ln ${l.c}">${l.t}</span>`).join('');
return;
}
let li = 0, ci = 0;
let cur = document.createElement('span');
const caret = document.createElement('span'); caret.className = 'caret';
cur.className = 'ln ' + termLines[0].c;
termBody.append(cur, caret);
(function type() {
const line = termLines[li];
const isCmd = line.c === 'p';
ci += isCmd ? 1 : 4;
cur.textContent = line.t.slice(0, ci);
if (ci < line.t.length) { setTimeout(type, isCmd ? 26 : 8); return; }
li++; ci = 0;
if (li < termLines.length) {
cur = document.createElement('span');
cur.className = 'ln ' + termLines[li].c;
termBody.insertBefore(cur, caret);
setTimeout(type, termLines[li].c === 'p' ? 420 : 90);
}
})();
}, { threshold: 0.4 });
if (termBody) tio.observe(termBody);
/* tilt cards */
if (matchMedia('(pointer: fine)').matches && !reduce) {
document.querySelectorAll('.card').forEach(card => {
card.addEventListener('mousemove', e => {
const r = card.getBoundingClientRect();
const x = (e.clientX - r.left) / r.width, y = (e.clientY - r.top) / r.height;
card.style.transform = `rotateY(${(x - .5) * 9}deg) rotateX(${(.5 - y) * 9}deg) translateZ(4px)`;
card.style.setProperty('--gx', (x * 100) + '%');
card.style.setProperty('--gy', (y * 100) + '%');
});
card.addEventListener('mouseleave', () => { card.style.transform = ''; });
});
}
/* magnetic button */
const magnet = document.getElementById('magnet');
if (magnet && matchMedia('(pointer: fine)').matches && !reduce) {
const wrap = magnet.parentElement;
wrap.addEventListener('mousemove', e => {
const r = magnet.getBoundingClientRect();
const dx = e.clientX - (r.left + r.width/2), dy = e.clientY - (r.top + r.height/2);
const dist = Math.hypot(dx, dy);
if (dist < 220) magnet.style.transform = `translate(${dx * 0.18}px, ${dy * 0.18}px)`;
else magnet.style.transform = '';
});
wrap.addEventListener('mouseleave', () => { magnet.style.transform = ''; });
}
</script>
</body>
</html>
|