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