Hugging Face's logo

Spaces:
DHEIVER
/
IA-Toolbox-Hub
Sleeping

App Files Community
DHEIVER commited on
Commit
3a68dbf
·
verified ·
1 Parent(s): 73cee64

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +147 -167
index.html CHANGED
@@ -2,201 +2,181 @@
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>IA Toolbox Hub</title>
7
- <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.8.2/alpine.js"></script>
8
- <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script>
9
  <style>
10
- :root {
11
- --primary: #0ea5e9;
12
- --secondary: #6366f1;
13
- --background: #f8fafc;
14
- --card: #ffffff;
15
- --text: #0f172a;
16
- --text-light: #64748b;
17
- --border: #e2e8f0;
18
  }
19
-
20
- body {
21
- font-family: -apple-system, system-ui, sans-serif;
22
- background: var(--background);
23
- color: var(--text);
 
 
 
 
24
  margin: 0;
25
- line-height: 1.6;
 
26
  }
27
-
28
- .gradient-bg {
29
- background: linear-gradient(135deg, var(--primary), var(--secondary));
 
30
  }
31
-
32
- .card {
33
- background: var(--card);
34
- border-radius: 1rem;
35
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
36
  transition: transform 0.2s;
37
  }
38
-
39
- .card:hover {
40
  transform: translateY(-4px);
41
  }
42
-
43
- .icon-circle {
44
- width: 48px;
45
- height: 48px;
46
- border-radius: 50%;
47
- display: flex;
48
- align-items: center;
49
- justify-content: center;
50
- background: linear-gradient(135deg, var(--primary), var(--secondary));
51
- color: white;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
52
  }
53
  </style>
54
  </head>
55
  <body>
56
- <div class="min-h-screen">
57
- <!-- Hero Section -->
58
- <div class="gradient-bg text-white py-20">
59
- <div class="container mx-auto px-6 text-center">
60
- <h1 class="text-4xl md:text-6xl font-bold mb-6">IA Toolbox Hub</h1>
61
- <p class="text-xl md:text-2xl max-w-2xl mx-auto opacity-90">
62
- Soluções avançadas de IA para processamento de linguagem natural
63
- </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
64
  </div>
65
  </div>
66
 
67
- <!-- Main Content -->
68
- <div class="container mx-auto px-6 py-16">
69
- <!-- Services Grid -->
70
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
71
- <!-- Transcrição -->
72
- <div class="card p-6">
73
- <div class="icon-circle mb-4">
74
- <i class="fas fa-microphone text-xl"></i>
75
- </div>
76
- <h3 class="text-xl font-bold mb-3">Transcrição de Áudio</h3>
77
- <p class="text-text-light mb-4">
78
- Converta áudio em texto com alta precisão usando Whisper
79
- </p>
80
- <button class="bg-primary text-white px-4 py-2 rounded-lg w-full hover:bg-opacity-90 transition">
81
- Experimentar
82
- </button>
83
  </div>
84
-
85
- <!-- Tradução -->
86
- <div class="card p-6">
87
- <div class="icon-circle mb-4">
88
- <i class="fas fa-language text-xl"></i>
89
- </div>
90
- <h3 class="text-xl font-bold mb-3">Tradução Neural</h3>
91
- <p class="text-text-light mb-4">
92
- Traduções precisas entre português e inglês
93
- </p>
94
- <button class="bg-primary text-white px-4 py-2 rounded-lg w-full hover:bg-opacity-90 transition">
95
- Experimentar
96
- </button>
97
  </div>
98
-
99
- <!-- Resumo -->
100
- <div class="card p-6">
101
- <div class="icon-circle mb-4">
102
- <i class="fas fa-file-alt text-xl"></i>
103
- </div>
104
- <h3 class="text-xl font-bold mb-3">Resumo Automático</h3>
105
- <p class="text-text-light mb-4">
106
- Gere resumos concisos de textos longos
107
- </p>
108
- <button class="bg-primary text-white px-4 py-2 rounded-lg w-full hover:bg-opacity-90 transition">
109
- Experimentar
110
- </button>
111
  </div>
 
 
112
 
113
- <!-- Sentimento -->
114
- <div class="card p-6">
115
- <div class="icon-circle mb-4">
116
- <i class="fas fa-heart text-xl"></i>
117
- </div>
118
- <h3 class="text-xl font-bold mb-3">Análise de Sentimento</h3>
119
- <p class="text-text-light mb-4">
120
- Identifique o tom emocional em textos
121
- </p>
122
- <button class="bg-primary text-white px-4 py-2 rounded-lg w-full hover:bg-opacity-90 transition">
123
- Experimentar
124
- </button>
125
  </div>
126
-
127
- <!-- Chat -->
128
- <div class="card p-6">
129
- <div class="icon-circle mb-4">
130
- <i class="fas fa-robot text-xl"></i>
131
- </div>
132
- <h3 class="text-xl font-bold mb-3">Chat IA</h3>
133
- <p class="text-text-light mb-4">
134
- Interaja com um assistente virtual avançado
135
- </p>
136
- <button class="bg-primary text-white px-4 py-2 rounded-lg w-full hover:bg-opacity-90 transition">
137
- Experimentar
138
- </button>
139
  </div>
140
-
141
- <!-- Classificação -->
142
- <div class="card p-6">
143
- <div class="icon-circle mb-4">
144
- <i class="fas fa-tag text-xl"></i>
145
- </div>
146
- <h3 class="text-xl font-bold mb-3">Classificação Zero-Shot</h3>
147
- <p class="text-text-light mb-4">
148
- Classifique textos em categorias personalizadas
149
- </p>
150
- <button class="bg-primary text-white px-4 py-2 rounded-lg w-full hover:bg-opacity-90 transition">
151
- Experimentar
152
- </button>
153
  </div>
154
  </div>
 
155
 
156
- <!-- Features Section -->
157
- <div class="bg-white rounded-2xl p-8 shadow-lg mb-16">
158
- <h2 class="text-3xl font-bold mb-8 text-center">Recursos Avançados</h2>
159
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
160
- <div class="text-center">
161
- <div class="text-primary text-4xl mb-4">
162
- <i class="fas fa-bolt"></i>
163
- </div>
164
- <h3 class="font-bold mb-2">Processamento Rápido</h3>
165
- <p class="text-text-light">Resultados em segundos com GPU</p>
166
- </div>
167
- <div class="text-center">
168
- <div class="text-primary text-4xl mb-4">
169
- <i class="fas fa-shield-alt"></i>
170
- </div>
171
- <h3 class="font-bold mb-2">Segurança</h3>
172
- <p class="text-text-light">Seus dados estão protegidos</p>
173
- </div>
174
- <div class="text-center">
175
- <div class="text-primary text-4xl mb-4">
176
- <i class="fas fa-code"></i>
177
- </div>
178
- <h3 class="font-bold mb-2">API Disponível</h3>
179
- <p class="text-text-light">Integração simples via API</p>
180
- </div>
181
  </div>
182
- </div>
183
-
184
- <!-- Footer -->
185
- <footer class="text-center text-text-light">
186
- <p>© 2024 IA Toolbox Hub. Desenvolvido por Dheiver Santos</p>
187
- <div class="flex justify-center space-x-4 mt-4">
188
- <a href="#" class="text-text-light hover:text-primary transition">
189
- <i class="fab fa-github"></i>
190
- </a>
191
- <a href="#" class="text-text-light hover:text-primary transition">
192
- <i class="fab fa-linkedin"></i>
193
- </a>
194
- <a href="#" class="text-text-light hover:text-primary transition">
195
- <i class="fab fa-twitter"></i>
196
- </a>
197
  </div>
198
- </footer>
199
  </div>
 
 
 
 
 
200
  </div>
201
  </body>
202
  </html>
 
2
  <html lang="pt-BR">
3
  <head>
4
  <meta charset="UTF-8">
5
+ <title>Central de IA - Bem-vindo</title>
 
 
 
6
  <style>
7
+ .container {
8
+ max-width: 1200px;
9
+ margin: 2rem auto;
10
+ padding: 0 1rem;
11
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
 
 
 
12
  }
13
+ .header {
14
+ text-align: center;
15
+ margin-bottom: 3rem;
16
+ padding: 2rem;
17
+ background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
18
+ border-radius: 1rem;
19
+ color: white;
20
+ }
21
+ .header h1 {
22
  margin: 0;
23
+ font-size: 2.5rem;
24
+ font-weight: 700;
25
  }
26
+ .header p {
27
+ margin: 1rem 0 0;
28
+ font-size: 1.1rem;
29
+ opacity: 0.9;
30
  }
31
+ .category {
32
+ margin: 4rem 0;
33
+ }
34
+ .category-title {
35
+ font-size: 1.8rem;
36
+ color: #1f2937;
37
+ margin-bottom: 2rem;
38
+ padding-bottom: 0.5rem;
39
+ border-bottom: 2px solid #e5e7eb;
40
+ }
41
+ .features {
42
+ display: grid;
43
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
44
+ gap: 2rem;
45
+ margin: 2rem 0;
46
+ }
47
+ .feature-card {
48
+ padding: 1.5rem;
49
+ background: white;
50
+ border-radius: 0.75rem;
51
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
52
  transition: transform 0.2s;
53
  }
54
+ .feature-card:hover {
 
55
  transform: translateY(-4px);
56
  }
57
+ .feature-icon {
58
+ font-size: 2rem;
59
+ margin-bottom: 1rem;
60
+ }
61
+ .feature-title {
62
+ font-size: 1.25rem;
63
+ font-weight: 600;
64
+ margin-bottom: 0.5rem;
65
+ color: #1f2937;
66
+ }
67
+ .feature-description {
68
+ color: #6b7280;
69
+ line-height: 1.5;
70
+ }
71
+ .footer {
72
+ text-align: center;
73
+ margin-top: 3rem;
74
+ padding: 2rem;
75
+ color: #6b7280;
76
+ border-top: 1px solid #e5e7eb;
77
+ }
78
+ .model-info {
79
+ font-size: 0.9rem;
80
+ color: #9CA3AF;
81
+ margin-top: 0.5rem;
82
  }
83
  </style>
84
  </head>
85
  <body>
86
+ <div class="container">
87
+ <header class="header">
88
+ <h1>Central de Inteligência Artificial</h1>
89
+ <p>Uma plataforma completa com ferramentas avançadas de IA para processamento de texto, áudio e imagem</p>
90
+ </header>
91
+
92
+ <div class="category">
93
+ <h2 class="category-title">🎯 Processamento de Áudio e Fala</h2>
94
+ <div class="features">
95
+ <div class="feature-card">
96
+ <div class="feature-icon">🎙️</div>
97
+ <h3 class="feature-title">Transcrição de Áudio</h3>
98
+ <p class="feature-description">Converta áudio em texto com alta precisão usando o modelo Whisper da OpenAI.</p>
99
+ <p class="model-info">Modelo: openai/whisper-small</p>
100
+ </div>
101
+ <div class="feature-card">
102
+ <div class="feature-icon">🔊</div>
103
+ <h3 class="feature-title">Texto para Fala</h3>
104
+ <p class="feature-description">Transforme texto em áudio natural com nossa tecnologia de síntese de voz.</p>
105
+ <p class="model-info">Modelo: facebook/mms-tts-eng</p>
106
+ </div>
107
  </div>
108
  </div>
109
 
110
+ <div class="category">
111
+ <h2 class="category-title">💭 Processamento de Linguagem Natural</h2>
112
+ <div class="features">
113
+ <div class="feature-card">
114
+ <div class="feature-icon">🔄</div>
115
+ <h3 class="feature-title">Tradução Neural</h3>
116
+ <p class="feature-description">Traduza textos entre português e inglês com alta qualidade e preservação de contexto.</p>
117
+ <p class="model-info">Modelo: facebook/mbart-large-50</p>
 
 
 
 
 
 
 
 
118
  </div>
119
+ <div class="feature-card">
120
+ <div class="feature-icon">📝</div>
121
+ <h3 class="feature-title">Sumarização</h3>
122
+ <p class="feature-description">Gere resumos automáticos concisos mantendo as informações mais relevantes do texto.</p>
123
+ <p class="model-info">Modelo: facebook/bart-large-cnn</p>
 
 
 
 
 
 
 
 
124
  </div>
125
+ <div class="feature-card">
126
+ <div class="feature-icon">❓</div>
127
+ <h3 class="feature-title">Perguntas e Respostas</h3>
128
+ <p class="feature-description">Obtenha respostas precisas a partir de contextos fornecidos.</p>
129
+ <p class="model-info">Modelo: deepset/roberta-base-squad2</p>
 
 
 
 
 
 
 
 
130
  </div>
131
+ </div>
132
+ </div>
133
 
134
+ <div class="category">
135
+ <h2 class="category-title">🤖 Análise Avançada</h2>
136
+ <div class="features">
137
+ <div class="feature-card">
138
+ <div class="feature-icon">😊</div>
139
+ <h3 class="feature-title">Análise de Sentimento</h3>
140
+ <p class="feature-description">Identifique a polaridade e intensidade dos sentimentos expressos em textos.</p>
141
+ <p class="model-info">Modelo: nlptown/bert-base-multilingual</p>
 
 
 
 
142
  </div>
143
+ <div class="feature-card">
144
+ <div class="feature-icon">🏷️</div>
145
+ <h3 class="feature-title">Classificação Zero-Shot</h3>
146
+ <p class="feature-description">Classifique textos em categorias personalizadas sem necessidade de treino prévio.</p>
147
+ <p class="model-info">Modelo: facebook/bart-large-mnli</p>
 
 
 
 
 
 
 
 
148
  </div>
149
+ <div class="feature-card">
150
+ <div class="feature-icon">🔍</div>
151
+ <h3 class="feature-title">Reconhecimento de Entidades</h3>
152
+ <p class="feature-description">Identifique automaticamente nomes, organizações, locais e outras entidades em textos.</p>
153
+ <p class="model-info">Modelo: dslim/bert-base-NER</p>
 
 
 
 
 
 
 
 
154
  </div>
155
  </div>
156
+ </div>
157
 
158
+ <div class="category">
159
+ <h2 class="category-title">🎨 Processamento de Imagem e Interação</h2>
160
+ <div class="features">
161
+ <div class="feature-card">
162
+ <div class="feature-icon">🖼️</div>
163
+ <h3 class="feature-title">Descrição de Imagens</h3>
164
+ <p class="feature-description">Gere descrições detalhadas e naturais para imagens.</p>
165
+ <p class="model-info">Modelo: Salesforce/blip-image-captioning</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
166
  </div>
167
+ <div class="feature-card">
168
+ <div class="feature-icon">💬</div>
169
+ <h3 class="feature-title">Chatbot Inteligente</h3>
170
+ <p class="feature-description">Interaja com um assistente virtual capaz de manter conversas naturais e auxiliar em diversas tarefas.</p>
171
+ <p class="model-info">Modelo: facebook/opt-125m</p>
 
 
 
 
 
 
 
 
 
 
172
  </div>
173
+ </div>
174
  </div>
175
+
176
+ <footer class="footer">
177
+ <p>Desenvolvido com tecnologia de ponta em Inteligência Artificial</p>
178
+ <p>Todos os modelos são executados localmente para maior privacidade e segurança</p>
179
+ </footer>
180
  </div>
181
  </body>
182
  </html>