Spaces:

DHEIVER
/

IA-Toolbox-Hub

Sleeping

App Files Files Community

DHEIVER commited on Nov 23, 2024

Commit

08bd76c

verified ·

1 Parent(s): 4c7c392

Update index.html

Browse files

Files changed (1) hide show

index.html +72 -135

index.html CHANGED Viewed

@@ -2,210 +2,147 @@
 <html lang="pt-BR">
 <head>
     <meta charset="UTF-8">
-    <title>Central de IA - Bem-vindo</title>
     <style>
         .container {
             max-width: 1200px;
             margin: 2rem auto;
             padding: 0 1rem;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
         }
         .header {
             text-align: center;
-            margin-bottom: 3rem;
             padding: 2rem;
-            background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
-            border-radius: 1rem;
             color: white;
         }
-        .header h1 {
-            margin: 0;
-            font-size: 2.5rem;
-            font-weight: 700;
-        }
-        .header p {
-            margin: 1rem 0 0;
-            font-size: 1.1rem;
-            opacity: 0.9;
-        }
-        .category {
-            margin: 4rem 0;
-        }
-        .category-title {
-            font-size: 1.8rem;
-            color: #1f2937;
-            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(300px, 1fr));
-            gap: 2rem;
         }
         .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: 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;
-            font-weight: 600;
-            margin-bottom: 0.5rem;
-            color: #1f2937;
-        }
-        .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;
             margin-top: 3rem;
             padding: 2rem;
-            color: #6b7280;
-            border-top: 1px solid #e5e7eb;
-            background: #f9fafb;
-            border-radius: 0.75rem;
         }
         .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>
 <body>
     <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 áudio, texto e imagem</p>
         </header>
-        <div class="category">
-            <h2 class="category-title">🎤 Processamento de Áudio</h2>
-            <div class="features">
-                <div class="feature-card">
-                    <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. 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 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 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 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>
-                    <h3 class="feature-title">Sumarização</h3>
-                    <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">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 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 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 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. Ú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">🤖 IA Avançada</h2>
             <div class="features">
                 <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>
-                    <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><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>

 <html lang="pt-BR">
 <head>
     <meta charset="UTF-8">
+    <title>Central de IA</title>
     <style>
+        :root {
+            --primary: #6366f1;
+            --text: #1f2937;
+            --bg: #f9fafb;
+            --border: #e5e7eb;
+            --shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
+            --radius: 0.75rem;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: system-ui, -apple-system, sans-serif;
+        }
         .container {
             max-width: 1200px;
             margin: 2rem auto;
             padding: 0 1rem;
         }
         .header {
             text-align: center;
             padding: 2rem;
+            background: linear-gradient(135deg, var(--primary), #4f46e5);
+            border-radius: var(--radius);
             color: white;
+            margin-bottom: 3rem;
         }
+        .header h1 { font-size: 2.5rem; }
+        .header p { margin-top: 1rem; opacity: 0.9; }
         .features {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 1.5rem;
+            margin: 1.5rem 0;
         }
         .feature-card {
             padding: 1.5rem;
             background: white;
+            border-radius: var(--radius);
+            box-shadow: var(--shadow);
+            transition: transform 0.2s;
         }
         .feature-card:hover {
             transform: translateY(-4px);
         }
         .feature-icon {
             font-size: 2rem;
             padding: 0.5rem;
+            background: var(--bg);
+            border-radius: var(--radius);
+            display: inline-block;
         }
+        .category-title {
+            font-size: 1.8rem;
+            color: var(--text);
+            padding-bottom: 0.5rem;
+            border-bottom: 2px solid var(--border);
+            margin: 2rem 0;
         }
         .footer {
             text-align: center;
             margin-top: 3rem;
             padding: 2rem;
+            background: var(--bg);
+            border-radius: var(--radius);
         }
         .tech-badge {
             display: inline-block;
             padding: 0.25rem 0.75rem;
             margin: 0.25rem;
+            background: var(--border);
             border-radius: 9999px;
             font-size: 0.875rem;
         }
     </style>
 </head>
 <body>
     <div class="container">
         <header class="header">
+            <h1>Central de IA</h1>
+            <p>Ferramentas avançadas de IA para processamento de áudio, texto e imagem</p>
         </header>
+        <section>
+            <h2 class="category-title">🎤 Processamento</h2>
             <div class="features">
                 <div class="feature-card">
+                    <span class="feature-icon">🗣️</span>
+                    <h3>Transcrição & Fala</h3>
+                    <p>Conversão bidirecional entre áudio e texto com alta precisão.</p>
                 </div>
                 <div class="feature-card">
+                    <span class="feature-icon">🔄</span>
+                    <h3>Tradução & Resumo</h3>
+                    <p>Tradução neural e geração de resumos inteligentes.</p>
                 </div>
                 <div class="feature-card">
+                    <span class="feature-icon">🤖</span>
+                    <h3>IA Avançada</h3>
+                    <p>Chatbot inteligente e processamento de imagens.</p>
                 </div>
             </div>
+        </section>
+        <section>
+            <h2 class="category-title">📊 Análise</h2>
             <div class="features">
                 <div class="feature-card">
+                    <span class="feature-icon">😊</span>
+                    <h3>Análise de Sentimento</h3>
+                    <p>Classificação emocional multinível para textos.</p>
                 </div>
                 <div class="feature-card">
+                    <span class="feature-icon">🔍</span>
+                    <h3>Reconhecimento & Classificação</h3>
+                    <p>Identificação de entidades e classificação zero-shot.</p>
                 </div>
             </div>
+        </section>
         <footer class="footer">
             <div>
                 <span class="tech-badge">PyTorch</span>
                 <span class="tech-badge">Transformers</span>
                 <span class="tech-badge">Gradio</span>
                 <span class="tech-badge">BERT</span>
             </div>
+            <p style="margin-top:1rem">Processamento local para privacidade e segurança</p>
         </footer>
     </div>
 </body>