refactor(css): extract inline styles to css classes and update README with technical details

README.md

@@ -7,31 +7,40 @@ sdk: docker
 app_port: 7860
 license: mit
 pinned: true
-short_description: Uma aplicação web de recomendação de livros com IA
+short_description: Assistente literário inteligente com Python, Flask e Google Gemini.
 ---
+
 # 📚 BookMatch AI
 
-Uma aplicação web de recomendação de livros com IA, desenvolvida com Python e Flask, integrada ao modelo Gemini da Google. 
+**Seu Assistente Literário Inteligente.**
+
+O **BookMatch AI** é uma aplicação web interativa que utiliza Inteligência Artificial Generativa para oferecer recomendações de livros personalizadas e conversas profundas sobre literatura. Desenvolvido como um projeto de portfólio Full-Stack, ele demonstra a integração prática entre **Python**, **Flask** e a **Google Gemini API**.
 
-Usuários criam um perfil com seus gêneros favoritos, tiram dúvidas e se informam sobre qualquer assunto no universo literário e recebem sugestões personalizadas de leitura. Tudo isso via chat com IA.
+👉 **[Teste a aplicação ao vivo no Hugging Face Spaces](https://huggingface.co/spaces/vioott/BookMatchAI-Python-GeminiAPI)**
 
-👉 [Teste agora no Hugging Face Spaces](https://huggingface.co/spaces/vioott/BookMatchAI-Python-GeminiAPI)
+---
 
-## 🔧 Tecnologias utilizadas
+## ✨ Funcionalidades Principais
 
-- 🐍 Python + Flask (back-end web)
-- 🌐 HTML + CSS (front-end responsivo)
-- 🤖 Google Gemini 1.5 Flash (modelo de IA)
-- 🧠 Sistema de logging para histórico de interações
+*   **🤖 Seleção Dinâmica de IA:** O sistema consulta a API do Google em tempo real para listar e utilizar os modelos Gemini mais recentes (como *Gemini 2.5 Flash*, *2.0 Flash*, etc.), adaptando-se automaticamente a atualizações da Google.
+*   **👤 Perfil Personalizado:** Criação de perfil com nome e preferências de gênero literário (Terror, Romance, Ficção, etc.) que influenciam a personalidade e as respostas da IA.
+*   **💬 Chat Interativo:** Interface de chat moderna e responsiva para conversar sobre livros, autores e histórias.
+*   **⚡ Performance Otimizada:** Implementação de **Cache (TTL)** para evitar chamadas redundantes à API e garantir carregamento rápido da lista de modelos.
+*   **🛡️ Logs:** Tratamento avançado de erros (incluindo esgotamento de cota da API) e sistema de logs persistentes que mantém o histórico de conversas e preferências mesmo após reinício do servidor.
+*   **🎨 UI/UX Profissional:** Modal de boas-vindas informativo, feedback visual de carregamento ("Aguarde..."), validação de formulários e design responsivo.
 
-## ✨ Funcionalidades
+## 🛠️ Stack Tecnológica
 
-- Criação e edição de perfis de usuário com preferências literárias
-- Interface web responsiva para chat com IA
-- Respostas personalizadas com base nas preferências salvas
-- Log de interações com histórico e recomendações da IA
+*   **Backend:** Python 3.10+, Flask (Microframework Web).
+*   **Inteligência Artificial:** Google Gemini API (`google-generativeai`).
+*   **Frontend:** HTML5, CSS3 (com design system próprio e responsivo), JavaScript.
+*   **Infraestrutura:** Docker (Containerização), Gunicorn (Servidor WSGI), Hugging Face Spaces (Hospedagem).
+*   **Bibliotecas Chave:**
+    *   `google-generativeai`: Integração com LLMs.
+    *   `cachetools`: Cache em memória para otimização.
+    *   `python-dotenv`: Gerenciamento seguro de variáveis de ambiente.
 
-## 🚀 Como executar localmente
+## 🚀 Como Executar Localmente
 
 1. Clone o repositório e entre na pasta do projeto.
 ```
@@ -57,16 +66,25 @@ pip install -r requirements.txt
    GOOGLE_API_KEY=sua-chave-aqui
    ```
 
-5. Execute o app:
+5.  **Execute a aplicação:**
+    ```
+    python app.py
+    ```
+    Acesse `http://localhost:5000` no seu navegador.
 
-   ```
-   python app.py
-   ```
+## 📂 Estrutura do Projeto
+
+*   `app.py`: Ponto de entrada da aplicação Flask.
+*   `routes/`: Módulos de rotas (Home, Chat, Perfil) seguindo padrão MVC.
+*   `services/`: Lógica de negócio e integração com a IA (`genai_service.py`).
+*   `templates/`: Arquivos HTML Jinja2.
+*   `static/`: Arquivos CSS e assets.
+*   `logs.py`: Sistema customizado de persistência de dados em arquivo.
 
 ## 🧠 Sobre o projeto
 
-Este projeto foi criado como solução para o exercício "Implementando um 'If Mágico' em uma Aplicação de E-commerce", do curso "IA para Programação com Python", da [Trybe](https://www.betrybe.com/), para explorar aplicações de IA generativa na recomendação literária, com foco em UX, personalização e uso real de modelos LLM. 
+Este projeto foi criado como solução para o exercício "Implementando um 'If Mágico' em uma Aplicação de E-commerce", do curso "IA para Programação com Python", da [Trybe](https://www.betrybe.com/), para explorar aplicações de IA generativa na recomendação literária, com foco em UX, personalização e uso real de modelos LLM.
 
 ---
 
-Desenvolvido por Vania Ioott – Full-Stack Developer & AI Enthusiast.
+Desenvolvido por **Vania Ioott** – Full-Stack Developer & AI Enthusiast.

static/style.css

@@ -2,7 +2,7 @@ body {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   background-color: #f0f2f5;
   display: block;
-  padding-top: 60px; /* Aumentado levemente para acomodar a navbar fixa */
+  padding-top: 60px;
   min-height: 100vh;
   margin: 0 auto;
 }
@@ -87,7 +87,7 @@ button:hover {
   .chat-container {
     flex-direction: column;
   }
-  
+
   .chat-box, .response-box {
     width: 70%;
     align-self: center;
@@ -129,7 +129,7 @@ button:hover {
 
 /* --- Navigation Bar --- */
 .navbar {
-  background-color: #28a745; /* Verde igual aos botões */
+  background-color: #28a745;
   overflow: hidden;
   position: fixed;
   top: 0;
@@ -153,7 +153,7 @@ button:hover {
 }
 
 .navbar a:hover {
-  background-color: #218838; /* Verde um pouco mais escuro no hover */
+  background-color: #218838;
   color: white;
 }
 
@@ -164,31 +164,31 @@ button:hover {
 
 /* --- Welcome Modal --- */
 .modal {
-  display: none; 
-  position: fixed; 
-  z-index: 2000; 
+  display: none;
+  position: fixed;
+  z-index: 2000;
   left: 0;
   top: 0;
-  width: 100%; 
-  height: 100%; 
-  overflow: auto; 
-  background-color: rgba(0,0,0,0.7); /* Fundo um pouco mais escuro */
-  backdrop-filter: blur(2px); /* Efeito de desfoque no fundo */
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(0,0,0,0.7);
+  backdrop-filter: blur(2px);
   animation: fadeIn 0.3s;
 }
 
 .modal-content {
   background-color: #fff;
-  margin: 8% auto; 
-  padding: 40px; /* Mais padding */
+  margin: 8% auto;
+  padding: 40px;
   border: none;
-  width: 85%; 
+  width: 85%;
   max-width: 650px;
-  border-radius: 16px; /* Cantos mais arredondados */
+  border-radius: 16px;
   box-shadow: 0 10px 30px rgba(0,0,0,0.3);
   text-align: center;
   position: relative;
-  animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* Animação mais fluida */
+  animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);
   font-family: 'Segoe UI', sans-serif;
 }
 
@@ -269,7 +269,7 @@ button:hover {
 }
 
 @keyframes fadeIn {
-  from {opacity: 0} 
+  from {opacity: 0}
   to {opacity: 1}
 }
 
@@ -295,10 +295,44 @@ button:hover {
   cursor: pointer;
   z-index: 1900;
   transition: transform 0.3s, background-color 0.3s;
-  display: none; /* Começa escondido, só aparece quando fecha o modal */
+  display: none;
 }
 
 .info-fab:hover {
   background-color: #218838;
   transform: scale(1.1);
+}
+
+.modal-text-content {
+    font-size: 1em;
+    text-align: left;
+    margin-bottom: 15px;
+}
+
+.error-msg {
+    color: red;
+    display: none;
+    font-size: 0.9em;
+    margin-top: 5px;
+}
+
+.model-selector {
+    margin-bottom: 15px;
+}
+
+.model-label {
+    font-size: 0.9em;
+    color: #555;
+}
+
+.model-select {
+    padding: 5px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    max-width: 100%;
+}
+
+.nav-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
 }

templates/chat.html

@@ -16,9 +16,9 @@
             <form method="post">
                 <h1>Chat com a IA</h1>
                 
-                <div class="model-selector" style="margin-bottom: 15px;">
-                    <label for="model_name" style="font-size: 0.9em; color: #555;">Escolha o Modelo:</label>
-                    <select name="model_name" id="model_name" style="padding: 5px; border-radius: 5px; border: 1px solid #ccc; max-width: 100%;">
+                <div class="model-selector">
+                    <label for="model_name" class="model-label">Escolha o Modelo:</label>
+                    <select name="model_name" id="model_name" class="model-select">
                         {% for model in models %}
                             <option value="{{ model.id }}" {% if model.id == current_model %}selected{% endif %}>
                                 {{ model.name }}

templates/start.html

@@ -21,7 +21,7 @@
         <div class="modal-content">
             <span class="close-btn" onclick="closeModal()">&times;</span>
             <h2 class="modal-title">BookMatchAI: Seu Assistente Literário Inteligente 📚</h2>
-            <p class="modal-desc" style="font-size: 1em; text-align: left; margin-bottom: 15px;">
+            <p class="modal-desc modal-text-content">
                 <strong>O que este projeto faz:</strong><br>
                 Este é um assistente conversacional capaz de entender o perfil do usuário (gêneros favoritos e nome) para fazer recomendações de livros personalizadas e discutir literatura em linguagem natural.
             </p>
@@ -66,7 +66,7 @@
                     </label>
                 {% endfor %}
             </div>
-            <p id="genre-error" style="color: red; display: none; font-size: 0.9em; margin-top: 5px;">⚠️ Selecione pelo menos um gênero.</p>
+            <p id="genre-error" class="error-msg">⚠️ Selecione pelo menos um gênero.</p>
     
             <br>
             <button type="submit">Começar</button>