Add disclaimer section and error report form with HF upload

app/main.py

@@ -1,9 +1,13 @@
 import io
+import json
+import os
 import random
 import tempfile
+import uuid
+from datetime import datetime, timezone
 from pathlib import Path
 
-from fastapi import FastAPI, File, HTTPException, UploadFile
+from fastapi import FastAPI, File, Form, HTTPException, UploadFile
 from fastapi.staticfiles import StaticFiles
 from PIL import Image, ImageOps
 
@@ -18,6 +22,9 @@ N_VIDEO_FRAMES = 5
 IMAGE_TYPES = {"image/jpeg", "image/jpg", "image/png", "image/webp"}
 VIDEO_TYPES = {"video/mp4", "video/quicktime", "video/webm", "video/x-matroska"}
 
+HF_REPORT_REPO = os.environ.get("HF_REPORT_REPO", "ComplexDataLab/openfake-reports")
+HF_TOKEN = os.environ.get("HF_TOKEN")
+
 app = FastAPI(title="Deepfake Detector")
 
 
@@ -123,5 +130,77 @@ async def predict(file: UploadFile = File(...)):
     raise HTTPException(415, f"Unsupported media type: {content_type}")
 
 
+@app.post("/api/report")
+async def report(
+    file: UploadFile = File(...),
+    is_real: str = Form(...),
+    reason: str = Form(...),
+    reason_other: str = Form(""),
+    comment: str = Form(""),
+    p_fake: float = Form(...),
+    consent: str = Form(...),
+):
+    """Save an error report (form answers + image) to a Hugging Face dataset repo."""
+    if consent != "true":
+        raise HTTPException(400, "Image saving consent is required.")
+
+    if not HF_TOKEN:
+        raise HTTPException(
+            503, "Reporting is not configured (missing HF_TOKEN)."
+        )
+
+    # Read the uploaded image
+    raw = await file.read()
+    content_type = (file.content_type or "").lower()
+    if content_type not in IMAGE_TYPES:
+        raise HTTPException(415, "Only images can be reported.")
+
+    # Build report payload
+    ts = datetime.now(timezone.utc).strftime("%Y-%m-%dT%H-%M-%S")
+    short_id = uuid.uuid4().hex[:8]
+    folder_name = f"{ts}_{short_id}"
+
+    report_data = {
+        "timestamp": datetime.now(timezone.utc).isoformat(),
+        "is_real": is_real,
+        "reason": reason,
+        "reason_other": reason_other if reason == "other" else "",
+        "comment": comment,
+        "p_fake": p_fake,
+        "original_filename": file.filename or "unknown",
+    }
+
+    # Write to a temp directory then upload to HF
+    with tempfile.TemporaryDirectory() as tmpdir:
+        report_dir = Path(tmpdir) / folder_name
+        report_dir.mkdir()
+
+        # Save report JSON
+        (report_dir / "report.json").write_text(
+            json.dumps(report_data, indent=2, ensure_ascii=False)
+        )
+
+        # Save image with original extension
+        ext = Path(file.filename or "image.jpg").suffix or ".jpg"
+        (report_dir / f"image{ext}").write_bytes(raw)
+
+        # Upload to HF dataset repo
+        try:
+            from huggingface_hub import HfApi
+
+            api = HfApi(token=HF_TOKEN)
+            api.upload_folder(
+                folder_path=str(report_dir),
+                path_in_repo=f"reports/{folder_name}",
+                repo_id=HF_REPORT_REPO,
+                repo_type="dataset",
+            )
+        except Exception as e:
+            raise HTTPException(500, f"Failed to upload report: {e}")
+
+    return {"status": "ok"}
+
+
 static_dir = Path(__file__).parent / "static"
 app.mount("/", StaticFiles(directory=str(static_dir), html=True), name="static")
+

app/requirements.txt

@@ -6,3 +6,4 @@ Pillow==10.4.0
 opencv-python-headless==4.10.0.84
 python-multipart==0.0.12
 numpy==1.26.4
+huggingface_hub>=0.23.0

app/static/index.html

@@ -127,22 +127,46 @@
             </div>
           </div>
 
-          <div class="mt-8 flex justify-center">
+          <div class="mt-8 flex flex-col sm:flex-row gap-3 justify-center">
             <button id="analyze-another-btn"
                     class="px-6 py-3 rounded-xl border border-gray-300 text-gray-700 font-semibold hover:bg-gray-50">
               <span data-i18n="analyze_another">Analyze another file</span>
             </button>
+            <button id="report-btn"
+                    class="px-6 py-3 rounded-xl border border-amber-300 bg-amber-50 text-amber-800 font-semibold hover:bg-amber-100 transition-colors flex items-center gap-2 justify-center">
+              <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4.5c-.77-.833-2.694-.833-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/>
+              </svg>
+              <span data-i18n="report_error">Signal an error</span>
+            </button>
           </div>
         </div>
       </section>
 
-      <footer class="mt-16 text-center text-xs text-gray-400">
-        <span data-i18n="privacy_note">Files are processed in memory and not stored.</span>
+      <!-- Disclaimer -->
+      <footer class="mt-16 max-w-2xl mx-auto">
+        <div class="rounded-xl border border-gray-200 bg-white p-5 shadow-sm">
+          <div class="flex items-start gap-3">
+            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-400 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+            </svg>
+            <div class="text-sm text-gray-500 space-y-2">
+              <p data-i18n="privacy_note">Files are processed in memory and not stored.</p>
+              <p class="font-medium text-gray-600" data-i18n="disclaimer_mistakes">This model can make mistakes.</p>
+              <p class="font-medium text-gray-600" data-i18n="disclaimer_known_issues_title">Known limitations:</p>
+              <ul class="list-disc list-inside space-y-1 text-gray-500">
+                <li data-i18n="disclaimer_lipsync">Lip sync and small inpainting may not be reliably detected.</li>
+                <li data-i18n="disclaimer_text_overlay">Images with text overlay are often incorrectly flagged as AI-generated.</li>
+                <li data-i18n="disclaimer_full_gen">The model is very good at detecting fully AI-generated images.</li>
+              </ul>
+            </div>
+          </div>
+        </div>
       </footer>
     </main>
   </div>
 
-  <!-- Modal -->
+  <!-- How-it-works Modal -->
   <div id="modal-backdrop" class="hidden fixed inset-0 bg-black/40 z-40"></div>
   <div id="modal" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4">
     <div class="bg-white rounded-2xl max-w-lg w-full p-6 shadow-xl">
@@ -156,6 +180,88 @@
     </div>
   </div>
 
+  <!-- Report Error Modal -->
+  <div id="report-backdrop" class="hidden fixed inset-0 bg-black/40 z-40"></div>
+  <div id="report-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4 overflow-y-auto">
+    <div class="bg-white rounded-2xl max-w-lg w-full p-6 shadow-xl my-8">
+      <h2 class="text-xl font-bold" data-i18n="report_title">Signal an error</h2>
+      <p class="mt-2 text-sm text-gray-500" data-i18n="report_description">Help us improve by reporting an incorrect result.</p>
+
+      <form id="report-form" class="mt-6 space-y-6">
+        <!-- Is the image real or AI? -->
+        <fieldset>
+          <legend class="text-sm font-semibold text-gray-900" data-i18n="report_is_real_label">Is this image real or AI-generated?</legend>
+          <div class="mt-3 space-y-2">
+            <label class="flex items-center gap-2 cursor-pointer">
+              <input type="radio" name="is_real" value="real" class="w-4 h-4 text-blue-600" required />
+              <span data-i18n="report_real">Real (authentic)</span>
+            </label>
+            <label class="flex items-center gap-2 cursor-pointer">
+              <input type="radio" name="is_real" value="ai" class="w-4 h-4 text-blue-600" />
+              <span data-i18n="report_ai">AI-generated or manipulated</span>
+            </label>
+          </div>
+        </fieldset>
+
+        <!-- Reason -->
+        <fieldset>
+          <legend class="text-sm font-semibold text-gray-900" data-i18n="report_reason_label">How do you know?</legend>
+          <div class="mt-3 space-y-2">
+            <label class="flex items-center gap-2 cursor-pointer">
+              <input type="radio" name="reason" value="self_made" class="w-4 h-4 text-blue-600" required />
+              <span data-i18n="report_reason_self">I generated or took this image myself</span>
+            </label>
+            <label class="flex items-center gap-2 cursor-pointer">
+              <input type="radio" name="reason" value="evidence" class="w-4 h-4 text-blue-600" />
+              <span data-i18n="report_reason_evidence">Clear evidence of manipulation</span>
+            </label>
+            <label class="flex items-center gap-2 cursor-pointer">
+              <input type="radio" name="reason" value="known_source" class="w-4 h-4 text-blue-600" />
+              <span data-i18n="report_reason_source">Known source of the image</span>
+            </label>
+            <label class="flex items-center gap-2 cursor-pointer">
+              <input type="radio" name="reason" value="other" class="w-4 h-4 text-blue-600" />
+              <span data-i18n="report_reason_other">Other</span>
+            </label>
+          </div>
+          <div id="reason-other-wrap" class="hidden mt-3">
+            <input id="reason-other-input" type="text" placeholder="" data-i18n-placeholder="report_reason_other_placeholder"
+                   class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none" />
+          </div>
+        </fieldset>
+
+        <!-- Comment -->
+        <div>
+          <label class="text-sm font-semibold text-gray-900" data-i18n="report_comment_label">Additional comments (optional)</label>
+          <textarea id="report-comment" rows="3"
+                    class="mt-2 w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none resize-none"></textarea>
+        </div>
+
+        <!-- Consent -->
+        <label class="flex items-start gap-3 cursor-pointer">
+          <input id="report-consent" type="checkbox" class="w-4 h-4 mt-0.5 text-blue-600 rounded" />
+          <span class="text-sm text-gray-700" data-i18n="report_consent">I allow saving this image for research purposes. This is required to submit the report.</span>
+        </label>
+
+        <!-- Error / success banners -->
+        <div id="report-error" class="hidden rounded-lg bg-red-50 border border-red-200 text-red-700 px-4 py-3 text-sm"></div>
+        <div id="report-success" class="hidden rounded-lg bg-green-50 border border-green-200 text-green-700 px-4 py-3 text-sm" data-i18n="report_success">Thank you! Your report has been submitted.</div>
+
+        <!-- Buttons -->
+        <div class="flex gap-3 justify-end">
+          <button type="button" id="report-cancel"
+                  class="px-4 py-2 rounded-lg border border-gray-300 text-gray-700 font-semibold hover:bg-gray-50">
+            <span data-i18n="report_cancel">Cancel</span>
+          </button>
+          <button type="submit" id="report-submit"
+                  class="px-4 py-2 rounded-lg bg-blue-600 text-white font-semibold hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors">
+            <span data-i18n="report_submit">Submit report</span>
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+
   <script>
     const I18N = {
       en: {
@@ -192,6 +298,32 @@
         how_calculated_body: "We use a Swin Transformer V2 model fine-tuned to distinguish real photographs from AI-generated images. For videos, we sample 5 frames evenly across the duration and average the model's confidence. The score shown is the model's estimated probability that the content was generated by AI.",
         close: "Close",
         privacy_note: "Files are processed in memory and not stored.",
+        disclaimer_mistakes: "This model can make mistakes.",
+        disclaimer_known_issues_title: "Known limitations:",
+        disclaimer_lipsync: "Lip sync and small inpainting may not be reliably detected.",
+        disclaimer_text_overlay: "Images with text overlay are often incorrectly flagged as AI-generated.",
+        disclaimer_full_gen: "The model is very good at detecting fully AI-generated images.",
+        report_error: "Signal an error",
+        report_title: "Signal an error",
+        report_description: "Help us improve by reporting an incorrect result.",
+        report_is_real_label: "Is this image real or AI-generated?",
+        report_real: "Real (authentic)",
+        report_ai: "AI-generated or manipulated",
+        report_reason_label: "How do you know?",
+        report_reason_self: "I generated or took this image myself",
+        report_reason_evidence: "Clear evidence of manipulation",
+        report_reason_source: "Known source of the image",
+        report_reason_other: "Other",
+        report_reason_other_placeholder: "Please specify…",
+        report_comment_label: "Additional comments (optional)",
+        report_consent: "I allow saving this image for research purposes. This is required to submit the report.",
+        report_cancel: "Cancel",
+        report_submit: "Submit report",
+        report_submitting: "Submitting...",
+        report_success: "Thank you! Your report has been submitted.",
+        report_error_consent: "You must allow saving the image to submit a report.",
+        report_error_fields: "Please fill in all required fields.",
+        report_error_generic: "Failed to submit the report. Please try again.",
       },
       fr: {
         title: "Détecteur d'hypertrucage",
@@ -227,6 +359,32 @@
         how_calculated_body: "Nous utilisons un modèle Swin Transformer V2 entraîné pour distinguer les vraies photographies des images générées par IA. Pour les vidéos, nous échantillonnons 5 images réparties uniformément sur la durée et faisons la moyenne de la confiance du modèle. Le score affiché correspond à la probabilité estimée que le contenu ait été généré par IA.",
         close: "Fermer",
         privacy_note: "Les fichiers sont traités en mémoire et ne sont pas conservés.",
+        disclaimer_mistakes: "Ce modèle peut faire des erreurs.",
+        disclaimer_known_issues_title: "Limitations connues :",
+        disclaimer_lipsync: "La synchronisation labiale et les petits inpaintings peuvent ne pas être détectés de manière fiable.",
+        disclaimer_text_overlay: "Les images avec du texte superposé sont souvent incorrectement signalées comme générées par IA.",
+        disclaimer_full_gen: "Le modèle est très performant pour détecter les images entièrement générées par IA.",
+        report_error: "Signaler une erreur",
+        report_title: "Signaler une erreur",
+        report_description: "Aidez-nous à nous améliorer en signalant un résultat incorrect.",
+        report_is_real_label: "Cette image est-elle réelle ou générée par IA ?",
+        report_real: "Réelle (authentique)",
+        report_ai: "Générée par IA ou manipulée",
+        report_reason_label: "Comment le savez-vous ?",
+        report_reason_self: "J'ai généré ou pris cette image moi-même",
+        report_reason_evidence: "Preuve claire de manipulation",
+        report_reason_source: "Source connue de l'image",
+        report_reason_other: "Autre",
+        report_reason_other_placeholder: "Veuillez préciser…",
+        report_comment_label: "Commentaires supplémentaires (optionnel)",
+        report_consent: "J'autorise la sauvegarde de cette image à des fins de recherche. Ceci est requis pour soumettre le signalement.",
+        report_cancel: "Annuler",
+        report_submit: "Envoyer le signalement",
+        report_submitting: "Envoi en cours...",
+        report_success: "Merci ! Votre signalement a été soumis.",
+        report_error_consent: "Vous devez autoriser la sauvegarde de l'image pour soumettre un signalement.",
+        report_error_fields: "Veuillez remplir tous les champs obligatoires.",
+        report_error_generic: "Échec de l'envoi du signalement. Veuillez réessayer.",
       },
     };
 
@@ -252,6 +410,10 @@
         const key = el.getAttribute("data-i18n");
         if (t()[key] != null) el.textContent = t()[key];
       });
+      document.querySelectorAll("[data-i18n-placeholder]").forEach((el) => {
+        const key = el.getAttribute("data-i18n-placeholder");
+        if (t()[key] != null) el.placeholder = t()[key];
+      });
       $("lang-en").className = "px-3 py-1 rounded-full font-semibold " +
         (state.lang === "en" ? "bg-blue-600 text-white" : "text-gray-600");
       $("lang-fr").className = "px-3 py-1 rounded-full font-semibold " +
@@ -492,6 +654,7 @@
       }
     }
 
+    /* --- How-it-works modal --- */
     function openModal() {
       $("modal").classList.remove("hidden");
       $("modal").classList.add("flex");
@@ -503,6 +666,93 @@
       $("modal-backdrop").classList.add("hidden");
     }
 
+    /* --- Report modal --- */
+    function openReportModal() {
+      // Reset the form
+      $("report-form").reset();
+      $("reason-other-wrap").classList.add("hidden");
+      $("report-error").classList.add("hidden");
+      $("report-success").classList.add("hidden");
+      $("report-submit").disabled = false;
+      $("report-submit").querySelector("[data-i18n]").textContent = t().report_submit;
+      // Show modal
+      $("report-modal").classList.remove("hidden");
+      $("report-modal").classList.add("flex");
+      $("report-backdrop").classList.remove("hidden");
+    }
+
+    function closeReportModal() {
+      $("report-modal").classList.add("hidden");
+      $("report-modal").classList.remove("flex");
+      $("report-backdrop").classList.add("hidden");
+    }
+
+    async function submitReport(e) {
+      e.preventDefault();
+      const T = t();
+      const errorEl = $("report-error");
+      const successEl = $("report-success");
+      errorEl.classList.add("hidden");
+      successEl.classList.add("hidden");
+
+      // Validate consent
+      if (!$("report-consent").checked) {
+        errorEl.textContent = T.report_error_consent;
+        errorEl.classList.remove("hidden");
+        return;
+      }
+
+      // Gather radio values
+      const isRealRadio = document.querySelector('input[name="is_real"]:checked');
+      const reasonRadio = document.querySelector('input[name="reason"]:checked');
+      if (!isRealRadio || !reasonRadio) {
+        errorEl.textContent = T.report_error_fields;
+        errorEl.classList.remove("hidden");
+        return;
+      }
+
+      // If reason is "other", require the text input
+      const reasonValue = reasonRadio.value;
+      const reasonOther = $("reason-other-input").value.trim();
+      if (reasonValue === "other" && !reasonOther) {
+        errorEl.textContent = T.report_error_fields;
+        errorEl.classList.remove("hidden");
+        return;
+      }
+
+      // Build form data
+      const formData = new FormData();
+      formData.append("file", state.file);
+      formData.append("is_real", isRealRadio.value);
+      formData.append("reason", reasonValue);
+      formData.append("reason_other", reasonOther);
+      formData.append("comment", $("report-comment").value.trim());
+      formData.append("p_fake", state.result ? state.result.p_fake : 0);
+      formData.append("consent", "true");
+
+      // Disable button and show loading
+      const submitBtn = $("report-submit");
+      submitBtn.disabled = true;
+      submitBtn.querySelector("[data-i18n]").textContent = T.report_submitting;
+
+      try {
+        const res = await fetch("/api/report", { method: "POST", body: formData });
+        if (!res.ok) {
+          const body = await res.json().catch(() => ({}));
+          throw new Error(body.detail || T.report_error_generic);
+        }
+        successEl.textContent = T.report_success;
+        successEl.classList.remove("hidden");
+        // Auto-close after 2s
+        setTimeout(() => closeReportModal(), 2000);
+      } catch (err) {
+        errorEl.textContent = err.message || T.report_error_generic;
+        errorEl.classList.remove("hidden");
+        submitBtn.disabled = false;
+        submitBtn.querySelector("[data-i18n]").textContent = T.report_submit;
+      }
+    }
+
     function init() {
       applyI18n();
 
@@ -547,11 +797,35 @@
         showCard("upload-card");
       });
 
+      // How-it-works modal
       $("how-link").addEventListener("click", openModal);
       $("modal-close").addEventListener("click", closeModal);
       $("modal-backdrop").addEventListener("click", closeModal);
+
+      // Report modal
+      $("report-btn").addEventListener("click", openReportModal);
+      $("report-cancel").addEventListener("click", closeReportModal);
+      $("report-backdrop").addEventListener("click", closeReportModal);
+      $("report-form").addEventListener("submit", submitReport);
+
+      // Toggle "other" reason text input
+      document.querySelectorAll('input[name="reason"]').forEach((radio) => {
+        radio.addEventListener("change", () => {
+          const wrap = $("reason-other-wrap");
+          if (radio.value === "other" && radio.checked) {
+            wrap.classList.remove("hidden");
+          } else {
+            wrap.classList.add("hidden");
+          }
+        });
+      });
+
+      // Escape key closes any open modal
       document.addEventListener("keydown", (e) => {
-        if (e.key === "Escape") closeModal();
+        if (e.key === "Escape") {
+          closeModal();
+          closeReportModal();
+        }
       });
     }