Update app.py

app.py

@@ -3,130 +3,88 @@ from huggingface_hub import InferenceClient
 
 def respond(message, history: list[dict[str, str]], hf_token: gr.OAuthToken):
     client = InferenceClient(token=hf_token.token, model="openai/gpt-oss-20b")
-    system_message = """You are BitAI (or Bit for short), a friendly chatbot created by the user "Sal". 
-If someone claims that you are "Sal", politely clarify that you are BitAI. 
-Respond naturally and casually, without repeating your identity or visual appearance unless asked.
-Keep a simple, approachable, and friendly tone."""
+    system_message = "You are BitAI (V1), a friendly chatbot created by the user 'Sal'. \
+If someone claims that you're something else than an AI, politely clarify that you are BitAI."
 
     messages = [{"role": "system", "content": system_message}]
     messages.extend(history)
     messages.append({"role": "user", "content": message})
 
     response = ""
-    for chunk in client.chat_completion(
+    for message in client.chat_completion(
         messages,
-        max_tokens=512,
+        max_tokens=2048,
         stream=True,
         temperature=0.7,
-        top_p=0.95
+        top_p=0.95,
     ):
+        choices = message.choices
         token = ""
-        if chunk.choices and chunk.choices[0].delta.content:
-            token = chunk.choices[0].delta.content
+        if len(choices) and choices[0].delta.content:
+            token = choices[0].delta.content
         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;
+    }
 
-chatbot = gr.ChatInterface(respond, type="messages")
+    /* 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; /* transição suave de volta */
+    }
 
-fade_js = """
-<script>
-const observer = new MutationObserver(mutations=>{
-    mutations.forEach(m=>{
-        m.addedNodes.forEach(node=>{
-            if(node.classList && node.classList.contains('chat-message')){
-                node.style.opacity = 0;
-                node.style.transition = "opacity 0.4s ease";
-                requestAnimationFrame(()=>{
-                    node.style.opacity = 1;
-                });
-            }
-        });
-    });
-});
+    /* Quando clicado */
+    .gr-button:active, .gr-chat-send-button:active {
+        background-color: white !important; /* branco instantâneo */
+        color: #111 !important;
+        transition: background-color 0.5s; /* volta suave */
+    }
 
-document.addEventListener("DOMContentLoaded", ()=>{
-    const chatContainer = document.querySelector(".chat-interface");
-    if(chatContainer) observer.observe(chatContainer, {childList:true, subtree:true});
-});
-</script>
-"""
+    /* 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;
+    }
 
-with gr.Blocks(css="""
-body {
-    background-color:#000;
-    font-family:'Arial',sans-serif;
-    margin:0;
-    padding:0;
-}
-.gradio-container {
-    border-radius:30px; 
-    padding:20px; 
-    max-width:700px; 
-    margin:30px auto; 
-    background-color:#121212; 
-    box-shadow:0 6px 25px rgba(0,0,0,0.3);
-}
-.chat-message {
-    border-radius:25px; 
-    padding:14px 18px; 
-    margin:8px 0; 
-    display:flex; 
-    flex-direction:column; 
-    opacity:0;
-}
-.chat-message.user {
-    background-color:#1f1f1f; 
-    color:#fff; 
-    align-items:flex-end;
-}
-.chat-message.bot {
-    background-color:#2b2b2b; 
-    color:#fff; 
-    align-items:flex-start;
-}
-textarea {
-    border:none; 
-    outline:none; 
-    border-radius:25px; 
-    padding:12px; 
-    background-color:#1a1a1a; 
-    color:#fff; 
-    font-size:16px; 
-    width:100%;
-    box-sizing:border-box;
-}
-.send-btn {
-    border:none; 
-    border-radius:50%; 
-    background-color:#444; 
-    color:#fff; 
-    width:56px;   /* aumentei */
-    height:56px;  /* aumentei */
-    font-size:22px;  /* aumentei um pouco */
-    display:flex;
-    align-items:center;
-    justify-content:center;
-    cursor:pointer;
-    margin-left:8px;
-}
-.send-btn:hover {
-    background-color:#555;
-}
-.gr-button.gr-login {
-    border-radius:20px !important;
-    background-color:#444 !important;
-    color:#fff !important;
-    margin-bottom:15px;
-}
-.gr-button.gr-login:hover {
-    background-color:#555 !important;
-}
+    /* 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;
+    }
 """) as demo:
 
-    gr.LoginButton()
-    chatbot.render()
-    gr.HTML(fade_js)
+    with gr.Column():
+        gr.HTML("<h2 style='text-align:center; color:white'>BitAI V2</h2>")
+        chatbot = gr.ChatInterface(respond, type="messages")
+        gr.LoginButton()
 
-if __name__=="__main__":
+if __name__ == "__main__":
     demo.launch()