Hugging Face's logo

Spaces:
Adive01
/
SummaryGenerator
Running

App Files Community
SummaryGenerator
File size: 12,278 Bytes
ce27f92
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
<!DOCTYPE html>
<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>