Spaces:

mobisoft
/

face-swap-app

Running

App Files Files Community

videopix commited on Dec 12, 2025

Commit

fd45fc3

verified ·

1 Parent(s): dd25719

Create app.py

Browse files

Files changed (1) hide show

app.py +705 -0

app.py ADDED Viewed

	@@ -0,0 +1,705 @@

+import os
+import cv2
+import numpy as np
+import requests
+import insightface
+from tempfile import NamedTemporaryFile
+from insightface.app import FaceAnalysis
+from fastapi import FastAPI, UploadFile, File, HTTPException
+from fastapi.responses import StreamingResponse, HTMLResponse, Response
+from fastapi.concurrency import run_in_threadpool
+# -----------------------------------------------------------
+# GLOBALS
+# -----------------------------------------------------------
+face_app = None
+swapper = None
+# -----------------------------------------------------------
+# DOWNLOAD INSIGHTFACE MODEL
+# -----------------------------------------------------------
+def download_model():
+    url = "https://cdn.adikhanofficial.com/python/insightface/models/inswapper_128.onnx"
+    filename = os.path.basename(url)
+    save_path = os.path.join(os.path.dirname(__file__), filename)
+    if not os.path.exists(save_path):
+        print("Downloading model:", filename)
+        r = requests.get(url, timeout=60)
+        r.raise_for_status()
+        with open(save_path, "wb") as f:
+            f.write(r.content)
+    else:
+        print("Model already exists:", filename)
+# -----------------------------------------------------------
+# FACE SWAP HELPER
+# -----------------------------------------------------------
+def swap_faces(target_img, target_face, source_face):
+    return swapper.get(target_img, target_face, source_face, paste_back=True)
+# -----------------------------------------------------------
+# FASTAPI APP
+# -----------------------------------------------------------
+app = FastAPI(title="FaceSwap API")
+# -----------------------------------------------------------
+# HTML UI (Home Page) - stylish modern UI
+# -----------------------------------------------------------
+@app.get("/", response_class=HTMLResponse)
+def home():
+    return """
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>FaceSwap — Tester UI</title>
+  <style>
+    :root{
+      --bg:#0f1724;
+      --card:#0b1220;
+      --muted:#9aa4b2;
+      --accent1:#7c3aed;
+      --accent2:#06b6d4;
+      --glass: rgba(255,255,255,0.04);
+      --glass-2: rgba(255,255,255,0.03);
+      --success:#22c55e;
+      --danger:#ef4444;
+      --radius:12px;
+    }
+    *{box-sizing:border-box}
+    body{
+      margin:0;
+      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
+      background: linear-gradient(180deg, #071023 0%, #071b2c 60%);
+      color: #e6eef6;
+      -webkit-font-smoothing:antialiased;
+      -moz-osx-font-smoothing:grayscale;
+      padding:28px;
+    }
+    .wrap{
+      max-width:1100px;
+      margin:0 auto;
+    }
+    header{
+      display:flex;
+      align-items:center;
+      gap:18px;
+      margin-bottom:18px;
+    }
+    .logo {
+      width:64px;
+      height:64px;
+      border-radius:14px;
+      background: linear-gradient(135deg,var(--accent1), var(--accent2));
+      display:grid;
+      place-items:center;
+      box-shadow: 0 6px 22px rgba(12,18,32,0.6), inset 0 -8px 20px rgba(255,255,255,0.03);
+      font-weight:700;
+      font-size:20px;
+      color:white;
+    }
+    h1{font-size:20px;margin:0}
+    p.lead{margin:0;color:var(--muted);font-size:13px}
+    .grid{
+      display:grid;
+      grid-template-columns: 1fr 420px;
+      gap:20px;
+      margin-top:20px;
+    }
+    /* main card */
+    .card{
+      background: linear-gradient(180deg,var(--glass), var(--glass-2));
+      border-radius:var(--radius);
+      padding:18px;
+      border: 1px solid rgba(255,255,255,0.04);
+      box-shadow: 0 6px 30px rgba(2,6,23,0.6);
+    }
+    .section-title {
+      display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;
+    }
+    .section-title h2{font-size:16px;margin:0;color:#fff}
+    .muted{color:var(--muted);font-size:13px;margin-top:6px}
+    .upload {
+      display:grid;
+      grid-template-columns: 1fr 1fr;
+      gap:12px;
+    }
+    .drop {
+      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
+      border-radius:10px;
+      padding:12px;
+      border:1px dashed rgba(255,255,255,0.04);
+      min-height:140px;
+      display:flex;
+      flex-direction:column;
+      gap:8px;
+      align-items:center;
+      justify-content:center;
+      text-align:center;
+      cursor:pointer;
+      transition:transform .12s ease, border-color .12s ease, background .12s ease;
+    }
+    .drop.dragover{ transform: translateY(-4px); border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.015); }
+    .drop small{ color:var(--muted); font-size:13px}
+    input[type="file"]{ display:none; }
+    .controls { display:flex; gap:10px; align-items:center; margin-top:12px;}
+    .btn {
+      background: linear-gradient(90deg,var(--accent1), var(--accent2));
+      color:#fff;padding:10px 14px;border-radius:10px;border:none;font-weight:600;cursor:pointer;
+      box-shadow: 0 6px 18px rgba(124,58,237,0.18);
+    }
+    .btn.secondary {
+      background: transparent;
+      border:1px solid rgba(255,255,255,0.06);
+      color:var(--muted);
+      box-shadow:none;
+    }
+    .btn[disabled]{ opacity:0.5; cursor:not-allowed; transform:none; box-shadow:none;}
+    .preview {
+      display:flex;flex-direction:column;gap:8px;align-items:center;
+    }
+    .preview img, .preview video {
+      max-width:100%;
+      max-height:320px;
+      border-radius:8px;
+      border: 1px solid rgba(255,255,255,0.04);
+      background: #031223;
+    }
+    .status {
+      margin-top:10px;
+      font-size:13px;
+      color:var(--muted);
+      display:flex;
+      gap:10px;
+      align-items:center;
+    }
+    .spinner{
+      width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,0.08);border-top-color:var(--accent2);animation:spin .9s linear infinite;
+    }
+    @keyframes spin{ to{ transform:rotate(360deg) } }
+    /* right column */
+    .info {
+      display:flex;
+      flex-direction:column;
+      gap:12px;
+    }
+    .info .mini {
+      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
+      padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);
+      color:var(--muted);
+      font-size:13px;
+    }
+    .copy {
+      display:flex;gap:8px;align-items:center;justify-content:space-between;margin-top:8px;
+    }
+    .link {
+      background: rgba(255,255,255,0.03);
+      padding:8px 10px;border-radius:8px;font-size:13px;color:#dfe8f8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+    }
+    .danger { color:var(--danger); }
+    footer { margin-top:18px;text-align:center;color:var(--muted);font-size:13px}
+    @media (max-width:980px){
+      .grid{ grid-template-columns: 1fr; }
+      .upload{ grid-template-columns: 1fr; }
+    }
+  </style>
+</head>
+<body>
+  <div class="wrap">
+    <header>
+      <div class="logo">FP</div>
+      <div>
+        <h1>FaceSwap — Tester UI</h1>
+        <p class="lead">Upload a source face and a target (image or video). Results appear below.</p>
+      </div>
+    </header>
+    <div class="grid">
+      <main class="card">
+        <div class="section-title">
+          <h2>Image Face Swap</h2>
+          <div class="muted">Endpoint: <code>/swap-image</code></div>
+        </div>
+        <div class="upload" style="margin-bottom:14px;">
+          <label id="dropSource" class="drop" for="sourceInput">
+            <input id="sourceInput" type="file" accept="image/*">
+            <div>
+              <strong id="sourceLabel">Drop source image</strong>
+              <div style="height:6px"></div>
+              <small>Drag a photo here or click to choose</small>
+            </div>
+          </label>
+          <label id="dropTarget" class="drop" for="targetInput">
+            <input id="targetInput" type="file" accept="image/*">
+            <div>
+              <strong id="targetLabel">Drop target image</strong>
+              <div style="height:6px"></div>
+              <small>Where face will be placed</small>
+            </div>
+          </label>
+        </div>
+        <div style="display:flex;gap:12px;align-items:center;flex-wrap:wrap;">
+          <button id="swapImageBtn" class="btn">Swap Image</button>
+          <button id="resetImgBtn" class="btn secondary">Reset</button>
+          <div style="flex:1"></div>
+          <div class="status" id="imgStatus"></div>
+        </div>
+        <div style="margin-top:16px; display:flex; gap:12px; flex-wrap:wrap;">
+          <div style="flex:1" class="preview">
+            <div style="font-size:13px;color:var(--muted)">Preview (target)</div>
+            <img id="previewTarget" alt="target preview" />
+          </div>
+          <div style="flex:1" class="preview">
+            <div style="font-size:13px;color:var(--muted)">Result</div>
+            <img id="resultImage" alt="result preview" />
+          </div>
+        </div>
+      </main>
+      <aside class="info">
+        <div class="mini">
+          <strong>Quick tips</strong>
+          <ul style="margin:8px 0 0 16px;padding:0;color:var(--muted)">
+            <li>Best results with clear faces, frontal views.</li>
+            <li>Use JPG/PNG for images, MP4 for video.</li>
+            <li>Video processing may take longer — watch the status.</li>
+          </ul>
+        </div>
+        <div class="mini">
+          <strong>API URL</strong>
+          <div class="copy">
+            <div class="link" id="apiUrl">/swap-image</div>
+            <button class="btn secondary" id="copyBtn">Copy</button>
+          </div>
+        </div>
+        <div class="mini">
+          <strong>Console</strong>
+          <div id="log" style="margin-top:8px;color:var(--muted);font-size:13px;max-height:120px;overflow:auto"></div>
+        </div>
+      </aside>
+    </div>
+    <!-- Video section -->
+    <div style="margin-top:20px" class="card">
+      <div class="section-title">
+        <h2>Video Face Swap</h2>
+        <div class="muted">Endpoint: <code>/swap-video</code></div>
+      </div>
+      <div style="display:flex;gap:12px;flex-wrap:wrap;">
+        <label id="dropVSource" class="drop" for="vsourceInput" style="flex:0 0 240px;min-width:180px;">
+          <input id="vsourceInput" type="file" accept="image/*">
+          <div><strong id="vsourceLabel">Source image</strong><div style="height:6px"></div><small>Face to paste from</small></div>
+        </label>
+        <label id="dropVTarget" class="drop" for="vtargetInput" style="flex:1;min-width:200px;">
+          <input id="vtargetInput" type="file" accept="video/*">
+          <div><strong id="vtargetLabel">Target video</strong><div style="height:6px"></div><small>Video that will receive the face</small></div>
+        </label>
+        <div style="width:100%;display:flex;gap:10px;align-items:center;margin-top:12px;">
+          <button id="swapVideoBtn" class="btn">Swap Video</button>
+          <button id="resetVidBtn" class="btn secondary">Reset</button>
+          <div style="flex:1"></div>
+          <div class="status" id="vidStatus"></div>
+        </div>
+      </div>
+      <div style="margin-top:14px;display:flex;gap:12px;flex-wrap:wrap;">
+        <div style="flex:1" class="preview">
+          <div style="font-size:13px;color:var(--muted)">Original video (target)</div>
+          <video id="previewVideo" controls></video>
+        </div>
+        <div style="flex:1" class="preview">
+          <div style="font-size:13px;color:var(--muted)">Result video</div>
+          <video id="resultVideo" controls></video>
+          <a id="downloadVideo" style="display:block;margin-top:8px;color:var(--accent2);font-weight:600"></a>
+        </div>
+      </div>
+    </div>
+    <footer>
+      Built with FastAPI • Local model inference • Endpoint: <code>/swap-image</code> & <code>/swap-video</code>
+    </footer>
+  </div>
+<script>
+(() => {
+  // Helpers
+  const logEl = id => document.getElementById(id);
+  const el = id => document.getElementById(id);
+  const apiBase = '';
+  // Element refs
+  const sourceInput = el('sourceInput');
+  const targetInput = el('targetInput');
+  const dropSource = el('dropSource');
+  const dropTarget = el('dropTarget');
+  const previewTarget = el('previewTarget');
+  const resultImage = el('resultImage');
+  const swapImageBtn = el('swapImageBtn');
+  const resetImgBtn = el('resetImgBtn');
+  const imgStatus = el('imgStatus');
+  const apiUrlEl = el('apiUrl');
+  const copyBtn = el('copyBtn');
+  const logBox = el('log');
+  const vsourceInput = el('vsourceInput');
+  const vtargetInput = el('vtargetInput');
+  const previewVideo = el('previewVideo');
+  const resultVideo = el('resultVideo');
+  const swapVideoBtn = el('swapVideoBtn');
+  const resetVidBtn = el('resetVidBtn');
+  const vidStatus = el('vidStatus');
+  const downloadVideo = el('downloadVideo');
+  // drag & drop helpers
+  function prevent(e) { e.preventDefault(); e.stopPropagation(); }
+  function bindDrop(dropEl, inputEl, labelEl){
+    ['dragenter','dragover','dragleave','drop'].forEach(evt=>{
+      dropEl.addEventListener(evt, prevent);
+    });
+    dropEl.addEventListener('dragover', ()=> dropEl.classList.add('dragover'));
+    dropEl.addEventListener('dragleave', ()=> dropEl.classList.remove('dragover'));
+    dropEl.addEventListener('drop', (ev)=>{
+      dropEl.classList.remove('dragover');
+      const dt = ev.dataTransfer;
+      if (dt && dt.files && dt.files.length) {
+        inputEl.files = dt.files;
+        handleFileSelect(inputEl, labelEl);
+      }
+    });
+    dropEl.addEventListener('click', ()=> inputEl.click());
+    inputEl.addEventListener('change', ()=> handleFileSelect(inputEl, labelEl));
+  }
+  function handleFileSelect(inputEl, labelEl){
+    const f = inputEl.files && inputEl.files[0];
+    if (!f) return;
+    labelEl.textContent = f.name;
+    if (inputEl.accept && inputEl.accept.includes('image')) {
+      // preview
+      const url = URL.createObjectURL(f);
+      if (labelEl === document.getElementById('sourceLabel')) {
+        // source label (not previewed separately)
+      }
+      previewTarget.src = url;
+    }
+    if (inputEl.accept && inputEl.accept.includes('video')) {
+      previewVideo.src = URL.createObjectURL(f);
+    }
+  }
+  bindDrop(dropSource, sourceInput, document.getElementById('sourceLabel'));
+  bindDrop(dropTarget, targetInput, document.getElementById('targetLabel'));
+  bindDrop(el('dropVSource'), vsourceInput, document.getElementById('vsourceLabel'));
+  bindDrop(el('dropVTarget'), vtargetInput, document.getElementById('vtargetLabel'));
+  // copy button
+  copyBtn.addEventListener('click', async () => {
+    const text = apiUrlEl.textContent || '/swap-image';
+    try {
+      await navigator.clipboard.writeText(text);
+      appendLog('Copied API endpoint');
+    } catch (e) {
+      appendLog('Clipboard failed', true);
+    }
+  });
+  function appendLog(msg, isErr){
+    const div = document.createElement('div');
+    div.textContent = msg;
+    div.style.color = isErr ? 'var(--danger)' : 'var(--muted)';
+    logBox.prepend(div);
+  }
+  // Image swap
+  swapImageBtn.addEventListener('click', async () => {
+    const src = sourceInput.files[0];
+    const tgt = targetInput.files[0];
+    if (!src || !tgt) { alert('Select both source and target images.'); return; }
+    toggleImageButtons(true);
+    setImgStatus('Uploading...', true);
+    try {
+      const fd = new FormData();
+      fd.append('source', src);
+      fd.append('target', tgt);
+      const res = await fetch(apiBase + '/swap-image', { method:'POST', body: fd });
+      if (!res.ok) {
+        const text = await res.text().catch(()=>res.statusText);
+        setImgStatus('Error: ' + text, false, true);
+        appendLog('Image swap failed: ' + text, true);
+        toggleImageButtons(false);
+        return;
+      }
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      resultImage.src = url;
+      setImgStatus('Done', false, false);
+      appendLog('Image swapped successfully');
+    } catch (err) {
+      console.error(err);
+      setImgStatus('Network error', false, true);
+      appendLog('Network: ' + err.message, true);
+    } finally {
+      toggleImageButtons(false);
+    }
+  });
+  function toggleImageButtons(disable){
+    swapImageBtn.disabled = disable;
+    resetImgBtn.disabled = disable;
+    if (disable) swapImageBtn.style.opacity = 0.7;
+    else swapImageBtn.style.opacity = 1;
+  }
+  function setImgStatus(text, busy=false, isError=false){
+    imgStatus.innerHTML = '';
+    if (busy){
+      const s = document.createElement('div'); s.className='spinner';
+      imgStatus.appendChild(s);
+    }
+    const t = document.createElement('div'); t.textContent = text;
+    t.style.color = isError ? 'var(--danger)' : 'var(--muted)';
+    imgStatus.appendChild(t);
+  }
+  resetImgBtn.addEventListener('click', ()=>{
+    sourceInput.value = '';
+    targetInput.value = '';
+    previewTarget.src = '';
+    resultImage.src = '';
+    document.getElementById('sourceLabel').textContent = 'Drop source image';
+    document.getElementById('targetLabel').textContent = 'Drop target image';
+    imgStatus.innerHTML = '';
+  });
+  // Video swap
+  swapVideoBtn.addEventListener('click', async () => {
+    const src = vsourceInput.files[0];
+    const vid = vtargetInput.files[0];
+    if (!src || !vid) { alert('Select source image and target video.'); return; }
+    toggleVideoButtons(true);
+    setVidStatus('Uploading...', true);
+    try {
+      const fd = new FormData();
+      fd.append('source', src);
+      fd.append('video', vid);
+      const res = await fetch(apiBase + '/swap-video', { method:'POST', body: fd });
+      if (!res.ok) {
+        const text = await res.text().catch(()=>res.statusText);
+        setVidStatus('Error: ' + text, false, true);
+        appendLog('Video swap failed: ' + text, true);
+        toggleVideoButtons(false);
+        return;
+      }
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      resultVideo.src = url;
+      downloadVideo.href = url;
+      downloadVideo.download = 'swapped_out.mp4';
+      downloadVideo.textContent = 'Download result';
+      setVidStatus('Done', false, false);
+      appendLog('Video swapped successfully');
+    } catch (err) {
+      console.error(err);
+      setVidStatus('Network error', false, true);
+      appendLog('Network: ' + err.message, true);
+    } finally {
+      toggleVideoButtons(false);
+    }
+  });
+  function toggleVideoButtons(disable){
+    swapVideoBtn.disabled = disable;
+    resetVidBtn.disabled = disable;
+    if (disable) swapVideoBtn.style.opacity = 0.7;
+    else swapVideoBtn.style.opacity = 1;
+  }
+  function setVidStatus(text, busy=false, isError=false){
+    vidStatus.innerHTML = '';
+    if (busy){
+      const s = document.createElement('div'); s.className='spinner';
+      vidStatus.appendChild(s);
+    }
+    const t = document.createElement('div'); t.textContent = text;
+    t.style.color = isError ? 'var(--danger)' : 'var(--muted)';
+    vidStatus.appendChild(t);
+  }
+  resetVidBtn.addEventListener('click', ()=>{
+    vsourceInput.value = '';
+    vtargetInput.value = '';
+    previewVideo.src = '';
+    resultVideo.src = '';
+    downloadVideo.href = '';
+    document.getElementById('vsourceLabel').textContent = 'Source image';
+    document.getElementById('vtargetLabel').textContent = 'Target video';
+    vidStatus.innerHTML = '';
+  });
+})();
+</script>
+</body>
+</html>
+    """
+# -----------------------------------------------------------
+# IMAGE SWAP ENDPOINT
+# -----------------------------------------------------------
+@app.post("/swap-image")
+async def swap_image(source: UploadFile = File(...), target: UploadFile = File(...)):
+    src_bytes = await source.read()
+    tgt_bytes = await target.read()
+    def process():
+        src = cv2.imdecode(np.frombuffer(src_bytes, np.uint8), cv2.IMREAD_COLOR)
+        tgt = cv2.imdecode(np.frombuffer(tgt_bytes, np.uint8), cv2.IMREAD_COLOR)
+        if src is None: raise ValueError("Invalid source image")
+        if tgt is None: raise ValueError("Invalid target image")
+        src_faces = face_app.get(src)
+        tgt_faces = face_app.get(tgt)
+        if not src_faces: raise ValueError("No face in source image")
+        if not tgt_faces: raise ValueError("No face in target image")
+        s_face = src_faces[0]
+        t_face = tgt_faces[0]
+        result = swap_faces(tgt, t_face, s_face)
+        ok, encoded = cv2.imencode(".jpg", result)
+        if not ok:
+            raise ValueError("Failed encoding result")
+        return encoded.tobytes()
+    try:
+        output = await run_in_threadpool(process)
+    except ValueError as e:
+        raise HTTPException(400, str(e))
+    except Exception as e:
+        raise HTTPException(500, str(e))
+    return Response(output, media_type="image/jpeg")
+# -----------------------------------------------------------
+# VIDEO SWAP ENDPOINT
+# -----------------------------------------------------------
+@app.post("/swap-video")
+async def swap_video(source: UploadFile = File(...), video: UploadFile = File(...)):
+    src_bytes = await source.read()
+    vid_bytes = await video.read()
+    src_img = cv2.imdecode(np.frombuffer(src_bytes, np.uint8), cv2.IMREAD_COLOR)
+    if src_img is None:
+        raise HTTPException(400, "Invalid source image")
+    def process_video_job():
+        temp_in = NamedTemporaryFile(delete=False, suffix=".mp4")
+        temp_in.write(vid_bytes)
+        temp_in.close()
+        out_path = temp_in.name.replace(".mp4", "_out.mp4")
+        cap = cv2.VideoCapture(temp_in.name)
+        if not cap.isOpened():
+            raise ValueError("Cannot open input video")
+        fps = cap.get(cv2.CAP_PROP_FPS) or 24
+        w = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH))
+        h = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))
+        writer = cv2.VideoWriter(out_path, cv2.VideoWriter_fourcc(*"mp4v"), fps, (w, h))
+        src_faces = face_app.get(src_img)
+        if not src_faces:
+            raise ValueError("No face in source image")
+        src_face = src_faces[0]
+        while True:
+            ok, frame = cap.read()
+            if not ok:
+                break
+            tgt_faces = face_app.get(frame)
+            if tgt_faces:
+                try:
+                    frame = swap_faces(frame, tgt_faces[0], src_face)
+                except Exception:
+                    # keep original frame on failure
+                    pass
+            writer.write(frame)
+        writer.release()
+        cap.release()
+        return temp_in.name, out_path
+    try:
+        in_path, out_path = await run_in_threadpool(process_video_job)
+    except ValueError as e:
+        raise HTTPException(400, str(e))
+    except Exception as e:
+        raise HTTPException(500, str(e))
+    def iterator(path, cleanup=()):
+        try:
+            with open(path, "rb") as f:
+                while chunk := f.read(65536):
+                    yield chunk
+        finally:
+            for p in cleanup:
+                try:
+                    os.unlink(p)
+                except:
+                    pass
+    return StreamingResponse(iterator(out_path, cleanup=[in_path, out_path]), media_type="video/mp4")
+# -----------------------------------------------------------
+# MODEL INIT
+# -----------------------------------------------------------
+print("Loading models...")
+face_app = FaceAnalysis(name="buffalo_l")
+face_app.prepare(ctx_id=-1)
+download_model()
+swapper = insightface.model_zoo.get_model("inswapper_128.onnx", root=os.path.dirname(__file__))
+print("Model loaded.")