spam-detect/index.html at main · lyndon025/spam-detect · GitHub

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Spam Detect PH</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js"></script>
    <link rel="icon" type="image/svg+xml" href="src/images/logo.svg" />
    <meta property="og:title" content="Spam Detect PH - Protect Yourself" />
    <meta
      property="og:description"
      content="Free spam detection tool for the Philippines. Check SMS and numbers instantly."
    />
    <meta
      property="og:image"
      content="https://spam-detectph.vercel.app/src/images/logo.png"
    />
    <meta property="og:url" content="https://spam-detectph.vercel.app/" />
    <meta property="og:type" content="website" />
  </head>
  <body>
    <header class="navbar">
      <a href="index.html" style="text-decoration: none; color: inherit">

        <div class="logo-group">
          <img src="src/images/logo.svg" alt="Spam Detect PH Logo" class="logo-icon" />
          <span class="logo-text">Spam Detect PH</span>
        </div>
      </a>
      <div class="nav-links">
        <a href="about.html" class="nav-item">About</a>
        <button
          id="themeToggle"
          class="nav-item theme-btn"
        >
          🌙
        </button>
      </div>
    </header>

    <main class="container">
      <h1 class="title">SMS Scanner</h1>
      <p class="subtitle">Detect scams, spam, and ads.</p>

      <!-- INPUT TABS -->
      <div class="tabs">
        <button class="tab-btn active" onclick="switchTab('text')">
          ✍️ Paste Text
        </button>
        <button class="tab-btn" onclick="switchTab('photo')">
          📷 Image Scan
        </button>
      </div>

      <!-- TEXT MODE -->
      <div id="textSection" class="input-section">
        <textarea id="smsInput" placeholder="Paste message here..."></textarea>
      </div>

      <!-- PHOTO MODE -->
      <div id="photoSection" class="input-section hidden">
        <div
          class="upload-area"
          id="dropZone"
          onclick="document.getElementById('fileInput').click()"
        >
          <div class="upload-icon">📂</div>
          <h3>Tap to Select Screenshot</h3>
          <p class="small-text">
            We extract text from the image. No data is stored.
          </p>
          <input
            type="file"
            id="fileInput"
            accept="image/*"
            onchange="handleImageUpload(event)"
            hidden
          />
        </div>
        <p id="ocrStatus" class="status-text hidden">
          ⏳ Extraction in progress...
        </p>
      </div>

      <!-- ANALYZE BTN -->
      <button id="analyzeBtn">
        🚀 Analyze Message
      </button>

      <div id="loading" class="hidden">
        Thinking... 🤔 It might take up to a minute, your patience is appreciated...
      </div>

      <!-- MAIN RESULTS -->
      <div id="resultCard" class="result-card hidden">
        <div id="icon" class="status-icon"></div>
        <h2 id="resultTitle"></h2>
        <p id="details"></p>
        <p id="confidenceScore" class="confidence-text"></p>
      </div>

      <!-- LINK WARNING (Separate) -->
      <div
        id="linkWarningCard"
        class="result-card danger hidden"
        style="margin-top: 10px"
      >
        <div class="status-icon">🔗</div>
        <h2>Link Detected</h2>
        <p>
          This message contains a clickable link.
          <strong>Do not click</strong> unless you are 100% sure who personally
          sent it.
        </p>
        <p>Philippine Companies and Telecoms will NEVER send you links</p>
      </div>

      <!-- SECOND OPINION (GEN AI) -->
      <div id="aiSection" class="hidden" style="margin-top: 20px">
        <button id="askAiBtn" class="secondary-btn">
          🤖 Ask Google Gemini for Analysis
        </button>
        <div id="aiResult" class="ai-box hidden">
          <strong>Gemini Analysis:</strong>
          <p id="aiText">Loading...</p>
        </div>
      </div>

      <!-- TECHNICAL DETAILS DROPDOWN -->
      <details id="limeSection" class="tech-details hidden">
        <!-- This summary acts as the button -->
        <summary class="tech-btn">
          Show Technical Details & Explainability
        </summary>

        <div class="tech-content">
          <div class="tech-info-grid">
            <p><strong>Model:</strong> MLP (Neural Network)</p>
            <p><strong>Vectorizer:</strong> TF-IDF</p>
            <p>
              <strong>Explainability:</strong> LIME (Local Interpretable
              Model-agnostic Explanations)
            </p>
          </div>

          <hr style="border: 0; border-top: 1px solid #ddd; margin: 15px 0" />

          <p class="small-note">
            <strong>Top Contributing Features:</strong><br />
            Red bars indicate words that pushed the model toward "Spam". Green
            bars indicate "Safe" signals.
          </p>

          <div id="limeChart" class="lime-container"></div>
        </div>
      </details>
    </main>

    <script src="src/scripts/script.js"></script>
  </body>
</html>