Hugging Face's logo

Spaces:
WebashalarForML
/
SpacyModelCreator
Sleeping

App Files Community
1
WebashalarForML commited on
Commit
342c773
·
verified ·
1 Parent(s): 2f2758d

Upload 6 files

Browse files
Files changed (6) hide show
  1. templates/anoter.html +180 -0
  2. templates/guide.html +167 -0
  3. templates/saveSpacy.html +287 -0
  4. templates/savejson.html +236 -0
  5. templates/text.html +223 -0
  6. templates/upload.html +266 -0
templates/anoter.html ADDED
@@ -0,0 +1,180 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Annotater File</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.5/font/bootstrap-icons.min.css" rel="stylesheet">
9
+ <link
10
+ rel="stylesheet"
11
+ href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
12
+ />
13
+ <style>
14
+ body {
15
+ background-color: #121212;
16
+ font-family: 'Poppins', sans-serif;
17
+ color: #e0e0e0;
18
+ margin: 0;
19
+ padding: 0;
20
+ }
21
+ h1 {
22
+ color: #ffffff;
23
+ text-align: center;
24
+ margin: 0 0 30px 0;
25
+ }
26
+ .container {
27
+ max-width: 1400px;
28
+ margin: 0 auto;
29
+ padding: 20px;
30
+ }
31
+ .iframe-container {
32
+ background-color: #1e1e1e;
33
+ padding: 20px;
34
+ border-radius: 15px;
35
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
36
+ position: relative;
37
+ }
38
+ .iframe-container iframe {
39
+ width: 100%;
40
+ height: 675px;
41
+ border: none;
42
+ border-radius: 10px;
43
+ }
44
+ @media (max-width: 992px) {
45
+ .iframe-container iframe {
46
+ height: 500px;
47
+ }
48
+ }
49
+ @media (max-width: 768px) {
50
+ .iframe-container iframe {
51
+ height: 400px;
52
+ }
53
+ }
54
+ .btn-custom {
55
+ color: white;
56
+ border: none;
57
+ padding: 10px 20px;
58
+ border-radius: 5px;
59
+ font-size: 16px;
60
+ cursor: pointer;
61
+ transition: background-color 0.3s ease;
62
+ display: flex;
63
+ align-items: center;
64
+ gap: 8px;
65
+ }
66
+ .btn-next {
67
+ background-color: #4CAF50;
68
+ border: 1px solid #4caf50
69
+ }
70
+ .btn-next:hover {
71
+ background-color: transparent;
72
+ border: 1px solid #4caf50;
73
+ }
74
+
75
+ .restart-button {
76
+ margin-top: 20px;
77
+ margin-left: 20px;
78
+ display: flex;
79
+ }
80
+
81
+ .btn-restart:hover {
82
+ background-color: #c9302c;
83
+ }
84
+ .guide {
85
+ background-color: #1e1e1e;
86
+ padding: 20px;
87
+ border-radius: 10px;
88
+ margin-top: 20px;
89
+ }
90
+
91
+ .guide-button {
92
+ position: fixed;
93
+ top: 20px;
94
+ right: 20px;
95
+ z-index: 1000;
96
+ }
97
+
98
+ .guide-button a {
99
+ font-size: 16px;
100
+ color: #17a2b8;
101
+ padding: 5px 10px;
102
+ border-radius: 5px;
103
+ text-decoration: none;
104
+ }
105
+
106
+ .guide-button a:hover {
107
+ background-color: #138496b9;
108
+ }
109
+
110
+ .fas.fa-info-circle {
111
+ margin-right: 5px;
112
+ }
113
+ </style>
114
+ </head>
115
+ <body>
116
+ <!-- Guide Button -->
117
+ <div class="guide-button">
118
+ <a href="{{ url_for('guide') }}" class="btn">
119
+ <i class="fas fa-info-circle"></i> Guide
120
+ </a>
121
+ </div>
122
+ <!-- Restart Form -->
123
+ <form action="{{ url_for('remove_files') }}" method="post">
124
+ <input type="hidden" name="folder_type" value="uploads">
125
+ <div class="restart-button">
126
+ <button type="submit" class="btn btn-danger btn-restart">
127
+ <i class="bi bi-arrow-clockwise"></i> Restart
128
+ </button>
129
+ </div>
130
+ </form>
131
+
132
+ <div class="container">
133
+ <!-- Main content -->
134
+ <h1>Another File</h1>
135
+ <!-- Progress Bar -->
136
+ <div class="progress">
137
+ <div class="progress-bar" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">Step 3 of 5</div>
138
+ </div>
139
+ <div class="iframe-container">
140
+ <iframe src="https://tecoholic.github.io/ner-annotator/" title="NER Annotator"></iframe>
141
+ </div>
142
+
143
+
144
+
145
+ {% with messages = get_flashed_messages() %}
146
+ {% if messages %}
147
+ <div class="alert alert-success mt-4" id="flash-message">{{ messages[0] }}</div>
148
+ {% endif %}
149
+ {% endwith %}
150
+ <div class="text-center mt-4">
151
+ <form action="{{ url_for('json_file') }}" method="GET">
152
+ <button type="submit" class="btn btn-custom btn-next">
153
+ <i class="bi bi-arrow-right"></i> Next
154
+ </button>
155
+ </form>
156
+ </div>
157
+ <div class="guide">
158
+ <h5>Instructions:</h5>
159
+ <ol>
160
+ <li>Load Downloded text file and click on 'Begin!'</li>
161
+ <li>Add new lebel and select text as per lebel and save it</li>
162
+ <li>for Dwonload Annoted json file click on top 'Annotations' > 'Export'</li>
163
+ <li>Click 'Next' for Formatting</li>
164
+ </ol>
165
+ </div>
166
+ </div>
167
+
168
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
169
+ <script>
170
+ setTimeout(function() {
171
+ let flashMessage = document.getElementById('flash-message');
172
+ if (flashMessage) {
173
+ flashMessage.style.transition = 'opacity 1s ease';
174
+ flashMessage.style.opacity = 0;
175
+ setTimeout(() => flashMessage.remove(), 1000);
176
+ }
177
+ }, 10000000);
178
+ </script>
179
+ </body>
180
+ </html>
templates/guide.html ADDED
@@ -0,0 +1,167 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>SpaCy NER Training Guide</title>
7
+ <link
8
+ rel="stylesheet"
9
+ href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
10
+ />
11
+ <style>
12
+ body {
13
+ background-color: #121212;
14
+ font-family: "Poppins", sans-serif;
15
+ color: #e0e0e0;
16
+ margin: 0;
17
+ padding: 0;
18
+ }
19
+ h1,
20
+ h2 {
21
+ color: #007bff;
22
+ }
23
+ .step {
24
+ margin-bottom: 30px;
25
+ border: 1px solid #007bff;
26
+ border-radius: 5px;
27
+ padding: 20px;
28
+ background-color: #1e1e1e;
29
+ }
30
+ .btn-primary {
31
+ color: #fff;
32
+ background-color: #007bff;
33
+ border: 1px solid #007bff;
34
+ }
35
+ .btn-primary:hover {
36
+ background-color: transparent;
37
+ border: 1px solid #007bff;
38
+ }
39
+ </style>
40
+ </head>
41
+ <body>
42
+ <div class="container">
43
+ <h1>SpaCy NER Model Training Guide</h1>
44
+
45
+ <div class="step">
46
+ <h2>Step 1: Upload Your Resume File</h2>
47
+ <p>
48
+ Upload a resume or document file for text extraction. Supported
49
+ formats include:
50
+ </p>
51
+ <ul>
52
+ <li>PDF</li>
53
+ <li>DOCX (Word Document)</li>
54
+ <li>RSF (Rich Structured Format)</li>
55
+ <li>ODT (Open Document Text)</li>
56
+ <li>PNG, JPG, JPEG (Image Formats)</li>
57
+ <li>JSON</li>
58
+ </ul>
59
+ <p>
60
+ Ensure that your file is in one of the supported formats before
61
+ uploading. The system will extract and process the text from your
62
+ document automatically.
63
+ </p>
64
+ <a href="{{ url_for('index') }}" class="btn btn-primary"
65
+ >Proceed to Upload</a
66
+ >
67
+ </div>
68
+
69
+ <div class="step">
70
+ <h2>Step 2: Preview and Edit Extracted Text</h2>
71
+ <p>
72
+ After uploading your document, you will be shown a preview of the
73
+ extracted text. This preview allows you to edit the text if needed to
74
+ correct any extraction errors or remove unwanted content. Once you're
75
+ satisfied, click "Next" to proceed to Named Entity Recognition (NER)
76
+ annotations.
77
+ </p>
78
+ <a href="{{ url_for('text_preview') }}" class="btn btn-primary"
79
+ >Proceed to Text Preview</a
80
+ >
81
+ </div>
82
+
83
+ <div class="step">
84
+ <h2>Step 3: Annotate Named Entities</h2>
85
+ <p>
86
+ In this step, you will preview the Named Entity Recognition (NER)
87
+ results generated from your text. You can add new entity labels,
88
+ select relevant text for each label, and make manual adjustments. Once
89
+ you’ve annotated the text with the appropriate labels, save your
90
+ annotations and export the data in JSON format for model training.
91
+ </p>
92
+ <p>Instructions:</p>
93
+ <ul>
94
+ <li>Click "Begin!" to load the extracted text.</li>
95
+ <li>
96
+ Highlight sections of the text and assign them to the available
97
+ labels.
98
+ </li>
99
+ <li>Add new labels if necessary.</li>
100
+ <li>
101
+ Once done, click "Export" to download your annotations as a JSON
102
+ file.
103
+ </li>
104
+ </ul>
105
+ <a href="{{ url_for('ner_preview') }}" class="btn btn-primary"
106
+ >Proceed to NER Annotation</a
107
+ >
108
+ </div>
109
+
110
+ <div class="step">
111
+ <h2>Step 4: Save and Format JSON Data</h2>
112
+ <p>
113
+ Upload your annotated JSON file from the previous step. The system
114
+ will process and reformat the JSON file to ensure compatibility with
115
+ the SpaCy model training process. After formatting, you can proceed to
116
+ the model training step.
117
+ </p>
118
+ <p>Instructions:</p>
119
+ <ul>
120
+ <li>
121
+ Upload the JSON file you downloaded after the annotation step.
122
+ </li>
123
+ <li>Click "Process" to reformat the file.</li>
124
+ <li>
125
+ Once processing is complete, click "Next" to proceed with training.
126
+ </li>
127
+ </ul>
128
+ <a href="{{ url_for('json_file') }}" class="btn btn-primary"
129
+ >Proceed to Save JSON</a
130
+ >
131
+ </div>
132
+
133
+ <div class="step">
134
+ <h2>Step 5: Train the NER Model</h2>
135
+ <p>
136
+ In this final step, you will convert the formatted JSON data into the
137
+ SpaCy format and begin training the NER model. You can customize the
138
+ training by selecting the number of epochs (iterations) the model will
139
+ go through and setting the version for the trained model.
140
+ </p>
141
+ <p>Guidelines:</p>
142
+ <ul>
143
+ <li>
144
+ Number of epochs: The higher the number of epochs, the more times
145
+ the model will learn from the data, but too many epochs can lead to
146
+ overfitting. Start with 10 epochs for a balanced training approach.
147
+ </li>
148
+ <li>
149
+ Model versioning: Provide a version name for this training session,
150
+ so you can keep track of different versions of the model.
151
+ </li>
152
+ </ul>
153
+ <p>
154
+ Once the training is complete, you can download the latest version of
155
+ the trained model for use in production.
156
+ </p>
157
+ <a href="{{ url_for('spacy_file') }}" class="btn btn-primary"
158
+ >Proceed to Model Training</a
159
+ >
160
+ </div>
161
+ </div>
162
+
163
+ <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
164
+ <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
165
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
166
+ </body>
167
+ </html>
templates/saveSpacy.html ADDED
@@ -0,0 +1,287 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Train Model</title>
7
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
8
+ <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
10
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.5/font/bootstrap-icons.min.css" rel="stylesheet" />
11
+ <link
12
+ rel="stylesheet"
13
+ href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
14
+ />
15
+ <style>
16
+ body {
17
+ background-color: #121212;
18
+ font-family: "Poppins", sans-serif;
19
+ color: #e0e0e0;
20
+ margin: 0;
21
+ padding: 0;
22
+ }
23
+ .container {
24
+ max-width: 600px;
25
+ margin: 0 auto;
26
+ }
27
+ h1, h2 {
28
+ color: #ffffff;
29
+ font-weight: 500;
30
+ margin-bottom: 20px;
31
+ text-align: center;
32
+ }
33
+
34
+ .btn-custom {
35
+ background-color: #ff9800;
36
+ color: white;
37
+ border: none;
38
+ padding: 10px 20px;
39
+ border-radius: 5px;
40
+ font-size: 16px;
41
+ cursor: pointer;
42
+ transition: background-color 0.3s ease, transform 0.3s ease;
43
+ width: 100%;
44
+ }
45
+ .btn-custom:hover,
46
+ .btn-custom:focus {
47
+ background-color: transparent !important;
48
+ /* border: 1px solid #ff9800; */
49
+ /* transform: scale(1.05); */
50
+ color: white;
51
+ }
52
+
53
+ .btn-primary {
54
+ background-color: #3498db;
55
+ border-color: #3498db;
56
+ border: 1px solid #3498db;
57
+ }
58
+ .btn-primary:hover {
59
+ background-color: transparent !important;
60
+ color: #3498db;
61
+ border: 1px solid #3498db;
62
+ }
63
+
64
+ .btn-success {
65
+ background-color: #28a745;
66
+ border-color: #28a745;
67
+ border: 1px solid #28a745;
68
+ }
69
+ .btn-success:hover {
70
+ background-color: transparent !important;
71
+ color: #28a745;
72
+ border: 1px solid #28a745;
73
+ }
74
+
75
+ .btn-danger {
76
+ background-color: #ff4d4d !important;
77
+ border-color: #ff4d4d !important;
78
+ border: 1px solid #ff4d4d;
79
+ }
80
+ .btn-danger:hover {
81
+ background-color: transparent !important;
82
+ color: #ff4d4d !important;
83
+ border: 1px solid #ff4d4d;
84
+ }
85
+
86
+ .file-upload-section {
87
+ max-width: 600px;
88
+ margin-bottom: 20px ;
89
+ background-color: #1e1e1e;
90
+ padding: 20px;
91
+ border-radius: 8px;
92
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
93
+ }
94
+
95
+ .form-group label {
96
+ color: #b3b3b3;
97
+ }
98
+
99
+ .form-control {
100
+ background-color: #2c2c2c;
101
+ color: #e0e0e0;
102
+ border: 1px solid #444;
103
+ }
104
+
105
+ .form-control:focus {
106
+ border-color: #ff9800;
107
+ box-shadow: none;
108
+ }
109
+
110
+ .loader {
111
+ border: 14px solid #f3f3f3;
112
+ border-radius: 50%;
113
+ border-top: 16px solid #ff9800;
114
+ width: 100px;
115
+ height: 100px;
116
+ animation: spin 2s linear infinite;
117
+ display: none;
118
+ margin: 0 auto;
119
+ }
120
+
121
+ @keyframes spin {
122
+ 0% { transform: rotate(0deg); }
123
+ 100% { transform: rotate(360deg); }
124
+ }
125
+
126
+ #msg {
127
+ margin-top: 20px;
128
+ font-size: 18px;
129
+ color: #28a745;
130
+ }
131
+
132
+ .restart-button {
133
+ margin-top: 20px;
134
+ margin-left: 20px;
135
+ display: flex;
136
+ }
137
+ .guide {
138
+ background-color: #1e1e1e;
139
+ padding: 20px;
140
+ border-radius: 10px;
141
+ margin-top: 20px;
142
+ }
143
+ .guide-button {
144
+ position: fixed;
145
+ top: 20px;
146
+ right: 20px;
147
+ z-index: 1000;
148
+ }
149
+
150
+ .guide-button a {
151
+ font-size: 16px;
152
+ color: #17a2b8;
153
+ padding: 5px 10px;
154
+ border-radius: 5px;
155
+ text-decoration: none;
156
+ }
157
+
158
+ .guide-button a:hover {
159
+ background-color: #138496b9;
160
+ }
161
+
162
+ .fas.fa-info-circle {
163
+ margin-right: 5px;
164
+ }
165
+ </style>
166
+ </head>
167
+ <body>
168
+ <!-- Guide Button -->
169
+ <div class="guide-button">
170
+ <a href="{{ url_for('guide') }}" class="btn">
171
+ <i class="fas fa-info-circle"></i> Guide
172
+ </a>
173
+ </div>
174
+ <!-- Restart Form -->
175
+ <form action="{{ url_for('remove_files') }}" method="post">
176
+ <input type="hidden" name="folder_type" value="uploads">
177
+ <div class="restart-button">
178
+ <button type="submit" class="btn btn-danger">
179
+ <i class="bi bi-arrow-clockwise"></i> Restart
180
+ </button>
181
+ </div>
182
+ </form>
183
+
184
+ <!-- Main Content -->
185
+ <div class="container mt-5">
186
+ <h1>Train Your Model</h1>
187
+
188
+ <!-- File Upload Section -->
189
+ <div class="progress">
190
+ <div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">Step 5 of 5</div>
191
+ </div>
192
+ <div class="file-upload-section">
193
+ <h2>Convert JSON to SpaCy Format</h2>
194
+ <form action="{{ url_for('to_sapcy') }}" method="POST">
195
+ <button type="submit" class="btn btn-primary btn-custom">
196
+ <i class="bi bi-arrow-repeat"></i> Convert JSON to SpaCy
197
+ </button>
198
+ </form>
199
+
200
+ <!-- Model Training Section -->
201
+ <h2 class="mt-5">Train Model</h2>
202
+ <form id="train-form" action="{{ url_for('train_model_endpoint') }}" method="POST">
203
+ <div class="form-group">
204
+ <label for="epochs">Number of Epochs:</label>
205
+ <input type="number" id="epochs" name="epochs" class="form-control" min="1" value="10" />
206
+ </div>
207
+ <div class="form-group">
208
+ <label for="model_version">Model Version:</label>
209
+ <input type="text" id="model_version" name="model_version" class="form-control" value="V1" />
210
+ </div>
211
+ <button type="button" id="start-training" class="btn btn-danger btn-custom">
212
+ <i class="bi bi-gear"></i> Start Training
213
+ </button>
214
+ </form>
215
+ <!-- Download Section -->
216
+ <div id="download" style="display: none;">
217
+ <h2 class="mt-5">Download Latest Model</h2>
218
+ <form action="{{ url_for('download_latest_model') }}" method="GET">
219
+ <button type="submit" class="btn btn-success btn-custom">
220
+ <i class="bi bi-download"></i> Download Model
221
+ </button>
222
+ </form>
223
+ </div>
224
+ </div>
225
+
226
+ <!-- Flash Message Handling -->
227
+ {% with messages = get_flashed_messages() %}
228
+ {% if messages %}
229
+ <div class="alert alert-success mt-4" id="flash-message">
230
+ {{ messages[0] }}
231
+ </div>
232
+ {% endif %}
233
+ {% endwith %}
234
+
235
+ <!-- Loader -->
236
+ <div class="loader" id="loader"></div>
237
+ <div id="ld-txt" class="text-center" style="display: none">
238
+ Loading...<br><span class="text-danger">Please avoid refreshing the page while processing!</span>
239
+ </div>
240
+
241
+ <!-- Success/Error Message -->
242
+ <div id="msg" class="alert alert-success mt-4" style="display: none"></div>
243
+
244
+ <div class="guide">
245
+ <h5>Instructions:</h5>
246
+ <ol>
247
+ <li>Click 'Convert JSON to SpaCy' button to convet json file in to spacy file</li>
248
+ <li>Select the number of epochs and provide a model version for training. The model will learn from the uploaded data, optimizing its parameters to better understand and categorize the information.</li>
249
+ <li>The number of epochs represents how many times the model will pass through the training data. More epochs may improve the model's performance but may also lead to overfitting if set too high.</li>
250
+ <li>Choosing a model version helps you manage different versions of the trained model for tracking and comparison.</li>
251
+ </ol>
252
+ </div>
253
+ </div>
254
+ <!-- JavaScript Logic -->
255
+ <script>
256
+ document.getElementById("start-training").addEventListener("click", function () {
257
+ document.getElementById("loader").style.display = "block";
258
+ document.getElementById("ld-txt").style.display = "block";
259
+
260
+ axios.post('{{ url_for("train_model_endpoint") }}', new FormData(document.getElementById("train-form")))
261
+ .then(function (response) {
262
+ document.getElementById("loader").style.display = "none";
263
+ document.getElementById("ld-txt").style.display = "none";
264
+ document.getElementById("msg").style.display = "block";
265
+ document.getElementById("msg").innerHTML = "Model training completed successfully.";
266
+ document.getElementById("download").style.display = "block";
267
+ })
268
+ .catch(function (error) {
269
+ document.getElementById("loader").style.display = "none";
270
+ document.getElementById("ld-txt").style.display = "none";
271
+ let msg = document.getElementById("msg");
272
+ msg.style.display = "block";
273
+ msg.innerHTML = "Error occurred during model training.";
274
+ });
275
+ });
276
+
277
+ setTimeout(function () {
278
+ let flashMessage = document.getElementById("flash-message");
279
+ if (flashMessage) {
280
+ flashMessage.style.transition = "opacity 1s ease";
281
+ flashMessage.style.opacity = 0;
282
+ setTimeout(() => flashMessage.remove(), 1000);
283
+ }
284
+ }, 3000);
285
+ </script>
286
+ </body>
287
+ </html>
templates/savejson.html ADDED
@@ -0,0 +1,236 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Upload and Process JSON</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
8
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.5/font/bootstrap-icons.min.css" rel="stylesheet" />
9
+ <link
10
+ rel="stylesheet"
11
+ href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
12
+ />
13
+ <style>
14
+ body {
15
+ background-color: #121212;
16
+ font-family: 'Poppins', sans-serif;
17
+ color: #e0e0e0;
18
+ margin: 0;
19
+ padding: 0;
20
+ }
21
+ h1 {
22
+ color: #ffffff;
23
+ text-align: center;
24
+ margin: 50px 0;
25
+ }
26
+ .container {
27
+ max-width: 800px;
28
+ margin: 0 auto;
29
+ padding: 20px;
30
+ }
31
+ .file-upload-section {
32
+ background-color: #1e1e1e;
33
+ padding: 30px;
34
+ border-radius: 15px;
35
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
36
+ text-align: center;
37
+ animation: fadeInUp 1.5s ease;
38
+ }
39
+ .file-upload-section input[type="file"] {
40
+ background-color: #2c2c2c;
41
+ border: 1px solid #444;
42
+ color: #e0e0e0;
43
+ border-radius: 5px;
44
+ width: 100%;
45
+ margin-bottom: 20px;
46
+ transition: background-color 0.3s ease;
47
+ }
48
+ .file-upload-section input[type="file"]:hover,
49
+ .file-upload-section input[type="file"]:focus {
50
+ background-color: #3a3a3a;
51
+ outline: none;
52
+ }
53
+ .btn-custom {
54
+ color: white;
55
+ border: none;
56
+ padding: 10px 20px;
57
+ border-radius: 5px;
58
+ font-size: 16px;
59
+ cursor: pointer;
60
+ transition: background-color 0.3s ease;
61
+ display: flex;
62
+ align-items: center;
63
+ gap: 8px;
64
+ }
65
+ .btn-upload {
66
+ background-color: #007bff;
67
+ border: 1px solid #007bff;
68
+ }
69
+ .btn-upload:hover {
70
+ background-color: transparent;
71
+ border: 1px solid #007bff;
72
+ }
73
+ .btn-process {
74
+ background-color: #28a745;
75
+ border: 1px solid #28a745;
76
+ }
77
+ .btn-process:hover {
78
+ background-color: transparent;
79
+ border: 1px solid #28a745;
80
+ }
81
+ .btn-restart {
82
+ background-color: #dc3545;
83
+ }
84
+ .btn-restart:hover {
85
+ background-color: #c82333;
86
+ }
87
+ .btn-next {
88
+ background-color: #4CAF50;
89
+ border: 1px solid #4caf50;
90
+ }
91
+ .btn-next:hover {
92
+ background-color: transparent;
93
+ border: 1px solid #4caf50;
94
+ }
95
+ .text-center {
96
+ text-align: center;
97
+ }
98
+ .restart-button {
99
+ margin-top: 20px;
100
+ margin-left: 20px;
101
+ display: flex;
102
+ }
103
+ .file-actions {
104
+ margin-top: 20px;
105
+ }
106
+
107
+ .guide {
108
+ background-color: #1e1e1e;
109
+ padding: 20px;
110
+ border-radius: 10px;
111
+ margin-top: 20px;
112
+ }
113
+ .guide-button {
114
+ position: fixed;
115
+ top: 20px;
116
+ right: 20px;
117
+ z-index: 1000;
118
+ }
119
+
120
+ .guide-button a {
121
+ font-size: 16px;
122
+ color: #17a2b8;
123
+ padding: 5px 10px;
124
+ border-radius: 5px;
125
+ text-decoration: none;
126
+ }
127
+
128
+ .guide-button a:hover {
129
+ background-color: #138496b9;
130
+ }
131
+
132
+ .fas.fa-info-circle {
133
+ margin-right: 5px;
134
+ }
135
+ </style>
136
+ </head>
137
+ <body>
138
+ <!-- Guide Button -->
139
+ <div class="guide-button">
140
+ <a href="{{ url_for('guide') }}" class="btn">
141
+ <i class="fas fa-info-circle"></i> Guide
142
+ </a>
143
+ </div>
144
+ <!-- Restart button -->
145
+ <div class="text-center restart-button">
146
+ <form action="{{ url_for('remove_files') }}" method="post">
147
+ <input type="hidden" name="folder_type" value="uploads">
148
+ <button type="submit" class="btn btn-custom btn-restart">
149
+ <i class="bi bi-arrow-repeat"></i> Restart
150
+ </button>
151
+ </form>
152
+ </div>
153
+
154
+ <div class="container mt-5">
155
+ <h1 class="text-center">Upload and Process JSON</h1>
156
+
157
+ <!-- Progress Bar -->
158
+
159
+ <div class="progress">
160
+ <div class="progress-bar" role="progressbar" style="width: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">Step 4 of 5</div>
161
+ </div>
162
+ <div class="file-upload-section">
163
+
164
+ <!-- Form to upload JSON file -->
165
+ <form action="{{ url_for('upload_json_file') }}" method="POST" enctype="multipart/form-data">
166
+ <div class="form-group mb-3">
167
+ <label for="file" class="form-label">Select JSON file to upload:</label>
168
+ <input type="file" class="form-control" id="file" name="file" accept=".json" required/>
169
+ </div>
170
+ <button type="submit" class="btn btn-custom btn-upload">
171
+ <i class="bi bi-upload"></i> Upload JSON
172
+ </button>
173
+ </form>
174
+
175
+ <!-- Process JSON button -->
176
+ <div class="text-center mt-4">
177
+ <form action="{{ url_for('process_json_file') }}" method="GET">
178
+ <button type="submit" class="btn btn-custom btn-process">
179
+ <i class="bi bi-gear"></i> Process Save JSON
180
+ </button>
181
+ </form>
182
+ </div>
183
+
184
+ <!-- Next button -->
185
+ <div class="text-center mt-4">
186
+ <form action="{{ url_for('spacy_file') }}" method="GET">
187
+ <button type="submit" class="btn btn-custom btn-next">
188
+ <i class="bi bi-arrow-right"></i> Next
189
+ </button>
190
+ </form>
191
+ </div>
192
+
193
+ <!-- Uploaded JSON actions -->
194
+ {% if session.get('uploaded_json') %}
195
+ <div class="file-actions">
196
+ <p>Uploaded: <span class="text-danger">{{ session.get('uploaded_json') }}</span></p>
197
+ <form action="{{ url_for('remove_all_json_files') }}" method="post" class="d-flex justify-content-center">
198
+ <button type="submit" class="btn btn-outline-danger">
199
+ <i class="bi bi-trash"></i> Remove Uploaded JSON
200
+ </button>
201
+ </form>
202
+ </div>
203
+ {% endif %}
204
+ </div>
205
+
206
+ <!-- Success messages -->
207
+ {% with messages = get_flashed_messages() %}
208
+ {% if messages %}
209
+ <div class="alert alert-success mt-4" id="flash-message">{{ messages[0] }}</div>
210
+ {% endif %}
211
+ {% endwith %}
212
+
213
+ <!-- Guide for saving JSON -->
214
+ <div class="guide">
215
+ <h5>Instructions:</h5>
216
+ <ol class="">
217
+ <li>Upload your downloaded JSON file from the annotation step.</li>
218
+ <li>Click "Process" to save required JSON format.</li>
219
+ <li>Click "Next" to proceed with training the model using the processed JSON file.</li>
220
+ </ol>
221
+ </div>
222
+ </div>
223
+
224
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
225
+ <script>
226
+ setTimeout(function() {
227
+ let flashMessage = document.getElementById('flash-message');
228
+ if (flashMessage) {
229
+ flashMessage.style.transition = 'opacity 1s ease';
230
+ flashMessage.style.opacity = 0;
231
+ setTimeout(() => flashMessage.remove(), 1000);
232
+ }
233
+ }, 3000);
234
+ </script>
235
+ </body>
236
+ </html>
templates/text.html ADDED
@@ -0,0 +1,223 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Processed Text</title>
7
+ <link
8
+ href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
9
+ rel="stylesheet"
10
+ />
11
+ <link
12
+ href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.5/font/bootstrap-icons.min.css"
13
+ rel="stylesheet"
14
+ />
15
+ <link
16
+ rel="stylesheet"
17
+ href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
18
+ />
19
+ <style>
20
+ body {
21
+ font-family: "Poppins", sans-serif;
22
+ background-color: #121212;
23
+ color: #e0e0e0;
24
+ margin: 0;
25
+ padding: 20px;
26
+ }
27
+ h1 {
28
+ color: #ffffff;
29
+ margin-bottom: 20px;
30
+ text-align: center;
31
+ }
32
+ textarea {
33
+ width: 100%;
34
+ height: 300px;
35
+ background-color: #1e1e1e !important;
36
+ color: #e0e0e0 !important;
37
+ border: 1px solid #444 !important;
38
+ border-radius: 5px;
39
+ padding: 10px;
40
+ margin-bottom: 20px;
41
+ resize: none;
42
+ }
43
+ .btn-custom {
44
+ color: white;
45
+ border: none;
46
+ padding: 10px 20px;
47
+ border-radius: 5px;
48
+ font-size: 16px;
49
+ cursor: pointer;
50
+ transition: background-color 0.3s ease;
51
+ display: flex;
52
+ align-items: center;
53
+ gap: 8px;
54
+ }
55
+ .btn-download {
56
+ background-color: #ff9800;
57
+ border: 1px solid #ff9800;
58
+ }
59
+ .btn-download:hover {
60
+ background-color: transparent;
61
+ border: 1px solid #ff9800;
62
+ }
63
+ .btn-reupload {
64
+ background-color: #2196f3;
65
+ border: 1px solid #2196f3;
66
+ }
67
+ .btn-reupload:hover {
68
+ background-color: transparent;
69
+ border: 1px solid #2196f3;
70
+ }
71
+ .btn-next {
72
+ background-color: #4caf50;
73
+ border: 1px solid #4caf50;
74
+ }
75
+ .btn-next:hover {
76
+ background-color: transparent;
77
+ border: 1px solid #4caf50;
78
+ }
79
+ .text-center {
80
+ text-align: center;
81
+ }
82
+ .top-right {
83
+ position: absolute;
84
+ top: 20px;
85
+ right: 20px;
86
+ }
87
+ .restart-button {
88
+ margin-top: 20px;
89
+ margin-left: 20px;
90
+ display: flex;
91
+ }
92
+ .help-message {
93
+ margin-top: 20px;
94
+ padding: 15px;
95
+ background-color: #33333359;
96
+ border-radius: 5px;
97
+ color: #e0e0e0;
98
+ text-align: left;
99
+ }
100
+ .guide {
101
+ background-color: #1e1e1e;
102
+ padding: 20px;
103
+ border-radius: 10px;
104
+ margin-top: 20px;
105
+ }
106
+ .guide-button {
107
+ position: fixed;
108
+ top: 20px;
109
+ right: 20px;
110
+ z-index: 1000;
111
+ }
112
+
113
+ .guide-button a {
114
+ font-size: 16px;
115
+ color: #17a2b8;
116
+ padding: 5px 10px;
117
+ border-radius: 5px;
118
+ text-decoration: none;
119
+ }
120
+
121
+ .guide-button a:hover {
122
+ background-color: #138496b9;
123
+ }
124
+
125
+ .fas.fa-info-circle {
126
+ margin-right: 5px;
127
+ }
128
+ </style>
129
+ </head>
130
+ <body>
131
+ <!-- Guide Button -->
132
+ <div class="guide-button">
133
+ <a href="{{ url_for('guide') }}" class="btn">
134
+ <i class="fas fa-info-circle"></i> Guide
135
+ </a>
136
+ </div>
137
+ <!-- Restart Form -->
138
+ <form action="{{ url_for('remove_files') }}" method="post">
139
+ <input type="hidden" name="folder_type" value="uploads" />
140
+ <div class="restart-button">
141
+ <button type="submit" class="btn btn-danger">
142
+ <i class="bi bi-arrow-clockwise"></i> Restart
143
+ </button>
144
+ </div>
145
+ </form>
146
+ <div class="container position-relative">
147
+ <!-- <div class="top-right">
148
+ <a href="{{ url_for('download_file') }}" class="btn btn-custom btn-download" title="Download the extracted text">
149
+ <i class="bi bi-download"></i> Download Extracted Text
150
+ </a>
151
+ </div> -->
152
+ <h1>Processed Text</h1>
153
+ <label for="edited_text">Edit Extracted Text:</label>
154
+ <!-- <p class="text-center">Below is the text extracted from your uploaded file. Please review it carefully and make any necessary corrections before proceeding to the next step.</p> -->
155
+ <form action="{{ url_for('save_and_download') }}" method="POST">
156
+ <div class="form-group">
157
+ <div class="progress">
158
+ <div
159
+ class="progress-bar"
160
+ role="progressbar"
161
+ style="width: 20%"
162
+ aria-valuenow="20"
163
+ aria-valuemin="0"
164
+ aria-valuemax="100"
165
+ >
166
+ Step 2 of 5
167
+ </div>
168
+ </div>
169
+ <textarea id="edited_text" name="edited_text" class="form-control">
170
+ {{ text }}</textarea
171
+ >
172
+ </div>
173
+ <button type="submit" class="btn btn-custom btn-download mb-4">
174
+ <i class="bi bi-download"></i> Save and Download
175
+ </button>
176
+ </form>
177
+ <div class="text-center mb-4">
178
+ <form action="{{ url_for('remove_file') }}" method="POST">
179
+ <button type="submit" class="btn btn-custom btn-reupload">
180
+ <i class="bi bi-upload"></i> Re-Upload
181
+ </button>
182
+ </form>
183
+ </div>
184
+ <div class="text-center mt-4">
185
+ <form action="{{ url_for('ner_preview') }}" method="GET">
186
+ <button type="submit" class="btn btn-custom btn-next">
187
+ <i class="bi bi-arrow-right"></i> Next
188
+ </button>
189
+ </form>
190
+ </div>
191
+ <div class="guide">
192
+ <h5>Instructions:</h5>
193
+ <ol>
194
+ <li>
195
+ Review the extracted text to ensure it accurately reflects the
196
+ content of your uploaded file. This preview is crucial for verifying
197
+ the data's correctness. If you notice any discrepancies or errors,
198
+ you can edit the text directly in the text area above.
199
+ </li>
200
+ <li>Download text file for further process</li>
201
+ </ol>
202
+ </div>
203
+ {% with messages = get_flashed_messages() %} {% if messages %}
204
+ <div class="alert alert-success mt-4" id="flash-message">
205
+ {{ messages[0] }} - You can now download your text or re-upload if
206
+ needed.
207
+ </div>
208
+ {% endif %} {% endwith %}
209
+ </div>
210
+
211
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
212
+ <script>
213
+ setTimeout(function () {
214
+ let flashMessage = document.getElementById("flash-message");
215
+ if (flashMessage) {
216
+ flashMessage.style.transition = "opacity 1s ease";
217
+ flashMessage.style.opacity = 0;
218
+ setTimeout(() => flashMessage.remove(), 1000);
219
+ }
220
+ }, 3000);
221
+ </script>
222
+ </body>
223
+ </html>
templates/upload.html ADDED
@@ -0,0 +1,266 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>File Uploader</title>
7
+ <link
8
+ href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
9
+ rel="stylesheet"
10
+ />
11
+ <link
12
+ href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.5/font/bootstrap-icons.min.css"
13
+ rel="stylesheet"
14
+ />
15
+ <link
16
+ rel="stylesheet"
17
+ href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
18
+ />
19
+ <style>
20
+ body {
21
+ background-color: #121212;
22
+ font-family: "Poppins", sans-serif;
23
+ color: #e0e0e0;
24
+ margin: 0;
25
+ padding: 0;
26
+ }
27
+ h1 {
28
+ color: #ffffff;
29
+ text-align: center;
30
+ margin: 50px 0 20px;
31
+ animation: fadeIn 1s ease;
32
+ }
33
+ .container {
34
+ max-width: 600px;
35
+ margin: 0 auto;
36
+ }
37
+ .file-upload-section {
38
+ background-color: #1e1e1e;
39
+ padding: 30px;
40
+ border-radius: 15px;
41
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
42
+ text-align: center;
43
+ position: relative;
44
+ animation: fadeInUp 1.5s ease;
45
+ }
46
+ .file-upload-section input[type="file"] {
47
+ background-color: #2c2c2c;
48
+ border: 1px solid #444;
49
+ color: #e0e0e0;
50
+ border-radius: 5px;
51
+ width: 100%;
52
+ margin-bottom: 20px;
53
+ /* padding: 10px; */
54
+ transition: background-color 0.3s ease;
55
+ }
56
+ .file-upload-section input[type="file"]:hover,
57
+ .file-upload-section input[type="file"]:focus {
58
+ background-color: #3a3a3a;
59
+ outline: none;
60
+ }
61
+ .file-upload-section button {
62
+ background-color: #4caf50;
63
+ color: white;
64
+ border: none;
65
+ padding: 10px 20px;
66
+ border-radius: 5px;
67
+ font-size: 16px;
68
+ cursor: pointer;
69
+ transition: background-color 0.3s ease, transform 0.3s ease;
70
+ display: flex;
71
+ align-items: center;
72
+ gap: 8px;
73
+ border: 1px solid #4caf50;
74
+ }
75
+ .file-upload-section button:hover,
76
+ .file-upload-section button:focus {
77
+ background-color: transparent;
78
+ border: 1px solid #4caf50;
79
+ }
80
+ .file-actions {
81
+ margin-top: 20px;
82
+ display: flex;
83
+ justify-content: space-around;
84
+ }
85
+ .alert {
86
+ text-align: center;
87
+ }
88
+ .instructions {
89
+ margin-top: 10px;
90
+ font-size: 14px;
91
+ color: #b0b0b0;
92
+ text-align: left;
93
+ }
94
+ .instructions strong {
95
+ color: #ffffff;
96
+ }
97
+ @media (max-width: 768px) {
98
+ .container {
99
+ padding: 20px;
100
+ }
101
+ }
102
+ .guide {
103
+ background-color: #1e1e1e;
104
+ padding: 20px;
105
+ border-radius: 10px;
106
+ margin-top: 20px;
107
+ }
108
+ .guide-button {
109
+ position: fixed;
110
+ top: 20px; /* Adjust the top margin as per your need */
111
+ right: 20px; /* Adjust the right margin as per your need */
112
+ z-index: 1000; /* Ensure the button is always on top */
113
+ }
114
+
115
+ .guide-button a {
116
+ font-size: 16px;
117
+ color: #17a2b8;
118
+ padding: 5px 10px;
119
+ border-radius: 5px;
120
+ text-decoration: none;
121
+ }
122
+
123
+ .guide-button a:hover {
124
+ background-color: #138496b9; /* Darken on hover */
125
+ }
126
+
127
+ .fas.fa-info-circle {
128
+ margin-right: 5px;
129
+ }
130
+ </style>
131
+ </head>
132
+ <body>
133
+ <!-- Guide Button -->
134
+ <div class="guide-button">
135
+ <a href="{{ url_for('guide') }}" class="btn">
136
+ <i class="fas fa-info-circle"></i> Guide
137
+ </a>
138
+ </div>
139
+
140
+ <div class="container">
141
+ <h1>Upload Your Resume</h1>
142
+ <p class="text-center text-secondary">
143
+ Welcome! Please select a Resume to upload.
144
+ </p>
145
+
146
+ <div class="progress">
147
+ <div
148
+ class="progress-bar"
149
+ role="progressbar"
150
+ style="width: 10%"
151
+ aria-valuenow="10"
152
+ aria-valuemin="0"
153
+ aria-valuemax="100"
154
+ >
155
+ Step 1 of 5
156
+ </div>
157
+ </div>
158
+ <div class="file-upload-section">
159
+ <form
160
+ action="{{ url_for('upload_file') }}"
161
+ method="POST"
162
+ enctype="multipart/form-data"
163
+ id="file-upload-form"
164
+ >
165
+ <input
166
+ type="file"
167
+ name="file"
168
+ class="form-control"
169
+ id="file-input"
170
+ required
171
+ />
172
+ <button type="submit" class="btn btn-custom">
173
+ <i class="bi bi-cloud-upload"></i> Upload & Extract Text
174
+ </button>
175
+ <div class="instructions mt-3">
176
+ <p>
177
+ <strong>Supported Formats:</strong> PDF, DOCX, RSF, ODT, PNG, JPG,
178
+ JPEG
179
+ </p>
180
+ <p><strong>File Size Limit:</strong> 5MB</p>
181
+ <p>
182
+ Please ensure the file is correctly formatted before uploading.
183
+ </p>
184
+ </div>
185
+ </form>
186
+
187
+ {% if session.get('uploaded_file') %}
188
+ <p class="mt-4">
189
+ Uploaded:
190
+ <span class="text-danger">{{ session.get('uploaded_file') }}</span>
191
+ </p>
192
+ <div class="file-actions">
193
+ <form action="{{ url_for('remove_file') }}" method="post">
194
+ <button type="submit" class="btn btn-outline-danger">
195
+ <i class="bi bi-trash"></i> Remove Uploaded File
196
+ </button>
197
+ </form>
198
+ </div>
199
+ {% endif %}
200
+ </div>
201
+
202
+ {% with messages = get_flashed_messages() %} {% if messages %}
203
+ <div class="alert alert-success mt-4" id="flash-message">
204
+ {{ messages[0] }}
205
+ </div>
206
+ {% endif %} {% endwith %}
207
+
208
+
209
+
210
+ <div class="guide">
211
+ <h5>Instructions:</h5>
212
+ <ol class="">
213
+ <li>Select a file from your device.</li>
214
+ <li>Click the "Upload & Extract Text" button.</li>
215
+ <li>
216
+ Once uploaded, you can view the extracted text and download it.
217
+ </li>
218
+ <li>
219
+ If needed, remove the uploaded file using the "Remove Uploaded File"
220
+ button.
221
+ </li>
222
+ </ol>
223
+ </div>
224
+ </div>
225
+
226
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
227
+
228
+ <script>
229
+ document.querySelector("form").addEventListener("submit", function (e) {
230
+ const fileInput = document.querySelector("#file-input");
231
+ const file = fileInput.files[0];
232
+ const allowedTypes = [
233
+ "application/pdf",
234
+ "application/msword",
235
+ "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
236
+ "image/png",
237
+ "image/jpeg",
238
+ "application/json",
239
+ "application/vnd.oasis.opendocument.text",
240
+ "text/plain",
241
+ ];
242
+ const maxSize = 5 * 1024 * 1024; // 5MB size limit
243
+
244
+ if (!allowedTypes.includes(file.type)) {
245
+ e.preventDefault();
246
+ alert(
247
+ "Only PDF, DOCX, RSF, ODT, PNG, JPG, JPEG, and JSON files are allowed."
248
+ );
249
+ } else if (file.size > maxSize) {
250
+ e.preventDefault();
251
+ alert("File size must be less than 5MB.");
252
+ }
253
+ });
254
+
255
+ // Close flash messages after a timeout
256
+ setTimeout(function () {
257
+ let flashMessage = document.getElementById("flash-message");
258
+ if (flashMessage) {
259
+ flashMessage.style.transition = "opacity 1s ease";
260
+ flashMessage.style.opacity = 0;
261
+ setTimeout(() => flashMessage.remove(), 1000);
262
+ }
263
+ }, 3000);
264
+ </script>
265
+ </body>
266
+ </html>