Update app.py

app.py

@@ -1,113 +1,43 @@
 import os
 import gradio as gr
 from huggingface_hub import InferenceClient
+import time
 
-def respond(message, history: list[dict[str, str]]):
-    # Puxa o token do secret do Hugging Face
+def respond(message, history):
     client = InferenceClient(token=os.environ["HF_TOKEN"], model="openai/gpt-oss-20b")
-
-    # System prompt amigável
-    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}]
+    
+    system_message = "You are BitAI (V1), a friendly chatbot..."
+    messages = [{"role":"system","content":system_message}]
     messages.extend(history)
-    messages.append({"role": "user", "content": message})
-
+    messages.append({"role":"user","content":message})
+    
+    yield "⏳ BitAI is typing..."  # aqui mostra o loader
+    
+    # Simulando streaming real
     response = ""
-    for message in client.chat_completion(
-        messages,
-        max_tokens=2048,
-        stream=True,
-        temperature=0.7,
-        top_p=0.95,
-    ):
-        choices = message.choices
-        token = ""
-        if len(choices) and choices[0].delta.content:
-            token = choices[0].delta.content
+    for m in client.chat_completion(messages, stream=True):
+        token = m.choices[0].delta.content if m.choices else ""
         response += token
         yield response
 
-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;
-}
-
-/* Loader animado embaixo da mensagem da IA */
-#bitai-loader {
-    width: 20px;
-    height: 20px;
-    margin: 10px auto 0 auto;
-    border-radius: 50%;
-    background: linear-gradient(45deg, #ff6, #f06);
-    animation: moveLoader 1s infinite alternate;
-}
-
+with gr.Blocks() 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); }
 }
-""") as demo:
-
-    with gr.Column():
-        gr.HTML("<h2 style='text-align:center; color:white'>BitAI</h2>")
-        chatbot = gr.ChatInterface(respond, type="messages")
-        gr.HTML("<div id='bitai-loader'></div>")  # ícone que se mexe
+"""
 
-if __name__ == "__main__":
-    demo.launch()
+demo.launch()