Initial commit

.gitignore

@@ -0,0 +1 @@
+models

Dockerfile

@@ -0,0 +1,23 @@
+FROM python:3.11-slim
+
+# ── Create and switch to non‑root user ──
+RUN useradd -m -u 1000 user
+USER user
+
+# ── Set environment and working directory ──
+ENV HOME=/home/user
+WORKDIR $HOME/app
+
+# ── Upgrade pip and install dependencies ──
+COPY --chown=user requirements.txt .
+RUN pip install --upgrade pip && \
+    pip install --no-cache-dir -r requirements.txt
+
+# ── Copy application source ──
+COPY --chown=user . .
+
+# ── Create cache / log folders with correct permissions ──
+RUN mkdir -p $HOME/app/cache $HOME/app/logs
+
+EXPOSE 7860
+CMD ["python", "-m", "uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -0,0 +1,11 @@
+---
+title: Similarity Checker
+emoji: 😃
+colorFrom: red
+colorTo: green
+sdk: docker
+sdk_version: latest
+pinned: false
+license: apache-2.0
+short_description: Similarity comparison between facial images using self-trained TripletLoss model (CNN) and Cosine metric
+---

app.py

@@ -0,0 +1,136 @@
+import os
+from pathlib import Path
+from tempfile import TemporaryDirectory
+
+import cv2
+import numpy as np
+import torch
+import torch.nn as nn
+from PIL import Image
+from fastapi import FastAPI, File, UploadFile, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import JSONResponse, FileResponse
+from fastapi.staticfiles import StaticFiles
+from torchvision import transforms
+
+# ─────────────────────────────────────────────────────────────────────────────
+# Model Definition (Triplet)
+# ─────────────────────────────────────────────────────────────────────────────
+class BaseCNN(nn.Module):
+    def __init__(self):
+        super().__init__()
+        self.conv = nn.Sequential(
+            nn.Conv2d(3, 32, 3, 1, 1), nn.ReLU(), nn.MaxPool2d(2),
+            nn.Conv2d(32, 64, 3, 1, 1), nn.ReLU(), nn.MaxPool2d(2),
+            nn.Conv2d(64, 128, 3, 1, 1), nn.ReLU(), nn.AdaptiveAvgPool2d(1),
+        )
+
+    def forward(self, x):
+        return self.conv(x).view(x.size(0), -1)
+
+EMBED_DIM = 128
+embed_head = nn.Sequential(
+    nn.Linear(128, EMBED_DIM),
+    nn.BatchNorm1d(EMBED_DIM),
+    nn.ReLU(),
+)
+
+DEVICE = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+
+tri_model = nn.Sequential(BaseCNN(), embed_head).to(DEVICE)
+model_path = Path("models/tri_model.pth")
+if not model_path.exists():
+    raise FileNotFoundError("Model weights not found at models/tri_model.pth")
+tri_model.load_state_dict(torch.load(model_path, map_location=DEVICE))
+tri_model.eval()
+
+transform = transforms.Compose(
+    [
+        transforms.Resize((64, 64)),
+        transforms.ToTensor(),
+        transforms.Normalize([0.485, 0.456, 0.406], [0.229, 0.224, 0.225]),
+    ]
+)
+
+# ─────────────────────────────────────────────────────────────────────────────
+# FastAPI App Setup
+# ─────────────────────────────────────────────────────────────────────────────
+app = FastAPI(title="Face Similarity Comparator", docs_url="/docs")
+
+# Allow frontend to call backend when served from the same origin in Spaces
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Serve static files (index.html, JS, CSS)
+static_dir = Path(__file__).parent / "static"
+app.mount("/static", StaticFiles(directory=static_dir), name="static")
+
+# Redirect root to frontend
+@app.get("/")
+async def root_index():
+    return FileResponse(static_dir / "index.html")
+
+# ─────────────────────────────────────────────────────────────────────────────
+# Helper Functions
+# ─────────────────────────────────────────────────────────────────────────────
+
+def bytes_to_cv2(bytes_data: bytes) -> np.ndarray:
+    img_array = np.frombuffer(bytes_data, np.uint8)
+    img_bgr = cv2.imdecode(img_array, cv2.IMREAD_COLOR)
+    if img_bgr is None:
+        raise ValueError("Invalid image data")
+    return img_bgr
+
+
+def get_embedding(img_bgr: np.ndarray) -> np.ndarray:
+    img_rgb = cv2.cvtColor(img_bgr, cv2.COLOR_BGR2RGB)
+    x = transform(Image.fromarray(img_rgb)).unsqueeze(0).to(DEVICE)
+    with torch.no_grad():
+        emb = tri_model(x)
+    emb = emb.cpu().numpy()[0]
+    return emb / np.linalg.norm(emb)
+
+
+def cosine_similarity(vec1: np.ndarray, vec2: np.ndarray) -> float:
+    return float(np.dot(vec1, vec2))
+
+# ─────────────────────────────────────────────────────────────────────────────
+# API Endpoint
+# ─────────────────────────────────────────────────────────────────────────────
+
+@app.post("/compare")
+async def compare_faces(
+    tester: UploadFile = File(...),
+    samplers: list[UploadFile] = File(...),
+):
+    """Compare tester image against up to 5 sampler images and return similarity."""
+
+    if len(samplers) == 0:
+        raise HTTPException(status_code=400, detail="At least one sampler image is required.")
+    if len(samplers) > 5:
+        raise HTTPException(status_code=400, detail="You can upload up to 5 sampler images only.")
+
+    # Read tester image
+    tester_bytes = await tester.read()
+    tester_img = bytes_to_cv2(tester_bytes)
+    tester_emb = get_embedding(tester_img)
+
+    results = []
+    for smp in samplers:
+        smp_bytes = await smp.read()
+        smp_img = bytes_to_cv2(smp_bytes)
+        smp_emb = get_embedding(smp_img)
+        sim = cosine_similarity(tester_emb, smp_emb)
+        results.append({
+            "name": smp.filename,
+            "similarity": round(sim * 100, 2),
+        })
+
+    # Sort high → low
+    results.sort(key=lambda x: x["similarity"], reverse=True)
+
+    return JSONResponse({"tester": tester.filename, "results": results})

requirements.txt

@@ -0,0 +1,10 @@
+fastapi
+uvicorn[standard]
+python-multipart
+pillow
+torch
+torchvision
+opencv-python-headless
+numpy
+aiofiles
+jinja2

static/index.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Face Similarity Comparator</title>
+    <link rel="stylesheet" href="/static/styles.css" />
+  </head>
+  <body>
+    <header>
+      <h1>👨‍👩‍👧‍👦 Face Similarity Comparator</h1>
+      <p>
+        Curious who your kids resemble the most? Wonder which celebrity shares
+        your features? Upload photos below and let our AI judge facial
+        similarity for fun family debates, twin‑spotting games, or social‑media
+        challenges. For best accuracy use front‑facing photos, evenly lit with
+        no glasses, masks, or hair covering facial landmarks.
+      </p>
+    </header>
+
+    <main id="upload-section">
+      <div class="upload-wrapper">
+        <h2>Tester Photo</h2>
+        <input id="tester" type="file" accept="image/*" />
+        <small>Upload <strong>one-only</strong> clear, front‑view face.</small>
+      </div>
+
+      <div class="upload-wrapper">
+        <h2>Sampler Photos (max 5)</h2>
+        <input id="samplers" type="file" accept="image/*" multiple />
+        <small>Upload up to five comparison faces.</small>
+      </div>
+    </main>
+
+    <div id="action-container"></div>
+
+    <section id="results" class="hidden">
+      <canvas id="lines-canvas"></canvas>
+      <!-- squares injected by JS -->
+    </section>
+
+    <script src="/static/script.js"></script>
+  </body>
+</html>

static/script.js

@@ -0,0 +1,129 @@
+const testerInput = document.getElementById("tester");
+const samplerInput = document.getElementById("samplers");
+const actionContainer = document.getElementById("action-container");
+const resultsSection = document.getElementById("results");
+const canvas = document.getElementById("lines-canvas");
+const ctx = canvas.getContext("2d");
+
+let generateBtn, loaderDiv;
+
+function resetUI() {
+  resultsSection.classList.add("hidden");
+  resultsSection.innerHTML = "<canvas id=\"lines-canvas\"></canvas>";
+  canvas.width = canvas.height = 0;
+  if (loaderDiv) loaderDiv.remove();
+  if (generateBtn) generateBtn.remove();
+}
+
+testerInput.addEventListener("change", handleFileChange);
+samplerInput.addEventListener("change", handleFileChange);
+
+function handleFileChange() {
+  resetUI();
+  const testerReady = testerInput.files.length === 1;
+  const samplersReady =
+    samplerInput.files.length > 0 && samplerInput.files.length <= 5;
+
+  if (samplerInput.files.length > 5) {
+    alert("You can upload a maximum of 5 sampler photos.");
+    samplerInput.value = "";
+    return;
+  }
+
+  if (testerReady && samplersReady) {
+    generateBtn = document.createElement("button");
+    generateBtn.textContent = "Generate Comparison";
+    generateBtn.className = "generate-btn";
+    generateBtn.onclick = sendComparison;
+    actionContainer.appendChild(generateBtn);
+  }
+}
+
+function showLoader() {
+  loaderDiv = document.createElement("div");
+  loaderDiv.className = "loader";
+  actionContainer.appendChild(loaderDiv);
+}
+
+async function sendComparison() {
+  generateBtn.disabled = true;
+  showLoader();
+
+  const formData = new FormData();
+  formData.append("tester", testerInput.files[0]);
+  for (let file of samplerInput.files) formData.append("samplers", file);
+
+  try {
+    const res = await fetch("/compare", { method: "POST", body: formData });
+    if (!res.ok) throw new Error(await res.text());
+    const data = await res.json();
+    renderResults(data);
+  } catch (err) {
+    alert("Error: " + err.message);
+  } finally {
+    generateBtn.disabled = false;
+    loaderDiv.remove();
+  }
+}
+
+function getBorderColor(percent) {
+  if (percent < 30) return "#ef4444"; // red
+  if (percent <= 50) return "#fb923c"; // orange
+  if (percent <= 80) return "#22c55e"; // green
+  return "#a855f7"; // purple
+}
+
+function renderResults({ tester, results }) {
+  resultsSection.classList.remove("hidden");
+  const testerSquare = createSquare(testerInput.files[0], "#3b82f6");
+  resultsSection.appendChild(testerSquare);
+
+  results.forEach((r, idx) => {
+    const square = createSquare(samplerInput.files[idx], getBorderColor(r.similarity));
+    resultsSection.appendChild(square);
+    drawLineBetween(testerSquare, square, r.similarity);
+  });
+}
+
+function createSquare(file, borderColor) {
+  const url = URL.createObjectURL(file);
+  const div = document.createElement("div");
+  div.className = "square";
+  div.style.border = `4px solid ${borderColor}`;
+  const img = document.createElement("img");
+  img.src = url;
+  div.appendChild(img);
+  return div;
+}
+
+function drawLineBetween(el1, el2, similarity) {
+  const rect1 = el1.getBoundingClientRect();
+  const rect2 = el2.getBoundingClientRect();
+  const offset = resultsSection.getBoundingClientRect();
+
+  // Compute canvas size on first call
+  if (canvas.width === 0) {
+    canvas.width = resultsSection.scrollWidth;
+    canvas.height = resultsSection.getBoundingClientRect().height;
+  }
+
+  const x1 = rect1.right - offset.left;
+  const y1 = rect1.top + rect1.height / 2 - offset.top;
+  const x2 = rect2.left - offset.left;
+  const y2 = rect2.top + rect2.height / 2 - offset.top;
+
+  ctx.strokeStyle = getBorderColor(similarity);
+  ctx.lineWidth = 3;
+  ctx.beginPath();
+  ctx.moveTo(x1, y1);
+  ctx.lineTo(x2, y2);
+  ctx.stroke();
+
+  // Label
+  const label = document.createElement("div");
+  label.className = "label";
+  label.textContent = similarity.toFixed(0) + "%";
+  label.style.left = (x1 + x2) / 2 + "px";
+  label.style.top = (y1 + y2) / 2 + "px";
+  resultsSection.appendChild(label);
+}

static/styles.css

@@ -0,0 +1,119 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-family: system-ui, sans-serif;
+  }
+  
+  body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+    padding: 1rem;
+    max-width: 960px;
+    margin-inline: auto;
+  }
+  
+  header {
+    text-align: center;
+  }
+  
+  #upload-section {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2rem;
+    justify-content: center;
+    width: 100%;
+  }
+  
+  .upload-wrapper {
+    border: 2px dashed #aaa;
+    border-radius: 0.75rem;
+    padding: 1rem;
+    flex: 1 1 280px;
+    max-width: 420px;
+    text-align: center;
+  }
+  
+  input[type="file"] {
+    margin-block: 0.75rem;
+  }
+  
+  #action-container {
+    margin-top: 1rem;
+  }
+  
+  button.generate-btn {
+    padding: 0.5rem 1.25rem;
+    font-size: 1.1rem;
+    background: #1e88e5;
+    color: #fff;
+    border: none;
+    border-radius: 0.5rem;
+    cursor: pointer;
+  }
+  button.generate-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+  
+  .loader {
+    border: 4px solid #f3f3f3;
+    border-top: 4px solid #1e88e5;
+    border-radius: 50%;
+    width: 42px;
+    height: 42px;
+    animation: spin 1s linear infinite;
+    margin-inline: auto;
+    margin-top: 1rem;
+  }
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+  
+  #results {
+    position: relative;
+    width: 100%;
+    margin-top: 2rem;
+    display: flex;
+    gap: 2rem;
+    justify-content: flex-start;
+    overflow-x: auto;
+  }
+  
+  .square {
+    width: 120px;
+    height: 120px;
+    border-radius: 0.5rem;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .square img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  
+  #lines-canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+  }
+  
+  .label {
+    position: absolute;
+    background: rgba(0, 0, 0, 0.7);
+    color: #fff;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    transform: translate(-50%, -50%);
+  }
+  
+  @media (max-width: 600px) {
+    .square { width: 90px; height: 90px; }
+  }