Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Emotion Analyzer - Hugging Face</title> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css"> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| background-color: #f8f9fa; | |
| } | |
| .hero-section { | |
| background: #007bff; | |
| color: white; | |
| padding: 60px 20px; | |
| text-align: center; | |
| } | |
| .loader { | |
| display: none; | |
| margin: 10px auto; | |
| border: 5px solid #f3f3f3; | |
| border-top: 5px solid #3498db; | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="hero-section"> | |
| <h1>AI-Powered Text Emotion Analyzer </h1> | |
| <p>Analyze and detect emotions in text with AI-powered precision using the RoBERTa-based GoEmotions model.</p> | |
| </div> | |
| <div class="container text-center"> | |
| <h1 class="mb-4">RoBERTa-base GoEmotions Model</h1> | |
| <p class="lead text-justify"> | |
| The <strong>RoBERTa-base GoEmotions</strong> model was fine-tuned on the <strong>GoEmotions dataset</strong>, which consists of Reddit comments labeled with 28 different emotions. Since GoEmotions is a <strong>multi-label dataset</strong>, the model was trained to predict one or more emotions for each input text. The base model, <strong>RoBERTa-base</strong>, is a pre-trained transformer-based language model known for its ability to capture contextual meaning from text efficiently. The training process involved <strong>multi-label classification</strong>, where the model learned to assign probabilities to multiple emotions per input, with a typical classification threshold set at <strong>0.5</strong>. | |
| </p> | |
| <p class="lead text-justify"> | |
| To enhance inference speed and efficiency, an <strong>ONNX version</strong> of the model was created, including an <strong>INT8 quantized variant</strong>. This conversion allows for <strong>faster predictions</strong>, <strong>smaller dependencies</strong>, and <strong>cross-platform compatibility</strong>. The quantized model further reduces the file size by <strong>75%</strong> while maintaining near-original accuracy, making it ideal for applications where efficiency and portability are crucial. | |
| </p> | |
| </div> | |
| <div class="container text-center"> | |
| <h1 class="mb-3">🔍 Emotion Analyzer</h1> | |
| <h2 class="mb-3">Analyze emotions in text using AI 🤖</h2> | |
| <p class="mb-4">Enter a sentence to detect emotions like joy, sadness, or anger.</p> | |
| <input type="text" id="userInput" class="form-control w-75 mx-auto mb-3" placeholder="Type your sentence here..."> | |
| <button class="btn btn-primary" onclick="fetchEmotion()">Analyze Emotion</button> | |
| <div class="loader" id="loader"></div> | |
| <table class="table table-striped table-bordered mt-4 w-75 mx-auto" id="emotionTable"> | |
| <thead class="thead-dark"> | |
| <tr> | |
| <th>Emotion</th> | |
| <th>Score</th> | |
| </tr> | |
| </thead> | |
| <tbody></tbody> | |
| </table> | |
| </div> | |
| <script> | |
| import fetch from "node-fetch"; | |
| async function query(data) { | |
| document.getElementById("loader").style.display = "block"; | |
| const response = await fetch( | |
| "https://api-inference.huggingface.co/models/SamLowe/roberta-base-go_emotions", | |
| { | |
| headers: { | |
| Authorization: "Bearer {HF_TOKEN}", | |
| "Content-Type": "application/json", | |
| }, | |
| method: "POST", | |
| body: JSON.stringify(data), | |
| } | |
| ); | |
| document.getElementById("loader").style.display = "none"; | |
| return await response.json(); | |
| } | |
| async function fetchEmotion() { | |
| const inputText = document.getElementById("userInput").value; | |
| if (!inputText) { | |
| alert("⚠️ Please enter some text!"); | |
| return; | |
| } | |
| document.getElementById("emotionTable").querySelector("tbody").innerHTML = ""; | |
| const response = await query({ inputs: inputText }); | |
| displayEmotionTable(response[0]); | |
| } | |
| function displayEmotionTable(emotions) { | |
| const tableBody = document.getElementById("emotionTable").querySelector("tbody"); | |
| emotions.sort((a, b) => b.score - a.score); | |
| emotions.forEach(emotion => { | |
| if (emotion.score > 0.01) { | |
| const row = `<tr class="fade-in"> | |
| <td>${emotion.label}</td> | |
| <td>${(emotion.score * 100).toFixed(2)}%</td> | |
| </tr>`; | |
| tableBody.innerHTML += row; | |
| } | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |