Phishing-Email-Detection-WebGPU

Running

App Files Files Community

HarbourSOFT-LAB commited on Oct 21

Commit

fa8a1be

verified ·

1 Parent(s): 3661b15

Update index.html

Browse files

Files changed (1) hide show

index.html +224 -84

index.html CHANGED Viewed

@@ -1,189 +1,329 @@
 <!DOCTYPE html>
-<html lang="zh">
 <head>
   <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
   <title>Phishing Email Detection (Transformers.js + ONNX)</title>
   <style>
-    body { font-family: Arial, sans-serif; padding: 20px; line-height: 1.6; }
-    textarea { width: 100%; height: 200px; margin: 12px 0; }
-    button { padding: 10px 16px; background: #4CAF50; color: #fff; border: 0; cursor: pointer; border-radius: 6px; }
-    button.secondary { background: #777; }
-    #result { margin-top: 16px; padding: 12px; background: #f4f4f4; border-radius: 6px; white-space: pre-wrap; }
-    #loading { margin-top: 16px; }
-    #email-input-section { margin-top: 16px; }
-    #log { background: #0b1021; color: #b8d0ff; padding: 12px; border-radius: 6px; height: 180px; overflow: auto; font-size: 12px; }
-    .row { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
-    progress { width: 280px; height: 12px; }
-    .muted { color: #666; font-size: 12px; }
   </style>
 </head>
 <body>
-  <h1>Phishing Email Detection</h1>
-  <p>是否加载钓鱼检测模型？</p>
-  <div class="row">
-    <button id="load-model-btn">是，开始加载模型</button>
-    <button id="cancel-load-btn" class="secondary" style="display:none;">取消（仅重置UI）</button>
-  </div>
-  <div id="loading" style="display:none;">
     <div class="row">
-      <progress id="progress" value="0" max="100"></progress>
-      <span id="progress-label">0%</span>
     </div>
-    <div class="muted">首次运行会下载模型与分词器等文件，时间取决于网络与浏览器缓存。</div>
-  </div>
-  <div id="email-input-section" style="display:none;">
-    <textarea id="email-input" placeholder="把邮件内容粘贴到这里……"></textarea><br />
-    <button id="detect-btn">开始检测</button>
-    <div id="result"></div>
-  </div>
-  <h3>调试日志</h3>
-  <div id="log"></div>
   <script type="module">
-    // ===== 配置区 =====
-    // 确保使用“仓库ID”，不要填 .onnx 文件直链！
     const MODEL_ID = 'onnx-community/phishing-email-detection-distilbert_v2.4.1-ONNX';
-    // 优先使用 v3（@huggingface/transformers），失败则回退到 v2（@xenova/transformers）
     const CDN_PRIMARY  = 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0';
     const CDN_FALLBACK = 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2';
-    // ===== DOM =====
-    const loadBtn   = document.getElementById('load-model-btn');
-    const cancelBtn = document.getElementById('cancel-load-btn');
-    const emailSec  = document.getElementById('email-input-section');
-    const detectBtn = document.getElementById('detect-btn');
-    const resultDiv = document.getElementById('result');
-    const loading   = document.getElementById('loading');
-    const pbar      = document.getElementById('progress');
-    const plabel    = document.getElementById('progress-label');
-    const logDiv    = document.getElementById('log');
-    // ===== 状态 =====
     let pipe = null;
     let cancelled = false;
     function log(...args) {
       const line = args.map(a => (typeof a === 'string' ? a : JSON.stringify(a, null, 2))).join(' ');
       logDiv.textContent += line + '\n';
       logDiv.scrollTop = logDiv.scrollHeight;
       console.log('[LOG]', ...args);
     }
     function setProgress(evt) {
       if (evt?.status === 'progress') {
         const pct = Math.max(0, Math.min(100, Math.round(evt.progress || 0)));
         pbar.value = pct;
-        plabel.textContent = `${pct}% ${evt?.name || evt?.file || ''}`;
       } else if (evt?.status) {
-        log(`status: ${evt.status} ${evt?.name || evt?.file || ''}`);
       }
     }
     function showError(err) {
       const msg = err?.stack || err?.message || String(err);
       log('❌ ERROR:', msg);
     }
-    // 捕获全局未处理错误，方便定位
-    window.addEventListener('error',  e => log('window.error:', e.message, e.filename, e.lineno + ':' + e.colno));
-    window.addEventListener('unhandledrejection', e => log('unhandledrejection:', e.reason?.message || e.reason));
     async function importTransformers() {
       try {
-        log('尝试加载库：', CDN_PRIMARY);
         return await import(CDN_PRIMARY);
       } catch (e1) {
         showError(e1);
-        log('主库导入失败，改用回退版本：', CDN_FALLBACK);
         return await import(CDN_FALLBACK);
       }
     }
     loadBtn.addEventListener('click', async () => {
       try {
         cancelled = false;
         loadBtn.style.display = 'none';
         cancelBtn.style.display = 'inline-block';
-        loading.style.display = 'block';
         pbar.value = 0; plabel.textContent = '0%';
         const mod = await importTransformers();
-        const { pipeline, env } = mod;
-        log('Transformers.js 版本已加载。');
-        // 可选：指定 WebGPU/wasm。默认自动选择；如想强制 WebGPU，可改为 'webgpu'
         const device = 'auto';
-        // 量化权重（更小更快）。如果仓库提供 q4，就会加载它（该仓库提供多种量化权重）。:contentReference[oaicite:6]{index=6}
         const options = {
           dtype: 'q4',
           device,
-          // 显示下载进度
           progress_callback: setProgress,
         };
-        log('开始通过仓库ID加载模型：', MODEL_ID);
         pipe = await pipeline('text-classification', MODEL_ID, options);
         if (cancelled) {
-          log('注意：取消只会重置UI，后台加载无法真正中断（库暂不支持）。'); // 说明限制
         }
-        loading.style.display = 'none';
         cancelBtn.style.display = 'none';
         emailSec.style.display = 'block';
-        log('✅ 模型加载完成。');
       } catch (err) {
-        loading.style.display = 'none';
         cancelBtn.style.display = 'none';
         loadBtn.style.display = 'inline-block';
         showError(err);
-        // 常见定位：是否 404（多半是仓库ID写错或没权限）
         if ((err?.message || '').includes('404')) {
-          log('可能的原因：仓库ID不存在/拼写错误/私有仓库无权限。当前使用：', MODEL_ID);
-          log('建议改用公开可用且结构完整的仓库：onnx-community/phishing-email-detection-distilbert_v2.4.1-ONNX');
         }
-        // 文档：pipeline 要求模型在 Hub 上且 ONNX 权重在 onnx/ 子目录。:contentReference[oaicite:7]{index=7}
-        log('参考：Transformers.js pipeline 需仓库ID（含 onnx/ 权重与配置文件）。');
       }
     });
     cancelBtn.addEventListener('click', () => {
-      // 仅重置 UI；Transformers.js 暂不支持真正中断 pipeline() 的加载。:contentReference[oaicite:8]{index=8}
       cancelled = true;
       loadBtn.style.display = 'inline-block';
       cancelBtn.style.display = 'none';
-      loading.style.display = 'none';
-      log('已取消（仅UI）。如果后台仍在下载，请稍等其失败或完成。');
     });
     detectBtn.addEventListener('click', async () => {
       try {
-        const emailText = document.getElementById('email-input').value.trim();
         if (!emailText) {
-          resultDiv.textContent = '请输入要分类的文本。';
           return;
         }
         if (!pipe) {
-          resultDiv.textContent = '模型尚未加载成功。';
           return;
         }
-        resultDiv.textContent = '推理中…';
-        const out = await pipe(emailText); // 默认返回 top-1
-        // 同时把完整结构打印到日志，便于核对标签名称与分数
-        log('推理结果：', out);
         const first = Array.isArray(out) ? out[0] : out;
-        resultDiv.textContent = `Prediction: ${first.label}\nScore: ${first.score?.toFixed?.(4) ?? first.score}`;
       } catch (err) {
         showError(err);
-        resultDiv.textContent = '检测失败，详见调试日志。';
       }
     });
   </script>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="en">
 <head>
   <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
   <title>Phishing Email Detection (Transformers.js + ONNX)</title>
   <style>
+    :root{
+      --bg: #0b1021;
+      --panel: #0f1531;
+      --panel-2: #0c122b;
+      --text: #e9eeff;
+      --muted: #9fb3ff;
+      --accent: #7aa2ff;
+      --success: #2ecc71;
+      --warn: #f39c12;
+      --danger: #e74c3c;
+      --border: 1px solid rgba(255,255,255,.08);
+      --radius: 14px;
+      --shadow: 0 10px 30px rgba(0,0,0,.35);
+    }
+    *{box-sizing:border-box}
+    html,body{height:100%}
+    body{
+      margin:0; background: radial-gradient(1200px 800px at 10% -10%, #1a2252 0%, transparent 60%),
+                                  radial-gradient(1200px 800px at 110% 10%, #1b2d61 0%, transparent 60%),
+                                  var(--bg);
+      color:var(--text); font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
+      padding: 24px; display:flex; flex-direction:column; gap:24px;
+    }
+    header{
+      display:flex; justify-content:space-between; align-items:center; gap:16px;
+      padding: 18px 20px; border-radius: var(--radius); backdrop-filter: blur(6px);
+      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
+      border: var(--border); box-shadow: var(--shadow);
+    }
+    h1{font-size: clamp(22px, 3.2vw, 28px); margin:0; letter-spacing:.2px}
+    .subtitle{color:var(--muted); font-size:14px}
+    .grid{display:grid; grid-template-columns:1.1fr .9fr; gap:22px}
+    @media (max-width: 960px){ .grid{grid-template-columns:1fr; } }
+    .card{background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
+      border:var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px}
+    textarea{width:100%; height:220px; resize:vertical; background:var(--panel);
+      color:var(--text); border-radius:12px; border:var(--border); padding:12px 14px; outline:none}
+    .row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
+    button{appearance:none; border:0; border-radius:12px; padding:10px 14px; cursor:pointer; font-weight:600;
+      background: linear-gradient(180deg, #7aa2ff, #4e77ff); color:white; box-shadow: 0 6px 20px rgba(78,119,255,.35)}
+    button.secondary{background: linear-gradient(180deg, #7780a6, #5a6284); box-shadow:none}
+    button.ghost{background:transparent; border:var(--border); color:var(--text)}
+    button:disabled{opacity:.55; cursor:not-allowed}
+    .muted{color:var(--muted); font-size:12px}
+    .progress-wrap{display:flex; align-items:center; gap:10px}
+    progress{width:280px; height:12px; accent-color:#7aa2ff}
+    #result{margin-top:12px; padding:14px; background:var(--panel-2); border:var(--border); border-radius:12px; white-space:pre-wrap}
+    .badge{display:inline-flex; align-items:center; gap:6px; font-size:12px; border-radius:999px; padding:6px 10px;
+      background:#1a234a; border:var(--border)}
+    .badge.success{background: rgba(46, 204, 113, .12); border: 1px solid rgba(46, 204, 113, .35); color:#b9f6d0}
+    .badge.warn{background: rgba(243, 156, 18, .12); border: 1px solid rgba(243, 156, 18, .35); color:#ffe2b9}
+    .badge.danger{background: rgba(231, 76, 60, .12); border: 1px solid rgba(231, 76, 60, .35); color:#ffbdb4}
+    #log{background:#060a1d; color:#b8d0ff; padding:12px; border-radius:12px; height:200px; overflow:auto; font-size:12px; border:var(--border)}
+    .footer-note{opacity:.8; font-size:12px}
+    .spacer{flex:1}
   </style>
 </head>
 <body>
+  <header>
+    <div>
+      <h1>Phishing Email Detection</h1>
+      <div class="subtitle">Transformers.js + ONNX Runtime (browser)</div>
+    </div>
     <div class="row">
+      <button id="load-model-btn">Load model</button>
+      <button id="cancel-load-btn" class="secondary" style="display:none;">Cancel (UI reset)</button>
+      <button id="clear-log-btn" class="ghost">Clear log</button>
     </div>
+  </header>
+  <div class="grid">
+    <section class="card">
+      <p>Would you like to download and initialize the phishing-detection model now?</p>
+      <div id="loading" style="display:none; margin-bottom:8px;">
+        <div class="progress-wrap">
+          <progress id="progress" value="0" max="100"></progress>
+          <span id="progress-label" class="muted">0%</span>
+        </div>
+        <div class="muted">First run will download model artifacts and tokenizer files. Duration depends on network and browser cache.</div>
+      </div>
+      <div id="email-input-section" style="display:none;">
+        <textarea id="email-input" placeholder="Paste email text here…"></textarea>
+        <div class="row">
+          <button id="detect-btn">Run Detection</button>
+          <button id="copy-btn" class="ghost">Copy Result</button>
+          <span id="status-chip" class="badge" style="display:none;"></span>
+        </div>
+        <div id="result" aria-live="polite"></div>
+      </div>
+    </section>
+    <aside class="card">
+      <h3 style="margin-top:6px">Debug Log</h3>
+      <div id="log" aria-live="polite"></div>
+      <div class="row" style="margin-top:10px">
+        <span class="footer-note">Tip: open DevTools for network details.</span>
+        <span class="spacer"></span>
+        <button id="save-log-btn" class="ghost">Save Log</button>
+      </div>
+    </aside>
+  </div>
   <script type="module">
+    // ==========================
+    // Configuration
+    // ==========================
+    // Use a Hugging Face Hub repository ID (NOT a direct .onnx URL)
     const MODEL_ID = 'onnx-community/phishing-email-detection-distilbert_v2.4.1-ONNX';
+    // Prefer v3 (@huggingface/transformers). Fallback to v2 (@xenova/transformers)
     const CDN_PRIMARY  = 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0';
     const CDN_FALLBACK = 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2';
+    // Human-friendly label mapping. We WILL NOT display raw LABEL_* tokens.
+    const labelMap = {
+      'LABEL_0': 'Legitimate email',
+      'LABEL_1': 'Phishing email',
+      'LABEL_2': 'Legitimate URL',
+      'LABEL_3': 'Phishing URL',
+      // In case a model uses different strings (e.g., 'SAFE', 'SCAM'), add them here as needed
+    };
+    // ==========================
+    // DOM
+    // ==========================
+    const $ = (sel) => document.querySelector(sel);
+    const loadBtn   = $('#load-model-btn');
+    const cancelBtn = $('#cancel-load-btn');
+    const clearBtn  = $('#clear-log-btn');
+    const emailSec  = $('#email-input-section');
+    const detectBtn = $('#detect-btn');
+    const copyBtn   = $('#copy-btn');
+    const resultDiv = $('#result');
+    const loadingUI = $('#loading');
+    const pbar      = $('#progress');
+    const plabel    = $('#progress-label');
+    const logDiv    = $('#log');
+    const saveLog   = $('#save-log-btn');
+    const statusChip= $('#status-chip');
+    // ==========================
+    // State
+    // ==========================
     let pipe = null;
     let cancelled = false;
+    // ==========================
+    // Utilities
+    // ==========================
     function log(...args) {
       const line = args.map(a => (typeof a === 'string' ? a : JSON.stringify(a, null, 2))).join(' ');
       logDiv.textContent += line + '\n';
       logDiv.scrollTop = logDiv.scrollHeight;
+      // Also mirror in console for convenience
       console.log('[LOG]', ...args);
     }
     function setProgress(evt) {
       if (evt?.status === 'progress') {
         const pct = Math.max(0, Math.min(100, Math.round(evt.progress || 0)));
         pbar.value = pct;
+        plabel.textContent = `${pct}% ${evt?.name || evt?.file || ''}`.trim();
       } else if (evt?.status) {
+        log(`status: ${evt.status} ${evt?.name || evt?.file || ''}`.trim());
       }
     }
     function showError(err) {
       const msg = err?.stack || err?.message || String(err);
       log('❌ ERROR:', msg);
     }
+    function humanLabel(raw) {
+      // Normalize and map labels to human-friendly values
+      if (!raw) return 'Unknown';
+      return labelMap[raw] || labelMap[raw.toUpperCase()] || raw; // fallback to original if unmapped
+    }
+    function setChip(kind, text) {
+      statusChip.className = 'badge';
+      if (kind) statusChip.classList.add(kind);
+      statusChip.textContent = text;
+      statusChip.style.display = 'inline-flex';
+    }
+    function clearChip(){ statusChip.style.display = 'none'; }
     async function importTransformers() {
       try {
+        log('Trying to import:', CDN_PRIMARY);
         return await import(CDN_PRIMARY);
       } catch (e1) {
         showError(e1);
+        log('Primary import failed. Falling back to:', CDN_FALLBACK);
         return await import(CDN_FALLBACK);
       }
     }
+    // Global error capture for easier debugging
+    window.addEventListener('error',  e => log('window.error:', e.message, e.filename, `${e.lineno}:${e.colno}`));
+    window.addEventListener('unhandledrejection', e => log('unhandledrejection:', e.reason?.message || e.reason));
+    // ==========================
+    // Events
+    // ==========================
     loadBtn.addEventListener('click', async () => {
       try {
         cancelled = false;
         loadBtn.style.display = 'none';
         cancelBtn.style.display = 'inline-block';
+        loadingUI.style.display = 'block';
         pbar.value = 0; plabel.textContent = '0%';
         const mod = await importTransformers();
+        const { pipeline } = mod; // v2 and v3 both expose pipeline
+        log('Transformers.js loaded.');
+        // Select device (auto | webgpu | wasm). Auto lets library choose the best available.
         const device = 'auto';
+        // Prefer quantized weights where available for smaller, faster downloads.
         const options = {
           dtype: 'q4',
           device,
           progress_callback: setProgress,
         };
+        log('Loading model from repo id:', MODEL_ID);
         pipe = await pipeline('text-classification', MODEL_ID, options);
         if (cancelled) {
+          log('Note: Cancel only resets the UI; it cannot interrupt an in-flight pipeline load.');
         }
+        loadingUI.style.display = 'none';
         cancelBtn.style.display = 'none';
         emailSec.style.display = 'block';
+        log('✅ Model ready.');
       } catch (err) {
+        loadingUI.style.display = 'none';
         cancelBtn.style.display = 'none';
         loadBtn.style.display = 'inline-block';
         showError(err);
         if ((err?.message || '').includes('404')) {
+          log('Repository not found / typo / or private with no access. Current:', MODEL_ID);
         }
+        log('Reminder: Transformers.js pipeline expects a Hub repo with ONNX weights under an onnx/ directory plus required configs.');
       }
     });
     cancelBtn.addEventListener('click', () => {
       cancelled = true;
       loadBtn.style.display = 'inline-block';
       cancelBtn.style.display = 'none';
+      loadingUI.style.display = 'none';
+      log('Canceled (UI only). If downloads are in-flight, they may finish or fail later.');
     });
+    clearBtn.addEventListener('click', () => { logDiv.textContent = ''; });
     detectBtn.addEventListener('click', async () => {
       try {
+        clearChip();
+        const emailText = /** @type {HTMLTextAreaElement} */(document.getElementById('email-input')).value.trim();
         if (!emailText) {
+          resultDiv.textContent = 'Please paste some email text to classify.';
           return;
         }
         if (!pipe) {
+          resultDiv.textContent = 'Model is not loaded yet.';
           return;
         }
+        resultDiv.textContent = 'Running inference…';
+        const out = await pipe(emailText); // usually returns top-1 result
+        log('inference output:', out);
+        // Handle output shape from v2/v3 (either array or single object)
         const first = Array.isArray(out) ? out[0] : out;
+        const niceLabel = humanLabel(first.label);
+        const score = typeof first.score === 'number' ? first.score : Number(first.score ?? NaN);
+        const confidence = Number.isFinite(score) ? (score * 100).toFixed(2) + '%' : String(first.score);
+        let riskKind = 'success';
+        if (/phishing/i.test(niceLabel)) riskKind = 'danger';
+        else if (/url/i.test(niceLabel)) riskKind = 'warn';
+        setChip(riskKind, niceLabel);
+        resultDiv.textContent = `Prediction: ${niceLabel}\nConfidence: ${confidence}`;
       } catch (err) {
         showError(err);
+        resultDiv.textContent = 'Detection failed. See Debug Log for details.';
       }
     });
+    copyBtn.addEventListener('click', async () => {
+      const text = resultDiv.textContent.trim();
+      if (!text) return;
+      try { await navigator.clipboard.writeText(text); setChip('success', 'Copied'); setTimeout(clearChip, 1200); }
+      catch { setChip('warn', 'Copy failed'); setTimeout(clearChip, 1400); }
+    });
+    saveLog.addEventListener('click', () => {
+      const blob = new Blob([logDiv.textContent], { type: 'text/plain' });
+      const url = URL.createObjectURL(blob);
+      const a = Object.assign(document.createElement('a'), { href: url, download: 'phishing-detector-log.txt' });
+      document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url);
+    });
   </script>
 </body>
 </html>