|
|
|
|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<title>Disambiguation Results</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); |
|
|
} |
|
|
.highlight-word { |
|
|
background-color: #4f8cff; |
|
|
color: white; |
|
|
padding: 2px 8px; |
|
|
border-radius: 4px; |
|
|
font-weight: 500; |
|
|
} |
|
|
.main-container { |
|
|
max-width: 800px; |
|
|
margin: 0 auto 2rem auto; |
|
|
padding: 0; |
|
|
} |
|
|
.text-card { |
|
|
background: white; |
|
|
border-radius: 16px; |
|
|
box-shadow: 0 4px 24px rgba(79,140,255,0.07); |
|
|
padding: 1.5rem; |
|
|
margin-bottom: 1.5rem; |
|
|
} |
|
|
.context-badge { |
|
|
margin-right: 5px; |
|
|
margin-bottom: 5px; |
|
|
background-color: #e3e6f3; |
|
|
color: #4f8cff; |
|
|
border-radius: 20px; |
|
|
font-weight: 400; |
|
|
} |
|
|
.lexname-badge { |
|
|
background-color: #4f8cff; |
|
|
color: white; |
|
|
border-radius: 20px; |
|
|
font-weight: 500; |
|
|
} |
|
|
.sense-card { |
|
|
background: white; |
|
|
border-radius: 16px; |
|
|
box-shadow: 0 4px 24px rgba(79,140,255,0.07); |
|
|
margin-bottom: 1.5rem; |
|
|
transition: all 0.3s ease; |
|
|
border: none; |
|
|
} |
|
|
.sense-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 8px 30px rgba(79,140,255,0.12); |
|
|
} |
|
|
.best-sense-card { |
|
|
border-left: 5px solid #10b981; |
|
|
} |
|
|
.sense-icon { |
|
|
font-size: 2rem; |
|
|
margin-bottom: 1rem; |
|
|
color: #4f8cff; |
|
|
} |
|
|
.feedback-btn { |
|
|
border-radius: 20px; |
|
|
padding: 0.4rem 1rem; |
|
|
border: none; |
|
|
background-color: #e3e6f3; |
|
|
color: #4f8cff; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.feedback-btn:hover { |
|
|
background-color: #4f8cff; |
|
|
color: white; |
|
|
} |
|
|
.algorithm-info { |
|
|
font-size: 0.9rem; |
|
|
color: #6c757d; |
|
|
} |
|
|
.section-title { |
|
|
margin-bottom: 1rem; |
|
|
font-weight: 600; |
|
|
color: #333; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
.section-title i { |
|
|
margin-right: 0.5rem; |
|
|
color: #4f8cff; |
|
|
} |
|
|
.footer { |
|
|
margin-top: auto; |
|
|
background: #f8fafc; |
|
|
color: #6c757d; |
|
|
text-align: center; |
|
|
padding: 1rem 0 0.5rem 0; |
|
|
font-size: 0.95rem; |
|
|
} |
|
|
#updatedSense { |
|
|
display: none; |
|
|
} |
|
|
.toast-container { |
|
|
position: fixed; |
|
|
top: 20px; |
|
|
right: 20px; |
|
|
z-index: 1050; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<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 align-items-center"> |
|
|
<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> |
|
|
<li class="nav-item"> |
|
|
<a href="{{ url_for('index') }}" class="btn btn-outline-primary ms-2"> |
|
|
<i class="fa-solid fa-arrow-left me-1"></i>Back to Input |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
<div class="container main-container"> |
|
|
|
|
|
<div class="text-card"> |
|
|
<h5 class="section-title"><i class="fa-solid fa-quote-left"></i>Original Text</h5> |
|
|
<div class="p-3 bg-light rounded"> |
|
|
{{ highlighted_text|safe }} |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
{% if target_word %} |
|
|
|
|
|
<div class="text-card"> |
|
|
<h5 class="section-title"><i class="fa-solid fa-magnifying-glass"></i>Context Information</h5> |
|
|
<div class="row"> |
|
|
<div class="col-md-6 mb-3"> |
|
|
<div class="fw-semibold mb-2">Target Word:</div> |
|
|
<div class="d-inline-block px-3 py-1 bg-light rounded-pill"> |
|
|
<i class="fa-solid fa-crosshairs me-1"></i>{{ target_word }} |
|
|
</div> |
|
|
</div> |
|
|
<div class="col-md-6 mb-3"> |
|
|
<div class="fw-semibold mb-2">Sentence:</div> |
|
|
<div class="p-2 bg-light rounded">{{ sentence }}</div> |
|
|
</div> |
|
|
<div class="col-12"> |
|
|
<div class="fw-semibold mb-2">Context Words:</div> |
|
|
<div> |
|
|
{% for word in context_words.split(', ') %} |
|
|
<span class="badge context-badge">{{ word }}</span> |
|
|
{% endfor %} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
{% if best_sense %} |
|
|
<div class="text-card best-sense-card"> |
|
|
<h5 class="section-title"><i class="fa-solid fa-check-circle text-success"></i>Best Sense</h5> |
|
|
<div class="row align-items-center"> |
|
|
<div class="col-md-2 text-center d-none d-md-block"> |
|
|
<div class="sense-icon"> |
|
|
{% if 'animal' in best_sense.lexname() %} |
|
|
<i class="fa-solid fa-paw"></i> |
|
|
{% elif 'artifact' in best_sense.lexname() %} |
|
|
<i class="fa-solid fa-hammer"></i> |
|
|
{% elif 'time' in best_sense.lexname() %} |
|
|
<i class="fa-solid fa-clock"></i> |
|
|
{% elif 'object' in best_sense.lexname() %} |
|
|
<i class="fa-solid fa-mountain"></i> |
|
|
{% elif 'person' in best_sense.lexname() %} |
|
|
<i class="fa-solid fa-user"></i> |
|
|
{% elif 'plant' in best_sense.lexname() %} |
|
|
<i class="fa-solid fa-seedling"></i> |
|
|
{% elif 'attribute' in best_sense.lexname() %} |
|
|
<i class="fa-solid fa-sliders"></i> |
|
|
{% elif 'food' in best_sense.lexname() %} |
|
|
<i class="fa-solid fa-utensils"></i> |
|
|
{% else %} |
|
|
<i class="fa-solid fa-lightbulb"></i> |
|
|
{% endif %} |
|
|
</div> |
|
|
</div> |
|
|
<div class="col-md-10"> |
|
|
<h5 class="mb-3">{{ best_sense.definition() }}</h5> |
|
|
<div class="d-flex flex-wrap align-items-center mb-3"> |
|
|
<span class="badge lexname-badge me-2">{{ best_sense.lexname() }}</span> |
|
|
<span class="text-muted small">{{ best_sense.name() }}</span> |
|
|
</div> |
|
|
|
|
|
{% if best_sense.examples() %} |
|
|
<div class="mb-3"> |
|
|
<div class="fw-semibold">Examples:</div> |
|
|
<ul class="mb-0"> |
|
|
{% for example in best_sense.examples() %} |
|
|
<li>"{{ example }}"</li> |
|
|
{% endfor %} |
|
|
</ul> |
|
|
</div> |
|
|
{% endif %} |
|
|
|
|
|
<div class="algorithm-info"> |
|
|
<i class="fa-solid fa-robot me-1"></i> |
|
|
Selected using Enhanced Lesk algorithm with BERT embeddings |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
{% endif %} |
|
|
|
|
|
|
|
|
<div class="text-card best-sense-card" id="updatedSense"> |
|
|
<h5 class="section-title"><i class="fa-solid fa-check-circle text-success"></i>Updated Sense (Based on Feedback)</h5> |
|
|
<div class="row"> |
|
|
<div class="col-12"> |
|
|
<h5 id="updatedDefinition" class="mb-3"></h5> |
|
|
<div class="mb-3"> |
|
|
<div class="fw-semibold">Examples:</div> |
|
|
<ul id="updatedExamples"></ul> |
|
|
</div> |
|
|
<div class="algorithm-info"> |
|
|
<i class="fa-solid fa-thumbs-up me-1"></i> |
|
|
Your feedback has been recorded and will improve future disambiguations. |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="text-card"> |
|
|
<h5 class="section-title"><i class="fa-solid fa-layer-group"></i>Alternative Senses</h5> |
|
|
<div class="row"> |
|
|
{% for sense in top_senses %} |
|
|
<div class="col-md-4 mb-3"> |
|
|
<div class="card sense-card h-100"> |
|
|
<div class="card-body"> |
|
|
<p class="fw-semibold mb-2">{{ sense.definition() }}</p> |
|
|
<p class="text-muted small mb-2">Category: <span class="badge lexname-badge">{{ sense.lexname() }}</span></p> |
|
|
{% if sense.examples() %} |
|
|
<p class="small mb-3">"{{ sense.examples()[0] }}"</p> |
|
|
{% endif %} |
|
|
<button class="btn btn-sm feedback-btn w-100 feedback-btn" |
|
|
data-sense="{{ sense.name() }}"> |
|
|
<i class="fa-solid fa-check me-1"></i>This is correct |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
{% endfor %} |
|
|
</div> |
|
|
</div> |
|
|
{% else %} |
|
|
<div class="text-card"> |
|
|
<div class="alert alert-warning mb-0"> |
|
|
<i class="fa-solid fa-exclamation-triangle me-2"></i> |
|
|
No ambiguous words detected in the text. |
|
|
</div> |
|
|
</div> |
|
|
{% endif %} |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="toast-container"> |
|
|
<div class="toast align-items-center text-white bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true" id="feedbackToast"> |
|
|
<div class="d-flex"> |
|
|
<div class="toast-body"> |
|
|
<i class="fa-solid fa-check-circle me-2"></i> |
|
|
Feedback recorded successfully! |
|
|
</div> |
|
|
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button> |
|
|
</div> |
|
|
</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> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const feedbackBtns = document.querySelectorAll('.feedback-btn'); |
|
|
const feedbackToast = new bootstrap.Toast(document.getElementById('feedbackToast')); |
|
|
|
|
|
feedbackBtns.forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
const sense = this.getAttribute('data-sense'); |
|
|
|
|
|
fetch('/feedback', { |
|
|
method: 'POST', |
|
|
headers: { |
|
|
'Content-Type': 'application/json', |
|
|
}, |
|
|
body: JSON.stringify({ |
|
|
word: '{{ target_word }}', |
|
|
context: '{{ context_words }}'.split(', '), |
|
|
correct_sense: sense |
|
|
}) |
|
|
}) |
|
|
.then(response => response.json()) |
|
|
.then(data => { |
|
|
if (data.definition) { |
|
|
document.getElementById('updatedDefinition').textContent = data.definition; |
|
|
|
|
|
const examplesList = document.getElementById('updatedExamples'); |
|
|
examplesList.innerHTML = ''; |
|
|
|
|
|
if (data.examples && data.examples.length > 0) { |
|
|
data.examples.forEach(example => { |
|
|
const li = document.createElement('li'); |
|
|
li.textContent = example; |
|
|
examplesList.appendChild(li); |
|
|
}); |
|
|
} |
|
|
|
|
|
document.getElementById('updatedSense').style.display = 'block'; |
|
|
|
|
|
|
|
|
feedbackToast.show(); |
|
|
|
|
|
|
|
|
document.getElementById('updatedSense').scrollIntoView({ behavior: 'smooth' }); |
|
|
} |
|
|
}) |
|
|
.catch(error => { |
|
|
console.error('Error:', error); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
