File size: 5,673 Bytes
3fe126f e37e31d 3fe126f e37e31d 3fe126f e37e31d 3fe126f e37e31d 3fe126f e37e31d 3fe126f e37e31d 3fe126f e37e31d 3fe126f e37e31d 3fe126f e37e31d 3fe126f e37e31d 3fe126f e37e31d 3fe126f e37e31d 3fe126f e37e31d 3fe126f e37e31d 3fe126f e37e31d 3fe126f e37e31d 3fe126f e37e31d 3fe126f | 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 | <!-- templates/index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Word Sense Disambiguation Tool</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
body {
background: linear-gradient(135deg, #f8fafc 0%, #e3e6f3 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
}
.navbar {
box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.hero {
text-align: center;
padding: 3rem 1rem 2rem 1rem;
}
.hero-icon {
font-size: 3.5rem;
color: #4f8cff;
margin-bottom: 1rem;
}
.main-container {
max-width: 600px;
margin: 0 auto;
padding: 2rem;
background: white;
border-radius: 16px;
box-shadow: 0 4px 24px rgba(79,140,255,0.07);
}
.form-label {
font-weight: 500;
}
.form-control:focus {
border-color: #4f8cff;
box-shadow: 0 0 0 0.2rem rgba(79,140,255,0.15);
}
.example-btn {
margin: 0.25rem 0.5rem 0.25rem 0;
border-radius: 20px;
font-size: 0.95rem;
background: #e3e6f3;
color: #4f8cff;
border: none;
transition: background 0.2s, color 0.2s;
}
.example-btn:hover {
background: #4f8cff;
color: white;
}
.footer {
margin-top: auto;
background: #f8fafc;
color: #6c757d;
text-align: center;
padding: 1rem 0 0.5rem 0;
font-size: 0.95rem;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white mb-4">
<div class="container">
<a class="navbar-brand fw-bold" href="/">
<i class="fa-solid fa-brain me-2"></i>WSD Tool
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="{{ url_for('lesk_explained') }}">
<i class="fa-solid fa-book-open me-1"></i>Learn about Lesk Algorithm
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Hero Section -->
<div class="hero">
<div class="hero-icon">
<i class="fa-solid fa-language"></i>
</div>
<h1 class="fw-bold mb-2">Word Sense Disambiguation</h1>
<p class="lead mb-0">Discover the meaning of words in context using advanced NLP and AI.</p>
</div>
<div class="main-container mt-3 mb-4">
<form method="POST" action="/">
<div class="mb-3">
<label for="text" class="form-label">Enter your sentence:</label>
<textarea class="form-control" id="text" name="text" rows="3" placeholder="Type or paste your sentence here..." required>{{ request.form.text or '' }}</textarea>
</div>
<div class="mb-3">
<label for="target_word" class="form-label">Target word (optional):</label>
<input type="text" class="form-control" id="target_word" name="target_word" placeholder="e.g. bank, bat, spring" value="{{ request.form.target_word or '' }}">
</div>
<button type="submit" class="btn btn-primary w-100 py-2 fw-bold">
<i class="fa-solid fa-search me-1"></i>Disambiguate
</button>
</form>
<div class="mt-4">
<div class="mb-2 fw-semibold">Try these examples:</div>
<button class="example-btn" onclick="fillExample('He sat on the bank of the river.', 'bank')">Bank (river)</button>
<button class="example-btn" onclick="fillExample('She deposited money in the bank.', 'bank')">Bank (finance)</button>
<button class="example-btn" onclick="fillExample('The bat flew out of the cave.', 'bat')">Bat (animal)</button>
<button class="example-btn" onclick="fillExample('He hit the ball with a bat.', 'bat')">Bat (sports)</button>
<button class="example-btn" onclick="fillExample('Spring is my favorite season of the year.', 'spring')">Spring (season)</button>
<button class="example-btn" onclick="fillExample('The spring in the mattress was broken.', 'spring')">Spring (coil)</button>
</div>
</div>
<footer class="footer">
<div>Made with <i class="fa-solid fa-heart text-danger"></i> by <a href="https://github.com/Gunjankumar55" target="_blank">Gunjankumar Choudhari</a> | <a href="{{ url_for('lesk_explained') }}">How it works</a></div>
<div class="mt-1">© 2024 WSD Tool. All rights reserved.</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
function fillExample(text, word) {
document.getElementById('text').value = text;
document.getElementById('target_word').value = word;
}
</script>
</body>
</html>
|