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 <link9 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 <header45 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 <div57 class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold"58 >59 U60 </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 <div70 class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold"71 >72 U73 </div>74 </div>75 <div class="flex-1">76 <textarea77 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 <div83 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 <button97 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 disabled100 >101 Post102 </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 <div115 class="w-10 h-10 rounded-full bg-purple-500 flex items-center justify-center text-white font-semibold"116 >117 A118 </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 a127 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 <button132 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 <button138 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 <button144 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 <div151 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 <div165 class="w-10 h-10 rounded-full bg-red-500 flex items-center justify-center text-white font-semibold"166 >167 B168 </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 <button182 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 <button188 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 <button194 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 <div201 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 <div215 class="w-10 h-10 rounded-full bg-gray-500 flex items-center justify-center text-white font-semibold"216 >217 C218 </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 the227 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 <button232 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 <button238 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 <button244 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 <div251 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 <div266 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 content280 postContent.addEventListener("input", function () {281 postButton.disabled = this.value.trim().length === 0;282 });283 284 // Handle post submission285 postButton.addEventListener("click", function () {286 const content = postContent.value.trim();287 if (content.length === 0) return;288 289 // Show loading indicator290 loadingIndicator.classList.remove("hidden");291 292 // Simulate API call delay for sentiment analysis293 setTimeout(() => {294 // Create new post295 createPost(content);296 297 // Clear input and disable button298 postContent.value = "";299 postButton.disabled = true;300 301 // Hide loading indicator302 loadingIndicator.classList.add("hidden");303 }, 1500);304 });305 306 // Function to create a new post with sentiment analysis307 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 element312 const postElement = document.createElement("div");313 postElement.className = `p-4 sentiment-${sentiment.class}`;314 315 // Generate random user data for demo316 const randomName = getRandomName();317 const randomInitial = randomName.charAt(0);318 const randomColor = getRandomColor();319 320 // Post HTML321 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.class351 )}">352 <i class="${getSentimentIcon(353 sentiment.class354 )}"></i>355 <span>${sentiment.label}</span>356 </div>357 </div>358 </div>359 </div>360 `;361 362 // Add to the top of the posts container363 postsContainer.prepend(postElement);364 365 // Scroll to the new post366 postElement.scrollIntoView({ behavior: "smooth" });367 }368 369 // Simulated BERT sentiment analysis function370 function analyzeSentiment(text) {371 // This is a simplified simulation - in a real app, you'd call your BERT model API372 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 scores410 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 functions420 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