File size: 6,128 Bytes
4d1cb0c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 | <!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>
<!-- Simple Brain Icon as Favicon -->
<link rel="icon" href="{{url_for('.static', filename='brain.svg')}}" type="image/svg+xml">
<!-- Modern Typography & Iconography -->
<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>
<!--
==============================================================================
PROJECT: DEPRESSION-DETECTION-USING-TWEETS
AUTHORS: AMEY THAKUR & MEGA SATISH
GITHUB (AMEY): https://github.com/Amey-Thakur
GITHUB (MEGA): https://github.com/msatmod
REPOSITORY: https://github.com/Amey-Thakur/DEPRESSION-DETECTION-USING-TWEETS
RELEASE DATE: June 5, 2022
LICENSE: MIT License
DESCRIPTION: Main interface for tweet analysis.
==============================================================================
-->
<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>
// Cinematic Interaction Logic
function triggerCinematic() {
const overlay = document.getElementById('cinematicOverlay');
const sound = document.getElementById('tweetSound');
overlay.style.display = 'flex';
// Force reflow
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); // 400ms delay to let the chirp start
});
</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>
<!-- Cinematic Overlay (Moved to root to avoid transform conflicts) -->
<div id="cinematicOverlay" class="cinematic-overlay" onclick="closeOverlay()">
<div class="overlay-content">
<!-- Cinematic Icon -->
<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> |