| import gradio as gr |
| from huggingface_hub import InferenceClient |
|
|
| def respond(message, history, hf_token): |
| 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". |
| Respond naturally. Respectfully refuse harmful requests, and if user insists, tell them to stop using the service.""" |
| |
| messages = [{"role":"system","content":system_message}] |
| messages.extend(history) |
| messages.append({"role":"user","content":message}) |
|
|
| response = "" |
| for chunk in client.chat_completion(messages, max_tokens=512, stream=True, temperature=0.7, top_p=0.95): |
| if chunk.choices and chunk.choices[0].delta.content: |
| response += chunk.choices[0].delta.content |
| yield response |
|
|
| 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.transform = 'translateY(20px)'; |
| node.style.transition = 'opacity 0.3s ease, transform 0.3s ease'; |
| requestAnimationFrame(()=>{ |
| node.style.opacity = 1; |
| node.style.transform = 'translateY(0)'; |
| }); |
| } |
| }); |
| }); |
| }); |
| document.addEventListener("DOMContentLoaded", ()=>{ |
| const chatContainer = document.querySelector(".chat-interface"); |
| if(chatContainer) observer.observe(chatContainer,{childList:true,subtree:true}); |
| }); |
| </script> |
| """ |
|
|
| with gr.Blocks(css=""" |
| body { background-color:#000; font-family:'Arial',sans-serif; margin:0; padding:0; } |
| .gradio-container { border-radius:45px; 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:45px; 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:45px; padding:12px; background-color:#1a1a1a; color:#fff; font-size:16px; width:calc(100% - 70px); box-sizing:border-box; } |
| .send-btn { border:none; border-radius:45px; background-color:#444; color:#fff; width:60px; height:60px; font-size:18px; 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:45px !important; background-color:#222 !important; color:#fff !important; margin-bottom:15px;} |
| .gr-button.gr-login:hover { background-color:#444 !important;} |
| .input-container { display:flex; margin-top:10px; } |
| """) as demo: |
|
|
| gr.LoginButton() |
|
|
| chatbot = gr.Chatbot(elem_classes=["chat-interface"]) |
| textbox = gr.Textbox(label="", placeholder="Escreva algo...", lines=1) |
| send = gr.Button("→", elem_classes=["send-btn"]) |
|
|
| |
| def submit(message, history, hf_token): |
| for r in respond(message, history or [], hf_token): |
| yield history + [[message, r]] |
|
|
| send.click(submit, inputs=[textbox, chatbot, gr.State()], outputs=[chatbot]) |
| |
| gr.HTML(fade_js) |
|
|
| if __name__=="__main__": |
| demo.launch() |
