Update script.js

script.js

@@ -1,6 +1,6 @@
 document.addEventListener('DOMContentLoaded', () => {
   // ─────────────────────────────────────────────────────────────────────────
-  // 文字分析相关
+  // 1. 文字分析相關元素
   const inputTextArea = document.getElementById('predict_info');
   const inputButton = document.getElementById('detect_button');
   const clearButton = document.getElementById('clear_button');
@@ -16,15 +16,15 @@ document.addEventListener('DOMContentLoaded', () => {
   const TEXT_API = '/predict';
   const FEEDBACK_API = '/feedback';
 
+  // 文字檢測：當按「檢測！」時觸發
   inputButton.addEventListener('click', async () => {
     const message = inputTextArea.value.trim();
     if (!message) {
       alert('請輸入您想檢測的訊息內容。');
       return;
     }
-
-    // 顯示 Loading
-    normalOrScam.textContent = '檢測中...';
+    // 顯示 loading
+    normalOrScam.textContent = '檢測中...'; 
     normalOrScam.style.color = 'gray';
     confidenceScoreSpan.textContent = '計算中...';
     suspiciousPhrasesDiv.innerHTML = '<p>正在分析訊息，請稍候...</p>';
@@ -41,10 +41,10 @@ document.addEventListener('DOMContentLoaded', () => {
       });
       if (!res.ok) throw new Error(`伺服器錯誤: ${res.status}`);
       const data = await res.json();
-
-      // 更新纯文字分析结果
+      // 更新文字分析結果
       normalOrScam.textContent = data.status;
       confidenceScoreSpan.textContent = data.confidence + '%';
+      // 可疑詞句
       suspiciousPhrasesDiv.innerHTML = '';
       if (Array.isArray(data.suspicious_keywords) && data.suspicious_keywords.length) {
         const ul = document.createElement('ul');
@@ -57,13 +57,13 @@ document.addEventListener('DOMContentLoaded', () => {
       } else {
         suspiciousPhrasesDiv.innerHTML = '<p>沒有偵測到可疑詞句。</p>';
       }
-
+      // 顯示回饋區
       feedbackArea.style.display = 'block';
       lastPrediction = { text: message, model_status: data.status };
     } catch (err) {
       console.error('文字檢測失敗:', err);
       alert(`文字檢測失敗，請檢查後端。\n錯誤：${err.message}`);
-      // 回復預設
+      // 還原預設文字區
       normalOrScam.textContent = '待檢測';
       normalOrScam.style.color = 'inherit';
       confidenceScoreSpan.textContent = '待檢測';
@@ -71,16 +71,18 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   });
 
+  // 「清除」按鈕：清空文字、圖片結果
   clearButton.addEventListener('click', () => {
     inputTextArea.value = '';
-    // 清空文字结果
+    // 清空文字檢測結果
     normalOrScam.textContent = '待檢測';
     normalOrScam.style.color = 'inherit';
     confidenceScoreSpan.textContent = '待檢測';
     suspiciousPhrasesDiv.innerHTML = '<p>請輸入訊息並點擊「檢測！」按鈕。</p>';
     feedbackArea.style.display = 'none';
     feedbackStatus.textContent = '';
-    // 清空图片结果
+
+    // 清空圖片OCR結果
     extractedTextSpan.textContent = '尚未上傳圖片';
     imgIsScamSpan.textContent = '尚未上傳圖片';
     imgConfidenceSpan.textContent = '尚未上傳圖片';
@@ -88,6 +90,7 @@ document.addEventListener('DOMContentLoaded', () => {
     imageUpload.value = '';
   });
 
+  // 使用者回饋
   feedbackCorrectBtn.addEventListener('click', () => submitFeedback('正確'));
   feedbackWrongBtn.addEventListener('click', () => submitFeedback('錯誤'));
 
@@ -101,7 +104,7 @@ document.addEventListener('DOMContentLoaded', () => {
         body: JSON.stringify(payload)
       });
       await r.json();
-      feedbackStatus.textContent = '✅ 感謝你的回饋！';
+      feedbackStatus.textContent = '✅ 感謝您的回饋！';
       feedbackCorrectBtn.style.display = 'none';
       feedbackWrongBtn.style.display = 'none';
     } catch (e) {
@@ -112,7 +115,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
 
   // ─────────────────────────────────────────────────────────────────────────
-  // 圖片OCR相關元素
+  // 2. 圖片OCR相關元素
   const imageUpload = document.getElementById('image_upload');
   const imageButton = document.getElementById('image_button');
   const extractedTextSpan = document.getElementById('extracted_text');
@@ -123,23 +126,22 @@ document.addEventListener('DOMContentLoaded', () => {
   const IMAGE_API = '/analyze-image';
 
   imageButton.addEventListener('click', async () => {
-    // 确保用户选了文件
+    // 確認 user 已經選擇檔案
     if (!imageUpload.files.length) {
       alert('請先選擇一個圖片檔案。');
       return;
     }
 
-    // 显示 Loading 文案
+    // 顯示 Loading
     extractedTextSpan.textContent = '辨識中...';
     imgIsScamSpan.textContent = '辨識中...';
     imgConfidenceSpan.textContent = '辨識中...';
     imgSuspiciousDiv.innerHTML = '<p>正在分析圖片，請稍候...</p>';
 
-    // 构造 FormData
+    // 建立 FormData，append 檔案
     const formData = new FormData();
     formData.append('file', imageUpload.files[0]);
 
-    // 调用后端
     try {
       const resp = await fetch(IMAGE_API, {
         method: 'POST',
@@ -148,13 +150,14 @@ document.addEventListener('DOMContentLoaded', () => {
       if (!resp.ok) throw new Error(`伺服器錯誤: ${resp.status}`);
       const data = await resp.json();
 
+      // 此 data 格式：{ extracted_text: "...", analysis_result: { status, confidence, suspicious_keywords } }
       const extracted = data.extracted_text || '';
       const result = data.analysis_result || {};
 
-      // 更新 OCR + BERT 结果
+      // 更新前端OCR結果
       extractedTextSpan.textContent = extracted || '(無文字)';
       imgIsScamSpan.textContent = result.status || '(無法辨識)';
-      imgConfidenceSpan.textContent = result.confidence !== undefined
+      imgConfidenceSpan.textContent = (result.confidence !== undefined)
         ? result.confidence + '%'
         : '(無法辨識)';
       imgSuspiciousDiv.innerHTML = '';
@@ -177,5 +180,5 @@ document.addEventListener('DOMContentLoaded', () => {
       imgSuspiciousDiv.innerHTML = `<p style="color:red;">❌ ${err.message}</p>`;
     }
   });
-
+  // ─────────────────────────────────────────────────────────────────────────
 });