Update app.py

app.py

@@ -1,6 +1,7 @@
 import gradio as gr
 from huggingface_hub import InferenceClient
 
+# Função principal da IA
 def respond(message, history: list[dict[str, str]], hf_token: gr.OAuthToken):
     client = InferenceClient(token=hf_token.token, model="openai/gpt-oss-20b")
 
@@ -30,33 +31,62 @@ Keep a simple, approachable, and friendly tone."""
 
 chatbot = gr.ChatInterface(respond, type="messages")
 
+# HTML do ícone da BitAI
+bit_icon_html = """
+<div style="text-align:center; margin-bottom:10px;">
+  <div class="wrap" id="bit" style="width:100px; height:100px; margin:auto;">
+    <svg viewBox="0 0 160 160">
+      <circle class="face" cx="80" cy="80" r="72"/>
+      <circle class="dot eye-left"/>
+      <circle class="dot eye-right"/>
+      <circle class="dot extra-dot" cx="80" cy="78" r="8"/>
+    </svg>
+  </div>
+  <div class="label"><b>bitAI</b> — <span id="mode">normal</span></div>
+</div>
+
+<script>
+  const wrap = document.getElementById('bit');
+  const mode = document.getElementById('mode');
+  let thinking = false;
+  wrap.addEventListener('click', ()=>{
+    thinking = !thinking;
+    wrap.classList.toggle('thinking', thinking);
+    mode.textContent = thinking ? 'pensando...' : 'normal';
+  });
+</script>
+
+<style>
+  .face{ fill:#0b1020; }
+  .dot{ fill:#fff; transition: all 500ms ease; }
+  .eye-left  { cx:56; cy:62; r:10; }
+  .eye-right { cx:104; cy:62; r:10; }
+  .wrap.thinking .eye-left  { cx:48; cy:78; r:8; }
+  .wrap.thinking .eye-right { cx:112; cy:78; r:8; }
+  .extra-dot{ opacity:0; transform:translateY(10%); transition: all 500ms ease; }
+  .wrap.thinking .extra-dot{ opacity:1; transform:translateY(0); }
+  .wrap.thinking .dot{ animation: wave 1.4s infinite ease-in-out; }
+  .wrap.thinking .eye-left { animation-delay:0s; }
+  .wrap.thinking .extra-dot{ animation-delay:0.25s; }
+  .wrap.thinking .eye-right{ animation-delay:0.5s; }
+  @keyframes wave { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12%); } }
+  .label{ text-align:center; font-family:sans-serif; color:#223; margin-top:4px;}
+</style>
+"""
+
 with gr.Blocks(css="""
-    body {
-        background-color: #fdfdfd; /* quase branco */
-        font-family: 'Arial', sans-serif;
-    }
-    .gradio-container {
-        border-radius: 25px; /* mais arredondado */
-        padding: 20px;
-        max-width: 700px;
-        margin: 20px auto;
-        background-color: #fefefe; /* fundo bem claro */
-        box-shadow: 0 4px 20px rgba(0,0,0,0.05); /* sombra suave */
-    }
-    .chat-message {
-        border-radius: 20px; /* mensagens arredondadas */
-        padding: 10px 15px;
-        margin: 5px 0;
-    }
-    .chat-message.user {
-        background-color: #e6f0ff; /* bolha do usuário */
-    }
-    .chat-message.bot {
-        background-color: #f0f0f0; /* bolha da IA */
-    }
+    body { background-color: #f0f0f0; font-family: 'Arial', sans-serif; }
+    .gradio-container { border-radius: 25px; padding: 20px; max-width: 700px; margin: 20px auto; background-color: #fafafa; box-shadow: 0 4px 20px rgba(0,0,0,0.05);}
+    .chat-message { border-radius: 20px; padding: 10px 15px; margin: 5px 0;}
+    .chat-message.user { background-color: #dceefc; }
+    .chat-message.bot { background-color: #e8e8e8; }
 """) as demo:
     with gr.Sidebar():
         gr.LoginButton()
+    
+    # Coloca o ícone no topo da UI
+    gr.HTML(bit_icon_html)
+    
     chatbot.render()
 
 if __name__ == "__main__":