Hugging Face's logo

Spaces:
WebashalarForML
/
SpacyModelCreator
Sleeping

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

Update templates/anoter.html

Browse files
Files changed (1) hide show
  1. templates/anoter.html +181 -180
templates/anoter.html CHANGED
@@ -1,180 +1,181 @@
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>
 
 
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
+ <iframe src="https://tecoholic.github.io/ner-annotator/" title="NER Annotator" sandbox="allow-scripts allow-same-origin"></iframe>
142
+ </div>
143
+
144
+
145
+
146
+ {% with messages = get_flashed_messages() %}
147
+ {% if messages %}
148
+ <div class="alert alert-success mt-4" id="flash-message">{{ messages[0] }}</div>
149
+ {% endif %}
150
+ {% endwith %}
151
+ <div class="text-center mt-4">
152
+ <form action="{{ url_for('json_file') }}" method="GET">
153
+ <button type="submit" class="btn btn-custom btn-next">
154
+ <i class="bi bi-arrow-right"></i> Next
155
+ </button>
156
+ </form>
157
+ </div>
158
+ <div class="guide">
159
+ <h5>Instructions:</h5>
160
+ <ol>
161
+ <li>Load Downloded text file and click on 'Begin!'</li>
162
+ <li>Add new lebel and select text as per lebel and save it</li>
163
+ <li>for Dwonload Annoted json file click on top 'Annotations' > 'Export'</li>
164
+ <li>Click 'Next' for Formatting</li>
165
+ </ol>
166
+ </div>
167
+ </div>
168
+
169
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
170
+ <script>
171
+ setTimeout(function() {
172
+ let flashMessage = document.getElementById('flash-message');
173
+ if (flashMessage) {
174
+ flashMessage.style.transition = 'opacity 1s ease';
175
+ flashMessage.style.opacity = 0;
176
+ setTimeout(() => flashMessage.remove(), 1000);
177
+ }
178
+ }, 10000000);
179
+ </script>
180
+ </body>
181
+ </html>