botayla/Sentiment_analysis
0
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Sentiment Twitter</title>
7 <script src="https://cdn.tailwindcss.com"></script>
8 <link
9 rel="stylesheet"
10 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
11 />
12 <style>
13 .sentiment-positive {
14 background-color: rgba(74, 222, 128, 0.2);
15 border-left: 4px solid rgb(74, 222, 128);
16 }
17 .sentiment-negative {
18 background-color: rgba(248, 113, 113, 0.2);
19 border-left: 4px solid rgb(248, 113, 113);
20 }
21 .sentiment-neutral {
22 background-color: rgba(156, 163, 175, 0.2);
23 border-left: 4px solid rgb(156, 163, 175);
24 }
25 .pulse {
26 animation: pulse 2s infinite;
27 }
28 @keyframes pulse {
29 0% {
30 opacity: 1;
31 }
32 50% {
33 opacity: 0.5;
34 }
35 100% {
36 opacity: 1;
37 }
38 }
39 </style>
40 </head>
41 <body class="bg-gray-50 min-h-screen">
42 <div class="max-w-2xl mx-auto">
43 <!-- Header -->
44 <header
45 class="sticky top-0 z-10 bg-white bg-opacity-90 backdrop-blur-sm border-b border-gray-200 p-4"
46 >
47 <div class="flex items-center justify-between">
48 <div class="flex items-center space-x-2">
49 <i class="fas fa-feather-alt text-blue-500 text-2xl"></i>
50 <h1 class="text-xl font-bold text-gray-800">Sentiment Twitter</h1>
51 </div>
52 <div class="flex items-center space-x-4">
53 <button class="p-2 rounded-full hover:bg-gray-100">
54 <i class="fas fa-bell text-gray-600"></i>
55 </button>
56 <div
57 class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold"
58 >
59 U
60 </div>
61 </div>
62 </div>
63 </header>
64
65 <!-- Post Creation -->
66 <div class="bg-white p-4 border-b border-gray-200">
67 <div class="flex space-x-3">
68 <div class="flex-shrink-0">
69 <div
70 class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold"
71 >
72 U
73 </div>
74 </div>
75 <div class="flex-1">
76 <textarea
77 id="postContent"
78 class="w-full border-0 focus:ring-0 resize-none text-lg placeholder-gray-500 tracking-wide min-h-[50px]"
79 placeholder="What's happening?"
80 rows="2"
81 ></textarea>
82 <div
83 class="flex items-center justify-between pt-2 border-t border-gray-200"
84 >
85 <div class="flex space-x-1">
86 <button class="p-2 rounded-full text-blue-500 hover:bg-blue-50">
87 <i class="far fa-image"></i>
88 </button>
89 <button class="p-2 rounded-full text-blue-500 hover:bg-blue-50">
90 <i class="far fa-smile"></i>
91 </button>
92 <button class="p-2 rounded-full text-blue-500 hover:bg-blue-50">
93 <i class="far fa-calendar-alt"></i>
94 </button>
95 </div>
96 <button
97 id="postButton"
98 class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-1.5 rounded-full font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
99 disabled
100 >
101 Post
102 </button>
103 </div>
104 </div>
105 </div>
106 </div>
107
108 <!-- Posts Feed -->
109 <div id="postsContainer" class="divide-y divide-gray-200">
110 <!-- Sample posts will be added here dynamically -->
111 <div class="p-4 sentiment-positive">
112 <div class="flex space-x-3">
113 <div class="flex-shrink-0">
114 <div
115 class="w-10 h-10 rounded-full bg-purple-500 flex items-center justify-center text-white font-semibold"
116 >
117 A
118 </div>
119 </div>
120 <div class="flex-1 min-w-0">
121 <div class="flex items-center text-sm">
122 <span class="font-bold text-gray-900 truncate">Alice</span>
123 <span class="ml-1 text-gray-500 truncate">@alice 路 2h</span>
124 </div>
125 <p class="text-gray-800 text-base mt-1">
126 Just had the best day ever! The weather is perfect and I got a
127 promotion at work! 馃帀
128 </p>
129 <div class="mt-2 flex items-center justify-between">
130 <div class="flex space-x-4 text-gray-500">
131 <button
132 class="flex items-center space-x-1 hover:text-blue-500"
133 >
134 <i class="far fa-comment"></i>
135 <span>12</span>
136 </button>
137 <button
138 class="flex items-center space-x-1 hover:text-green-500"
139 >
140 <i class="fas fa-retweet"></i>
141 <span>5</span>
142 </button>
143 <button
144 class="flex items-center space-x-1 hover:text-red-500"
145 >
146 <i class="far fa-heart"></i>
147 <span>24</span>
148 </button>
149 </div>
150 <div
151 class="flex items-center space-x-1 text-sm bg-green-100 text-green-800 px-2 py-0.5 rounded-full"
152 >
153 <i class="fas fa-smile"></i>
154 <span>Positive</span>
155 </div>
156 </div>
157 </div>
158 </div>
159 </div>
160
161 <div class="p-4 sentiment-negative">
162 <div class="flex space-x-3">
163 <div class="flex-shrink-0">
164 <div
165 class="w-10 h-10 rounded-full bg-red-500 flex items-center justify-center text-white font-semibold"
166 >
167 B
168 </div>
169 </div>
170 <div class="flex-1 min-w-0">
171 <div class="flex items-center text-sm">
172 <span class="font-bold text-gray-900 truncate">Bob</span>
173 <span class="ml-1 text-gray-500 truncate">@bob 路 4h</span>
174 </div>
175 <p class="text-gray-800 text-base mt-1">
176 I can't believe how terrible the service was at that restaurant.
177 Never going back there again! 馃槨
178 </p>
179 <div class="mt-2 flex items-center justify-between">
180 <div class="flex space-x-4 text-gray-500">
181 <button
182 class="flex items-center space-x-1 hover:text-blue-500"
183 >
184 <i class="far fa-comment"></i>
185 <span>8</span>
186 </button>
187 <button
188 class="flex items-center space-x-1 hover:text-green-500"
189 >
190 <i class="fas fa-retweet"></i>
191 <span>2</span>
192 </button>
193 <button
194 class="flex items-center space-x-1 hover:text-red-500"
195 >
196 <i class="far fa-heart"></i>
197 <span>15</span>
198 </button>
199 </div>
200 <div
201 class="flex items-center space-x-1 text-sm bg-red-100 text-red-800 px-2 py-0.5 rounded-full"
202 >
203 <i class="fas fa-frown"></i>
204 <span>Negative</span>
205 </div>
206 </div>
207 </div>
208 </div>
209 </div>
210
211 <div class="p-4 sentiment-neutral">
212 <div class="flex space-x-3">
213 <div class="flex-shrink-0">
214 <div
215 class="w-10 h-10 rounded-full bg-gray-500 flex items-center justify-center text-white font-semibold"
216 >
217 C
218 </div>
219 </div>
220 <div class="flex-1 min-w-0">
221 <div class="flex items-center text-sm">
222 <span class="font-bold text-gray-900 truncate">Charlie</span>
223 <span class="ml-1 text-gray-500 truncate">@charlie 路 6h</span>
224 </div>
225 <p class="text-gray-800 text-base mt-1">
226 The meeting today was scheduled for 2pm. We discussed the
227 quarterly reports.
228 </p>
229 <div class="mt-2 flex items-center justify-between">
230 <div class="flex space-x-4 text-gray-500">
231 <button
232 class="flex items-center space-x-1 hover:text-blue-500"
233 >
234 <i class="far fa-comment"></i>
235 <span>3</span>
236 </button>
237 <button
238 class="flex items-center space-x-1 hover:text-green-500"
239 >
240 <i class="fas fa-retweet"></i>
241 <span>1</span>
242 </button>
243 <button
244 class="flex items-center space-x-1 hover:text-red-500"
245 >
246 <i class="far fa-heart"></i>
247 <span>7</span>
248 </button>
249 </div>
250 <div
251 class="flex items-center space-x-1 text-sm bg-gray-100 text-gray-800 px-2 py-0.5 rounded-full"
252 >
253 <i class="fas fa-meh"></i>
254 <span>Neutral</span>
255 </div>
256 </div>
257 </div>
258 </div>
259 </div>
260 </div>
261
262 <!-- Loading indicator -->
263 <div id="loadingIndicator" class="p-4 hidden">
264 <div class="flex justify-center">
265 <div
266 class="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"
267 ></div>
268 </div>
269 </div>
270 </div>
271
272 <script>
273 document.addEventListener("DOMContentLoaded", function () {
274 const postContent = document.getElementById("postContent");
275 const postButton = document.getElementById("postButton");
276 const postsContainer = document.getElementById("postsContainer");
277 const loadingIndicator = document.getElementById("loadingIndicator");
278
279 // Enable/disable post button based on content
280 postContent.addEventListener("input", function () {
281 postButton.disabled = this.value.trim().length === 0;
282 });
283
284 // Handle post submission
285 postButton.addEventListener("click", function () {
286 const content = postContent.value.trim();
287 if (content.length === 0) return;
288
289 // Show loading indicator
290 loadingIndicator.classList.remove("hidden");
291
292 // Simulate API call delay for sentiment analysis
293 setTimeout(() => {
294 // Create new post
295 createPost(content);
296
297 // Clear input and disable button
298 postContent.value = "";
299 postButton.disabled = true;
300
301 // Hide loading indicator
302 loadingIndicator.classList.add("hidden");
303 }, 1500);
304 });
305
306 // Function to create a new post with sentiment analysis
307 function createPost(content) {
308 // Simulate BERT sentiment analysis (in a real app, this would be an API call)
309 const sentiment = analyzeSentiment(content);
310
311 // Create post element
312 const postElement = document.createElement("div");
313 postElement.className = `p-4 sentiment-${sentiment.class}`;
314
315 // Generate random user data for demo
316 const randomName = getRandomName();
317 const randomInitial = randomName.charAt(0);
318 const randomColor = getRandomColor();
319
320 // Post HTML
321 postElement.innerHTML = `
322 <div class="flex space-x-3">
323 <div class="flex-shrink-0">
324 <div class="w-10 h-10 rounded-full ${randomColor} flex items-center justify-center text-white font-semibold">
325 ${randomInitial}
326 </div>
327 </div>
328 <div class="flex-1 min-w-0">
329 <div class="flex items-center text-sm">
330 <span class="font-bold text-gray-900 truncate">${randomName}</span>
331 <span class="ml-1 text-gray-500 truncate">@${randomName.toLowerCase()} 路 just now</span>
332 </div>
333 <p class="text-gray-800 text-base mt-1">${content}</p>
334 <div class="mt-2 flex items-center justify-between">
335 <div class="flex space-x-4 text-gray-500">
336 <button class="flex items-center space-x-1 hover:text-blue-500">
337 <i class="far fa-comment"></i>
338 <span>0</span>
339 </button>
340 <button class="flex items-center space-x-1 hover:text-green-500">
341 <i class="fas fa-retweet"></i>
342 <span>0</span>
343 </button>
344 <button class="flex items-center space-x-1 hover:text-red-500">
345 <i class="far fa-heart"></i>
346 <span>0</span>
347 </button>
348 </div>
349 <div class="flex items-center space-x-1 text-sm ${getSentimentBadgeClass(
350 sentiment.class
351 )}">
352 <i class="${getSentimentIcon(
353 sentiment.class
354 )}"></i>
355 <span>${sentiment.label}</span>
356 </div>
357 </div>
358 </div>
359 </div>
360 `;
361
362 // Add to the top of the posts container
363 postsContainer.prepend(postElement);
364
365 // Scroll to the new post
366 postElement.scrollIntoView({ behavior: "smooth" });
367 }
368
369 // Simulated BERT sentiment analysis function
370 function analyzeSentiment(text) {
371 // This is a simplified simulation - in a real app, you'd call your BERT model API
372 const positiveWords = [
373 "happy",
374 "great",
375 "awesome",
376 "fantastic",
377 "amazing",
378 "love",
379 "best",
380 "perfect",
381 "wonderful",
382 "excellent",
383 ];
384 const negativeWords = [
385 "bad",
386 "terrible",
387 "awful",
388 "hate",
389 "worst",
390 "angry",
391 "sad",
392 "disappointed",
393 "frustrated",
394 "annoyed",
395 ];
396
397 const lowerText = text.toLowerCase();
398 let positiveScore = 0;
399 let negativeScore = 0;
400
401 positiveWords.forEach((word) => {
402 if (lowerText.includes(word)) positiveScore++;
403 });
404
405 negativeWords.forEach((word) => {
406 if (lowerText.includes(word)) negativeScore++;
407 });
408
409 // Determine sentiment based on scores
410 if (positiveScore > negativeScore) {
411 return { class: "positive", label: "Positive" };
412 } else if (negativeScore > positiveScore) {
413 return { class: "negative", label: "Negative" };
414 } else {
415 return { class: "neutral", label: "Neutral" };
416 }
417 }
418
419 // Helper functions
420 function getRandomName() {
421 const names = [
422 "David",
423 "Emma",
424 "Frank",
425 "Grace",
426 "Henry",
427 "Isabella",
428 "Jack",
429 "Katherine",
430 "Liam",
431 "Mia",
432 ];
433 return names[Math.floor(Math.random() * names.length)];
434 }
435
436 function getRandomColor() {
437 const colors = [
438 "bg-blue-500",
439 "bg-purple-500",
440 "bg-pink-500",
441 "bg-red-500",
442 "bg-orange-500",
443 "bg-yellow-500",
444 "bg-green-500",
445 "bg-teal-500",
446 "bg-cyan-500",
447 ];
448 return colors[Math.floor(Math.random() * colors.length)];
449 }
450
451 function getSentimentBadgeClass(sentiment) {
452 switch (sentiment) {
453 case "positive":
454 return "bg-green-100 text-green-800";
455 case "negative":
456 return "bg-red-100 text-red-800";
457 default:
458 return "bg-gray-100 text-gray-800";
459 }
460 }
461
462 function getSentimentIcon(sentiment) {
463 switch (sentiment) {
464 case "positive":
465 return "fas fa-smile";
466 case "negative":
467 return "fas fa-frown";
468 default:
469 return "fas fa-meh";
470 }
471 }
472 });
473 </script>
474 </body>
475</html>
476