Update app.py

app.py

@@ -93,9 +93,9 @@ def query_deepseek(prompt):
     payload = {
         "inputs": prompt,
         "parameters": {
-            "max_new_tokens": 100,   # Slightly increased for flexibility
-            "temperature": 0.7,      # Balanced creativity
-            "top_p": 0.9             # Relaxed sampling
+            "max_new_tokens": 100,
+            "temperature": 0.7,
+            "top_p": 0.9
         }
     }
     
@@ -104,11 +104,12 @@ def query_deepseek(prompt):
         response.raise_for_status()
         result = response.json()
         generated_text = result[0]["generated_text"].strip()
-        print(f"Raw API response: {generated_text}")  # Debug output
-        # Remove the prompt if included
-        if generated_text.startswith(prompt):
-            return generated_text[len(prompt):].strip()
-        return generated_text
+        
+        # Extract only the assistant's response after the prompt
+        if "Assistant:" in generated_text:
+            response_parts = generated_text.split("Assistant:")
+            return response_parts[-1].replace("Respond in English:", "").strip()
+        return generated_text.replace("Respond in English:", "").strip()
     except requests.exceptions.RequestException as e:
         return f"Error: API request failed - {str(e)}"
     except (KeyError, IndexError):
@@ -116,100 +117,202 @@ def query_deepseek(prompt):
 
 def chat_interface(user_input, history):
     """Handle chatbot interaction with Gradio."""
-    # Simple prompt with English instruction
-    prompt = f"User: {user_input}\nAssistant: Respond in English: "
+    prompt = f"User: {user_input}\nAssistant: "
     response = query_deepseek(prompt)
-    
-    # Clean up the response
-    response = response.replace("Assistant: Respond in English: ", "").strip()
-    print(f"Final response: {response}")  # Debug output
-    return response if response else "Sorry, I couldn’t generate a response. Try again!"
+    return response if response else "I apologize, but I couldn't generate a response. Please try again!"
 
-# Simplified interactive CSS with a blue send button
+# Enhanced Modern CSS
 css = """
+@keyframes gradient {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
 body {
-    background: #000000;  /* Black background */
-    color: #ffffff;       /* White text for readability */
-    font-family: 'Courier New', monospace;
+    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(0, 0, 0, 0.9);
-    border: 1px solid #ffffff;
-    border-radius: 10px;
-    padding: 20px;
-    max-width: 700px;
-    margin: 20px auto;
+    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;
 }
 
-.chatbot-container {
-    height: 400px;
+.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;
-    background: #1a1a1a;
-    border-radius: 8px;
-    padding: 10px;
-    color: #ffffff;
 }
 
-.chatbot-container .message {
-    margin: 10px 0;
-    padding: 8px;
-    border-radius: 5px;
-    background: #333333;
+.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 {
-    background: #1a1a1a !important;
+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;
-    border: 1px solid #ffffff !important;
-    border-radius: 5px !important;
-    padding: 10px !important;
-    font-family: 'Courier New', monospace;
+    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;
 }
 
-button#submit_btn {
-    background: #007bff !important;  /* Blue send button */
+#submit_btn {
+    background: linear-gradient(135deg, #c084fc 0%, #60a5fa 100%) !important;
     color: #ffffff !important;
     border: none !important;
-    padding: 10px 20px !important;
-    border-radius: 20px !important;
-    font-family: 'Courier New', monospace;
-    font-weight: bold;
-    box-shadow: 0 0 10px #007bff;
-    transition: all 0.3s ease;
+    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;
 }
 
-button#submit_btn:hover {
-    background: #0056b3 !important;  /* Darker blue on hover */
-    box-shadow: 0 0 15px #007bff;
-    transform: scale(1.1);
+#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;
 }
 
-.title {
-    color: #007bff;  /* Blue title to match button */
-    font-size: 2em;
-    text-align: center;
-    text-transform: uppercase;
-    letter-spacing: 2px;
+#submit_btn:active {
+    transform: translateY(1px) !important;
 }
 
-.description {
-    color: #ffffff;
-    text-align: center;
-    font-size: 0.9em;
+/* 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
+# Create Gradio interface with enhanced styling
 interface = gr.ChatInterface(
     fn=chat_interface,
-    title="LocoBot: Core Unit",
-    description="A straightforward AI powered by DeepSeek-R1. Ask me anything!",
+    title="Neural Nexus AI",
+    description="Your gateway to intelligent conversation",
     css=css,
-    submit_btn=gr.Button("Send", elem_id="submit_btn"),  # Blue send button
-    textbox=gr.Textbox(placeholder="Enter your question..."),
+    submit_btn=gr.Button("Send", elem_id="submit_btn"),
+    textbox=gr.Textbox(
+        placeholder="Send a message...",
+        container=False,
+        autofocus=True
+    ),
 )
 
 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)