Hugging Face's logo

Spaces:
roundb
/
Surface_Relatorio
Running

App Files Community
roundb commited on
Commit
f05ad43
·
verified ·
1 Parent(s): fb8c763

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +433 -18
index.html CHANGED
@@ -1,19 +1,434 @@
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>Relatório Executivo: Desempenho do Modelo de IA</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ body {
15
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16
+ line-height: 1.6;
17
+ color: #333;
18
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
19
+ min-height: 100vh;
20
+ }
21
+
22
+ .container {
23
+ max-width: 1200px;
24
+ margin: 0 auto;
25
+ padding: 20px;
26
+ }
27
+
28
+ /* Header */
29
+ header {
30
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
31
+ color: white;
32
+ padding: 40px 20px;
33
+ border-radius: 10px;
34
+ margin-bottom: 30px;
35
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
36
+ text-align: center;
37
+ }
38
+
39
+ header h1 {
40
+ font-size: 2.5em;
41
+ margin-bottom: 10px;
42
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
43
+ }
44
+
45
+ header p {
46
+ font-size: 1.1em;
47
+ opacity: 0.9;
48
+ }
49
+
50
+ .metadata {
51
+ display: flex;
52
+ justify-content: center;
53
+ gap: 30px;
54
+ margin-top: 15px;
55
+ font-size: 0.95em;
56
+ flex-wrap: wrap;
57
+ }
58
+
59
+ /* Main Content */
60
+ main {
61
+ background: white;
62
+ border-radius: 10px;
63
+ padding: 40px;
64
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
65
+ margin-bottom: 30px;
66
+ }
67
+
68
+ section {
69
+ margin-bottom: 50px;
70
+ }
71
+
72
+ section:last-child {
73
+ margin-bottom: 0;
74
+ }
75
+
76
+ h2 {
77
+ color: #667eea;
78
+ font-size: 1.8em;
79
+ margin-bottom: 20px;
80
+ padding-bottom: 15px;
81
+ border-bottom: 3px solid #667eea;
82
+ display: flex;
83
+ align-items: center;
84
+ gap: 10px;
85
+ }
86
+
87
+ h3 {
88
+ color: #764ba2;
89
+ font-size: 1.3em;
90
+ margin-top: 25px;
91
+ margin-bottom: 15px;
92
+ }
93
+
94
+ p {
95
+ margin-bottom: 15px;
96
+ text-align: justify;
97
+ line-height: 1.8;
98
+ }
99
+
100
+ strong {
101
+ color: #667eea;
102
+ font-weight: 600;
103
+ }
104
+
105
+ /* Tables */
106
+ table {
107
+ width: 100%;
108
+ border-collapse: collapse;
109
+ margin: 20px 0;
110
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
111
+ border-radius: 8px;
112
+ overflow: hidden;
113
+ }
114
+
115
+ th {
116
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
117
+ color: white;
118
+ padding: 15px;
119
+ text-align: left;
120
+ font-weight: 600;
121
+ }
122
+
123
+ td {
124
+ padding: 12px 15px;
125
+ border-bottom: 1px solid #eee;
126
+ }
127
+
128
+ tr:hover {
129
+ background-color: #f9f9f9;
130
+ }
131
+
132
+ tr:last-child td {
133
+ border-bottom: none;
134
+ }
135
+
136
+ /* Highlights */
137
+ .highlight {
138
+ background-color: #fff3cd;
139
+ padding: 20px;
140
+ border-left: 4px solid #ffc107;
141
+ border-radius: 5px;
142
+ margin: 20px 0;
143
+ }
144
+
145
+ .success-box {
146
+ background-color: #d4edda;
147
+ padding: 20px;
148
+ border-left: 4px solid #28a745;
149
+ border-radius: 5px;
150
+ margin: 20px 0;
151
+ }
152
+
153
+ .metric-card {
154
+ display: inline-block;
155
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
156
+ color: white;
157
+ padding: 20px;
158
+ border-radius: 8px;
159
+ margin: 10px;
160
+ text-align: center;
161
+ min-width: 150px;
162
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
163
+ }
164
+
165
+ .metric-card .value {
166
+ font-size: 2em;
167
+ font-weight: bold;
168
+ margin: 10px 0;
169
+ }
170
+
171
+ .metric-card .label {
172
+ font-size: 0.9em;
173
+ opacity: 0.9;
174
+ }
175
+
176
+ /* Images */
177
+ img {
178
+ max-width: 100%;
179
+ height: auto;
180
+ border-radius: 8px;
181
+ margin: 20px 0;
182
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
183
+ display: block;
184
+ }
185
+
186
+ /* Lists */
187
+ ul, ol {
188
+ margin: 15px 0 15px 30px;
189
+ }
190
+
191
+ li {
192
+ margin-bottom: 10px;
193
+ line-height: 1.8;
194
+ }
195
+
196
+ /* Footer */
197
+ footer {
198
+ background: #333;
199
+ color: white;
200
+ text-align: center;
201
+ padding: 20px;
202
+ border-radius: 10px;
203
+ margin-top: 30px;
204
+ }
205
+
206
+ /* Responsive */
207
+ @media (max-width: 768px) {
208
+ header h1 {
209
+ font-size: 1.8em;
210
+ }
211
+
212
+ main {
213
+ padding: 20px;
214
+ }
215
+
216
+ .metadata {
217
+ flex-direction: column;
218
+ gap: 10px;
219
+ }
220
+
221
+ h2 {
222
+ font-size: 1.4em;
223
+ }
224
+
225
+ table {
226
+ font-size: 0.9em;
227
+ }
228
+
229
+ td, th {
230
+ padding: 10px;
231
+ }
232
+ }
233
+
234
+ /* Print Styles */
235
+ @media print {
236
+ body {
237
+ background: white;
238
+ }
239
+
240
+ main {
241
+ box-shadow: none;
242
+ padding: 0;
243
+ }
244
+
245
+ section {
246
+ page-break-inside: avoid;
247
+ }
248
+ }
249
+
250
+ .emoji {
251
+ margin-right: 5px;
252
+ }
253
+ </style>
254
+ </head>
255
+ <body>
256
+ <div class="container">
257
+ <header>
258
+ <h1>📊 Relatório Executivo: Desempenho do Modelo de IA</h1>
259
+ <p>Análise Completa dos Resultados de Treinamento</p>
260
+ <div class="metadata">
261
+ <span>📅 Data: 15 de Dezembro de 2025</span>
262
+ <span>👤 Autor: Ronaldo Menezes / IA </span>
263
+ <span>🎯 Modelo: Vision Transformer (ViT)</span>
264
+ </div>
265
+ </header>
266
+
267
+ <main>
268
+ <!-- Sumário Executivo -->
269
+ <section>
270
+ <h2><span class="emoji">📈</span>1. Sumário Executivo</h2>
271
+ <p>Este relatório apresenta os resultados do treinamento de um modelo de Inteligência Artificial (IA), arquitetura <strong>ViT (Vision Transformer)</strong>, para a tarefa de <strong>classificação de superfícies</strong> em três categorias: <strong>asfalto, tijolo e grama</strong>. O objetivo do treinamento foi desenvolver um modelo capaz de identificar com alta precisão o tipo de superfície a partir de imagens.</p>
272
+
273
+ <div class="success-box">
274
+ <strong>✓ Resultado Principal:</strong> O modelo alcançou um <strong>desempenho excepcional</strong>, com uma <strong>acurácia final de 99.74%</strong> no conjunto de dados de teste, que simula um ambiente de produção. Este resultado indica que o modelo é extremamente confiável e robusto para a aplicação designada, superando as expectativas iniciais.
275
+ </div>
276
+ </section>
277
+
278
+ <!-- Dataset -->
279
+ <section>
280
+ <h2><span class="emoji">📦</span>2. Visão Geral do Conjunto de Dados</h2>
281
+ <p>O treinamento foi realizado com um total de <strong>7,551 imagens</strong>, distribuídas de forma balanceada entre as três classes. O conjunto de dados foi dividido em três partes para garantir uma avaliação rigorosa e imparcial do modelo:</p>
282
+
283
+ <ul>
284
+ <li><strong>Treino (70%):</strong> 5,285 imagens usadas para ensinar o modelo.</li>
285
+ <li><strong>Validação (15%):</strong> 1,133 imagens usadas para ajustar os parâmetros do modelo durante o treinamento.</li>
286
+ <li><strong>Teste (15%):</strong> 1,133 imagens usadas para a avaliação final do modelo, com dados nunca antes vistos por ele.</li>
287
+ </ul>
288
+
289
+ <table>
290
+ <thead>
291
+ <tr>
292
+ <th>Divisão do Dataset</th>
293
+ <th>Número de Imagens</th>
294
+ <th>Percentual</th>
295
+ </tr>
296
+ </thead>
297
+ <tbody>
298
+ <tr>
299
+ <td><strong>Treino</strong></td>
300
+ <td>5,285</td>
301
+ <td>70%</td>
302
+ </tr>
303
+ <tr>
304
+ <td><strong>Validação</strong></td>
305
+ <td>1,133</td>
306
+ <td>15%</td>
307
+ </tr>
308
+ <tr>
309
+ <td><strong>Teste</strong></td>
310
+ <td>1,133</td>
311
+ <td>15%</td>
312
+ </tr>
313
+ <tr>
314
+ <td><strong>Total</strong></td>
315
+ <td><strong>7,551</strong></td>
316
+ <td><strong>100%</strong></td>
317
+ </tr>
318
+ </tbody>
319
+ </table>
320
+
321
+ <img src="visualizations/01_dataset_distribution.png" alt="Distribuição do Dataset">
322
+ </section>
323
+
324
+ <!-- Desempenho Durante Treinamento -->
325
+ <section>
326
+ <h2><span class="emoji">🎓</span>3. Desempenho Durante o Treinamento</h2>
327
+ <p>O modelo foi treinado ao longo de <strong>20 épocas</strong> (ciclos de treinamento). A cada época, a sua performance foi medida para garantir que o aprendizado estava ocorrendo de forma eficiente. Os gráficos abaixo ilustram a evolução da <strong>acurácia</strong> (percentual de acertos) e da <strong>loss</strong> (margem de erro).</p>
328
+
329
+ <h3>Evolução da Acurácia</h3>
330
+ <p>O gráfico demonstra um aumento consistente da acurácia, tanto nos dados de treino quanto nos de validação, estabilizando-se em um patamar próximo a 100%, o que indica um aprendizado bem-sucedido.</p>
331
+ <img src="visualizations/02_accuracy_evolution.png" alt="Evolução da Acurácia">
332
+
333
+ <h3>Evolução da Loss (Erro)</h3>
334
+ <p>De forma complementar, a margem de erro (loss) diminuiu progressivamente ao longo do treinamento, aproximando-se de zero. Isso confirma que o modelo se tornou cada vez mais confiante e preciso em suas previsões.</p>
335
+ <img src="visualizations/03_loss_evolution.png" alt="Evolução da Loss">
336
+ </section>
337
+
338
+ <!-- Resultados Finais -->
339
+ <section>
340
+ <h2><span class="emoji">🏆</span>4. Resultados Finais</h2>
341
+ <p>Após a conclusão do treinamento, o modelo foi avaliado em um conjunto de dados de teste, que ele nunca havia visto antes. Os resultados confirmam a sua alta performance e capacidade de generalização para novos dados.</p>
342
+
343
+ <h3>Métricas de Desempenho (Conjunto de Teste)</h3>
344
+
345
+ <div style="text-align: center; margin: 30px 0;">
346
+ <div class="metric-card">
347
+ <div class="label">Acurácia</div>
348
+ <div class="value">99.74%</div>
349
+ </div>
350
+ <div class="metric-card">
351
+ <div class="label">Precisão</div>
352
+ <div class="value">99.75%</div>
353
+ </div>
354
+ <div class="metric-card">
355
+ <div class="label">Revocação</div>
356
+ <div class="value">99.72%</div>
357
+ </div>
358
+ <div class="metric-card">
359
+ <div class="label">F1-Score</div>
360
+ <div class="value">99.73%</div>
361
+ </div>
362
+ </div>
363
+
364
+ <table>
365
+ <thead>
366
+ <tr>
367
+ <th>Métrica</th>
368
+ <th>Resultado (%)</th>
369
+ </tr>
370
+ </thead>
371
+ <tbody>
372
+ <tr>
373
+ <td><strong>Acurácia</strong></td>
374
+ <td><strong>99.74%</strong></td>
375
+ </tr>
376
+ <tr>
377
+ <td>Precisão</td>
378
+ <td>99.75%</td>
379
+ </tr>
380
+ <tr>
381
+ <td>Revocação</td>
382
+ <td>99.72%</td>
383
+ </tr>
384
+ <tr>
385
+ <td>F1-Score</td>
386
+ <td>99.73%</td>
387
+ </tr>
388
+ </tbody>
389
+ </table>
390
+
391
+ <div class="highlight">
392
+ <strong>📌 Explicação das Métricas:</strong>
393
+ <ul>
394
+ <li><strong>Acurácia:</strong> Percentual de classificações corretas. 99.74% significa que, a cada 1000 imagens, o modelo acerta, em média, 997.</li>
395
+ <li><strong>Precisão:</strong> Das classificações que o modelo fez para uma classe, quantas estavam corretas.</li>
396
+ <li><strong>Revocação (Recall):</strong> De todas as imagens que realmente pertenciam a uma classe, quantas o modelo conseguiu identificar.</li>
397
+ <li><strong>F1-Score:</strong> Média harmônica entre precisão e revocação, fornecendo uma métrica única de performance.</li>
398
+ </ul>
399
+ </div>
400
+
401
+ <img src="visualizations/04_final_metrics.png" alt="Métricas Finais">
402
+
403
+ <h3>Comparativo: Validação vs. Teste</h3>
404
+ <p>O desempenho do modelo foi consistente entre os conjuntos de validação e teste, o que demonstra que ele não apenas memorizou os dados de treino, mas <strong>aprendeu a generalizar</strong> o conhecimento para novas situações. Esta é uma característica crucial para um modelo de IA robusto e confiável.</p>
405
+ <img src="visualizations/05_validation_vs_test.png" alt="Comparativo Validação vs. Teste">
406
+
407
+ <img src="visualizations/06_improvement_progress.png" alt="Progresso de Melhoria">
408
+ </section>
409
+
410
+ <!-- Conclusão -->
411
+ <section>
412
+ <h2><span class="emoji">✅</span>5. Conclusão</h2>
413
+ <div class="success-box">
414
+ <p>O treinamento do modelo de classificação de superfícies foi um <strong>sucesso absoluto</strong>. O modelo alcançou um nível de acurácia de <strong>99.74%</strong>, demonstrando alta confiabilidade e precisão.</p>
415
+
416
+ <p>Com base nestes resultados, o modelo está <strong>apto para ser implementado em ambiente de produção</strong>, onde se espera que ele execute a tarefa de classificação de imagens com um desempenho excelente e consistente. A robustez demonstrada nos testes indica um baixo risco de falhas e uma alta taxa de acerto em cenários do mundo real.</p>
417
+ </div>
418
+
419
+ <h3>Recomendações</h3>
420
+ <ul>
421
+ <li>✓ Implementar o modelo em ambiente de produção com confiança</li>
422
+ <li>✓ Monitorar continuamente o desempenho em dados reais</li>
423
+ <li>✓ Realizar atualizações periódicas com novos dados para manter a performance</li>
424
+ <li>✓ Documentar o modelo para facilitar manutenção futura</li>
425
+ </ul>
426
+ </section>
427
+ </main>
428
+
429
+ <footer>
430
+ <p>&copy; 2025 Manus AI. Todos os direitos reservados. | Relatório Executivo - Desempenho do Modelo de IA</p>
431
+ </footer>
432
+ </div>
433
+ </body>
434
  </html>