Spaces:
Running
Running
| <html lang="en" data-theme="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Text Summarization by Adive</title> | |
| <meta name="description" content="GPU-accelerated neural text summarization. BART-base fine-tuned on XSum, trained on NVIDIA RTX 4050."> | |
| <!-- Fonts --> | |
| <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=Inter:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300&display=swap" rel="stylesheet"> | |
| <!-- GSAP --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script> | |
| <!-- SplitType for character reveals --> | |
| <script src="https://unpkg.com/split-type@0.3.4/umd/index.min.js"></script> | |
| <!-- Lenis --> | |
| <script src="https://unpkg.com/@studio-freight/lenis@1.0.34/dist/lenis.min.js"></script> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <!-- Custom Cursor --> | |
| <div id="cursor-dot"></div> | |
| <div id="cursor-ring"></div> | |
| <!-- Site noise & vignette --> | |
| <div class="site-noise" aria-hidden="true"></div> | |
| <div class="site-vignette" aria-hidden="true"></div> | |
| <!-- ═══════════════════════════════════════════════════════════════ | |
| NAV | |
| ═══════════════════════════════════════════════════════════════ --> | |
| <nav id="nav"> | |
| <a href="#" class="nav-logo magnetic-sm"> | |
| <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" aria-label="Prism Studio star"> | |
| <path d="M10 0 L12 8 L20 10 L12 12 L10 20 L8 12 L0 10 L8 8 Z"/> | |
| </svg> | |
| Adive | |
| </a> | |
| <div class="nav-theme-toggle" id="theme-toggle" role="button" aria-label="Toggle theme"> | |
| <span class="toggle-option" data-val="light">Light</span> | |
| <span class="toggle-option active" data-val="dark">Dark</span> | |
| <div class="toggle-pill"></div> | |
| </div> | |
| <div class="nav-links"> | |
| <a href="#hero" class="nav-link magnetic-sm">Home</a> | |
| <a href="#studio" class="nav-link magnetic-sm">Studio</a> | |
| <a href="#contact" class="nav-link magnetic-sm">Contact</a> | |
| </div> | |
| </nav> | |
| <!-- ═══════════════════════════════════════════════════════════════ | |
| HERO | |
| ═══════════════════════════════════════════════════════════════ --> | |
| <section id="hero"> | |
| <div class="hero-bg-text" aria-hidden="true">BART</div> | |
| <div class="hero-headline-wrap"> | |
| <h1 id="hero-title" class="hero-title"> | |
| <span class="line-mask"><span class="line-inner">READ LESS.</span></span> | |
| <span class="line-mask"><span class="line-inner">UNDERSTAND MORE.</span></span> | |
| </h1> | |
| </div> | |
| <!-- Floating 3D star — CSS only --> | |
| <div class="hero-star" id="hero-star" aria-hidden="true"> | |
| <div class="star-3d"> | |
| <div class="star-core"></div> | |
| <div class="star-spike spike-n"></div> | |
| <div class="star-spike spike-s"></div> | |
| <div class="star-spike spike-e"></div> | |
| <div class="star-spike spike-w"></div> | |
| <div class="star-badge badge-1">XSum</div> | |
| <div class="star-badge badge-2">RTX 4050</div> | |
| <div class="star-badge badge-3">BART</div> | |
| <div class="star-badge badge-4">ROUGE 0.36</div> | |
| </div> | |
| </div> | |
| <p class="hero-sub" id="hero-sub"> | |
| A fine-tuned BART-base model trained on XSum, running on GPU.<br> | |
| Paste any document. Get a sharp, accurate summary in seconds. | |
| </p> | |
| <button class="hero-scroll-btn magnetic" id="btn-scroll-down" aria-label="Scroll to studio"> | |
| <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"> | |
| <path d="M12 17l-5-5h3V4h4v8h3z"/> | |
| </svg> | |
| </button> | |
| </section> | |
| <!-- ═══════════════════════════════════════════════════════════════ | |
| MARQUEE | |
| ═══════════════════════════════════════════════════════════════ --> | |
| <div class="marquee-row" aria-hidden="true"> | |
| <div class="marquee-track" id="marquee-track"> | |
| <span>BY ADIVE ✦ BART-BASE FINE-TUNED ✦ TRAINED ON NVIDIA RTX 4050 ✦ XSUM DATASET ✦ ROUGE-1: 0.36 ✦ 3 EPOCHS ✦ </span> | |
| <span>BY ADIVE ✦ BART-BASE FINE-TUNED ✦ TRAINED ON NVIDIA RTX 4050 ✦ XSUM DATASET ✦ ROUGE-1: 0.36 ✦ 3 EPOCHS ✦ </span> | |
| <span>BY ADIVE ✦ BART-BASE FINE-TUNED ✦ TRAINED ON NVIDIA RTX 4050 ✦ XSUM DATASET ✦ ROUGE-1: 0.36 ✦ 3 EPOCHS ✦ </span> | |
| </div> | |
| </div> | |
| <!-- ═══════════════════════════════════════════════════════════════ | |
| STUDIO (HORIZONTAL SCROLL) | |
| ═══════════════════════════════════════════════════════════════ --> | |
| <section id="studio"> | |
| <div id="studio-pin-wrapper"> | |
| <div id="studio-track"> | |
| <!-- Panel 1 — Source input --> | |
| <div class="studio-panel panel-source"> | |
| <p class="panel-eyebrow">01 — INPUT</p> | |
| <h2 class="panel-title"> | |
| <span class="line-mask"><span class="line-inner">YOUR RAW</span></span> | |
| <span class="line-mask"><span class="line-inner">DOCUMENT.</span></span> | |
| </h2> | |
| <div class="glass-card"> | |
| <div class="card-header"> | |
| <span class="dot dot-white"></span> | |
| <span class="card-label">SOURCE DOCUMENT</span> | |
| </div> | |
| <textarea id="source-input" placeholder="Paste any article, report, research paper, or news story here..."></textarea> | |
| <div class="card-footer"> | |
| <span id="token-counter" class="token-counter">000 TOKENS</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Panel 2 — Controls --> | |
| <div class="studio-panel panel-controls"> | |
| <p class="panel-eyebrow">02 — CONFIGURE</p> | |
| <h2 class="panel-title"> | |
| <span class="line-mask"><span class="line-inner">SET YOUR</span></span> | |
| <span class="line-mask"><span class="line-inner">PARAMETERS.</span></span> | |
| </h2> | |
| <div class="controls-body"> | |
| <div class="setting-row"> | |
| <label for="engine-select">INFERENCE ENGINE</label> | |
| <div class="custom-select-wrap"> | |
| <select id="engine-select"> | |
| <option value="bart">⚡ BART LOCAL (GPU · UNLIMITED · CHUNKED)</option> | |
| <option value="gemini">✦ GEMINI 2.5 FLASH (1M TOKENS)</option> | |
| </select> | |
| <div class="select-arrow">↓</div> | |
| </div> | |
| </div> | |
| <div class="setting-row" id="preset-row"> | |
| <label for="preset-select">GENERATION PRESET</label> | |
| <div class="custom-select-wrap"> | |
| <select id="preset-select"> | |
| <option value="quick">QUICK PULSE</option> | |
| <option value="notes">KEY NOTES</option> | |
| <option value="deep">DEEP CONTEXT</option> | |
| </select> | |
| <div class="select-arrow">↓</div> | |
| </div> | |
| </div> | |
| <div class="btn-stack"> | |
| <button id="btn-summarize" class="btn-lime magnetic"> | |
| <span class="btn-label">RUN SUMMARIZATION →</span> | |
| <div class="btn-bg-fill"></div> | |
| </button> | |
| <button id="btn-polish" class="btn-outline magnetic-sm" title="Use Gemini to clean up BART's output"> | |
| ✦ GEMINI POLISH OFF | |
| </button> | |
| <button id="btn-clear" class="btn-outline magnetic-sm"> | |
| CLEAR ALL | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Panel 3 — Output --> | |
| <div class="studio-panel panel-output"> | |
| <p class="panel-eyebrow">03 — RESULT</p> | |
| <h2 class="panel-title"> | |
| <span class="line-mask"><span class="line-inner">YOUR AI</span></span> | |
| <span class="line-mask"><span class="line-inner">SUMMARY.</span></span> | |
| </h2> | |
| <div class="glass-card glass-card--output"> | |
| <div class="card-header"> | |
| <span class="dot dot-lime"></span> | |
| <span class="card-label">GENERATED OUTPUT</span> | |
| </div> | |
| <textarea id="output-display" readonly placeholder="Your condensed, AI-generated summary will appear here..."></textarea> | |
| <div id="loading-overlay" class="loading-overlay"> | |
| <div class="spinner-ring"></div> | |
| <span>RUNNING BART INFERENCE...</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ═══════════════════════════════════════════════════════════════ | |
| FOOTER / CONTACT | |
| ═══════════════════════════════════════════════════════════════ --> | |
| <section id="contact"> | |
| <div class="footer-inner"> | |
| <p class="footer-eyebrow">ADIVE STUDIO · BUILT BY ADI · 2026</p> | |
| <h2 id="footer-title" class="footer-title">ADIVE<br>STUDIO.</h2> | |
| <p class="footer-sub">GPU-accelerated text summarization — BART-large fine-tuned on the XSum dataset by Adive.</p> | |
| <div class="footer-meta"> | |
| <span>ROUGE-1: 0.42</span> | |
| <span class="sep">✦</span> | |
| <span>ROUGE-L: 0.34</span> | |
| <span class="sep">✦</span> | |
| <span>NVIDIA RTX 4050</span> | |
| <span class="sep">✦</span> | |
| <span>5 EPOCHS · XSum</span> | |
| </div> | |
| </div> | |
| </section> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> |