Hugging Face's logo

Spaces:
Adive01
/
SummaryGenerator
Running

App Files Community
Adive01 commited on
Commit
ce27f92
Β·
verified Β·
1 Parent(s): 002af5c

Upload frontend/index.html with huggingface_hub

Browse files
Files changed (1) hide show
  1. frontend/index.html +222 -0
frontend/index.html ADDED
@@ -0,0 +1,222 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" data-theme="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Text Summarization by Adive</title>
7
+ <meta name="description" content="GPU-accelerated neural text summarization. BART-base fine-tuned on XSum, trained on NVIDIA RTX 4050.">
8
+
9
+ <!-- Fonts -->
10
+ <link rel="preconnect" href="https://fonts.googleapis.com">
11
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12
+ <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">
13
+
14
+ <!-- GSAP -->
15
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
16
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
17
+ <!-- SplitType for character reveals -->
18
+ <script src="https://unpkg.com/split-type@0.3.4/umd/index.min.js"></script>
19
+ <!-- Lenis -->
20
+ <script src="https://unpkg.com/@studio-freight/lenis@1.0.34/dist/lenis.min.js"></script>
21
+
22
+ <link rel="stylesheet" href="styles.css">
23
+ </head>
24
+ <body>
25
+ <!-- Custom Cursor -->
26
+ <div id="cursor-dot"></div>
27
+ <div id="cursor-ring"></div>
28
+
29
+ <!-- Site noise & vignette -->
30
+ <div class="site-noise" aria-hidden="true"></div>
31
+ <div class="site-vignette" aria-hidden="true"></div>
32
+
33
+ <!-- ═══════════════════════════════════════════════════════════════
34
+ NAV
35
+ ═══════════════════════════════════════════════════════════════ -->
36
+ <nav id="nav">
37
+ <a href="#" class="nav-logo magnetic-sm">
38
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" aria-label="Prism Studio star">
39
+ <path d="M10 0 L12 8 L20 10 L12 12 L10 20 L8 12 L0 10 L8 8 Z"/>
40
+ </svg>
41
+ Adive
42
+ </a>
43
+ <div class="nav-theme-toggle" id="theme-toggle" role="button" aria-label="Toggle theme">
44
+ <span class="toggle-option" data-val="light">Light</span>
45
+ <span class="toggle-option active" data-val="dark">Dark</span>
46
+ <div class="toggle-pill"></div>
47
+ </div>
48
+ <div class="nav-links">
49
+ <a href="#hero" class="nav-link magnetic-sm">Home</a>
50
+ <a href="#studio" class="nav-link magnetic-sm">Studio</a>
51
+ <a href="#contact" class="nav-link magnetic-sm">Contact</a>
52
+ </div>
53
+ </nav>
54
+
55
+ <!-- ═══════════════════════════════════════════════════════════════
56
+ HERO
57
+ ═══════════════════════════════════════════════════════════════ -->
58
+ <section id="hero">
59
+ <div class="hero-bg-text" aria-hidden="true">BART</div>
60
+
61
+ <div class="hero-headline-wrap">
62
+ <h1 id="hero-title" class="hero-title">
63
+ <span class="line-mask"><span class="line-inner">READ LESS.</span></span>
64
+ <span class="line-mask"><span class="line-inner">UNDERSTAND MORE.</span></span>
65
+ </h1>
66
+ </div>
67
+
68
+ <!-- Floating 3D star β€” CSS only -->
69
+ <div class="hero-star" id="hero-star" aria-hidden="true">
70
+ <div class="star-3d">
71
+ <div class="star-core"></div>
72
+ <div class="star-spike spike-n"></div>
73
+ <div class="star-spike spike-s"></div>
74
+ <div class="star-spike spike-e"></div>
75
+ <div class="star-spike spike-w"></div>
76
+ <div class="star-badge badge-1">XSum</div>
77
+ <div class="star-badge badge-2">RTX 4050</div>
78
+ <div class="star-badge badge-3">BART</div>
79
+ <div class="star-badge badge-4">ROUGE 0.36</div>
80
+ </div>
81
+ </div>
82
+
83
+ <p class="hero-sub" id="hero-sub">
84
+ A fine-tuned BART-base model trained on XSum, running on GPU.<br>
85
+ Paste any document. Get a sharp, accurate summary in seconds.
86
+ </p>
87
+
88
+ <button class="hero-scroll-btn magnetic" id="btn-scroll-down" aria-label="Scroll to studio">
89
+ <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
90
+ <path d="M12 17l-5-5h3V4h4v8h3z"/>
91
+ </svg>
92
+ </button>
93
+ </section>
94
+
95
+ <!-- ═══════════════════════════════════════════════════════════════
96
+ MARQUEE
97
+ ══════════════════════════���════════════════════════════════════ -->
98
+ <div class="marquee-row" aria-hidden="true">
99
+ <div class="marquee-track" id="marquee-track">
100
+ <span>BY ADIVE ✦ BART-BASE FINE-TUNED ✦ TRAINED ON NVIDIA RTX 4050 ✦ XSUM DATASET ✦ ROUGE-1: 0.36 ✦ 3 EPOCHS ✦ </span>
101
+ <span>BY ADIVE ✦ BART-BASE FINE-TUNED ✦ TRAINED ON NVIDIA RTX 4050 ✦ XSUM DATASET ✦ ROUGE-1: 0.36 ✦ 3 EPOCHS ✦ </span>
102
+ <span>BY ADIVE ✦ BART-BASE FINE-TUNED ✦ TRAINED ON NVIDIA RTX 4050 ✦ XSUM DATASET ✦ ROUGE-1: 0.36 ✦ 3 EPOCHS ✦ </span>
103
+ </div>
104
+ </div>
105
+
106
+ <!-- ═══════════════════════════════════════════════════════════════
107
+ STUDIO (HORIZONTAL SCROLL)
108
+ ═══════════════════════════════════════════════════════════════ -->
109
+ <section id="studio">
110
+ <div id="studio-pin-wrapper">
111
+ <div id="studio-track">
112
+
113
+ <!-- Panel 1 β€” Source input -->
114
+ <div class="studio-panel panel-source">
115
+ <p class="panel-eyebrow">01 β€” INPUT</p>
116
+ <h2 class="panel-title">
117
+ <span class="line-mask"><span class="line-inner">YOUR RAW</span></span>
118
+ <span class="line-mask"><span class="line-inner">DOCUMENT.</span></span>
119
+ </h2>
120
+ <div class="glass-card">
121
+ <div class="card-header">
122
+ <span class="dot dot-white"></span>
123
+ <span class="card-label">SOURCE DOCUMENT</span>
124
+ </div>
125
+ <textarea id="source-input" placeholder="Paste any article, report, research paper, or news story here..."></textarea>
126
+ <div class="card-footer">
127
+ <span id="token-counter" class="token-counter">000 TOKENS</span>
128
+ </div>
129
+ </div>
130
+ </div>
131
+
132
+ <!-- Panel 2 β€” Controls -->
133
+ <div class="studio-panel panel-controls">
134
+ <p class="panel-eyebrow">02 β€” CONFIGURE</p>
135
+ <h2 class="panel-title">
136
+ <span class="line-mask"><span class="line-inner">SET YOUR</span></span>
137
+ <span class="line-mask"><span class="line-inner">PARAMETERS.</span></span>
138
+ </h2>
139
+ <div class="controls-body">
140
+ <div class="setting-row">
141
+ <label for="engine-select">INFERENCE ENGINE</label>
142
+ <div class="custom-select-wrap">
143
+ <select id="engine-select">
144
+ <option value="bart">⚑ BART LOCAL (GPU · UNLIMITED · CHUNKED)</option>
145
+ <option value="gemini">✦ GEMINI 2.5 FLASH (1M TOKENS)</option>
146
+ </select>
147
+ <div class="select-arrow">↓</div>
148
+ </div>
149
+ </div>
150
+ <div class="setting-row" id="preset-row">
151
+ <label for="preset-select">GENERATION PRESET</label>
152
+ <div class="custom-select-wrap">
153
+ <select id="preset-select">
154
+ <option value="quick">QUICK PULSE</option>
155
+ <option value="notes">KEY NOTES</option>
156
+ <option value="deep">DEEP CONTEXT</option>
157
+ </select>
158
+ <div class="select-arrow">↓</div>
159
+ </div>
160
+ </div>
161
+ <div class="btn-stack">
162
+ <button id="btn-summarize" class="btn-lime magnetic">
163
+ <span class="btn-label">RUN SUMMARIZATION β†’</span>
164
+ <div class="btn-bg-fill"></div>
165
+ </button>
166
+ <button id="btn-polish" class="btn-outline magnetic-sm" title="Use Gemini to clean up BART's output">
167
+ ✦ GEMINI POLISH OFF
168
+ </button>
169
+ <button id="btn-clear" class="btn-outline magnetic-sm">
170
+ CLEAR ALL
171
+ </button>
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <!-- Panel 3 β€” Output -->
177
+ <div class="studio-panel panel-output">
178
+ <p class="panel-eyebrow">03 β€” RESULT</p>
179
+ <h2 class="panel-title">
180
+ <span class="line-mask"><span class="line-inner">YOUR AI</span></span>
181
+ <span class="line-mask"><span class="line-inner">SUMMARY.</span></span>
182
+ </h2>
183
+ <div class="glass-card glass-card--output">
184
+ <div class="card-header">
185
+ <span class="dot dot-lime"></span>
186
+ <span class="card-label">GENERATED OUTPUT</span>
187
+ </div>
188
+ <textarea id="output-display" readonly placeholder="Your condensed, AI-generated summary will appear here..."></textarea>
189
+ <div id="loading-overlay" class="loading-overlay">
190
+ <div class="spinner-ring"></div>
191
+ <span>RUNNING BART INFERENCE...</span>
192
+ </div>
193
+ </div>
194
+ </div>
195
+
196
+ </div>
197
+ </div>
198
+ </section>
199
+
200
+ <!-- ═══════════════════════════════════════════════════════════════
201
+ FOOTER / CONTACT
202
+ ═══════════════════════════════════════════════════════════════ -->
203
+ <section id="contact">
204
+ <div class="footer-inner">
205
+ <p class="footer-eyebrow">ADIVE STUDIO Β· BUILT BY ADI Β· 2026</p>
206
+ <h2 id="footer-title" class="footer-title">ADIVE<br>STUDIO.</h2>
207
+ <p class="footer-sub">GPU-accelerated text summarization β€” BART-large fine-tuned on the XSum dataset by Adive.</p>
208
+ <div class="footer-meta">
209
+ <span>ROUGE-1: 0.42</span>
210
+ <span class="sep">✦</span>
211
+ <span>ROUGE-L: 0.34</span>
212
+ <span class="sep">✦</span>
213
+ <span>NVIDIA RTX 4050</span>
214
+ <span class="sep">✦</span>
215
+ <span>5 EPOCHS Β· XSum</span>
216
+ </div>
217
+ </div>
218
+ </section>
219
+
220
+ <script src="app.js"></script>
221
+ </body>
222
+ </html>