Update app.py

app.py

@@ -5,7 +5,6 @@ import asyncio
 import html
 
 from dataclasses import dataclass
-from datetime import datetime
 from typing import Any, Optional, Tuple
 
 import gradio as gr
@@ -44,14 +43,10 @@ def setup_logger() -> logging.Logger:
     cfg = Config()
     log_level = getattr(logging, cfg.LOG_LEVEL.upper(), logging.INFO)
 
-    # Avoid adding duplicate handlers if called multiple times
     logger = logging.getLogger("gemma_saas")
     if not logger.handlers:
         logger.setLevel(log_level)
-
-        formatter = logging.Formatter(
-            "%(asctime)s - %(name)s - %(levelname)s - %(message)s"
-        )
+        formatter = logging.Formatter("%(asctime)s - %(name)s - %(levelname)s - %(message)s")
 
         file_handler = logging.FileHandler("gemma_saas.log")
         file_handler.setFormatter(formatter)
@@ -77,25 +72,22 @@ class ModelManager:
 
     async def initialize(self) -> None:
         if not self.config.HF_TOKEN:
-            logger.error(
-                "Token do Hugging Face não encontrado. O carregamento do modelo irá falhar."
-            )
+            logger.error("Token do Hugging Face não encontrado. O carregamento do modelo irá falhar.")
             return
 
         try:
             logger.info(f"A carregar o modelo: {self.config.MODEL_NAME}...")
+            os.environ.setdefault("HF_TOKEN", self.config.HF_TOKEN)
 
             loop = asyncio.get_event_loop()
 
             def load_pipeline():
-                # Nota: dependendo da versão do transformers/huggingface-hub, 
-                # o parâmetro pode ser use_auth_token ou token. Ajuste se necessário.
                 return pipeline(
                     "text-generation",
                     model=self.config.MODEL_NAME,
-                    model_kwargs={"torch_dtype": "auto"},
+                    token=self.config.HF_TOKEN,
+                    torch_dtype="auto",
                     device_map="auto",
-                    use_auth_token=self.config.HF_TOKEN,
                 )
 
             self.pipeline = await loop.run_in_executor(None, load_pipeline)
@@ -120,15 +112,13 @@ class ModelManager:
             messages = [{"role": "user", "content": request.prompt.strip()}]
 
             def do_generation():
-                # A pipeline que usava apply_chat_template é específica de alguns tokenizers;
-                # mantemos o uso mas com fallback simples se não existir.
                 tokenizer = getattr(self.pipeline, "tokenizer", None)
+
                 if tokenizer and hasattr(tokenizer, "apply_chat_template"):
                     prompt_text = tokenizer.apply_chat_template(
                         messages, tokenize=False, add_generation_prompt=True
                     )
                 else:
-                    # Fallback simples
                     prompt_text = request.prompt.strip()
 
                 outputs = self.pipeline(
@@ -141,7 +131,6 @@ class ModelManager:
                 )
 
                 generated_text = outputs[0].get("generated_text", "")
-                # Se usamos prompt_text, retirar a parte inicial que corresponde ao prompt
                 if generated_text.startswith(prompt_text):
                     generated_text = generated_text[len(prompt_text) :]
 
@@ -178,9 +167,7 @@ class GemmaService:
             request = GenerationRequest(prompt=prompt, **kwargs)
             success, text, tokens_used = await self.model_manager.generate(request)
             if success:
-                return APIResponse(
-                    success=True, data={"generated_text": text, "tokens_used": tokens_used}
-                )
+                return APIResponse(success=True, data={"generated_text": text, "tokens_used": tokens_used})
             else:
                 return APIResponse(success=False, error=text)
         except Exception as e:
@@ -194,7 +181,11 @@ class GradioInterface:
         self.service = service
 
     def create_custom_css(self) -> str:
+        # Importa Material Icons e adiciona ícones via pseudo-elementos nos botões
         return """
+        /* importar Material Icons */
+        @import url('https://fonts.googleapis.com/css2?family=Material+Icons&display=swap');
+
         :root {
             --dark-bg: #0a0a0a; --panel-bg: #1a1a1a; --border-color: #333;
             --text-color: #f0f0f0; --text-light: #a0a0a0; --accent-orange: #FF4500;
@@ -208,18 +199,76 @@ class GradioInterface:
         #output_display p { margin-bottom: 1rem; line-height: 1.7; }
         #input_area { margin-top: 1rem; }
         #api_key_input textarea, #prompt_input textarea { background-color: #2C2C2C !important; border-color: var(--border-color) !important; color: var(--text-color) !important; border-radius: 12px !important; }
-        #send_button { background: var(--accent-orange); color: white; border: none; border-radius: 12px !important; transition: background-color 0.3s ease; }
+        #send_button { background: var(--accent-orange); color: white; border: none; border-radius: 12px !important; transition: background-color 0.3s ease; position: relative; padding-left: 3rem; }
         #send_button:hover { background-color: var(--accent-orange-hover); }
         #generate_button {
             background: linear-gradient(135deg, var(--accent-orange), var(--accent-orange-hover)); color: white !important;
             font-size: 1.1rem !important; font-weight: bold !important; border: none; border-radius: 12px !important;
-            padding: 1rem !important; box-shadow: 0 4px 15px rgba(255, 69, 0, 0.4); transition: all 0.3s ease;
+            padding: 1rem 1.25rem !important; box-shadow: 0 4px 15px rgba(255, 69, 0, 0.4); transition: all 0.3s ease; position: relative; padding-left: 3rem;
         }
         #generate_button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 69, 0, 0.6); }
         h2, h3 { color: white; border-bottom: 1px solid var(--border-color); padding-bottom: 0.75rem; margin-bottom: 1.5rem; font-weight: 600; }
         .code-snippet { background-color: var(--code-bg); color: #abb2bf; padding: 1.5rem; border-radius: 12px; font-family: 'Courier New', monospace; white-space: pre-wrap; word-wrap: break-word; border: 1px solid var(--border-color); }
         .code-snippet .keyword { color: #c678dd; } .code-snippet .string { color: #98c379; } .code-snippet .number { color: #d19a66; }
         .gr-slider { color: var(--text-light); }
+
+        /* estilo para usar as Material Icons como ligatures */
+        .material-icon {
+            font-family: 'Material Icons', sans-serif;
+            font-weight: normal;
+            font-style: normal;
+            font-size: 20px;
+            line-height: 1;
+            letter-spacing: normal;
+            text-transform: none;
+            display: inline-block;
+            white-space: nowrap;
+            word-wrap: normal;
+            direction: ltr;
+            -webkit-font-feature-settings: 'liga';
+            -webkit-font-smoothing: antialiased;
+        }
+
+        /* adicionar ícones antes dos botões (usando ligatures) */
+        #send_button::before {
+            content: "send"; /* ligature do ícone */
+            font-family: 'Material Icons', sans-serif;
+            position: absolute;
+            left: 12px;
+            top: 50%;
+            transform: translateY(-50%);
+            font-size: 18px;
+            line-height: 1;
+            opacity: 0.95;
+        }
+
+        #generate_button::before {
+            content: "auto_awesome";
+            font-family: 'Material Icons', sans-serif;
+            position: absolute;
+            left: 12px;
+            top: 50%;
+            transform: translateY(-50%);
+            font-size: 18px;
+            line-height: 1;
+            opacity: 0.95;
+        }
+
+        /* ícone para o botão de gerar chave (se usar outro botão, adapte o id) */
+        #generate_button[aria-label], #generate_button[title] { /* fallback */
+            padding-left: 3rem;
+        }
+
+        /* ícone ao lado do exemplo de código (vpn_key) */
+        #right_panel .code-snippet::before {
+            content: "vpn_key";
+            font-family: 'Material Icons', sans-serif;
+            display: inline-block;
+            margin-right: 0.5rem;
+            vertical-align: middle;
+            font-size: 18px;
+            opacity: 0.9;
+        }
         """
 
     async def create_interface(self) -> gr.Blocks:
@@ -253,32 +302,21 @@ class GradioInterface:
                         key_button = gr.Button("✨ Gerar Nova Chave", elem_id="generate_button")
 
                         with gr.Accordion("Parâmetros Avançados", open=False):
-                            temp_slider = gr.Slider(
-                                minimum=0.1, maximum=2.0, value=0.7, step=0.1, label="Temperatura"
-                            )
-                            max_tokens_slider = gr.Slider(
-                                minimum=64, maximum=self.service.config.MAX_TOKENS, value=512, step=64, label="Max Tokens"
-                            )
-                            top_k_slider = gr.Slider(
-                                minimum=1, maximum=100, value=50, step=1, label="Top-K"
-                            )
-                            top_p_slider = gr.Slider(
-                                minimum=0.1, maximum=1.0, value=0.95, step=0.05, label="Top-P"
-                            )
+                            temp_slider = gr.Slider(minimum=0.1, maximum=2.0, value=0.7, step=0.1, label="Temperatura")
+                            max_tokens_slider = gr.Slider(minimum=64, maximum=self.service.config.MAX_TOKENS, value=512, step=64, label="Max Tokens")
+                            top_k_slider = gr.Slider(minimum=1, maximum=100, value=50, step=1, label="Top-K")
+                            top_p_slider = gr.Slider(minimum=0.1, maximum=1.0, value=0.95, step=0.05, label="Top-P")
 
                         gr.Markdown("### Como Usar a API")
-                        api_example_display = gr.HTML(
-                            "<p style='color: #a0a0a0;'>Clique em 'Gerar Nova Chave' para ver um exemplo de código.</p>"
-                        )
+                        api_example_display = gr.HTML("<p style='color: #a0a0a0;'>Clique em 'Gerar Nova Chave' para ver um exemplo de código.</p>")
 
             def handle_key_generation():
-                # Gera chave e mostra exemplo de payload
                 key = f"gsk-{secrets.token_urlsafe(24).replace('_', '').replace('-', '')}"
                 code_html = f"""
                 <div class="code-snippet">
                     <div><span class="keyword">import</span> requests</div>
                     <div>&nbsp;</div>
-                    <div>url = <span class="string">"https://SEU_SPACE.hf.space/run/generate"</span></div>
+                    <div>url = <span class="string">"https://Teste.hf.space/run/generate"</span></div>
                     <div>payload = {{</div>
                     <div>&nbsp;&nbsp;&nbsp;&nbsp;<span class="string">"api_key"</span>: <span class="string">"{key}"</span>,</div>
                     <div>&nbsp;&nbsp;&nbsp;&nbsp;<span class="string">"prompt"</span>: <span class="string">"Escreva um haikai sobre o universo"</span>,</div>
@@ -292,14 +330,12 @@ class GradioInterface:
                 return key, gr.update(value=code_html)
 
             async def handle_generation(api_key, prompt, temp, max_tokens, top_k, top_p, btn):
-                # Validações básicas
                 if not api_key:
                     yield (
                         "<p style='color: #FFCC00;'>Por favor, insira a sua chave de API para começar.</p>",
                         gr.update(value="➤ Enviar", interactive=True),
                     )
                     return
-
                 if not prompt:
                     yield (
                         "<p style='color: #FFCC00;'>Por favor, digite um prompt.</p>",
@@ -307,7 +343,6 @@ class GradioInterface:
                     )
                     return
 
-                # Indicador de carregamento
                 yield "<p style='color: #a0a0a0;'>A gerar resposta...</p>", gr.update(value="A gerar...", interactive=False)
 
                 response = await self.service.generate_text(
@@ -325,7 +360,6 @@ class GradioInterface:
                 else:
                     yield f"<p style='color: #FF4500;'>{response.error}</p>", gr.update(value="➤ Enviar", interactive=True)
 
-            # Registar handlers
             send_button.click(
                 handle_generation,
                 inputs=[api_key_input, prompt_input, temp_slider, max_tokens_slider, top_k_slider, top_p_slider, send_button],
@@ -335,10 +369,9 @@ class GradioInterface:
 
             key_button.click(handle_key_generation, outputs=[api_key_input, api_example_display])
 
-            # Carregar exemplo inicial
             app.load(
                 lambda: gr.update(value="<p style='color: #a0a0a0;'>Clique em 'Gerar Nova Chave' para ver um exemplo de código.</p>"),
-                [],  # sem inputs
+                [],
                 [api_example_display],
             )
 
@@ -354,7 +387,6 @@ async def main():
         interface = GradioInterface(service)
         app = await interface.create_interface()
 
-        # Ligar a interface Gradio
         app.launch(server_name="0.0.0.0", server_port=7860, share=False, debug=False)
     except Exception as e:
         logger.critical(f"Falha ao iniciar a aplicação: {e}", exc_info=True)