Hugging Face's logo

Spaces:
November-2K25
/
ai-projects
Running

App Files Community
November-2K25 commited on
Commit
af1cb34
·
verified ·
1 Parent(s): fb6a1d1

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +382 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ai Projects
3
- emoji: 🐢
4
- colorFrom: purple
5
  colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: ai-projects
3
+ emoji: 🐳
4
+ colorFrom: gray
5
  colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,382 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>PhishGuard AI - Phishing Detection System</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
12
+ }
13
+ .pulse-animation {
14
+ animation: pulse 2s infinite;
15
+ }
16
+ @keyframes pulse {
17
+ 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
18
+ 70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
19
+ 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
20
+ }
21
+ .shake-animation {
22
+ animation: shake 0.5s;
23
+ }
24
+ @keyframes shake {
25
+ 0%, 100% { transform: translateX(0); }
26
+ 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
27
+ 20%, 40%, 60%, 80% { transform: translateX(5px); }
28
+ }
29
+ </style>
30
+ </head>
31
+ <body class="bg-gray-100 font-sans">
32
+ <!-- Header -->
33
+ <header class="gradient-bg text-white shadow-lg">
34
+ <div class="container mx-auto px-4 py-6">
35
+ <div class="flex justify-between items-center">
36
+ <div class="flex items-center space-x-2">
37
+ <i class="fas fa-shield-alt text-3xl text-blue-300"></i>
38
+ <h1 class="text-2xl font-bold">PhishGuard <span class="text-blue-300">AI</span></h1>
39
+ </div>
40
+ <nav class="hidden md:flex space-x-6">
41
+ <a href="#" class="hover:text-blue-300 transition">Home</a>
42
+ <a href="#" class="hover:text-blue-300 transition">How It Works</a>
43
+ <a href="#" class="hover:text-blue-300 transition">About</a>
44
+ <a href="#" class="hover:text-blue-300 transition">Contact</a>
45
+ </nav>
46
+ <button class="md:hidden text-2xl">
47
+ <i class="fas fa-bars"></i>
48
+ </button>
49
+ </div>
50
+ </div>
51
+ </header>
52
+
53
+ <!-- Hero Section -->
54
+ <section class="gradient-bg text-white py-16">
55
+ <div class="container mx-auto px-4 text-center">
56
+ <h2 class="text-4xl md:text-5xl font-bold mb-6">AI-Powered Phishing Detection</h2>
57
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Protect yourself from malicious links and emails with our advanced artificial intelligence system</p>
58
+ <div class="bg-white rounded-lg shadow-xl p-6 max-w-4xl mx-auto">
59
+ <div class="flex flex-col md:flex-row gap-4">
60
+ <input type="text" id="urlInput" placeholder="Enter URL or paste email content..." class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-800">
61
+ <button id="analyzeBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold px-6 py-3 rounded-lg transition flex items-center justify-center">
62
+ <i class="fas fa-search mr-2"></i> Analyze
63
+ </button>
64
+ </div>
65
+ </div>
66
+ </div>
67
+ </section>
68
+
69
+ <!-- Features Section -->
70
+ <section class="py-16 bg-white">
71
+ <div class="container mx-auto px-4">
72
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">How Our AI Detects Phishing</h2>
73
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
74
+ <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition">
75
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto">
76
+ <i class="fas fa-link text-blue-600 text-2xl"></i>
77
+ </div>
78
+ <h3 class="text-xl font-semibold text-center mb-3">URL Analysis</h3>
79
+ <p class="text-gray-600 text-center">Examines domain age, SSL certificates, and suspicious patterns in URLs to identify potential threats.</p>
80
+ </div>
81
+ <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition">
82
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto">
83
+ <i class="fas fa-envelope text-blue-600 text-2xl"></i>
84
+ </div>
85
+ <h3 class="text-xl font-semibold text-center mb-3">Content Inspection</h3>
86
+ <p class="text-gray-600 text-center">Analyzes email content for urgency tactics, grammatical errors, and suspicious requests.</p>
87
+ </div>
88
+ <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition">
89
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto">
90
+ <i class="fas fa-brain text-blue-600 text-2xl"></i>
91
+ </div>
92
+ <h3 class="text-xl font-semibold text-center mb-3">Machine Learning</h3>
93
+ <p class="text-gray-600 text-center">Uses trained models to detect sophisticated phishing attempts based on thousands of known patterns.</p>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ </section>
98
+
99
+ <!-- Results Section (Initially Hidden) -->
100
+ <section id="resultsSection" class="py-16 bg-gray-50 hidden">
101
+ <div class="container mx-auto px-4">
102
+ <div class="bg-white rounded-xl shadow-xl overflow-hidden max-w-4xl mx-auto">
103
+ <div class="p-6 border-b">
104
+ <h2 class="text-2xl font-bold text-gray-800">Analysis Results</h2>
105
+ <p id="analyzedUrl" class="text-gray-600 mt-2 break-all"></p>
106
+ </div>
107
+
108
+ <div class="p-6">
109
+ <div id="resultContainer" class="flex items-center justify-between mb-6">
110
+ <div class="flex items-center">
111
+ <div id="resultIcon" class="w-12 h-12 rounded-full flex items-center justify-center mr-4">
112
+ <i class="fas fa-question-circle text-2xl"></i>
113
+ </div>
114
+ <div>
115
+ <h3 id="resultTitle" class="text-xl font-semibold">Analyzing...</h3>
116
+ <p id="resultDescription" class="text-gray-600">Please wait while we analyze the content</p>
117
+ </div>
118
+ </div>
119
+ <div id="confidenceBadge" class="px-4 py-2 rounded-full text-sm font-semibold hidden">
120
+ Confidence: <span id="confidenceValue">0</span>%
121
+ </div>
122
+ </div>
123
+
124
+ <div id="detailsSection" class="hidden">
125
+ <h4 class="font-bold text-gray-700 mb-3">Detailed Analysis</h4>
126
+ <div id="analysisPoints" class="space-y-3">
127
+ <!-- Dynamic content will be inserted here -->
128
+ </div>
129
+
130
+ <div class="mt-8">
131
+ <h4 class="font-bold text-gray-700 mb-3">Recommendations</h4>
132
+ <div id="recommendations" class="bg-blue-50 border-l-4 border-blue-500 p-4">
133
+ <!-- Dynamic content will be inserted here -->
134
+ </div>
135
+ </div>
136
+ </div>
137
+ </div>
138
+
139
+ <div class="bg-gray-50 p-6 border-t">
140
+ <button id="newAnalysisBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold px-6 py-2 rounded-lg transition">
141
+ <i class="fas fa-redo mr-2"></i> Perform New Analysis
142
+ </button>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </section>
147
+
148
+ <!-- Stats Section -->
149
+ <section class="py-16 gradient-bg text-white">
150
+ <div class="container mx-auto px-4">
151
+ <h2 class="text-3xl font-bold text-center mb-12">Phishing By The Numbers</h2>
152
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
153
+ <div class="text-center">
154
+ <div class="text-4xl font-bold mb-2">36%</div>
155
+ <p class="text-blue-200">of all data breaches involve phishing</p>
156
+ </div>
157
+ <div class="text-center">
158
+ <div class="text-4xl font-bold mb-2">1.5M</div>
159
+ <p class="text-blue-200">new phishing sites created each month</p>
160
+ </div>
161
+ <div class="text-center">
162
+ <div class="text-4xl font-bold mb-2">74%</div>
163
+ <p class="text-blue-200">of phishing attacks start with email</p>
164
+ </div>
165
+ <div class="text-center">
166
+ <div class="text-4xl font-bold mb-2">65%</div>
167
+ <p class="text-blue-200">of organizations experienced phishing attacks</p>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </section>
172
+
173
+ <!-- Footer -->
174
+ <footer class="bg-gray-900 text-white py-12">
175
+ <div class="container mx-auto px-4">
176
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
177
+ <div>
178
+ <h3 class="text-xl font-bold mb-4 flex items-center">
179
+ <i class="fas fa-shield-alt text-blue-400 mr-2"></i> PhishGuard AI
180
+ </h3>
181
+ <p class="text-gray-400">Advanced AI technology to protect you from phishing attacks and online scams.</p>
182
+ </div>
183
+ <div>
184
+ <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
185
+ <ul class="space-y-2">
186
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
187
+ <li><a href="#" class="text-gray-400 hover:text-white transition">How It Works</a></li>
188
+ <li><a href="#" class="text-gray-400 hover:text-white transition">API Documentation</a></li>
189
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>
190
+ </ul>
191
+ </div>
192
+ <div>
193
+ <h4 class="text-lg font-semibold mb-4">Resources</h4>
194
+ <ul class="space-y-2">
195
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Phishing Examples</a></li>
196
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Security Blog</a></li>
197
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Report Phishing</a></li>
198
+ </ul>
199
+ </div>
200
+ <div>
201
+ <h4 class="text-lg font-semibold mb-4">Contact</h4>
202
+ <ul class="space-y-2">
203
+ <li class="flex items-center">
204
+ <i class="fas fa-envelope text-gray-400 mr-2"></i>
205
+ <span class="text-gray-400">support@phishguard.ai</span>
206
+ </li>
207
+ <li class="flex items-center">
208
+ <i class="fas fa-phone text-gray-400 mr-2"></i>
209
+ <span class="text-gray-400">+1 (555) 123-4567</span>
210
+ </li>
211
+ </ul>
212
+ </div>
213
+ </div>
214
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
215
+ <p>&copy; 2023 PhishGuard AI. All rights reserved.</p>
216
+ </div>
217
+ </div>
218
+ </footer>
219
+
220
+ <script>
221
+ document.addEventListener('DOMContentLoaded', function() {
222
+ const analyzeBtn = document.getElementById('analyzeBtn');
223
+ const urlInput = document.getElementById('urlInput');
224
+ const resultsSection = document.getElementById('resultsSection');
225
+ const analyzedUrl = document.getElementById('analyzedUrl');
226
+ const resultIcon = document.getElementById('resultIcon');
227
+ const resultTitle = document.getElementById('resultTitle');
228
+ const resultDescription = document.getElementById('resultDescription');
229
+ const confidenceBadge = document.getElementById('confidenceBadge');
230
+ const confidenceValue = document.getElementById('confidenceValue');
231
+ const detailsSection = document.getElementById('detailsSection');
232
+ const analysisPoints = document.getElementById('analysisPoints');
233
+ const recommendations = document.getElementById('recommendations');
234
+ const newAnalysisBtn = document.getElementById('newAnalysisBtn');
235
+
236
+ // Sample phishing indicators (in a real app, this would be server-side)
237
+ const phishingIndicators = [
238
+ { pattern: /(https?:\/\/)?([\w-]+\.)?paypal\.scam/, description: "Suspicious domain mimicking PayPal" },
239
+ { pattern: /(https?:\/\/)?([\w-]+\.)?amazon-security\./, description: "Potential Amazon phishing site" },
240
+ { pattern: /(https?:\/\/)?([\w-]+\.)?appleid\./, description: "Potential Apple ID phishing attempt" },
241
+ { pattern: /(https?:\/\/)?([\w-]+\.)?microsoft-support\./, description: "Potential Microsoft phishing site" },
242
+ { pattern: /urgent|immediate action required/i, description: "Creates false sense of urgency" },
243
+ { pattern: /verify your account/i, description: "Common phishing tactic" },
244
+ { pattern: /click here|login now/i, description: "Urgency language often used in phishing" },
245
+ { pattern: /(https?:\/\/)?([\w-]+\.)?([\w-]{15,}\.)/, description: "Long, complex domain name" },
246
+ { pattern: /(https?:\/\/)?([\w-]+\.)?([\w-]+\.[\w-]+\.[\w-]+)/, description: "Multiple subdomains can be suspicious" },
247
+ { pattern: /(https?:\/\/)?([\w-]+\.)?([\w-]+\.(tk|ml|ga|cf|gq))/, description: "Free domain often used by phishers" }
248
+ ];
249
+
250
+ analyzeBtn.addEventListener('click', function() {
251
+ const input = urlInput.value.trim();
252
+ if (!input) {
253
+ urlInput.classList.add('shake-animation');
254
+ setTimeout(() => {
255
+ urlInput.classList.remove('shake-animation');
256
+ }, 500);
257
+ return;
258
+ }
259
+
260
+ // Show loading state
261
+ resultsSection.classList.remove('hidden');
262
+ analyzedUrl.textContent = input.length > 100 ? input.substring(0, 100) + '...' : input;
263
+ resultIcon.innerHTML = '<i class="fas fa-spinner fa-spin text-blue-500 text-2xl"></i>';
264
+ resultTitle.textContent = "Analyzing...";
265
+ resultDescription.textContent = "Our AI is examining the content for phishing indicators";
266
+ confidenceBadge.classList.add('hidden');
267
+ detailsSection.classList.add('hidden');
268
+
269
+ // Scroll to results
270
+ resultsSection.scrollIntoView({ behavior: 'smooth' });
271
+
272
+ // Simulate AI analysis (in a real app, this would be an API call)
273
+ setTimeout(() => {
274
+ showResults(input);
275
+ }, 2000);
276
+ });
277
+
278
+ newAnalysisBtn.addEventListener('click', function() {
279
+ resultsSection.classList.add('hidden');
280
+ urlInput.value = '';
281
+ urlInput.focus();
282
+ });
283
+
284
+ function showResults(input) {
285
+ // Analyze the input
286
+ let isPhishing = false;
287
+ let confidence = 0;
288
+ const detectedPoints = [];
289
+
290
+ phishingIndicators.forEach(indicator => {
291
+ if (indicator.pattern.test(input)) {
292
+ isPhishing = true;
293
+ confidence += 10; // Each match increases confidence
294
+ detectedPoints.push(indicator.description);
295
+ }
296
+ });
297
+
298
+ // Cap confidence at 95% (never 100% certain)
299
+ confidence = Math.min(95, confidence);
300
+
301
+ // If no indicators found, it's probably safe
302
+ if (confidence < 20) {
303
+ confidence = 100 - confidence; // Invert for safe results
304
+ }
305
+
306
+ // Display results
307
+ if (isPhishing) {
308
+ resultIcon.innerHTML = '<i class="fas fa-times-circle text-red-500 text-2xl"></i>';
309
+ resultIcon.classList.add('bg-red-100');
310
+ resultTitle.textContent = "Potential Phishing Detected!";
311
+ resultDescription.textContent = "This content shows signs of a phishing attempt";
312
+ confidenceBadge.classList.remove('hidden');
313
+ confidenceBadge.classList.remove('bg-green-100', 'text-green-800', 'bg-yellow-100', 'text-yellow-800');
314
+ confidenceBadge.classList.add('bg-red-100', 'text-red-800');
315
+ confidenceValue.textContent = confidence;
316
+
317
+ // Add pulse animation for dangerous result
318
+ resultIcon.classList.add('pulse-animation');
319
+ } else {
320
+ resultIcon.innerHTML = '<i class="fas fa-check-circle text-green-500 text-2xl"></i>';
321
+ resultIcon.classList.add('bg-green-100');
322
+ resultTitle.textContent = "No Phishing Detected";
323
+ resultDescription.textContent = "This content appears to be safe";
324
+ confidenceBadge.classList.remove('hidden');
325
+ confidenceBadge.classList.remove('bg-red-100', 'text-red-800', 'bg-yellow-100', 'text-yellow-800');
326
+ confidenceBadge.classList.add('bg-green-100', 'text-green-800');
327
+ confidenceValue.textContent = confidence;
328
+ }
329
+
330
+ // Show details
331
+ detailsSection.classList.remove('hidden');
332
+ analysisPoints.innerHTML = '';
333
+
334
+ if (detectedPoints.length > 0) {
335
+ detectedPoints.forEach(point => {
336
+ const pointElement = document.createElement('div');
337
+ pointElement.className = 'flex items-start';
338
+ pointElement.innerHTML = `
339
+ <i class="fas fa-exclamation-triangle text-yellow-500 mt-1 mr-3"></i>
340
+ <span>${point}</span>
341
+ `;
342
+ analysisPoints.appendChild(pointElement);
343
+ });
344
+ } else {
345
+ analysisPoints.innerHTML = `
346
+ <div class="flex items-start">
347
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
348
+ <span>No known phishing indicators detected</span>
349
+ </div>
350
+ `;
351
+ }
352
+
353
+ // Add recommendations
354
+ recommendations.innerHTML = '';
355
+ if (isPhishing) {
356
+ const recElement = document.createElement('div');
357
+ recElement.innerHTML = `
358
+ <p class="font-semibold text-blue-800">We recommend you:</p>
359
+ <ul class="list-disc list-inside mt-2 space-y-1 text-blue-700">
360
+ <li>Do not click any links in this content</li>
361
+ <li>Do not enter any personal information</li>
362
+ <li>Report this as phishing if it came via email</li>
363
+ <li>Delete this message if possible</li>
364
+ </ul>
365
+ `;
366
+ recommendations.appendChild(recElement);
367
+ } else {
368
+ recommendations.innerHTML = `
369
+ <p class="font-semibold text-blue-800">General Safety Tips:</p>
370
+ <ul class="list-disc list-inside mt-2 space-y-1 text-blue-700">
371
+ <li>Always verify sender email addresses</li>
372
+ <li>Look for HTTPS and padlock icon in browser</li>
373
+ <li>Be cautious with unexpected attachments</li>
374
+ <li>When in doubt, contact the company directly</li>
375
+ </ul>
376
+ `;
377
+ }
378
+ }
379
+ });
380
+ </script>
381
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=November-2K25/ai-projects" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
382
+ </html>