2023-05-08 01:17:20 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html th:lang="${#locale.toString()}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<th:block th:insert="~{fragments/common :: head(title=#{repair.title})}"></th:block>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<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-6">
|
|
|
|
|
<h2 th:text="#{repair.header}"></h2>
|
|
|
|
|
|
|
|
|
|
<div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
|
|
|
|
|
<div th:replace="~{fragments/common :: fileSelector(name='fileInput2', multiple=false, accept='application/pdf')}"></div>
|
|
|
|
|
<button onclick="comparePDFs()">Compare</button>
|
2023-05-08 23:55:01 +02:00
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-6">
|
|
|
|
|
<h3>Document 1</h3>
|
|
|
|
|
<div id="result1" class="result-column"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-6">
|
|
|
|
|
<h3>Document 2</h3>
|
|
|
|
|
<div id="result2" class="result-column"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<style>
|
|
|
|
|
.result-column {
|
|
|
|
|
border: 1px solid #ccc;
|
|
|
|
|
padding: 15px;
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
height: 400px;
|
|
|
|
|
white-space: pre-wrap;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
2023-05-08 01:17:20 +02:00
|
|
|
<script>
|
|
|
|
|
async function comparePDFs() {
|
|
|
|
|
const file1 = document.getElementById("fileInput-input").files[0];
|
|
|
|
|
const file2 = document.getElementById("fileInput2-input").files[0];
|
|
|
|
|
|
|
|
|
|
if (!file1 || !file2) {
|
|
|
|
|
console.error("Please select two PDF files to compare");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const [pdf1, pdf2] = await Promise.all([
|
|
|
|
|
pdfjsLib.getDocument(URL.createObjectURL(file1)).promise,
|
|
|
|
|
pdfjsLib.getDocument(URL.createObjectURL(file2)).promise
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
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);
|
2023-05-08 23:55:01 +02:00
|
|
|
pages.push(strings.join(" "));
|
2023-05-08 01:17:20 +02:00
|
|
|
}
|
2023-05-08 23:55:01 +02:00
|
|
|
return pages.join(" ");
|
2023-05-08 01:17:20 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const [text1, text2] = await Promise.all([
|
|
|
|
|
extractText(pdf1),
|
|
|
|
|
extractText(pdf2)
|
|
|
|
|
]);
|
|
|
|
|
|
2023-05-08 23:55:01 +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;
|
|
|
|
|
}
|
2023-05-08 01:17:20 +02:00
|
|
|
const diff = (text1, text2) => {
|
2023-05-08 23:55:01 +02:00
|
|
|
// ... Keep the same diff function from the previous response ...
|
|
|
|
|
};
|
2023-05-08 01:17:20 +02:00
|
|
|
|
2023-05-08 23:55:01 +02:00
|
|
|
const differences = diff(text1, text2);
|
2023-05-08 01:17:20 +02:00
|
|
|
|
2023-05-08 23:55:01 +02:00
|
|
|
const displayDifferences = (differences) => {
|
|
|
|
|
const resultDiv1 = document.getElementById("result1");
|
|
|
|
|
const resultDiv2 = document.getElementById("result2");
|
|
|
|
|
resultDiv1.innerHTML = "";
|
|
|
|
|
resultDiv2.innerHTML = "";
|
|
|
|
|
|
|
|
|
|
let doc1Pointer = 0;
|
|
|
|
|
let doc2Pointer = 0;
|
|
|
|
|
differences.forEach(([color, word]) => {
|
|
|
|
|
const span1 = document.createElement("span");
|
|
|
|
|
const span2 = document.createElement("span");
|
|
|
|
|
|
|
|
|
|
if (color === "green") {
|
|
|
|
|
span1.style.color = color;
|
|
|
|
|
span1.textContent = word;
|
|
|
|
|
resultDiv1.appendChild(span1);
|
|
|
|
|
doc1Pointer++;
|
|
|
|
|
} else if (color === "red") {
|
|
|
|
|
span2.style.color = color;
|
|
|
|
|
span2.textContent = word;
|
|
|
|
|
resultDiv2.appendChild(span2);
|
|
|
|
|
doc2Pointer++;
|
2023-05-08 01:17:20 +02:00
|
|
|
} else {
|
2023-05-08 23:55:01 +02:00
|
|
|
span1.style.color = color;
|
|
|
|
|
span1.textContent = word;
|
|
|
|
|
resultDiv1.appendChild(span1);
|
|
|
|
|
doc1Pointer++;
|
|
|
|
|
|
|
|
|
|
span2.style.color = color;
|
|
|
|
|
span2.textContent = word;
|
|
|
|
|
resultDiv2.appendChild(span2);
|
|
|
|
|
doc2Pointer++;
|
2023-05-08 01:17:20 +02:00
|
|
|
}
|
|
|
|
|
|
2023-05-08 23:55:01 +02:00
|
|
|
// Add space after each word
|
|
|
|
|
const space1 = document.createElement("span");
|
|
|
|
|
const space2 = document.createElement("span");
|
|
|
|
|
space1.textContent = " ";
|
|
|
|
|
space2.textContent = " ";
|
|
|
|
|
resultDiv1.appendChild(space1);
|
|
|
|
|
resultDiv2.appendChild(space2);
|
|
|
|
|
});
|
2023-05-08 01:17:20 +02:00
|
|
|
return result;
|
|
|
|
|
};
|
2023-05-08 23:55:01 +02:00
|
|
|
console.log('Differences:', differences);
|
|
|
|
|
displayDifferences(differences);
|
|
|
|
|
}
|
|
|
|
|
</script>
|
2023-05-08 01:17:20 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div th:insert="~{fragments/footer.html :: footer}"></div>
|
|
|
|
|
</div>
|
