Hugging Face's logo

Spaces:
Upflowy
/
pagesets-labelling-tool
Running

App Files Community
franco-upflowy commited on
Commit
b161eab
·
verified ·
1 Parent(s): c5f4028

fix navbar

Browse files
Files changed (1) hide show
  1. index.html +38 -51
index.html CHANGED
@@ -1,6 +1,5 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
-
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -13,44 +12,47 @@
13
  padding: 20px;
14
  background: #f5f5f5;
15
  }
16
-
17
  .title {
18
  font-size: 24px;
19
  font-weight: bold;
20
  margin-bottom: 20px;
21
  color: #1a1a1a;
22
  }
23
-
24
  .controls {
25
  margin-bottom: 20px;
26
  padding: 15px;
27
  background: white;
28
  border-radius: 8px;
29
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
30
  display: flex;
31
  justify-content: space-between;
32
  align-items: center;
33
  }
34
-
35
  .file-controls {
36
  display: flex;
37
  align-items: center;
38
  gap: 10px;
39
  }
40
-
41
- .action-buttons {
42
- display: flex;
43
- gap: 10px;
 
 
44
  }
45
-
46
  .tab-list {
47
  display: flex;
48
  gap: 10px;
49
  margin-bottom: 20px;
50
  overflow-x: auto;
51
- padding-bottom: 10px;
 
 
 
 
 
 
52
  }
53
-
54
  .tab {
55
  padding: 8px 16px;
56
  border: none;
@@ -59,33 +61,28 @@
59
  cursor: pointer;
60
  white-space: nowrap;
61
  }
62
-
63
  .tab.active {
64
  background: #2196F3;
65
  color: white;
66
  }
67
-
68
  .card {
69
  background: white;
70
  padding: 20px;
71
  margin-bottom: 15px;
72
  border-radius: 8px;
73
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
74
  }
75
-
76
  .text-field {
77
  background: #f5f5f5;
78
  padding: 10px;
79
  margin: 5px 0;
80
  border-radius: 4px;
81
  }
82
-
83
  .label {
84
  font-weight: 600;
85
  margin-bottom: 5px;
86
  display: block;
87
  }
88
-
89
  .thumbs-down {
90
  padding: 8px;
91
  background: none;
@@ -94,12 +91,10 @@
94
  cursor: pointer;
95
  margin-right: 10px;
96
  }
97
-
98
  .thumbs-down.active {
99
  color: red;
100
  border-color: red;
101
  }
102
-
103
  .correction-input {
104
  width: 100%;
105
  padding: 8px;
@@ -108,7 +103,6 @@
108
  border-radius: 4px;
109
  box-sizing: border-box;
110
  }
111
-
112
  .button {
113
  padding: 8px 16px;
114
  background: #2196F3;
@@ -118,33 +112,26 @@
118
  cursor: pointer;
119
  margin-left: 10px;
120
  }
121
-
122
  .button:hover {
123
  background: #1976D2;
124
  }
125
-
126
  .reset-button {
127
  background: #dc3545;
128
  }
129
-
130
  .reset-button:hover {
131
  background: #c82333;
132
  }
133
-
134
  .correction-container {
135
  margin-top: 10px;
136
  }
137
-
138
  .hidden {
139
  display: none;
140
  }
141
-
142
  .highlight {
143
  background-color: #fff3cd;
144
  padding: 2px 4px;
145
  border-radius: 2px;
146
  }
147
-
148
  .differences {
149
  margin-top: 10px;
150
  padding: 10px;
@@ -154,7 +141,6 @@
154
  }
155
  </style>
156
  </head>
157
-
158
  <body>
159
  <h1 class="title">Pagsets Labelling</h1>
160
  <div class="controls">
@@ -166,8 +152,10 @@
166
  <button id="resetBtn" class="button reset-button">Reset</button>
167
  </div>
168
  </div>
169
- <div id="tabContainer" class="tab-list"></div>
170
- <div id="contentContainer"></div>
 
 
171
 
172
  <script>
173
  let data = {};
@@ -313,11 +301,11 @@
313
  }
314
 
315
  function getVariantIds() {
316
- return Object.keys(data).filter(key =>
317
- !key.includes('_feedback') &&
318
- !key.includes('_correct') &&
319
- key !== 'node' &&
320
- key !== 'textValue' &&
321
  key !== 'variantNodeId'
322
  );
323
  }
@@ -330,7 +318,7 @@
330
  function renderTabs() {
331
  const tabContainer = document.getElementById('tabContainer');
332
  tabContainer.innerHTML = '';
333
-
334
  getVariantIds().forEach(variantId => {
335
  const tab = document.createElement('button');
336
  tab.className = `tab ${activeTab === variantId ? 'active' : ''}`;
@@ -354,14 +342,14 @@
354
  Object.keys(data.textValue || {}).forEach(rowIndex => {
355
  const card = document.createElement('div');
356
  card.className = 'card';
357
-
358
  // Original text
359
  const originalText = document.createElement('div');
360
  originalText.innerHTML = `
361
  <span class="label">Original Text:</span>
362
  <div class="text-field">${data.textValue[rowIndex]}</div>
363
  `;
364
-
365
  // Variant text with differences
366
  const variantText = document.createElement('div');
367
  const markedDifferences = markBlueprintTextDifferences(
@@ -370,7 +358,7 @@
370
  );
371
  const escapedDifferences = escapeHtml(markedDifferences);
372
  const renderedDifferences = renderMarkerText(escapedDifferences);
373
-
374
  variantText.innerHTML = `
375
  <span class="label">Variant Text:</span>
376
  <div class="text-field">${renderedDifferences}</div>
@@ -386,20 +374,20 @@
386
  );
387
  const newEscapedDifferences = escapeHtml(newMarkedDifferences);
388
  const newRenderedDifferences = renderMarkerText(newEscapedDifferences);
389
-
390
  newText.innerHTML = `
391
  <span class="label">New Text:</span>
392
  <div class="text-field">${newRenderedDifferences}</div>
393
  `;
394
  }
395
-
396
  // Feedback section
397
  const feedbackSection = document.createElement('div');
398
  const thumbsDown = document.createElement('button');
399
  thumbsDown.className = `thumbs-down ${data[`${activeTab}_feedback`]?.[rowIndex] === false ? 'active' : ''}`;
400
  thumbsDown.innerHTML = '👎';
401
  thumbsDown.onclick = () => handleThumbsDown(rowIndex);
402
-
403
  // Correction input
404
  const correctionContainer = document.createElement('div');
405
  correctionContainer.className = `correction-container ${data[`${activeTab}_feedback`]?.[rowIndex] === false ? '' : 'hidden'}`;
@@ -412,14 +400,14 @@
412
  placeholder="Enter correction here"
413
  >${data[`${activeTab}_correct`]?.[rowIndex] || ''}</textarea>
414
  `;
415
-
416
  // Add event listener to correction input
417
  const correctionInput = correctionContainer.querySelector('textarea');
418
  correctionInput.onchange = (e) => handleCorrection(rowIndex, e.target.value);
419
-
420
  feedbackSection.appendChild(thumbsDown);
421
  feedbackSection.appendChild(correctionContainer);
422
-
423
  // Append all elements to card
424
  card.appendChild(originalText);
425
  card.appendChild(variantText);
@@ -427,7 +415,7 @@
427
  card.appendChild(newText);
428
  }
429
  card.appendChild(feedbackSection);
430
-
431
  contentContainer.appendChild(card);
432
  });
433
  }
@@ -437,14 +425,14 @@
437
  data[`${activeTab}_feedback`] = {};
438
  }
439
  data[`${activeTab}_feedback`][rowIndex] = !data[`${activeTab}_feedback`][rowIndex];
440
-
441
  if (!data[`${activeTab}_correct`]) {
442
  data[`${activeTab}_correct`] = {};
443
  }
444
  if (!data[`${activeTab}_feedback`][rowIndex]) {
445
  data[`${activeTab}_correct`][rowIndex] = data[activeTab][rowIndex];
446
  }
447
-
448
  renderContent();
449
  }
450
 
@@ -457,7 +445,7 @@
457
 
458
  function handleDownload() {
459
  if (!originalFileName) return;
460
-
461
  const jsonString = JSON.stringify(data, null, 2);
462
  const blob = new Blob([jsonString], { type: 'application/json' });
463
  const url = URL.createObjectURL(blob);
@@ -471,5 +459,4 @@
471
  }
472
  </script>
473
  </body>
474
-
475
  </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">
 
12
  padding: 20px;
13
  background: #f5f5f5;
14
  }
 
15
  .title {
16
  font-size: 24px;
17
  font-weight: bold;
18
  margin-bottom: 20px;
19
  color: #1a1a1a;
20
  }
 
21
  .controls {
22
  margin-bottom: 20px;
23
  padding: 15px;
24
  background: white;
25
  border-radius: 8px;
26
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
27
  display: flex;
28
  justify-content: space-between;
29
  align-items: center;
30
  }
 
31
  .file-controls {
32
  display: flex;
33
  align-items: center;
34
  gap: 10px;
35
  }
36
+ #contentWrapper {
37
+ position: relative;
38
+ margin-top: 20px;
39
+ }
40
+ #contentContainer {
41
+ padding-top: 10px;
42
  }
 
43
  .tab-list {
44
  display: flex;
45
  gap: 10px;
46
  margin-bottom: 20px;
47
  overflow-x: auto;
48
+ padding: 10px;
49
+ background: white;
50
+ position: sticky;
51
+ top: 0;
52
+ z-index: 100;
53
+ border-bottom: 1px solid #e0e0e0;
54
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
55
  }
 
56
  .tab {
57
  padding: 8px 16px;
58
  border: none;
 
61
  cursor: pointer;
62
  white-space: nowrap;
63
  }
 
64
  .tab.active {
65
  background: #2196F3;
66
  color: white;
67
  }
 
68
  .card {
69
  background: white;
70
  padding: 20px;
71
  margin-bottom: 15px;
72
  border-radius: 8px;
73
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
74
  }
 
75
  .text-field {
76
  background: #f5f5f5;
77
  padding: 10px;
78
  margin: 5px 0;
79
  border-radius: 4px;
80
  }
 
81
  .label {
82
  font-weight: 600;
83
  margin-bottom: 5px;
84
  display: block;
85
  }
 
86
  .thumbs-down {
87
  padding: 8px;
88
  background: none;
 
91
  cursor: pointer;
92
  margin-right: 10px;
93
  }
 
94
  .thumbs-down.active {
95
  color: red;
96
  border-color: red;
97
  }
 
98
  .correction-input {
99
  width: 100%;
100
  padding: 8px;
 
103
  border-radius: 4px;
104
  box-sizing: border-box;
105
  }
 
106
  .button {
107
  padding: 8px 16px;
108
  background: #2196F3;
 
112
  cursor: pointer;
113
  margin-left: 10px;
114
  }
 
115
  .button:hover {
116
  background: #1976D2;
117
  }
 
118
  .reset-button {
119
  background: #dc3545;
120
  }
 
121
  .reset-button:hover {
122
  background: #c82333;
123
  }
 
124
  .correction-container {
125
  margin-top: 10px;
126
  }
 
127
  .hidden {
128
  display: none;
129
  }
 
130
  .highlight {
131
  background-color: #fff3cd;
132
  padding: 2px 4px;
133
  border-radius: 2px;
134
  }
 
135
  .differences {
136
  margin-top: 10px;
137
  padding: 10px;
 
141
  }
142
  </style>
143
  </head>
 
144
  <body>
145
  <h1 class="title">Pagsets Labelling</h1>
146
  <div class="controls">
 
152
  <button id="resetBtn" class="button reset-button">Reset</button>
153
  </div>
154
  </div>
155
+ <div id="contentWrapper">
156
+ <div id="tabContainer" class="tab-list"></div>
157
+ <div id="contentContainer"></div>
158
+ </div>
159
 
160
  <script>
161
  let data = {};
 
301
  }
302
 
303
  function getVariantIds() {
304
+ return Object.keys(data).filter(key =>
305
+ !key.includes('_feedback') &&
306
+ !key.includes('_correct') &&
307
+ key !== 'node' &&
308
+ key !== 'textValue' &&
309
  key !== 'variantNodeId'
310
  );
311
  }
 
318
  function renderTabs() {
319
  const tabContainer = document.getElementById('tabContainer');
320
  tabContainer.innerHTML = '';
321
+
322
  getVariantIds().forEach(variantId => {
323
  const tab = document.createElement('button');
324
  tab.className = `tab ${activeTab === variantId ? 'active' : ''}`;
 
342
  Object.keys(data.textValue || {}).forEach(rowIndex => {
343
  const card = document.createElement('div');
344
  card.className = 'card';
345
+
346
  // Original text
347
  const originalText = document.createElement('div');
348
  originalText.innerHTML = `
349
  <span class="label">Original Text:</span>
350
  <div class="text-field">${data.textValue[rowIndex]}</div>
351
  `;
352
+
353
  // Variant text with differences
354
  const variantText = document.createElement('div');
355
  const markedDifferences = markBlueprintTextDifferences(
 
358
  );
359
  const escapedDifferences = escapeHtml(markedDifferences);
360
  const renderedDifferences = renderMarkerText(escapedDifferences);
361
+
362
  variantText.innerHTML = `
363
  <span class="label">Variant Text:</span>
364
  <div class="text-field">${renderedDifferences}</div>
 
374
  );
375
  const newEscapedDifferences = escapeHtml(newMarkedDifferences);
376
  const newRenderedDifferences = renderMarkerText(newEscapedDifferences);
377
+
378
  newText.innerHTML = `
379
  <span class="label">New Text:</span>
380
  <div class="text-field">${newRenderedDifferences}</div>
381
  `;
382
  }
383
+
384
  // Feedback section
385
  const feedbackSection = document.createElement('div');
386
  const thumbsDown = document.createElement('button');
387
  thumbsDown.className = `thumbs-down ${data[`${activeTab}_feedback`]?.[rowIndex] === false ? 'active' : ''}`;
388
  thumbsDown.innerHTML = '👎';
389
  thumbsDown.onclick = () => handleThumbsDown(rowIndex);
390
+
391
  // Correction input
392
  const correctionContainer = document.createElement('div');
393
  correctionContainer.className = `correction-container ${data[`${activeTab}_feedback`]?.[rowIndex] === false ? '' : 'hidden'}`;
 
400
  placeholder="Enter correction here"
401
  >${data[`${activeTab}_correct`]?.[rowIndex] || ''}</textarea>
402
  `;
403
+
404
  // Add event listener to correction input
405
  const correctionInput = correctionContainer.querySelector('textarea');
406
  correctionInput.onchange = (e) => handleCorrection(rowIndex, e.target.value);
407
+
408
  feedbackSection.appendChild(thumbsDown);
409
  feedbackSection.appendChild(correctionContainer);
410
+
411
  // Append all elements to card
412
  card.appendChild(originalText);
413
  card.appendChild(variantText);
 
415
  card.appendChild(newText);
416
  }
417
  card.appendChild(feedbackSection);
418
+
419
  contentContainer.appendChild(card);
420
  });
421
  }
 
425
  data[`${activeTab}_feedback`] = {};
426
  }
427
  data[`${activeTab}_feedback`][rowIndex] = !data[`${activeTab}_feedback`][rowIndex];
428
+
429
  if (!data[`${activeTab}_correct`]) {
430
  data[`${activeTab}_correct`] = {};
431
  }
432
  if (!data[`${activeTab}_feedback`][rowIndex]) {
433
  data[`${activeTab}_correct`][rowIndex] = data[activeTab][rowIndex];
434
  }
435
+
436
  renderContent();
437
  }
438
 
 
445
 
446
  function handleDownload() {
447
  if (!originalFileName) return;
448
+
449
  const jsonString = JSON.stringify(data, null, 2);
450
  const blob = new Blob([jsonString], { type: 'application/json' });
451
  const url = URL.createObjectURL(blob);
 
459
  }
460
  </script>
461
  </body>
 
462
  </html>