Update app.py

Substituí o gr.Markdown simples nas abas "Configurações" e "Sobre" por gr.HTML, usando CSS embutido para criar cards e listas que combinam com a paleta de cores

app.py

@@ -1441,59 +1441,86 @@ with gr.Blocks(theme=custom_theme, title="Gerador de Posts e Chatbot (Completo)"
                 resetar_analytics_btn_confirm = gr.Button("Confirmar Reset", visible=False, elem_id="reset_confirm_hidden_btn")
 
         with gr.TabItem("⚙️ Configurações", id=4):
-            gr.Markdown("### Configurações do Gerador")
-            gr.Markdown("**Modelo de Texto (LLM):** Llama 3.1 8B (Usado para Posts e Chatbot)")
-            gr.Markdown("**Modelos de Imagem:** FLUX.1-schnell, FLUX.1-dev, SDXL 1.0")
-            gr.Markdown("**Modelo de Tradução (PT -> EN):** Helsinki-NLP/opus-mt-pt-en")
-            gr.Markdown("**API Provider:** Hugging Face Inference")
-            gr.Markdown("**Database:** Google Firestore (via Firebase Admin)")
-            gr.Markdown("---")
-            gr.Markdown("#### Funcionalidades (Versão Completa):")
-            gr.Markdown("- **Gerador de Posts:** Cria posts completos com texto e imagem.")
-            gr.Markdown("- **Seleção de Formato:** Permite escolher o formato do texto (Instagram, Twitter, LinkedIn, WhatsApp).")
-            gr.Markdown("- **Controles Avançados:** Permite seleção de Estilo, Qualidade e Filtros para a imagem.")
-            gr.Markdown("- **Download de Post:** Baixa um .zip com .txt e .png.")
-            gr.Markdown("- **Chatbot Assistente:** Converse com a IA para ideias e perguntas rápidas.")
-            gr.Markdown("- **Histórico Persistente:** Salva os *posts gerados* no Firestore.")
-            gr.Markdown("- **Busca no Histórico:** Permite buscar e filtrar posts antigos.")
-            gr.Markdown("- **Favoritos:** Permite marcar posts como favoritos.")
-            gr.Markdown("- **Sistema de Cache:** Salva posts localmente para acelerar requisições futuras.")
-            gr.Markdown("- **Sistema de Analytics:** Rastreia o uso (total, por nicho, etc.) no Firestore.")
+            # MELHORIA: Substituído Markdown por HTML
+            gr.HTML(
+                """
+                <div style='padding: 16px; background-color: #f9fafb; border-radius: 8px;'>
+                    <h3 style='color: #1e3a8a; font-size: 1.25rem; font-weight: 600; margin-bottom: 12px;'>Configurações do Gerador</h3>
+                    <div style='background-color: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px;'>
+                        <p style='margin-bottom: 8px;'><strong>Modelo de Texto (LLM):</strong> Llama 3.1 8B (Usado para Posts e Chatbot)</p>
+                        <p style='margin-bottom: 8px;'><strong>Modelos de Imagem:</strong> FLUX.1-schnell, FLUX.1-dev, SDXL 1.0</p>
+                        <p style='margin-bottom: 8px;'><strong>Modelo de Tradução (PT -> EN):</strong> Helsinki-NLP/opus-mt-pt-en</p>
+                        <p style='margin-bottom: 8px;'><strong>API Provider:</strong> Hugging Face Inference</p>
+                        <p style='margin-bottom: 0;'><strong>Database:</strong> Google Firestore (via Firebase Admin)</p>
+                    </div>
+                    
+                    <h4 style='color: #1e3a8a; font-size: 1.1rem; font-weight: 600; margin-top: 16px; margin-bottom: 12px;'>Funcionalidades (Versão Completa):</h4>
+                    <ul style='list-style-type: disc; margin-left: 20px; background-color: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px 16px 16px 32px;'>
+                        <li style='margin-bottom: 6px;'><strong>Gerador de Posts:</strong> Cria posts completos com texto e imagem.</li>
+                        <li style='margin-bottom: 6px;'><strong>Seleção de Formato:</strong> Permite escolher o formato (Instagram, Twitter, LinkedIn, WhatsApp).</li>
+                        <li style='margin-bottom: 6px;'><strong>Controles Avançados:</strong> Permite seleção de Estilo, Qualidade e Filtros para a imagem.</li>
+                        <li style='margin-bottom: 6px;'><strong>Download de Post:</strong> Baixa um .zip com .txt e .png.</li>
+                        <li style='margin-bottom: 6px;'><strong>Chatbot Assistente:</strong> Converse com a IA para ideias e perguntas rápidas.</li>
+                        <li style='margin-bottom: 6px;'><strong>Histórico Persistente:</strong> Salva os posts gerados no Firestore.</li>
+                        <li style='margin-bottom: 6px;'><strong>Busca no Histórico:</strong> Permite buscar e filtrar posts antigos.</li>
+                        <li style='margin-bottom: 6px;'><strong>Favoritos:</strong> Permite marcar posts como favoritos.</li>
+                        <li style='margin-bottom: 6px;'><strong>Sistema de Cache:</strong> Salva posts localmente para acelerar requisições.</li>
+                        <li style='margin-bottom: 0;'><strong>Sistema de Analytics:</strong> Rastreia o uso (total, por nicho, etc.) no Firestore.</li>
+                    </ul>
+                </div>
+                """
+            )
 
         with gr.TabItem("ℹ️ Sobre", id=5):
-            gr.Markdown("""
-            ### Sobre Este Projeto
-
-            Este gerador foi desenvolvido no **Curso de Python com IA**.
-
-            **Tecnologias:**
-            - Hugging Face Spaces (hospedagem)
-            - Gradio (interface web)
-            - **Llama 3.1 8B (geração de texto e chatbot)**
-            - **FLUX.1 & SDXL (geração de imagens)**
-            - Opus-MT (tradução)
-            - **Firebase Firestore (Banco de Dados & Analytics)**
-            - **PIL (Python Imaging Library) (para composição de posts)**
-            - **Cache local (para performance)**
-            - **CSV & ZIP (para exportação)**
-
-            **Como funciona:**
-            1. **Gerar Post:** Você define o tema, nicho, estilo e **formato** do *texto*.
-            2. **Imagem (Opcional):** Você ativa, descreve a imagem e seleciona *Estilo*, *Qualidade* e *Filtro*.
-            3. O sistema otimiza o prompt, traduz para inglês e usa o sistema de *fallback* de modelos (baseado na *Qualidade*) para gerar a imagem.
-            4. **Refinar (Opcional):** Clique em "Refinar Post" para editar o texto gerado.
-            5. **Download:** Após a geração, você pode clicar em "Baixar Post (.zip)" para salvar um ZIP com o texto e a imagem.
-            6. **Chatbot:** Você pode conversar diretamente com a IA na aba 'Chatbot Assistente' para tirar dúvidas.
-            7. **Histórico & Analytics:** Os posts gerados são salvos no Firestore e as métricas de uso são atualizadas.
-            8. **Exportar:** Na aba "Histórico", você pode filtrar e exportar seus dados como CSV.
-
-            **Desenvolvido por:** Wilder Paz
-            """)
-
-    # Footer
-    gr.Markdown("""
-    ---
-    **Curso de Python com IA** | 🤖 Desenvolvido com Llama 3.1 & FLUX | ⚡ Hugging Face Spaces + Gradio + Firestore + Cache + Analytics
+            # MELHORIA: Substituído Markdown por HTML
+            gr.HTML(
+                """
+                <div style='padding: 16px; background-color: #f9fafb; border-radius: 8px;'>
+                    <h3 style='color: #1e3a8a; font-size: 1.25rem; font-weight: 600; margin-bottom: 12px;'>Sobre Este Projeto</h3>
+                    <div style='background-color: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px;'>
+                        <p style='margin-bottom: 12px;'>Este gerador foi desenvolvido no <strong>Curso de Python com IA</strong>.</p>
+                        
+                        <h4 style='color: #1e3a8a; font-size: 1.1rem; font-weight: 600; margin-top: 12px; margin-bottom: 8px;'>Tecnologias:</h4>
+                        <ul style='list-style-type: disc; margin-left: 20px; padding-left: 16px;'>
+                            <li style='margin-bottom: 4px;'>Hugging Face Spaces (hospedagem)</li>
+                            <li style='margin-bottom: 4px;'>Gradio (interface web)</li>
+                            <li style='margin-bottom: 4px;'><strong>Llama 3.1 8B</strong> (geração de texto e chatbot)</li>
+                            <li style='margin-bottom: 4px;'><strong>FLUX.1 & SDXL</strong> (geração de imagens)</li>
+                            <li style='margin-bottom: 4px;'>Opus-MT (tradução)</li>
+                            <li style='margin-bottom: 4px;'><strong>Firebase Firestore</strong> (Banco de Dados & Analytics)</li>
+                            <li style='margin-bottom: 4px;'><strong>PIL</strong> (composição de posts)</li>
+                            <li style='margin-bottom: 4px;'>Cache local (para performance)</li>
+                            <li style='margin-bottom: 4px;'>CSV & ZIP (para exportação)</li>
+                        </ul>
+
+                        <h4 style='color: #1e3a8a; font-size: 1.1rem; font-weight: 600; margin-top: 16px; margin-bottom: 8px;'>Como funciona:</h4>
+                        <ol style='list-style-type: decimal; margin-left: 20px; padding-left: 16px;'>
+                            <li style='margin-bottom: 4px;'><strong>Gerar Post:</strong> Você define o tema, nicho, estilo e formato.</li>
+                            <li style='margin-bottom: 4px;'><strong>Imagem (Opcional):</strong> Você ativa e seleciona Estilo, Qualidade e Filtro.</li>
+                            <li style='margin-bottom: 4px;'><strong>Refinar (Opcional):</strong> Clique em "Refinar Post" para editar o texto gerado.</li>
+                            <li style='margin-bottom: 4px;'><strong>Download:</strong> Baixe um .zip com o texto e a imagem.</li>
+                            <li style='margin-bottom: 4px;'><strong>Histórico & Analytics:</strong> Os posts são salvos no Firestore.</li>
+                            <li style='margin-bottom: 4px;'><strong>Exportar:</strong> Na aba "Histórico", exporte seus dados como CSV.</li>
+                        </ol>
+
+                        <p style='margin-top: 16px; font-weight: 600;'><strong>Desenvolvido por:</strong> Wilder Paz</p>
+                    </div>
+                </div>
+                """
+            )
+
+    # MELHORIA: Rodapé atualizado para HTML
+    gr.HTML("""
+    <div>
+        <div style='padding: 12px; background-color: #eef2ff; border: 1px solid #dbeafe; border-radius: 8px; text-align: center; margin-top: 16px;'>
+            <p style='font-weight: 600; color: #3730a3; margin: 0;'>
+                Se você gosta dos nossos resultados de Geração de Posts e Chatbot, por favor, dê-nos uma ⭐ no nosso Space!
+            </p>
+        </div>
+        <p style='text-align: center; font-size: 0.9rem; color: #6b7280; margin-top: 12px;'>
+            <strong>Curso de Python com IA</strong> | 🤖 Desenvolvido com Llama 3.1 & FLUX | ⚡ Hugging Face Spaces + Gradio + Firestore + Cache + Analytics
+        </p>
+    </div>
     """)
 
     # ============================================