Spaces:

GopalKrushnaMahapatra
/

TrueWrite-Scan

Running

App Files Files Community

GopalKrushnaMahapatra commited on Dec 11, 2025

Commit

c5a1ab8

verified ·

1 Parent(s): fd3f4a7

Update plagiarism.html

Browse files

Files changed (1) hide show

plagiarism.html +271 -83

plagiarism.html CHANGED Viewed

@@ -5,7 +5,7 @@
   <title>Plagiarism Check – TrueWrite Scan</title>
   <meta name="viewport" content="width=device-width,initial-scale=1" />
   <script src="https://cdn.tailwindcss.com"></script>
-  <!-- jsPDF (kept for backward compatibility but server PDF will be used) -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
 </head>
 <body class="bg-gradient-to-br from-slate-950 via-slate-900 to-violet-950 text-white min-h-screen flex flex-col">
@@ -177,8 +177,159 @@
     </div>
     <!-- Extra sections (unchanged UI text) -->
-    <!-- ... (unchanged content omitted here for brevity but included in full file) ... -->
   </main>
   <!-- Footer -->
@@ -198,7 +349,7 @@
       window.location.href = "login.html";
     }
-    // jsPDF helper (kept but not used for server reports)
     function getJsPDF() {
       if (window.jspdf && window.jspdf.jsPDF) return window.jspdf.jsPDF;
       if (window.jsPDF) return window.jsPDF;
@@ -443,104 +594,141 @@
       }
     });
-    // Helper to download blob
-    function downloadBlob(blob, filename) {
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement("a");
-      a.href = url;
-      a.download = filename || "report.pdf";
-      document.body.appendChild(a);
-      a.click();
-      a.remove();
-      setTimeout(() => URL.revokeObjectURL(url), 30000);
-    }
-    // Generic fetch PDF routine
-    async function fetchReportPdf({ endpointGet, endpointFile, text, file, defaultFilename }) {
-      if (file) {
-        const form = new FormData();
-        form.append("file", file, file.name);
-        const res = await fetch(`${BACKEND_URL}${endpointFile}`, {
-          method: "POST",
-          headers: { "Authorization": `Bearer ${token}` },
-          body: form
-        });
-        if (!res.ok) {
-          const txt = await res.text();
-          throw new Error(txt || `Server responded ${res.status}`);
-        }
-        const blob = await res.blob();
-        const cd = res.headers.get("content-disposition") || "";
-        const m = cd.match(/filename\*?=(?:UTF-8'')?["']?([^;"']+)/i);
-        const fname = m ? decodeURIComponent(m[1]) : defaultFilename;
-        downloadBlob(blob, fname);
-        return;
-      } else {
-        const q = encodeURIComponent(text || "");
-        const url = `${BACKEND_URL}${endpointGet}?text=${q}`;
-        const res = await fetch(url, {
-          method: "GET",
-          headers: { "Authorization": `Bearer ${token}` }
-        });
-        if (!res.ok) {
-          const txt = await res.text();
-          throw new Error(txt || `Server responded ${res.status}`);
-        }
-        const blob = await res.blob();
-        const cd = res.headers.get("content-disposition") || "";
-        const m = cd.match(/filename\*?=(?:UTF-8'')?["']?([^;"']+)/i);
-        const fname = m ? decodeURIComponent(m[1]) : defaultFilename;
-        downloadBlob(blob, fname);
-      }
-    }
-    // Download PDF report (server-generated)
-    downloadBtn.addEventListener("click", async () => {
       if (!lastResult) {
         alert("Run a check first.");
         return;
       }
-      try {
-        setLoading(true);
-        const file = fileInput.files[0] && !(fileInput.files[0].type === "text/plain" || fileInput.files[0].name.toLowerCase().endsWith(".txt")) ? fileInput.files[0] : null;
-        await fetchReportPdf({
-          endpointGet: "/report/plagiarism",
-          endpointFile: "/report/plagiarism-file",
-          text: textarea.value,
-          file,
-          defaultFilename: "TrueWrite_PlagiarismReport.pdf"
         });
-      } catch (err) {
-        console.error(err);
-        alert("Failed to download report: " + (err.message || err));
-      } finally {
-        setLoading(false);
       }
     });
-    // Reviews slider and gauge init (unchanged)
     const reviews = [
-      { name: "Aarav S.", role: "B.Tech Student", text: "Great for a quick originality check before using heavy tools like Turnitin.", stars: 5 },
-      { name: "Priya K.", role: "Research Scholar", text: "Helps me understand how similarity scores work in a simple, visible way.", stars: 5 },
-      { name: "Rahul M.", role: "Content Writer", text: "Nice to get an approximate plagiarism percentage while drafting blog posts.", stars: 4 },
-      { name: "Sneha R.", role: "M.Sc. Student", text: "Perfect educational example to show classmates how plagiarism detection is implemented.", stars: 5 },
-      { name: "Vikram J.", role: "Developer", text: "Clean UI and easy to tweak the logic for my own experiments.", stars: 4 }
     ];
-    function starRow(stars) { let html = ""; for (let i = 0; i < 5; i++) html += `<span class="${i < stars ? "text-yellow-400" : "text-slate-600"} text-sm">★</span>`; return html; }
     let currentReview = 0;
     const reviewCard = document.getElementById("reviewCard");
     const reviewDots = document.getElementById("reviewDots");
     function renderReview() {
       const r = reviews[currentReview];
-      reviewCard.innerHTML = `<div class="flex items-center gap-2 mb-2">${starRow(r.stars)}</div><p class="text-sm text-slate-200 mb-3">"${r.text}"</p><p class="text-sm font-semibold">${r.name}</p><p class="text-xs text-slate-400">${r.role}</p>`;
-      reviewDots.innerHTML = reviews.map((_, i) => `<span class="w-2 h-2 rounded-full ${i === currentReview ? "bg-[#0487D9]" : "bg-slate-600"}"></span>`).join("");
     }
-    function nextReview() { currentReview = (currentReview + 1) % reviews.length; renderReview(); }
-    function prevReview() { currentReview = (currentReview - 1 + reviews.length) % reviews.length; renderReview(); }
-    document.getElementById("nextReview").onclick = () => { clearInterval(reviewTimer); nextReview(); reviewTimer = setInterval(nextReview, 6000); };
-    document.getElementById("prevReview").onclick = () => { clearInterval(reviewTimer); prevReview(); reviewTimer = setInterval(prevReview, 6000); };
     let reviewTimer = setInterval(nextReview, 6000);
     renderReview();

   <title>Plagiarism Check – TrueWrite Scan</title>
   <meta name="viewport" content="width=device-width,initial-scale=1" />
   <script src="https://cdn.tailwindcss.com"></script>
+  <!-- jsPDF (no integrity to avoid local SRI issues) -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
 </head>
 <body class="bg-gradient-to-br from-slate-950 via-slate-900 to-violet-950 text-white min-h-screen flex flex-col">
     </div>
     <!-- Extra sections (unchanged UI text) -->
+    <section class="mt-10 space-y-4">
+      <h2 class="text-xl md:text-2xl font-semibold">Why choose this plagiarism checker?</h2>
+      <p class="text-sm text-slate-300">
+        TrueWrite Scan’s plagiarism page is built to help you understand how similarity checks work,
+        from input text to percentage score and PDF report.
+      </p>
+      <div class="grid md:grid-cols-3 gap-5 mt-3">
+        <div class="bg-slate-900/70 border border-slate-800 rounded-2xl p-4">
+          <div class="flex items-center gap-3 mb-2">
+            <div class="w-9 h-9 rounded-full bg-emerald-500/20 flex items-center justify-center">
+              <span class="text-lg">📊</span>
+            </div>
+            <p class="font-semibold text-sm">Clear percentage score</p>
+          </div>
+          <p class="text-xs text-slate-300">
+            See an easy-to-understand plagiarism percentage instead of raw technical metrics.
+          </p>
+        </div>
+        <div class="bg-slate-900/70 border border-slate-800 rounded-2xl p-4">
+          <div class="flex items-center gap-3 mb-2">
+            <div class="w-9 h-9 rounded-full bg-indigo-500/20 flex items-center justify-center">
+              <span class="text-lg">🌐</span>
+            </div>
+            <p class="font-semibold text-sm">Backend similarity engine</p>
+          </div>
+          <p class="text-xs text-slate-300">
+            The backend uses TF-IDF and set-based similarity to compare your text with a demo corpus.
+          </p>
+        </div>
+        <div class="bg-slate-900/70 border border-slate-800 rounded-2xl p-4">
+          <div class="flex items-center gap-3 mb-2">
+            <div class="w-9 h-9 rounded-full bg-fuchsia-500/20 flex items-center justify-center">
+              <span class="text-lg">📄</span>
+            </div>
+            <p class="font-semibold text-sm">Instant PDF reports</p>
+          </div>
+          <p class="text-xs text-slate-300">
+            Export a mini plagiarism report so you can attach it with your draft or keep it for records.
+          </p>
+        </div>
+      </div>
+    </section>
+    <section class="mt-10 space-y-4">
+      <h2 class="text-xl md:text-2xl font-semibold">Who can use this tool?</h2>
+      <p class="text-sm text-slate-300">
+        Anyone who wants a first originality check before using heavy enterprise tools.
+      </p>
+      <div class="grid md:grid-cols-3 gap-5 mt-3">
+        <div class="bg-slate-900/70 border border-slate-800 rounded-2xl p-4">
+          <div class="flex items-center gap-3 mb-2">
+            <div class="w-9 h-9 rounded-full bg-sky-500/20 flex items-center justify-center">
+              <span class="text-lg">🎓</span>
+            </div>
+            <p class="font-semibold text-sm">Students & project teams</p>
+          </div>
+          <p class="text-xs text-slate-300">
+            Check reports, abstracts, and essays for overlap with sample academic-style text.
+          </p>
+        </div>
+        <div class="bg-slate-900/70 border border-slate-800 rounded-2xl p-4">
+          <div class="flex items-center gap-3 mb-2">
+            <div class="w-9 h-9 rounded-full bg-amber-500/20 flex items-center justify-center">
+              <span class="text-lg">👩‍🏫</span>
+            </div>
+            <p class="font-semibold text-sm">Educators</p>
+          </div>
+          <p class="text-xs text-slate-300">
+            Demonstrate the concept of similarity checking in class with a clear, visual UI.
+          </p>
+        </div>
+        <div class="bg-slate-900/70 border border-slate-800 rounded-2xl p-4">
+          <div class="flex items-center gap-3 mb-2">
+            <div class="w-9 h-9 rounded-full bg-rose-500/20 flex items-center justify-center">
+              <span class="text-lg">✍️</span>
+            </div>
+            <p class="font-semibold text-sm">Bloggers & writers</p>
+          </div>
+          <p class="text-xs text-slate-300">
+            Quickly see if short articles look too similar to built-in reference styles.
+          </p>
+        </div>
+      </div>
+    </section>
+    <section class="mt-10 space-y-4">
+      <h2 class="text-xl md:text-2xl font-semibold">How does this plagiarism checker work?</h2>
+      <p class="text-sm text-slate-300">
+        The logic is intentionally simple and transparent so you can follow and later extend it with
+        more advanced databases or APIs.
+      </p>
+      <div class="grid md:grid-cols-3 gap-5 mt-3">
+        <div class="bg-slate-900/70 border border-slate-800 rounded-2xl p-4">
+          <div class="flex items-center gap-3 mb-2">
+            <div class="w-9 h-9 rounded-full bg-emerald-500/20 flex items-center justify-center">
+              <span class="text-lg">1️⃣</span>
+            </div>
+            <p class="font-semibold text-sm">Clean and vectorise</p>
+          </div>
+          <p class="text-xs text-slate-300">
+            Your text is cleaned and transformed into TF-IDF vectors on the server.
+          </p>
+        </div>
+        <div class="bg-slate-900/70 border border-slate-800 rounded-2xl p-4">
+          <div class="flex items-center gap-3 mb-2">
+            <div class="w-9 h-9 rounded-full bg-indigo-500/20 flex items-center justify-center">
+              <span class="text-lg">2️⃣</span>
+            </div>
+            <p class="font-semibold text-sm">Compare with corpus</p>
+          </div>
+          <p class="text-xs text-slate-300">
+            The backend compares your text with stored documents using cosine and set-based similarity.
+          </p>
+        </div>
+        <div class="bg-slate-900/70 border border-slate-800 rounded-2xl p-4">
+          <div class="flex items-center gap-3 mb-2">
+            <div class="w-9 h-9 rounded-full bg-fuchsia-500/20 flex items-center justify-center">
+              <span class="text-lg">3️⃣</span>
+            </div>
+            <p class="font-semibold text-sm">Return a percentage</p>
+          </div>
+          <p class="text-xs text-slate-300">
+            The highest overlap is converted into a simple percentage and returned to this page with top matches.
+          </p>
+        </div>
+      </div>
+    </section>
+    <section class="mt-12">
+      <h2 class="text-xl md:text-2xl font-semibold mb-3">Top reviews for this plagiarism tool</h2>
+      <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-5 md:p-6 relative overflow-hidden">
+        <div id="reviewCard" class="transition-all duration-500"></div>
+        <div class="flex items-center justify-between mt-4">
+          <div id="reviewDots" class="flex gap-1.5"></div>
+          <div class="flex gap-2">
+            <button id="prevReview"
+                    class="w-8 h-8 rounded-full border border-slate-600 flex items-center justify-center text-xs hover:bg-slate-800">‹</button>
+            <button id="nextReview"
+                    class="w-8 h-8 rounded-full border border-slate-600 flex items-center justify-center text-xs hover:bg-slate-800">›</button>
+          </div>
+        </div>
+      </div>
+    </section>
   </main>
   <!-- Footer -->
       window.location.href = "login.html";
     }
+    // jsPDF helper
     function getJsPDF() {
       if (window.jspdf && window.jspdf.jsPDF) return window.jspdf.jsPDF;
       if (window.jsPDF) return window.jsPDF;
       }
     });
+    // Download PDF report
+    downloadBtn.addEventListener("click", () => {
       if (!lastResult) {
         alert("Run a check first.");
         return;
       }
+      const jsPDF = getJsPDF();
+      if (!jsPDF) return;
+      const doc = new jsPDF({ unit: "pt", format: "a4" });
+      let y = 40;
+      doc.setFontSize(16);
+      doc.text("TrueWrite Scan — Plagiarism Report", 40, y); y += 22;
+      doc.setFontSize(11);
+      doc.text("Generated: " + new Date().toLocaleString(), 40, y); y += 18;
+      doc.text("User: " + (user || "N/A"), 40, y); y += 18;
+      const pr = lastResult.result.plagiarism_percent ?? "N/A";
+      doc.setFontSize(12);
+      doc.text(`Plagiarism: ${pr}%`, 40, y); y += 16;
+      if (lastResult.result.summary) {
+        doc.setFontSize(10);
+        const summaryLines = doc.splitTextToSize("Summary: " + lastResult.result.summary, 520);
+        doc.text(summaryLines, 40, y);
+        y += summaryLines.length * 12 + 10;
+      }
+      if (lastResult.result.matches && lastResult.result.matches.length) {
+        doc.setFontSize(11);
+        doc.text("Top matches:", 40, y); y += 14;
+        lastResult.result.matches.forEach(m => {
+          const line = `• ${m.title} — ${m.score}%`;
+          doc.text(line, 48, y);
+          y += 12;
         });
       }
+      y += 10;
+      doc.setFontSize(11);
+      doc.text("--- Original text (truncated) ---", 40, y); y += 16;
+      doc.setFontSize(9);
+      const raw = lastResult.input || "";
+      const truncated = raw.length > 3000 ? raw.slice(0, 3000) + "\n\n[TRUNCATED]" : raw;
+      const textLines = doc.splitTextToSize(truncated, 520);
+      doc.text(textLines, 40, y);
+      doc.save("plagiarism-report.pdf");
     });
+    // Reviews slider
     const reviews = [
+      {
+        name: "Aarav S.",
+        role: "B.Tech Student",
+        text: "Great for a quick originality check before using heavy tools like Turnitin.",
+        stars: 5
+      },
+      {
+        name: "Priya K.",
+        role: "Research Scholar",
+        text: "Helps me understand how similarity scores work in a simple, visible way.",
+        stars: 5
+      },
+      {
+        name: "Rahul M.",
+        role: "Content Writer",
+        text: "Nice to get an approximate plagiarism percentage while drafting blog posts.",
+        stars: 4
+      },
+      {
+        name: "Sneha R.",
+        role: "M.Sc. Student",
+        text: "Perfect educational example to show classmates how plagiarism detection is implemented.",
+        stars: 5
+      },
+      {
+        name: "Vikram J.",
+        role: "Developer",
+        text: "Clean UI and easy to tweak the logic for my own experiments.",
+        stars: 4
+      }
     ];
     let currentReview = 0;
     const reviewCard = document.getElementById("reviewCard");
     const reviewDots = document.getElementById("reviewDots");
+    function starRow(stars) {
+      let html = "";
+      for (let i = 0; i < 5; i++) {
+        html += `<span class="${i < stars ? "text-yellow-400" : "text-slate-600"} text-sm">★</span>`;
+      }
+      return html;
+    }
     function renderReview() {
       const r = reviews[currentReview];
+      reviewCard.innerHTML = `
+        <div class="flex items-center gap-2 mb-2">
+          ${starRow(r.stars)}
+        </div>
+        <p class="text-sm text-slate-200 mb-3">"${r.text}"</p>
+        <p class="text-sm font-semibold">${r.name}</p>
+        <p class="text-xs text-slate-400">${r.role}</p>
+      `;
+      reviewDots.innerHTML = reviews.map((_, i) =>
+        `<span class="w-2 h-2 rounded-full ${i === currentReview ? "bg-[#0487D9]" : "bg-slate-600"}"></span>`
+      ).join("");
+    }
+    function nextReview() {
+      currentReview = (currentReview + 1) % reviews.length;
+      renderReview();
+    }
+    function prevReview() {
+      currentReview = (currentReview - 1 + reviews.length) % reviews.length;
+      renderReview();
     }
+    document.getElementById("nextReview").onclick = () => {
+      clearInterval(reviewTimer);
+      nextReview();
+      reviewTimer = setInterval(nextReview, 6000);
+    };
+    document.getElementById("prevReview").onclick = () => {
+      clearInterval(reviewTimer);
+      prevReview();
+      reviewTimer = setInterval(nextReview, 6000);
+    };
     let reviewTimer = setInterval(nextReview, 6000);
     renderReview();