File size: 2,267 Bytes
1ec883c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>預測詐騙訊息</title>
    <link rel="stylesheet" href="style.css"><!-- 引入外部 CSS 樣式 -->
    <script src="script.js"></script> <!-- 引入 JavaScript 檔案 -->
</head>
<body>
    <h1>檢查可疑訊息</h1><!-- <h1>字體最大標題,最小<h6>-->

    <div class="main-container"> 
        
<!-- 使用者輸入區塊。textarea文字輸入的區塊。placeholder文字尚未輸入時,預設的顯示內容,無法在網頁端編輯。maxlength限制最大自數-->
        <section id="input_area" class="panel">
            <textarea id="predict_info" placeholder="請輸入內容 (最多5000字)" maxlength="5000" ></textarea>
            <div class="button-group">
                <button id="detect_button" type="submit">檢測</button><!---->
                <button id="clear_button" type="reset">清除</button>

             <!-- 圖片上傳與檢測功能 -->
            <div class="image-upload-group" style="margin-top: 20px;">
                <label for="imageInput">或上傳圖片進行詐騙檢測:</label><br>
                <input type="file" id="imageInput" accept="image/*" />
                <button id="image_button" type="button" style="margin-left: 10px;">圖片檢測</button>
            </div>

            </div>
        </section>
        <!-- 顯示模型預測結果的區塊 -->
        <section id="output_area" class="panel"> 
            <h2>檢測結果</h2> 
<!--<p>是一般的文字標籤。<strong>包住的文字會變粗體</strong>。span行內元素(inline),這裡用途顯示後端輸出內容-->
            <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"><!--div和span一樣功用,差別在div能自動換行-->
                <p>請輸入訊息並點擊「檢測」按鈕。</p>
            </div>
        </section>
    </div>
</body>
</html>