Upload 12 files

AI_Model_architecture.py

@@ -0,0 +1,212 @@
+"""流程圖
+讀取資料 → 分割資料 → 編碼 → 建立 Dataset / DataLoader
+↓
+建立模型（BERT+LSTM+CNN）
+        ↓
+        BERT 輸出 [batch, seq_len, 768]
+        ↓
+        BiLSTM  [batch, seq_len, hidden_dim*2]
+        ↓
+        CNN 模組 (Conv1D + Dropout + GlobalMaxPooling1D)
+        ↓
+        Linear 分類器（輸出詐騙機率）
+        ↓
+訓練模型（Epochs）
+↓
+評估模型（Accuracy / F1 / Precision / Recall）
+↓
+儲存模型（.pth）
+
+"""#引入重要套件Import Library
+import torch                            #   PyTorch 主模組               
+import torch.nn as nn                   #	神經網路相關的層（例如 LSTM、Linear）
+import torch.nn.functional as F         #   提供純函式版的操作方法，像是 F.relu()、F.cross_entropy()，通常不帶參數、不自動建立權重
+import numpy as np                      
+import pandas as pd
+import os
+os.environ["PYTORCH_CUDA_ALLOC_CONF"] = "max_split_size_mb:16"#讓 CUDA 使用「更小記憶體分配塊」的方法，能有效減少 OOM 錯誤。
+import re
+
+from sklearn.metrics import accuracy_score, precision_score, recall_score, f1_score
+from tqdm import tqdm
+from sklearn.model_selection import train_test_split
+from torch.utils.data import DataLoader, Dataset #	提供 Dataset、DataLoader 類別
+from transformers import BertTokenizer
+from sklearn.model_selection import train_test_split
+from transformers import BertModel
+#BertTokenizer	把文字句子轉換成 BERT 格式的 token ID，例如 [CLS] 今天 天氣 不錯 [SEP] → [101, 1234, 5678, ...]
+##BertForSequenceClassification	是 Hugging Face 提供的一個完整 BERT 模型，接了分類用的 Linear 層，讓你直接拿來做分類任務（例如詐騙 vs 正常）
+
+
+#正常訊息資料集在這新增
+normal_files = [r"C:\Users\user\Desktop\專案程式0527\Project_PredictScamInfo\data\NorANDScamInfo_data1.csv"]
+
+#詐騙訊息資料集在這新增
+scam_files = [
+    r"C:\Users\user\Desktop\專案程式0527\Project_PredictScamInfo\data\NorANDScamInfo_data1.csv"]
+
+#資料前處理
+class BertPreprocessor:
+    def __init__(self, tokenizer_name="ckiplab/bert-base-chinese", max_len=128):
+        self.tokenizer = BertTokenizer.from_pretrained(tokenizer_name)
+        self.max_len = max_len
+
+    def load_and_clean(self, filepath):
+        #載入 CSV 並清理 message 欄位。
+        df = pd.read_csv(filepath)
+        df = df.dropna().drop_duplicates().reset_index(drop=True)
+        # 文字清理：移除空白、保留中文英數與標點
+        df["message"] = df["message"].astype(str)
+        df["message"] = df["message"].apply(lambda text: re.sub(r"\s+", "", text))
+        df["message"] = df["message"].apply(lambda text: re.sub(r"[^\u4e00-\u9fffA-Za-z0-9。，！？]", "", text))
+        return df[["message", "label"]]  # 保留必要欄位
+
+    def encode(self, messages):
+        #使用 HuggingFace BERT Tokenizer 將訊息編碼成模型輸入格式。
+        return self.tokenizer(
+            list(messages),
+            return_tensors="pt",
+            truncation=True,
+            padding="max_length",
+            max_length=self.max_len
+        )
+#自動做資料前處理
+def build_bert_inputs(normal_files, scam_files):
+    #將正常與詐騙資料分別指定 label，統一清理、編碼，回傳模型可用的 input tensors 與 labels。
+    processor = BertPreprocessor()
+    dfs = []
+    # 合併正常 + 詐騙檔案清單
+    all_files = normal_files + scam_files
+
+    for filepath in all_files:
+        df = processor.load_and_clean(filepath)
+        dfs.append(df)
+
+    # 合併所有資料。在資料清理過程中dropna()：刪除有空值的列，drop_duplicates()：刪除重複列，filter()或df[...]做條件過濾，concat():將多個 DataFrame合併
+    # 這些操作不會自動重排索引，造成索引亂掉。
+    # 合併後統一編號（常見於多筆資料合併）all_df = pd.concat(dfs, 關鍵-->ignore_index=True)
+    all_df = pd.concat(dfs, ignore_index=True)
+    #製作 train/val 資料集
+    train_texts, val_texts, train_labels, val_labels = train_test_split(
+    all_df["message"], all_df["label"],
+    stratify=all_df["label"],
+    test_size=0.2,
+    random_state=25,
+    shuffle=True
+    )
+    
+    # 進行 BERT tokenizer 編碼
+    train_inputs = processor.encode(train_texts)
+    val_inputs = processor.encode(val_texts)
+
+    return train_inputs, train_labels, val_inputs, val_labels, processor
+
+#AUTO YA~以for迴圈自動新增個別變數內，build_bert_inputs能自動擷取新增資料
+normal_files_labels = [normal for normal in normal_files] 
+scam_files_labels = [scam for scam in scam_files] 
+
+#print(bert_inputs.keys())
+
+#定義 PyTorch Dataset 類別
+class ScamDataset(Dataset):
+    def __init__(self, inputs, labels):
+        self.input_ids = inputs["input_ids"]                           # input_ids：句子的 token ID; attention_mask：注意力遮罩（0 = padding）
+        self.attention_mask = inputs["attention_mask"]                 # token_type_ids：句子的 segment 區分
+        self.token_type_ids = inputs["token_type_ids"]                 # torch.tensor(x, dtype=...)將資料(x)轉為Tensor的標準做法。
+        self.labels = torch.tensor(labels.values, dtype=torch.float32) # x可以是 list、NumPy array、pandas series...
+# dtypefloat32：浮點數(常用於 回歸 或 BCELoss 二分類);long：整數(常用於 多分類 搭配 CrossEntropyLoss)。labels.values → 轉為 NumPy array
+    def __len__(self):          # 告訴 PyTorch 這個 Dataset 有幾筆資料
+        return len(self.labels) # 給 len(dataset) 或 for i in range(len(dataset)) 用的
+    
+    def __getitem__(self, idx): #回傳第 idx 筆資料（會自動在訓練中一筆筆抓）
+        return {                #DataLoader 每次會呼叫這個方法多次來抓一個 batch 的資料
+            "input_ids":self.input_ids[idx],
+            "attention_mask":self.attention_mask[idx],
+            "token_type_ids":self.token_type_ids[idx],
+            "labels":self.labels[idx]
+        }
+
+# 這樣可以同時處理 scam 和 normal 資料，不用重複寫清理與 token 處理
+train_inputs, train_labels, val_inputs, val_labels, processor = build_bert_inputs(normal_files, scam_files)
+
+train_dataset = ScamDataset(train_inputs, train_labels)
+val_dataset = ScamDataset(val_inputs, val_labels)
+
+train_loader = DataLoader(train_dataset, batch_size=8)
+val_loader = DataLoader(val_dataset, batch_size=8)
+
+#模型
+class BertLSTM_CNN_Classifier(nn.Module):
+    def __init__(self, hidden_dim=128, num_layers=1, dropout=0.3):
+        super(BertLSTM_CNN_Classifier, self).__init__()
+        self.bert = BertModel.from_pretrained("ckiplab/bert-base-chinese") #載入預訓練 BERT 模型（ckiplab 中文版）
+        # LSTM 接在 BERT 的 token 輸出後（輸入是768維）
+        self.LSTM = nn.LSTM(input_size=768,         # 把 BERT 的 token 序列再交給雙向 LSTM 做時間序列建模
+                            hidden_size=hidden_dim,
+                            num_layers=num_layers,
+                            batch_first=True,
+                            bidirectional=True)
+         # CNN 模組：接在 LSTM 後的輸出上
+        self.conv1 =  nn.Conv1d(in_channels=hidden_dim*2,
+                                out_channels=128,
+                                kernel_size=3,
+                                padding=1)
+        self.dropout = nn.Dropout(dropout) 
+        self.global_maxpool = nn.AdaptiveAvgPool1d(1)        # 等效於 GlobalMaxPooling1D
+
+        self.classifier = nn.Linear(128,1)
+    def forward(self, input_ids, attention_mask, token_type_ids):
+        outputs = self.bert(input_ids=input_ids,
+                            attention_mask=attention_mask,
+                            token_type_ids=token_type_ids)
+        hidden_states = outputs.last_hidden_state  # [batch, seq_len, 768]
+
+        LSTM_out, _ = self.LSTM(hidden_states)     # [batch, seq_len, hidden_dim*2]
+        LSTM_out = LSTM_out.transpose(1, 2)        # [batch, hidden_dim*2, seq_len]
+
+        x = self.conv1(LSTM_out)                   # [batch, 128, seq_len]
+        x = self.dropout(x)
+        x = self.global_maxpool(x).squeeze(2)      # [batch, 128]
+
+        logits = self.classifier(x)
+        return torch.sigmoid(logits).view(-1)  # 👈 修正這行
+
+        
+# 設定 GPU 裝置
+device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+# 設定使用的最大執行緒數（視 CPU 而定）
+torch.set_num_threads(8)  # 建議設成你系統的實體核心數
+# 初始化模型
+model = BertLSTM_CNN_Classifier().to(device)
+# 定義 optimizer 和損失函數
+optimizer = torch.optim.Adam(model.parameters(),lr=2e-5)
+criterion = nn.BCELoss()
+
+# 訓練迴圈
+
+if __name__ == "__main__":
+    if os.path.exists("model.pth"):
+        print("✅ 已找到 model.pth，載入模型跳過訓練")
+        model.load_state_dict(torch.load("model.pth", map_location=device))
+    else:
+        print("🚀 未找到 model.pth，開始訓練模型...")
+        num_epochs = 10
+        for epoch in range(num_epochs):
+            model.train()
+            total_loss = 0.0
+            for batch in train_loader:
+                optimizer.zero_grad()
+                input_ids = batch["input_ids"].to(device)
+                attention_mask = batch["attention_mask"].to(device)
+                token_type_ids = batch["token_type_ids"].to(device)
+                labels = batch["labels"].to(device)
+
+                outputs = model(input_ids, attention_mask, token_type_ids)
+                loss = criterion(outputs, labels)
+                loss.backward()
+                optimizer.step()
+                total_loss += loss.item()
+            print(f"[Epoch{epoch+1}]Training Loss:{total_loss:.4f}")
+        torch.save(model.state_dict(), "model.pth")# 儲存模型權重
+        print("✅ 模型訓練完成並儲存為 model.pth")
+

Dockerfile

@@ -0,0 +1,9 @@
+FROM python:3.10
+
+WORKDIR /app
+COPY . .
+
+RUN pip install --upgrade pip
+RUN pip install -r requirements.txt
+
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 jerrynnm
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,12 +1,2 @@
----
-title: Scam Detector
-emoji: 👁
-colorFrom: gray
-colorTo: pink
-sdk: docker
-pinned: false
-license: mit
-short_description: Scam Detection API using FastAPI & PyTorch
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# ScamChecker
+A web app to detect scams using a machine learning model.

app.py

@@ -0,0 +1,123 @@
+from fastapi import FastAPI, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+from pydantic import BaseModel
+from datetime import datetime
+from typing import Optional, List
+from bert_explainer import analyze_text as bert_analyze_text
+from firebase_admin import credentials, firestore
+import firebase_admin
+import pytz
+import os
+import json
+import requests
+import torch
+
+app = FastAPI(
+    title="詐騙訊息辨識 API",
+    description="使用 BERT 模型分析輸入文字是否為詐騙內容",
+    version="1.0.0"
+)
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+class TextAnalysisRequest(BaseModel):
+    text: str
+    user_id: Optional[str] = None
+
+class TextAnalysisResponse(BaseModel):
+    status: str
+    confidence: float
+    suspicious_keywords: List[str]
+    analysis_timestamp: datetime
+    text_id: str
+
+# 初始化 Firebase 使用環境變數
+try:
+    cred_data = os.getenv("FIREBASE_CREDENTIALS")
+    if not cred_data:
+        raise ValueError("FIREBASE_CREDENTIALS 環境變數未設置")
+    cred = credentials.Certificate({"type": "service_account", **json.loads(cred_data)})
+    firebase_admin.initialize_app(cred)
+    db = firestore.client()
+except Exception as e:
+    print(f"Firebase 初始化錯誤: {e}")
+
+# 從 Google Drive 載入 model.pth
+def load_model_from_drive():
+    model_url = "https://drive.google.com/uc?export=download&id=1UXkOqMPUiPUIbsy8iENHUqbNFLEHcFFg"  # 替換為你的檔案 ID
+    response = requests.get(model_url)
+    if response.status_code == 200:
+        with open("model.pth", "wb") as f:
+            f.write(response.content)
+        return True
+    return False
+
+if not os.path.exists("model.pth"):
+    if not load_model_from_drive():
+        raise FileNotFoundError("無法從 Google Drive 載入 model.pth")
+
+from AI_Model_architecture import BertLSTM_CNN_Classifier
+model = BertLSTM_CNN_Classifier()
+model.load_state_dict(torch.load("model.pth", map_location="cpu"))
+model.eval()
+
+@app.get("/")
+async def root():
+    return {"message": "詐騙文字辨識 API 已啟動", "version": "1.0.0", "status": "active", "docs": "/docs"}
+
+@app.post("/predict", response_model=TextAnalysisResponse)
+async def analyze_text_api(request: TextAnalysisRequest):
+    try:
+        tz = pytz.timezone("Asia/Taipei")
+        taiwan_now = datetime.now(tz)
+        collection_name = taiwan_now.strftime("%Y%m%d")
+        document_id = taiwan_now.strftime("%Y%m%dT%H%M%S")
+        timestamp_str = taiwan_now.strftime("%Y-%m-%d %H:%M:%S")
+
+        result = bert_analyze_text(request.text)
+
+        record = {
+            "text_id": document_id,
+            "text": request.text,
+            "user_id": request.user_id,
+            "analysis_result": {
+                "status": result["status"],
+                "confidence": result["confidence"],
+                "suspicious_keywords": result["suspicious_keywords"],
+            },
+            "timestamp": timestamp_str,
+            "type": "text_analysis"
+        }
+
+        db.collection(collection_name).document(document_id).set(record)
+
+        return TextAnalysisResponse(
+            status=result["status"],
+            confidence=result["confidence"],
+            suspicious_keywords=result["suspicious_keywords"],
+            analysis_timestamp=taiwan_now,
+            text_id=document_id
+        )
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.post("/feedback")
+async def save_user_feedback(feedback: dict):
+    try:
+        tz = pytz.timezone("Asia/Taipei")
+        taiwan_now = datetime.now(tz)
+        timestamp_str = taiwan_now.strftime("%Y-%m-%d %H:%M:%S")
+
+        feedback["used_in_training"] = False
+        feedback["timestamp"] = timestamp_str
+
+        db.collection("user_feedback").add(feedback)
+        return {"message": "✅ 已記錄使用者回饋"}
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))

bert_explainer.py

@@ -0,0 +1,67 @@
+import torch
+from AI_Model_architecture import BertLSTM_CNN_Classifier, BertPreprocessor
+from transformers import BertTokenizer
+import re
+import requests
+import os
+
+device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+
+# 從 Google Drive 載入 model.pth
+def load_model_from_drive():
+    model_url = "https://drive.google.com/uc?export=download&id=1UXkOqMPUiPUIbsy8iENHUqbNFLEHcFFg"  # 替換為你的檔案 ID
+    response = requests.get(model_url)
+    if response.status_code == 200:
+        with open("model.pth", "wb") as f:
+            f.write(response.content)
+        return True
+    return False
+
+if not os.path.exists("model.pth"):
+    if not load_model_from_drive():
+        raise FileNotFoundError("無法從 Google Drive 載入 model.pth")
+
+model = BertLSTM_CNN_Classifier()
+model.load_state_dict(torch.load("model.pth", map_location=device))
+model.to(device)
+model.eval()
+
+tokenizer = BertTokenizer.from_pretrained("ckiplab/bert-base-chinese")
+
+def predict_single_sentence(model, tokenizer, sentence, max_len=256):
+    model.eval()
+    with torch.no_grad():
+        sentence = re.sub(r"\s+", "", sentence)
+        sentence = re.sub(r"[^\u4e00-\u9fffA-Za-z0-9。，！？:/.\-]", "", sentence)
+
+        encoded = tokenizer(sentence, return_tensors="pt", truncation=True, padding="max_length", max_length=max_len)
+        input_ids = encoded["input_ids"].to(device)
+        attention_mask = encoded["attention_mask"].to(device)
+        token_type_ids = encoded["token_type_ids"].to(device)
+
+        output = model(input_ids, attention_mask, token_type_ids)
+        prob = output.item()
+        label = int(prob > 0.5)
+
+        if prob > 0.9:
+            risk = "🔴 高風險（極可能是詐騙）"
+        elif prob > 0.5:
+            risk = "🟡 中風險（可疑）"
+        else:
+            risk = "🟢 低風險（正常）"
+
+        pre_label = "詐騙" if label == 1 else "正常"
+
+        print(f"\n📩 訊息內容：{sentence}")
+        print(f"✅ 預測結果：{pre_label}")
+        print(f"📊 信心值：{round(prob*100, 2)}")
+        print(f"⚠️ 風險等級：{risk}")
+        return pre_label, prob, risk
+
+def analyze_text(text):
+    label, prob, risk = predict_single_sentence(model, tokenizer, text)
+    return {
+        "status": label,
+        "confidence": round(prob*100, 2),
+        "suspicious_keywords": [risk]
+    }

index.html

@@ -0,0 +1,46 @@
+<!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">
+</head>
+<body>
+    <h1>檢查可疑訊息</h1>
+
+    <div class="main-container"> 
+        <!-- 使用者輸入 -->
+        <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>
+        </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>
+            <div id="suspicious_phrases">
+                <p>請輸入訊息並點擊「檢測！」按鈕。</p>
+            </div>
+
+            <!-- ✅ 使用者回饋區塊放在 output_area 內 -->
+            <section id="feedback_area" style="display: none;">
+                <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>
+
+    <script src="script.js"></script>
+</body>
+</html>

requirements.txt

@@ -0,0 +1,9 @@
+fastapi
+uvicorn
+python-multipart
+pydantic
+firebase-admin
+torch==2.2.0
+transformers
+pytz
+requests

script.js

@@ -0,0 +1,107 @@
+/// script.js
+document.addEventListener('DOMContentLoaded', () => {
+    const inputTextArea = document.getElementById('predict_info');
+    const inputButton = document.getElementById('detect_button');
+    const clearButton = document.getElementById('clear_button');
+    const normalOrScam = document.getElementById('is_scam');
+    const confidenceScoreSpan = document.getElementById('confidence_score');
+    const suspiciousPhrasesDiv = document.getElementById('suspicious_phrases');
+    const feedbackArea = document.getElementById('feedback_area');
+    const feedbackCorrectBtn = document.getElementById('feedback_correct');
+    const feedbackWrongBtn = document.getElementById('feedback_wrong');
+    const feedbackStatus = document.getElementById('feedback_status');
+
+    let lastPrediction = null;
+
+    // 使用相對路徑，Vercel 會自動解析
+    const API_URL = '/predict';
+    const FEEDBACK_API = '/feedback';
+
+    inputButton.addEventListener('click', async () => {
+        const message = inputTextArea.value.trim();
+        if (!message) {
+            alert('請輸入您想檢測的訊息內容。');
+            return;
+        }
+
+        normalOrScam.textContent = '檢測中...';
+        normalOrScam.style.color = 'gray';
+        confidenceScoreSpan.textContent = '計算中...';
+        suspiciousPhrasesDiv.innerHTML = '<p>正在分析訊息，請稍候...</p>';
+        feedbackArea.style.display = 'none';
+        feedbackStatus.textContent = '';
+        feedbackCorrectBtn.style.display = 'inline-block';
+        feedbackWrongBtn.style.display = 'inline-block';
+
+        try {
+            const response = await fetch(API_URL, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ text: message }),
+            });
+
+            if (!response.ok) throw new Error(`伺服器錯誤: ${response.status} ${response.statusText}`);
+            const data = await response.json();
+
+            updateResults(data.status, data.confidence, data.suspicious_keywords);
+            feedbackArea.style.display = 'block';
+            lastPrediction = { text: message, model_status: data.status };
+        } catch (error) {
+            console.error('訊息檢測失敗:', error);
+            alert(`訊息檢測失敗，請檢查後端服務。\n錯誤詳情: ${error.message}`);
+            resetResults();
+        }
+    });
+
+    clearButton.addEventListener('click', () => {
+        inputTextArea.value = '';
+        resetResults();
+        feedbackArea.style.display = 'none';
+        feedbackStatus.textContent = '';
+    });
+
+    feedbackCorrectBtn.addEventListener('click', () => submitFeedback('正確'));
+    feedbackWrongBtn.addEventListener('click', () => submitFeedback('錯誤'));
+
+    async function submitFeedback(user_feedback) {
+        if (!lastPrediction) return;
+        const payload = { ...lastPrediction, user_feedback };
+        try {
+            const res = await fetch(FEEDBACK_API, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload),
+            });
+            const msg = await res.json();
+            feedbackStatus.textContent = '✅ 感謝你的回饋！';
+            feedbackCorrectBtn.style.display = 'none';
+            feedbackWrongBtn.style.display = 'none';
+        } catch (e) {
+            feedbackStatus.textContent = '❌ 回饋提交失敗';
+        }
+    }
+
+    function updateResults(isScam, confidence, suspiciousParts) {
+        normalOrScam.textContent = isScam;
+        confidenceScoreSpan.textContent = confidence;
+        suspiciousPhrasesDiv.innerHTML = '';
+        if (suspiciousParts && suspiciousParts.length > 0) {
+            const ul = document.createElement('ul');
+            suspiciousParts.forEach(phrase => {
+                const li = document.createElement('li');
+                li.textContent = phrase;
+                ul.appendChild(li);
+            });
+            suspiciousPhrasesDiv.appendChild(ul);
+        } else {
+            suspiciousPhrasesDiv.innerHTML = '<p>沒有偵測到特別可疑的詞句。</p>';
+        }
+    }
+
+    function resetResults() {
+        normalOrScam.textContent = '待檢測';
+        normalOrScam.style.color = 'inherit';
+        confidenceScoreSpan.textContent = '待檢測';
+        suspiciousPhrasesDiv.innerHTML = '<p>請輸入訊息並點擊「檢測！」按鈕。</p>';
+    }
+});

style.css

@@ -0,0 +1,184 @@
+/* style.css */
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    margin: 0; /* 將 body 的 margin 設為 0，讓內容可以更貼近邊緣 */
+    padding: 20px; /* 內邊距留點空間 */
+    background-color: #f4f7f6;
+    color: #333;
+    line-height: 1.6;
+    display: flex; /* 讓 body 成為 flex 容器 */
+    flex-direction: column; /* 內容垂直排列 */
+    min-height: 100vh; /* 讓 body 至少佔滿整個視窗高度 */
+    align-items: center; /* 讓 h1 居中 */
+}
+
+h1 {
+    color: #2c3e50;
+    text-align: center;
+    margin-bottom: 30px; /* 增加標題下方的間距 */
+    font-size: 2.5em; /* 讓標題更大一點 */
+}
+
+h2 { /* 針對檢測結果的 h2 */
+    color: #2c3e50;
+    text-align: center;
+    margin-top: 0; /* 移除頂部 margin，讓它更靠近 panel 頂部 */
+    margin-bottom: 20px;
+    font-size: 1.8em;
+}
+
+/* --- 主容器 Flexbox 佈局 --- */
+.main-container {
+    display: flex; /* 啟用 Flexbox */
+    flex-direction: row; /* 預設就是 row，讓子元素水平排列 */
+    gap: 30px; /* 左右兩個 panel 之間的間距 */
+    width: 100%; /* 佔滿可用寬度 */
+    max-width: 1200px; /* 設定最大寬度，避免在寬螢幕上過於分散 */
+    justify-content: center; /* 內容居中 */
+    flex-wrap: wrap; /* 當螢幕太小時，允許換行 */
+}
+
+.panel {
+    background-color: #ffffff;
+    padding: 30px; /* 增加內邊距 */
+    border-radius: 8px;
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* 更明顯的陰影 */
+    flex: 1; /* 讓兩個 panel 平均分配空間 */
+    min-width: 380px; /* 設定每個 panel 的最小寬度，避免縮得太小 */
+    box-sizing: border-box; /* 確保 padding 和 border 不會增加元素總寬度 */
+    display: flex; /* 讓 panel 內部內容也是 flex 容器 */
+    flex-direction: column; /* 內部內容垂直排列 */
+}
+
+#input_area {
+    /* 特定於 input_area 的樣式，如果需要 */
+    align-items: center; /* 讓輸入框和按鈕在 input_area 中居中 */
+}
+
+
+
+textarea {
+    width: 100%; /* 佔滿 panel 寬度 */
+    height: 250px; /* 增加高度 */
+    padding: 15px;
+    margin-bottom: 25px; /* 增加與按鈕的間距 */
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    font-size: 1.1rem; /* 稍微放大字體 */
+    box-sizing: border-box;
+    resize: vertical;
+    outline: none; /* 移除 focus 時的藍色邊框 */
+    transition: border-color 0.3s ease;
+}
+
+textarea:focus {
+    border-color: #4CAF50; /* focus 時邊框變色 */
+}
+
+
+.button-group {
+    display: flex;
+    gap: 20px; /* 按鈕間距 */
+    justify-content: center; /* 按鈕在 group 內部居中 */
+    width: 100%; /* 佔滿寬度 */
+}
+
+button {
+    padding: 12px 30px; /* 稍微增加按鈕大小 */
+    font-size: 1.1rem;
+    cursor: pointer;
+    border: none;
+    border-radius: 5px;
+    transition: background-color 0.3s ease, transform 0.2s ease; /* 增加 transform 過渡效果 */
+    font-weight: bold; /* 字體加粗 */
+}
+
+button[type="submit"] {
+    background-color: #4CAF50;
+    color: white;
+}
+
+button[type="submit"]:hover {
+    background-color: #45a049;
+    transform: translateY(-2px); /* 懸停時向上輕微移動 */
+}
+
+button[type="reset"] {
+    background-color: #f44336;
+    color: white;
+}
+
+button[type="reset"]:hover {
+    background-color: #da190b;
+    transform: translateY(-2px);
+}
+
+
+#output_area p {
+    font-size: 1.15rem; /* 稍微放大結果文字 */
+    margin-bottom: 12px;
+}
+
+#output_area strong {
+    color: #555;
+    font-weight: bold;
+}
+
+#is_scam, #confidence_score {
+    font-weight: bold; /* 結果狀態字體加粗 */
+}
+
+#suspicious_phrases {
+    background-color: #fffafa; /* 給可疑詞句區塊一個淺色背景 */
+    border: 1px dashed #e0baba; /* 虛線邊框 */
+    padding: 15px;
+    border-radius: 5px;
+    margin-top: 15px;
+    min-height: 80px; /* 確保高度，避免內容少時高度變化 */
+}
+
+#suspicious_phrases ul {
+    list-style-type: '🚨 '; /* 使用表情符號作為列表標記 */
+    padding-left: 20px;
+    margin: 0; /* 移除預設 margin */
+}
+
+#suspicious_phrases li {
+    margin-bottom: 8px;
+    color: #c0392b;
+    font-weight: 500;
+}
+
+#suspicious_phrases p {
+    font-style: italic;
+    color: #666;
+    margin: 0; /* 移除預設 margin */
+}
+
+/* --- 響應式設計：當螢幕較小時，垂直排列 --- */
+@media (max-width: 768px) {
+    .main-container {
+        flex-direction: column; /* 小螢幕時改為垂直堆疊 */
+        gap: 20px; /* 垂直間距 */
+        padding: 0 15px; /* 左右邊距 */
+    }
+
+    .panel {
+        flex: none; /* 取消 flex 比例，讓他們各自佔據 100% 寬度 */
+        width: 100%;
+        max-width: none; /* 移除最大寬度限制 */
+    }
+
+    h1 {
+        font-size: 2em;
+    }
+
+    h2 {
+        font-size: 1.5em;
+    }
+
+    textarea {
+        height: 200px;
+    }
+}

test_firebase.py

@@ -0,0 +1,34 @@
+import firebase_admin
+from firebase_admin import credentials, firestore
+from datetime import datetime
+
+def test_firebase_connection():
+    try:
+        # 初始化 Firebase
+        cred = credentials.Certificate("firebase-credentials.json")
+        firebase_admin.initialize_app(cred)
+        db = firestore.client()
+        
+        # 測試寫入
+        test_data = {
+            "test_field": "測試資料",
+            "timestamp": datetime.now()
+        }
+        
+        # 寫入測試資料
+        doc_ref = db.collection('test').document('test_doc')
+        doc_ref.set(test_data)
+        
+        # 讀取測試資料
+        doc = doc_ref.get()
+        if doc.exists:
+            print("Firebase 連接測試成功！")
+            print("測試資料：", doc.to_dict())
+        else:
+            print("無法讀取測試資料")
+            
+    except Exception as e:
+        print(f"Firebase 連接測試失敗：{str(e)}")
+
+if __name__ == "__main__":
+    test_firebase_connection() 

test_model_load.py

@@ -0,0 +1,10 @@
+import torch
+from AI_Model_architecture import BertLSTM_CNN_Classifier
+
+try:
+    print("🚀 嘗試載入模型...")
+    model = BertLSTM_CNN_Classifier()
+    model.load_state_dict(torch.load("model.pth", map_location="cpu"))
+    print("✅ 模型成功載入！")
+except Exception as e:
+    print("❌ 錯誤訊息：", str(e))