Spaces:

GopalKrushnaMahapatra
/

TrueWrite-Scan

Running

App Files Files Community

GopalKrushnaMahapatra commited on Dec 11, 2025

Commit

fd3f4a7

verified ·

1 Parent(s): 430a407

Update grammar.html

Browse files

Files changed (1) hide show

grammar.html +259 -85

grammar.html CHANGED Viewed

@@ -5,7 +5,7 @@
   <title>Grammar 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-indigo-950 text-white min-h-screen flex flex-col">
@@ -177,7 +177,180 @@
     </div>
     <!-- ========= Info sections from file 1 ========= -->
-    <!-- ... content unchanged ... -->
   </main>
   <!-- Footer -->
@@ -196,7 +369,7 @@
       window.location.href = "login.html";
     }
-    // jsPDF helper (kept but server PDF used for final)
     function getJsPDF() {
       if (window.jspdf && window.jspdf.jsPDF) return window.jspdf.jsPDF;
       if (window.jsPDF) return window.jsPDF;
@@ -261,7 +434,7 @@
       }
     }
-    // Word counting & 1000-word indicator
     function countWords(text) {
       if (!text || !text.trim()) return 0;
       return text.trim().split(/\s+/).length;
@@ -279,7 +452,7 @@
     textarea.addEventListener("input", updateWordCount);
-    // Simple local heuristic rules
     function applyLocalGrammarRules(rawText) {
       let corrections = 0;
       let text = rawText || "";
@@ -304,7 +477,7 @@
       return { corrected: text, corrections };
     }
-    // Drag & drop
     ["dragenter", "dragover"].forEach(evt => {
       dropZone.addEventListener(evt, e => {
         e.preventDefault();
@@ -376,7 +549,7 @@
       }
     };
-    // API calls
     async function callGrammarText(text) {
       const res = await fetch(`${BACKEND_URL}/api/grammar-check`, {
         method: "POST",
@@ -404,7 +577,7 @@
       return data;
     }
-    // Main check
     checkBtn.onclick = async () => {
       const text = textarea.value.trim();
       const file = fileInput.files[0];
@@ -466,7 +639,7 @@
         statusTiny.textContent = "Done";
       } catch (err) {
         console.error(err);
-        // Fallback to local heuristic result
         const words = localWords;
         const corrections = localRes.corrections;
         const corrected = localRes.corrected;
@@ -499,80 +672,56 @@
       }
     };
-    // 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);
-      }
-    }
-    // PDF download: call backend report endpoints (server-generated PDF)
-    downloadBtn.onclick = async () => {
       if (!lastResult) {
         alert("Run at least one grammar check before downloading a report.");
         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/grammar",
-          endpointFile: "/report/grammar-file",
-          text: textarea.value,
-          file,
-          defaultFilename: "TrueWrite_GrammarReport.pdf"
-        });
-      } catch (err) {
-        console.error(err);
-        alert("Failed to download report: " + (err.message || err));
-      } finally {
-        setLoading(false);
       }
     };
     function escapeHtml(str) {
@@ -582,13 +731,38 @@
       }[s]));
     }
-    // Reviews slider (unchanged)
     const reviews = [
-      { name: "Aarav S.", role: "Final-year B.Tech student", text: "I use this grammar page before every assignment submission. It quickly cleans up the most obvious mistakes.", stars: 5 },
-      { name: "Priya K.", role: "M.Tech researcher", text: "The corrected text + PDF report help me keep a record of changes when I work on my thesis chapters.", stars: 5 },
-      { name: "Rahul M.", role: "Content creator", text: "Simple, fast, no distractions. Perfect when I just want to sanity-check captions and short posts.", stars: 4 },
-      { name: "Sneha R.", role: "English learner", text: "Seeing how my sentences are automatically fixed is helping me understand grammar rules better.", stars: 5 },
-      { name: "Vikram J.", role: "Developer", text: "Nice example of a purely front-end grammar tool. The UI feels inspired by popular tools like QuillBot.", stars: 4 }
     ];
     let currentReview = 0;
@@ -636,7 +810,7 @@
     document.getElementById("prevReview").addEventListener("click", () => {
       clearInterval(reviewTimer);
       prevReview();
-      reviewTimer = setInterval(prevReview, 6000);
     });
     let reviewTimer = setInterval(nextReview, 6000);
@@ -646,4 +820,4 @@
     updateWordCount();
   </script>
 </body>
-</html>

   <title>Grammar 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 SRI issues locally) -->
   <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-indigo-950 text-white min-h-screen flex flex-col">
     </div>
     <!-- ========= Info sections from file 1 ========= -->
+    <section class="mt-10 space-y-4">
+      <h2 class="text-xl md:text-2xl font-semibold">Why choose this tool?</h2>
+      <p class="text-sm text-slate-300">
+        Inspired by tools like QuillBot, this page gives you a simple, focused space to check
+        short pieces of writing quickly before you submit or share them.
+      </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-indigo-500/20 flex items-center justify-center">
+              <span class="text-lg">⚡</span>
+            </div>
+            <p class="font-semibold text-sm">Fast one-click review</p>
+          </div>
+          <p class="text-xs text-slate-300">
+            Paste, click, and instantly get a cleaner version of your text without any sign-up
+            or complicated options.
+          </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-emerald-500/20 flex items-center justify-center">
+              <span class="text-lg">🎯</span>
+            </div>
+            <p class="font-semibold text-sm">Focus on basics that matter</p>
+          </div>
+          <p class="text-xs text-slate-300">
+            Targets the most common issues students face: extra spaces, lowercase “i”,
+            sentence starts, and missing punctuation.
+          </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 summaries</p>
+          </div>
+          <p class="text-xs text-slate-300">
+            Export a quick PDF report for your records or to attach with your assignment
+            submissions.
+          </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">
+        This grammar checker is designed as a lightweight helper for anyone who wants a final
+        polish before sending or submitting text.
+      </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</p>
+          </div>
+          <p class="text-xs text-slate-300">
+            Quickly check lab reports, assignments, mini-projects, and emails to faculty or
+            supervisors.
+          </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">Teachers & mentors</p>
+          </div>
+          <p class="text-xs text-slate-300">
+            Use it as a quick demo in class to show students how common grammar issues can be
+            auto-detected.
+          </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">Professionals & creators</p>
+          </div>
+          <p class="text-xs text-slate-300">
+            Clean up short posts, descriptions, and emails before sharing them with clients,
+            teams, or on social media.
+          </p>
+        </div>
+      </div>
+    </section>
+    <!-- How it works (frontend-focused) from file 1 -->
+    <section class="mt-10 space-y-4">
+      <h2 class="text-xl md:text-2xl font-semibold">How does this work?</h2>
+      <p class="text-sm text-slate-300">
+        Behind the scenes, prefers a neural model (GECToR), then falls back to LanguageTool, and finally to a
+        lightweight heuristic that do the necessary corrections.
+      </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-indigo-500/20 flex items-center justify-center">
+              <span class="text-lg">1️⃣</span>
+            </div>
+            <p class="font-semibold text-sm">Paste & analyse</p>
+          </div>
+          <p class="text-xs text-slate-300">
+            You paste your text (up to ~1000 words). The tool counts words and prepares it for
+            analysis.
+          </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-emerald-500/20 flex items-center justify-center">
+              <span class="text-lg">2️⃣</span>
+            </div>
+            <p class="font-semibold text-sm">Apply smart rules and models</p>
+          </div>
+          <p class="text-xs text-slate-300">
+            GECToR model rewrites sentences word-by-word, focusing on grammar, agreement, and spelling.
+            JavaScript rules can fix double spaces, lowercase “i”, sentence capitalization, and
+            end punctuation. Then the text is sent to a neural grammar model on the server for deeper fixes.
+          </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">Review & export</p>
+          </div>
+          <p class="text-xs text-slate-300">
+            You compare the original and corrected text, then optionally export a PDF summary
+            for future reference.
+          </p>
+        </div>
+      </div>
+    </section>
+    <!-- Reviews slider from file 1 -->
+    <section class="mt-12">
+      <h2 class="text-xl md:text-2xl font-semibold mb-3">What users say about this grammar 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">
+          <!-- filled by JS -->
+        </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 (from file 2)
     function getJsPDF() {
       if (window.jspdf && window.jspdf.jsPDF) return window.jspdf.jsPDF;
       if (window.jsPDF) return window.jsPDF;
       }
     }
+    // Word counting & 1000-word indicator (from file 1)
     function countWords(text) {
       if (!text || !text.trim()) return 0;
       return text.trim().split(/\s+/).length;
     textarea.addEventListener("input", updateWordCount);
+    // Simple local heuristic rules (from file 1)
     function applyLocalGrammarRules(rawText) {
       let corrections = 0;
       let text = rawText || "";
       return { corrected: text, corrections };
     }
+    // Drag & drop (from file 2)
     ["dragenter", "dragover"].forEach(evt => {
       dropZone.addEventListener(evt, e => {
         e.preventDefault();
       }
     };
+    // API calls (from file 2)
     async function callGrammarText(text) {
       const res = await fetch(`${BACKEND_URL}/api/grammar-check`, {
         method: "POST",
       return data;
     }
+    // Main check: file 2 logic + file 1 fallback
     checkBtn.onclick = async () => {
       const text = textarea.value.trim();
       const file = fileInput.files[0];
         statusTiny.textContent = "Done";
       } catch (err) {
         console.error(err);
+        // Fallback to local heuristic result from file 1
         const words = localWords;
         const corrections = localRes.corrections;
         const corrected = localRes.corrected;
       }
     };
+    // PDF download: logic from file 2
+    downloadBtn.onclick = () => {
       if (!lastResult) {
         alert("Run at least one grammar check before downloading a report.");
         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 — Grammar 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;
+      doc.setFontSize(12);
+      doc.text(`Words analysed: ${lastResult.words}`, 40, y); y += 16;
+      doc.text(`Corrections: ${lastResult.corrections}`, 40, y); y += 20;
+      if (lastResult.summary) {
+        doc.text("Summary:", 40, y); y += 16;
+        doc.setFontSize(10);
+        let lines = doc.splitTextToSize(lastResult.summary, 520);
+        doc.text(lines, 40, y);
+        y += lines.length * 12 + 10;
       }
+      doc.setFontSize(11);
+      doc.text("--- Original text (truncated) ---", 40, y); y += 16;
+      doc.setFontSize(9);
+      const original = lastResult.original || "";
+      const originalTrunc = original.length > 2500 ? original.slice(0, 2500) + "\n\n[TRUNCATED]" : original;
+      let lines = doc.splitTextToSize(originalTrunc, 520);
+      doc.text(lines, 40, y);
+      y += lines.length * 10 + 12;
+      doc.setFontSize(11);
+      doc.text("--- Corrected text (truncated) ---", 40, y); y += 16;
+      doc.setFontSize(9);
+      const corrected = lastResult.corrected || "";
+      const correctedTrunc = corrected.length > 2500 ? corrected.slice(0, 2500) + "\n\n[TRUNCATED]" : corrected;
+      lines = doc.splitTextToSize(correctedTrunc, 520);
+      doc.text(lines, 40, y);
+      doc.save("truewrite-grammar-report.pdf");
     };
     function escapeHtml(str) {
       }[s]));
     }
+    // ===== Reviews slider (from file 1) =====
     const reviews = [
+      {
+        name: "Aarav S.",
+        role: "Final-year B.Tech student",
+        text: "I use this grammar page before every assignment submission. It quickly cleans up the most obvious mistakes.",
+        stars: 5
+      },
+      {
+        name: "Priya K.",
+        role: "M.Tech researcher",
+        text: "The corrected text + PDF report help me keep a record of changes when I work on my thesis chapters.",
+        stars: 5
+      },
+      {
+        name: "Rahul M.",
+        role: "Content creator",
+        text: "Simple, fast, no distractions. Perfect when I just want to sanity-check captions and short posts.",
+        stars: 4
+      },
+      {
+        name: "Sneha R.",
+        role: "English learner",
+        text: "Seeing how my sentences are automatically fixed is helping me understand grammar rules better.",
+        stars: 5
+      },
+      {
+        name: "Vikram J.",
+        role: "Developer",
+        text: "Nice example of a purely front-end grammar tool. The UI feels inspired by popular tools like QuillBot.",
+        stars: 4
+      }
     ];
     let currentReview = 0;
     document.getElementById("prevReview").addEventListener("click", () => {
       clearInterval(reviewTimer);
       prevReview();
+      reviewTimer = setInterval(nextReview, 6000);
     });
     let reviewTimer = setInterval(nextReview, 6000);
     updateWordCount();
   </script>
 </body>
+</html>