| <!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> |
