Spaces:

Upflowy
/

pagesets-labelling-tool

Running

App Files Files Community

franco-upflowy commited on Feb 3, 2025

Commit

c3c6390

verified ·

1 Parent(s): 157b468

include string diff

Browse files

Files changed (1) hide show

index.html +151 -44

index.html CHANGED Viewed

@@ -1,10 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Pagesets Labelling</title>
     <style>
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
@@ -13,31 +12,27 @@
             padding: 20px;
             background: #f5f5f5;
         }
         .title {
             font-size: 24px;
             font-weight: bold;
             margin-bottom: 20px;
             color: #1a1a1a;
         }
         .controls {
             margin-bottom: 20px;
             padding: 15px;
             background: white;
             border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
             display: flex;
             justify-content: space-between;
             align-items: center;
         }
         .file-controls {
             display: flex;
             align-items: center;
             gap: 10px;
         }
         .tab-list {
             display: flex;
             gap: 10px;
@@ -45,7 +40,6 @@
             overflow-x: auto;
             padding-bottom: 10px;
         }
         .tab {
             padding: 8px 16px;
             border: none;
@@ -54,33 +48,28 @@
             cursor: pointer;
             white-space: nowrap;
         }
         .tab.active {
             background: #2196F3;
             color: white;
         }
         .card {
             background: white;
             padding: 20px;
             margin-bottom: 15px;
             border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
         }
         .text-field {
             background: #f5f5f5;
             padding: 10px;
             margin: 5px 0;
             border-radius: 4px;
         }
         .label {
             font-weight: 600;
             margin-bottom: 5px;
             display: block;
         }
         .thumbs-down {
             padding: 8px;
             background: none;
@@ -89,12 +78,10 @@
             cursor: pointer;
             margin-right: 10px;
         }
         .thumbs-down.active {
             color: red;
             border-color: red;
         }
         .correction-input {
             width: 100%;
             padding: 8px;
@@ -103,7 +90,6 @@
             border-radius: 4px;
             box-sizing: border-box;
         }
         .button {
             padding: 8px 16px;
             background: #2196F3;
@@ -113,31 +99,37 @@
             cursor: pointer;
             margin-left: 10px;
         }
         .button:hover {
             background: #1976D2;
         }
         .reset-button {
             background: #dc3545;
         }
         .reset-button:hover {
             background: #c82333;
         }
         .correction-container {
             margin-top: 10px;
         }
         .hidden {
             display: none;
         }
     </style>
 </head>
 <body>
-    <h1 class="title">Pagesets Labelling</h1>
     <div class="controls">
         <div class="file-controls">
             <input type="file" id="fileInput" accept=".json">
@@ -153,6 +145,115 @@
         let activeTab = '';
         let originalFileName = '';
         document.getElementById('fileInput').addEventListener('change', handleFileUpload);
         document.getElementById('downloadBtn').addEventListener('click', handleDownload);
         document.getElementById('resetBtn').addEventListener('click', handleReset);
@@ -183,11 +284,11 @@
         }
         function getVariantIds() {
-            return Object.keys(data).filter(key =>
-                !key.includes('_feedback') &&
-                !key.includes('_correct') &&
-                key !== 'node' &&
-                key !== 'textValue' &&
                 key !== 'variantNodeId'
             );
         }
@@ -200,7 +301,7 @@
         function renderTabs() {
             const tabContainer = document.getElementById('tabContainer');
             tabContainer.innerHTML = '';
             getVariantIds().forEach(variantId => {
                 const tab = document.createElement('button');
                 tab.className = `tab ${activeTab === variantId ? 'active' : ''}`;
@@ -222,28 +323,35 @@
             Object.keys(data.textValue || {}).forEach(rowIndex => {
                 const card = document.createElement('div');
                 card.className = 'card';
                 // Original text
                 const originalText = document.createElement('div');
                 originalText.innerHTML = `
                     <span class="label">Original Text:</span>
                     <div class="text-field">${data.textValue[rowIndex]}</div>
                 `;
-                // Variant text
                 const variantText = document.createElement('div');
                 variantText.innerHTML = `
                     <span class="label">Variant Text:</span>
-                    <div class="text-field">${data[activeTab][rowIndex]}</div>
                 `;
                 // Feedback section
                 const feedbackSection = document.createElement('div');
                 const thumbsDown = document.createElement('button');
                 thumbsDown.className = `thumbs-down ${data[`${activeTab}_feedback`]?.[rowIndex] === false ? 'active' : ''}`;
                 thumbsDown.innerHTML = '👎';
                 thumbsDown.onclick = () => handleThumbsDown(rowIndex);
                 // Correction input
                 const correctionContainer = document.createElement('div');
                 correctionContainer.className = `correction-container ${data[`${activeTab}_feedback`]?.[rowIndex] === false ? '' : 'hidden'}`;
@@ -256,19 +364,19 @@
                         placeholder="Enter correction here"
                     >
                 `;
                 // Add event listener to correction input
                 const correctionInput = correctionContainer.querySelector('input');
                 correctionInput.onchange = (e) => handleCorrection(rowIndex, e.target.value);
                 feedbackSection.appendChild(thumbsDown);
                 feedbackSection.appendChild(correctionContainer);
                 // Append all elements to card
                 card.appendChild(originalText);
                 card.appendChild(variantText);
                 card.appendChild(feedbackSection);
                 contentContainer.appendChild(card);
             });
         }
@@ -278,14 +386,14 @@
                 data[`${activeTab}_feedback`] = {};
             }
             data[`${activeTab}_feedback`][rowIndex] = !data[`${activeTab}_feedback`][rowIndex];
             if (!data[`${activeTab}_correct`]) {
                 data[`${activeTab}_correct`] = {};
             }
             if (!data[`${activeTab}_feedback`][rowIndex]) {
                 data[`${activeTab}_correct`][rowIndex] = data[activeTab][rowIndex];
             }
             renderContent();
         }
@@ -298,7 +406,7 @@
         function handleDownload() {
             if (!originalFileName) return;
             const jsonString = JSON.stringify(data, null, 2);
             const blob = new Blob([jsonString], { type: 'application/json' });
             const url = URL.createObjectURL(blob);
@@ -312,5 +420,4 @@
         }
     </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pagsets Labelling</title>
     <style>
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
             padding: 20px;
             background: #f5f5f5;
         }
         .title {
             font-size: 24px;
             font-weight: bold;
             margin-bottom: 20px;
             color: #1a1a1a;
         }
         .controls {
             margin-bottom: 20px;
             padding: 15px;
             background: white;
             border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
             display: flex;
             justify-content: space-between;
             align-items: center;
         }
         .file-controls {
             display: flex;
             align-items: center;
             gap: 10px;
         }
         .tab-list {
             display: flex;
             gap: 10px;
             overflow-x: auto;
             padding-bottom: 10px;
         }
         .tab {
             padding: 8px 16px;
             border: none;
             cursor: pointer;
             white-space: nowrap;
         }
         .tab.active {
             background: #2196F3;
             color: white;
         }
         .card {
             background: white;
             padding: 20px;
             margin-bottom: 15px;
             border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
         }
         .text-field {
             background: #f5f5f5;
             padding: 10px;
             margin: 5px 0;
             border-radius: 4px;
         }
         .label {
             font-weight: 600;
             margin-bottom: 5px;
             display: block;
         }
         .thumbs-down {
             padding: 8px;
             background: none;
             cursor: pointer;
             margin-right: 10px;
         }
         .thumbs-down.active {
             color: red;
             border-color: red;
         }
         .correction-input {
             width: 100%;
             padding: 8px;
             border-radius: 4px;
             box-sizing: border-box;
         }
         .button {
             padding: 8px 16px;
             background: #2196F3;
             cursor: pointer;
             margin-left: 10px;
         }
         .button:hover {
             background: #1976D2;
         }
         .reset-button {
             background: #dc3545;
         }
         .reset-button:hover {
             background: #c82333;
         }
         .correction-container {
             margin-top: 10px;
         }
         .hidden {
             display: none;
         }
+        .highlight {
+            background-color: #fff3cd;
+            padding: 2px 4px;
+            border-radius: 2px;
+        }
+        .differences {
+            margin-top: 10px;
+            padding: 10px;
+            background: #e3f2fd;
+            border-radius: 4px;
+            font-size: 0.9em;
+        }
     </style>
 </head>
 <body>
+    <h1 class="title">Pagsets Labelling</h1>
     <div class="controls">
         <div class="file-controls">
             <input type="file" id="fileInput" accept=".json">
         let activeTab = '';
         let originalFileName = '';
+        // String difference visualization functions
+        function markBlueprintTextDifferences(
+            blueprintText,
+            locationText,
+            startMarker = '<up-markup>',
+            endMarker = '</up-markup>'
+        ) {
+            const cleanBlueprintText = blueprintText
+                .trim()
+                .replace(/\s+/g, ' ')
+                .replace('<up-markup>', '')
+                .replace('</up-markup>', '');
+            const cleanLocationText = locationText
+                .trim()
+                .replace(/\s+/g, ' ')
+                .replace('<up-markup>', '')
+                .replace('</up-markup>', '');
+            if (cleanBlueprintText === cleanLocationText) {
+                return cleanLocationText;
+            }
+            const blueprintWords = cleanBlueprintText.split(' ');
+            const locationWords = cleanLocationText.split(' ');
+            function findLongestCommonSubsequence(arr1, arr2) {
+                const m = arr1.length;
+                const n = arr2.length;
+                const dp = Array.from({ length: m + 1 }, () => new Array(n + 1).fill(0));
+                for (let i = 1; i <= m; i++) {
+                    for (let j = 1; j <= n; j++) {
+                        if (arr1[i - 1] === arr2[j - 1]) {
+                            dp[i][j] = dp[i - 1][j - 1] + 1;
+                        } else {
+                            dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
+                        }
+                    }
+                }
+                const lcs = [];
+                let i = m, j = n;
+                while (i > 0 && j > 0) {
+                    if (arr1[i - 1] === arr2[j - 1]) {
+                        lcs.unshift(arr1[i - 1]);
+                        i--;
+                        j--;
+                    } else if (dp[i - 1][j] > dp[i][j - 1]) {
+                        i--;
+                    } else {
+                        j--;
+                    }
+                }
+                return lcs;
+            }
+            const commonWords = findLongestCommonSubsequence(blueprintWords, locationWords);
+            if (commonWords.length === 0) {
+                return `${startMarker}${locationText}${endMarker}`;
+            }
+            const result = [];
+            let blueprintIndex = 0;
+            let locationIndex = 0;
+            let markerOpen = false;
+            while (locationIndex < locationWords.length) {
+                const currentWord = locationWords[locationIndex];
+                if (commonWords[0] === currentWord) {
+                    if (markerOpen) {
+                        result.push(endMarker);
+                        markerOpen = false;
+                    }
+                    result.push(result.length > 0 ? ' ' + currentWord : currentWord);
+                    blueprintIndex = blueprintWords.indexOf(currentWord) + 1;
+                    commonWords.shift();
+                    locationIndex++;
+                } else {
+                    if (!markerOpen) {
+                        result.push(result.length > 0 ? ' ' + startMarker + currentWord : startMarker + currentWord);
+                        markerOpen = true;
+                    } else {
+                        result.push(' ' + currentWord);
+                    }
+                    locationIndex++;
+                }
+            }
+            if (markerOpen) {
+                result.push(endMarker);
+            }
+            return result.join('');
+        }
+        function escapeHtml(text) {
+            return text
+                .replace(/&/g, "&amp;")
+                .replace(/</g, "&lt;")
+                .replace(/>/g, "&gt;")
+                .replace(/"/g, "&quot;")
+                .replace(/'/g, "&#039;");
+        }
+        function renderMarkerText(text) {
+            return text
+                .replace(/&lt;up-markup&gt;/g, '<span class="highlight">')
+                .replace(/&lt;\/up-markup&gt;/g, '</span>');
+        }
         document.getElementById('fileInput').addEventListener('change', handleFileUpload);
         document.getElementById('downloadBtn').addEventListener('click', handleDownload);
         document.getElementById('resetBtn').addEventListener('click', handleReset);
         }
         function getVariantIds() {
+            return Object.keys(data).filter(key =>
+                !key.includes('_feedback') &&
+                !key.includes('_correct') &&
+                key !== 'node' &&
+                key !== 'textValue' &&
                 key !== 'variantNodeId'
             );
         }
         function renderTabs() {
             const tabContainer = document.getElementById('tabContainer');
             tabContainer.innerHTML = '';
             getVariantIds().forEach(variantId => {
                 const tab = document.createElement('button');
                 tab.className = `tab ${activeTab === variantId ? 'active' : ''}`;
             Object.keys(data.textValue || {}).forEach(rowIndex => {
                 const card = document.createElement('div');
                 card.className = 'card';
                 // Original text
                 const originalText = document.createElement('div');
                 originalText.innerHTML = `
                     <span class="label">Original Text:</span>
                     <div class="text-field">${data.textValue[rowIndex]}</div>
                 `;
+                // Variant text with differences
                 const variantText = document.createElement('div');
+                const markedDifferences = markBlueprintTextDifferences(
+                    data.textValue[rowIndex],
+                    data[activeTab][rowIndex]
+                );
+                const escapedDifferences = escapeHtml(markedDifferences);
+                const renderedDifferences = renderMarkerText(escapedDifferences);
                 variantText.innerHTML = `
                     <span class="label">Variant Text:</span>
+                    <div class="text-field">${renderedDifferences}</div>
                 `;
                 // Feedback section
                 const feedbackSection = document.createElement('div');
                 const thumbsDown = document.createElement('button');
                 thumbsDown.className = `thumbs-down ${data[`${activeTab}_feedback`]?.[rowIndex] === false ? 'active' : ''}`;
                 thumbsDown.innerHTML = '👎';
                 thumbsDown.onclick = () => handleThumbsDown(rowIndex);
                 // Correction input
                 const correctionContainer = document.createElement('div');
                 correctionContainer.className = `correction-container ${data[`${activeTab}_feedback`]?.[rowIndex] === false ? '' : 'hidden'}`;
                         placeholder="Enter correction here"
                     >
                 `;
                 // Add event listener to correction input
                 const correctionInput = correctionContainer.querySelector('input');
                 correctionInput.onchange = (e) => handleCorrection(rowIndex, e.target.value);
                 feedbackSection.appendChild(thumbsDown);
                 feedbackSection.appendChild(correctionContainer);
                 // Append all elements to card
                 card.appendChild(originalText);
                 card.appendChild(variantText);
                 card.appendChild(feedbackSection);
                 contentContainer.appendChild(card);
             });
         }
                 data[`${activeTab}_feedback`] = {};
             }
             data[`${activeTab}_feedback`][rowIndex] = !data[`${activeTab}_feedback`][rowIndex];
             if (!data[`${activeTab}_correct`]) {
                 data[`${activeTab}_correct`] = {};
             }
             if (!data[`${activeTab}_feedback`][rowIndex]) {
                 data[`${activeTab}_correct`][rowIndex] = data[activeTab][rowIndex];
             }
             renderContent();
         }
         function handleDownload() {
             if (!originalFileName) return;
             const jsonString = JSON.stringify(data, null, 2);
             const blob = new Blob([jsonString], { type: 'application/json' });
             const url = URL.createObjectURL(blob);
         }
     </script>
 </body>
 </html>