Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Sentiment Analyzer</title> | |
| <script type="module"> | |
| import { pipeline } | |
| from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.8.1"; | |
| window.pipeline = pipeline; | |
| </script> | |
| <style> | |
| *{ | |
| box-sizing:border-box; | |
| margin:0; | |
| padding:0; | |
| } | |
| body{ | |
| font-family:Arial, sans-serif; | |
| min-height:100vh; | |
| color:white; | |
| overflow-x:hidden; | |
| background: | |
| radial-gradient(circle at 20% 20%, #312e81 0%, transparent 30%), | |
| radial-gradient(circle at 80% 80%, #701a75 0%, transparent 30%), | |
| linear-gradient(135deg,#020617,#0f172a,#1e1b4b); | |
| } | |
| /* Floating particles */ | |
| .particle{ | |
| position:fixed; | |
| width:5px; | |
| height:5px; | |
| background:#818cf8; | |
| border-radius:50%; | |
| opacity:.7; | |
| animation:float 8s infinite linear; | |
| } | |
| .p1{left:10%;top:80%;} | |
| .p2{left:25%;top:30%;animation-delay:2s;} | |
| .p3{left:50%;top:70%;animation-delay:4s;} | |
| .p4{left:75%;top:20%;animation-delay:1s;} | |
| .p5{left:90%;top:60%;animation-delay:3s;} | |
| @keyframes float{ | |
| 0%{ | |
| transform:translateY(0); | |
| opacity:.2; | |
| } | |
| 50%{ | |
| opacity:1; | |
| } | |
| 100%{ | |
| transform:translateY(-500px); | |
| opacity:0; | |
| } | |
| } | |
| /* Main */ | |
| .container{ | |
| width:92%; | |
| max-width:800px; | |
| margin:40px auto; | |
| } | |
| /* Header */ | |
| .header{ | |
| text-align:center; | |
| margin-bottom:25px; | |
| } | |
| .logo{ | |
| font-size:70px; | |
| animation:pulse 2s infinite; | |
| } | |
| @keyframes pulse{ | |
| 0%,100%{ | |
| transform:scale(1); | |
| filter:drop-shadow(0 0 5px #818cf8); | |
| } | |
| 50%{ | |
| transform:scale(1.12); | |
| filter:drop-shadow(0 0 25px #818cf8); | |
| } | |
| } | |
| h1{ | |
| font-size:42px; | |
| margin:10px 0; | |
| background:linear-gradient( | |
| 90deg, | |
| #818cf8, | |
| #c084fc, | |
| #f472b6 | |
| ); | |
| -webkit-background-clip:text; | |
| color:transparent; | |
| } | |
| .description{ | |
| color:#cbd5e1; | |
| font-size:16px; | |
| } | |
| /* Card */ | |
| .card{ | |
| background:rgba(15,23,42,.78); | |
| border:1px solid rgba(129,140,248,.35); | |
| backdrop-filter:blur(15px); | |
| padding:30px; | |
| border-radius:25px; | |
| box-shadow: | |
| 0 0 40px rgba(99,102,241,.15), | |
| inset 0 0 20px rgba(255,255,255,.02); | |
| } | |
| /* Input */ | |
| label{ | |
| display:block; | |
| font-weight:bold; | |
| margin-bottom:10px; | |
| } | |
| textarea{ | |
| width:100%; | |
| height:160px; | |
| padding:18px; | |
| border-radius:15px; | |
| border:2px solid #334155; | |
| background:#020617; | |
| color:white; | |
| font-size:16px; | |
| resize:vertical; | |
| outline:none; | |
| transition:.3s; | |
| } | |
| textarea:focus{ | |
| border-color:#818cf8; | |
| box-shadow: | |
| 0 0 15px rgba(129,140,248,.4); | |
| } | |
| /* Buttons */ | |
| .buttons{ | |
| display:flex; | |
| gap:12px; | |
| margin-top:15px; | |
| } | |
| button{ | |
| flex:1; | |
| padding:15px; | |
| border:none; | |
| border-radius:12px; | |
| font-size:16px; | |
| font-weight:bold; | |
| cursor:pointer; | |
| transition:.25s; | |
| } | |
| .analyze{ | |
| color:white; | |
| background: | |
| linear-gradient( | |
| 90deg, | |
| #4f46e5, | |
| #9333ea | |
| ); | |
| box-shadow: | |
| 0 0 15px rgba(99,102,241,.5); | |
| } | |
| .analyze:hover{ | |
| transform:translateY(-3px); | |
| box-shadow: | |
| 0 0 30px rgba(168,85,247,.8); | |
| } | |
| .clear{ | |
| background:#334155; | |
| color:white; | |
| } | |
| .clear:hover{ | |
| background:#475569; | |
| transform:translateY(-3px); | |
| } | |
| button:disabled{ | |
| opacity:.5; | |
| cursor:not-allowed; | |
| } | |
| /* Status */ | |
| .status{ | |
| text-align:center; | |
| margin-top:18px; | |
| min-height:22px; | |
| color:#a5b4fc; | |
| } | |
| /* Thinking */ | |
| .thinking{ | |
| display:none; | |
| text-align:center; | |
| margin-top:20px; | |
| } | |
| .brain{ | |
| font-size:45px; | |
| animation:thinking 1s infinite; | |
| } | |
| @keyframes thinking{ | |
| 0%,100%{ | |
| transform:scale(1); | |
| } | |
| 50%{ | |
| transform:scale(1.2); | |
| } | |
| } | |
| /* Result */ | |
| .result{ | |
| display:none; | |
| margin-top:25px; | |
| text-align:center; | |
| padding:30px; | |
| border-radius:20px; | |
| background: | |
| linear-gradient( | |
| 145deg, | |
| rgba(30,41,59,.9), | |
| rgba(15,23,42,.9) | |
| ); | |
| border:1px solid #475569; | |
| animation:resultAppear .5s ease; | |
| } | |
| @keyframes resultAppear{ | |
| from{ | |
| opacity:0; | |
| transform:translateY(20px) scale(.95); | |
| } | |
| to{ | |
| opacity:1; | |
| transform:translateY(0) scale(1); | |
| } | |
| } | |
| .result-icon{ | |
| font-size:75px; | |
| margin-bottom:10px; | |
| } | |
| .result-title{ | |
| font-size:32px; | |
| font-weight:bold; | |
| margin-bottom:8px; | |
| } | |
| .confidence{ | |
| color:#cbd5e1; | |
| font-size:17px; | |
| } | |
| /* Meter */ | |
| .meter{ | |
| margin-top:20px; | |
| height:18px; | |
| background:#1e293b; | |
| border-radius:20px; | |
| overflow:hidden; | |
| } | |
| .progress{ | |
| width:0%; | |
| height:100%; | |
| background: | |
| linear-gradient( | |
| 90deg, | |
| #4f46e5, | |
| #a855f7, | |
| #ec4899 | |
| ); | |
| transition:width 1s ease; | |
| box-shadow: | |
| 0 0 15px #a855f7; | |
| } | |
| /* Score */ | |
| .score{ | |
| margin-top:15px; | |
| font-size:18px; | |
| font-weight:bold; | |
| color:#c4b5fd; | |
| } | |
| /* Examples */ | |
| .examples{ | |
| margin-top:30px; | |
| } | |
| .examples h2{ | |
| margin-bottom:15px; | |
| } | |
| .example{ | |
| padding:15px; | |
| margin:10px 0; | |
| border-radius:12px; | |
| background:#1e293b; | |
| border:1px solid #334155; | |
| cursor:pointer; | |
| transition:.25s; | |
| color:#e2e8f0; | |
| } | |
| .example:hover{ | |
| transform:translateX(6px); | |
| border-color:#818cf8; | |
| box-shadow: | |
| 0 0 15px rgba(129,140,248,.2); | |
| } | |
| /* Footer */ | |
| .footer{ | |
| text-align:center; | |
| margin-top:25px; | |
| color:#64748b; | |
| font-size:13px; | |
| } | |
| /* Mobile */ | |
| @media(max-width:600px){ | |
| h1{ | |
| font-size:30px; | |
| } | |
| .logo{ | |
| font-size:55px; | |
| } | |
| .card{ | |
| padding:20px; | |
| } | |
| .buttons{ | |
| flex-direction:column; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Floating particles --> | |
| <div class="particle p1"></div> | |
| <div class="particle p2"></div> | |
| <div class="particle p3"></div> | |
| <div class="particle p4"></div> | |
| <div class="particle p5"></div> | |
| <div class="container"> | |
| <div class="header"> | |
| <div class="logo"> | |
| 🤖 | |
| </div> | |
| <h1> | |
| AI Sentiment Analyzer | |
| </h1> | |
| <p class="description"> | |
| Enter text and let AI determine whether the sentiment | |
| is positive, negative, or neutral. | |
| </p> | |
| </div> | |
| <div class="card"> | |
| <label> | |
| 📝 Enter your text | |
| </label> | |
| <textarea | |
| id="textInput" | |
| placeholder="Type something like: | |
| 'I absolutely loved this movie!'" | |
| ></textarea> | |
| <div class="buttons"> | |
| <button | |
| id="analyzeBtn" | |
| class="analyze" | |
| onclick="analyzeSentiment()"> | |
| ⚡ ANALYZE SENTIMENT | |
| </button> | |
| <button | |
| class="clear" | |
| onclick="clearAll()"> | |
| 🗑️ CLEAR | |
| </button> | |
| </div> | |
| <div | |
| id="status" | |
| class="status"> | |
| 🔄 Loading AI model... | |
| </div> | |
| <!-- AI Thinking --> | |
| <div | |
| id="thinking" | |
| class="thinking"> | |
| <div class="brain"> | |
| 🧠 | |
| </div> | |
| <p> | |
| AI is thinking... | |
| </p> | |
| </div> | |
| <!-- Result --> | |
| <div | |
| id="result" | |
| class="result"> | |
| <div | |
| id="resultIcon" | |
| class="result-icon"> | |
| 😊 | |
| </div> | |
| <div | |
| id="resultTitle" | |
| class="result-title"> | |
| Positive | |
| </div> | |
| <div | |
| id="confidence" | |
| class="confidence"> | |
| Confidence: 95% | |
| </div> | |
| <div class="meter"> | |
| <div | |
| id="progress" | |
| class="progress"> | |
| </div> | |
| </div> | |
| <div | |
| id="score" | |
| class="score"> | |
| Sentiment Score: 0.95 | |
| </div> | |
| </div> | |
| <!-- Examples --> | |
| <div class="examples"> | |
| <h2> | |
| 🎯 Try These Examples | |
| </h2> | |
| <div | |
| class="example" | |
| onclick="useExample(this)"> | |
| 😊 "I absolutely love this product! | |
| It is amazing." | |
| </div> | |
| <div | |
| class="example" | |
| onclick="useExample(this)"> | |
| 😞 "This is the worst experience | |
| I have ever had." | |
| </div> | |
| <div | |
| class="example" | |
| onclick="useExample(this)"> | |
| 😐 "The meeting is scheduled | |
| for tomorrow." | |
| </div> | |
| <div | |
| class="example" | |
| onclick="useExample(this)"> | |
| 🔥 "Today was one of the best | |
| days of my life!" | |
| </div> | |
| <div | |
| class="example" | |
| onclick="useExample(this)"> | |
| 💔 "I am disappointed with | |
| the service." | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| 🤗 Powered by Hugging Face Transformers.js | |
| </div> | |
| </div> | |
| <script type="module"> | |
| let classifier = null; | |
| const MODEL = | |
| "Xenova/twitter-roberta-base-sentiment-latest"; | |
| /* Load model */ | |
| async function loadModel(){ | |
| const status = | |
| document.getElementById("status"); | |
| try{ | |
| classifier = | |
| await window.pipeline( | |
| "text-classification", | |
| MODEL | |
| ); | |
| status.innerText = | |
| "✅ AI Model Ready!"; | |
| } | |
| catch(error){ | |
| console.error(error); | |
| status.innerText = | |
| "❌ Failed to load AI model."; | |
| } | |
| } | |
| /* Analyze */ | |
| window.analyzeSentiment = | |
| async function(){ | |
| const text = | |
| document | |
| .getElementById("textInput") | |
| .value | |
| .trim(); | |
| const button = | |
| document | |
| .getElementById("analyzeBtn"); | |
| const status = | |
| document | |
| .getElementById("status"); | |
| const thinking = | |
| document | |
| .getElementById("thinking"); | |
| const result = | |
| document | |
| .getElementById("result"); | |
| if(!text){ | |
| alert( | |
| "⚠️ Please enter some text first!" | |
| ); | |
| return; | |
| } | |
| button.disabled = true; | |
| result.style.display = "none"; | |
| thinking.style.display = "block"; | |
| status.innerText = | |
| "AI is analyzing your emotions..."; | |
| try{ | |
| if(!classifier){ | |
| classifier = | |
| await window.pipeline( | |
| "text-classification", | |
| MODEL | |
| ); | |
| } | |
| const output = | |
| await classifier(text); | |
| const prediction = | |
| output[0]; | |
| let label = | |
| prediction.label.toUpperCase(); | |
| let score = | |
| prediction.score; | |
| let sentiment; | |
| let icon; | |
| /* | |
| Model labels: | |
| negative | |
| neutral | |
| positive | |
| */ | |
| if( | |
| label.includes("POSITIVE") || | |
| label === "LABEL_2" | |
| ){ | |
| sentiment = "Positive"; | |
| icon = "😊"; | |
| } | |
| else if( | |
| label.includes("NEGATIVE") || | |
| label === "LABEL_0" | |
| ){ | |
| sentiment = "Negative"; | |
| icon = "😞"; | |
| } | |
| else{ | |
| sentiment = "Neutral"; | |
| icon = "😐"; | |
| } | |
| const percentage = | |
| (score * 100).toFixed(2); | |
| /* Show result */ | |
| document | |
| .getElementById("resultIcon") | |
| .innerText = icon; | |
| document | |
| .getElementById("resultTitle") | |
| .innerText = sentiment; | |
| document | |
| .getElementById("confidence") | |
| .innerText = | |
| "Confidence: " + | |
| percentage + | |
| "%"; | |
| document | |
| .getElementById("score") | |
| .innerText = | |
| "Sentiment Score: " + | |
| score.toFixed(3); | |
| thinking.style.display = | |
| "none"; | |
| result.style.display = | |
| "block"; | |
| setTimeout(function(){ | |
| document | |
| .getElementById("progress") | |
| .style.width = | |
| percentage + "%"; | |
| },100); | |
| status.innerText = | |
| "✨ Analysis completed!"; | |
| } | |
| catch(error){ | |
| console.error(error); | |
| thinking.style.display = | |
| "none"; | |
| status.innerText = | |
| "❌ Something went wrong."; | |
| } | |
| button.disabled = false; | |
| }; | |
| /* Clear */ | |
| window.clearAll = | |
| function(){ | |
| document | |
| .getElementById("textInput") | |
| .value = ""; | |
| document | |
| .getElementById("result") | |
| .style.display = "none"; | |
| document | |
| .getElementById("thinking") | |
| .style.display = "none"; | |
| document | |
| .getElementById("progress") | |
| .style.width = "0%"; | |
| document | |
| .getElementById("status") | |
| .innerText = | |
| "✨ Ready for a new analysis!"; | |
| }; | |
| /* Examples */ | |
| window.useExample = | |
| function(element){ | |
| let text = | |
| element.innerText; | |
| text = | |
| text.replace( | |
| /^[^\"]*"/, | |
| "" | |
| ); | |
| text = | |
| text.replace( | |
| /"$/, | |
| "" | |
| ); | |
| document | |
| .getElementById("textInput") | |
| .value = text; | |
| document | |
| .getElementById("textInput") | |
| .focus(); | |
| }; | |
| /* Start */ | |
| loadModel(); | |
| </script> | |
| </body> | |
| </html> |