Update app.py

app.py

@@ -1,135 +1,132 @@
-import os
-import gradio as gr
-from huggingface_hub import InferenceClient
+import os  
+import gradio as gr  
+from huggingface_hub import InferenceClient  
 
-def respond(message, history: list[dict[str, str]]):
-    client = InferenceClient(token=os.environ["HF_TOKEN"], model="openai/gpt-oss-20b")
+def respond(message, history: list[dict[str, str]]):  
+    # Puxa o token do secret do Hugging Face  
+    client = InferenceClient(token=os.environ["HF_TOKEN"], model="openai/gpt-oss-20b")  
 
-    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})
+    # 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.  
+"""  
 
-    response = ""
-    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
+    messages = [{"role": "system", "content": system_message}]  
+    messages.extend(history)  
+    messages.append({"role": "user", "content": message})  
 
-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;
-}
+    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  
+        if token is not None:  # evita TypeError  
+            response += token  
+        yield response  
 
-/* 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;
-}
+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;  
+}  
 
-/* 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;
-}
+/* 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;      
+}      
 
-/* 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;
-}
+/* 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;      
+}      
 
-/* 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:
+/* 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;      
+}  
 
-    with gr.Column():
-        gr.HTML("<h2 style='text-align:center; color:white'>BitAI</h2>")
-        chatbot = gr.ChatInterface(respond, type="messages")
-        # 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>
-        """)
+/* Bolinha animada da IA olhando pro usuário */  
+#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;  
+}  
 
-if __name__ == "__main__":
+#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")  
+        # Bolinha da IA aparecendo sempre embaixo do chat  
+        gr.HTML("""  
+        <div id="bitai-eye">  
+            <div id="pupil"></div>  
+        </div>  
+        """)  
+
+if __name__ == "__main__":  
     demo.launch()