2023-07-22 14:17:24 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html th:lang="${#locale.toString()}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org">
|
2024-02-11 17:47:00 +01:00
|
|
|
|
|
|
|
|
|
2024-01-02 00:37:20 +01:00
|
|
|
<th:block th:insert="~{fragments/common :: head(title=#{compare.title}, header=#{compare.header})}"></th:block>
|
2024-02-11 17:47:00 +01:00
|
|
|
|
|
|
|
|
|
2023-07-22 14:17:24 +02:00
|
|
|
<body>
|
|
|
|
|
<div id="page-container">
|
|
|
|
|
<div id="content-wrap">
|
|
|
|
|
<div th:insert="~{fragments/navbar.html :: navbar}"></div>
|
|
|
|
|
<br> <br>
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="row justify-content-center">
|
|
|
|
|
<div class="col-md-9">
|
|
|
|
|
<h2 th:text="#{compare.header}"></h2>
|
2024-02-11 17:47:00 +01:00
|
|
|
|
2023-08-02 23:49:43 +02:00
|
|
|
<div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf', remoteCall='false')}"></div>
|
|
|
|
|
<div th:replace="~{fragments/common :: fileSelector(name='fileInput2', multiple=false, accept='application/pdf', remoteCall='false')}"></div>
|
2023-07-22 14:17:24 +02:00
|
|
|
<button class="btn btn-primary" onclick="comparePDFs()" th:text="#{compare.submit}"></button>
|
2024-02-11 17:47:00 +01:00
|
|
|
|
|
|
|
|
|
2023-07-22 14:17:24 +02:00
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-6">
|
|
|
|
|
<h3 th:text="#{compare.document.1}"></h3>
|
|
|
|
|
<div id="result1" class="result-column"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-6">
|
|
|
|
|
<h3 th:text="#{compare.document.2}"></h3>
|
|
|
|
|
<div id="result2" class="result-column"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<style>
|
|
|
|
|
.result-column {
|
|
|
|
|
border: 1px solid #ccc;
|
|
|
|
|
padding: 15px;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
height: calc(100vh - 400px);
|
|
|
|
|
white-space: pre-wrap;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<script>
|
|
|
|
|
// get the elements
|
|
|
|
|
var result1 = document.getElementById('result1');
|
|
|
|
|
var result2 = document.getElementById('result2');
|
2024-02-11 17:47:00 +01:00
|
|
|
|
2023-07-22 14:17:24 +02:00
|
|
|
// add event listeners
|
|
|
|
|
result1.addEventListener('scroll', function() {
|
|
|
|
|
result2.scrollTop = result1.scrollTop;
|
|
|
|
|
});
|
2024-02-11 17:47:00 +01:00
|
|
|
|
2023-07-22 14:17:24 +02:00
|
|
|
result2.addEventListener('scroll', function() {
|
|
|
|
|
result1.scrollTop = result2.scrollTop;
|
|
|
|
|
});
|
2024-02-11 17:47:00 +01:00
|
|
|
|
2023-07-22 14:17:24 +02:00
|
|
|
async function comparePDFs() {
|
|
|
|
|
const file1 = document.getElementById("fileInput-input").files[0];
|
|
|
|
|
const file2 = document.getElementById("fileInput2-input").files[0];
|
2024-02-11 17:47:00 +01:00
|
|
|
|
2023-07-22 14:17:24 +02:00
|
|
|
if (!file1 || !file2) {
|
|
|
|
|
console.error("Please select two PDF files to compare");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs/pdf.worker.js'
|
|
|
|
|
const [pdf1, pdf2] = await Promise.all([
|
|
|
|
|
pdfjsLib.getDocument(URL.createObjectURL(file1)).promise,
|
|
|
|
|
pdfjsLib.getDocument(URL.createObjectURL(file2)).promise
|
|
|
|
|
]);
|
2024-02-11 17:47:00 +01:00
|
|
|
|
2023-07-22 14:17:24 +02:00
|
|
|
const extractText = async (pdf) => {
|
|
|
|
|
const pages = [];
|
|
|
|
|
for (let i = 1; i <= pdf.numPages; i++) {
|
|
|
|
|
const page = await pdf.getPage(i);
|
|
|
|
|
const content = await page.getTextContent();
|
|
|
|
|
const strings = content.items.map(item => item.str);
|
|
|
|
|
pages.push(strings.join(" "));
|
|
|
|
|
}
|
|
|
|
|
return pages.join(" ");
|
|
|
|
|
};
|
2024-02-11 17:47:00 +01:00
|
|
|
|
2023-07-22 14:17:24 +02:00
|
|
|
const [text1, text2] = await Promise.all([
|
|
|
|
|
extractText(pdf1),
|
|
|
|
|
extractText(pdf2)
|
|
|
|
|
]);
|
2024-02-11 17:47:00 +01:00
|
|
|
|
2023-07-22 14:17:24 +02:00
|
|
|
if (text1.trim() === "" || text2.trim() === "") {
|
|
|
|
|
alert("One or both of the selected PDFs have no text content. Please choose PDFs with text for comparison.");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
const diff = (text1, text2) => {
|
|
|
|
|
const words1 = text1.split(' ');
|
|
|
|
|
const words2 = text2.split(' ');
|
2024-02-11 17:47:00 +01:00
|
|
|
|
2023-07-22 14:17:24 +02:00
|
|
|
// Create a 2D array to hold our "matrix"
|
|
|
|
|
const matrix = Array(words1.length + 1).fill(null).map(() => Array(words2.length + 1).fill(0));
|
2024-02-11 17:47:00 +01:00
|
|
|
|
2023-07-22 14:17:24 +02:00
|
|
|
// Perform standard LCS algorithm
|
|
|
|
|
for (let i = 1; i <= words1.length; i++) {
|
|
|
|
|
for (let j = 1; j <= words2.length; j++) {
|
|
|
|
|
if (words1[i - 1] === words2[j - 1]) {
|
|
|
|
|
matrix[i][j] = matrix[i - 1][j - 1] + 1;
|
|
|
|
|
} else {
|
|
|
|
|
matrix[i][j] = Math.max(matrix[i][j - 1], matrix[i - 1][j]);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2024-02-11 17:47:00 +01:00
|
|
|
|
2023-07-22 14:17:24 +02:00
|
|
|
let i = words1.length;
|
|
|
|
|
let j = words2.length;
|
|
|
|
|
const differences = [];
|
2024-02-11 17:47:00 +01:00
|
|
|
|
2023-07-22 14:17:24 +02:00
|
|
|
// Backtrack through the matrix to create the diff
|
|
|
|
|
while (i > 0 || j > 0) {
|
|
|
|
|
if (i > 0 && j > 0 && words1[i - 1] === words2[j - 1]) {
|
|
|
|
|
differences.unshift(['black', words1[i - 1]]);
|
|
|
|
|
i--;
|
|
|
|
|
j--;
|
|
|
|
|
} else if (j > 0 && (i === 0 || matrix[i][j - 1] >= matrix[i - 1][j])) {
|
|
|
|
|
differences.unshift(['green', words2[j - 1]]);
|
|
|
|
|
j--;
|
|
|
|
|
} else if (i > 0 && (j === 0 || matrix[i][j - 1] < matrix[i - 1][j])) {
|
|
|
|
|
differences.unshift(['red', words1[i - 1]]);
|
|
|
|
|
i--;
|
|
|
|
|
}
|
|
|
|
|
}
|
2024-02-11 17:47:00 +01:00
|
|
|
|
2023-07-22 14:17:24 +02:00
|
|
|
return differences;
|
|
|
|
|
};
|
2024-02-11 17:47:00 +01:00
|
|
|
|
|
|
|
|
|
2023-07-22 14:17:24 +02:00
|
|
|
const differences = diff(text1, text2);
|
2024-02-11 17:47:00 +01:00
|
|
|
|
2023-07-22 14:17:24 +02:00
|
|
|
const displayDifferences = (differences) => {
|
|
|
|
|
const resultDiv1 = document.getElementById("result1");
|
|
|
|
|
const resultDiv2 = document.getElementById("result2");
|
|
|
|
|
resultDiv1.innerHTML = "";
|
|
|
|
|
resultDiv2.innerHTML = "";
|
2024-02-11 17:47:00 +01:00
|
|
|
|
2023-07-22 14:17:24 +02:00
|
|
|
differences.forEach(([color, word]) => {
|
|
|
|
|
const span1 = document.createElement("span");
|
|
|
|
|
const span2 = document.createElement("span");
|
2024-02-11 17:47:00 +01:00
|
|
|
|
2023-07-22 14:17:24 +02:00
|
|
|
// If it's an addition, show it in green in the second document and transparent in the first
|
|
|
|
|
if (color === "green") {
|
|
|
|
|
span1.style.color = "transparent";
|
|
|
|
|
span1.style.userSelect = "none";
|
|
|
|
|
span2.style.color = color;
|
|
|
|
|
}
|
|
|
|
|
// If it's a deletion, show it in red in the first document and transparent in the second
|
|
|
|
|
else if (color === "red") {
|
|
|
|
|
span1.style.color = color;
|
|
|
|
|
span2.style.color = "transparent";
|
|
|
|
|
span2.style.userSelect = "none";
|
|
|
|
|
}
|
|
|
|
|
// If it's unchanged, show it in black in both
|
|
|
|
|
else {
|
|
|
|
|
span1.style.color = color;
|
|
|
|
|
span2.style.color = color;
|
|
|
|
|
}
|
2024-02-11 17:47:00 +01:00
|
|
|
|
2023-07-22 14:17:24 +02:00
|
|
|
span1.textContent = word;
|
|
|
|
|
span2.textContent = word;
|
|
|
|
|
resultDiv1.appendChild(span1);
|
|
|
|
|
resultDiv2.appendChild(span2);
|
2024-02-11 17:47:00 +01:00
|
|
|
|
2023-07-22 14:17:24 +02:00
|
|
|
// Add space after each word, or a new line if the word ends with a full stop
|
|
|
|
|
const spaceOrNewline1 = document.createElement("span");
|
|
|
|
|
const spaceOrNewline2 = document.createElement("span");
|
|
|
|
|
if (word.endsWith(".")) {
|
|
|
|
|
spaceOrNewline1.innerHTML = "<br>";
|
|
|
|
|
spaceOrNewline2.innerHTML = "<br>";
|
|
|
|
|
} else {
|
|
|
|
|
spaceOrNewline1.textContent = " ";
|
|
|
|
|
spaceOrNewline2.textContent = " ";
|
|
|
|
|
}
|
|
|
|
|
resultDiv1.appendChild(spaceOrNewline1);
|
|
|
|
|
resultDiv2.appendChild(spaceOrNewline2);
|
|
|
|
|
});
|
|
|
|
|
};
|
2024-02-11 17:47:00 +01:00
|
|
|
|
2023-07-22 14:17:24 +02:00
|
|
|
console.log('Differences:', differences);
|
|
|
|
|
displayDifferences(differences);
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div th:insert="~{fragments/footer.html :: footer}"></div>
|
2024-02-11 18:14:21 +01:00
|
|
|
</div>
|
