| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Review Sentiment Analyzer</title> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.2/papaparse.min.js"></script> |
| <style> |
| * { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| } |
| |
| body { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| color: #333; |
| min-height: 100vh; |
| padding: 20px; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| } |
| |
| .container { |
| background-color: rgba(255, 255, 255, 0.95); |
| border-radius: 15px; |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); |
| width: 90%; |
| max-width: 800px; |
| padding: 30px; |
| margin: 20px 0; |
| } |
| |
| h1 { |
| text-align: center; |
| color: #4a4a4a; |
| margin-bottom: 20px; |
| font-size: 2.2rem; |
| } |
| |
| .description { |
| text-align: center; |
| margin-bottom: 30px; |
| color: #666; |
| line-height: 1.6; |
| } |
| |
| .api-section { |
| margin-bottom: 25px; |
| padding: 20px; |
| background-color: #f8f9fa; |
| border-radius: 10px; |
| border-left: 4px solid #667eea; |
| } |
| |
| .api-section h2 { |
| margin-bottom: 15px; |
| color: #4a4a4a; |
| font-size: 1.4rem; |
| } |
| |
| .api-input { |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| } |
| |
| input[type="text"] { |
| padding: 12px 15px; |
| border: 1px solid #ddd; |
| border-radius: 8px; |
| font-size: 16px; |
| transition: border-color 0.3s; |
| } |
| |
| input[type="text"]:focus { |
| border-color: #667eea; |
| outline: none; |
| box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2); |
| } |
| |
| button { |
| background: linear-gradient(to right, #667eea, #764ba2); |
| color: white; |
| border: none; |
| padding: 12px 20px; |
| border-radius: 8px; |
| cursor: pointer; |
| font-size: 16px; |
| font-weight: 600; |
| transition: transform 0.2s, box-shadow 0.2s; |
| margin-top: 10px; |
| } |
| |
| button:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); |
| } |
| |
| button:active { |
| transform: translateY(0); |
| } |
| |
| .review-section { |
| margin-bottom: 25px; |
| } |
| |
| .review-card { |
| background-color: white; |
| border-radius: 10px; |
| padding: 20px; |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); |
| margin-bottom: 20px; |
| } |
| |
| .review-text { |
| line-height: 1.6; |
| margin-bottom: 15px; |
| font-size: 16px; |
| color: #444; |
| } |
| |
| .sentiment-result { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 15px; |
| padding: 15px; |
| border-radius: 10px; |
| margin-top: 20px; |
| background-color: #f8f9fa; |
| font-weight: bold; |
| font-size: 18px; |
| } |
| |
| .positive { |
| color: #28a745; |
| border: 2px solid #28a745; |
| } |
| |
| .negative { |
| color: #dc3545; |
| border: 2px solid #dc3545; |
| } |
| |
| .neutral { |
| color: #ffc107; |
| border: 2px solid #ffc107; |
| } |
| |
| .icon { |
| font-size: 24px; |
| } |
| |
| .loading { |
| display: none; |
| text-align: center; |
| margin: 20px 0; |
| } |
| |
| .spinner { |
| border: 4px solid rgba(0, 0, 0, 0.1); |
| border-left: 4px solid #667eea; |
| border-radius: 50%; |
| width: 30px; |
| height: 30px; |
| animation: spin 1s linear infinite; |
| margin: 0 auto; |
| } |
| |
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
| |
| .error { |
| color: #dc3545; |
| padding: 10px; |
| border-radius: 5px; |
| background-color: #f8d7da; |
| border: 1px solid #f5c6cb; |
| margin: 10px 0; |
| display: none; |
| } |
| |
| .instructions { |
| margin-top: 30px; |
| padding: 20px; |
| background-color: #f8f9fa; |
| border-radius: 10px; |
| font-size: 14px; |
| line-height: 1.6; |
| } |
| |
| .instructions h3 { |
| margin-bottom: 10px; |
| color: #4a4a4a; |
| } |
| |
| .instructions ol { |
| padding-left: 20px; |
| } |
| |
| .instructions li { |
| margin-bottom: 8px; |
| } |
| |
| footer { |
| text-align: center; |
| margin-top: 30px; |
| color: rgba(255, 255, 255, 0.8); |
| font-size: 14px; |
| } |
| |
| @media (max-width: 600px) { |
| .container { |
| width: 95%; |
| padding: 20px; |
| } |
| |
| h1 { |
| font-size: 1.8rem; |
| } |
| |
| button { |
| width: 100%; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <h1>Review Sentiment Analyzer</h1> |
| <p class="description">Analyze the sentiment of product reviews using Hugging Face's AI model</p> |
| |
| <div class="api-section"> |
| <h2>Hugging Face API Setup</h2> |
| <div class="api-input"> |
| <label for="api-token">Enter your Hugging Face API Token:</label> |
| <input type="text" id="api-token" placeholder="hf_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"> |
| <p><small>Your token is stored only in your browser and is never sent to our servers.</small></p> |
| </div> |
| </div> |
| |
| <div class="review-section"> |
| <button id="analyze-btn">Analyze Random Review</button> |
| |
| <div class="loading"> |
| <div class="spinner"></div> |
| <p>Analyzing sentiment...</p> |
| </div> |
| |
| <div class="error" id="error-message"></div> |
| |
| <div class="review-card"> |
| <h3>Selected Review:</h3> |
| <p class="review-text" id="review-text">Click the button above to analyze a random review</p> |
| </div> |
| |
| <div class="sentiment-result" id="sentiment-result"> |
| <i class="fas fa-question-circle icon"></i> |
| <span>Sentiment will appear here</span> |
| </div> |
| </div> |
| |
| <div class="instructions"> |
| <h3>How to get a Hugging Face API Token:</h3> |
| <ol> |
| <li>Go to <a href="https://huggingface.co/" target="_blank">huggingface.co</a> and create a free account</li> |
| <li>Navigate to your profile settings and access tokens section</li> |
| <li>Generate a new token with read permissions</li> |
| <li>Copy the token and paste it in the field above</li> |
| </ol> |
| </div> |
| </div> |
| |
| <footer> |
| <p>This app uses the distilbert-base-uncased-finetuned-sst-2-english model from Hugging Face</p> |
| </footer> |
|
|
| <script type="module" src="app.js"></script> |
| </body> |
| </html> |
|
|
