Hugging Face's logo

Spaces:
Upflowy
/
pagesets-labelling-tool
Running

App Files Community
franco-upflowy commited on
Commit
5d2c817
·
verified ·
1 Parent(s): e7d75ba

add resizable text boxes

Browse files
Files changed (1) hide show
  1. index.html +25 -49
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,36 +12,31 @@
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;
@@ -50,7 +44,6 @@
50
  overflow-x: auto;
51
  padding-bottom: 10px;
52
  }
53
-
54
  .tab {
55
  padding: 8px 16px;
56
  border: none;
@@ -59,33 +52,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 +82,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 +94,6 @@
108
  border-radius: 4px;
109
  box-sizing: border-box;
110
  }
111
-
112
  .button {
113
  padding: 8px 16px;
114
  background: #2196F3;
@@ -118,33 +103,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 +132,6 @@
154
  }
155
  </style>
156
  </head>
157
-
158
  <body>
159
  <h1 class="title">Pagsets Labelling</h1>
160
  <div class="controls">
@@ -313,11 +290,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 +307,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 +331,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,44 +347,44 @@
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>
377
  `;
378
-
379
  // Feedback section
380
  const feedbackSection = document.createElement('div');
381
  const thumbsDown = document.createElement('button');
382
  thumbsDown.className = `thumbs-down ${data[`${activeTab}_feedback`]?.[rowIndex] === false ? 'active' : ''}`;
383
  thumbsDown.innerHTML = '👎';
384
  thumbsDown.onclick = () => handleThumbsDown(rowIndex);
385
-
386
  // Correction input
387
  const correctionContainer = document.createElement('div');
388
  correctionContainer.className = `correction-container ${data[`${activeTab}_feedback`]?.[rowIndex] === false ? '' : 'hidden'}`;
389
  correctionContainer.innerHTML = `
390
  <span class="label">Correction:</span>
391
- <input
392
- type="text"
393
  class="correction-input"
394
- value="${data[`${activeTab}_correct`]?.[rowIndex] || ''}"
 
395
  placeholder="Enter correction here"
396
- >
397
  `;
398
-
399
  // Add event listener to correction input
400
- const correctionInput = correctionContainer.querySelector('input');
401
  correctionInput.onchange = (e) => handleCorrection(rowIndex, e.target.value);
402
-
403
  feedbackSection.appendChild(thumbsDown);
404
  feedbackSection.appendChild(correctionContainer);
405
-
406
  // Append all elements to card
407
  card.appendChild(originalText);
408
  card.appendChild(variantText);
409
  card.appendChild(feedbackSection);
410
-
411
  contentContainer.appendChild(card);
412
  });
413
  }
@@ -417,14 +394,14 @@
417
  data[`${activeTab}_feedback`] = {};
418
  }
419
  data[`${activeTab}_feedback`][rowIndex] = !data[`${activeTab}_feedback`][rowIndex];
420
-
421
  if (!data[`${activeTab}_correct`]) {
422
  data[`${activeTab}_correct`] = {};
423
  }
424
  if (!data[`${activeTab}_feedback`][rowIndex]) {
425
  data[`${activeTab}_correct`][rowIndex] = data[activeTab][rowIndex];
426
  }
427
-
428
  renderContent();
429
  }
430
 
@@ -437,7 +414,7 @@
437
 
438
  function handleDownload() {
439
  if (!originalFileName) return;
440
-
441
  const jsonString = JSON.stringify(data, null, 2);
442
  const blob = new Blob([jsonString], { type: 'application/json' });
443
  const url = URL.createObjectURL(blob);
@@ -451,5 +428,4 @@
451
  }
452
  </script>
453
  </body>
454
-
455
  </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
  .action-buttons {
37
  display: flex;
38
  gap: 10px;
39
  }
 
40
  .tab-list {
41
  display: flex;
42
  gap: 10px;
 
44
  overflow-x: auto;
45
  padding-bottom: 10px;
46
  }
 
47
  .tab {
48
  padding: 8px 16px;
49
  border: none;
 
52
  cursor: pointer;
53
  white-space: nowrap;
54
  }
 
55
  .tab.active {
56
  background: #2196F3;
57
  color: white;
58
  }
 
59
  .card {
60
  background: white;
61
  padding: 20px;
62
  margin-bottom: 15px;
63
  border-radius: 8px;
64
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
65
  }
 
66
  .text-field {
67
  background: #f5f5f5;
68
  padding: 10px;
69
  margin: 5px 0;
70
  border-radius: 4px;
71
  }
 
72
  .label {
73
  font-weight: 600;
74
  margin-bottom: 5px;
75
  display: block;
76
  }
 
77
  .thumbs-down {
78
  padding: 8px;
79
  background: none;
 
82
  cursor: pointer;
83
  margin-right: 10px;
84
  }
 
85
  .thumbs-down.active {
86
  color: red;
87
  border-color: red;
88
  }
 
89
  .correction-input {
90
  width: 100%;
91
  padding: 8px;
 
94
  border-radius: 4px;
95
  box-sizing: border-box;
96
  }
 
97
  .button {
98
  padding: 8px 16px;
99
  background: #2196F3;
 
103
  cursor: pointer;
104
  margin-left: 10px;
105
  }
 
106
  .button:hover {
107
  background: #1976D2;
108
  }
 
109
  .reset-button {
110
  background: #dc3545;
111
  }
 
112
  .reset-button:hover {
113
  background: #c82333;
114
  }
 
115
  .correction-container {
116
  margin-top: 10px;
117
  }
 
118
  .hidden {
119
  display: none;
120
  }
 
121
  .highlight {
122
  background-color: #fff3cd;
123
  padding: 2px 4px;
124
  border-radius: 2px;
125
  }
 
126
  .differences {
127
  margin-top: 10px;
128
  padding: 10px;
 
132
  }
133
  </style>
134
  </head>
 
135
  <body>
136
  <h1 class="title">Pagsets Labelling</h1>
137
  <div class="controls">
 
290
  }
291
 
292
  function getVariantIds() {
293
+ return Object.keys(data).filter(key =>
294
+ !key.includes('_feedback') &&
295
+ !key.includes('_correct') &&
296
+ key !== 'node' &&
297
+ key !== 'textValue' &&
298
  key !== 'variantNodeId'
299
  );
300
  }
 
307
  function renderTabs() {
308
  const tabContainer = document.getElementById('tabContainer');
309
  tabContainer.innerHTML = '';
310
+
311
  getVariantIds().forEach(variantId => {
312
  const tab = document.createElement('button');
313
  tab.className = `tab ${activeTab === variantId ? 'active' : ''}`;
 
331
  Object.keys(data.textValue || {}).forEach(rowIndex => {
332
  const card = document.createElement('div');
333
  card.className = 'card';
334
+
335
  // Original text
336
  const originalText = document.createElement('div');
337
  originalText.innerHTML = `
338
  <span class="label">Original Text:</span>
339
  <div class="text-field">${data.textValue[rowIndex]}</div>
340
  `;
341
+
342
  // Variant text with differences
343
  const variantText = document.createElement('div');
344
  const markedDifferences = markBlueprintTextDifferences(
 
347
  );
348
  const escapedDifferences = escapeHtml(markedDifferences);
349
  const renderedDifferences = renderMarkerText(escapedDifferences);
350
+
351
  variantText.innerHTML = `
352
  <span class="label">Variant Text:</span>
353
  <div class="text-field">${renderedDifferences}</div>
354
  `;
355
+
356
  // Feedback section
357
  const feedbackSection = document.createElement('div');
358
  const thumbsDown = document.createElement('button');
359
  thumbsDown.className = `thumbs-down ${data[`${activeTab}_feedback`]?.[rowIndex] === false ? 'active' : ''}`;
360
  thumbsDown.innerHTML = '👎';
361
  thumbsDown.onclick = () => handleThumbsDown(rowIndex);
362
+
363
  // Correction input
364
  const correctionContainer = document.createElement('div');
365
  correctionContainer.className = `correction-container ${data[`${activeTab}_feedback`]?.[rowIndex] === false ? '' : 'hidden'}`;
366
  correctionContainer.innerHTML = `
367
  <span class="label">Correction:</span>
368
+ <textarea
 
369
  class="correction-input"
370
+ rows="3"
371
+ style="resize: vertical;"
372
  placeholder="Enter correction here"
373
+ >${data[`${activeTab}_correct`]?.[rowIndex] || ''}</textarea>
374
  `;
375
+
376
  // Add event listener to correction input
377
+ const correctionInput = correctionContainer.querySelector('textarea');
378
  correctionInput.onchange = (e) => handleCorrection(rowIndex, e.target.value);
379
+
380
  feedbackSection.appendChild(thumbsDown);
381
  feedbackSection.appendChild(correctionContainer);
382
+
383
  // Append all elements to card
384
  card.appendChild(originalText);
385
  card.appendChild(variantText);
386
  card.appendChild(feedbackSection);
387
+
388
  contentContainer.appendChild(card);
389
  });
390
  }
 
394
  data[`${activeTab}_feedback`] = {};
395
  }
396
  data[`${activeTab}_feedback`][rowIndex] = !data[`${activeTab}_feedback`][rowIndex];
397
+
398
  if (!data[`${activeTab}_correct`]) {
399
  data[`${activeTab}_correct`] = {};
400
  }
401
  if (!data[`${activeTab}_feedback`][rowIndex]) {
402
  data[`${activeTab}_correct`][rowIndex] = data[activeTab][rowIndex];
403
  }
404
+
405
  renderContent();
406
  }
407
 
 
414
 
415
  function handleDownload() {
416
  if (!originalFileName) return;
417
+
418
  const jsonString = JSON.stringify(data, null, 2);
419
  const blob = new Blob([jsonString], { type: 'application/json' });
420
  const url = URL.createObjectURL(blob);
 
428
  }
429
  </script>
430
  </body>
 
431
  </html>