Spaces:

mobisoft
/

face-swap-app

Running

App Files Files Community

videopix commited on Jan 6

Commit

dc123fc

verified ·

1 Parent(s): 76917a6

Update app.py

Browse files

Files changed (1) hide show

app.py +15 -33

app.py CHANGED Viewed

@@ -163,7 +163,7 @@ def run_task(task_id, src_bytes, tgt_bytes):
 # ============================================================
-# FastAPI + UI
 # ============================================================
 app = FastAPI(title="FaceSwap (GFPGAN-Lite)")
@@ -178,14 +178,12 @@ def home():
 <title>FaceSwap</title>
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <style>
-body{background:#0e1525;color:white;font-family:Arial;margin:0;padding:20px}
 .container{max-width:1100px;margin:auto}
 .flex{display:flex;gap:16px;flex-wrap:wrap}
-.zone{flex:1;min-width:280px;border:2px dashed #ffffff33;padding:18px;border-radius:10px;text-align:center;cursor:pointer}
 .preview img{max-width:100%;border-radius:10px}
 button{padding:10px 18px;border-radius:10px;border:none;background:#6c5ce7;color:white;font-weight:600}
-.loader{border:3px solid #ffffff33;border-top-color:#00cec9;border-radius:50%;width:18px;height:18px;animation:spin .8s linear infinite;display:inline-block}
-@keyframes spin{to{transform:rotate(360deg)}}
 </style>
 </head>
 <body>
@@ -201,45 +199,29 @@ Source Image
 Target Image
 </label>
 </div>
-<br>
-<button id="go">Start</button>
-<span id="status"></span>
-<br><br>
 <img id="out">
 </div>
 <script>
-const src=document.getElementById("src"),
-      tgt=document.getElementById("tgt"),
-      go=document.getElementById("go"),
-      out=document.getElementById("out"),
-      status=document.getElementById("status");
-document.querySelectorAll(".zone")[0].onclick=()=>src.click();
-document.querySelectorAll(".zone")[1].onclick=()=>tgt.click();
-go.onclick=async()=>{
- if(!src.files[0]||!tgt.files[0]){alert("Select images");return;}
- status.innerHTML='Processing <span class="loader"></span>';
  let fd=new FormData();
- fd.append("source",src.files[0]);
- fd.append("target",tgt.files[0]);
  let r=await fetch("/swap-image",{method:"POST",body:fd});
  let j=await r.json();
  let id=j.task_id;
- let poll=setInterval(async()=>{
    let s=await fetch("/task-status/"+id).then(r=>r.json());
    if(s.status==="done"){
-     clearInterval(poll);
-     out.src="/task-result/"+id;
-     status.innerHTML="Done";
-   }
-   if(s.status==="failed"){
-     clearInterval(poll);
-     status.innerHTML="Failed";
    }
  },1000);
-};
 </script>
 </body>
 </html>

 # ============================================================
+# FastAPI + FULL UI
 # ============================================================
 app = FastAPI(title="FaceSwap (GFPGAN-Lite)")
 <title>FaceSwap</title>
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <style>
+body{background:#0e1525;color:#fff;font-family:Arial;margin:0;padding:20px}
 .container{max-width:1100px;margin:auto}
 .flex{display:flex;gap:16px;flex-wrap:wrap}
+.zone{flex:1;min-width:280px;border:2px dashed #ffffff33;padding:18px;text-align:center;border-radius:10px;cursor:pointer}
 .preview img{max-width:100%;border-radius:10px}
 button{padding:10px 18px;border-radius:10px;border:none;background:#6c5ce7;color:white;font-weight:600}
 </style>
 </head>
 <body>
 Target Image
 </label>
 </div>
+<button onclick="start()">Start</button>
 <img id="out">
 </div>
 <script>
+let src,tgt;
+document.getElementById("src").onchange=e=>src=e.target.files[0];
+document.getElementById("tgt").onchange=e=>tgt=e.target.files[0];
+async function start(){
+ if(!src||!tgt){alert("Select images");return;}
  let fd=new FormData();
+ fd.append("source",src);
+ fd.append("target",tgt);
  let r=await fetch("/swap-image",{method:"POST",body:fd});
  let j=await r.json();
  let id=j.task_id;
+ let t=setInterval(async()=>{
    let s=await fetch("/task-status/"+id).then(r=>r.json());
    if(s.status==="done"){
+     clearInterval(t);
+     document.getElementById("out").src="/task-result/"+id;
    }
  },1000);
+}
 </script>
 </body>
 </html>