Spaces:
Sleeping
Sleeping
| <div class="app-shell"> | |
| <div class="app-header"> | |
| <div class="app-header-left"> | |
| <div class="app-logo"> | |
| <svg viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"> | |
| <circle cx="12" cy="8" r="4" fill="white"/> | |
| <path d="M4 20c0-4.418 3.582-8 8-8s8 3.582 8 8" fill="none" stroke="white" stroke-width="2" stroke-linecap="round"/> | |
| <circle cx="19" cy="8" r="3" fill="none" stroke="white" stroke-width="1.5"/> | |
| <path d="M22 13c-1.5-.8-3-1-4.5-.5" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round"/> | |
| </svg> | |
| </div> | |
| <span class="app-title">Selectable Face Swap</span> | |
| <span class="app-badge">v1.0</span> | |
| <span class="app-badge flux">FLUX.2</span> | |
| </div> | |
| </div> | |
| <div class="app-notice"> | |
| <ul class="notice-list"> | |
| <li>Upload a target image, select the faces you want to replace, upload one source face per selection, and click <strong>Swap Faces</strong>.</li> | |
| <li>When using this Space, please comply with the <a href="https://huggingface.co/content-policy" target="_blank">Hugging Face Content Policy</a>. Only swap faces with the explicit consent of the people depicted.</li> | |
| <li>This Space uses <strong>FLUX.2</strong> by Black Forest Labs. By using it you agree to the <a href="https://bfl.ai/legal/usage-policy" target="_blank">BFL Usage Policy</a>. You are solely responsible for obtaining the necessary consents for all images you upload and for ensuring your use is lawful.</li> | |
| <li>To monitor quality, images you upload and the generated result are logged to a private dataset and <strong>auto-deleted after 7 days</strong>. See the <a href="#privacy-policy" onclick="document.getElementById('privacy-policy').open=true">Privacy Policy</a> below.</li> | |
| </ul> | |
| </div> | |
| <div class="app-main"> | |
| <!-- ── LEFT: target upload → face selection → source uploads ──────── --> | |
| <div class="app-left"> | |
| <!-- Step 1: Target image --> | |
| <div class="panel-card"> | |
| <div class="panel-card-title">1 · Upload Target Image</div> | |
| <div class="panel-card-body"> | |
| <div id="target-drop-zone" class="drop-zone"> | |
| <div id="target-upload-prompt" class="upload-prompt"> | |
| <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <rect x="8" y="14" width="64" height="52" rx="6" fill="none" stroke="#fbbf24" stroke-width="2" stroke-dasharray="4 3"/> | |
| <circle cx="30" cy="34" r="8" fill="rgba(251,191,36,0.15)" stroke="#fbbf24" stroke-width="1.5"/> | |
| <path d="M16 62c0-7.732 6.268-14 14-14s14 6.268 14 14" fill="rgba(251,191,36,0.12)" stroke="#fbbf24" stroke-width="1.5"/> | |
| <circle cx="54" cy="34" r="6" fill="rgba(251,191,36,0.10)" stroke="#fbbf24" stroke-width="1.5"/> | |
| <path d="M44 62c0-5.523 4.477-10 10-10" fill="none" stroke="#fbbf24" stroke-width="1.5" stroke-linecap="round"/> | |
| </svg> | |
| <span class="upload-main-text">Click or drag target image here</span> | |
| <span class="upload-sub-text">Faces detected automatically — up to 8</span> | |
| </div> | |
| <input id="target-file-input" type="file" accept="image/*" style="display:none;" /> | |
| <div id="target-preview" class="target-preview" style="display:none;"> | |
| <img id="target-preview-img" alt="target" /> | |
| <button id="target-clear-btn" class="img-clear-btn" title="Remove image">✕</button> | |
| </div> | |
| </div> | |
| <div id="detect-status" class="detect-status" style="display:none;"></div> | |
| </div> | |
| </div> | |
| <!-- Step 2: Face selection (appears after detection) --> | |
| <div id="faces-panel" class="panel-card" style="display:none;"> | |
| <div class="panel-card-title">2 · Select Faces to Swap</div> | |
| <div class="panel-card-body"> | |
| <div id="face-thumbs-grid" class="face-thumbs-grid"></div> | |
| <div class="hint-text">Click thumbnails to toggle selection. Selected faces turn pink.</div> | |
| </div> | |
| </div> | |
| <!-- Step 3: Source images (appears as faces are selected) --> | |
| <div id="sources-panel" class="panel-card" style="display:none;"> | |
| <div class="panel-card-title">3 · Upload Source Faces</div> | |
| <div class="panel-card-body"> | |
| <div id="source-uploads-grid" class="source-uploads-grid"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ── RIGHT: run + result ─────────────────────────────────────────── --> | |
| <div class="app-right"> | |
| <div class="panel-card"> | |
| <div class="panel-card-title">Run</div> | |
| <div class="panel-card-body"> | |
| <label class="consent-label"> | |
| <input type="checkbox" id="consent-checkbox" /> | |
| <span>I consent to my uploaded images being logged for quality monitoring | |
| (<a href="#privacy-policy" onclick="document.getElementById('privacy-policy').open=true">Privacy Policy</a>).</span> | |
| </label> | |
| <button id="ui-run-btn" class="btn-run" disabled> | |
| <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><polygon points="5 3 19 12 5 21 5 3" fill="white"/></svg> | |
| <span id="run-btn-label">Swap Faces</span> | |
| </button> | |
| <div class="hint-text">Select faces, upload source images, and accept the Privacy Policy to enable.</div> | |
| </div> | |
| </div> | |
| <div class="output-frame"> | |
| <div class="out-title"> | |
| <span>Result</span> | |
| <button id="dl-btn-output" class="out-download-btn" title="Download result"> | |
| <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg> | |
| Download | |
| </button> | |
| </div> | |
| <div class="out-body" id="output-image-container"> | |
| <div id="output-placeholder" class="out-placeholder">Result will appear here</div> | |
| <div id="swap-loader" class="modern-loader"> | |
| <div class="loader-spinner"></div> | |
| <div class="loader-text">Swapping faces…</div> | |
| <div class="loader-bar-track"><div class="loader-bar-fill"></div></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <details class="privacy-details" id="privacy-policy"> | |
| <summary>Privacy Policy</summary> | |
| <div class="privacy-body"> | |
| <p><strong>Space:</strong> Selectable Face Swap · <strong>Operator:</strong> someone-in-the-world on Hugging Face · <strong>Last updated:</strong> 2026-05-20</p> | |
| <h4>What data is collected</h4> | |
| <p>When you run a face swap, the following is logged: the target image, each source face image, the output image, the indices of the selected faces, inference duration, and success/error status. No user account, IP address, or session data is collected.</p> | |
| <h4>Why it is collected</h4> | |
| <p>Solely for monitoring application performance and improving quality (legitimate interest, GDPR Art. 6(1)(f)). No profiling or automated decision-making is performed.</p> | |
| <h4>Where it is stored</h4> | |
| <p>In a private Hugging Face dataset accessible only to the operator. The data is not shared with or sold to any third party.</p> | |
| <h4>How long it is kept</h4> | |
| <p>Images and metadata are automatically deleted after <strong>7 days</strong>. No manual action is required.</p> | |
| <h4>Your rights</h4> | |
| <p>Use of this Space is entirely voluntary. Under GDPR you have the right to:</p> | |
| <ul> | |
| <li><strong>Access</strong> (Art. 15): request a copy of data held about you</li> | |
| <li><strong>Erasure</strong> (Art. 17): request deletion of your data</li> | |
| <li><strong>Restriction</strong> (Art. 18): request that processing be limited</li> | |
| <li><strong>Portability</strong> (Art. 20): receive your data in a machine-readable format</li> | |
| <li><strong>Objection</strong> (Art. 21): object to processing based on legitimate interest</li> | |
| </ul> | |
| <p>To exercise any of these rights, open a discussion on this Space's <a href="https://huggingface.co/spaces/someone-in-the-world/Selectable-Face-Swap/discussions" target="_blank">Community tab</a>.</p> | |
| <h4>Right to complain</h4> | |
| <p>You may lodge a complaint with your national data protection authority, e.g. <a href="https://ico.org.uk" target="_blank">ICO</a> (UK), <a href="https://www.cnil.fr" target="_blank">CNIL</a> (France), <a href="https://www.bfdi.bund.de" target="_blank">BfDI</a> (Germany), or your local EU authority listed at <a href="https://edpb.europa.eu" target="_blank">edpb.europa.eu</a>.</p> | |
| <h4>Model license & usage</h4> | |
| <p>Face swaps are generated with <strong>FLUX.2</strong> by <a href="https://bfl.ai" target="_blank">Black Forest Labs</a>. Use of this Space is subject to the <a href="https://bfl.ai/legal/usage-policy" target="_blank">BFL Usage Policy</a>. You are solely responsible for ensuring that every image you upload is used with the explicit consent of the person(s) depicted and that your use complies with applicable law. The Space operator enforces these requirements through the notices and consent mechanism above, but cannot verify individual uploads.</p> | |
| </div> | |
| </details> | |
| </div> | |