Update index.html

index.html

@@ -37,26 +37,33 @@
             margin-bottom: 2rem;
             padding-bottom: 0.5rem;
             border-bottom: 2px solid #e5e7eb;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
         }
         .features {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
             gap: 2rem;
-            margin: 2rem 0;
         }
         .feature-card {
             padding: 1.5rem;
             background: white;
             border-radius: 0.75rem;
             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-            transition: transform 0.2s;
+            transition: all 0.3s ease;
         }
         .feature-card:hover {
             transform: translateY(-4px);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
         }
         .feature-icon {
             font-size: 2rem;
             margin-bottom: 1rem;
+            display: inline-block;
+            padding: 0.5rem;
+            background: #f3f4f6;
+            border-radius: 0.5rem;
         }
         .feature-title {
             font-size: 1.25rem;
@@ -67,6 +74,13 @@
         .feature-description {
             color: #6b7280;
             line-height: 1.5;
+            margin-bottom: 1rem;
+        }
+        .model-info {
+            font-size: 0.875rem;
+            color: #9CA3AF;
+            padding-top: 0.5rem;
+            border-top: 1px solid #e5e7eb;
         }
         .footer {
             text-align: center;
@@ -74,11 +88,17 @@
             padding: 2rem;
             color: #6b7280;
             border-top: 1px solid #e5e7eb;
+            background: #f9fafb;
+            border-radius: 0.75rem;
         }
-        .model-info {
-            font-size: 0.9rem;
-            color: #9CA3AF;
-            margin-top: 0.5rem;
+        .tech-badge {
+            display: inline-block;
+            padding: 0.25rem 0.75rem;
+            margin: 0.25rem;
+            background: #e5e7eb;
+            border-radius: 9999px;
+            font-size: 0.875rem;
+            color: #4b5563;
         }
     </style>
 </head>
@@ -86,96 +106,106 @@
     <div class="container">
         <header class="header">
             <h1>Central de Inteligência Artificial</h1>
-            <p>Uma plataforma completa com ferramentas avançadas de IA para processamento de texto, áudio e imagem</p>
+            <p>Uma plataforma completa com ferramentas avançadas de IA para processamento de áudio, texto e imagem</p>
         </header>
 
         <div class="category">
-            <h2 class="category-title">🎯 Processamento de Áudio e Fala</h2>
+            <h2 class="category-title">🎤 Processamento de Áudio</h2>
             <div class="features">
                 <div class="feature-card">
-                    <div class="feature-icon">🎙️</div>
+                    <div class="feature-icon">🗣️</div>
                     <h3 class="feature-title">Transcrição de Áudio</h3>
-                    <p class="feature-description">Converta áudio em texto com alta precisão usando o modelo Whisper da OpenAI.</p>
-                    <p class="model-info">Modelo: openai/whisper-small</p>
+                    <p class="feature-description">Converta áudio em texto com alta precisão usando o modelo Whisper da OpenAI. Suporta múltiplos idiomas e formatos de áudio.</p>
+                    <div class="model-info">Modelo: openai/whisper-small</div>
                 </div>
                 <div class="feature-card">
                     <div class="feature-icon">🔊</div>
                     <h3 class="feature-title">Texto para Fala</h3>
-                    <p class="feature-description">Transforme texto em áudio natural com nossa tecnologia de síntese de voz.</p>
-                    <p class="model-info">Modelo: facebook/mms-tts-eng</p>
+                    <p class="feature-description">Transforme texto em áudio natural com vozes realistas. Ideal para criação de conteúdo acessível e narração.</p>
+                    <div class="model-info">Modelo: facebook/mms-tts-eng</div>
                 </div>
             </div>
         </div>
 
         <div class="category">
-            <h2 class="category-title">💭 Processamento de Linguagem Natural</h2>
+            <h2 class="category-title">📝 Processamento de Texto</h2>
             <div class="features">
                 <div class="feature-card">
                     <div class="feature-icon">🔄</div>
                     <h3 class="feature-title">Tradução Neural</h3>
-                    <p class="feature-description">Traduza textos entre português e inglês com alta qualidade e preservação de contexto.</p>
-                    <p class="model-info">Modelo: facebook/mbart-large-50</p>
+                    <p class="feature-description">Traduza textos entre português e inglês com alta fidelidade. Preserva contexto e nuances linguísticas.</p>
+                    <div class="model-info">Modelo: facebook/mbart-large-50</div>
                 </div>
                 <div class="feature-card">
-                    <div class="feature-icon">📝</div>
+                    <div class="feature-icon">📋</div>
                     <h3 class="feature-title">Sumarização</h3>
-                    <p class="feature-description">Gere resumos automáticos concisos mantendo as informações mais relevantes do texto.</p>
-                    <p class="model-info">Modelo: facebook/bart-large-cnn</p>
+                    <p class="feature-description">Gere resumos automáticos mantendo os pontos mais importantes do texto original. Ideal para documentos longos.</p>
+                    <div class="model-info">Modelo: facebook/bart-large-cnn</div>
                 </div>
                 <div class="feature-card">
                     <div class="feature-icon">❓</div>
                     <h3 class="feature-title">Perguntas e Respostas</h3>
-                    <p class="feature-description">Obtenha respostas precisas a partir de contextos fornecidos.</p>
-                    <p class="model-info">Modelo: deepset/roberta-base-squad2</p>
+                    <p class="feature-description">Sistema de QA que encontra respostas precisas em textos fornecidos. Perfeito para análise de documentos.</p>
+                    <div class="model-info">Modelo: deepset/roberta-base-squad2</div>
                 </div>
             </div>
         </div>
 
         <div class="category">
-            <h2 class="category-title">🤖 Análise Avançada</h2>
+            <h2 class="category-title">📊 Análise de Texto</h2>
             <div class="features">
                 <div class="feature-card">
                     <div class="feature-icon">😊</div>
                     <h3 class="feature-title">Análise de Sentimento</h3>
-                    <p class="feature-description">Identifique a polaridade e intensidade dos sentimentos expressos em textos.</p>
-                    <p class="model-info">Modelo: nlptown/bert-base-multilingual</p>
+                    <p class="feature-description">Identifique a polaridade emocional em textos com classificação em 5 níveis. Ideal para análise de feedback e reviews.</p>
+                    <div class="model-info">Modelo: nlptown/bert-base-multilingual</div>
                 </div>
                 <div class="feature-card">
                     <div class="feature-icon">🏷️</div>
                     <h3 class="feature-title">Classificação Zero-Shot</h3>
-                    <p class="feature-description">Classifique textos em categorias personalizadas sem necessidade de treino prévio.</p>
-                    <p class="model-info">Modelo: facebook/bart-large-mnli</p>
+                    <p class="feature-description">Classifique textos em categorias personalizadas sem treino prévio. Flexível e adaptável a diferentes contextos.</p>
+                    <div class="model-info">Modelo: facebook/bart-large-mnli</div>
                 </div>
                 <div class="feature-card">
                     <div class="feature-icon">🔍</div>
                     <h3 class="feature-title">Reconhecimento de Entidades</h3>
-                    <p class="feature-description">Identifique automaticamente nomes, organizações, locais e outras entidades em textos.</p>
-                    <p class="model-info">Modelo: dslim/bert-base-NER</p>
+                    <p class="feature-description">Identifique automaticamente nomes, organizações, locais e outras entidades em textos. Útil para análise de documentos.</p>
+                    <div class="model-info">Modelo: dslim/bert-base-NER</div>
                 </div>
             </div>
         </div>
 
         <div class="category">
-            <h2 class="category-title">🎨 Processamento de Imagem e Interação</h2>
+            <h2 class="category-title">🤖 IA Avançada</h2>
             <div class="features">
-                <div class="feature-card">
-                    <div class="feature-icon">🖼️</div>
-                    <h3 class="feature-title">Descrição de Imagens</h3>
-                    <p class="feature-description">Gere descrições detalhadas e naturais para imagens.</p>
-                    <p class="model-info">Modelo: Salesforce/blip-image-captioning</p>
-                </div>
                 <div class="feature-card">
                     <div class="feature-icon">💬</div>
                     <h3 class="feature-title">Chatbot Inteligente</h3>
                     <p class="feature-description">Interaja com um assistente virtual capaz de manter conversas naturais e auxiliar em diversas tarefas.</p>
-                    <p class="model-info">Modelo: facebook/opt-125m</p>
+                    <div class="model-info">Modelo: facebook/opt-125m</div>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">📸</div>
+                    <h3 class="feature-title">Descrição de Imagens</h3>
+                    <p class="feature-description">Gere descrições detalhadas e naturais para imagens. Perfeito para acessibilidade e catalogação de mídia.</p>
+                    <div class="model-info">Modelo: Salesforce/blip-image-captioning</div>
                 </div>
             </div>
         </div>
 
         <footer class="footer">
-            <p>Desenvolvido com tecnologia de ponta em Inteligência Artificial</p>
-            <p>Todos os modelos são executados localmente para maior privacidade e segurança</p>
+            <p><strong>Tecnologias Utilizadas</strong></p>
+            <div>
+                <span class="tech-badge">PyTorch</span>
+                <span class="tech-badge">Transformers</span>
+                <span class="tech-badge">Gradio</span>
+                <span class="tech-badge">Whisper</span>
+                <span class="tech-badge">BART</span>
+                <span class="tech-badge">RoBERTa</span>
+                <span class="tech-badge">BERT</span>
+            </div>
+            <p style="margin-top: 1rem;">Desenvolvido com tecnologia de ponta em Inteligência Artificial</p>
+            <p style="font-size: 0.875rem; color: #9CA3AF;">Todos os modelos são executados localmente para maior privacidade e segurança</p>
         </footer>
     </div>
 </body>