Add email notification feature with Notify checkbox, SMTP backend, and HTML template

app/main.py

@@ -27,6 +27,7 @@ from .auth import (
 from .database import Base, engine, get_db, DATA_DIR
 from .models import User, DetectionRun
 from .detection_engine import run_detection
+from .notifier import send_notification
 
 Base.metadata.create_all(bind=engine, checkfirst=True)
 
@@ -175,6 +176,7 @@ async def detect(
     village: str = Form(""),
     enable_registration: bool = Form(True),
     enable_normalization: bool = Form(True),
+    notify_email: Optional[str] = Form(None),
     access_token: Optional[str] = Form(None),
     db: Session = Depends(get_db),
 ):
@@ -252,6 +254,22 @@ async def detect(
     Image.fromarray(result_image).save(buf, format="PNG")
     buf.seek(0)
     overlay_b64 = base64.b64encode(buf.read()).decode("utf-8")
+
+    # Send email notification if requested
+    notification_sent = False
+    if notify_email and notify_email.strip():
+        notification_sent = send_notification(
+            recipient=notify_email.strip(),
+            title=title,
+            method=method,
+            zone=zone,
+            village=village,
+            change_pct=change_pct,
+            changed_px=changed_px,
+            total_px=total_px,
+            regions=regions_serializable,
+        )
+
     return {
         "id": run.id,
         "title": run.title,
@@ -267,6 +285,7 @@ async def detect(
         "regions": regions_serializable,
         "overlayBase64Png": overlay_b64,
         "overlayUrl": f"/api/overlay/{relative_overlay}",
+        "notificationSent": notification_sent,
         "createdAt": run.created_at.isoformat(),
     }
 

app/notifier.py

@@ -0,0 +1,133 @@
+"""
+Email notification module.
+Sends HTML-formatted detection reports via SMTP SSL.
+Credentials are read from environment variables — never hardcoded.
+"""
+import logging
+import os
+import smtplib
+import ssl
+from datetime import datetime, timezone
+from email.mime.multipart import MIMEMultipart
+from email.mime.text import MIMEText
+from pathlib import Path
+
+logger = logging.getLogger(__name__)
+
+SMTP_HOST = os.environ.get("SMTP_HOST", "smtp.gmail.com")
+SMTP_PORT = int(os.environ.get("SMTP_PORT", "465"))
+SMTP_USER = os.environ.get("SMTP_USER", "vedangofficeserver@gmail.com")
+SMTP_PASS = os.environ.get("SMTP_PASS", "")
+
+TEMPLATE_PATH = Path(__file__).resolve().parent.parent / "templates" / "ChangeDetection.html"
+
+
+def _load_template() -> str:
+    """Read the HTML email template from disk."""
+    if not TEMPLATE_PATH.exists():
+        logger.error("Email template not found at %s", TEMPLATE_PATH)
+        return "<p>Change Detection report — template file missing.</p>"
+    return TEMPLATE_PATH.read_text(encoding="utf-8")
+
+
+def _build_region_rows(regions: list) -> str:
+    """Render region rows as HTML <tr> elements for the email template."""
+    if not regions:
+        return ""
+    rows = []
+    for r in regions[:20]:
+        bg = "#f9f9fb" if r.get("id", 0) % 2 == 0 else "#ffffff"
+        sub = r.get("subType") or "—"
+        conf = f'{r.get("confidence", 0) * 100:.0f}%'
+        area = f'{r.get("area", 0):,}'
+        rows.append(
+            f'<tr style="background:{bg};">'
+            f'<td style="padding:6px 10px;">{r.get("id","")}</td>'
+            f'<td style="padding:6px 10px;">{r.get("objectType","")}</td>'
+            f'<td style="padding:6px 10px;">{sub}</td>'
+            f'<td style="padding:6px 10px;">{conf}</td>'
+            f'<td style="padding:6px 10px; text-align:right;">{area}</td>'
+            f"</tr>"
+        )
+    return "\n".join(rows)
+
+
+def build_email_body(
+    title: str,
+    method: str,
+    zone: str,
+    village: str,
+    change_pct: float,
+    changed_px: int,
+    total_px: int,
+    regions: list,
+) -> str:
+    """Populate the HTML template with detection results."""
+    html = _load_template()
+    location = ", ".join(filter(None, [village, zone])) or "—"
+    region_rows = _build_region_rows(regions)
+    now = datetime.now(timezone.utc).strftime("%Y-%m-%d %H:%M UTC")
+
+    replacements = {
+        "{{title}}": title or "Untitled run",
+        "{{method}}": method or "—",
+        "{{location}}": location,
+        "{{change_pct}}": f"{change_pct:.2f}",
+        "{{changed_px}}": f"{changed_px:,}",
+        "{{total_px}}": f"{total_px:,}",
+        "{{regions_count}}": str(len(regions)),
+        "{{region_rows}}": region_rows,
+        "{{timestamp}}": now,
+    }
+    for key, val in replacements.items():
+        html = html.replace(key, val)
+
+    # Handle conditional regions block
+    if regions:
+        html = html.replace("{{#regions}}", "").replace("{{/regions}}", "")
+    else:
+        import re
+        html = re.sub(r"\{\{#regions\}\}.*?\{\{/regions\}\}", "", html, flags=re.DOTALL)
+
+    return html
+
+
+def send_notification(
+    recipient: str,
+    title: str,
+    method: str,
+    zone: str,
+    village: str,
+    change_pct: float,
+    changed_px: int,
+    total_px: int,
+    regions: list,
+) -> bool:
+    """
+    Send detection report email to the recipient.
+    Returns True on success, False on failure (never raises).
+    """
+    if not SMTP_PASS:
+        logger.warning("SMTP_PASS not set — skipping email notification")
+        return False
+
+    html_body = build_email_body(
+        title, method, zone, village, change_pct, changed_px, total_px, regions
+    )
+
+    msg = MIMEMultipart("alternative")
+    msg["Subject"] = f"Change Detection Report — {title or 'Untitled run'}"
+    msg["From"] = SMTP_USER
+    msg["To"] = recipient
+    msg.attach(MIMEText(html_body, "html", "utf-8"))
+
+    try:
+        context = ssl.create_default_context()
+        with smtplib.SMTP_SSL(SMTP_HOST, SMTP_PORT, context=context) as server:
+            server.login(SMTP_USER, SMTP_PASS)
+            server.sendmail(SMTP_USER, recipient, msg.as_string())
+        logger.info("Notification email sent to %s", recipient)
+        return True
+    except Exception as e:
+        logger.error("Failed to send notification email: %s", e)
+        return False

static/css/style.css

@@ -436,6 +436,40 @@ input:focus, select:focus, textarea:focus {
   .location-row { grid-template-columns: 1fr; }
 }
 
+/* ---- Notify row ---- */
+.notify-row {
+  display: flex;
+  align-items: flex-end;
+  gap: 1rem;
+  margin-bottom: 1.25rem;
+  flex-wrap: wrap;
+}
+.notify-email-group {
+  flex: 1;
+  min-width: 200px;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+.notify-email-group.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+.notify-email-group label {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+.notify-email-group label svg {
+  color: var(--grad-start);
+  flex-shrink: 0;
+}
+.notify-email-group input {
+  width: 100%;
+}
+@media (max-width: 640px) {
+  .notify-row { flex-direction: column; align-items: stretch; }
+  .notify-email-group { min-width: 100%; }
+}
+
 /* ---- Upload zones ---- */
 .upload-grid {
   display: grid;

static/js/app.js

@@ -273,6 +273,24 @@ const DELHI_ZONES = {
   });
 })();
 
+// ---- Notify checkbox toggle ----
+(function initNotifyToggle() {
+  const cb = document.getElementById('detect-notify');
+  const group = document.getElementById('notify-email-group');
+  if (!cb || !group) return;
+
+  cb.addEventListener('change', () => {
+    if (cb.checked) {
+      group.classList.remove('hidden');
+      group.classList.add('visible');
+    } else {
+      group.classList.remove('visible');
+      group.classList.add('hidden');
+      document.getElementById('notify-email').value = '';
+    }
+  });
+})();
+
 // ---- Run detection ----
 document.getElementById('form-detect')?.addEventListener('submit', async (e) => {
   e.preventDefault();
@@ -299,6 +317,21 @@ document.getElementById('form-detect')?.addEventListener('submit', async (e) =>
   form.append('village', document.getElementById('detect-village').value || '');
   form.append('enable_registration', document.getElementById('detect-registration').checked);
   form.append('enable_normalization', document.getElementById('detect-normalization').checked);
+
+  // Notify: validate and attach email if checkbox is checked
+  const notifyCb = document.getElementById('detect-notify');
+  const notifyInput = document.getElementById('notify-email');
+  if (notifyCb?.checked) {
+    const email = (notifyInput?.value || '').trim();
+    if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      showError('dashboard-error', 'Please enter a valid email address for notification.');
+      btn.disabled = false;
+      loading.classList.add('hidden');
+      return;
+    }
+    form.append('notify_email', email);
+  }
+
   if (token) form.append('access_token', token);
 
   try {
@@ -310,7 +343,10 @@ document.getElementById('form-detect')?.addEventListener('submit', async (e) =>
     }
     const data = await api('POST', '/api/detect', { body: form });
     showResult(data);
-    showSuccess('dashboard-success', 'Detection complete!');
+    const notifyMsg = data.notificationSent
+      ? ' Notification email sent.'
+      : '';
+    showSuccess('dashboard-success', 'Detection complete!' + notifyMsg);
     loadHistory();
   } catch (err) {
     showError('dashboard-error', err.message);

templates/ChangeDetection.html

@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Change Detection Report</title>
+</head>
+<body style="margin:0; padding:0; background:#f4f4f7; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;">
+  <table width="100%" cellpadding="0" cellspacing="0" style="background:#f4f4f7; padding:40px 0;">
+    <tr>
+      <td align="center">
+        <table width="600" cellpadding="0" cellspacing="0" style="background:#ffffff; border-radius:12px; overflow:hidden; box-shadow:0 4px 24px rgba(0,0,0,0.08);">
+
+          <!-- Header -->
+          <tr>
+            <td style="background:linear-gradient(135deg,#2e33c5,#cf2040); padding:32px 40px; text-align:center;">
+              <h1 style="margin:0; color:#ffffff; font-size:22px; font-weight:700; letter-spacing:-0.02em;">
+                AI Change Detection
+              </h1>
+              <p style="margin:6px 0 0; color:rgba(255,255,255,0.8); font-size:13px;">
+                Detection Run Complete — Report Summary
+              </p>
+            </td>
+          </tr>
+
+          <!-- Body -->
+          <tr>
+            <td style="padding:32px 40px;">
+              <p style="margin:0 0 18px; color:#333; font-size:15px; line-height:1.6;">
+                Hello,
+              </p>
+              <p style="margin:0 0 18px; color:#333; font-size:15px; line-height:1.6;">
+                A change detection run has been completed. Here are the results:
+              </p>
+
+              <!-- Stats table -->
+              <table width="100%" cellpadding="0" cellspacing="0" style="margin:0 0 24px; border:1px solid #e8e8ec; border-radius:8px; overflow:hidden;">
+                <tr style="background:#f9f9fb;">
+                  <td style="padding:10px 16px; font-size:13px; color:#666; border-bottom:1px solid #e8e8ec;">Run Title</td>
+                  <td style="padding:10px 16px; font-size:14px; color:#222; font-weight:600; border-bottom:1px solid #e8e8ec;">{{title}}</td>
+                </tr>
+                <tr>
+                  <td style="padding:10px 16px; font-size:13px; color:#666; border-bottom:1px solid #e8e8ec;">Method</td>
+                  <td style="padding:10px 16px; font-size:14px; color:#222; border-bottom:1px solid #e8e8ec;">{{method}}</td>
+                </tr>
+                <tr style="background:#f9f9fb;">
+                  <td style="padding:10px 16px; font-size:13px; color:#666; border-bottom:1px solid #e8e8ec;">Location</td>
+                  <td style="padding:10px 16px; font-size:14px; color:#222; border-bottom:1px solid #e8e8ec;">{{location}}</td>
+                </tr>
+                <tr>
+                  <td style="padding:10px 16px; font-size:13px; color:#666; border-bottom:1px solid #e8e8ec;">Change Percentage</td>
+                  <td style="padding:10px 16px; font-size:14px; color:#cf2040; font-weight:700; border-bottom:1px solid #e8e8ec;">{{change_pct}}%</td>
+                </tr>
+                <tr style="background:#f9f9fb;">
+                  <td style="padding:10px 16px; font-size:13px; color:#666; border-bottom:1px solid #e8e8ec;">Changed Pixels</td>
+                  <td style="padding:10px 16px; font-size:14px; color:#222; border-bottom:1px solid #e8e8ec;">{{changed_px}}</td>
+                </tr>
+                <tr>
+                  <td style="padding:10px 16px; font-size:13px; color:#666; border-bottom:1px solid #e8e8ec;">Total Pixels</td>
+                  <td style="padding:10px 16px; font-size:14px; color:#222; border-bottom:1px solid #e8e8ec;">{{total_px}}</td>
+                </tr>
+                <tr style="background:#f9f9fb;">
+                  <td style="padding:10px 16px; font-size:13px; color:#666;">Regions Detected</td>
+                  <td style="padding:10px 16px; font-size:14px; color:#222;">{{regions_count}}</td>
+                </tr>
+              </table>
+
+              <!-- Region details (if any) -->
+              {{#regions}}
+              <h3 style="margin:0 0 12px; font-size:14px; color:#2e33c5; font-weight:600;">Detected Regions</h3>
+              <table width="100%" cellpadding="0" cellspacing="0" style="margin:0 0 24px; border:1px solid #e8e8ec; border-radius:8px; overflow:hidden; font-size:12px;">
+                <tr style="background:#2e33c5; color:#fff;">
+                  <th style="padding:8px 10px; text-align:left;">#</th>
+                  <th style="padding:8px 10px; text-align:left;">Type</th>
+                  <th style="padding:8px 10px; text-align:left;">Sub-Type</th>
+                  <th style="padding:8px 10px; text-align:left;">Confidence</th>
+                  <th style="padding:8px 10px; text-align:right;">Area</th>
+                </tr>
+                {{region_rows}}
+              </table>
+              {{/regions}}
+
+              <p style="margin:24px 0 0; color:#333; font-size:15px; line-height:1.6;">
+                You can view the full overlay image and detailed results by logging in to the application.
+              </p>
+            </td>
+          </tr>
+
+          <!-- Footer -->
+          <tr>
+            <td style="background:#f9f9fb; padding:20px 40px; border-top:1px solid #e8e8ec; text-align:center;">
+              <p style="margin:0; color:#999; font-size:12px;">
+                This is an automated notification from AI Change Detection.
+              </p>
+              <p style="margin:4px 0 0; color:#bbb; font-size:11px;">
+                {{timestamp}}
+              </p>
+            </td>
+          </tr>
+
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>

templates/index.html

@@ -219,6 +219,18 @@
               <label><input type="checkbox" id="detect-normalization" checked /> Radiometric Normalization</label>
             </div>
           </div>
+          <div class="notify-row">
+            <div class="form-group checkbox-group">
+              <label><input type="checkbox" id="detect-notify" /> Notify via Email</label>
+            </div>
+            <div class="form-group notify-email-group hidden" id="notify-email-group">
+              <label for="notify-email">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+                Recipient Email
+              </label>
+              <input type="email" id="notify-email" placeholder="recipient@example.com" />
+            </div>
+          </div>
           <div class="run-btn-wrap">
             <button type="submit" class="btn btn-primary btn-lg" id="btn-run">
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
@@ -300,6 +312,6 @@
     </div>
   </div>
 
-  <script src="/static/js/app.js?v=14"></script>
+  <script src="/static/js/app.js?v=15"></script>
 </body>
 </html>