Update app.py

app.py

@@ -177,28 +177,28 @@ def predict(contexto, frase_mask, chaos_factor):
             token = tokenizer.decode([idx]).strip()
             res_betina.append(f"**{token}** ({score:.2%})")
 
-    # Formatar saída HTML (Estilo Cyberpunk)
+    # Formatar saída HTML (Estilo Clean)
     html_output = f"""
-    <div style="display: flex; gap: 20px; flex-wrap: wrap; font-family: 'Courier New', monospace;">
-        <div style="flex: 1; min-width: 300px; background-color: #1a1a1a; padding: 15px; border-radius: 10px; border: 1px solid #444; color: #ccc;">
-            <h3 style="color: #888; margin-top: 0; border-bottom: 1px solid #444; padding-bottom: 5px;">🧠 BERT (Legado)</h3>
-            <p style="font-size: 0.8em; color: #666;"><i>Memória Estática</i></p>
+    <div style="display: flex; gap: 20px; flex-wrap: wrap;">
+        <div style="flex: 1; min-width: 300px; background-color: #f5f5f5; padding: 15px; border-radius: 10px; border: 1px solid #ddd;">
+            <h3 style="color: #555; margin-top: 0;">🧠 BERT Padrão</h3>
+            <p style="font-size: 0.9em; color: #666;"><i>O que o modelo "decorou" do treino original.</i></p>
             <ol>
-                {''.join([f'<li style="margin-bottom: 5px;">{item}</li>' for item in res_base])}
+                {''.join([f'<li>{item}</li>' for item in res_base])}
             </ol>
         </div>
-        <div style="flex: 1; min-width: 300px; background-color: #0d0d15; padding: 15px; border-radius: 10px; border: 2px solid #00ff9d; box-shadow: 0 0 15px rgba(0, 255, 157, 0.2);">
-            <h3 style="color: #00ff9d; margin-top: 0; border-bottom: 1px solid #00ff9d; padding-bottom: 5px;">🌀 VÓRTICE ATIVO</h3>
-            <p style="font-size: 0.8em; color: #00cc7d;"><i>Correção Dinâmica (Caos: {chaos_factor}x)</i></p>
-            <ol style="color: #fff;">
-                {''.join([f'<li style="margin-bottom: 5px; text-shadow: 0 0 5px #00ff9d;">{item}</li>' for item in res_betina])}
+        <div style="flex: 1; min-width: 300px; background-color: #e6f7ff; padding: 15px; border-radius: 10px; border: 2px solid #1890ff;">
+            <h3 style="color: #0050b3; margin-top: 0;">🌀 Betina 2.0</h3>
+            <p style="font-size: 0.9em; color: #0050b3;"><i>Correção Dinâmica (Caos: {chaos_factor}x)</i></p>
+            <ol>
+                {''.join([f'<li>{item}</li>' for item in res_betina])}
             </ol>
         </div>
     </div>
     <br>
     <details>
-        <summary style="cursor: pointer; color: #00ff9d; font-family: monospace;">📊 TELEMETRIA DO VÓRTICE</summary>
-        <pre style="font-size: 0.8em; background: #000; color: #0f0; padding: 10px; border-radius: 5px; overflow-x: auto; border: 1px solid #003300;">{str(metrics)}</pre>
+        <summary style="cursor: pointer; color: #888;">📊 Métricas do Vórtice (Estado Interno)</summary>
+        <pre style="font-size: 0.8em; background: #333; color: #0f0; padding: 10px; border-radius: 5px; overflow-x: auto;">{str(metrics)}</pre>
     </details>
     """
     return html_output
@@ -207,16 +207,10 @@ def predict(contexto, frase_mask, chaos_factor):
 # 5. Interface Gradio
 # ==============================================================================
 custom_css = """
-body {background-color: #000000; color: #e0e0e0;}
-.gradio-container {background-color: #0a0a0a !important; border: 1px solid #333;}
-h1 {color: #00ff9d !important; font-family: 'Courier New', monospace; text-shadow: 0 0 10px #00ff9d;}
-label {color: #00ff9d !important;}
-input, textarea {background-color: #111 !important; color: #fff !important; border: 1px solid #333 !important;}
-button.primary {background: linear-gradient(45deg, #004d00, #00ff9d) !important; border: none !important; color: #000 !important; font-weight: bold !important;}
+footer {visibility: hidden}
 """
 
 with gr.Blocks(title="Betina 2.0 - Protocolo Impossível") as demo:
-    gr.HTML(f"<style>{custom_css}</style>")
     gr.Markdown("""
     # 🌀 BETINA 2.0: PROTOCOLO IMPOSSÍVEL