Spaces:
Sleeping
Sleeping
| <html lang="zh-Hant"> | |
| <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/*" /> | |
| <button id="image_button" type="button">辨識圖片</button> | |
| </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> | |
| <div id="suspicious_phrases"> | |
| <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> | |
| <p><strong>模型預測可疑度：</strong> <span id="img_confidence">尚未上傳圖片</span></p> | |
| <p><strong>可疑詞句分析：</strong></p> | |
| <div id="img_suspicious_phrases"> | |
| <p>尚未上傳圖片。</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> | |
| <button id="feedback_wrong">❌ 錯誤</button> | |
| </div> | |
| <p id="feedback_status" style="color:green;"></p> | |
| </section> | |
| </section> | |
| </div> | |
| <!-- 請確保路徑正確指向 /static/script.js --> | |
| <script src="/static/script.js"></script> | |
| </body> | |
| </html> | |