Upload 4 files

app/main.py

@@ -2,14 +2,13 @@ from fastapi import FastAPI, Request
 from fastapi.templating import Jinja2Templates
 from fastapi.staticfiles import StaticFiles
 from fastapi.responses import HTMLResponse
-from transformers import AutoModelForCausalLM, AutoTokenizer
-import torch
+from transformers import pipeline
 from .config import settings
 from pydantic import BaseModel
 
 app = FastAPI(
-    title="Deepseek Chat API",
-    description="A simple chat API using DeepSeek model",
+    title="DeepSeek Chat",
+    description="A chat API using DeepSeek model",
     version="1.0.0"
 )
 
@@ -17,13 +16,12 @@ app = FastAPI(
 app.mount("/static", StaticFiles(directory="app/static"), name="static")
 templates = Jinja2Templates(directory="app/templates")
 
-# Initialize model and tokenizer
-tokenizer = AutoTokenizer.from_pretrained(settings.MODEL_NAME, token=settings.HUGGINGFACE_TOKEN)
-model = AutoModelForCausalLM.from_pretrained(
-    settings.MODEL_NAME,
+# Initialize pipeline
+print("Loading model pipeline...")
+pipe = pipeline(
+    "text-generation",
+    model=settings.MODEL_NAME,
     token=settings.HUGGINGFACE_TOKEN,
-    torch_dtype=torch.float16,
-    device_map="auto",
     trust_remote_code=True
 )
 
@@ -36,28 +34,21 @@ async def home(request: Request):
 
 @app.post("/chat")
 async def chat(message: ChatMessage):
-    # Prepare the prompt
-
-    print(message.message)
-    prompt = f"### Instruction: {message.message}\n\n### Response:"
+    # Prepare messages
+    messages = [
+        {"role": "user", "content": message.message}
+    ]
     
-    # Generate response
-    print(prompt)
-    inputs = tokenizer(prompt, return_tensors="pt").to(model.device)
-    outputs = model.generate(
-        **inputs,
-        max_new_tokens=512,
-        temperature=0.7,
-        do_sample=True,
-        pad_token_id=tokenizer.eos_token_id
-    )
+    # Generate response using pipeline
+    response = pipe(messages)
     
-    response = tokenizer.decode(outputs[0], skip_special_tokens=True)
-    print(response)
-    # Extract only the response part
-    response = response.split("### Response:")[-1].strip()
+    # Extract the response text
+    if isinstance(response, list):
+        response_text = response[0].get('generated_text', '')
+    else:
+        response_text = response.get('generated_text', '')
     
-    return {"response": response}
+    return {"response": response_text}
 
 if __name__ == "__main__":
     import uvicorn

app/static/styles.css

@@ -24,4 +24,31 @@
 
 #chat-messages > div {
     animation: fadeIn 0.3s ease-out forwards;
+}
+
+/* Typing indicator */
+.typing-indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.typing-indicator .dot {
+    animation: typingAnimation 1.4s infinite;
+    display: inline-block;
+    margin: 0 2px;
+}
+
+.typing-indicator .dot:nth-child(2) {
+    animation-delay: 0.2s;
+}
+
+.typing-indicator .dot:nth-child(3) {
+    animation-delay: 0.4s;
+}
+
+@keyframes typingAnimation {
+    0% { transform: translateY(0px); }
+    28% { transform: translateY(-6px); }
+    44% { transform: translateY(0px); }
 } 

app/templates/chat.html

@@ -25,7 +25,8 @@
                            class="flex-1 rounded-lg border border-gray-300 px-4 py-2 focus:outline-none focus:border-blue-500" 
                            placeholder="Type your message...">
                     <button type="submit" 
-                            class="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 focus:outline-none">
+                            id="send-button"
+                            class="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 focus:outline-none transition-colors duration-200">
                         Send
                     </button>
                 </form>
@@ -37,20 +38,27 @@
         const chatMessages = document.getElementById('chat-messages');
         const chatForm = document.getElementById('chat-form');
         const messageInput = document.getElementById('message-input');
+        const sendButton = document.getElementById('send-button');
 
-        function appendMessage(content, isUser) {
+        function appendMessage(content, isUser, isLoading = false) {
             const messageDiv = document.createElement('div');
             messageDiv.className = `flex ${isUser ? 'justify-end' : 'justify-start'}`;
             
             const bubble = document.createElement('div');
             bubble.className = `max-w-[70%] rounded-lg p-3 ${
                 isUser ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-800'
-            }`;
-            bubble.textContent = content;
+            } ${isLoading ? 'typing-indicator' : ''}`;
+
+            if (isLoading) {
+                bubble.innerHTML = '<span class="dot">.</span><span class="dot">.</span><span class="dot">.</span>';
+            } else {
+                bubble.textContent = content;
+            }
             
             messageDiv.appendChild(bubble);
             chatMessages.appendChild(messageDiv);
             chatMessages.scrollTop = chatMessages.scrollHeight;
+            return messageDiv;
         }
 
         chatForm.addEventListener('submit', async (e) => {
@@ -58,12 +66,20 @@
             const message = messageInput.value.trim();
             if (!message) return;
 
+            // Disable input and button
+            messageInput.disabled = true;
+            sendButton.disabled = true;
+            sendButton.classList.add('opacity-50');
+
             // Clear input
             messageInput.value = '';
 
             // Add user message
             appendMessage(message, true);
 
+            // Add loading message
+            const loadingDiv = appendMessage('', false, true);
+
             try {
                 const response = await fetch('/chat', {
                     method: 'POST',
@@ -74,10 +90,24 @@
                 });
 
                 const data = await response.json();
+                
+                // Remove loading message
+                loadingDiv.remove();
+                
+                // Add AI response
                 appendMessage(data.response, false);
             } catch (error) {
+                // Remove loading message
+                loadingDiv.remove();
+                
                 appendMessage('Sorry, something went wrong. Please try again.', false);
                 console.error('Error:', error);
+            } finally {
+                // Re-enable input and button
+                messageInput.disabled = false;
+                sendButton.disabled = false;
+                sendButton.classList.remove('opacity-50');
+                messageInput.focus();
             }
         });
     </script>