Hugging Face's logo

Spaces:
WebashalarForML
/
SpacyModelCreator
Runtime error

App Files Community
1
WebashalarForML commited on
Commit
5b6272b
·
verified ·
1 Parent(s): 9b278f5

Upload 6 files

Browse files
Files changed (2) hide show
  1. templates/text.html +223 -223
  2. templates/upload.html +266 -266
templates/text.html CHANGED
@@ -1,223 +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_file') }}" 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>
 
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 CHANGED
@@ -1,266 +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>
 
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>