Add English and Urdu interface

Add a persistent language toggle, full Urdu RTL localization, translated interface states, and Urdu model responses for live assessments.

Co-Authored-By: Codex <noreply@openai.com>

app.py

@@ -40,7 +40,8 @@ REQUIRED_FIELDS = {
 EXAMPLE_CACHE_PATH = ROOT / "data" / "example_assessments.json"
 
 SYSTEM_PROMPT = """Assess Pakistani notices and messages for scam risk.
-Return only JSON matching the schema. Use simple, calm English.
+Return only JSON matching the schema. Use the response language requested by
+the user. Default to simple, calm English.
 
 Apply this label rubric strictly:
 - Looks normal: a relevant notice with no meaningful scam indicator and no
@@ -306,12 +307,19 @@ def call_model(
     text: str,
     image_data_url: str,
     telemetry: dict[str, Any] | None = None,
+    output_language: str = "en",
 ) -> dict[str, Any]:
     telemetry = telemetry if telemetry is not None else {}
     client, model_name = create_model_client()
+    language_instruction = (
+        "Write all user-facing JSON values in clear Urdu script."
+        if output_language == "ur"
+        else "Write all user-facing JSON values in simple English."
+    )
     prompt = (
         "Assess the following Pakistani notice or message for scam risk. "
-        "Explain visible evidence and give safe next steps.\n\n"
+        "Explain visible evidence and give safe next steps. "
+        f"{language_instruction}\n\n"
         f"Message text:\n{text.strip() or '[No text supplied; inspect the image.]'}"
     )
     content: Any = prompt
@@ -392,11 +400,13 @@ def analyze_notice(
     image_data_url: str = "",
     example_id: str = "",
     save_trace: bool = True,
+    output_language: str = "en",
 ) -> dict[str, Any]:
     """Analyze supplied text/image using the configured model only."""
     text = (text or "").strip()
     image_data_url = image_data_url or ""
     example_id = (example_id or "").strip()
+    output_language = "ur" if output_language == "ur" else "en"
 
     def finish(
         response: dict[str, Any],
@@ -451,7 +461,11 @@ def analyze_notice(
         )
     telemetry: dict[str, Any] = {}
     try:
-        result = call_model(text, image_data_url, telemetry)
+        result = (
+            call_model(text, image_data_url, telemetry, output_language="ur")
+            if output_language == "ur"
+            else call_model(text, image_data_url, telemetry)
+        )
         return finish(
             {
                 "ok": True,
@@ -493,8 +507,15 @@ def analyze_api(
     image_data_url: str = "",
     example_id: str = "",
     save_trace: bool = True,
+    output_language: str = "en",
 ) -> dict[str, Any]:
-    return analyze_notice(text, image_data_url, example_id, save_trace)
+    return analyze_notice(
+        text,
+        image_data_url,
+        example_id,
+        save_trace,
+        output_language,
+    )
 
 
 @app.api(name="status", description="Return model and privacy status.", queue=False)

static/app.js

@@ -16,11 +16,214 @@ const elements = {
   uploadHint: document.querySelector("#uploadHint"),
   textHint: document.querySelector("#textHint"),
   saveTrace: document.querySelector("#saveTrace"),
+  statusText: document.querySelector(".status-text"),
+  languageOptions: document.querySelectorAll(".language-option"),
+};
+
+const translations = {
+  en: {
+    pageTitle: "Pakistan Notice Helper",
+    pageDescription: "Check Pakistani notices and messages for common scam signals.",
+    statusChecking: "Checking model",
+    statusReady: "Modal model ready",
+    statusCredentials: "Modal credentials required",
+    statusUnavailable: "Modal model unavailable",
+    heroEyebrow: "Understand before you act",
+    heroTitle: "Does this notice look",
+    heroSafe: "safe?",
+    heroText: "Check suspicious bills, bank alerts, FBR-style messages, challans, courier notices, and SMS screenshots for common scam signals.",
+    trustTitle: "AI-assisted safety check",
+    trustText: "The AI reads the notice, identifies scam signals, and returns a structured risk assessment with safer next steps.",
+    checkerEyebrow: "Free safety check",
+    checkerTitle: "Check a notice or message",
+    modelDescription: "Analysis runs on the deployed Qwen3.5 4B multimodal model.",
+    uploadLabel: "Upload a screenshot",
+    dropImage: "Drop an image here",
+    browseImage: "or tap to browse PNG, JPG, or WebP",
+    previewAlt: "Selected notice preview",
+    removeImage: "Remove image",
+    imageMode: "Screenshot mode active — text input is locked",
+    pasteLabel: "Or paste the message",
+    textPlaceholder: "Paste the SMS, email, bill text, or notice here...",
+    languageSupport: "English, Urdu, and Roman Urdu supported",
+    textMode: "Text mode active — image upload is locked",
+    traceTitle: "Publish privacy-safe trace",
+    traceText: "Stores automated redacted text or an image description. Raw text, screenshots, links, identifiers, and model text are not stored.",
+    checkButton: "Check this notice",
+    checkingButton: "Checking safely...",
+    startOver: "Start over",
+    examplesEyebrow: "Try an example",
+    examplesTitle: "Common messages in Pakistan",
+    courierFee: "Courier fee",
+    courierFeeText: "Urgent parcel payment link",
+    taxRefund: "Tax refund",
+    taxRefundText: "Unexpected refund request",
+    bankAlert: "Bank alert",
+    bankAlertText: "Security code request",
+    screenshotsTitle: "Real scam screenshots",
+    courierScam: "Courier scam",
+    courierScamText: "Fake delivery fee message",
+    mobileScam: "Mobile scam",
+    mobileScamText: "Fake mobile operator message",
+    trafficScam: "Traffic challan",
+    trafficScamText: "Fake e-challan fine message",
+    resultsEyebrow: "Safety assessment",
+    resultsTitle: "What we found",
+    explanationTitle: "Simple explanation",
+    redFlagsTitle: "Red flags found",
+    nextStepsTitle: "Safe next steps",
+    replyTitle: "Polite reply draft",
+    copy: "Copy",
+    copied: "Copied",
+    disclaimerTitle: "Important safety note",
+    disclaimerText: "Pakistan Notice Helper does not provide official verification. It checks common scam signals and gives safe next steps. Always verify through official websites or helplines before making payments or sharing personal information.",
+    footerOne: "Built for safer digital decisions in Pakistan.",
+    footerTwo: "Never share OTPs, PINs, passwords, or CVVs.",
+    requestStartError: "The app could not start the request.",
+    requestReadError: "The app could not read the result.",
+    requestFailedError: "The request could not be completed.",
+    noResultError: "The app returned no result.",
+    analyzeError: "Unable to analyze this input.",
+    imageTypeError: "Use a PNG, JPG, or WebP image.",
+    imageSizeError: "Please choose an image smaller than 8 MB.",
+    exampleImageError: "Could not load the example image.",
+    emptyInputError: "Paste a message or upload a screenshot to continue.",
+    modelSource: "Analyzed by the deployed Qwen3.5 4B model endpoint.",
+    cachedSource: "Cached model result",
+    riskLooksNormal: "Looks normal",
+    riskVerifyFirst: "Verify first",
+    riskSuspicious: "Suspicious",
+    riskLikelyScam: "Likely scam",
+    riskInappropriate: "Inappropriate",
+  },
+  ur: {
+    pageTitle: "پاکستان نوٹس ہیلپر",
+    pageDescription: "پاکستانی نوٹس اور پیغامات میں عام فراڈ کی علامات چیک کریں۔",
+    statusChecking: "ماڈل چیک ہو رہا ہے",
+    statusReady: "ماڈل تیار ہے",
+    statusCredentials: "Modal کی اسناد درکار ہیں",
+    statusUnavailable: "ماڈل دستیاب نہیں",
+    heroEyebrow: "عمل کرنے سے پہلے سمجھیں",
+    heroTitle: "کیا یہ نوٹس",
+    heroSafe: "محفوظ ہے؟",
+    heroText: "مشکوک بل، بینک الرٹس، ایف بی آر طرز کے پیغامات، چالان، کوریئر نوٹس اور ایس ایم ایس اسکرین شاٹس میں فراڈ کی عام علامات چیک ک��یں۔",
+    trustTitle: "اے آئی کی مدد سے حفاظتی جانچ",
+    trustText: "اے آئی نوٹس پڑھ کر فراڈ کی علامات شناخت کرتا ہے اور محفوظ اگلے اقدامات کے ساتھ منظم جائزہ دیتا ہے۔",
+    checkerEyebrow: "مفت حفاظتی جانچ",
+    checkerTitle: "نوٹس یا پیغام چیک کریں",
+    modelDescription: "تجزیہ Qwen3.5 4B ملٹی موڈل ماڈل پر چلتا ہے۔",
+    uploadLabel: "اسکرین شاٹ اپ لوڈ کریں",
+    dropImage: "تصویر یہاں چھوڑیں",
+    browseImage: "یا PNG، JPG یا WebP منتخب کرنے کے لیے دبائیں",
+    previewAlt: "منتخب نوٹس کا پیش منظر",
+    removeImage: "تصویر ہٹائیں",
+    imageMode: "اسکرین شاٹ موڈ فعال ہے، متن بند ہے",
+    pasteLabel: "یا پیغام یہاں لکھیں",
+    textPlaceholder: "ایس ایم ایس، ای میل، بل یا نوٹس کا متن یہاں پیسٹ کریں۔۔۔",
+    languageSupport: "انگریزی، اردو اور رومن اردو معاون ہیں",
+    textMode: "متن موڈ فعال ہے، تصویر اپ لوڈ بند ہے",
+    traceTitle: "رازداری محفوظ رکھنے والا ٹریس شائع کریں",
+    traceText: "صرف خودکار طور پر چھپایا گیا متن یا تصویر کی مختصر تفصیل محفوظ ہوتی ہے۔ اصل متن، تصاویر، لنکس، شناختی معلومات اور ماڈل کا متن محفوظ نہیں ہوتا۔",
+    checkButton: "یہ نوٹس چیک کریں",
+    checkingButton: "محفوظ جانچ جاری ہے۔۔۔",
+    startOver: "دوبارہ شروع کریں",
+    examplesEyebrow: "مثال آزمائیں",
+    examplesTitle: "پاکستان میں عام پیغامات",
+    courierFee: "کوریئر فیس",
+    courierFeeText: "فوری پارسل ادائیگی کا لنک",
+    taxRefund: "ٹیکس ریفنڈ",
+    taxRefundText: "غیر متوقع رقم واپسی کی درخواست",
+    bankAlert: "بینک الرٹ",
+    bankAlertText: "سیکیورٹی کوڈ کی درخواست",
+    screenshotsTitle: "حقیقی فراڈ اسکرین شاٹس",
+    courierScam: "کوریئر فراڈ",
+    courierScamText: "جعلی ڈیلیوری فیس کا پیغام",
+    mobileScam: "موبائل فراڈ",
+    mobileScamText: "جعلی موبائل آپریٹر پیغام",
+    trafficScam: "ٹریفک چالان",
+    trafficScamText: "جعلی ای چالان جرمانے کا پیغام",
+    resultsEyebrow: "حفاظتی جائزہ",
+    resultsTitle: "ہمیں کیا ملا",
+    explanationTitle: "سادہ وضاحت",
+    redFlagsTitle: "خطرے کی علامات",
+    nextStepsTitle: "محفوظ اگلے اقدامات",
+    replyTitle: "شائستہ جواب کا مسودہ",
+    copy: "کاپی کریں",
+    copied: "کاپی ہو گیا",
+    disclaimerTitle: "اہم حفاظتی نوٹ",
+    disclaimerText: "پاکستان نوٹس ہیلپر سرکاری تصدیق فراہم نہیں کرتا۔ یہ عام فراڈ کی علامات دیکھ کر محفوظ اگلے اقدامات بتاتا ہے۔ ادائیگی یا ذاتی معلومات دینے سے پہلے ہمیشہ سرکاری ویب سائٹ یا ہیلپ لائن سے تصدیق کریں۔",
+    footerOne: "پاکستان میں محفوظ ڈیجیٹل فیصلوں کے لیے تیار کیا گیا۔",
+    footerTwo: "اپنا OTP، PIN، پاس ورڈ یا CVV کبھی شیئر نہ کریں۔",
+    requestStartError: "درخواست شروع نہیں ہو سکی۔",
+    requestReadError: "نتیجہ پڑھا نہیں جا سکا۔",
+    requestFailedError: "درخواست مکمل نہیں ہو سکی۔",
+    noResultError: "کوئی نتیجہ موصول نہیں ہوا۔",
+    analyzeError: "اس مواد کا تجزیہ نہیں ہو سکا۔",
+    imageTypeError: "PNG، JPG یا WebP تصویر استعمال کریں۔",
+    imageSizeError: "براہ کرم 8 MB سے چھوٹی تصویر منتخب کریں۔",
+    exampleImageError: "مثالی تصویر لوڈ نہیں ہو سکی۔",
+    emptyInputError: "پیغام پیسٹ کریں یا اسکرین شاٹ اپ لوڈ کریں۔",
+    modelSource: "Qwen3.5 4B ماڈل نے اس کا تجزیہ کیا ہے۔",
+    cachedSource: "محفوظ شدہ ماڈل نتیجہ",
+    riskLooksNormal: "معمول کے مطابق",
+    riskVerifyFirst: "پہلے تصدیق کریں",
+    riskSuspicious: "مشکوک",
+    riskLikelyScam: "ممکنہ فراڈ",
+    riskInappropriate: "نامناسب",
+  },
 };
 
 let imageDataUrl = "";
 let activeMode = null;
 let activeExampleId = "";
+let currentLanguage = localStorage.getItem("notice-helper-language") === "ur" ? "ur" : "en";
+let currentStatus = null;
+let currentRiskLabel = "";
+
+function t(key) {
+  return translations[currentLanguage][key] || translations.en[key] || key;
+}
+
+function applyLanguage(language) {
+  currentLanguage = language === "ur" ? "ur" : "en";
+  localStorage.setItem("notice-helper-language", currentLanguage);
+  document.documentElement.lang = currentLanguage;
+  document.documentElement.dir = currentLanguage === "ur" ? "rtl" : "ltr";
+  document.title = t("pageTitle");
+  document.querySelector('meta[name="description"]').content = t("pageDescription");
+
+  document.querySelectorAll("[data-i18n]").forEach((element) => {
+    element.textContent = t(element.dataset.i18n);
+  });
+  document.querySelectorAll("[data-i18n-placeholder]").forEach((element) => {
+    element.placeholder = t(element.dataset.i18nPlaceholder);
+  });
+  document.querySelectorAll("[data-i18n-alt]").forEach((element) => {
+    element.alt = t(element.dataset.i18nAlt);
+  });
+  elements.languageOptions.forEach((button) => {
+    const active = button.dataset.language === currentLanguage;
+    button.classList.toggle("active", active);
+    button.setAttribute("aria-pressed", String(active));
+  });
+  setStatus(currentStatus);
+  if (currentRiskLabel) setRiskLabel(currentRiskLabel);
+  if (elements.button.classList.contains("loading")) {
+    elements.button.querySelector(".button-label").textContent = t("checkingButton");
+  }
+}
+
+function setRiskLabel(label) {
+  currentRiskLabel = label;
+  const keys = {
+    "Looks normal": "riskLooksNormal",
+    "Verify first": "riskVerifyFirst",
+    Suspicious: "riskSuspicious",
+    "Likely scam": "riskLikelyScam",
+    Inappropriate: "riskInappropriate",
+  };
+  elements.risk.textContent = t(keys[label] || label);
+}
 
 async function callGradioApi(name, data) {
   const response = await fetch(`/gradio_api/call/${name}`, {
@@ -28,10 +231,10 @@ async function callGradioApi(name, data) {
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ data }),
   });
-  if (!response.ok) throw new Error("The app could not start the request.");
+  if (!response.ok) throw new Error(t("requestStartError"));
   const { event_id: eventId } = await response.json();
   const stream = await fetch(`/gradio_api/call/${name}/${eventId}`);
-  if (!stream.ok || !stream.body) throw new Error("The app could not read the result.");
+  if (!stream.ok || !stream.body) throw new Error(t("requestReadError"));
 
   const reader = stream.body.getReader();
   const decoder = new TextDecoder();
@@ -45,19 +248,28 @@ async function callGradioApi(name, data) {
     for (const chunk of chunks) {
       const event = chunk.match(/^event:\s*(.+)$/m)?.[1];
       const raw = chunk.match(/^data:\s*(.+)$/m)?.[1];
-      if (event === "error") throw new Error("The request could not be completed.");
+      if (event === "error") throw new Error(t("requestFailedError"));
       if (event === "complete" && raw) {
         const values = JSON.parse(raw);
         return values[0];
       }
     }
   }
-  throw new Error("The app returned no result.");
+  throw new Error(t("noResultError"));
 }
 
 function setStatus(status) {
-  if (!status) return;
-  elements.status.lastChild.textContent = status.label || "Modal model unavailable";
+  if (!status) {
+    elements.statusText.textContent = t("statusChecking");
+    return;
+  }
+  currentStatus = status;
+  const modelName = status.label?.match(/:\s*(.+)$/)?.[1] || "";
+  elements.statusText.textContent = status.connected
+    ? `${t("statusReady")}${modelName ? `: ${modelName}` : ""}`
+    : status.label?.toLowerCase().includes("credentials")
+      ? t("statusCredentials")
+      : t("statusUnavailable");
   elements.status.classList.toggle("connected", Boolean(status.connected));
 }
 
@@ -92,7 +304,7 @@ function setLoading(loading) {
   elements.button.disabled = loading;
   elements.button.classList.toggle("loading", loading);
   elements.button.querySelector(".button-label").textContent =
-    loading ? "Checking safely..." : "Check this notice";
+    loading ? t("checkingButton") : t("checkButton");
 }
 
 function renderList(selector, items) {
@@ -105,11 +317,11 @@ function renderList(selector, items) {
 }
 
 function renderResult(payload) {
-  if (!payload.ok) throw new Error(payload.error || "Unable to analyze this input.");
+  if (!payload.ok) throw new Error(t("analyzeError"));
   const result = payload.assessment;
   setStatus(payload.status);
   elements.risk.className = `risk-badge risk-${result.risk_label.toLowerCase().replaceAll(" ", "-")}`;
-  elements.risk.textContent = result.risk_label;
+  setRiskLabel(result.risk_label);
   document.querySelector("#explanationText").textContent = result.simple_explanation;
   renderList("#redFlagsList", result.red_flags);
   renderList("#nextStepsList", result.safe_next_steps);
@@ -125,9 +337,9 @@ function renderResult(payload) {
   }
 
   elements.source.textContent = payload.source === "model"
-    ? "Analyzed by the deployed Qwen3.5 4B model endpoint."
+    ? t("modelSource")
     : payload.source === "cached_modal_example"
-      ? "Cached model result"
+      ? t("cachedSource")
       : "";
   elements.source.classList.toggle(
     "cached-result",
@@ -141,8 +353,8 @@ function useImage(file) {
   if (!file) return;
   activeExampleId = "";
   const allowed = ["image/png", "image/jpeg", "image/webp"];
-  if (!allowed.includes(file.type)) return showError("Use a PNG, JPG, or WebP image.");
-  if (file.size > 8 * 1024 * 1024) return showError("Please choose an image smaller than 8 MB.");
+  if (!allowed.includes(file.type)) return showError(t("imageTypeError"));
+  if (file.size > 8 * 1024 * 1024) return showError(t("imageSizeError"));
   const reader = new FileReader();
   reader.addEventListener("load", () => {
     imageDataUrl = String(reader.result);
@@ -203,7 +415,7 @@ document.querySelectorAll(".example-card").forEach((button) => {
         });
         reader.readAsDataURL(blob);
       } catch {
-        showError("Could not load the example image.");
+        showError(t("exampleImageError"));
       }
     } else if (button.dataset.example) {
       elements.text.value = button.dataset.example;
@@ -233,7 +445,7 @@ elements.form.addEventListener("submit", async (event) => {
   event.preventDefault();
   showError();
   if (!elements.text.value.trim() && !imageDataUrl) {
-    return showError("Paste a message or upload a screenshot to continue.");
+    return showError(t("emptyInputError"));
   }
 
   if (activeMode === "image") {
@@ -248,13 +460,20 @@ elements.form.addEventListener("submit", async (event) => {
 
   setLoading(true);
   try {
-    const submittedImage = activeExampleId ? "" : imageDataUrl;
+    const useCachedExample = currentLanguage === "en" && Boolean(activeExampleId);
+    const submittedImage = useCachedExample ? "" : imageDataUrl;
     renderResult(await callGradioApi(
       "analyze",
-      [elements.text.value, submittedImage, activeExampleId, elements.saveTrace.checked],
+      [
+        elements.text.value,
+        submittedImage,
+        useCachedExample ? activeExampleId : "",
+        elements.saveTrace.checked,
+        currentLanguage,
+      ],
     ));
   } catch (error) {
-    showError(error.message || "The request could not be completed.");
+    showError(error.message || t("requestFailedError"));
   } finally {
     setLoading(false);
   }
@@ -264,10 +483,14 @@ document.querySelectorAll(".copy-button").forEach((button) => {
   button.addEventListener("click", async () => {
     const target = document.querySelector(`#${button.dataset.copy}`);
     await navigator.clipboard.writeText(target.innerText);
-    const original = button.textContent;
-    button.textContent = "Copied";
-    setTimeout(() => { button.textContent = original; }, 1200);
+    button.textContent = t("copied");
+    setTimeout(() => { button.textContent = t("copy"); }, 1200);
   });
 });
 
+elements.languageOptions.forEach((button) => {
+  button.addEventListener("click", () => applyLanguage(button.dataset.language));
+});
+
+applyLanguage(currentLanguage);
 loadStatus();

static/index.html

@@ -12,26 +12,32 @@
 </head>
 <body>
   <header class="topbar">
-    <a class="brand" href="/" aria-label="Pakistan Notice Helper home">
-      <span class="brand-mark"><img src="/static/logo.png" alt=""></span>
-      <span class="brand-name">Pakistan Notice Helper</span>
-    </a>
+    <div class="topbar-left">
+      <div class="language-switch" role="group" aria-label="Language">
+        <button class="language-option active" type="button" data-language="en" aria-pressed="true">English</button>
+        <button class="language-option urdu-option" type="button" data-language="ur" aria-pressed="false">اردو</button>
+      </div>
+      <a class="brand" href="/" aria-label="Pakistan Notice Helper home">
+        <span class="brand-mark"><img src="/static/logo.png" alt=""></span>
+        <span class="brand-name">Pakistan Notice Helper</span>
+      </a>
+    </div>
     <div class="status-row">
-      <span id="modelStatus" class="status-badge"><span class="status-dot"></span>Checking model</span>
+      <span id="modelStatus" class="status-badge"><span class="status-dot"></span><span class="status-text" data-i18n="statusChecking">Checking model</span></span>
     </div>
   </header>
 
   <main>
     <section class="hero">
       <div class="hero-copy">
-        <p class="eyebrow">Understand before you act</p>
-        <h1>Does this notice look <span>safe?</span></h1>
-        <p class="hero-text">Check suspicious bills, bank alerts, FBR-style messages, challans, courier notices, and SMS screenshots for common scam signals.</p>
+        <p class="eyebrow" data-i18n="heroEyebrow">Understand before you act</p>
+        <h1><span data-i18n="heroTitle">Does this notice look</span> <span data-i18n="heroSafe">safe?</span></h1>
+        <p class="hero-text" data-i18n="heroText">Check suspicious bills, bank alerts, FBR-style messages, challans, courier notices, and SMS screenshots for common scam signals.</p>
         <div class="trust-note">
           <span class="shield" aria-hidden="true">✓</span>
           <p>
-            <strong>AI-assisted safety check</strong>
-            <span>The AI reads the notice, identifies scam signals, and returns a structured risk assessment with safer next steps.</span>
+            <strong data-i18n="trustTitle">AI-assisted safety check</strong>
+            <span data-i18n="trustText">The AI reads the notice, identifies scam signals, and returns a structured risk assessment with safer next steps.</span>
           </p>
         </div>
       </div>
@@ -43,32 +49,32 @@
     <section class="workspace" aria-labelledby="checkerTitle">
       <div class="section-heading">
         <div>
-          <p class="eyebrow">Free safety check</p>
-          <h2 id="checkerTitle">Check a notice or message</h2>
+          <p class="eyebrow" data-i18n="checkerEyebrow">Free safety check</p>
+          <h2 id="checkerTitle" data-i18n="checkerTitle">Check a notice or message</h2>
         </div>
-        <p>Analysis runs on the deployed Qwen3.5 4B multimodal model.</p>
+        <p data-i18n="modelDescription">Analysis runs on the deployed Qwen3.5 4B multimodal model.</p>
       </div>
 
       <form id="noticeForm">
         <div class="input-grid">
           <div class="field-card upload-card">
-            <div class="field-label"><span>1</span> Upload a screenshot</div>
+            <div class="field-label"><span>1</span><span class="field-label-text" data-i18n="uploadLabel">Upload a screenshot</span></div>
             <label id="dropZone" class="drop-zone" for="imageInput">
               <input id="imageInput" type="file" accept="image/png,image/jpeg,image/webp">
               <span class="upload-icon" aria-hidden="true">↑</span>
-              <strong>Drop an image here</strong>
-              <small>or tap to browse PNG, JPG, or WebP</small>
-              <img id="imagePreview" alt="Selected notice preview">
-              <button id="removeImage" class="text-button" type="button">Remove image</button>
+              <strong data-i18n="dropImage">Drop an image here</strong>
+              <small data-i18n="browseImage">or tap to browse PNG, JPG, or WebP</small>
+              <img id="imagePreview" alt="Selected notice preview" data-i18n-alt="previewAlt">
+              <button id="removeImage" class="text-button" type="button" data-i18n="removeImage">Remove image</button>
             </label>
-            <div id="uploadHint" class="mode-hint"><span class="hint-icon">↑</span> Screenshot mode active — text input is locked</div>
+            <div id="uploadHint" class="mode-hint"><span class="hint-icon">↑</span><span data-i18n="imageMode">Screenshot mode active — text input is locked</span></div>
           </div>
 
           <div class="field-card">
-            <label class="field-label" for="noticeText"><span>2</span> Or paste the message</label>
-            <textarea id="noticeText" maxlength="12000" placeholder="Paste the SMS, email, bill text, or notice here..."></textarea>
-            <div class="field-meta"><span>English, Urdu, and Roman Urdu supported by compatible models</span><span id="charCount">0 / 12,000</span></div>
-            <div id="textHint" class="mode-hint"><span class="hint-icon">✎</span> Text mode active — image upload is locked</div>
+            <label class="field-label" for="noticeText"><span>2</span><span class="field-label-text" data-i18n="pasteLabel">Or paste the message</span></label>
+            <textarea id="noticeText" maxlength="12000" placeholder="Paste the SMS, email, bill text, or notice here..." data-i18n-placeholder="textPlaceholder"></textarea>
+            <div class="field-meta"><span data-i18n="languageSupport">English, Urdu, and Roman Urdu supported by compatible models</span><span id="charCount">0 / 12,000</span></div>
+            <div id="textHint" class="mode-hint"><span class="hint-icon">✎</span><span data-i18n="textMode">Text mode active — image upload is locked</span></div>
           </div>
         </div>
 
@@ -76,17 +82,17 @@
         <label class="trace-consent" for="saveTrace">
           <input id="saveTrace" type="checkbox" checked>
           <span>
-            <strong>Publish privacy-safe trace</strong>
-            <small>Stores automated redacted text or an image description. Raw text, screenshots, links, identifiers, and model text are not stored.</small>
+            <strong data-i18n="traceTitle">Publish privacy-safe trace</strong>
+            <small data-i18n="traceText">Stores automated redacted text or an image description. Raw text, screenshots, links, identifiers, and model text are not stored.</small>
           </span>
         </label>
         <div class="form-actions">
           <button id="analyzeButton" class="primary-button" type="submit">
-            <span class="button-label">Check this notice</span>
+            <span class="button-label" data-i18n="checkButton">Check this notice</span>
             <span class="spinner" aria-hidden="true"></span>
           </button>
           <button id="resetButton" class="reset-button" type="button">
-            Start over
+            <span data-i18n="startOver">Start over</span>
           </button>
         </div>
       </form>
@@ -94,69 +100,69 @@
 
     <section class="examples" aria-labelledby="examplesTitle">
       <div class="section-heading compact">
-        <div><p class="eyebrow">Try an example</p><h2 id="examplesTitle">Common messages in Pakistan</h2></div>
+        <div><p class="eyebrow" data-i18n="examplesEyebrow">Try an example</p><h2 id="examplesTitle" data-i18n="examplesTitle">Common messages in Pakistan</h2></div>
       </div>
       <div class="example-grid">
         <button class="example-card" data-example-id="text-courier" data-example="PAKISTAN POST: Your parcel address is incomplete. Pay Rs. 85 today at http://pakpost-delivery.xyz or the parcel will be destroyed.">
-          <span class="example-icon">PK</span><span><strong>Courier fee</strong><small>Urgent parcel payment link</small></span>
+          <span class="example-icon">PK</span><span><strong data-i18n="courierFee">Courier fee</strong><small data-i18n="courierFeeText">Urgent parcel payment link</small></span>
         </button>
         <button class="example-card" data-example-id="text-fbr" data-example="FBR REFUND: You are eligible for Rs 42,500. Submit your CNIC and bank card details at the link today to receive payment.">
-          <span class="example-icon">FBR</span><span><strong>Tax refund</strong><small>Unexpected refund request</small></span>
+          <span class="example-icon">FBR</span><span><strong data-i18n="taxRefund">Tax refund</strong><small data-i18n="taxRefundText">Unexpected refund request</small></span>
         </button>
         <button class="example-card" data-example-id="text-bank" data-example="HBL Security: Your account will be suspended. Share the OTP sent to your phone with our support team immediately.">
-          <span class="example-icon">OTP</span><span><strong>Bank alert</strong><small>Security code request</small></span>
+          <span class="example-icon">OTP</span><span><strong data-i18n="bankAlert">Bank alert</strong><small data-i18n="bankAlertText">Security code request</small></span>
         </button>
       </div>
 
-      <p class="eyebrow" style="margin:28px 0 14px">Real scam screenshots</p>
+      <p class="eyebrow" style="margin:28px 0 14px" data-i18n="screenshotsTitle">Real scam screenshots</p>
       <div class="example-grid example-grid-images">
         <button class="example-card example-image-card" data-example-id="image-courier" data-image="/static/example-courier.jpeg">
           <img src="/static/example-courier.jpeg" alt="Courier scam screenshot" class="example-thumb">
-          <span><strong>Courier scam</strong><small>Fake delivery fee message</small></span>
+          <span><strong data-i18n="courierScam">Courier scam</strong><small data-i18n="courierScamText">Fake delivery fee message</small></span>
         </button>
         <button class="example-card example-image-card" data-example-id="image-mobile" data-image="/static/example-mobile.png">
           <img src="/static/example-mobile.png" alt="Mobile scam screenshot" class="example-thumb">
-          <span><strong>Mobile scam</strong><small>Fake mobile operator message</small></span>
+          <span><strong data-i18n="mobileScam">Mobile scam</strong><small data-i18n="mobileScamText">Fake mobile operator message</small></span>
         </button>
         <button class="example-card example-image-card" data-example-id="image-traffic" data-image="/static/example-trafic.png">
           <img src="/static/example-trafic.png" alt="Traffic challan scam screenshot" class="example-thumb">
-          <span><strong>Traffic challan</strong><small>Fake e-challan fine message</small></span>
+          <span><strong data-i18n="trafficScam">Traffic challan</strong><small data-i18n="trafficScamText">Fake e-challan fine message</small></span>
         </button>
       </div>
     </section>
 
     <section id="results" class="results" aria-live="polite" hidden>
       <div class="result-header">
-        <div><p class="eyebrow">Safety assessment</p><h2>What we found</h2></div>
+        <div><p class="eyebrow" data-i18n="resultsEyebrow">Safety assessment</p><h2 data-i18n="resultsTitle">What we found</h2></div>
         <div id="riskBadge" class="risk-badge"></div>
       </div>
       <p id="resultSource" class="result-source"></p>
       <div class="result-grid">
         <article class="result-card explanation-card">
-          <div class="card-title"><span>i</span><h3>Simple explanation</h3><button class="copy-button" data-copy="explanationText">Copy</button></div>
+          <div class="card-title"><span>i</span><h3 data-i18n="explanationTitle">Simple explanation</h3><button class="copy-button" data-copy="explanationText" data-i18n="copy">Copy</button></div>
           <p id="explanationText"></p>
         </article>
         <article class="result-card">
-          <div class="card-title"><span>!</span><h3>Red flags found</h3><button class="copy-button" data-copy="redFlagsList">Copy</button></div>
+          <div class="card-title"><span>!</span><h3 data-i18n="redFlagsTitle">Red flags found</h3><button class="copy-button" data-copy="redFlagsList" data-i18n="copy">Copy</button></div>
           <ul id="redFlagsList"></ul>
         </article>
         <article class="result-card">
-          <div class="card-title"><span>✓</span><h3>Safe next steps</h3><button class="copy-button" data-copy="nextStepsList">Copy</button></div>
+          <div class="card-title"><span>✓</span><h3 data-i18n="nextStepsTitle">Safe next steps</h3><button class="copy-button" data-copy="nextStepsList" data-i18n="copy">Copy</button></div>
           <ol id="nextStepsList"></ol>
         </article>
         <article id="replyCard" class="result-card reply-card">
-          <div class="card-title"><span>↗</span><h3>Polite reply draft</h3><button class="copy-button" data-copy="replyText">Copy</button></div>
+          <div class="card-title"><span>↗</span><h3 data-i18n="replyTitle">Polite reply draft</h3><button class="copy-button" data-copy="replyText" data-i18n="copy">Copy</button></div>
           <p id="replyText"></p>
         </article>
       </div>
     </section>
 
     <section class="disclaimer">
-      <strong>Important safety note</strong>
-      <p>Pakistan Notice Helper does not provide official verification. It checks common scam signals and gives safe next steps. Always verify through official websites or helplines before making payments or sharing personal information.</p>
+      <strong data-i18n="disclaimerTitle">Important safety note</strong>
+      <p data-i18n="disclaimerText">Pakistan Notice Helper does not provide official verification. It checks common scam signals and gives safe next steps. Always verify through official websites or helplines before making payments or sharing personal information.</p>
     </section>
   </main>
 
-  <footer><span>Built for safer digital decisions in Pakistan.</span><span>Never share OTPs, PINs, passwords, or CVVs.</span></footer>
+  <footer><span data-i18n="footerOne">Built for safer digital decisions in Pakistan.</span><span data-i18n="footerTwo">Never share OTPs, PINs, passwords, or CVVs.</span></footer>
 </body>
 </html>

static/styles.css

@@ -34,6 +34,19 @@ button { color: inherit; }
   background: var(--green-950);
   color: white;
 }
+.topbar-left { display: flex; align-items: center; gap: 18px; min-width: 0; }
+.language-switch {
+  flex: 0 0 auto; padding: 3px; display: flex; direction: ltr;
+  border: 1px solid rgba(255,255,255,.22); border-radius: 11px;
+  background: rgba(255,255,255,.08);
+}
+.language-option {
+  min-height: 30px; padding: 5px 9px; border: 0; border-radius: 8px;
+  background: transparent; color: #d6e8de; font-size: 11px; font-weight: 800;
+  cursor: pointer;
+}
+.language-option.active { background: white; color: var(--green-950); }
+.urdu-option { font-family: "Noto Nastaliq Urdu", "Noto Sans Arabic", "Segoe UI", sans-serif; font-size: 13px; }
 .brand { color: white; text-decoration: none; display: flex; align-items: center; gap: 12px; font-weight: 800; }
 .brand-mark {
   width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden;
@@ -65,7 +78,7 @@ main { overflow: hidden; }
 .hero .eyebrow { color: #8de3b4; }
 h1, h2, h3, p { overflow-wrap: anywhere; }
 h1 { margin: 0; font-size: clamp(42px, 7vw, 78px); line-height: .98; letter-spacing: -.055em; }
-h1 span { color: #79d9a6; }
+h1 > span:last-child { color: #79d9a6; }
 .hero-text { margin: 24px 0; color: #d7e9df; font-size: clamp(17px, 2vw, 21px); line-height: 1.6; }
 .trust-note {
   max-width: 680px; padding: 16px; display: grid; grid-template-columns: 36px minmax(0, 1fr);
@@ -102,7 +115,7 @@ h1 span { color: #79d9a6; }
 .input-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 20px; }
 .field-card { min-width: 0; }
 .field-label { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; font-size: 14px; font-weight: 800; }
-.field-label span { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--green-100); color: var(--green-800); font-size: 12px; }
+.field-label > span:first-child { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--green-100); color: var(--green-800); font-size: 12px; }
 .drop-zone {
   min-height: 230px; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center;
   border: 1.5px dashed #a8c8b5; border-radius: 18px; background: var(--green-50); cursor: pointer; text-align: center; transition: .2s ease;
@@ -214,6 +227,20 @@ textarea:disabled { opacity: .45; background: #f0f5f2; cursor: not-allowed; }
 .disclaimer p { margin: 7px 0 0; color: #675f4e; line-height: 1.6; font-size: 14px; }
 footer { padding: 24px clamp(18px, 5vw, 72px); display: flex; justify-content: space-between; gap: 18px; color: #c4d9cc; background: var(--green-950); font-size: 12px; }
 
+html[lang="ur"] body {
+  direction: rtl;
+  font-family: "Noto Nastaliq Urdu", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
+}
+html[lang="ur"] .topbar { direction: ltr; }
+html[lang="ur"] .brand, html[lang="ur"] .status-row { direction: ltr; }
+html[lang="ur"] .hero-copy, html[lang="ur"] .section-heading,
+html[lang="ur"] .field-card, html[lang="ur"] .examples,
+html[lang="ur"] .results, html[lang="ur"] .disclaimer,
+html[lang="ur"] footer { direction: rtl; text-align: right; }
+html[lang="ur"] .example-card { text-align: right; }
+html[lang="ur"] .result-card ul, html[lang="ur"] .result-card ol { padding-left: 0; padding-right: 22px; }
+html[lang="ur"] textarea { direction: rtl; text-align: right; }
+
 @media (max-width: 1100px) {
   .hero { grid-template-columns: 1fr; }
   .hero-image { display: none; }
@@ -233,7 +260,9 @@ footer { padding: 24px clamp(18px, 5vw, 72px); display: flex; justify-content: s
   .topbar { min-height: 64px; padding: 11px 14px; align-items: center; gap: 10px; }
   .brand { gap: 9px; min-width: 0; }
   .brand-mark { width: 32px; height: 32px; flex: 0 0 32px; }
-  .brand-name { font-size: 12px; white-space: nowrap; }
+  .topbar-left { gap: 8px; }
+  .brand-name { display: none; }
+  .language-option { padding: 4px 7px; }
   .status-badge { max-width: 126px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .hero { min-height: 390px; padding: 48px 20px 105px; }
   .workspace { width: calc(100% - 20px); padding: 22px 16px; border-radius: 22px; }