Update app.py

app.py

@@ -4,64 +4,77 @@ import os
 
 HF_TOKEN = os.getenv("HF_TOKEN")
 
-def respond(message, history: list[dict[str, str]], system_message, max_tokens, temperature, top_p):
+def respond(message, history: list[dict[str, str]]):
     client = InferenceClient(token=HF_TOKEN, model="openai/gpt-oss-20b")
-    messages = [{"role": "system", "content": system_message}]
+
+    messages = [{"role": "system", "content": "You are a friendly chatbot."}]
     messages.extend(history)
     messages.append({"role": "user", "content": message})
 
     response = ""
     for msg in client.chat_completion(
         messages,
-        max_tokens=max_tokens,
+        max_tokens=512,
         stream=True,
-        temperature=temperature,
-        top_p=top_p,
+        temperature=0.7,
+        top_p=0.95
     ):
         if msg.choices and msg.choices[0].delta.content:
             response += msg.choices[0].delta.content
         yield response
 
+
+# CSS for floating button + hidden chatbot
 custom_css = """
-.gradio-container {
-    background-color: #f9f9fb;
-    font-family: Arial, sans-serif;
-}
-.gradio-chatbox .message.user {
-    background-color: #daf7dc;
-    border-radius: 12px;
-    padding: 8px;
-    margin: 4px 0;
+#chatbot-container {
+    display: none;
+    position: fixed;
+    bottom: 80px;
+    right: 30px;
+    width: 350px;
+    max-height: 500px;
+    z-index: 9999;
+    border-radius: 15px;
+    overflow: hidden;
+    box-shadow: 0px 5px 20px rgba(0,0,0,0.3);
 }
-.gradio-chatbox .message.bot {
-    background-color: #cce5ff;
-    border-radius: 12px;
-    padding: 8px;
-    margin: 4px 0;
-}
-input[type="text"] {
-    border-radius: 8px;
-    border: 1px solid #ccc;
-}
-button {
-    background-color: #007bff;
+#chatbot-toggle {
+    position: fixed;
+    bottom: 20px;
+    right: 30px;
+    background: #7E498B;
     color: white;
-    border-radius: 8px;
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    font-size: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
+    z-index: 10000;
 }
 """
 
-with gr.Blocks(theme=gr.themes.Soft(), css=custom_css) as demo:
-    chatbot = gr.ChatInterface(
-        respond,
-        type="messages",
-        additional_inputs=[
-            gr.Textbox(value="You are a friendly Chatbot.", label="System message"),
-            gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens"),
-            gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature"),
-            gr.Slider(minimum=0.1, maximum=1.0, value=0.95, step=0.05, label="Top-p"),
-        ]
-    )
-    chatbot.render()
+with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
+    with gr.Box(elem_id="chatbot-container"):
+        gr.ChatInterface(respond, type="messages")
+
+    # Floating purple chat icon
+    gr.HTML(""" 
+        <div id="chatbot-toggle" onclick="toggleChat()">💬</div>
+        <script>
+        function toggleChat() {
+            var chat = document.getElementById("chatbot-container");
+            if (chat.style.display === "none" || chat.style.display === "") {
+                chat.style.display = "block";
+            } else {
+                chat.style.display = "none";
+            }
+        }
+        </script>
+    """)
 
 if __name__ == "__main__":
-    demo.launch(share=True)
+    demo.launch()