Blame for index.html

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>faceswap_ov - 影片換臉 (OpenVINO)</title>
<style>
  :root { --bg:#0f1115; --card:#181b22; --fg:#e6e8ee; --muted:#9aa3b2; --acc:#4fa3ff; --ok:#3ccf91; }
  * { box-sizing: border-box; }
  body { margin:0; font-family: -apple-system, "Noto Sans TC", "Microsoft JhengHei", sans-serif;
         background:var(--bg); color:var(--fg); line-height:1.6; }
  header, main, footer { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
  header { padding: 40px 20px 10px; }
  h1 { margin: 0 0 6px; font-size: 2rem; }
  h2 { margin-top: 44px; border-bottom: 1px solid #262b36; padding-bottom: 6px; }
  p.lead { color: var(--muted); margin: 0; }
  .card { background: var(--card); border-radius: 12px; padding: 20px; margin-top: 16px; }
  video { width: 100%; border-radius: 8px; background:#000; }
  .caption { color: var(--muted); font-size: .92rem; margin-top: 8px; }
  a.btn { display:inline-block; margin: 6px 8px 6px 0; padding: 10px 16px; border-radius: 8px;
          background: var(--acc); color:#06121f; text-decoration:none; font-weight:600; }
  a { color: var(--acc); }
  table { width: 100%; border-collapse: collapse; margin-top: 8px; }
  th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid #262b36; }
  th { color: var(--muted); font-weight: 600; font-size: .9rem; }
  td.num { font-variant-numeric: tabular-nums; }
  code { background:#0c0e13; border-radius:6px; padding: 1px 6px; }
  pre { background:#0c0e13; border-radius:6px; padding: 14px; overflow-x: auto; font-size: .88rem; }
  ul { padding-left: 20px; }
  .warn { border-left: 3px solid #f0a14f; padding-left: 12px; color: var(--muted); }
  footer { color: var(--muted); font-size: .85rem; padding: 30px 20px 50px; }
</style>
</head>
<body>

<header>
  <h1>faceswap_ov</h1>
  <p class="lead">影片換臉工具 (OpenVINO 版)：示範、效能與下載。</p>
</header>

<main>

<h2>換臉示範</h2>
<div class="card">
  <video controls preload="metadata" src="videos/demo_compare_720p.mp4"></video>
  <p class="caption"><strong>左：原始影片 (1280x720)　右：OpenVINO 換臉後</strong><br>
  5 秒、25 fps、125 幀，每一幀都完成換臉。被換掉的是左側女性的臉，替換成右側男性的臉 (圖中為縮小後的並排畫面)。
  換臉範圍為臉部區域，髮際線與髮絲會有部分殘留與模糊，這是 128px 換臉模型的限制。</p>
</div>

<div class="card">
  <p><strong>素材與授權</strong></p>
  <ul>
    <li>原臉 (target)：<a href="https://commons.wikimedia.org/wiki/File:Processed-F3BB2BF2-2743-4B47-8648-66D0D76A444F.jpg">Wikimedia Commons · Processed-F3BB2BF2-2743-4B47-8648-66D0D76A444F.jpg</a> (CC0)</li>
    <li>換上的臉 (ref)：<a href="https://commons.wikimedia.org/wiki/File:Allan_MacDonald.jpg">Wikimedia Commons · Allan MacDonald.jpg</a> (CC0)</li>
    <li>影片：由上述原圖製作，靜態畫面 5 秒，加上 440 Hz 測試音軌</li>
  </ul>
  <p class="caption">以上皆為 CC0 授權素材。照片中人物的同意與肖像權由原作者與來源平台負責，使用時請自行確認。</p>
</div>

<h2>效能比較</h2>
<div class="card">
  <p>同一支 1280x720、125 幀影片、同一組目錄與參數，兩版在同一台機器上依序執行。</p>
  <table>
    <thead>
      <tr><th>版本</th><th>總耗時</th><th>每幀耗時</th><th>相對速度</th></tr>
    </thead>
    <tbody>
      <tr>
        <td>ONNX Runtime 版 (CPU)</td>
        <td class="num">1753 秒 (約 29 分鐘)</td>
        <td class="num">約 14 秒</td>
        <td>1x</td>
      </tr>
      <tr>
        <td>OpenVINO 版 (CPU)</td>
        <td class="num">16 秒</td>
        <td class="num">約 0.13 秒</td>
        <td class="num">約 108x</td>
      </tr>
    </tbody>
  </table>
  <p class="caption">
    OpenVINO 的 16 秒為逐幀處理迴圈的時間，不含三個模型編譯 (約 1.6 秒) 與 ffmpeg 合併聲音。
    ONNX Runtime 的 1753 秒為整個程序的實際耗時，包含模型載入與 ffmpeg 合併。
    兩版換臉次數皆為 125 次，輸出外觀幾乎一致。
  </p>
  <p class="warn">
    ONNX Runtime 在此測試環境的速度明顯偏慢。單獨測量時，其偵測與換臉的單次推論時間遠高於一般預期，
    並非 onnxruntime 本身的正常表現。此倍數只代表本機、本次測試的結果，不應直接外推到其他硬體。
    測試機器：16 核心 CPU、只使用 CPU 裝置。
  </p>
</div>

<h2>下載</h2>
<div class="card">
  <p>程式、套件清單與安裝說明 (README) 分別打包：</p>
  <a class="btn" href="downloads/swapface_openvino.zip">OpenVINO 版 (.zip)</a>
  <a class="btn" href="downloads/swapface_onnxruntime.zip">ONNX Runtime 版 (.zip)</a>
  <p class="caption">模型權重 (inswapper_128.onnx、buffalo_l) 不包含在壓縮包內，請依各包內 README 另行下載。</p>
</div>

<h2>快速開始</h2>
<div class="card">
<pre>python3 -m venv venv && source venv/bin/activate
pip install -r requirements.txt

python swapface_ov.py input.mp4 \
  --target 原臉目錄 \
  --ref    新臉目錄 \
  --swapper inswapper_128.onnx -o output.mp4</pre>
</div>

<h2>授權與責任</h2>
<div class="card warn">
  <p>本工具與示範素材僅供研究與教學。insightface / inswapper 模型權重採非商業研究授權，請自行確認使用條款。
  換臉技術只應用於您有權使用的人臉，請勿用於冒充、詐欺或散布不實影片。</p>
</div>

</main>

<footer>
  faceswap_ov · 示範素材：Wikimedia Commons (CC0)
</footer>

</body>
</html>