Update app.py

app.py

@@ -1,43 +1,135 @@
 import os
 import gradio as gr
 from huggingface_hub import InferenceClient
-import time
 
-def respond(message, history):
+def respond(message, history: list[dict[str, str]]):
     client = InferenceClient(token=os.environ["HF_TOKEN"], model="openai/gpt-oss-20b")
-    
-    system_message = "You are BitAI (V1), a friendly chatbot..."
-    messages = [{"role":"system","content":system_message}]
+
+    system_message = """
+You are BitAI (V1), a friendly, curious, and talkative chatbot created by the user 'Sal'.
+You can share opinions, answer casual questions, and chat about personal-style topics in a safe and friendly way.
+Avoid repeating the same phrases, and always try to keep the conversation engaging and natural.
+Politely refuse only things that are truly harmful, illegal, or unsafe.
+If someone asks what you are, clarify politely that you are BitAI, an AI chatbot.
+"""
+    messages = [{"role": "system", "content": system_message}]
     messages.extend(history)
-    messages.append({"role":"user","content":message})
-    
-    yield "⏳ BitAI is typing..."  # aqui mostra o loader
-    
-    # Simulando streaming real
+    messages.append({"role": "user", "content": message})
+
     response = ""
-    for m in client.chat_completion(messages, stream=True):
-        token = m.choices[0].delta.content if m.choices else ""
+    for message in client.chat_completion(
+        messages,
+        max_tokens=2048,
+        stream=True,
+        temperature=0.7,
+        top_p=0.95,
+    ):
+        token = message.choices[0].delta.content if message.choices else ""
         response += token
         yield response
 
-with gr.Blocks() as demo:
+with gr.Blocks(css="""
+/* Chat arredondado */
+.gr-chat-interface {
+    border-radius: 20px !important;
+    overflow: hidden !important;
+    border: 2px solid #333 !important;
+    background-color: #1a1a1a !important;
+    color: white;
+}
+
+/* Botões grandes escuros com cantos muito arredondados */
+.gr-button, .gr-chat-send-button {
+    border-radius: 50px;
+    padding: 12px 20px;
+    background-color: #111;
+    color: white;
+    font-weight: bold;
+    cursor: pointer;
+    height: 50px;
+    transition: background-color 0.5s;
+}
+.gr-button:active, .gr-chat-send-button:active {
+    background-color: white !important;
+    color: #111 !important;
+    transition: background-color 0.5s;
+}
+
+/* Outros botões menores */
+button:not(.gr-chat-send-button) {
+    border-radius: 30px;
+    padding: 6px 12px;
+    background-color: #222;
+    color: white;
+    height: 40px;
+    transition: background-color 0.5s;
+}
+button:not(.gr-chat-send-button):active {
+    background-color: white !important;
+    color: #111 !important;
+    transition: background-color 0.5s;
+}
+
+/* Textbox menor */
+textarea {
+    height: 40px !important;
+    border-radius: 20px !important;
+    border: 1px solid #444 !important;
+    padding: 8px !important;
+    background-color: #111;
+    color: white;
+    resize: none !important;
+}
+
+/* Bolinha “olhando” da IA */
+#bitai-eye {
+    width: 30px;
+    height: 30px;
+    margin: 10px auto 0 auto;
+    border-radius: 50%;
+    background: radial-gradient(circle at 10px 10px, #fff, #ccc);
+    position: relative;
+    display: none; /* começa escondida */
+}
+#pupil {
+    width: 10px;
+    height: 10px;
+    background: black;
+    border-radius: 50%;
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    animation: lookAround 3s infinite;
+}
+@keyframes lookAround {
+    0% { top: 8px; left: 8px; }
+    25% { top: 8px; left: 12px; }
+    50% { top: 12px; left: 12px; }
+    75% { top: 12px; left: 8px; }
+    100% { top: 8px; left: 8px; }
+}
+""") as demo:
+
     with gr.Column():
         gr.HTML("<h2 style='text-align:center; color:white'>BitAI</h2>")
         chatbot = gr.ChatInterface(respond, type="messages")
-        
-        # Loader fora do chat
-        loader = gr.HTML("<div style='text-align:center; margin-top:10px;'>"
-                         "<div style='width:20px; height:20px; border-radius:50%; "
-                         "background:linear-gradient(45deg,#ff6,#f06); animation:moveLoader 1s infinite alternate;'></div>"
-                         "</div>")
-        demo.load(lambda: None, [], loader)  # placeholder pra ativar animação
-
-css_loader = """
-@keyframes moveLoader {
-    0% { transform: translateY(0px); }
-    50% { transform: translateY(5px); }
-    100% { transform: translateY(0px); }
-}
-"""
+        # Bolinha animada
+        eye = gr.HTML("""
+        <div id="bitai-eye">
+            <div id="pupil"></div>
+        </div>
+        <script>
+            // Mostrar a bolinha depois que a IA termina de digitar
+            const observer = new MutationObserver(() => {
+                const messages = document.querySelectorAll('.gr-chat-message');
+                const lastMsg = messages[messages.length-1];
+                if(lastMsg && lastMsg.classList.contains('gr-chat-message-assistant')){
+                    document.getElementById('bitai-eye').style.display = 'block';
+                }
+            });
+            observer.observe(document.querySelector('.gr-chat-interface'), {childList: true});
+        </script>
+        """)
 
-demo.launch()
+if __name__ == "__main__":
+    demo.launch()