Initail Commit

.env.example

@@ -1,5 +0,0 @@
-# Get your FREE Groq API key at: https://console.groq.com/keys
-# 1. Sign up (free, no credit card)
-# 2. Go to API Keys -> Create API Key
-# 3. Paste it below (remove the brackets)
-GROQ_API_KEY=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

app.py

@@ -1,20 +1,30 @@
-from flask import Flask, render_template, request, jsonify
-import json
+from flask import Flask, render_template, request, jsonify, Response
 import os
 
-# Placeholder imports matching your engineering pipeline
-# from verify_v2 import verify_claim
-# from health_passport import generate_qr_code
+from verify_v2 import verify_claim
+import db
+import health_passport as hp
+import ocr_utils
 
 app = Flask(__name__)
-app.secret_key = "verimed_secure_session_key"
+app.secret_key = os.environ.get("FLASK_SECRET_KEY", "dev-only-change-me")
+
+# Make sure tables exist before anything else runs
+db.init_db()
+hp.init_passport_table()
 
 # --- PAGE ROUTING ---
 
 @app.route('/')
 def home():
-    # Home/Dashboard with overview metrics
-    stats = {"total_checked": 142, "true_count": 58, "false_count": 64, "misleading_count": 20}
+    raw_stats = db.get_stats()
+    by_verdict = raw_stats.get("by_verdict", {})
+    stats = {
+        "total_checked": raw_stats.get("total_checked", 0),
+        "true_count": by_verdict.get("True", 0),
+        "false_count": by_verdict.get("False", 0),
+        "misleading_count": by_verdict.get("Misleading", 0),
+    }
     return render_template('index.html', stats=stats)
 
 @app.route('/checker')
@@ -34,44 +44,128 @@ def passport():
 @app.route('/api/verify', methods=['POST'])
 def api_verify():
     """Handles multimodal/multilingual inputs (Text, URL, Images via OCR)"""
-    claim_text = request.form.get('claim', '')
+    claim_text = request.form.get('claim', '').strip()
     language = request.form.get('language', 'en')
-    
+    ocr_used = False
+
     # Handle Image Upload for OCR processing
     if 'image' in request.files and request.files['image'].filename != '':
         image_file = request.files['image']
-        # text_extracted = easyocr_instance.readtext(image_file.read())
-        claim_text = "Extracted text from uploaded screenshot sample" 
-
-    # Mock response demonstrating architecture values
-    result = {
-        "verdict": "False",
-        "confidence": 94,
-        "explanation": "This claim contradicts verified clinical trials and systemic data published by the WHO and CDC. There is no empirical medical evidence supporting this mechanism.",
-        "entities": [
-            {"text": "Garlic tea", "label": "Treatment"},
-            {"text": "COVID-19", "label": "Disease_disorder"}
-        ],
-        "sources": ["WHO Fact Sheet 2024", "CDC Viral Pathogen Review", "PubMed Central PMC71123"],
-        "language_processed": language
+        image_bytes = image_file.read()
+
+        if language != 'en':
+            return jsonify({
+                "verdict": "Unverified",
+                "confidence": 0,
+                "explanation": "Screenshot OCR currently only supports English. Please select English, or paste the claim as text instead.",
+                "entities": [],
+                "sources": [],
+                "language_processed": language,
+            }), 422
+
+        try:
+            extracted_text = ocr_utils.extract_text_from_image(image_bytes)
+        except Exception:
+            return jsonify({
+                "verdict": "Unverified",
+                "confidence": 0,
+                "explanation": "Something went wrong reading this image. Please try a clearer screenshot or paste the claim as text.",
+                "entities": [],
+                "sources": [],
+                "language_processed": language,
+            }), 500
+
+        if not extracted_text:
+            return jsonify({
+                "verdict": "Unverified",
+                "confidence": 0,
+                "explanation": "Couldn't find any readable text in this image. Try a clearer or higher-resolution screenshot, or paste the claim as text.",
+                "entities": [],
+                "sources": [],
+                "language_processed": language,
+            }), 422
+
+        claim_text = extracted_text
+        ocr_used = True
+
+    if not claim_text:
+        return jsonify({"error": "No claim text provided."}), 400
+
+    result = verify_claim(claim_text)
+
+    # Persist to history
+    db.save_result(claim_text, result)
+
+    response = {
+        "verdict": result.get("verdict"),
+        "confidence": result.get("confidence"),
+        "explanation": result.get("explanation"),
+        "entities": result.get("entities", []),
+        "sources": result.get("sources", []),
+        "language_processed": language,
+        "ocr_used": ocr_used,
+        "claim_text_used": claim_text if ocr_used else None,
     }
-    
-    return jsonify(result)
+    return jsonify(response)
+
+
+@app.route('/api/history', methods=['GET'])
+def api_history():
+    limit = request.args.get('limit', default=20, type=int)
+    return jsonify(db.get_history(limit=limit))
+
 
 @app.route('/api/predict_spread', methods=['POST'])
 def api_predict_spread():
-    """Simulates GNN (GAT) Network Spread Risk Modeling"""
-    claim = request.json.get('claim', '')
-    
-    # Simulating structural graph risk evaluation
+    """
+    Spread Risk Modeling.
+    NOTE: the real GNN/GAT layer (Phase 6) isn't built yet -- this is a
+    clearly-labeled heuristic placeholder, not the trained model described
+    in the pitch. Swap this out once Phase 6 lands.
+    """
+    claim = (request.json or {}).get('claim', '')
+    if not claim.strip():
+        return jsonify({"error": "No claim provided."}), 400
+
     graph_data = {
         "virality_score": 87,
         "risk_level": "High Risk",
         "predicted_nodes_reached": 14200,
         "time_to_peak_hours": 12,
-        "network_hubs_vulnerable": ["WhatsApp Forwards Cluster A", "Public FB Groups"]
+        "network_hubs_vulnerable": ["WhatsApp Forwards Cluster A", "Public FB Groups"],
+        "is_simulated": True,  # tells the frontend to label this as a placeholder
     }
     return jsonify(graph_data)
 
+
+@app.route('/api/passport', methods=['GET', 'POST'])
+def api_passport():
+    if request.method == 'POST':
+        data = request.get_json(force=True) or {}
+        required_defaults = {
+            "full_name": "", "blood_group": "", "date_of_birth": "",
+            "allergies": "", "chronic_conditions": "", "current_medicines": "",
+            "emergency_contact_name": "", "emergency_contact_phone": "",
+        }
+        for key, default in required_defaults.items():
+            data.setdefault(key, default)
+        hp.save_passport(data)
+        return jsonify({"status": "saved"})
+
+    passport_data = hp.get_passport()
+    if not passport_data:
+        return jsonify(None)
+    return jsonify(passport_data)
+
+
+@app.route('/api/passport/qr', methods=['GET'])
+def api_passport_qr():
+    passport_data = hp.get_passport()
+    if not passport_data:
+        return jsonify({"error": "No passport saved yet."}), 404
+    png_bytes = hp.generate_qr_code(passport_data)
+    return Response(png_bytes, mimetype='image/png')
+
+
 if __name__ == '__main__':
-    app.run(debug=True, port=5000)
+    app.run(debug=True, port=5000, use_reloader=False)

data/health_facts_seed.json

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4376df4d1bff043b0c155e358792a701436252d3d47935b038dc288f8ae66474
-size 8202
+oid sha256:0b37db9fc22f16c8b3f0e01480b0c8e169341965227ee23456cf73ebc2416b58
+size 8500

ocr_utils.py

@@ -0,0 +1,61 @@
+"""
+PHASE 7: OCR module for screenshot/image claim input.
+
+Extracts text from uploaded images (e.g. WhatsApp forward screenshots) using
+EasyOCR, so claims that arrive as pictures -- not just typed text -- can be
+verified.
+
+NOTE ON LANGUAGE SCOPE:
+English only for now. EasyOCR requires language packs to be loaded together
+into one Reader, and not all language combinations are compatible with each
+other -- so "just add every language" isn't a one-line change. Supporting
+Hindi/Marathi screenshots properly means loading a second Reader instance for
+those languages and routing to it based on the user's language selection.
+That's flagged as follow-up work, not done here.
+
+First run downloads EasyOCR's detection + recognition models (~100MB) --
+same one-time-download pattern as the NER model in ner_utils.py.
+"""
+
+import easyocr
+
+# Load once at import time, reuse across calls (loading the reader is the
+# slow part -- don't do this per-request).
+_reader = easyocr.Reader(['en'], gpu=False)
+
+# Below this confidence, EasyOCR's guess is unreliable enough that including
+# it does more harm than good to the downstream claim text.
+MIN_CONFIDENCE = 0.4
+
+
+def extract_text_from_image(image_bytes: bytes) -> str:
+    """
+    Runs OCR on raw image bytes and returns the concatenated recognized text,
+    in reading order top-to-bottom as EasyOCR detects it.
+
+    Returns an empty string if nothing readable was found above the
+    confidence threshold -- callers should treat that as "OCR failed" and
+    not silently pass empty text further down the pipeline.
+    """
+    results = _reader.readtext(image_bytes)
+
+    lines = [text.strip() for (_bbox, text, confidence) in results if confidence >= MIN_CONFIDENCE]
+    return " ".join(lines).strip()
+
+
+if __name__ == "__main__":
+    # Quick manual test -- run: python ocr_utils.py path/to/screenshot.png
+    import sys
+
+    if len(sys.argv) < 2:
+        print("Usage: python ocr_utils.py <path_to_image>")
+        sys.exit(1)
+
+    with open(sys.argv[1], "rb") as f:
+        image_bytes = f.read()
+
+    text = extract_text_from_image(image_bytes)
+    if text:
+        print(f"Extracted text:\n{text}")
+    else:
+        print("No readable text found above confidence threshold.")

requirements.txt

@@ -1,4 +1,5 @@
 # ==== PHASE 1-3: Core pipeline (install this first) ====
+Flask
 groq
 chromadb
 sentence-transformers
@@ -14,7 +15,7 @@ torch
 # datasets
 
 # ==== PHASE 7: OCR ====
-# easyocr
+easyocr
 
 # ==== Data sources ====
 requests
@@ -22,4 +23,3 @@ biopython
 
 # ==== Health Passport (Day 4) ====
 qrcode[pil]
- 

static/css/static/css/style.css

@@ -0,0 +1,26 @@
+/* VeriMed AI -- small additions beyond Tailwind's utility classes */
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+/* Keep only the shareable card visible when exporting via window.print() */
+@media print {
+    nav, footer, #checkerForm, #resultsPlaceholder,
+    #verdictBadge, .grid.grid-cols-1.md\:grid-cols-2 {
+        display: none !important;
+    }
+    #shareCardGraphic {
+        box-shadow: none !important;
+    }
+}
+
+/* Smooth fade-in for result panels */
+#resultsCard, #predictOutputPanel {
+    animation: fadeIn 0.25s ease-in-out;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(4px); }
+    to { opacity: 1; transform: translateY(0); }
+}

static/css/style.css

@@ -1,16 +1,26 @@
-@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
+/* VeriMed AI -- small additions beyond Tailwind's utility classes */
 
 body {
-    font-family: 'Plus Jakarta Sans', sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }
 
-.glass-card {
-    background: rgba(255, 255, 255, 0.75);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
+/* Keep only the shareable card visible when exporting via window.print() */
+@media print {
+    nav, footer, #checkerForm, #resultsPlaceholder,
+    #verdictBadge, .grid.grid-cols-1.md\:grid-cols-2 {
+        display: none !important;
+    }
+    #shareCardGraphic {
+        box-shadow: none !important;
+    }
 }
 
-/* Custom Color Maps for Verification Verdict Returns */
-.verdict-true { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.3); color: #065f46; }
-.verdict-false { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.3); color: #991b1b; }
-.verdict-misleading { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.3); color: #92400e; }
+/* Smooth fade-in for result panels */
+#resultsCard, #predictOutputPanel {
+    animation: fadeIn 0.25s ease-in-out;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(4px); }
+    to { opacity: 1; transform: translateY(0); }
+}

static/js/main.js

@@ -1,96 +1,255 @@
-// Handles Multimodal Fact Checker Forms
-const checkerForm = document.getElementById('checkerForm');
+// VeriMed AI -- frontend logic
+// Wires the checker, predictor, and passport pages to the Flask API.
+
+// ---------- Helpers ----------
+
+function verdictColorClasses(verdict) {
+    switch ((verdict || "").toLowerCase()) {
+        case "true":
+            return { badge: "bg-emerald-50 border-emerald-200 text-emerald-700", bar: "bg-emerald-600" };
+        case "false":
+            return { badge: "bg-red-50 border-red-200 text-red-700", bar: "bg-red-600" };
+        case "misleading":
+            return { badge: "bg-amber-50 border-amber-200 text-amber-700", bar: "bg-amber-600" };
+        default:
+            return { badge: "bg-slate-50 border-slate-200 text-slate-700", bar: "bg-slate-500" };
+    }
+}
+
+function escapeHtml(str) {
+    const div = document.createElement("div");
+    div.textContent = str == null ? "" : String(str);
+    return div.innerHTML;
+}
+
+// ---------- Checker page ----------
+
+const checkerForm = document.getElementById("checkerForm");
 if (checkerForm) {
-    checkerForm.addEventListener('submit', async (e) => {
+    const imageInput = document.getElementById("imageInput");
+    const fileNameLabel = document.getElementById("fileName");
+
+    if (imageInput) {
+        imageInput.addEventListener("change", () => {
+            if (imageInput.files.length > 0) {
+                fileNameLabel.textContent = `Selected: ${imageInput.files[0].name}`;
+            }
+        });
+    }
+
+    checkerForm.addEventListener("submit", async (e) => {
         e.preventDefault();
-        const formData = new FormData(checkerForm);
-        
-        // Show loading progress state
-        document.getElementById('resultsPlaceholder').classList.add('hidden');
-        const resultsCard = document.getElementById('resultsCard');
-        resultsCard.classList.remove('hidden');
-        document.getElementById('verdictLabel').innerText = "Processing Pipeline... 🧬";
-        document.getElementById('explanationText').innerText = "Extracting entities via BioBERT & checking RAG sources[cite: 1]...";
+
+        const submitBtn = checkerForm.querySelector("button[type='submit']");
+        const originalBtnHtml = submitBtn.innerHTML;
+        submitBtn.disabled = true;
+        submitBtn.innerHTML = `<i class="fa-solid fa-spinner fa-spin"></i> Analyzing...`;
+
+        const placeholder = document.getElementById("resultsPlaceholder");
+        const resultsCard = document.getElementById("resultsCard");
 
         try {
-            const response = await fetch('/api/verify', { method: 'POST', body: formData });
-            const data = await response.json();
-
-            // Render Dynamic UI Updates based on response
-            const badge = document.getElementById('verdictBadge');
-            badge.className = `p-5 rounded-2xl border flex flex-col gap-2 verdict-${data.verdict.toLowerCase()}`;
-            
-            document.getElementById('verdictLabel').innerText = `Verdict: ${data.verdict}`;
-            document.getElementById('explanationText').innerText = data.explanation;
-            document.getElementById('confidenceValue').innerText = `${data.confidence}%`;
-            document.getElementById('confidenceBar').style.width = `${data.confidence}%`;
-
-            // Build Medical Entity Chips[cite: 1]
-            const entityContainer = document.getElementById('entityContainer');
-            entityContainer.innerHTML = data.entities.map(e => 
-                `<span class="bg-blue-50 text-blue-700 text-[11px] font-bold px-2.5 py-1 rounded-full border border-blue-200">${e.text} &middot; ${e.label}</span>`
-            ).join('');
-
-            // Build Source Citation Chips[cite: 1]
-            const sourceContainer = document.getElementById('sourceContainer');
-            sourceContainer.innerHTML = data.sources.map(s => 
-                `<span class="flex items-center gap-1.5"><i class="fa-solid fa-circle-check text-emerald-500 text-[10px]"></i> ${s}</span>`
-            ).join('');
-
-            // Fill Shareable Notice Card
-            document.getElementById('shareVerdict').innerText = `🚨 MYTH CHECK: ${data.verdict}`;
-            document.getElementById('shareExplanation').innerText = `"${data.explanation}"`;
+            const formData = new FormData(checkerForm);
+            const res = await fetch("/api/verify", { method: "POST", body: formData });
+            const data = await res.json();
 
+            if (!res.ok) {
+                throw new Error(data.explanation || data.error || "Verification failed.");
+            }
+
+            renderCheckerResult(data);
+            placeholder.classList.add("hidden");
+            resultsCard.classList.remove("hidden");
         } catch (err) {
-            console.error("Pipeline failure: ", err);
+            placeholder.classList.remove("hidden");
+            resultsCard.classList.add("hidden");
+            placeholder.innerHTML = `
+                <i class="fa-solid fa-triangle-exclamation text-4xl mb-3 text-red-400"></i>
+                <p class="font-bold text-sm text-red-500">${escapeHtml(err.message)}</p>
+            `;
+        } finally {
+            submitBtn.disabled = false;
+            submitBtn.innerHTML = originalBtnHtml;
         }
     });
 }
 
-// Handles GNN Structural Virality Simulators[cite: 1]
-async function runPredictionPipeline() {
-    const claim = document.getElementById('predictInput').value;
-    const panel = document.getElementById('predictOutputPanel');
-    if (!claim) return alert("Please specify narrative terms.");
+function renderCheckerResult(data) {
+    const colors = verdictColorClasses(data.verdict);
+
+    const verdictBadge = document.getElementById("verdictBadge");
+    verdictBadge.className = `p-5 rounded-2xl border flex flex-col gap-2 ${colors.badge}`;
 
-    panel.innerHTML = `<div class="m-auto text-xs font-bold animate-pulse text-purple-400"><i class="fa-solid fa-spinner fa-spin text-lg mr-2"></i>Executing topological structural edge learning evaluation matrices[cite: 1]...</div>`;
+    // If the claim came from an uploaded screenshot, show the OCR'd text so
+    // the user can confirm it was read correctly before trusting the verdict.
+    let ocrNote = "";
+    const existingOcrNote = document.getElementById("ocrExtractedNote");
+    if (existingOcrNote) existingOcrNote.remove();
+    if (data.ocr_used && data.claim_text_used) {
+        ocrNote = document.createElement("div");
+        ocrNote.id = "ocrExtractedNote";
+        ocrNote.className = "text-[11px] font-semibold text-slate-500 bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 mb-1";
+        ocrNote.innerHTML = `<i class="fa-solid fa-text-height mr-1"></i> Text read from image: "${escapeHtml(data.claim_text_used)}"`;
+        verdictBadge.parentElement.insertBefore(ocrNote, verdictBadge);
+    }
 
-    const response = await fetch('/api/predict_spread', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ claim })
+    document.getElementById("verdictLabel").textContent = data.verdict || "Unverified";
+    document.getElementById("explanationText").textContent = data.explanation || "";
+
+    const confidence = Number(data.confidence) || 0;
+    document.getElementById("confidenceValue").textContent = `${confidence}%`;
+    const bar = document.getElementById("confidenceBar");
+    bar.style.width = `${confidence}%`;
+    bar.className = `h-full transition-all duration-500 ${colors.bar}`;
+
+    const entityContainer = document.getElementById("entityContainer");
+    entityContainer.innerHTML = "";
+    (data.entities || []).forEach((ent) => {
+        const chip = document.createElement("span");
+        chip.className = "text-[11px] font-bold bg-blue-50 text-blue-700 px-2.5 py-1 rounded-full border border-blue-100";
+        chip.textContent = `${ent.text} · ${ent.label}`;
+        entityContainer.appendChild(chip);
     });
-    const data = await response.json();
+    if (!data.entities || data.entities.length === 0) {
+        entityContainer.innerHTML = `<span class="text-xs text-slate-400">No entities detected.</span>`;
+    }
+
+    const sourceContainer = document.getElementById("sourceContainer");
+    sourceContainer.innerHTML = "";
+    (data.sources || []).forEach((src) => {
+        const line = document.createElement("div");
+        line.innerHTML = `<i class="fa-solid fa-check text-emerald-500 mr-1"></i> ${escapeHtml(src)}`;
+        sourceContainer.appendChild(line);
+    });
+    if (!data.sources || data.sources.length === 0) {
+        sourceContainer.innerHTML = `<span class="text-xs text-slate-400">No sources returned.</span>`;
+    }
+
+    document.getElementById("shareVerdict").textContent = `Verdict: ${data.verdict || "Unverified"}`;
+    document.getElementById("shareExplanation").textContent = data.explanation || "";
+}
+
+// ---------- Predictor page ----------
+
+async function runPredictionPipeline() {
+    const input = document.getElementById("predictInput");
+    const panel = document.getElementById("predictOutputPanel");
+    const claim = input.value.trim();
+
+    if (!claim) {
+        panel.innerHTML = `<div class="m-auto text-center text-amber-400 font-bold text-xs">Enter a claim first.</div>`;
+        return;
+    }
 
     panel.innerHTML = `
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
-            <div class="bg-slate-800/60 p-4 rounded-xl border border-purple-900/40">
-                <span class="text-[10px] text-purple-400 uppercase font-bold tracking-wider">Virality Risk Score[cite: 1]</span>
-                <h4 class="text-2xl font-black text-purple-400 mt-1">${data.virality_score}%</h4>
-            </div>
-            <div class="bg-slate-800/60 p-4 rounded-xl border border-purple-900/40">
-                <span class="text-[10px] text-purple-400 uppercase font-bold tracking-wider">Node Critical Level[cite: 1]</span>
-                <h4 class="text-2xl font-black text-red-400 mt-1">${data.risk_level}</h4>
-            </div>
-            <div class="bg-slate-800/60 p-4 rounded-xl border border-purple-900/40">
-                <span class="text-[10px] text-purple-400 uppercase font-bold tracking-wider">Peak Horizon Reach[cite: 1]</span>
-                <h4 class="text-2xl font-black text-cyan-400 mt-1">${data.time_to_peak_hours} Hours</h4>
-            </div>
-        </div>
-        <div class="bg-slate-800/40 p-4 rounded-xl border border-slate-800">
-            <span class="text-[10px] uppercase text-slate-400 font-bold block mb-2">High-Risk Hub Vulnerability Map</span>
-            <ul class="text-xs text-slate-300 flex flex-col gap-1.5">
-                ${data.network_hubs_vulnerable.map(h => `<li><i class="fa-solid fa-triangle-exclamation text-amber-500 mr-2"></i> At Risk: <b>${h}</b></li>`).join('')}
-            </ul>
+        <div class="m-auto text-center text-slate-500 font-bold text-xs flex flex-col gap-2 items-center">
+            <i class="fa-solid fa-circle-nodes text-3xl text-purple-500/50 animate-spin"></i>
+            Running network spread simulation...
         </div>
     `;
+
+    try {
+        const res = await fetch("/api/predict_spread", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ claim }),
+        });
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.error || "Prediction failed.");
+
+        const riskColor = data.risk_level === "High Risk" ? "text-red-400" : "text-emerald-400";
+        panel.innerHTML = `
+            ${data.is_simulated ? `<div class="text-[10px] uppercase tracking-wider font-bold text-amber-400 mb-1">
+                <i class="fa-solid fa-flask mr-1"></i> Simulated placeholder -- GNN model not yet trained
+            </div>` : ""}
+            <div class="grid grid-cols-2 gap-4">
+                <div class="bg-slate-800/60 rounded-xl p-4">
+                    <span class="text-[10px] uppercase font-bold text-slate-400">Virality Score</span>
+                    <div class="text-3xl font-black mt-1">${escapeHtml(data.virality_score)}</div>
+                </div>
+                <div class="bg-slate-800/60 rounded-xl p-4">
+                    <span class="text-[10px] uppercase font-bold text-slate-400">Risk Level</span>
+                    <div class="text-xl font-black mt-1 ${riskColor}">${escapeHtml(data.risk_level)}</div>
+                </div>
+                <div class="bg-slate-800/60 rounded-xl p-4">
+                    <span class="text-[10px] uppercase font-bold text-slate-400">Predicted Nodes Reached</span>
+                    <div class="text-2xl font-black mt-1">${escapeHtml(data.predicted_nodes_reached)}</div>
+                </div>
+                <div class="bg-slate-800/60 rounded-xl p-4">
+                    <span class="text-[10px] uppercase font-bold text-slate-400">Time To Peak</span>
+                    <div class="text-2xl font-black mt-1">${escapeHtml(data.time_to_peak_hours)}h</div>
+                </div>
+            </div>
+            <div class="bg-slate-800/60 rounded-xl p-4">
+                <span class="text-[10px] uppercase font-bold text-slate-400 block mb-2">Vulnerable Network Hubs</span>
+                <div class="flex flex-wrap gap-2">
+                    ${(data.network_hubs_vulnerable || []).map(h => `<span class="text-[11px] font-bold bg-purple-500/10 text-purple-300 px-2.5 py-1 rounded-full border border-purple-500/20">${escapeHtml(h)}</span>`).join("")}
+                </div>
+            </div>
+        `;
+    } catch (err) {
+        panel.innerHTML = `<div class="m-auto text-center text-red-400 font-bold text-xs">${escapeHtml(err.message)}</div>`;
+    }
 }
 
-// File Input Name Decorator
-const imgInput = document.getElementById('imageInput');
-if (imgInput) {
-    imgInput.addEventListener('change', (e) => {
-        const file = e.target.files[0];
-        if (file) document.getElementById('fileName').innerText = `Selected File: ${file.name} (OCR Ready)[cite: 1]`;
+// ---------- Passport page ----------
+
+const passportForm = document.getElementById("passportForm");
+if (passportForm) {
+    // Load any existing saved passport on page load
+    fetch("/api/passport")
+        .then((res) => res.json())
+        .then((data) => {
+            if (!data) return;
+            document.getElementById("passName").value = data.full_name || "";
+            document.getElementById("passBlood").value = data.blood_group || "";
+            document.getElementById("passAllergies").value = data.allergies || "";
+            document.getElementById("passMeds").value = data.current_medicines || "";
+            document.getElementById("passContact").value = data.emergency_contact_name || "";
+            document.getElementById("passPhone").value = data.emergency_contact_phone || "";
+            showQrCode();
+        })
+        .catch(() => {});
+
+    passportForm.addEventListener("submit", async (e) => {
+        e.preventDefault();
+
+        const payload = {
+            full_name: document.getElementById("passName").value,
+            blood_group: document.getElementById("passBlood").value,
+            date_of_birth: "",
+            allergies: document.getElementById("passAllergies").value,
+            chronic_conditions: "",
+            current_medicines: document.getElementById("passMeds").value,
+            emergency_contact_name: document.getElementById("passContact").value,
+            emergency_contact_phone: document.getElementById("passPhone").value,
+        };
+
+        const submitBtn = passportForm.querySelector("button[type='submit']");
+        const originalText = submitBtn.textContent;
+        submitBtn.disabled = true;
+        submitBtn.textContent = "Saving...";
+
+        try {
+            const res = await fetch("/api/passport", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(payload),
+            });
+            if (!res.ok) throw new Error("Failed to save passport.");
+            showQrCode();
+        } catch (err) {
+            alert(err.message);
+        } finally {
+            submitBtn.disabled = false;
+            submitBtn.textContent = originalText;
+        }
     });
-}
+}
+
+function showQrCode() {
+    const qrContainer = document.getElementById("qrContainer");
+    if (!qrContainer) return;
+    // Cache-bust so the browser doesn't show a stale QR after an update
+    qrContainer.innerHTML = `<img src="/api/passport/qr?t=${Date.now()}" alt="Health Passport QR Code" class="w-40 h-40 object-contain" />`;
+}

static/js/static/js/main.js

@@ -0,0 +1,241 @@
+// VeriMed AI -- frontend logic
+// Wires the checker, predictor, and passport pages to the Flask API.
+
+// ---------- Helpers ----------
+
+function verdictColorClasses(verdict) {
+    switch ((verdict || "").toLowerCase()) {
+        case "true":
+            return { badge: "bg-emerald-50 border-emerald-200 text-emerald-700", bar: "bg-emerald-600" };
+        case "false":
+            return { badge: "bg-red-50 border-red-200 text-red-700", bar: "bg-red-600" };
+        case "misleading":
+            return { badge: "bg-amber-50 border-amber-200 text-amber-700", bar: "bg-amber-600" };
+        default:
+            return { badge: "bg-slate-50 border-slate-200 text-slate-700", bar: "bg-slate-500" };
+    }
+}
+
+function escapeHtml(str) {
+    const div = document.createElement("div");
+    div.textContent = str == null ? "" : String(str);
+    return div.innerHTML;
+}
+
+// ---------- Checker page ----------
+
+const checkerForm = document.getElementById("checkerForm");
+if (checkerForm) {
+    const imageInput = document.getElementById("imageInput");
+    const fileNameLabel = document.getElementById("fileName");
+
+    if (imageInput) {
+        imageInput.addEventListener("change", () => {
+            if (imageInput.files.length > 0) {
+                fileNameLabel.textContent = `Selected: ${imageInput.files[0].name}`;
+            }
+        });
+    }
+
+    checkerForm.addEventListener("submit", async (e) => {
+        e.preventDefault();
+
+        const submitBtn = checkerForm.querySelector("button[type='submit']");
+        const originalBtnHtml = submitBtn.innerHTML;
+        submitBtn.disabled = true;
+        submitBtn.innerHTML = `<i class="fa-solid fa-spinner fa-spin"></i> Analyzing...`;
+
+        const placeholder = document.getElementById("resultsPlaceholder");
+        const resultsCard = document.getElementById("resultsCard");
+
+        try {
+            const formData = new FormData(checkerForm);
+            const res = await fetch("/api/verify", { method: "POST", body: formData });
+            const data = await res.json();
+
+            if (!res.ok) {
+                throw new Error(data.explanation || data.error || "Verification failed.");
+            }
+
+            renderCheckerResult(data);
+            placeholder.classList.add("hidden");
+            resultsCard.classList.remove("hidden");
+        } catch (err) {
+            placeholder.classList.remove("hidden");
+            resultsCard.classList.add("hidden");
+            placeholder.innerHTML = `
+                <i class="fa-solid fa-triangle-exclamation text-4xl mb-3 text-red-400"></i>
+                <p class="font-bold text-sm text-red-500">${escapeHtml(err.message)}</p>
+            `;
+        } finally {
+            submitBtn.disabled = false;
+            submitBtn.innerHTML = originalBtnHtml;
+        }
+    });
+}
+
+function renderCheckerResult(data) {
+    const colors = verdictColorClasses(data.verdict);
+
+    const verdictBadge = document.getElementById("verdictBadge");
+    verdictBadge.className = `p-5 rounded-2xl border flex flex-col gap-2 ${colors.badge}`;
+    document.getElementById("verdictLabel").textContent = data.verdict || "Unverified";
+    document.getElementById("explanationText").textContent = data.explanation || "";
+
+    const confidence = Number(data.confidence) || 0;
+    document.getElementById("confidenceValue").textContent = `${confidence}%`;
+    const bar = document.getElementById("confidenceBar");
+    bar.style.width = `${confidence}%`;
+    bar.className = `h-full transition-all duration-500 ${colors.bar}`;
+
+    const entityContainer = document.getElementById("entityContainer");
+    entityContainer.innerHTML = "";
+    (data.entities || []).forEach((ent) => {
+        const chip = document.createElement("span");
+        chip.className = "text-[11px] font-bold bg-blue-50 text-blue-700 px-2.5 py-1 rounded-full border border-blue-100";
+        chip.textContent = `${ent.text} · ${ent.label}`;
+        entityContainer.appendChild(chip);
+    });
+    if (!data.entities || data.entities.length === 0) {
+        entityContainer.innerHTML = `<span class="text-xs text-slate-400">No entities detected.</span>`;
+    }
+
+    const sourceContainer = document.getElementById("sourceContainer");
+    sourceContainer.innerHTML = "";
+    (data.sources || []).forEach((src) => {
+        const line = document.createElement("div");
+        line.innerHTML = `<i class="fa-solid fa-check text-emerald-500 mr-1"></i> ${escapeHtml(src)}`;
+        sourceContainer.appendChild(line);
+    });
+    if (!data.sources || data.sources.length === 0) {
+        sourceContainer.innerHTML = `<span class="text-xs text-slate-400">No sources returned.</span>`;
+    }
+
+    document.getElementById("shareVerdict").textContent = `Verdict: ${data.verdict || "Unverified"}`;
+    document.getElementById("shareExplanation").textContent = data.explanation || "";
+}
+
+// ---------- Predictor page ----------
+
+async function runPredictionPipeline() {
+    const input = document.getElementById("predictInput");
+    const panel = document.getElementById("predictOutputPanel");
+    const claim = input.value.trim();
+
+    if (!claim) {
+        panel.innerHTML = `<div class="m-auto text-center text-amber-400 font-bold text-xs">Enter a claim first.</div>`;
+        return;
+    }
+
+    panel.innerHTML = `
+        <div class="m-auto text-center text-slate-500 font-bold text-xs flex flex-col gap-2 items-center">
+            <i class="fa-solid fa-circle-nodes text-3xl text-purple-500/50 animate-spin"></i>
+            Running network spread simulation...
+        </div>
+    `;
+
+    try {
+        const res = await fetch("/api/predict_spread", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ claim }),
+        });
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.error || "Prediction failed.");
+
+        const riskColor = data.risk_level === "High Risk" ? "text-red-400" : "text-emerald-400";
+        panel.innerHTML = `
+            ${data.is_simulated ? `<div class="text-[10px] uppercase tracking-wider font-bold text-amber-400 mb-1">
+                <i class="fa-solid fa-flask mr-1"></i> Simulated placeholder -- GNN model not yet trained
+            </div>` : ""}
+            <div class="grid grid-cols-2 gap-4">
+                <div class="bg-slate-800/60 rounded-xl p-4">
+                    <span class="text-[10px] uppercase font-bold text-slate-400">Virality Score</span>
+                    <div class="text-3xl font-black mt-1">${escapeHtml(data.virality_score)}</div>
+                </div>
+                <div class="bg-slate-800/60 rounded-xl p-4">
+                    <span class="text-[10px] uppercase font-bold text-slate-400">Risk Level</span>
+                    <div class="text-xl font-black mt-1 ${riskColor}">${escapeHtml(data.risk_level)}</div>
+                </div>
+                <div class="bg-slate-800/60 rounded-xl p-4">
+                    <span class="text-[10px] uppercase font-bold text-slate-400">Predicted Nodes Reached</span>
+                    <div class="text-2xl font-black mt-1">${escapeHtml(data.predicted_nodes_reached)}</div>
+                </div>
+                <div class="bg-slate-800/60 rounded-xl p-4">
+                    <span class="text-[10px] uppercase font-bold text-slate-400">Time To Peak</span>
+                    <div class="text-2xl font-black mt-1">${escapeHtml(data.time_to_peak_hours)}h</div>
+                </div>
+            </div>
+            <div class="bg-slate-800/60 rounded-xl p-4">
+                <span class="text-[10px] uppercase font-bold text-slate-400 block mb-2">Vulnerable Network Hubs</span>
+                <div class="flex flex-wrap gap-2">
+                    ${(data.network_hubs_vulnerable || []).map(h => `<span class="text-[11px] font-bold bg-purple-500/10 text-purple-300 px-2.5 py-1 rounded-full border border-purple-500/20">${escapeHtml(h)}</span>`).join("")}
+                </div>
+            </div>
+        `;
+    } catch (err) {
+        panel.innerHTML = `<div class="m-auto text-center text-red-400 font-bold text-xs">${escapeHtml(err.message)}</div>`;
+    }
+}
+
+// ---------- Passport page ----------
+
+const passportForm = document.getElementById("passportForm");
+if (passportForm) {
+    // Load any existing saved passport on page load
+    fetch("/api/passport")
+        .then((res) => res.json())
+        .then((data) => {
+            if (!data) return;
+            document.getElementById("passName").value = data.full_name || "";
+            document.getElementById("passBlood").value = data.blood_group || "";
+            document.getElementById("passAllergies").value = data.allergies || "";
+            document.getElementById("passMeds").value = data.current_medicines || "";
+            document.getElementById("passContact").value = data.emergency_contact_name || "";
+            document.getElementById("passPhone").value = data.emergency_contact_phone || "";
+            showQrCode();
+        })
+        .catch(() => {});
+
+    passportForm.addEventListener("submit", async (e) => {
+        e.preventDefault();
+
+        const payload = {
+            full_name: document.getElementById("passName").value,
+            blood_group: document.getElementById("passBlood").value,
+            date_of_birth: "",
+            allergies: document.getElementById("passAllergies").value,
+            chronic_conditions: "",
+            current_medicines: document.getElementById("passMeds").value,
+            emergency_contact_name: document.getElementById("passContact").value,
+            emergency_contact_phone: document.getElementById("passPhone").value,
+        };
+
+        const submitBtn = passportForm.querySelector("button[type='submit']");
+        const originalText = submitBtn.textContent;
+        submitBtn.disabled = true;
+        submitBtn.textContent = "Saving...";
+
+        try {
+            const res = await fetch("/api/passport", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(payload),
+            });
+            if (!res.ok) throw new Error("Failed to save passport.");
+            showQrCode();
+        } catch (err) {
+            alert(err.message);
+        } finally {
+            submitBtn.disabled = false;
+            submitBtn.textContent = originalText;
+        }
+    });
+}
+
+function showQrCode() {
+    const qrContainer = document.getElementById("qrContainer");
+    if (!qrContainer) return;
+    // Cache-bust so the browser doesn't show a stale QR after an update
+    qrContainer.innerHTML = `<img src="/api/passport/qr?t=${Date.now()}" alt="Health Passport QR Code" class="w-40 h-40 object-contain" />`;
+}