Hugging Face's logo

Spaces:
anupamkukreja
/
youtube-sentiment-app
Sleeping

App Files Community
anupamkukreja commited on
Commit
ab8785a
·
verified ·
1 Parent(s): 127ce93

Delete index.html

Browse files

deleted duplicate file

Files changed (1) hide show
  1. index.html +0 -356
index.html DELETED
@@ -1,356 +0,0 @@
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>YT Emotion Analyzer</title>
7
-
8
- <!-- Google Fonts: Orbitron for headings, Roboto Mono for body -->
9
- <link rel="preconnect" href="https://fonts.googleapis.com">
10
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
- <link href="https://fonts.googleapis.com/css2?family=Orbitron:[email protected]&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">
12
-
13
- <!-- Chart.js for data visualization -->
14
- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
15
-
16
- <style>
17
- /* --- Base & Theme (Black & White) --- */
18
- :root {
19
- --glow-color: #ffffff;
20
- --bg-color: #000000;
21
- --glass-bg: rgba(25, 25, 25, 0.5);
22
- --border-color: rgba(255, 255, 255, 0.3);
23
- --text-color: #f0f0f0;
24
- --header-font: "Orbitron", sans-serif;
25
- --body-font: "Roboto Mono", monospace;
26
- }
27
-
28
- body {
29
- background-color: var(--bg-color);
30
- background-image:
31
- linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
32
- linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
33
- background-size: 25px 25px;
34
- color: var(--text-color);
35
- font-family: var(--body-font);
36
- display: flex;
37
- justify-content: center;
38
- align-items: flex-start;
39
- min-height: 100vh;
40
- padding: 2rem;
41
- }
42
-
43
- .container {
44
- width: 100%;
45
- max-width: 800px;
46
- text-align: center;
47
- }
48
-
49
- /* --- Typography & Header --- */
50
- h1, h2, h3 {
51
- font-family: var(--header-font);
52
- text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
53
- letter-spacing: 2px;
54
- }
55
-
56
- h1 { font-size: 2.5rem; }
57
-
58
- /* --- Glassmorphism Card --- */
59
- .glass-card {
60
- background: var(--glass-bg);
61
- border: 1px solid var(--border-color);
62
- border-radius: 15px;
63
- padding: 1.5rem;
64
- margin-bottom: 2rem;
65
- backdrop-filter: blur(10px);
66
- -webkit-backdrop-filter: blur(10px);
67
- box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
68
- }
69
-
70
- /* --- Form Elements --- */
71
- input[type="text"] {
72
- font-family: var(--body-font);
73
- background: rgba(0,0,0,0.3);
74
- border: 1px solid var(--border-color);
75
- border-radius: 8px;
76
- padding: 0.75rem;
77
- box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.1);
78
- transition: all 0.3s ease;
79
- color: var(--text-color); /* Added this line */
80
- }
81
- input[type="text"]:focus {
82
- box-shadow: 0 0 10px var(--glow-color), inset 0 0 10px rgba(255, 255, 255, 0.2);
83
- border-color: var(--glow-color);
84
- }
85
- button {
86
- font-family: var(--header-font);
87
- background: transparent;
88
- color: var(--glow-color);
89
- border: 2px solid var(--glow-color);
90
- border-radius: 8px;
91
- padding: 0.75rem 1.5rem;
92
- cursor: pointer;
93
- text-shadow: 0 0 5px var(--glow-color);
94
- box-shadow: 0 0 5px var(--glow-color), inset 0 0 5px rgba(255, 255, 255, 0.2);
95
- transition: all 0.3s ease;
96
- }
97
- button:hover {
98
- background: var(--glow-color);
99
- color: var(--bg-color);
100
- box-shadow: 0 0 20px var(--glow-color), inset 0 0 10px var(--glow-color);
101
- }
102
- .button-group { display: flex; gap: 1rem; justify-content: center; }
103
-
104
- /* --- Results & Comments --- */
105
- #resultsSection { display: none; }
106
- .results-grid {
107
- display: grid;
108
- grid-template-columns: 1fr; /* Default to single column */
109
- gap: 2rem;
110
- align-items: flex-start;
111
- }
112
- @media (min-width: 768px) {
113
- .results-grid {
114
- grid-template-columns: 1fr 1fr; /* Two columns on larger screens */
115
- }
116
- }
117
- #videoInfo img {
118
- max-width: 100%;
119
- border-radius: 8px;
120
- border: 1px solid var(--border-color);
121
- }
122
- .comment-lists { text-align: left; }
123
- .comment-lists h3 { font-size: 1.2rem; text-transform: capitalize; }
124
- .comment-lists ul {
125
- list-style: none;
126
- padding: 0;
127
- max-height: 200px;
128
- overflow-y: auto;
129
- }
130
- .comment-lists li {
131
- background: var(--glass-bg);
132
- border-left: 3px solid var(--glow-color);
133
- padding: 0.75rem;
134
- margin-bottom: 0.5rem;
135
- border-radius: 0 5px 5px 0;
136
- font-size: 0.9rem;
137
- }
138
-
139
- /* --- Loader Animation --- */
140
- #loader {
141
- display: none;
142
- width: 50px;
143
- height: 50px;
144
- border: 5px solid rgba(255, 255, 255, 0.2);
145
- border-top-color: var(--glow-color);
146
- border-radius: 50%;
147
- animation: spin 1s linear infinite;
148
- margin: 2rem auto;
149
- }
150
- @keyframes spin { to { transform: rotate(360deg); } }
151
-
152
- /* --- Utility --- */
153
- .hidden { display: none; }
154
- </style>
155
- </head>
156
- <body>
157
- <main class="container">
158
- <h1>EMOTION ANALYZER</h1>
159
- <p>Input a YouTube video URL for deep comment analysis.</p>
160
-
161
- <section class="glass-card">
162
- <form id="urlForm">
163
- <input type="text" id="youtubeUrlInput" placeholder="Enter YouTube Video URL..." required>
164
- <div class="button-group" style="margin-top: 1rem;">
165
- <button type="submit" id="analyzeButton">ANALYZE</button>
166
- <button type="button" id="clearButton" class="hidden">CLEAR</button>
167
- </div>
168
- </form>
169
- </section>
170
-
171
- <div id="loader"></div>
172
- <p id="statusText"></p>
173
-
174
- <section id="resultsSection" class="glass-card">
175
- <div id="videoInfo">
176
- <img id="videoThumbnail" src="" alt="Video Thumbnail">
177
- <h2 id="videoTitle"></h2>
178
- <p id="totalCommentsText"></p>
179
- </div>
180
- <hr style="border-color: var(--border-color); margin: 2rem 0;">
181
- <div class="results-grid">
182
- <div id="chartContainer">
183
- <canvas id="emotionChart"></canvas>
184
- </div>
185
- <div id="topCommentsContainer" class="comment-lists">
186
- <!-- Comment lists will be dynamically generated here -->
187
- </div>
188
- </div>
189
- </section>
190
-
191
- </main>
192
-
193
- <script>
194
- // --- DOM Elements ---
195
- const urlForm = document.getElementById('urlForm');
196
- const urlInput = document.getElementById('youtubeUrlInput');
197
- const analyzeButton = document.getElementById('analyzeButton');
198
- const clearButton = document.getElementById('clearButton');
199
- const loader = document.getElementById('loader');
200
- const statusText = document.getElementById('statusText');
201
- const resultsSection = document.getElementById('resultsSection');
202
- const videoThumbnail = document.getElementById('videoThumbnail');
203
- const videoTitle = document.getElementById('videoTitle');
204
- const totalCommentsText = document.getElementById('totalCommentsText');
205
- const chartCanvas = document.getElementById('emotionChart').getContext('2d');
206
- const topCommentsContainer = document.getElementById('topCommentsContainer');
207
-
208
- // --- Global Chart Variable ---
209
- let myChart = null;
210
-
211
- // --- Event Listeners ---
212
- urlForm.addEventListener('submit', handleFormSubmit);
213
- clearButton.addEventListener('click', clearResults);
214
-
215
- // --- Core Functions ---
216
- async function handleFormSubmit(event) {
217
- event.preventDefault();
218
- const url = urlInput.value.trim();
219
- if (!url) return;
220
-
221
- clearResults(false);
222
- loader.style.display = 'block';
223
- statusText.textContent = 'Analyzing emotional spectrum...';
224
- analyzeButton.disabled = true;
225
-
226
- try {
227
- const response = await fetch(window.location.origin + '/analyze', {
228
- method: 'POST',
229
- headers: { 'Content-Type': 'application/json' },
230
- body: JSON.stringify({ youtube_url: url })
231
- });
232
-
233
- const data = await response.json();
234
-
235
- if (!response.ok) {
236
- throw new Error(data.error || 'API request failed.');
237
- }
238
-
239
- statusText.textContent = 'Analysis complete.';
240
- displayResults(data);
241
-
242
- } catch (error) {
243
- statusText.textContent = `Error: ${error.message}`;
244
- } finally {
245
- loader.style.display = 'none';
246
- analyzeButton.disabled = false;
247
- }
248
- }
249
-
250
- function displayResults(data) {
251
- videoTitle.textContent = data.video_details.title;
252
- videoThumbnail.src = data.video_details.thumbnail_url;
253
-
254
- if (data.error) {
255
- totalCommentsText.textContent = data.error;
256
- resultsSection.style.display = 'block';
257
- clearButton.classList.remove('hidden');
258
- return;
259
- }
260
-
261
- totalCommentsText.textContent = `Based on ${data.total_comments_analyzed} comments analyzed.`;
262
-
263
- renderEmotionChart(data.emotions);
264
- populateEmotionCommentLists(data.top_comments_by_emotion);
265
-
266
- resultsSection.style.display = 'block';
267
- clearButton.classList.remove('hidden');
268
- }
269
-
270
- function renderEmotionChart(emotions) {
271
- if (myChart) myChart.destroy();
272
-
273
- Chart.defaults.color = '#f0f0f0';
274
- Chart.defaults.font.family = '"Roboto Mono", monospace';
275
-
276
- const emotionOrder = ['joy', 'optimism', 'sadness', 'anger'];
277
- const chartLabels = emotionOrder.map(label => label.charAt(0).toUpperCase() + label.slice(1));
278
- const chartData = emotionOrder.map(label => emotions[label] || 0);
279
-
280
- myChart = new Chart(chartCanvas, {
281
- type: 'radar',
282
- data: {
283
- labels: chartLabels,
284
- datasets: [{
285
- label: 'Emotion Score',
286
- data: chartData,
287
- fill: true,
288
- backgroundColor: 'rgba(255, 255, 255, 0.2)',
289
- borderColor: 'rgb(255, 255, 255)',
290
- pointBackgroundColor: 'rgb(255, 255, 255)',
291
- pointBorderColor: '#fff',
292
- pointHoverBackgroundColor: '#fff',
293
- pointHoverBorderColor: 'rgb(255, 255, 255)'
294
- }]
295
- },
296
- options: {
297
- responsive: true,
298
- plugins: {
299
- legend: { display: false },
300
- title: {
301
- display: true,
302
- text: 'Emotion Distribution Profile',
303
- font: { family: '"Orbitron", sans-serif', size: 16 }
304
- }
305
- },
306
- scales: {
307
- r: {
308
- angleLines: { color: 'rgba(255, 255, 255, 0.2)' },
309
- grid: { color: 'rgba(255, 255, 255, 0.2)' },
310
- pointLabels: { font: { size: 12 } },
311
- ticks: {
312
- backdropColor: 'rgba(0, 0, 0, 0.5)',
313
- stepSize: Math.max(1, Math.ceil(Math.max(...chartData, 1) / 4))
314
- }
315
- }
316
- }
317
- }
318
- });
319
- }
320
-
321
- function populateEmotionCommentLists(top_comments) {
322
- topCommentsContainer.innerHTML = '';
323
- const emotionOrder = ['joy', 'optimism', 'anger', 'sadness'];
324
- for (const emotion of emotionOrder) {
325
- const comments = top_comments[emotion];
326
- if (comments && comments.length > 0) {
327
- const emotionSection = document.createElement('div');
328
- const title = document.createElement('h3');
329
- title.textContent = emotion;
330
- emotionSection.appendChild(title);
331
-
332
- const listElement = document.createElement('ul');
333
- comments.forEach(comment => {
334
- const li = document.createElement('li');
335
- li.textContent = comment;
336
- listElement.appendChild(li);
337
- });
338
- emotionSection.appendChild(listElement);
339
- topCommentsContainer.appendChild(emotionSection);
340
- }
341
- }
342
- }
343
-
344
- function clearResults(clearInput = true) {
345
- if (myChart) myChart.destroy();
346
- resultsSection.style.display = 'none';
347
- statusText.textContent = '';
348
- if (clearInput) urlInput.value = '';
349
- topCommentsContainer.innerHTML = '';
350
- clearButton.classList.add('hidden');
351
- }
352
- </script>
353
- </body>
354
- </html>
355
-
356
-