Add prediction comparison feature

Author: prachishelke1312

src/frontend/components/RecentPredictions.js

@@ -1,4 +1,8 @@
-import { getPredictions, clearPredictions } from "../js/predictionStorage.js";
+import {
+  getPredictions,
+  clearPredictions,
+  comparePredictions
+} from "../js/predictionStorage.js";
 
 export default function RecentPredictions() {
   const history = getPredictions();
@@ -11,16 +15,35 @@ export default function RecentPredictions() {
   container.appendChild(title);
 
   history.forEach((item, i) => {
-    const div = document.createElement("div");
-    div.className = "prediction-item";
-    div.innerHTML = `
-      <p><strong>${item.timestamp}</strong></p>
-      <p>Input: ${item.input}</p>
-      <p>Output: ${item.output}</p>
-    `;
-    container.appendChild(div);
-  });
+  const div = document.createElement("div");
+  div.className = "prediction-item";
 
+  div.innerHTML = `
+    <p><strong>${item.timestamp}</strong></p>
+    <p>Input: ${item.input}</p>
+    <p>Output: ${item.output}</p>
+  `;
+
+  const compareBtn = document.createElement("button");
+  compareBtn.textContent = "Compare";
+
+  compareBtn.onclick = () => {
+    if (i + 1 < history.length) {
+      const result = comparePredictions(i + 1, i);
+
+      alert(
+        `Previous Output: ${result.previous.output}
+        Latest Output: ${result.latest.output}`
+      );
+    } else {
+      alert("No previous prediction available");
+    }
+  };
+
+  div.appendChild(compareBtn);
+
+  container.appendChild(div);
+});
   if (history.length > 0) {
     const clearBtn = document.createElement("button");
     clearBtn.textContent = "Clear History";

src/frontend/js/predictionStorage.js

@@ -12,3 +12,11 @@ export function getPredictions() {
 export function clearPredictions() {
   localStorage.removeItem("predictions");
 }
+export function comparePredictions(index1, index2) {
+  const history = getPredictions();
+
+  return {
+    previous: history[index1],
+    latest: history[index2]
+  };
+}