Phishing-Email-Detection-WebGPU

Running

App Files Files Community

HarbourSOFT-LAB commited on Oct 21

Commit

3661b15

verified ·

1 Parent(s): 920e9c2

Update index.html

Browse files

Files changed (1) hide show

index.html +167 -80

index.html CHANGED Viewed

@@ -1,101 +1,188 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Phishing Email Detection</title>
   <style>
-    body {
-      font-family: Arial, sans-serif;
-      padding: 20px;
-    }
-    textarea {
-      width: 100%;
-      height: 200px;
-      margin-bottom: 20px;
-    }
-    button {
-      padding: 10px 20px;
-      background-color: #4CAF50;
-      color: white;
-      border: none;
-      cursor: pointer;
-    }
-    #result {
-      margin-top: 20px;
-      padding: 10px;
-      background-color: #f4f4f4;
-    }
-    #loading-message {
-      margin-top: 20px;
-      color: blue;
-    }
   </style>
 </head>
 <body>
   <h1>Phishing Email Detection</h1>
-  <p>Would you like to load the phishing detection model?</p>
-  <button id="load-model-btn">Yes, Load Model</button>
-  <button id="cancel-load-btn" style="display: none;">Cancel</button>
-  <div id="loading-message" style="display: none;">Loading model, please wait...</div>
-  <div id="email-input-section" style="display: none;">
-    <textarea id="email-input" placeholder="Paste email content here..."></textarea><br>
-    <button id="detect-btn">Detect Phishing</button>
     <div id="result"></div>
   </div>
   <script type="module">
-    // Import transformers.js directly from the CDN
-    import { pipeline } from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@latest/dist/transformers.min.js";
-    const modelPath = "https://huggingface.co/aaazKI/phishing-email-detection-distilbert_v2.4.1-ONNX/resolve/main/onnx/model.onnx";
-    let model;
-    const loadModelBtn = document.getElementById("load-model-btn");
-    const cancelLoadBtn = document.getElementById("cancel-load-btn");
-    const emailInputSection = document.getElementById("email-input-section");
-    const loadingMessage = document.getElementById("loading-message");
-    const resultDiv = document.getElementById("result");
-    const detectBtn = document.getElementById("detect-btn");
-    loadModelBtn.addEventListener("click", async () => {
-      // Hide buttons and show loading message
-      loadModelBtn.style.display = "none";
-      cancelLoadBtn.style.display = "inline-block";
-      loadingMessage.style.display = "block";
-      // Load the model asynchronously
       try {
-        model = await pipeline("text-classification", modelPath);
-        loadingMessage.style.display = "none";
-        emailInputSection.style.display = "block"; // Show input section once model is loaded
-      } catch (error) {
-        loadingMessage.innerText = "Error loading the model. Please try again.";
       }
-    });
-    cancelLoadBtn.addEventListener("click", () => {
-      // Reset the UI if the user cancels loading
-      loadModelBtn.style.display = "inline-block";
-      cancelLoadBtn.style.display = "none";
-      loadingMessage.style.display = "none";
-    });
-    detectBtn.addEventListener("click", async () => {
-      const emailText = document.getElementById("email-input").value;
-      if (!emailText.trim()) {
-        resultDiv.innerText = "Please enter some text to classify.";
-        return;
       }
-      // Run inference using the model
-      const result = await model(emailText);
-      // Display the result
-      const prediction = result[0].label;
-      resultDiv.innerText = `Prediction: ${prediction}`;
     });
   </script>
 </body>

 <!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>