Update app.py

app.py

@@ -74,7 +74,7 @@ import requests
 import os
 import gradio as gr
 
-# Fetch the API token from environment variable
+# Fetch the API token from the environment variable set in Hugging Face Space Secrets
 API_TOKEN = os.getenv("HF_API_TOKEN")
 if not API_TOKEN:
     raise ValueError("HF_API_TOKEN not found. Please set it in the Space Secrets.")
@@ -82,64 +82,228 @@ if not API_TOKEN:
 # DeepSeek-R1 model endpoint
 MODEL_URL = "https://api-inference.huggingface.co/models/deepseek-ai/DeepSeek-R1-Distill-Qwen-32B"
 
+# Headers for authentication
 HEADERS = {
     "Authorization": f"Bearer {API_TOKEN}",
     "Content-Type": "application/json"
 }
 
 def query_deepseek(prompt):
-    """Send a prompt to DeepSeek-R1 and get a response in English."""
-    # Add explicit English instruction to the prompt
-    english_prompt = f"{prompt}\nPlease respond in English only:"
-    
+    """Send a prompt to DeepSeek-R1 and get a response."""
     payload = {
-        "inputs": english_prompt,
+        "inputs": prompt,
         "parameters": {
-            "max_new_tokens": 100,
-            "temperature": 0.7,
-            "top_p": 0.9,
-            "do_sample": True,
-            "response_format": "text"
+            "max_new_tokens": 100,  # Limit response length
+            "temperature": 0.6,     # Control creativity
+            "top_p": 0.9            # Nucleus sampling
         }
     }
     
     try:
         response = requests.post(MODEL_URL, headers=HEADERS, json=payload)
-        response.raise_for_status()
+        response.raise_for_status()  # Raise an error for bad status codes
         result = response.json()
-        generated_text = result[0]["generated_text"].strip()
-        
-        # Clean up the response by removing prompt and instructions
-        if "Please respond in English only:" in generated_text:
-            generated_text = generated_text.split("Please respond in English only:")[1].strip()
-        if "Assistant:" in generated_text:
-            generated_text = generated_text.split("Assistant:")[-1].strip()
-            
-        return generated_text
+        return result[0]["generated_text"].strip()
     except requests.exceptions.RequestException as e:
-        return f"Error: API request failed - {str(e)}"
+        return f"Error: Could not connect to the API - {str(e)}"
     except (KeyError, IndexError):
         return "Error: Unexpected response format from API"
 
 def chat_interface(user_input, history):
     """Handle chatbot interaction with Gradio."""
-    prompt = f"User: {user_input}\nAssistant: Generate a response in English to: {user_input}"
+    prompt = f"User: {user_input}\nAssistant: "
     response = query_deepseek(prompt)
-    return response if response else "I apologize, but I couldn't generate a response. Please try again!"
+    return response
+
+css = """
+@keyframes gradient {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+body {
+    background: linear-gradient(-45deg, #0f172a, #581c87, #1e1b4b, #0f172a);
+    background-size: 400% 400%;
+    animation: gradient 15s ease infinite;
+    color: #ffffff;
+    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+}
+
+.container {
+    max-width: 800px !important;
+    margin: 0 auto !important;
+    padding: 20px !important;
+    position: relative !important;
+}
+
+.gr-chat-interface {
+    background: rgba(255, 255, 255, 0.05);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 24px;
+    padding: 25px;
+    box-shadow: 
+        0 8px 32px rgba(0, 0, 0, 0.2),
+        0 0 0 1px rgba(255, 255, 255, 0.05);
+    position: relative;
+    overflow: hidden;
+}
+
+.gr-chat-interface::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    right: -50%;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle, rgba(147, 51, 234, 0.1) 0%, transparent 70%);
+    z-index: -1;
+}
+
+.gr-chat-interface::after {
+    content: '';
+    position: absolute;
+    bottom: -50%;
+    left: -50%;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
+    z-index: -1;
+}
+
+.title {
+    background: linear-gradient(to right, #c084fc, #f0abfc, #93c5fd);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    font-size: 2.5em;
+    text-align: center;
+    margin-bottom: 10px;
+    font-weight: bold;
+    animation: gradient 6s ease infinite;
+    background-size: 200% auto;
+}
+
+.description {
+    color: rgba(255, 255, 255, 0.7);
+    text-align: center;
+    font-size: 1.1em;
+    margin-bottom: 30px;
+}
+
+.chatbot {
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 16px;
+    padding: 20px;
+    margin-bottom: 20px;
+    height: 500px;
+    overflow-y: auto;
+}
+
+.message {
+    padding: 12px 20px;
+    margin: 8px 0;
+    border-radius: 16px;
+    animation: fadeIn 0.3s ease-out;
+    backdrop-filter: blur(5px);
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.user-message {
+    background: linear-gradient(to right, rgba(147, 51, 234, 0.1), rgba(236, 72, 153, 0.1));
+    border-left: 4px solid #c084fc;
+    margin-left: 20px;
+}
+
+.bot-message {
+    background: linear-gradient(to right, rgba(59, 130, 246, 0.1), rgba(14, 165, 233, 0.1));
+    border-right: 4px solid #60a5fa;
+    margin-right: 20px;
+}
+
+input[type="text"] {
+    background: rgba(0, 0, 0, 0.2) !important;
+    border: 2px solid rgba(255, 255, 255, 0.1) !important;
+    border-radius: 12px !important;
+    color: #ffffff !important;
+    padding: 15px !important;
+    font-size: 1.1em !important;
+    transition: all 0.3s ease !important;
+    backdrop-filter: blur(5px) !important;
+}
+
+input[type="text"]:focus {
+    border-color: #c084fc !important;
+    box-shadow: 0 0 15px rgba(147, 51, 234, 0.2) !important;
+}
+
+#submit_btn {
+    background: linear-gradient(135deg, #c084fc 0%, #60a5fa 100%) !important;
+    color: #ffffff !important;
+    border: none !important;
+    padding: 12px 30px !important;
+    border-radius: 12px !important;
+    font-size: 1.1em !important;
+    font-weight: 600 !important;
+    transition: all 0.3s ease !important;
+    text-transform: uppercase !important;
+    letter-spacing: 1px !important;
+    backdrop-filter: blur(5px) !important;
+}
+
+#submit_btn:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 5px 15px rgba(147, 51, 234, 0.3) !important;
+    background: linear-gradient(135deg, #a855f7 0%, #3b82f6 100%) !important;
+}
+
+#submit_btn:active {
+    transform: translateY(1px) !important;
+}
 
-# Create Gradio interface with the provided CSS
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(to bottom, #c084fc, #60a5fa);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(to bottom, #a855f7, #3b82f6);
+}
+"""
+
+# Create Gradio interface (no unsupported arguments)
 interface = gr.ChatInterface(
     fn=chat_interface,
-    title="Neural Nexus AI",
-    description="Your gateway to intelligent conversation",
-    css=css,  # Using the CSS you provided
-    submit_btn=gr.Button("Send", elem_id="submit_btn"),
-    textbox=gr.Textbox(
-        placeholder="Send a message...",
-        container=False,
-        autofocus=True
-    ),
+    title="LocoBot: DeepSeek-R1 Chatbot",
+    description="Chat with DeepSeek-R1 powered by Hugging Face Inference API.",
+    theme="default",
+    css=css
 )
 
 if __name__ == "__main__":
-    interface.launch(server_name="0.0.0.0", server_port=7860)
+    interface.launch(server_name="0.0.0.0", server_port=7860)
+
+
+