| | <!DOCTYPE html> |
| | <html lang="en"> |
| |
|
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Tweet Depression Detection | AMEY & MEGA</title> |
| | |
| | <link rel="icon" href="{{url_for('.static', filename='brain.svg')}}" type="image/svg+xml"> |
| |
|
| | |
| | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> |
| | <link rel="stylesheet" href="{{url_for('.static', filename='styles.css')}}"> |
| | <link rel="stylesheet" href="{{url_for('.static', filename='overlay.css')}}"> |
| | <script src="{{url_for('.static', filename='security.js')}}"></script> |
| | </head> |
| |
|
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| |
|
| | <body> |
| |
|
| | <header class="hero-section container animate-fade"> |
| | <i class="fas fa-brain fa-3x brain-trigger" onclick="triggerCinematic()"></i> |
| | <h1>Tweet Depression Detection</h1> |
| | <p>Using Machine Learning to predict sentiment in tweets.</p> |
| | </header> |
| |
|
| | <main class="container animate-fade" style="animation-delay: 0.2s;"> |
| | <section class="analysis-card"> |
| | <h3><i class="fab fa-twitter" style="margin-right: 10px; color: #1daeff;"></i> Try it Out</h3> |
| | <p style="font-size: 0.9rem; color: #8892B0; margin-bottom: 20px;">Paste a tweet below to see how our model |
| | classifies its sentiment.</p> |
| |
|
| | <form id="analysisForm" action="{{ url_for('predict')}}" method="POST"> |
| | <div class="input-group"> |
| | <textarea name="tweet" class="analysis-input" |
| | placeholder="Paste tweet content here for sentiment analysis..." required></textarea> |
| | </div> |
| | <div style="text-align: right;"> |
| | <button type="submit" class="btn-primary"> |
| | <i class="fab fa-twitter" style="margin-right: 8px;"></i> Analyze Tweet |
| | </button> |
| | </div> |
| | </form> |
| |
|
| | <audio id="tweetSound" src="{{url_for('.static', filename='tweet-sound.mp3')}}" preload="auto"></audio> |
| |
|
| | <script> |
| | |
| | function triggerCinematic() { |
| | const overlay = document.getElementById('cinematicOverlay'); |
| | const sound = document.getElementById('tweetSound'); |
| | |
| | overlay.style.display = 'flex'; |
| | |
| | void overlay.offsetWidth; |
| | overlay.classList.add('active'); |
| | |
| | setTimeout(() => { |
| | sound.play().catch(err => console.log("Audio playback failed:", err)); |
| | }, 200); |
| | } |
| | |
| | function closeOverlay() { |
| | const overlay = document.getElementById('cinematicOverlay'); |
| | overlay.classList.remove('active'); |
| | setTimeout(() => { |
| | overlay.style.display = 'none'; |
| | }, 800); |
| | } |
| | |
| | document.getElementById('analysisForm').addEventListener('submit', function (e) { |
| | const form = this; |
| | const sound = document.getElementById('tweetSound'); |
| | |
| | e.preventDefault(); |
| | sound.play().catch(err => console.log("Audio playback failed:", err)); |
| | |
| | setTimeout(() => { |
| | form.submit(); |
| | }, 400); |
| | }); |
| | </script> |
| | </section> |
| |
|
| | <section class="analysis-card" style="background: rgba(29, 174, 255, 0.05);"> |
| | <h4>How it Works</h4> |
| | <p style="font-size: 0.95rem;">This project uses an <strong>SVM (Support Vector Machine)</strong> model |
| | combined with <strong>spaCy</strong> word embeddings to process and classify text. It was developed to |
| | experiment with modern Machine Learning workflows.</p> |
| | </section> |
| | </main> |
| |
|
| | <footer class="container" |
| | style="padding: 60px 0 40px; text-align: center; border-top: 1px solid rgba(136, 146, 176, 0.1);"> |
| | <p style="color: var(--clr-slate); font-size: 0.95rem; margin-bottom: 12px;"> |
| | Developed by <a href="https://github.com/Amey-Thakur" |
| | style="color: var(--clr-accent-dark); font-weight: 700;">Amey Thakur</a> & <a |
| | href="https://github.com/msatmod" style="color: var(--clr-accent-dark); font-weight: 700;">Mega |
| | Satish</a> |
| | </p> |
| | <p style="color: var(--clr-light-slate); font-size: 0.85rem; letter-spacing: 0.5px;"> |
| | © 2022 • MIT License • <a href="https://github.com/Amey-Thakur/DEPRESSION-DETECTION-USING-TWEETS" |
| | target="_blank" style="margin-left: 5px;"><i class="fab fa-github"></i> GitHub</a> |
| | </p> |
| | </footer> |
| |
|
| | |
| | <div id="cinematicOverlay" class="cinematic-overlay" onclick="closeOverlay()"> |
| | <div class="overlay-content"> |
| | |
| | <i class="fab fa-twitter overlay-logo"></i> |
| | <h1 class="overlay-title">Tweet Depression Detection</h1> |
| | <p class="overlay-author">Developed by</p> |
| | <div class="overlay-names"> |
| | <span>Amey Thakur</span> |
| | <span class="separator">&</span> |
| | <span>Mega Satish</span> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | </body> |
| |
|
| | </html> |
