Hugging Face's logo

Spaces:
xlorfx
/
ai-security-auditor
Running

App Files Community
xlorfx commited on
Commit
0920223
·
verified ·
1 Parent(s): a3b4109

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +598 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ai Security Auditor
3
- emoji: 💻
4
- colorFrom: yellow
5
- colorTo: green
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-security-auditor
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: pink
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,598 @@
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="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI Security Auditor | Teste de Segurança para Aplicações IA</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, #6b21a8 0%, #1e40af 100%);
12
+ }
13
+ .security-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .pulse-animation {
18
+ animation: pulse 2s infinite;
19
+ }
20
+ @keyframes pulse {
21
+ 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7); }
22
+ 70% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
23
+ 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
24
+ }
25
+ .code-block {
26
+ font-family: 'Courier New', Courier, monospace;
27
+ background-color: #1e293b;
28
+ color: #f8fafc;
29
+ border-radius: 0.5rem;
30
+ }
31
+ </style>
32
+ </head>
33
+ <body class="bg-gray-50 min-h-screen">
34
+ <!-- Header -->
35
+ <header class="gradient-bg text-white shadow-lg">
36
+ <div class="container mx-auto px-4 py-6">
37
+ <div class="flex justify-between items-center">
38
+ <div class="flex items-center space-x-2">
39
+ <i class="fas fa-shield-alt text-3xl"></i>
40
+ <h1 class="text-2xl font-bold">AI Security Auditor</h1>
41
+ </div>
42
+ <nav class="hidden md:flex space-x-6">
43
+ <a href="#features" class="hover:text-purple-200 transition">Recursos</a>
44
+ <a href="#scanner" class="hover:text-purple-200 transition">Scanner</a>
45
+ <a href="#results" class="hover:text-purple-200 transition">Resultados</a>
46
+ <a href="#faq" class="hover:text-purple-200 transition">FAQ</a>
47
+ </nav>
48
+ <button class="md:hidden text-2xl">
49
+ <i class="fas fa-bars"></i>
50
+ </button>
51
+ </div>
52
+ </div>
53
+ </header>
54
+
55
+ <!-- Hero Section -->
56
+ <section class="gradient-bg text-white py-20">
57
+ <div class="container mx-auto px-4 text-center">
58
+ <h2 class="text-4xl md:text-5xl font-bold mb-6">Teste a Segurança de suas Aplicações IA</h2>
59
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">
60
+ Identifique vulnerabilidades, vazamentos de dados e riscos de segurança em aplicações geradas por inteligência artificial.
61
+ </p>
62
+ <div class="flex flex-col md:flex-row justify-center gap-4">
63
+ <button id="startScanBtn" class="bg-white text-purple-800 hover:bg-purple-100 font-bold py-3 px-8 rounded-full text-lg transition-all transform hover:scale-105 pulse-animation">
64
+ <i class="fas fa-play mr-2"></i> Iniciar Verificação
65
+ </button>
66
+ <button class="border-2 border-white hover:bg-white hover:text-purple-800 font-bold py-3 px-8 rounded-full text-lg transition">
67
+ <i class="fas fa-book mr-2"></i> Saiba Mais
68
+ </button>
69
+ </div>
70
+ </div>
71
+ </section>
72
+
73
+ <!-- Features Section -->
74
+ <section id="features" class="py-16 bg-white">
75
+ <div class="container mx-auto px-4">
76
+ <h2 class="text-3xl font-bold text-center mb-12">Recursos Avançados de Segurança</h2>
77
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
78
+ <!-- Feature 1 -->
79
+ <div class="security-card bg-gray-50 p-6 rounded-xl shadow-md transition duration-300">
80
+ <div class="text-purple-600 mb-4">
81
+ <i class="fas fa-bug text-4xl"></i>
82
+ </div>
83
+ <h3 class="text-xl font-bold mb-3">Detecção de Vulnerabilidades</h3>
84
+ <p class="text-gray-600">
85
+ Identifica automaticamente vulnerabilidades comuns em aplicações IA como injeção de prompts, vazamento de dados e falhas de autenticação.
86
+ </p>
87
+ </div>
88
+
89
+ <!-- Feature 2 -->
90
+ <div class="security-card bg-gray-50 p-6 rounded-xl shadow-md transition duration-300">
91
+ <div class="text-blue-600 mb-4">
92
+ <i class="fas fa-lock text-4xl"></i>
93
+ </div>
94
+ <h3 class="text-xl font-bold mb-3">Análise de Modelos IA</h3>
95
+ <p class="text-gray-600">
96
+ Avalia os modelos de IA subjacentes para identificar vieses, comportamentos inesperados e riscos de segurança específicos de machine learning.
97
+ </p>
98
+ </div>
99
+
100
+ <!-- Feature 3 -->
101
+ <div class="security-card bg-gray-50 p-6 rounded-xl shadow-md transition duration-300">
102
+ <div class="text-green-600 mb-4">
103
+ <i class="fas fa-chart-line text-4xl"></i>
104
+ </div>
105
+ <h3 class="text-xl font-bold mb-3">Relatórios Detalhados</h3>
106
+ <p class="text-gray-600">
107
+ Gera relatórios completos com pontuação de risco, recomendações de correção e métricas de segurança comparativas.
108
+ </p>
109
+ </div>
110
+ </div>
111
+ </div>
112
+ </section>
113
+
114
+ <!-- Scanner Section -->
115
+ <section id="scanner" class="py-16 bg-gray-100">
116
+ <div class="container mx-auto px-4">
117
+ <h2 class="text-3xl font-bold text-center mb-12">Verificador de Segurança</h2>
118
+
119
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden max-w-4xl mx-auto">
120
+ <div class="p-6">
121
+ <div class="flex flex-col md:flex-row gap-6">
122
+ <div class="flex-1">
123
+ <h3 class="text-xl font-semibold mb-4">Configuração do Teste</h3>
124
+
125
+ <div class="mb-4">
126
+ <label class="block text-gray-700 mb-2">Tipo de Aplicação</label>
127
+ <select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
128
+ <option>Chatbot/Assistente IA</option>
129
+ <option>Aplicação com Modelo Generativo</option>
130
+ <option>Sistema de Recomendação</option>
131
+ <option>Processamento de Linguagem Natural</option>
132
+ <option>Outro</option>
133
+ </select>
134
+ </div>
135
+
136
+ <div class="mb-4">
137
+ <label class="block text-gray-700 mb-2">URL da Aplicação</label>
138
+ <input type="text" placeholder="https://sua-aplicacao.com" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
139
+ </div>
140
+
141
+ <div class="mb-4">
142
+ <label class="block text-gray-700 mb-2">Ou envie seu código</label>
143
+ <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center cursor-pointer hover:bg-gray-50 transition">
144
+ <i class="fas fa-upload text-3xl text-gray-400 mb-2"></i>
145
+ <p class="text-gray-500">Arraste e solte arquivos aqui ou clique para selecionar</p>
146
+ <input type="file" class="hidden">
147
+ </div>
148
+ </div>
149
+ </div>
150
+
151
+ <div class="flex-1">
152
+ <h3 class="text-xl font-semibold mb-4">Testes de Segurança</h3>
153
+
154
+ <div class="space-y-3">
155
+ <label class="flex items-center space-x-3">
156
+ <input type="checkbox" checked class="rounded text-purple-500 focus:ring-purple-500">
157
+ <span>Teste de Injeção de Prompt</span>
158
+ </label>
159
+
160
+ <label class="flex items-center space-x-3">
161
+ <input type="checkbox" checked class="rounded text-purple-500 focus:ring-purple-500">
162
+ <span>Análise de Vazamento de Dados</span>
163
+ </label>
164
+
165
+ <label class="flex items-center space-x-3">
166
+ <input type="checkbox" checked class="rounded text-purple-500 focus:ring-purple-500">
167
+ <span>Verificação de Vieses</span>
168
+ </label>
169
+
170
+ <label class="flex items-center space-x-3">
171
+ <input type="checkbox" class="rounded text-purple-500 focus:ring-purple-500">
172
+ <span>Teste de Resistência a Ataques</span>
173
+ </label>
174
+
175
+ <label class="flex items-center space-x-3">
176
+ <input type="checkbox" class="rounded text-purple-500 focus:ring-purple-500">
177
+ <span>Análise de Compliance (LGPD/GDPR)</span>
178
+ </label>
179
+ </div>
180
+
181
+ <div class="mt-6">
182
+ <label class="block text-gray-700 mb-2">Nível de Teste</label>
183
+ <div class="flex items-center space-x-4">
184
+ <button class="px-4 py-2 bg-purple-100 text-purple-800 rounded-lg font-medium">Básico</button>
185
+ <button class="px-4 py-2 bg-purple-600 text-white rounded-lg font-medium">Padrão</button>
186
+ <button class="px-4 py-2 bg-purple-900 text-white rounded-lg font-medium">Avançado</button>
187
+ </div>
188
+ </div>
189
+
190
+ <button id="runTestBtn" class="w-full mt-6 bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-4 rounded-lg transition flex items-center justify-center">
191
+ <i class="fas fa-shield-alt mr-2"></i> Executar Testes de Segurança
192
+ </button>
193
+ </div>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </section>
199
+
200
+ <!-- Results Section (initially hidden) -->
201
+ <section id="results" class="py-16 bg-white hidden">
202
+ <div class="container mx-auto px-4">
203
+ <h2 class="text-3xl font-bold text-center mb-12">Resultados da Análise</h2>
204
+
205
+ <div class="bg-gray-50 rounded-xl shadow-lg overflow-hidden max-w-6xl mx-auto">
206
+ <div class="p-6">
207
+ <div class="flex flex-col md:flex-row gap-6">
208
+ <!-- Score Card -->
209
+ <div class="md:w-1/3">
210
+ <div class="bg-white p-6 rounded-lg shadow-md">
211
+ <h3 class="text-xl font-semibold mb-4">Pontuação de Segurança</h3>
212
+
213
+ <div class="flex justify-center mb-4">
214
+ <div class="relative w-40 h-40">
215
+ <svg class="w-full h-full" viewBox="0 0 100 100">
216
+ <!-- Background circle -->
217
+ <circle cx="50" cy="50" r="45" fill="none" stroke="#e5e7eb" stroke-width="8"/>
218
+ <!-- Progress circle -->
219
+ <circle id="scoreCircle" cx="50" cy="50" r="45" fill="none" stroke="#8b5cf6" stroke-width="8" stroke-linecap="round" stroke-dasharray="283" stroke-dashoffset="141.5" transform="rotate(-90 50 50)"/>
220
+ </svg>
221
+ <div class="absolute inset-0 flex items-center justify-center">
222
+ <span id="scoreValue" class="text-4xl font-bold">0</span>
223
+ <span class="text-2xl">/100</span>
224
+ </div>
225
+ </div>
226
+ </div>
227
+
228
+ <div class="text-center">
229
+ <p id="scoreText" class="text-lg font-medium mb-2">Carregando...</p>
230
+ <p class="text-gray-600">Última verificação: <span id="lastScanDate" class="font-medium">-</span></p>
231
+ </div>
232
+ </div>
233
+
234
+ <div class="mt-4 bg-white p-6 rounded-lg shadow-md">
235
+ <h3 class="text-xl font-semibold mb-4">Recomendações</h3>
236
+ <div id="recommendations" class="space-y-3">
237
+ <div class="flex items-start">
238
+ <i class="fas fa-exclamation-circle text-yellow-500 mt-1 mr-2"></i>
239
+ <span>Execute o scanner para obter recomendações personalizadas</span>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ </div>
244
+
245
+ <!-- Vulnerabilities List -->
246
+ <div class="md:w-2/3">
247
+ <div class="bg-white p-6 rounded-lg shadow-md">
248
+ <h3 class="text-xl font-semibold mb-4">Vulnerabilidades Encontradas</h3>
249
+
250
+ <div class="overflow-x-auto">
251
+ <table class="min-w-full divide-y divide-gray-200">
252
+ <thead class="bg-gray-50">
253
+ <tr>
254
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tipo</th>
255
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Severidade</th>
256
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Localização</th>
257
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Detalhes</th>
258
+ </tr>
259
+ </thead>
260
+ <tbody id="vulnerabilitiesList" class="bg-white divide-y divide-gray-200">
261
+ <tr>
262
+ <td colspan="4" class="px-6 py-4 text-center text-gray-500">Nenhuma vulnerabilidade encontrada ainda</td>
263
+ </tr>
264
+ </tbody>
265
+ </table>
266
+ </div>
267
+ </div>
268
+
269
+ <!-- Code Example -->
270
+ <div class="mt-4 bg-gray-800 p-6 rounded-lg">
271
+ <div class="flex justify-between items-center mb-4">
272
+ <h3 class="text-lg font-medium text-white">Exemplo de Código Vulnerável</h3>
273
+ <button class="text-purple-300 hover:text-purple-100">
274
+ <i class="fas fa-copy"></i>
275
+ </button>
276
+ </div>
277
+ <div class="code-block p-4 overflow-x-auto">
278
+ <pre class="text-sm"><code id="vulnerableCode">// Seu código vulnerável será exibido aqui após a análise</code></pre>
279
+ </div>
280
+ </div>
281
+
282
+ <!-- Fix Suggestion -->
283
+ <div class="mt-4 bg-green-50 p-6 rounded-lg border border-green-200">
284
+ <div class="flex items-center mb-3">
285
+ <i class="fas fa-lightbulb text-green-500 mr-2"></i>
286
+ <h3 class="text-lg font-medium text-green-800">Sugestão de Correção</h3>
287
+ </div>
288
+ <div id="fixSuggestion" class="text-gray-700">
289
+ <p>As sugestões de correção serão exibidas aqui após a análise de segurança.</p>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </div>
294
+ </div>
295
+
296
+ <div class="bg-gray-100 px-6 py-4 border-t border-gray-200">
297
+ <div class="flex justify-between items-center">
298
+ <button class="text-purple-600 hover:text-purple-800 font-medium flex items-center">
299
+ <i class="fas fa-download mr-2"></i> Exportar Relatório
300
+ </button>
301
+ <button class="bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded-lg flex items-center">
302
+ <i class="fas fa-sync-alt mr-2"></i> Executar Novamente
303
+ </button>
304
+ </div>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ </section>
309
+
310
+ <!-- FAQ Section -->
311
+ <section id="faq" class="py-16 bg-gray-100">
312
+ <div class="container mx-auto px-4">
313
+ <h2 class="text-3xl font-bold text-center mb-12">Perguntas Frequentes</h2>
314
+
315
+ <div class="max-w-3xl mx-auto space-y-4">
316
+ <!-- FAQ Item 1 -->
317
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
318
+ <button class="faq-toggle w-full text-left p-6 hover:bg-gray-50 transition flex justify-between items-center">
319
+ <h3 class="text-lg font-medium">Quais tipos de vulnerabilidades este scanner pode detectar?</h3>
320
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
321
+ </button>
322
+ <div class="faq-content hidden px-6 pb-6">
323
+ <p class="text-gray-600">
324
+ Nosso scanner identifica diversos tipos de vulnerabilidades específicas de aplicações IA, incluindo:
325
+ </p>
326
+ <ul class="list-disc pl-5 mt-2 space-y-1 text-gray-600">
327
+ <li>Injeção de prompts maliciosos</li>
328
+ <li>Vazamento de dados sensíveis através de respostas do modelo</li>
329
+ <li>Vieses discriminatórios no comportamento do modelo</li>
330
+ <li>Falhas na sanitização de entradas do usuário</li>
331
+ <li>Problemas de controle de acesso a APIs de modelos</li>
332
+ <li>Exposição de informações de treinamento do modelo</li>
333
+ </ul>
334
+ </div>
335
+ </div>
336
+
337
+ <!-- FAQ Item 2 -->
338
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
339
+ <button class="faq-toggle w-full text-left p-6 hover:bg-gray-50 transition flex justify-between items-center">
340
+ <h3 class="text-lg font-medium">Como funciona a análise de segurança para aplicações IA?</h3>
341
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
342
+ </button>
343
+ <div class="faq-content hidden px-6 pb-6">
344
+ <p class="text-gray-600">
345
+ Nossa plataforma utiliza uma combinação de técnicas avançadas:
346
+ </p>
347
+ <ol class="list-decimal pl-5 mt-2 space-y-2 text-gray-600">
348
+ <li><strong>Testes de penetração específicos para IA:</strong> Enviamos entradas cuidadosamente elaboradas para identificar comportamentos inseguros.</li>
349
+ <li><strong>Análise estática de código:</strong> Verificamos o código em busca de padrões inseguros no manuseio do modelo IA.</li>
350
+ <li><strong>Monitoramento de tráfego:</strong> Analisamos as comunicações entre sua aplicação e os modelos de IA.</li>
351
+ <li><strong>Testes de adversários:</strong> Tentamos enganar o modelo para produzir resultados indesejados.</li>
352
+ <li><strong>Verificação de conformidade:</strong> Avaliamos se sua aplicação atende aos requisitos regulatórios relevantes.</li>
353
+ </ol>
354
+ </div>
355
+ </div>
356
+
357
+ <!-- FAQ Item 3 -->
358
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
359
+ <button class="faq-toggle w-full text-left p-6 hover:bg-gray-50 transition flex justify-between items-center">
360
+ <h3 class="text-lg font-medium">Meus dados e código estão seguros durante a análise?</h3>
361
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
362
+ </button>
363
+ <div class="faq-content hidden px-6 pb-6">
364
+ <p class="text-gray-600">
365
+ Segurança e privacidade são nossas principais prioridades:
366
+ </p>
367
+ <ul class="list-disc pl-5 mt-2 space-y-1 text-gray-600">
368
+ <li>Todos os dados são processados em ambiente isolado e seguro</li>
369
+ <li>Não armazenamos seu código fonte após a análise</li>
370
+ <li>Os relatórios são gerados com informações anonimizadas</li>
371
+ <li>Oferecemos opção de análise local sem envio de dados para nossa nuvem</li>
372
+ <li>Cumprimos rigorosamente com LGPD, GDPR e outras regulamentações</li>
373
+ </ul>
374
+ <p class="mt-3 text-gray-600">
375
+ Você pode revisar nossa <a href="#" class="text-purple-600 hover:underline">Política de Privacidade</a> para mais detalhes.
376
+ </p>
377
+ </div>
378
+ </div>
379
+ </div>
380
+ </div>
381
+ </section>
382
+
383
+ <!-- Footer -->
384
+ <footer class="bg-gray-900 text-white py-12">
385
+ <div class="container mx-auto px-4">
386
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
387
+ <div>
388
+ <h3 class="text-xl font-bold mb-4 flex items-center">
389
+ <i class="fas fa-shield-alt mr-2"></i> AI Security Auditor
390
+ </h3>
391
+ <p class="text-gray-400">
392
+ Ferramenta avançada para testar e melhorar a segurança de aplicações baseadas em inteligência artificial.
393
+ </p>
394
+ </div>
395
+
396
+ <div>
397
+ <h4 class="text-lg font-semibold mb-4">Recursos</h4>
398
+ <ul class="space-y-2 text-gray-400">
399
+ <li><a href="#" class="hover:text-white transition">Scanner Online</a></li>
400
+ <li><a href="#" class="hover:text-white transition">API de Segurança</a></li>
401
+ <li><a href="#" class="hover:text-white transition">Relatórios Personalizados</a></li>
402
+ <li><a href="#" class="hover:text-white transition">Integrações</a></li>
403
+ </ul>
404
+ </div>
405
+
406
+ <div>
407
+ <h4 class="text-lg font-semibold mb-4">Empresa</h4>
408
+ <ul class="space-y-2 text-gray-400">
409
+ <li><a href="#" class="hover:text-white transition">Sobre Nós</a></li>
410
+ <li><a href="#" class="hover:text-white transition">Blog</a></li>
411
+ <li><a href="#" class="hover:text-white transition">Carreiras</a></li>
412
+ <li><a href="#" class="hover:text-white transition">Contato</a></li>
413
+ </ul>
414
+ </div>
415
+
416
+ <div>
417
+ <h4 class="text-lg font-semibold mb-4">Newsletter</h4>
418
+ <p class="text-gray-400 mb-4">
419
+ Assine para receber atualizações sobre segurança em IA.
420
+ </p>
421
+ <div class="flex">
422
+ <input type="email" placeholder="Seu e-mail" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-900 w-full">
423
+ <button class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-r-lg transition">
424
+ <i class="fas fa-paper-plane"></i>
425
+ </button>
426
+ </div>
427
+ <div class="flex space-x-4 mt-4">
428
+ <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-twitter"></i></a>
429
+ <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-linkedin"></i></a>
430
+ <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-github"></i></a>
431
+ </div>
432
+ </div>
433
+ </div>
434
+
435
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
436
+ <p class="text-gray-400">
437
+ © 2023 AI Security Auditor. Todos os direitos reservados.
438
+ </p>
439
+ <div class="flex space-x-6 mt-4 md:mt-0">
440
+ <a href="#" class="text-gray-400 hover:text-white transition">Termos de Serviço</a>
441
+ <a href="#" class="text-gray-400 hover:text-white transition">Política de Privacidade</a>
442
+ <a href="#" class="text-gray-400 hover:text-white transition">Cookies</a>
443
+ </div>
444
+ </div>
445
+ </div>
446
+ </footer>
447
+
448
+ <script>
449
+ // Toggle FAQ items
450
+ document.querySelectorAll('.faq-toggle').forEach(button => {
451
+ button.addEventListener('click', () => {
452
+ const content = button.nextElementSibling;
453
+ const icon = button.querySelector('i');
454
+
455
+ content.classList.toggle('hidden');
456
+ icon.classList.toggle('rotate-180');
457
+ });
458
+ });
459
+
460
+ // Run security test simulation
461
+ document.getElementById('runTestBtn').addEventListener('click', () => {
462
+ // Show loading state
463
+ const runBtn = document.getElementById('runTestBtn');
464
+ runBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Analisando...';
465
+ runBtn.disabled = true;
466
+
467
+ // Show results section
468
+ document.getElementById('results').classList.remove('hidden');
469
+
470
+ // Simulate scan progress
471
+ let progress = 0;
472
+ const interval = setInterval(() => {
473
+ progress += Math.random() * 10;
474
+ if (progress >= 100) {
475
+ progress = 100;
476
+ clearInterval(interval);
477
+ showResults();
478
+ runBtn.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Análise Completa';
479
+ setTimeout(() => {
480
+ runBtn.innerHTML = '<i class="fas fa-shield-alt mr-2"></i> Executar Novamente';
481
+ runBtn.disabled = false;
482
+ }, 2000);
483
+ }
484
+
485
+ // Update progress circle
486
+ const circle = document.getElementById('scoreCircle');
487
+ const offset = 283 * (1 - progress / 100);
488
+ circle.style.strokeDashoffset = offset;
489
+
490
+ document.getElementById('scoreValue').textContent = Math.floor(progress);
491
+ }, 300);
492
+ });
493
+
494
+ // Show fake results for demo
495
+ function showResults() {
496
+ // Set score text based on value
497
+ const score = 82; // Demo score
498
+ const scoreText = document.getElementById('scoreText');
499
+
500
+ if (score >= 80) {
501
+ scoreText.textContent = 'Boa Segurança';
502
+ scoreText.className = 'text-lg font-medium mb-2 text-green-600';
503
+ } else if (score >= 50) {
504
+ scoreText.textContent = 'Segurança Moderada';
505
+ scoreText.className = 'text-lg font-medium mb-2 text-yellow-600';
506
+ } else {
507
+ scoreText.textContent = 'Segurança Fraca';
508
+ scoreText.className = 'text-lg font-medium mb-2 text-red-600';
509
+ }
510
+
511
+ // Set last scan date
512
+ document.getElementById('lastScanDate').textContent = new Date().toLocaleString();
513
+
514
+ // Set recommendations
515
+ const recommendations = [
516
+ 'Implemente validação rigorosa de entradas para prevenir injeção de prompts',
517
+ 'Adicione camadas de sanitização para respostas do modelo antes de exibir aos usuários',
518
+ 'Revise as permissões de acesso à API do modelo IA',
519
+ 'Atualize para a versão mais recente do framework de IA utilizado'
520
+ ];
521
+
522
+ const recommendationsContainer = document.getElementById('recommendations');
523
+ recommendationsContainer.innerHTML = '';
524
+
525
+ recommendations.forEach(rec => {
526
+ const div = document.createElement('div');
527
+ div.className = 'flex items-start';
528
+ div.innerHTML = `
529
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
530
+ <span>${rec}</span>
531
+ `;
532
+ recommendationsContainer.appendChild(div);
533
+ });
534
+
535
+ // Set vulnerabilities
536
+ const vulnerabilities = [
537
+ { type: 'Injeção de Prompt', severity: 'Alta', location: 'Endpoint /chat', details: 'Permite execução de comandos não autorizados' },
538
+ { type: 'Vazamento de Dados', severity: 'Média', location: 'Resposta do modelo', details: 'Pode revelar informações de treinamento' },
539
+ { type: 'Falta de Sanitização', severity: 'Baixa', location: 'Entrada do usuário', details: 'Permite XSS básico através de respostas' }
540
+ ];
541
+
542
+ const vulnTable = document.getElementById('vulnerabilitiesList');
543
+ vulnTable.innerHTML = '';
544
+
545
+ vulnerabilities.forEach(vuln => {
546
+ const row = document.createElement('tr');
547
+
548
+ // Set severity color
549
+ let severityColor = 'bg-green-100 text-green-800';
550
+ if (vuln.severity === 'Alta') severityColor = 'bg-red-100 text-red-800';
551
+ if (vuln.severity === 'Média') severityColor = 'bg-yellow-100 text-yellow-800';
552
+
553
+ row.innerHTML = `
554
+ <td class="px-6 py-4 whitespace-nowrap">${vuln.type}</td>
555
+ <td class="px-6 py-4 whitespace-nowrap">
556
+ <span class="px-2 py-1 rounded-full text-xs font-medium ${severityColor}">${vuln.severity}</span>
557
+ </td>
558
+ <td class="px-6 py-4 whitespace-nowrap">${vuln.location}</td>
559
+ <td class="px-6 py-4">${vuln.details}</td>
560
+ `;
561
+ vulnTable.appendChild(row);
562
+ });
563
+
564
+ // Set code example
565
+ document.getElementById('vulnerableCode').textContent = `// Exemplo de código vulnerável a injeção de prompt
566
+ async function handleUserInput(userInput) {
567
+ const prompt = \`Analise esta mensagem: \${userInput}\`;
568
+ // ⚠️ Sem sanitização da entrada do usuário
569
+ const response = await aiModel.generate(prompt);
570
+ return response; // Potencial vazamento de dados
571
+ }`;
572
+
573
+ // Set fix suggestion
574
+ document.getElementById('fixSuggestion').innerHTML = `
575
+ <p class="mb-2">Para corrigir a vulnerabilidade de injeção de prompt:</p>
576
+ <div class="code-block p-3 rounded mb-2">
577
+ <pre class="text-sm">// Implemente sanitização rigorosa
578
+ const sanitizedInput = userInput.replace(/[<>{}]/g, '');
579
+ const prompt = \`Analise esta mensagem: \${sanitizedInput}\`;</pre>
580
+ </div>
581
+ <p>Considere também:</p>
582
+ <ul class="list-disc pl-5 mt-1 space-y-1">
583
+ <li>Limitar o comprimento da entrada</li>
584
+ <li>Implementar lista negra de termos sensíveis</li>
585
+ <li>Validar o formato esperado da entrada</li>
586
+ </ul>
587
+ `;
588
+ }
589
+
590
+ // Start scan button scrolls to scanner
591
+ document.getElementById('startScanBtn').addEventListener('click', () => {
592
+ document.getElementById('scanner').scrollIntoView({
593
+ behavior: 'smooth'
594
+ });
595
+ });
596
+ </script>
597
+ <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=xlorfx/ai-security-auditor" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
598
+ </html>