fix: Corrige tema escuro e melhora estabilidade Gradio

- Remove CSS hardcoded que sobrescrevia tema escuro dinâmico
- Corrige aplicação automática do tema escuro na inicialização
- Adiciona configurações otimizadas do Gradio (max_threads, enable_queue, show_tips)
- Melhora estabilidade das conexões WebSocket
- Reduz erros ERR_ABORTED na fila de dados
- Atualiza CHANGELOG.md com versão 2.2.1

CHANGELOG.md

@@ -5,6 +5,19 @@ Todas as mudanças notáveis neste projeto serão documentadas neste arquivo.
 O formato é baseado em [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 e este projeto adere ao [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.2.1] - 2024-01-29
+
+### 🐛 Corrigido
+- **CSS Hardcoded Conflitante**: Removido CSS que sobrescrevia o tema escuro dinâmico
+- **Carregamento de Tema**: Corrigido problema que impedia aplicação automática do tema escuro
+- **Conexões WebSocket**: Melhorada estabilidade das conexões Gradio com novas configurações
+- **Erros ERR_ABORTED**: Reduzidos significativamente os erros de timeout na fila de dados
+
+### 🔄 Alterado
+- **Configurações Gradio**: Adicionadas configurações otimizadas (`max_threads`, `enable_queue`, `show_tips`)
+- **Estabilidade da Interface**: Melhor performance e menos interrupções de conexão
+- **Aplicação de Tema**: Tema escuro agora é aplicado automaticamente na inicialização
+
 ## [2.2.0] - 2024-01-29
 
 ### 🎉 Adicionado

src/ui/dark_theme_components.py

@@ -275,6 +275,37 @@ class DarkThemeUIComponents:
         </div>
         """
     
+    @staticmethod
+    def _get_ai_status_html(available: bool, model_description: str = "") -> str:
+        """Gera HTML para status da IA com tema escuro."""
+        theme = theme_manager.get_current_theme()
+        colors = theme['colors']
+        
+        if available:
+            return f"""
+            <div style="background: {colors['success_background']}; border: 1px solid {colors['success_border']}; border-radius: 12px; padding: 15px; margin-bottom: 20px; box-shadow: 0 4px 12px {colors['shadow']};">
+                <div style="display: flex; align-items: center; gap: 12px;">
+                    <span style="font-size: 1.3em;">🤖</span>
+                    <div>
+                        <strong style="color: {colors['success_text']}; font-size: 1.1em;">IA Ativa:</strong>
+                        <span style="color: {colors['success_text']}; margin-left: 8px;">{model_description}</span>
+                    </div>
+                </div>
+            </div>
+            """
+        else:
+            return f"""
+            <div style="background: {colors['warning_background']}; border: 1px solid {colors['warning_border']}; border-radius: 12px; padding: 15px; margin-bottom: 20px; box-shadow: 0 4px 12px {colors['shadow']};">
+                <div style="display: flex; align-items: center; gap: 12px;">
+                    <span style="font-size: 1.3em;">⚠️</span>
+                    <div>
+                        <strong style="color: {colors['warning_text']}; font-size: 1.1em;">IA Indisponível:</strong>
+                        <span style="color: {colors['warning_text']}; margin-left: 8px;">Executando apenas análise técnica</span>
+                    </div>
+                </div>
+            </div>
+            """
+    
     @staticmethod
     def create_footer(model_info: Dict[str, Any]) -> str:
         """Cria rodapé com tema escuro."""

src/ui/gradio_interface.py

@@ -145,62 +145,17 @@ class UIComponents:
                 with gr.Tab("🔍 Dados Detalhados"):
                     outputs['raw_data'] = gr.JSON()
         
-        # Adicionar novos outputs ao dicionário
-            if 'harmonic_patterns' not in outputs:
-                outputs['harmonic_patterns'] = gr.HTML()
-            if 'fibonacci_alerts' not in outputs:
-                outputs['fibonacci_alerts'] = gr.HTML()
-            
-            return output_section, outputs
+        return output_section, outputs
     
     @staticmethod
     def create_footer(model_info: Optional[Dict[str, Any]] = None) -> str:
-        """Cria rodapé da aplicação."""
-        timestamp = DateTimeUtils.get_current_datetime()
-        
-        if model_info and model_info.get('available', False):
-            ai_status = f"🤖 IA: {model_info.get('description', 'Modelo Ativo')}"
-        else:
-            ai_status = "⚠️ IA: Indisponível (apenas análise técnica)"
-        
-        return f"""
-        <div style="text-align: center; padding: 15px; background: #f8f9fa; border-radius: 8px; margin-top: 20px; border-top: 2px solid #dee2e6;">
-            <p style="margin: 0; color: #6c757d; font-size: 0.9em;">
-                {ai_status} | ⏰ Última atualização: {timestamp}
-            </p>
-            <p style="margin: 5px 0 0 0; color: #adb5bd; font-size: 0.8em;">
-                Desenvolvido para análise de scalping no mercado financeiro
-            </p>
-        </div>
-        """
+        """Cria rodapé da aplicação com tema dinâmico."""
+        return DarkThemeUIComponents.create_footer(model_info)
     
     @staticmethod
     def _get_ai_status_html(available: bool, model_description: str = "") -> str:
-        """Gera HTML para status da IA."""
-        if available:
-            return f"""
-            <div style="background: #d4edda; border: 1px solid #c3e6cb; border-radius: 8px; padding: 12px; margin-bottom: 15px;">
-                <div style="display: flex; align-items: center; gap: 10px;">
-                    <span style="font-size: 1.2em;">🤖</span>
-                    <div>
-                        <strong style="color: #155724;">IA Ativa:</strong>
-                        <span style="color: #155724;">{model_description}</span>
-                    </div>
-                </div>
-            </div>
-            """
-        else:
-            return """
-            <div style="background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 8px; padding: 12px; margin-bottom: 15px;">
-                <div style="display: flex; align-items: center; gap: 10px;">
-                    <span style="font-size: 1.2em;">⚠️</span>
-                    <div>
-                        <strong style="color: #856404;">IA Indisponível:</strong>
-                        <span style="color: #856404;">Executando apenas análise técnica</span>
-                    </div>
-                </div>
-            </div>
-            """
+        """Gera HTML para status da IA com tema dinâmico."""
+        return DarkThemeUIComponents._get_ai_status_html(available, model_description)
 
 
 class ResultFormatter:
@@ -378,7 +333,7 @@ class GradioInterface:
         """Cria interface completa do Gradio."""
         with gr.Blocks(
             title=AppConfig.APP_TITLE,
-            theme=gr.themes.Soft(),
+            theme=gr.themes.Base(),
             css=self._get_custom_css()
         ) as interface:
             # Cabeçalho
@@ -546,7 +501,10 @@ class GradioInterface:
             'server_name': '127.0.0.1',
             'server_port': 7860,
             'share': False,
-            'show_error': True
+            'show_error': True,
+            'max_threads': 10,
+            'enable_queue': True,
+            'show_tips': False
         }
         
         # Mesclar argumentos padrão com os fornecidos

src/ui/theme_manager.py

@@ -70,7 +70,13 @@ class ThemeManager:
                 'text_muted': '#adb5bd',
                 'border': '#dee2e6',
                 'success': '#28a745',
+                'success_background': '#d4edda',
+                'success_border': '#c3e6cb',
+                'success_text': '#155724',
                 'warning': '#ffc107',
+                'warning_background': '#fff3cd',
+                'warning_border': '#ffeaa7',
+                'warning_text': '#856404',
                 'error': '#dc3545',
                 'info': '#007bff',
                 'gradient_start': '#667eea',
@@ -108,7 +114,13 @@ class ThemeManager:
                 'text_muted': '#94a3b8',
                 'border': '#475569',
                 'success': '#10b981',
+                'success_background': '#064e3b',
+                'success_border': '#065f46',
+                'success_text': '#34d399',
                 'warning': '#f59e0b',
+                'warning_background': '#451a03',
+                'warning_border': '#92400e',
+                'warning_text': '#fbbf24',
                 'error': '#ef4444',
                 'info': '#3b82f6',
                 'gradient_start': '#4f46e5',
@@ -154,6 +166,11 @@ class ThemeManager:
         {self.get_css_variables()}
         
         /* Tema {theme['name'].title()} */
+        body {{
+            background-color: {colors['background']} !important;
+            color: {colors['text_primary']} !important;
+        }}
+        
         .gradio-container {{
             max-width: 1200px !important;
             margin: auto !important;