scam-detectorv2

Sleeping

App Files Files Community

jerrynnms commited on Jun 5, 2025

Commit

dd18a2b

verified ·

1 Parent(s): d7efe6e

Update index.html

Browse files

Files changed (1) hide show

index.html +10 -9

index.html CHANGED Viewed

@@ -3,23 +3,23 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>檢測可疑訊息／圖片OCR</title>
   <link rel="stylesheet" href="/static/style.css" />
 </head>
 <body>
   <h1>檢查可疑訊息</h1>
   <div class="main-container">
-    <!-- 文字 + 圖片 上傳放同一個 panel -->
     <section id="input_area" class="panel">
-      <!-- 純文字輸入 -->
       <textarea id="predict_info" placeholder="請輸入內容（最多5000字）" maxlength="5000"></textarea>
       <div class="button-group">
         <button id="detect_button" type="button">檢測！</button>
         <button id="clear_button" type="button">清除</button>
       </div>
-      <!-- 圖片上傳 + 辨識 -->
       <div id="image_controls" style="margin-top:1rem;">
         <h4>或上傳圖片進行分析：</h4>
         <input type="file" id="image_upload" accept="image/*" />
@@ -27,11 +27,11 @@
       </div>
     </section>
-    <!-- 結果區塊：純文字分析結果 + 圖片分析結果 -->
     <section id="output_area" class="panel">
       <h2>檢測結果</h2>
-      <!-- 文字分析 -->
       <p><strong>是否為詐騙訊息：</strong> <span id="is_scam">待檢測</span></p>
       <p><strong>模型預測可疑度：</strong> <span id="confidence_score">待檢測</span></p>
       <p><strong>可疑詞句分析：</strong></p>
@@ -39,7 +39,7 @@
         <p>請輸入訊息並點擊「檢測！」按鈕。</p>
       </div>
-      <!-- 圖片OCR結果 -->
       <div id="ocr_result" style="margin-top:1rem;">
         <p><strong>擷取文字：</strong> <span id="extracted_text">尚未上傳圖片</span></p>
         <p><strong>是否為詐騙訊息：</strong> <span id="img_is_scam">尚未上傳圖片</span></p>
@@ -50,8 +50,8 @@
         </div>
       </div>
-      <!-- 使用者回饋區 (純文字分析) -->
-      <section id="feedback_area" style="display:none;">
         <p><strong>這筆純文字分析結果正確嗎？</strong></p>
         <div class="button-group">
           <button id="feedback_correct">✅ 正確</button>
@@ -63,6 +63,7 @@
   </div>
   <script src="/static/script.js"></script>
 </body>
 </html>

 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>檢測可疑訊息／圖片OCR 整合範例</title>
   <link rel="stylesheet" href="/static/style.css" />
 </head>
 <body>
   <h1>檢查可疑訊息</h1>
   <div class="main-container">
+    <!-- 文字＋圖片 檢測放在同一個 panel -->
     <section id="input_area" class="panel">
+      <!-- 1. 純文字輸入區 -->
       <textarea id="predict_info" placeholder="請輸入內容（最多5000字）" maxlength="5000"></textarea>
       <div class="button-group">
         <button id="detect_button" type="button">檢測！</button>
         <button id="clear_button" type="button">清除</button>
       </div>
+      <!-- 2. 圖片上傳＋辨識按鈕（與文字檢測同區塊） -->
       <div id="image_controls" style="margin-top:1rem;">
         <h4>或上傳圖片進行分析：</h4>
         <input type="file" id="image_upload" accept="image/*" />
       </div>
     </section>
+    <!-- 檢測結果區塊：文字結果 ＋ 圖片OCR結果 ＋ 使用者回饋 -->
     <section id="output_area" class="panel">
       <h2>檢測結果</h2>
+      <!-- 1. 文字分析結果 -->
       <p><strong>是否為詐騙訊息：</strong> <span id="is_scam">待檢測</span></p>
       <p><strong>模型預測可疑度：</strong> <span id="confidence_score">待檢測</span></p>
       <p><strong>可疑詞句分析：</strong></p>
         <p>請輸入訊息並點擊「檢測！」按鈕。</p>
       </div>
+      <!-- 2. 圖片OCR結果（由後端 /analyze-image 回傳） -->
       <div id="ocr_result" style="margin-top:1rem;">
         <p><strong>擷取文字：</strong> <span id="extracted_text">尚未上傳圖片</span></p>
         <p><strong>是否為詐騙訊息：</strong> <span id="img_is_scam">尚未上傳圖片</span></p>
         </div>
       </div>
+      <!-- 3. 使用者回饋（文字分析專用） -->
+      <section id="feedback_area" style="display:none; margin-top:1rem;">
         <p><strong>這筆純文字分析結果正確嗎？</strong></p>
         <div class="button-group">
           <button id="feedback_correct">✅ 正確</button>
   </div>
+  <!-- 請確保路徑正確指向 /static/script.js -->
   <script src="/static/script.js"></script>
 </body>
 </html>