PROMPT
1st PROMPT:
create application program (web-based code) two compare similarity
between 2 uploaded table (1 colomn multiple row)
2nd PROMPT:
add export function to the web-page (3 row: unique in table1, similar
number, and unique in table2)
3rd PROMPT:
the report in web-page or export file should be in 3 colomn: 1) unique
in table 1 2) similar values 3) unique in table 2
4th PROMPT:
add one colomn in left as row number and each row is categorized among
those 3 colomn: 1) unique in table 1 2) similar values 3) unique in
table 2
TABLE 1 & TABLE 2
table1
| Number |
| ------ |
| 1723 |
| 5042 |
| 8125 |
| 9348 |
| 2301 |
| 9120 |
| 6634 |
| 3588 |
| 7791 |
| 1290 |
| 8734 |
| 5010 |
| 3911 |
| 7133 |
| 6024 |
| 9388 |
| 6789 |
| 2507 |
| 4876 |
| 3344 |
table2
| Number |
| ------ |
| 8125 |
| 5042 |
| 3344 |
| 7081 |
| 1166 |
| 8023 |
| 1723 |
| 2790 |
| 6789 |
| 9120 |
| 9999 |
| 6024 |
| 2444 |
| 1001 |
| 7133 |
| 3210 |
| 7388 |
| 3588 |
| 1357 |
| 1890 |
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Table Similarity Checker</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body class="bg-light p-4">
<div class="container">
<h2 class="mb-4">🔍 Compare Table Similarity</h2>
<div class="mb-3">
<label for="file1" class="form-label"
>Upload Table 1 (CSV)</label
>
<input
type="file"
id="file1"
accept=".csv"
class="form-control"
/>
</div>
<div class="mb-3">
<label for="file2" class="form-label"
>Upload Table 2 (CSV)</label
>
<input
type="file"
id="file2"
accept=".csv"
class="form-control"
/>
</div>
<button
class="btn btn-primary me-2"
onclick="compareTables()"
>
Compare
</button>
<button
class="btn btn-success"
id="exportBtn"
onclick="exportCSV()"
disabled
>
Export Results
</button>
<div id="result" class="mt-4"></div>
</div>
<script>
let categorizedRows = [];
function readCSV(file, callback) {
const reader = new FileReader();
reader.onload = function (e) {
const lines = e.target.result
.split(/\r?\n/)
.map((line) =>
line.trim()
)
.filter(
(line) =>
line
);
callback(lines);
};
reader.readAsText(file);
}
function compareTables() {
const file1 =
document.getElementById(
"file1"
).files[0];
const file2 =
document.getElementById(
"file2"
).files[0];
if (!file1 || !file2) {
alert(
"Please upload both files."
);
return;
}
readCSV(file1, (data1) => {
readCSV(file2, (data2) => {
const set1 =
new Set(
data1
);
const set2 =
new Set(
data2
);
const common = [
...set1,
].filter((item) =>
set2.has(
item
)
);
const unique1 = [
...set1,
].filter(
(item) =>
!set2.has(
item
)
);
const unique2 = [
...set2,
].filter(
(item) =>
!set1.has(
item
)
);
const total =
new Set([
...data1,
...data2,
]).size;
const similarity = (
(common.length /
total) *
100
).toFixed(2);
// Build categorized rows
categorizedRows =
[];
unique1.forEach(
(val) =>
categorizedRows.push(
[
val,
"",
"",
]
)
);
common.forEach(
(val) =>
categorizedRows.push(
[
"",
val,
"",
]
)
);
unique2.forEach(
(val) =>
categorizedRows.push(
[
"",
"",
val,
]
)
);
// Build HTML table
let tableHTML = `
<h4>✅ Similarity: ${similarity}%</h4>
<table class="table table-bordered">
<thead class="table-light">
<tr>
<th>Row</th>
<th>Unique in Table 1</th>
<th>Similar Values</th>
<th>Unique in Table 2</th>
</tr>
</thead>
<tbody>
`;
categorizedRows.forEach(
(
row,
index
) => {
tableHTML += `
<tr>
<td>${index + 1}</td>
<td>${row[0]}</td>
<td>${row[1]}</td>
<td>${row[2]}</td>
</tr>
`;
}
);
tableHTML +=
"</tbody></table>";
document.getElementById(
"result"
).innerHTML =
tableHTML;
document.getElementById(
"exportBtn"
).disabled = false;
});
});
}
function exportCSV() {
const rows = [
[
"Row",
"Unique in Table 1",
"Similar Values",
"Unique in Table 2",
],
];
categorizedRows.forEach(
(row, index) => {
rows.push([
index + 1,
...row,
]);
}
);
const csvContent = rows
.map((row) => row.join(","))
.join("\n");
const blob = new Blob([csvContent], {
type: "text/csv;charset=utf-8;",
});
const url = URL.createObjectURL(blob);
const link =
document.createElement("a");
link.setAttribute("href", url);
link.setAttribute(
"download",
"table_similarity_results.csv"
);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
</script>
</body>
</html>
WEB APP
RESULTRow Unique in Table 1 Similar Values Unique in Table 2
1 9348
2 2301
3 6634
4 7791
5 1290
6 8734
7 5010
8 3911
9 9388
10 2507
11 4876
12 1723
13 5042
14 8125
15 9120
16 3588
17 7133
18 6024
19 6789
20 3344
21 7081
22 1166
23 8023
24 2790
25 9999
26 2444
27 1001
28 3210
29 7388
30 1357
31 1890
Comments