Hugging Face's logo

Spaces:
build-small-hackathon
/
PaperProf
Running on Zero

App Files Community
PaperProf / blog /index.html
Mehdi
chore: update commit counter 68 → 101
fd28ec7
Raw
History Blame Contribute Delete
51.1 kB
<!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 &lt; 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&amp;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>