Hugging Face's logo

Spaces:
gkc55
/
NLP_WSD
Sleeping

App Files Community
gkc55 commited on
Commit
e37e31d
·
1 Parent(s): 24e1f38

Enhanced UI with modern design, better user experience, and responsive layout

Browse files
Files changed (4) hide show
  1. templates/error.html +80 -22
  2. templates/index.html +78 -70
  3. templates/lesk_explained.html +118 -93
  4. templates/results.html +272 -122
templates/error.html CHANGED
@@ -5,36 +5,72 @@
5
  <title>Error - Word Sense Disambiguation Tool</title>
6
  <meta name="viewport" content="width=device-width, initial-scale=1">
7
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 
8
  <style>
9
  body {
10
- background-color: #f8f9fa;
 
 
 
11
  }
12
  .navbar {
13
- box-shadow: 0 2px 4px rgba(0,0,0,0.07);
14
  }
15
  .main-container {
16
- max-width: 800px;
17
- margin: 0 auto;
18
  padding: 2rem;
19
  background-color: white;
20
- border-radius: 8px;
21
- box-shadow: 0 2px 10px rgba(0,0,0,0.05);
 
 
 
 
 
22
  }
23
  .error-details {
24
- background-color: #f5f5f5;
25
  padding: 1rem;
26
- border-radius: 4px;
27
  font-family: monospace;
28
  white-space: pre-wrap;
29
  margin-top: 1rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
30
  }
31
  </style>
32
  </head>
33
  <body>
34
  <!-- Navbar -->
35
- <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
36
  <div class="container">
37
- <a class="navbar-brand" href="/">WSD Tool</a>
 
 
38
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
39
  <span class="navbar-toggler-icon"></span>
40
  </button>
@@ -42,7 +78,7 @@
42
  <ul class="navbar-nav ms-auto">
43
  <li class="nav-item">
44
  <a href="{{ url_for('index') }}" class="btn btn-outline-primary">
45
- ← Back to Input
46
  </a>
47
  </li>
48
  </ul>
@@ -52,33 +88,55 @@
52
 
53
  <div class="container main-container">
54
  <div class="text-center mb-4">
55
- <h2 class="text-danger">Error</h2>
 
 
 
56
  </div>
57
 
58
  <div class="alert alert-danger">
59
- {{ error_message }}
60
  </div>
61
 
62
  {% if error_details %}
63
  <div class="error-details">
 
64
  {{ error_details }}
65
  </div>
66
  {% endif %}
67
 
68
- <div class="mt-4">
69
- <p>You can try the following:</p>
70
- <ul>
71
- <li>Use a different word or sentence</li>
72
- <li>Make sure the word has multiple meanings in WordNet</li>
73
- <li>Provide more context around the ambiguous word</li>
74
- </ul>
 
 
 
 
 
 
 
 
 
 
 
75
  </div>
76
 
77
- <div class="text-center mt-5">
78
- <a href="{{ url_for('index') }}" class="btn btn-primary">Return to Input</a>
 
 
79
  </div>
80
  </div>
81
 
 
 
 
 
 
82
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
83
  </body>
84
  </html>
 
5
  <title>Error - Word Sense Disambiguation Tool</title>
6
  <meta name="viewport" content="width=device-width, initial-scale=1">
7
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
  body {
11
+ background: linear-gradient(135deg, #f8fafc 0%, #e3e6f3 100%);
12
+ min-height: 100vh;
13
+ display: flex;
14
+ flex-direction: column;
15
  }
16
  .navbar {
17
+ box-shadow: 0 2px 8px rgba(0,0,0,0.07);
18
  }
19
  .main-container {
20
+ max-width: 700px;
21
+ margin: 2rem auto;
22
  padding: 2rem;
23
  background-color: white;
24
+ border-radius: 16px;
25
+ box-shadow: 0 4px 24px rgba(79,140,255,0.07);
26
+ }
27
+ .error-icon {
28
+ font-size: 4rem;
29
+ color: #dc3545;
30
+ margin-bottom: 1rem;
31
  }
32
  .error-details {
33
+ background-color: #f8f9fa;
34
  padding: 1rem;
35
+ border-radius: 8px;
36
  font-family: monospace;
37
  white-space: pre-wrap;
38
  margin-top: 1rem;
39
+ border-left: 4px solid #dc3545;
40
+ }
41
+ .suggestion-card {
42
+ background-color: #e3e6f3;
43
+ border-radius: 8px;
44
+ padding: 1rem;
45
+ margin-top: 1.5rem;
46
+ }
47
+ .suggestion-item {
48
+ display: flex;
49
+ align-items: flex-start;
50
+ margin-bottom: 0.5rem;
51
+ }
52
+ .suggestion-item i {
53
+ color: #4f8cff;
54
+ margin-right: 0.5rem;
55
+ margin-top: 0.25rem;
56
+ }
57
+ .footer {
58
+ margin-top: auto;
59
+ background: #f8fafc;
60
+ color: #6c757d;
61
+ text-align: center;
62
+ padding: 1rem 0 0.5rem 0;
63
+ font-size: 0.95rem;
64
  }
65
  </style>
66
  </head>
67
  <body>
68
  <!-- Navbar -->
69
+ <nav class="navbar navbar-expand-lg navbar-light bg-white mb-4">
70
  <div class="container">
71
+ <a class="navbar-brand fw-bold" href="/">
72
+ <i class="fa-solid fa-brain me-2"></i>WSD Tool
73
+ </a>
74
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
75
  <span class="navbar-toggler-icon"></span>
76
  </button>
 
78
  <ul class="navbar-nav ms-auto">
79
  <li class="nav-item">
80
  <a href="{{ url_for('index') }}" class="btn btn-outline-primary">
81
+ <i class="fa-solid fa-arrow-left me-1"></i>Back to Input
82
  </a>
83
  </li>
84
  </ul>
 
88
 
89
  <div class="container main-container">
90
  <div class="text-center mb-4">
91
+ <div class="error-icon">
92
+ <i class="fa-solid fa-circle-exclamation"></i>
93
+ </div>
94
+ <h2 class="text-danger">Oops! Something went wrong</h2>
95
  </div>
96
 
97
  <div class="alert alert-danger">
98
+ <i class="fa-solid fa-triangle-exclamation me-2"></i>{{ error_message }}
99
  </div>
100
 
101
  {% if error_details %}
102
  <div class="error-details">
103
+ <div class="mb-2 fw-bold">Error Details:</div>
104
  {{ error_details }}
105
  </div>
106
  {% endif %}
107
 
108
+ <div class="suggestion-card">
109
+ <h5 class="mb-3"><i class="fa-solid fa-lightbulb me-2"></i>Try These Solutions:</h5>
110
+ <div class="suggestion-item">
111
+ <i class="fa-solid fa-check-circle"></i>
112
+ <div>Use a different word or sentence with clear context</div>
113
+ </div>
114
+ <div class="suggestion-item">
115
+ <i class="fa-solid fa-check-circle"></i>
116
+ <div>Make sure the word has multiple meanings in WordNet</div>
117
+ </div>
118
+ <div class="suggestion-item">
119
+ <i class="fa-solid fa-check-circle"></i>
120
+ <div>Provide more context around the ambiguous word</div>
121
+ </div>
122
+ <div class="suggestion-item">
123
+ <i class="fa-solid fa-check-circle"></i>
124
+ <div>Try one of the example sentences from the home page</div>
125
+ </div>
126
  </div>
127
 
128
+ <div class="text-center mt-4">
129
+ <a href="{{ url_for('index') }}" class="btn btn-primary px-4 py-2">
130
+ <i class="fa-solid fa-home me-2"></i>Return to Home
131
+ </a>
132
  </div>
133
  </div>
134
 
135
+ <footer class="footer">
136
+ <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>
137
+ <div class="mt-1">&copy; 2024 WSD Tool. All rights reserved.</div>
138
+ </footer>
139
+
140
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
141
  </body>
142
  </html>
templates/index.html CHANGED
@@ -5,36 +5,71 @@
5
  <title>Word Sense Disambiguation Tool</title>
6
  <meta name="viewport" content="width=device-width, initial-scale=1">
7
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 
8
  <style>
9
  body {
10
- background-color: #f8f9fa;
 
 
 
11
  }
12
  .navbar {
13
- box-shadow: 0 2px 4px rgba(0,0,0,0.07);
 
 
 
 
 
 
 
 
 
14
  }
15
  .main-container {
16
- max-width: 800px;
17
  margin: 0 auto;
18
  padding: 2rem;
19
- background-color: white;
20
- border-radius: 8px;
21
- box-shadow: 0 2px 10px rgba(0,0,0,0.05);
 
 
 
22
  }
23
  .form-control:focus {
24
- border-color: #6c757d;
25
- box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.25);
26
  }
27
  .example-btn {
28
- margin-right: 0.5rem;
29
- margin-bottom: 0.5rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
30
  }
31
  </style>
32
  </head>
33
  <body>
34
- <!-- Navbar with Lesk Algorithm Explanation Link -->
35
- <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
36
  <div class="container">
37
- <a class="navbar-brand" href="/">WSD Tool</a>
 
 
38
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
39
  <span class="navbar-toggler-icon"></span>
40
  </button>
@@ -42,7 +77,7 @@
42
  <ul class="navbar-nav ms-auto">
43
  <li class="nav-item">
44
  <a class="nav-link" href="{{ url_for('lesk_explained') }}">
45
- Learn about Lesk Algorithm and Working
46
  </a>
47
  </li>
48
  </ul>
@@ -50,72 +85,45 @@
50
  </div>
51
  </nav>
52
 
53
- <div class="container main-container">
54
- <h2 class="mb-4 text-center">Word Sense Disambiguation</h2>
55
- <p class="lead text-center mb-4">
56
- Enter text with ambiguous words to disambiguate their meanings
57
- </p>
 
 
 
58
 
59
- <form action="{{ url_for('index') }}" method="post">
 
60
  <div class="mb-3">
61
- <label for="text" class="form-label">Text:</label>
62
- <textarea class="form-control" id="text" name="text" rows="5" required></textarea>
63
  </div>
64
  <div class="mb-3">
65
- <label for="target_word" class="form-label">
66
- Target Word (optional):
67
- <small class="text-muted">If left empty, the first ambiguous word will be selected</small>
68
- </label>
69
- <input type="text" class="form-control" id="target_word" name="target_word">
70
- </div>
71
- <div class="d-grid gap-2">
72
- <button type="submit" class="btn btn-primary">Disambiguate</button>
73
  </div>
 
 
 
74
  </form>
75
-
76
  <div class="mt-4">
77
- <h5>Example Sentences:</h5>
78
- <div class="d-flex flex-wrap">
79
- <button class="btn btn-sm btn-outline-secondary example-btn"
80
- onclick="fillExample('She saw a bat flying in the dark.', 'bat')">
81
- Bat (animal)
82
- </button>
83
- <button class="btn btn-sm btn-outline-secondary example-btn"
84
- onclick="fillExample('The baseball player swung the bat.', 'bat')">
85
- Bat (sports)
86
- </button>
87
- <button class="btn btn-sm btn-outline-secondary example-btn"
88
- onclick="fillExample('The bat had leathery wings and flew silently.', 'bat')">
89
- Bat (with wings)
90
- </button>
91
- <button class="btn btn-sm btn-outline-secondary example-btn"
92
- onclick="fillExample('I need to go to the bank to deposit some money.', 'bank')">
93
- Bank (financial)
94
- </button>
95
- <button class="btn btn-sm btn-outline-secondary example-btn"
96
- onclick="fillExample('We sat by the river bank and had a picnic.', 'bank')">
97
- Bank (riverside)
98
- </button>
99
- <button class="btn btn-sm btn-outline-secondary example-btn"
100
- onclick="fillExample('The bass was too loud during the concert.', 'bass')">
101
- Bass (sound)
102
- </button>
103
- <button class="btn btn-sm btn-outline-secondary example-btn"
104
- onclick="fillExample('He caught a large bass while fishing.', 'bass')">
105
- Bass (fish)
106
- </button>
107
- <button class="btn btn-sm btn-outline-secondary example-btn"
108
- onclick="fillExample('Spring is my favorite season of the year.', 'spring')">
109
- Spring (season)
110
- </button>
111
- <button class="btn btn-sm btn-outline-secondary example-btn"
112
- onclick="fillExample('The spring in the mattress was broken.', 'spring')">
113
- Spring (coil)
114
- </button>
115
- </div>
116
  </div>
117
  </div>
118
 
 
 
 
 
 
119
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
120
  <script>
121
  function fillExample(text, word) {
 
5
  <title>Word Sense Disambiguation Tool</title>
6
  <meta name="viewport" content="width=device-width, initial-scale=1">
7
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
  body {
11
+ background: linear-gradient(135deg, #f8fafc 0%, #e3e6f3 100%);
12
+ min-height: 100vh;
13
+ display: flex;
14
+ flex-direction: column;
15
  }
16
  .navbar {
17
+ box-shadow: 0 2px 8px rgba(0,0,0,0.07);
18
+ }
19
+ .hero {
20
+ text-align: center;
21
+ padding: 3rem 1rem 2rem 1rem;
22
+ }
23
+ .hero-icon {
24
+ font-size: 3.5rem;
25
+ color: #4f8cff;
26
+ margin-bottom: 1rem;
27
  }
28
  .main-container {
29
+ max-width: 600px;
30
  margin: 0 auto;
31
  padding: 2rem;
32
+ background: white;
33
+ border-radius: 16px;
34
+ box-shadow: 0 4px 24px rgba(79,140,255,0.07);
35
+ }
36
+ .form-label {
37
+ font-weight: 500;
38
  }
39
  .form-control:focus {
40
+ border-color: #4f8cff;
41
+ box-shadow: 0 0 0 0.2rem rgba(79,140,255,0.15);
42
  }
43
  .example-btn {
44
+ margin: 0.25rem 0.5rem 0.25rem 0;
45
+ border-radius: 20px;
46
+ font-size: 0.95rem;
47
+ background: #e3e6f3;
48
+ color: #4f8cff;
49
+ border: none;
50
+ transition: background 0.2s, color 0.2s;
51
+ }
52
+ .example-btn:hover {
53
+ background: #4f8cff;
54
+ color: white;
55
+ }
56
+ .footer {
57
+ margin-top: auto;
58
+ background: #f8fafc;
59
+ color: #6c757d;
60
+ text-align: center;
61
+ padding: 1rem 0 0.5rem 0;
62
+ font-size: 0.95rem;
63
  }
64
  </style>
65
  </head>
66
  <body>
67
+ <!-- Navbar -->
68
+ <nav class="navbar navbar-expand-lg navbar-light bg-white mb-4">
69
  <div class="container">
70
+ <a class="navbar-brand fw-bold" href="/">
71
+ <i class="fa-solid fa-brain me-2"></i>WSD Tool
72
+ </a>
73
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
74
  <span class="navbar-toggler-icon"></span>
75
  </button>
 
77
  <ul class="navbar-nav ms-auto">
78
  <li class="nav-item">
79
  <a class="nav-link" href="{{ url_for('lesk_explained') }}">
80
+ <i class="fa-solid fa-book-open me-1"></i>Learn about Lesk Algorithm
81
  </a>
82
  </li>
83
  </ul>
 
85
  </div>
86
  </nav>
87
 
88
+ <!-- Hero Section -->
89
+ <div class="hero">
90
+ <div class="hero-icon">
91
+ <i class="fa-solid fa-language"></i>
92
+ </div>
93
+ <h1 class="fw-bold mb-2">Word Sense Disambiguation</h1>
94
+ <p class="lead mb-0">Discover the meaning of words in context using advanced NLP and AI.</p>
95
+ </div>
96
 
97
+ <div class="main-container mt-3 mb-4">
98
+ <form method="POST" action="/">
99
  <div class="mb-3">
100
+ <label for="text" class="form-label">Enter your sentence:</label>
101
+ <textarea class="form-control" id="text" name="text" rows="3" placeholder="Type or paste your sentence here..." required>{{ request.form.text or '' }}</textarea>
102
  </div>
103
  <div class="mb-3">
104
+ <label for="target_word" class="form-label">Target word (optional):</label>
105
+ <input type="text" class="form-control" id="target_word" name="target_word" placeholder="e.g. bank, bat, spring" value="{{ request.form.target_word or '' }}">
 
 
 
 
 
 
106
  </div>
107
+ <button type="submit" class="btn btn-primary w-100 py-2 fw-bold">
108
+ <i class="fa-solid fa-search me-1"></i>Disambiguate
109
+ </button>
110
  </form>
 
111
  <div class="mt-4">
112
+ <div class="mb-2 fw-semibold">Try these examples:</div>
113
+ <button class="example-btn" onclick="fillExample('He sat on the bank of the river.', 'bank')">Bank (river)</button>
114
+ <button class="example-btn" onclick="fillExample('She deposited money in the bank.', 'bank')">Bank (finance)</button>
115
+ <button class="example-btn" onclick="fillExample('The bat flew out of the cave.', 'bat')">Bat (animal)</button>
116
+ <button class="example-btn" onclick="fillExample('He hit the ball with a bat.', 'bat')">Bat (sports)</button>
117
+ <button class="example-btn" onclick="fillExample('Spring is my favorite season of the year.', 'spring')">Spring (season)</button>
118
+ <button class="example-btn" onclick="fillExample('The spring in the mattress was broken.', 'spring')">Spring (coil)</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
119
  </div>
120
  </div>
121
 
122
+ <footer class="footer">
123
+ <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>
124
+ <div class="mt-1">&copy; 2024 WSD Tool. All rights reserved.</div>
125
+ </footer>
126
+
127
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
128
  <script>
129
  function fillExample(text, word) {
templates/lesk_explained.html CHANGED
@@ -5,47 +5,101 @@
5
  <title>Lesk Algorithm Explained</title>
6
  <meta name="viewport" content="width=device-width, initial-scale=1">
7
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 
8
  <style>
9
  body {
10
- background-color: #f8f9fa;
 
 
 
11
  }
12
  .navbar {
13
- box-shadow: 0 2px 4px rgba(0,0,0,0.07);
14
  }
15
  .main-container {
16
  max-width: 800px;
17
- margin: 0 auto;
18
  padding: 2rem;
19
  background-color: white;
20
- border-radius: 8px;
21
- box-shadow: 0 2px 10px rgba(0,0,0,0.05);
22
  }
23
  .code-block {
24
  background-color: #f5f5f5;
25
  padding: 1rem;
26
- border-radius: 4px;
27
  font-family: monospace;
28
  white-space: pre-wrap;
 
 
29
  }
30
  .algorithm-step {
31
- background-color: #e9ecef;
32
- padding: 1rem;
33
- border-radius: 6px;
34
- margin-bottom: 1rem;
 
 
 
 
35
  }
36
  .enhancement {
37
  background-color: #e3f2fd;
38
- border-left: 4px solid #2196f3;
39
  padding: 1rem;
40
  margin-bottom: 1rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
41
  }
42
  </style>
43
  </head>
44
  <body>
45
  <!-- Navbar -->
46
- <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
47
  <div class="container">
48
- <a class="navbar-brand" href="/">WSD Tool</a>
 
 
49
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
50
  <span class="navbar-toggler-icon"></span>
51
  </button>
@@ -53,7 +107,7 @@
53
  <ul class="navbar-nav ms-auto">
54
  <li class="nav-item">
55
  <a href="{{ url_for('index') }}" class="btn btn-outline-primary">
56
- ← Back to Tool
57
  </a>
58
  </li>
59
  </ul>
@@ -62,104 +116,54 @@
62
  </nav>
63
 
64
  <div class="container main-container">
65
- <h2 class="mb-4">The Enhanced Lesk Algorithm for Word Sense Disambiguation</h2>
66
 
67
  <div class="mb-4">
68
- <h4>What is Word Sense Disambiguation?</h4>
69
- <p>
70
- Word Sense Disambiguation (WSD) is the task of identifying which sense of a word is used in a sentence when the word has multiple meanings. For example, the word "bat" can refer to a flying mammal or a piece of sports equipment.
71
- </p>
72
  </div>
73
 
74
  <div class="mb-4">
75
- <h4>The Original Lesk Algorithm</h4>
76
- <p>
77
- The Lesk algorithm, introduced by Michael Lesk in 1986, is one of the earliest and most influential algorithms for WSD. It uses dictionary definitions to determine the correct sense of a word in context.
78
- </p>
79
-
80
- <div class="algorithm-step">
81
- <h5>Basic Idea:</h5>
82
- <p>The sense whose dictionary definition shares the most words with the context is likely the correct sense.</p>
83
- </div>
84
- </div>
85
-
86
- <div class="mb-4">
87
- <h4>Our Enhanced Lesk Implementation</h4>
88
- <p>Our implementation extends the original Lesk algorithm with several modern enhancements:</p>
89
-
90
- <div class="enhancement">
91
- <h5>1. Rich Sense Signatures</h5>
92
- <p>We expand the sense signature beyond just definitions to include:</p>
93
- <ul>
94
- <li>Example sentences from WordNet</li>
95
- <li>Hypernyms (parent concepts)</li>
96
- <li>Hyponyms (child concepts)</li>
97
- <li>Meronyms and holonyms (part-whole relationships)</li>
98
- </ul>
99
- </div>
100
-
101
- <div class="enhancement">
102
- <h5>2. BERT Integration</h5>
103
- <p>We incorporate BERT contextual embeddings to capture deeper semantic relationships between the context and sense definitions.</p>
104
- </div>
105
-
106
- <div class="enhancement">
107
- <h5>3. Rule-Based Components</h5>
108
- <p>For common ambiguous words, we add targeted rules to handle cases where statistical methods might fail.</p>
109
- </div>
110
 
111
  <div class="enhancement">
112
- <h5>4. Collocation Detection</h5>
113
- <p>We identify common word combinations (collocations) that strongly indicate specific senses.</p>
114
- </div>
115
-
116
- <div class="enhancement">
117
- <h5>5. Adaptive Learning</h5>
118
- <p>The system learns from user feedback to improve future disambiguations of similar contexts.</p>
119
  </div>
120
  </div>
121
 
122
- <div class="mb-4">
123
- <h4>How Our Algorithm Works</h4>
124
-
125
- <div class="algorithm-step">
126
- <h5>Step 1: Context Processing</h5>
127
- <p>Extract and process context words from the sentence, giving more weight to words closer to the target word.</p>
128
- </div>
129
-
130
- <div class="algorithm-step">
131
- <h5>Step 2: Collocation Check</h5>
132
- <p>Check for strong collocations that directly indicate a specific sense (e.g., "bat flying" strongly indicates the animal sense).</p>
133
- </div>
134
 
135
  <div class="algorithm-step">
136
- <h5>Step 3: Rule Application</h5>
137
- <p>Apply targeted rules for common ambiguous words based on contextual indicators.</p>
138
  </div>
139
 
140
  <div class="algorithm-step">
141
- <h5>Step 4: Sense Signature Creation</h5>
142
- <p>For each possible sense, create a rich signature from definitions, examples, and related concepts.</p>
143
  </div>
144
 
145
  <div class="algorithm-step">
146
- <h5>Step 5: Overlap Calculation</h5>
147
- <p>Calculate the weighted overlap between context words and each sense signature.</p>
148
  </div>
149
 
150
  <div class="algorithm-step">
151
- <h5>Step 6: BERT Similarity</h5>
152
- <p>Calculate semantic similarity between the context and each sense definition using BERT embeddings.</p>
153
  </div>
154
 
155
  <div class="algorithm-step">
156
- <h5>Step 7: Score Combination</h5>
157
- <p>Combine all scores (overlap, BERT, rules, feedback) to determine the most likely sense.</p>
158
  </div>
159
  </div>
160
 
161
  <div class="mb-4">
162
- <h4>Example</h4>
163
  <p>For the sentence "She saw a bat flying in the dark":</p>
164
 
165
  <div class="code-block">
@@ -193,21 +197,42 @@ Result: Sense 1 is selected as the correct meaning.</div>
193
  </div>
194
 
195
  <div class="mb-4">
196
- <h4>Advantages Over Basic Lesk</h4>
197
- <ul>
198
- <li>Higher accuracy for common ambiguous words</li>
199
- <li>Better handling of contextual nuances</li>
200
- <li>Integration of modern NLP techniques</li>
201
- <li>Adaptive learning from user feedback</li>
202
- <li>Combination of statistical and rule-based approaches</li>
203
- </ul>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
204
  </div>
205
 
206
  <div class="text-center mt-5">
207
- <a href="{{ url_for('index') }}" class="btn btn-primary">Try the WSD Tool</a>
 
 
208
  </div>
209
  </div>
210
 
 
 
 
 
 
211
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
212
  </body>
213
  </html>
 
5
  <title>Lesk Algorithm Explained</title>
6
  <meta name="viewport" content="width=device-width, initial-scale=1">
7
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
  body {
11
+ background: linear-gradient(135deg, #f8fafc 0%, #e3e6f3 100%);
12
+ min-height: 100vh;
13
+ display: flex;
14
+ flex-direction: column;
15
  }
16
  .navbar {
17
+ box-shadow: 0 2px 8px rgba(0,0,0,0.07);
18
  }
19
  .main-container {
20
  max-width: 800px;
21
+ margin: 0 auto 2rem auto;
22
  padding: 2rem;
23
  background-color: white;
24
+ border-radius: 16px;
25
+ box-shadow: 0 4px 24px rgba(79,140,255,0.07);
26
  }
27
  .code-block {
28
  background-color: #f5f5f5;
29
  padding: 1rem;
30
+ border-radius: 8px;
31
  font-family: monospace;
32
  white-space: pre-wrap;
33
+ border-left: 4px solid #4f8cff;
34
+ font-size: 0.9rem;
35
  }
36
  .algorithm-step {
37
+ background-color: #e3e6f3;
38
+ padding: 1.2rem;
39
+ border-radius: 12px;
40
+ margin-bottom: 1.2rem;
41
+ transition: transform 0.2s;
42
+ }
43
+ .algorithm-step:hover {
44
+ transform: translateY(-3px);
45
  }
46
  .enhancement {
47
  background-color: #e3f2fd;
48
+ border-left: 4px solid #4f8cff;
49
  padding: 1rem;
50
  margin-bottom: 1rem;
51
+ border-radius: 0 8px 8px 0;
52
+ }
53
+ .section-title {
54
+ margin-bottom: 1.2rem;
55
+ font-weight: 600;
56
+ color: #333;
57
+ display: flex;
58
+ align-items: center;
59
+ }
60
+ .section-title i {
61
+ margin-right: 0.5rem;
62
+ color: #4f8cff;
63
+ }
64
+ .step-number {
65
+ display: inline-flex;
66
+ align-items: center;
67
+ justify-content: center;
68
+ width: 32px;
69
+ height: 32px;
70
+ background-color: #4f8cff;
71
+ color: white;
72
+ border-radius: 50%;
73
+ margin-right: 0.8rem;
74
+ font-weight: bold;
75
+ }
76
+ .advantage-item {
77
+ display: flex;
78
+ align-items: flex-start;
79
+ margin-bottom: 0.8rem;
80
+ }
81
+ .advantage-item i {
82
+ color: #10b981;
83
+ margin-right: 0.8rem;
84
+ margin-top: 0.25rem;
85
+ }
86
+ .footer {
87
+ margin-top: auto;
88
+ background: #f8fafc;
89
+ color: #6c757d;
90
+ text-align: center;
91
+ padding: 1rem 0 0.5rem 0;
92
+ font-size: 0.95rem;
93
  }
94
  </style>
95
  </head>
96
  <body>
97
  <!-- Navbar -->
98
+ <nav class="navbar navbar-expand-lg navbar-light bg-white mb-4">
99
  <div class="container">
100
+ <a class="navbar-brand fw-bold" href="/">
101
+ <i class="fa-solid fa-brain me-2"></i>WSD Tool
102
+ </a>
103
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
104
  <span class="navbar-toggler-icon"></span>
105
  </button>
 
107
  <ul class="navbar-nav ms-auto">
108
  <li class="nav-item">
109
  <a href="{{ url_for('index') }}" class="btn btn-outline-primary">
110
+ <i class="fa-solid fa-arrow-left me-1"></i>Back to Tool
111
  </a>
112
  </li>
113
  </ul>
 
116
  </nav>
117
 
118
  <div class="container main-container">
119
+ <h2 class="text-center mb-4">Understanding the Enhanced Lesk Algorithm</h2>
120
 
121
  <div class="mb-4">
122
+ <h4 class="section-title"><i class="fa-solid fa-info-circle"></i>What is Word Sense Disambiguation?</h4>
123
+ <p>Word Sense Disambiguation (WSD) is the task of identifying which meaning of a word is used in a sentence when the word has multiple meanings. For example, determining whether "bank" refers to a financial institution or the side of a river.</p>
 
 
124
  </div>
125
 
126
  <div class="mb-4">
127
+ <h4 class="section-title"><i class="fa-solid fa-book"></i>The Original Lesk Algorithm</h4>
128
+ <p>The Lesk algorithm, introduced by Michael Lesk in 1986, is a classical approach to WSD that works by comparing the dictionary definition of each possible sense with the words in the context.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
129
 
130
  <div class="enhancement">
131
+ <p class="mb-0"><strong>Basic Idea:</strong> Choose the sense whose dictionary definition shares the most words with the context in which the target word appears.</p>
 
 
 
 
 
 
132
  </div>
133
  </div>
134
 
135
+ <div class="mb-5">
136
+ <h4 class="section-title"><i class="fa-solid fa-rocket"></i>Our Enhanced Lesk Algorithm</h4>
137
+ <p>We've significantly improved the original Lesk algorithm with several enhancements:</p>
 
 
 
 
 
 
 
 
 
138
 
139
  <div class="algorithm-step">
140
+ <h5><span class="step-number">1</span>BERT Semantic Similarity</h5>
141
+ <p>Instead of just counting overlapping words, we use BERT embeddings to calculate semantic similarity between the context and each sense definition, capturing deeper meaning relationships.</p>
142
  </div>
143
 
144
  <div class="algorithm-step">
145
+ <h5><span class="step-number">2</span>Context Weighting</h5>
146
+ <p>Words closer to the target word are given higher weight, as they're more likely to be relevant to its meaning. This proximity-based weighting improves accuracy.</p>
147
  </div>
148
 
149
  <div class="algorithm-step">
150
+ <h5><span class="step-number">3</span>Rich Sense Signatures</h5>
151
+ <p>We expand sense definitions with examples, hypernyms, hyponyms, and other related terms from WordNet to create richer signatures for comparison.</p>
152
  </div>
153
 
154
  <div class="algorithm-step">
155
+ <h5><span class="step-number">4</span>Collocation Detection</h5>
156
+ <p>We identify common word combinations (like "river bank" or "baseball bat") that strongly indicate specific senses.</p>
157
  </div>
158
 
159
  <div class="algorithm-step">
160
+ <h5><span class="step-number">5</span>User Feedback Learning</h5>
161
+ <p>The system learns from user corrections, improving its accuracy over time by adjusting sense scores based on feedback.</p>
162
  </div>
163
  </div>
164
 
165
  <div class="mb-4">
166
+ <h4 class="section-title"><i class="fa-solid fa-code"></i>Example</h4>
167
  <p>For the sentence "She saw a bat flying in the dark":</p>
168
 
169
  <div class="code-block">
 
197
  </div>
198
 
199
  <div class="mb-4">
200
+ <h4 class="section-title"><i class="fa-solid fa-chart-line"></i>Advantages Over Basic Lesk</h4>
201
+
202
+ <div class="advantage-item">
203
+ <i class="fa-solid fa-check-circle fa-lg"></i>
204
+ <div>Higher accuracy for common ambiguous words</div>
205
+ </div>
206
+ <div class="advantage-item">
207
+ <i class="fa-solid fa-check-circle fa-lg"></i>
208
+ <div>Better handling of contextual nuances</div>
209
+ </div>
210
+ <div class="advantage-item">
211
+ <i class="fa-solid fa-check-circle fa-lg"></i>
212
+ <div>Integration of modern NLP techniques</div>
213
+ </div>
214
+ <div class="advantage-item">
215
+ <i class="fa-solid fa-check-circle fa-lg"></i>
216
+ <div>Adaptive learning from user feedback</div>
217
+ </div>
218
+ <div class="advantage-item">
219
+ <i class="fa-solid fa-check-circle fa-lg"></i>
220
+ <div>Combination of statistical and rule-based approaches</div>
221
+ </div>
222
  </div>
223
 
224
  <div class="text-center mt-5">
225
+ <a href="{{ url_for('index') }}" class="btn btn-primary px-4 py-2">
226
+ <i class="fa-solid fa-flask me-2"></i>Try the WSD Tool
227
+ </a>
228
  </div>
229
  </div>
230
 
231
+ <footer class="footer">
232
+ <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('index') }}">Home</a></div>
233
+ <div class="mt-1">&copy; 2024 WSD Tool. All rights reserved.</div>
234
+ </footer>
235
+
236
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
237
  </body>
238
  </html>
templates/results.html CHANGED
@@ -4,55 +4,124 @@
4
  <head>
5
  <title>Disambiguation Results</title>
6
  <meta name="viewport" content="width=device-width, initial-scale=1">
7
- <link
8
- href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
9
- rel="stylesheet"
10
- >
11
  <style>
12
- .highlight-word {
13
- background-color: #FFD700;
14
- padding: 2px 5px;
15
- border-radius: 3px;
16
- font-weight: bold;
17
  }
18
  .navbar {
19
- box-shadow: 0 2px 4px rgba(0,0,0,0.07);
20
  }
21
- .card {
22
- margin-bottom: 1.5rem;
23
- box-shadow: 0 2px 8px rgba(0,0,0,0.05);
 
 
 
24
  }
25
- #updatedSense {
26
- display: none;
 
 
 
 
 
 
 
 
 
27
  }
28
  .context-badge {
29
  margin-right: 5px;
30
  margin-bottom: 5px;
31
- background-color: #e9ecef;
32
- color: #495057;
 
 
33
  }
34
  .lexname-badge {
35
- background-color: #17a2b8;
36
  color: white;
 
 
37
  }
38
  .sense-card {
 
 
 
 
39
  transition: all 0.3s ease;
 
40
  }
41
  .sense-card:hover {
42
  transform: translateY(-5px);
43
- box-shadow: 0 4px 12px rgba(0,0,0,0.1);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
44
  }
45
  .algorithm-info {
46
  font-size: 0.9rem;
47
  color: #6c757d;
48
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
49
  </style>
50
  </head>
51
  <body>
52
- <!-- Navbar with Lesk Algorithm Explanation Link -->
53
- <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
54
  <div class="container">
55
- <a class="navbar-brand" href="/">WSD Tool</a>
 
 
56
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
57
  <span class="navbar-toggler-icon"></span>
58
  </button>
@@ -60,12 +129,12 @@
60
  <ul class="navbar-nav ms-auto align-items-center">
61
  <li class="nav-item">
62
  <a class="nav-link" href="{{ url_for('lesk_explained') }}">
63
- Learn about Lesk Algorithm
64
  </a>
65
  </li>
66
  <li class="nav-item">
67
  <a href="{{ url_for('index') }}" class="btn btn-outline-primary ms-2">
68
- ← Back to Input
69
  </a>
70
  </li>
71
  </ul>
@@ -73,136 +142,217 @@
73
  </div>
74
  </nav>
75
 
76
- <div class="container">
77
  <!-- Original Text -->
78
- <div class="mb-4">
79
- <h5>Original Text:</h5>
80
  <div class="p-3 bg-light rounded">
81
  {{ highlighted_text|safe }}
82
  </div>
83
  </div>
84
 
85
- {% if best_sense %}
86
- <!-- Selected Sense Card -->
87
- <div class="card sense-card" id="selectedSense">
88
- <div class="card-header bg-primary text-white">
89
- Selected Sense
90
- </div>
91
- <div class="card-body">
92
- <h5 id="senseDefinition">{{ best_sense.definition() }}</h5>
93
- <p class="text-muted">Lexical Category: <span class="badge lexname-badge">{{ best_sense.lexname() }}</span></p>
94
- {% if best_sense.examples() %}
95
- <div class="mt-2">
96
- <strong>Examples:</strong>
97
- <ul id="senseExamples">
98
- {% for example in best_sense.examples() %}
99
- <li>{{ example }}</li>
100
- {% endfor %}
101
- </ul>
102
  </div>
103
- {% endif %}
104
-
105
- <!-- Show context words that influenced the decision -->
106
- <div class="mt-3">
107
- <strong>Context words used:</strong>
108
- <div class="mt-2">
109
  {% for word in context_words.split(', ') %}
110
- <span class="badge context-badge">{{ word }}</span>
111
  {% endfor %}
112
  </div>
113
  </div>
114
-
115
- <div class="mt-3 algorithm-info">
116
- <p>This sense was selected using Enhanced Lesk algorithm with BERT semantic similarity and rule-based components.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
117
  </div>
118
  </div>
119
  </div>
 
120
 
121
  <!-- Updated Sense Section (Initially Hidden) -->
122
- <div class="card border-success mb-4 sense-card" id="updatedSense">
123
- <div class="card-header bg-success text-white">
124
- Updated Sense (Based on Feedback)
125
- </div>
126
- <div class="card-body">
127
- <h5 id="updatedDefinition"></h5>
128
- <div class="mt-2">
129
- <strong>Examples:</strong>
130
- <ul id="updatedExamples"></ul>
131
- </div>
132
- <div class="mt-3 algorithm-info">
133
- <p>Your feedback has been recorded and will improve future disambiguations.</p>
 
134
  </div>
135
  </div>
136
  </div>
137
 
138
  <!-- Top 3 Alternatives -->
139
- <h5 class="mt-4">Top 3 Alternative Senses:</h5>
140
- {% for sense in top_senses %}
141
- <div class="card mb-3 sense-card">
142
- <div class="card-body">
143
- <p><strong>{{ sense.definition() }}</strong></p>
144
- <p class="text-muted small">Lexical Category: <span class="badge lexname-badge">{{ sense.lexname() }}</span></p>
145
- {% if sense.examples() %}
146
- <p class="small">Example: "{{ sense.examples()[0] }}"</p>
147
- {% endif %}
148
- <button class="btn btn-sm btn-outline-primary feedback-btn"
149
- data-sense="{{ sense.name() }}">
150
- This is the correct meaning
151
- </button>
 
 
 
 
 
 
 
152
  </div>
153
  </div>
154
- {% endfor %}
155
  {% else %}
156
- <div class="alert alert-warning mt-4">
157
- No ambiguous words detected in the text.
 
 
 
158
  </div>
159
  {% endif %}
160
  </div>
161
 
162
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
163
- <script>
164
- document.querySelectorAll('.feedback-btn').forEach(btn => {
165
- btn.addEventListener('click', async () => {
166
- const senseName = btn.dataset.sense;
167
- const word = "{{ target_word }}";
168
- const context = "{{ sentence }}".toLowerCase().split(/[^a-z]+/).filter(w => w !== "");
169
-
170
- try {
171
- const response = await fetch('/feedback', {
172
- method: 'POST',
173
- headers: { 'Content-Type': 'application/json' },
174
- body: JSON.stringify({ word, context, correct_sense: senseName })
175
- });
176
-
177
- const updatedSense = await response.json();
178
-
179
- // Show updated sense section
180
- const updatedSection = document.getElementById('updatedSense');
181
- document.getElementById('updatedDefinition').textContent = updatedSense.definition;
182
 
183
- const examplesList = document.getElementById('updatedExamples');
184
- examplesList.innerHTML = '';
185
- if(updatedSense.examples && updatedSense.examples.length > 0) {
186
- updatedSense.examples.forEach(example => {
187
- const li = document.createElement('li');
188
- li.textContent = example;
189
- examplesList.appendChild(li);
190
- });
191
- }
192
 
193
- updatedSection.style.display = 'block';
194
- setTimeout(() => {
195
- window.scrollTo({
196
- top: updatedSection.offsetTop - 100,
197
- behavior: 'smooth'
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
198
  });
199
- }, 100);
200
-
201
- } catch (error) {
202
- console.error('Feedback error:', error);
203
- }
204
  });
205
- });
206
  </script>
207
  </body>
208
  </html>
 
4
  <head>
5
  <title>Disambiguation Results</title>
6
  <meta name="viewport" content="width=device-width, initial-scale=1">
7
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
 
9
  <style>
10
+ body {
11
+ background: linear-gradient(135deg, #f8fafc 0%, #e3e6f3 100%);
12
+ min-height: 100vh;
13
+ display: flex;
14
+ flex-direction: column;
15
  }
16
  .navbar {
17
+ box-shadow: 0 2px 8px rgba(0,0,0,0.07);
18
  }
19
+ .highlight-word {
20
+ background-color: #4f8cff;
21
+ color: white;
22
+ padding: 2px 8px;
23
+ border-radius: 4px;
24
+ font-weight: 500;
25
  }
26
+ .main-container {
27
+ max-width: 800px;
28
+ margin: 0 auto 2rem auto;
29
+ padding: 0;
30
+ }
31
+ .text-card {
32
+ background: white;
33
+ border-radius: 16px;
34
+ box-shadow: 0 4px 24px rgba(79,140,255,0.07);
35
+ padding: 1.5rem;
36
+ margin-bottom: 1.5rem;
37
  }
38
  .context-badge {
39
  margin-right: 5px;
40
  margin-bottom: 5px;
41
+ background-color: #e3e6f3;
42
+ color: #4f8cff;
43
+ border-radius: 20px;
44
+ font-weight: 400;
45
  }
46
  .lexname-badge {
47
+ background-color: #4f8cff;
48
  color: white;
49
+ border-radius: 20px;
50
+ font-weight: 500;
51
  }
52
  .sense-card {
53
+ background: white;
54
+ border-radius: 16px;
55
+ box-shadow: 0 4px 24px rgba(79,140,255,0.07);
56
+ margin-bottom: 1.5rem;
57
  transition: all 0.3s ease;
58
+ border: none;
59
  }
60
  .sense-card:hover {
61
  transform: translateY(-5px);
62
+ box-shadow: 0 8px 30px rgba(79,140,255,0.12);
63
+ }
64
+ .best-sense-card {
65
+ border-left: 5px solid #10b981;
66
+ }
67
+ .sense-icon {
68
+ font-size: 2rem;
69
+ margin-bottom: 1rem;
70
+ color: #4f8cff;
71
+ }
72
+ .feedback-btn {
73
+ border-radius: 20px;
74
+ padding: 0.4rem 1rem;
75
+ border: none;
76
+ background-color: #e3e6f3;
77
+ color: #4f8cff;
78
+ transition: all 0.2s ease;
79
+ }
80
+ .feedback-btn:hover {
81
+ background-color: #4f8cff;
82
+ color: white;
83
  }
84
  .algorithm-info {
85
  font-size: 0.9rem;
86
  color: #6c757d;
87
  }
88
+ .section-title {
89
+ margin-bottom: 1rem;
90
+ font-weight: 600;
91
+ color: #333;
92
+ display: flex;
93
+ align-items: center;
94
+ }
95
+ .section-title i {
96
+ margin-right: 0.5rem;
97
+ color: #4f8cff;
98
+ }
99
+ .footer {
100
+ margin-top: auto;
101
+ background: #f8fafc;
102
+ color: #6c757d;
103
+ text-align: center;
104
+ padding: 1rem 0 0.5rem 0;
105
+ font-size: 0.95rem;
106
+ }
107
+ #updatedSense {
108
+ display: none;
109
+ }
110
+ .toast-container {
111
+ position: fixed;
112
+ top: 20px;
113
+ right: 20px;
114
+ z-index: 1050;
115
+ }
116
  </style>
117
  </head>
118
  <body>
119
+ <!-- Navbar -->
120
+ <nav class="navbar navbar-expand-lg navbar-light bg-white mb-4">
121
  <div class="container">
122
+ <a class="navbar-brand fw-bold" href="/">
123
+ <i class="fa-solid fa-brain me-2"></i>WSD Tool
124
+ </a>
125
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
126
  <span class="navbar-toggler-icon"></span>
127
  </button>
 
129
  <ul class="navbar-nav ms-auto align-items-center">
130
  <li class="nav-item">
131
  <a class="nav-link" href="{{ url_for('lesk_explained') }}">
132
+ <i class="fa-solid fa-book-open me-1"></i>Learn about Lesk Algorithm
133
  </a>
134
  </li>
135
  <li class="nav-item">
136
  <a href="{{ url_for('index') }}" class="btn btn-outline-primary ms-2">
137
+ <i class="fa-solid fa-arrow-left me-1"></i>Back to Input
138
  </a>
139
  </li>
140
  </ul>
 
142
  </div>
143
  </nav>
144
 
145
+ <div class="container main-container">
146
  <!-- Original Text -->
147
+ <div class="text-card">
148
+ <h5 class="section-title"><i class="fa-solid fa-quote-left"></i>Original Text</h5>
149
  <div class="p-3 bg-light rounded">
150
  {{ highlighted_text|safe }}
151
  </div>
152
  </div>
153
 
154
+ {% if target_word %}
155
+ <!-- Context Information -->
156
+ <div class="text-card">
157
+ <h5 class="section-title"><i class="fa-solid fa-magnifying-glass"></i>Context Information</h5>
158
+ <div class="row">
159
+ <div class="col-md-6 mb-3">
160
+ <div class="fw-semibold mb-2">Target Word:</div>
161
+ <div class="d-inline-block px-3 py-1 bg-light rounded-pill">
162
+ <i class="fa-solid fa-crosshairs me-1"></i>{{ target_word }}
163
+ </div>
164
+ </div>
165
+ <div class="col-md-6 mb-3">
166
+ <div class="fw-semibold mb-2">Sentence:</div>
167
+ <div class="p-2 bg-light rounded">{{ sentence }}</div>
 
 
 
168
  </div>
169
+ <div class="col-12">
170
+ <div class="fw-semibold mb-2">Context Words:</div>
171
+ <div>
 
 
 
172
  {% for word in context_words.split(', ') %}
173
+ <span class="badge context-badge">{{ word }}</span>
174
  {% endfor %}
175
  </div>
176
  </div>
177
+ </div>
178
+ </div>
179
+
180
+ <!-- Best Sense -->
181
+ {% if best_sense %}
182
+ <div class="text-card best-sense-card">
183
+ <h5 class="section-title"><i class="fa-solid fa-check-circle text-success"></i>Best Sense</h5>
184
+ <div class="row align-items-center">
185
+ <div class="col-md-2 text-center d-none d-md-block">
186
+ <div class="sense-icon">
187
+ {% if 'animal' in best_sense.lexname() %}
188
+ <i class="fa-solid fa-paw"></i>
189
+ {% elif 'artifact' in best_sense.lexname() %}
190
+ <i class="fa-solid fa-hammer"></i>
191
+ {% elif 'time' in best_sense.lexname() %}
192
+ <i class="fa-solid fa-clock"></i>
193
+ {% elif 'object' in best_sense.lexname() %}
194
+ <i class="fa-solid fa-mountain"></i>
195
+ {% elif 'person' in best_sense.lexname() %}
196
+ <i class="fa-solid fa-user"></i>
197
+ {% elif 'plant' in best_sense.lexname() %}
198
+ <i class="fa-solid fa-seedling"></i>
199
+ {% elif 'attribute' in best_sense.lexname() %}
200
+ <i class="fa-solid fa-sliders"></i>
201
+ {% elif 'food' in best_sense.lexname() %}
202
+ <i class="fa-solid fa-utensils"></i>
203
+ {% else %}
204
+ <i class="fa-solid fa-lightbulb"></i>
205
+ {% endif %}
206
+ </div>
207
+ </div>
208
+ <div class="col-md-10">
209
+ <h5 class="mb-3">{{ best_sense.definition() }}</h5>
210
+ <div class="d-flex flex-wrap align-items-center mb-3">
211
+ <span class="badge lexname-badge me-2">{{ best_sense.lexname() }}</span>
212
+ <span class="text-muted small">{{ best_sense.name() }}</span>
213
+ </div>
214
+
215
+ {% if best_sense.examples() %}
216
+ <div class="mb-3">
217
+ <div class="fw-semibold">Examples:</div>
218
+ <ul class="mb-0">
219
+ {% for example in best_sense.examples() %}
220
+ <li>"{{ example }}"</li>
221
+ {% endfor %}
222
+ </ul>
223
+ </div>
224
+ {% endif %}
225
+
226
+ <div class="algorithm-info">
227
+ <i class="fa-solid fa-robot me-1"></i>
228
+ Selected using Enhanced Lesk algorithm with BERT embeddings
229
+ </div>
230
  </div>
231
  </div>
232
  </div>
233
+ {% endif %}
234
 
235
  <!-- Updated Sense Section (Initially Hidden) -->
236
+ <div class="text-card best-sense-card" id="updatedSense">
237
+ <h5 class="section-title"><i class="fa-solid fa-check-circle text-success"></i>Updated Sense (Based on Feedback)</h5>
238
+ <div class="row">
239
+ <div class="col-12">
240
+ <h5 id="updatedDefinition" class="mb-3"></h5>
241
+ <div class="mb-3">
242
+ <div class="fw-semibold">Examples:</div>
243
+ <ul id="updatedExamples"></ul>
244
+ </div>
245
+ <div class="algorithm-info">
246
+ <i class="fa-solid fa-thumbs-up me-1"></i>
247
+ Your feedback has been recorded and will improve future disambiguations.
248
+ </div>
249
  </div>
250
  </div>
251
  </div>
252
 
253
  <!-- Top 3 Alternatives -->
254
+ <div class="text-card">
255
+ <h5 class="section-title"><i class="fa-solid fa-layer-group"></i>Alternative Senses</h5>
256
+ <div class="row">
257
+ {% for sense in top_senses %}
258
+ <div class="col-md-4 mb-3">
259
+ <div class="card sense-card h-100">
260
+ <div class="card-body">
261
+ <p class="fw-semibold mb-2">{{ sense.definition() }}</p>
262
+ <p class="text-muted small mb-2">Category: <span class="badge lexname-badge">{{ sense.lexname() }}</span></p>
263
+ {% if sense.examples() %}
264
+ <p class="small mb-3">"{{ sense.examples()[0] }}"</p>
265
+ {% endif %}
266
+ <button class="btn btn-sm feedback-btn w-100 feedback-btn"
267
+ data-sense="{{ sense.name() }}">
268
+ <i class="fa-solid fa-check me-1"></i>This is correct
269
+ </button>
270
+ </div>
271
+ </div>
272
+ </div>
273
+ {% endfor %}
274
  </div>
275
  </div>
 
276
  {% else %}
277
+ <div class="text-card">
278
+ <div class="alert alert-warning mb-0">
279
+ <i class="fa-solid fa-exclamation-triangle me-2"></i>
280
+ No ambiguous words detected in the text.
281
+ </div>
282
  </div>
283
  {% endif %}
284
  </div>
285
 
286
+ <!-- Toast for feedback confirmation -->
287
+ <div class="toast-container">
288
+ <div class="toast align-items-center text-white bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true" id="feedbackToast">
289
+ <div class="d-flex">
290
+ <div class="toast-body">
291
+ <i class="fa-solid fa-check-circle me-2"></i>
292
+ Feedback recorded successfully!
293
+ </div>
294
+ <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
295
+ </div>
296
+ </div>
297
+ </div>
 
 
 
 
 
 
 
 
298
 
299
+ <footer class="footer">
300
+ <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>
301
+ <div class="mt-1">&copy; 2024 WSD Tool. All rights reserved.</div>
302
+ </footer>
 
 
 
 
 
303
 
304
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
305
+ <script>
306
+ document.addEventListener('DOMContentLoaded', function() {
307
+ const feedbackBtns = document.querySelectorAll('.feedback-btn');
308
+ const feedbackToast = new bootstrap.Toast(document.getElementById('feedbackToast'));
309
+
310
+ feedbackBtns.forEach(btn => {
311
+ btn.addEventListener('click', function() {
312
+ const sense = this.getAttribute('data-sense');
313
+
314
+ fetch('/feedback', {
315
+ method: 'POST',
316
+ headers: {
317
+ 'Content-Type': 'application/json',
318
+ },
319
+ body: JSON.stringify({
320
+ word: '{{ target_word }}',
321
+ context: '{{ context_words }}'.split(', '),
322
+ correct_sense: sense
323
+ })
324
+ })
325
+ .then(response => response.json())
326
+ .then(data => {
327
+ if (data.definition) {
328
+ document.getElementById('updatedDefinition').textContent = data.definition;
329
+
330
+ const examplesList = document.getElementById('updatedExamples');
331
+ examplesList.innerHTML = '';
332
+
333
+ if (data.examples && data.examples.length > 0) {
334
+ data.examples.forEach(example => {
335
+ const li = document.createElement('li');
336
+ li.textContent = example;
337
+ examplesList.appendChild(li);
338
+ });
339
+ }
340
+
341
+ document.getElementById('updatedSense').style.display = 'block';
342
+
343
+ // Show toast notification
344
+ feedbackToast.show();
345
+
346
+ // Scroll to updated sense
347
+ document.getElementById('updatedSense').scrollIntoView({ behavior: 'smooth' });
348
+ }
349
+ })
350
+ .catch(error => {
351
+ console.error('Error:', error);
352
  });
353
+ });
354
+ });
 
 
 
355
  });
 
356
  </script>
357
  </body>
358
  </html>