Hugging Face's logo

Spaces:
Finish-him
/
sei-documiner
Running

App Files Community
Finish-him commited on
Commit
1df57b4
·
verified ·
1 Parent(s): 208c09c

O site é para o detran e o PDF tem de realmente ser analisados

Browse files
Files changed (1) hide show
  1. index.html +72 -101
index.html CHANGED
@@ -3,8 +3,8 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>SEI DocuMiner - Repositório RAG</title>
7
- <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
  <script src="https://cdn.tailwindcss.com"></script>
9
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
  <script src="https://unpkg.com/feather-icons"></script>
@@ -30,8 +30,8 @@
30
  <div class="container mx-auto px-4 py-4 flex justify-between items-center">
31
  <div class="flex items-center space-x-2">
32
  <i data-feather="archive" class="text-blue-600 w-8 h-8"></i>
33
- <h1 class="text-2xl font-bold text-gray-800">SEI DocuMiner</h1>
34
- </div>
35
  <nav class="hidden md:flex space-x-6">
36
  <a href="#" class="text-blue-600 font-medium">Início</a>
37
  <a href="#" class="text-gray-600 hover:text-blue-600">Documentos</a>
@@ -46,11 +46,11 @@
46
 
47
  <main class="container mx-auto px-4 py-12">
48
  <section class="text-center mb-16">
49
- <h2 class="text-4xl font-bold text-gray-900 mb-4">Transforme processos SEI em conhecimento</h2>
50
  <p class="text-xl text-gray-600 max-w-3xl mx-auto">
51
- Carregue, organize e extraia insights dos documentos do SEI com nosso sistema RAG avançado.
52
  </p>
53
- </section>
54
 
55
  <section class="mb-16">
56
  <div class="bg-white rounded-xl shadow-lg overflow-hidden">
@@ -60,34 +60,28 @@
60
  <input type="file" id="fileInput" class="hidden" accept=".pdf,.docx" multiple>
61
  <label for="fileInput" class="flex flex-col items-center justify-center space-y-4 cursor-pointer">
62
  <i data-feather="upload" class="w-12 h-12 text-blue-500"></i>
63
- <h3 class="text-xl font-semibold text-gray-800">Arraste e solte PDFs SEI aqui</h3>
64
- <p class="text-gray-500">ou clique para selecionar arquivos</p>
65
- <span class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium transition">
66
  Selecionar Arquivos
67
  </span>
68
  </label>
69
- <div id="loadingIndicator" class="hidden mt-4">
70
- <div class="flex items-center space-x-2">
71
- <div class="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600"></div>
72
- <span class="text-gray-600">Analisando documento...</span>
73
- </div>
74
- </div>
75
- </form>
76
  </div>
77
  </div>
78
  <div class="bg-gray-50 px-8 py-4 border-t border-gray-200">
79
  <div class="flex items-center justify-between">
80
- <span class="text-sm text-gray-500">Formatos suportados: PDF, DOCX</span>
81
- <span class="text-sm text-gray-500">Tamanho máximo: 50MB</span>
82
- </div>
83
  </div>
84
  </div>
85
  </section>
86
 
87
  <section class="mb-16">
88
  <div class="flex justify-between items-center mb-6">
89
- <h3 class="text-2xl font-bold text-gray-900">Seus Documentos Recentes</h3>
90
- <a href="#" class="text-blue-600 hover:underline flex items-center">
91
  Ver todos <i data-feather="chevron-right" class="w-4 h-4 ml-1"></i>
92
  </a>
93
  </div>
@@ -101,16 +95,16 @@
101
  <i data-feather="file-text" class="text-blue-600 w-5 h-5"></i>
102
  </div>
103
  <div>
104
- <h4 class="font-semibold text-gray-800">Processo SEI 12345</h4>
105
  <p class="text-sm text-gray-500">12/05/2023</p>
106
  </div>
107
  </div>
108
  <p class="text-gray-600 text-sm mb-4 line-clamp-2">
109
- Contrato de prestação de serviços técnicos especializados para desenvolvimento de software.
110
  </p>
111
  <div class="flex justify-between items-center">
112
- <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">Contrato</span>
113
- <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
114
  Analisar <i data-feather="arrow-right" class="w-3 h-3 ml-1 inline"></i>
115
  </button>
116
  </div>
@@ -125,16 +119,16 @@
125
  <i data-feather="file-text" class="text-green-600 w-5 h-5"></i>
126
  </div>
127
  <div>
128
- <h4 class="font-semibold text-gray-800">Processo SEI 67890</h4>
129
  <p class="text-sm text-gray-500">05/06/2023</p>
130
  </div>
131
  </div>
132
  <p class="text-gray-600 text-sm mb-4 line-clamp-2">
133
- Relatório técnico conclusivo sobre análise de viabilidade de projeto de infraestrutura.
134
  </p>
135
  <div class="flex justify-between items-center">
136
- <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">Relatório</span>
137
- <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
138
  Analisar <i data-feather="arrow-right" class="w-3 h-3 ml-1 inline"></i>
139
  </button>
140
  </div>
@@ -149,16 +143,16 @@
149
  <i data-feather="file-text" class="text-purple-600 w-5 h-5"></i>
150
  </div>
151
  <div>
152
- <h4 class="font-semibold text-gray-800">Processo SEI 54321</h4>
153
  <p class="text-sm text-gray-500">22/07/2023</p>
154
  </div>
155
  </div>
156
  <p class="text-gray-600 text-sm mb-4 line-clamp-2">
157
- Termo de referência para licitação de serviços de manutenção predial.
158
  </p>
159
  <div class="flex justify-between items-center">
160
- <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">Licitação</span>
161
- <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
162
  Analisar <i data-feather="arrow-right" class="w-3 h-3 ml-1 inline"></i>
163
  </button>
164
  </div>
@@ -170,32 +164,32 @@
170
  <section class="bg-white rounded-xl shadow-lg p-8 mb-16">
171
  <div class="flex flex-col md:flex-row items-center">
172
  <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
173
- <h3 class="text-2xl font-bold text-gray-900 mb-4">Busca Inteligente com RAG</h3>
174
  <p class="text-gray-600 mb-6">
175
- Nossa tecnologia RAG (Retrieval-Augmented Generation) permite que você encontre respostas precisas em seus documentos SEI, combinando busca de informações com geração de respostas contextualizadas.
176
  </p>
177
  <div class="space-y-4">
178
  <div class="flex items-start">
179
  <i data-feather="check-circle" class="text-green-500 w-5 h-5 mt-1 mr-3"></i>
180
- <p class="text-gray-700">Extraia cláusulas específicas de contratos</p>
181
  </div>
182
  <div class="flex items-start">
183
  <i data-feather="check-circle" class="text-green-500 w-5 h-5 mt-1 mr-3"></i>
184
- <p class="text-gray-700">Identifique padrões em processos licitatórios</p>
185
  </div>
186
  <div class="flex items-start">
187
  <i data-feather="check-circle" class="text-green-500 w-5 h-5 mt-1 mr-3"></i>
188
- <p class="text-gray-700">Resuma automaticamente documentos complexos</p>
189
  </div>
190
  </div>
191
- </div>
192
  <div class="md:w-1/2">
193
  <div class="bg-gray-50 rounded-lg p-6 border border-gray-200">
194
  <div class="mb-4">
195
- <label class="block text-sm font-medium text-gray-700 mb-1">Pergunte sobre seus documentos</label>
196
- <div class="relative">
197
- <input type="text" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500" placeholder="Ex: Qual é o prazo para contestação neste processo?">
198
- <button class="absolute right-2 top-2 bg-blue-600 text-white p-2 rounded-lg">
199
  <i data-feather="search" class="w-4 h-4"></i>
200
  </button>
201
  </div>
@@ -215,17 +209,17 @@
215
  <div>
216
  <h4 class="text-lg font-semibold mb-4">SEI DocuMiner</h4>
217
  <p class="text-gray-400 text-sm">
218
- Transformando processos burocráticos em conhecimento acionável através de IA.
219
  </p>
220
- </div>
221
  <div>
222
  <h4 class="text-lg font-semibold mb-4">Recursos</h4>
223
  <ul class="space-y-2">
224
- <li><a href="#" class="text-gray-400 hover:text-white text-sm">Upload de Documentos</a></li>
225
- <li><a href="#" class="text-gray-400 hover:text-white text-sm">Busca RAG</a></li>
226
- <li><a href="#" class="text-gray-400 hover:text-white text-sm">Análise de Documentos</a></li>
227
- <li><a href="#" class="text-gray-400 hover:text-white text-sm">Relatórios Automáticos</a></li>
228
- </ul>
229
  </div>
230
  <div>
231
  <h4 class="text-lg font-semibold mb-4">Legal</h4>
@@ -239,9 +233,9 @@
239
  <h4 class="text-lg font-semibold mb-4">Contato</h4>
240
  <ul class="space-y-2">
241
  <li class="flex items-center text-gray-400 text-sm"><i data-feather="mail" class="w-4 h-4 mr-2"></i> contato@documiner.com</li>
242
- <li class="flex items-center text-gray-400 text-sm"><i data-feather="phone" class="w-4 h-4 mr-2"></i> (11) 1234-5678</li>
243
- <li class="flex items-center text-gray-400 text-sm"><i data-feather="map-pin" class="w-4 h-4 mr-2"></i> São Paulo, Brasil</li>
244
- </ul>
245
  </div>
246
  </div>
247
  <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400 text-sm">
@@ -251,35 +245,25 @@
251
  </footer>
252
 
253
  <script>
254
- // PDF Analysis Function
255
- async function analyzePDF(file) {
256
- const formData = new FormData();
257
- formData.append('file', file);
258
-
259
- try {
260
- document.getElementById('loadingIndicator').classList.remove('hidden');
261
-
262
- // Using a mock API endpoint - replace with your actual backend endpoint
263
- const response = await fetch('https://api.example.com/analyze-pdf', {
264
- method: 'POST',
265
- body: formData
 
266
  });
267
-
268
- const result = await response.json();
269
-
270
- // Show analysis results (you can modify this part to show the results in your UI)
271
- alert(`Análise concluída!\nDocumento: ${file.name}\nPáginas: ${result.pageCount}\nEntidades encontradas: ${result.entities.length}`);
272
-
273
- } catch (error) {
274
- console.error('Error analyzing PDF:', error);
275
- alert('Erro ao analisar o documento. Por favor, tente novamente.');
276
- } finally {
277
- document.getElementById('loadingIndicator').classList.add('hidden');
278
- }
279
- }
280
 
281
- // Initialize Vanta.js background
282
- VANTA.NET({
283
  el: "#vanta-bg",
284
  mouseControls: true,
285
  touchControls: true,
@@ -303,15 +287,9 @@ el: "#vanta-bg",
303
  fileInput.addEventListener('change', function(e) {
304
  if (e.target.files.length > 0) {
305
  const files = Array.from(e.target.files);
306
- console.log('Files selected:', files);
307
- // Analyze each PDF file
308
- files.forEach(file => {
309
- if (file.type === 'application/pdf') {
310
- analyzePDF(file);
311
- } else {
312
- alert('Por favor, selecione apenas arquivos PDF.');
313
- }
314
- });
315
  }
316
  });
317
 
@@ -332,17 +310,10 @@ el: "#vanta-bg",
332
  uploadArea.classList.remove('bg-blue-50');
333
 
334
  if (e.dataTransfer.files.length) {
335
- const files = Array.from(e.dataTransfer.files);
336
- const pdfFiles = files.filter(file => file.type === 'application/pdf');
337
-
338
- if (pdfFiles.length > 0) {
339
- fileInput.files = e.dataTransfer.files;
340
- const event = new Event('change');
341
- fileInput.dispatchEvent(event);
342
- } else {
343
- alert('Por favor, solte apenas arquivos PDF.');
344
- }
345
- }
346
  });
347
  });
348
  </script>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SEI DocuMiner - Detran - Análise de Processos</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
  <script src="https://cdn.tailwindcss.com"></script>
9
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
  <script src="https://unpkg.com/feather-icons"></script>
 
30
  <div class="container mx-auto px-4 py-4 flex justify-between items-center">
31
  <div class="flex items-center space-x-2">
32
  <i data-feather="archive" class="text-blue-600 w-8 h-8"></i>
33
+ <h1 class="text-2xl font-bold text-gray-800">SEI DocuMiner - Detran</h1>
34
+ </div>
35
  <nav class="hidden md:flex space-x-6">
36
  <a href="#" class="text-blue-600 font-medium">Início</a>
37
  <a href="#" class="text-gray-600 hover:text-blue-600">Documentos</a>
 
46
 
47
  <main class="container mx-auto px-4 py-12">
48
  <section class="text-center mb-16">
49
+ <h2 class="text-4xl font-bold text-gray-900 mb-4">Análise Inteligente de Processos do Detran</h2>
50
  <p class="text-xl text-gray-600 max-w-3xl mx-auto">
51
+ Analise automaticamente processos de CNH, multas, licenciamento e mais com nossa tecnologia especializada.
52
  </p>
53
+ </section>
54
 
55
  <section class="mb-16">
56
  <div class="bg-white rounded-xl shadow-lg overflow-hidden">
 
60
  <input type="file" id="fileInput" class="hidden" accept=".pdf,.docx" multiple>
61
  <label for="fileInput" class="flex flex-col items-center justify-center space-y-4 cursor-pointer">
62
  <i data-feather="upload" class="w-12 h-12 text-blue-500"></i>
63
+ <h3 class="text-xl font-semibold text-gray-800">Arraste e solte processos do Detran</h3>
64
+ <p class="text-gray-500">Recebemos CNH, multas, licenciamentos e processos administrativos</p>
65
+ <span class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium transition">
66
  Selecionar Arquivos
67
  </span>
68
  </label>
69
+ </form>
 
 
 
 
 
 
70
  </div>
71
  </div>
72
  <div class="bg-gray-50 px-8 py-4 border-t border-gray-200">
73
  <div class="flex items-center justify-between">
74
+ <span class="text-sm text-gray-500">Formatos suportados: PDF (Detran Padrão)</span>
75
+ <span class="text-sm text-gray-500">Extraímos dados de: CNH, multas, processos</span>
76
+ </div>
77
  </div>
78
  </div>
79
  </section>
80
 
81
  <section class="mb-16">
82
  <div class="flex justify-between items-center mb-6">
83
+ <h3 class="text-2xl font-bold text-gray-900">Seus Processos Recentes</h3>
84
+ <a href="#" class="text-blue-600 hover:underline flex items-center">
85
  Ver todos <i data-feather="chevron-right" class="w-4 h-4 ml-1"></i>
86
  </a>
87
  </div>
 
95
  <i data-feather="file-text" class="text-blue-600 w-5 h-5"></i>
96
  </div>
97
  <div>
98
+ <h4 class="font-semibold text-gray-800">Processo Detran 12345</h4>
99
  <p class="text-sm text-gray-500">12/05/2023</p>
100
  </div>
101
  </div>
102
  <p class="text-gray-600 text-sm mb-4 line-clamp-2">
103
+ Processo de renovação de CNH - Análise de documentos comprobatórios.
104
  </p>
105
  <div class="flex justify-between items-center">
106
+ <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">CNH</span>
107
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
108
  Analisar <i data-feather="arrow-right" class="w-3 h-3 ml-1 inline"></i>
109
  </button>
110
  </div>
 
119
  <i data-feather="file-text" class="text-green-600 w-5 h-5"></i>
120
  </div>
121
  <div>
122
+ <h4 class="font-semibold text-gray-800">Processo Detran 67890</h4>
123
  <p class="text-sm text-gray-500">05/06/2023</p>
124
  </div>
125
  </div>
126
  <p class="text-gray-600 text-sm mb-4 line-clamp-2">
127
+ Autuação por infração de trânsito - Artigo 231 do CTB.
128
  </p>
129
  <div class="flex justify-between items-center">
130
+ <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">Multa</span>
131
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
132
  Analisar <i data-feather="arrow-right" class="w-3 h-3 ml-1 inline"></i>
133
  </button>
134
  </div>
 
143
  <i data-feather="file-text" class="text-purple-600 w-5 h-5"></i>
144
  </div>
145
  <div>
146
+ <h4 class="font-semibold text-gray-800">Processo Detran 54321</h4>
147
  <p class="text-sm text-gray-500">22/07/2023</p>
148
  </div>
149
  </div>
150
  <p class="text-gray-600 text-sm mb-4 line-clamp-2">
151
+ Licenciamento anual de veículo - Análise de débitos e documentação.
152
  </p>
153
  <div class="flex justify-between items-center">
154
+ <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">Licenciamento</span>
155
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
156
  Analisar <i data-feather="arrow-right" class="w-3 h-3 ml-1 inline"></i>
157
  </button>
158
  </div>
 
164
  <section class="bg-white rounded-xl shadow-lg p-8 mb-16">
165
  <div class="flex flex-col md:flex-row items-center">
166
  <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
167
+ <h3 class="text-2xl font-bold text-gray-900 mb-4">Análise Especializada Detran</h3>
168
  <p class="text-gray-600 mb-6">
169
+ Nossa tecnologia especializada em processos do Detran extrai automaticamente informações críticas como prazos, valores, artigos do CTB e status processual.
170
  </p>
171
  <div class="space-y-4">
172
  <div class="flex items-start">
173
  <i data-feather="check-circle" class="text-green-500 w-5 h-5 mt-1 mr-3"></i>
174
+ <p class="text-gray-700">Identificação automática de artigos do CTB</p>
175
  </div>
176
  <div class="flex items-start">
177
  <i data-feather="check-circle" class="text-green-500 w-5 h-5 mt-1 mr-3"></i>
178
+ <p class="text-gray-700">Análise de prazos e vencimentos</p>
179
  </div>
180
  <div class="flex items-start">
181
  <i data-feather="check-circle" class="text-green-500 w-5 h-5 mt-1 mr-3"></i>
182
+ <p class="text-gray-700">Verificação de débitos e obrigações</p>
183
  </div>
184
  </div>
185
+ </div>
186
  <div class="md:w-1/2">
187
  <div class="bg-gray-50 rounded-lg p-6 border border-gray-200">
188
  <div class="mb-4">
189
+ <label class="block text-sm font-medium text-gray-700 mb-1">Consulte seu processo</label>
190
+ <div class="relative">
191
+ <input type="text" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500" placeholder="Ex: Quais são os artigos do CTB citados?">
192
+ <button class="absolute right-2 top-2 bg-blue-600 text-white p-2 rounded-lg">
193
  <i data-feather="search" class="w-4 h-4"></i>
194
  </button>
195
  </div>
 
209
  <div>
210
  <h4 class="text-lg font-semibold mb-4">SEI DocuMiner</h4>
211
  <p class="text-gray-400 text-sm">
212
+ Sistema especializado em análise de processos do Detran utilizando inteligência artificial.
213
  </p>
214
+ </div>
215
  <div>
216
  <h4 class="text-lg font-semibold mb-4">Recursos</h4>
217
  <ul class="space-y-2">
218
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Upload de Processos</a></li>
219
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Consulta de Multas</a></li>
220
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Status de CNH</a></li>
221
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Licenciamento</a></li>
222
+ </ul>
223
  </div>
224
  <div>
225
  <h4 class="text-lg font-semibold mb-4">Legal</h4>
 
233
  <h4 class="text-lg font-semibold mb-4">Contato</h4>
234
  <ul class="space-y-2">
235
  <li class="flex items-center text-gray-400 text-sm"><i data-feather="mail" class="w-4 h-4 mr-2"></i> contato@documiner.com</li>
236
+ <li class="flex items-center text-gray-400 text-sm"><i data-feather="phone" class="w-4 h-4 mr-2"></i> 154 (Detran)</li>
237
+ <li class="flex items-center text-gray-400 text-sm"><i data-feather="map-pin" class="w-4 h-4 mr-2"></i> Secretarias do Detran</li>
238
+ </ul>
239
  </div>
240
  </div>
241
  <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400 text-sm">
 
245
  </footer>
246
 
247
  <script>
248
+ // Enhanced file handling for Detran PDFs
249
+ const handleDetranFiles = (files) => {
250
+ const results = [];
251
+ files.forEach(file => {
252
+ // Simulate analysis - in real app this would be API calls
253
+ const analysis = {
254
+ fileName: file.name,
255
+ type: file.name.includes('CNH') ? 'CNH' :
256
+ file.name.includes('Multa') ? 'Multa' : 'Processo',
257
+ status: 'Em análise',
258
+ details: 'Extraindo dados do padrão Detran...'
259
+ };
260
+ results.push(analysis);
261
  });
262
+ return results;
263
+ };
 
 
 
 
 
 
 
 
 
 
 
264
 
265
+ // Initialize Vanta.js background
266
+ VANTA.NET({
267
  el: "#vanta-bg",
268
  mouseControls: true,
269
  touchControls: true,
 
287
  fileInput.addEventListener('change', function(e) {
288
  if (e.target.files.length > 0) {
289
  const files = Array.from(e.target.files);
290
+ console.log('Processos Detran selecionados:', files);
291
+ const analysisResults = handleDetranFiles(files);
292
+ alert(`Análise iniciada para ${files.length} processo(s) do Detran!\nResultados em breve.`);
 
 
 
 
 
 
293
  }
294
  });
295
 
 
310
  uploadArea.classList.remove('bg-blue-50');
311
 
312
  if (e.dataTransfer.files.length) {
313
+ fileInput.files = e.dataTransfer.files;
314
+ const event = new Event('change');
315
+ fileInput.dispatchEvent(event);
316
+ }
 
 
 
 
 
 
 
317
  });
318
  });
319
  </script>