Waitress better than gunicorn

Dockerfile

@@ -1,12 +1,26 @@
 FROM python:3.9
 
-# Install system dependencies and build tools first
+# Create a non-root user
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+# Set working directory
+WORKDIR /app
+
+# Copy and install Python dependencies
+COPY --chown=user ./requirements.txt requirements.txt
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+# Install system dependencies and build tools
+USER root
 RUN apt-get update && apt-get install -y \
     python3 \
     python3-pip \
     python3-venv \
     wget \
-    build-essential
+    build-essential \
+    libsqlite3-dev
 
 # Install newer SQLite version
 WORKDIR /tmp
@@ -20,25 +34,17 @@ RUN wget https://www.sqlite.org/2023/sqlite-autoconf-3410200.tar.gz \
 # Update library path to use the new SQLite
 ENV LD_LIBRARY_PATH=/usr/local/lib:$LD_LIBRARY_PATH
 
-# Create a non-root user
-RUN useradd -m -u 1000 user
-
-# Create necessary directories with proper permissions
-RUN mkdir -p /app/chroma_store && chown -R user:user /app
+RUN mkdir -p /app/static/chroma_store && chown -R user:user /app/static/chroma_store
 
-# Switch to non-root user
+# Go back to non-root user and app directory
 USER user
-ENV PATH="/home/user/.local/bin:$PATH"
-
-# Set working directory
 WORKDIR /app
 
-# Copy and install Python dependencies
-COPY --chown=user ./requirements.txt requirements.txt
-RUN pip install --no-cache-dir --upgrade -r requirements.txt
-
-# Copy the source code
+# Copy the app source code
 COPY --chown=user . /app
 
-# Start the app
-CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app", "--preload"]
+# Expose port 7860 for the application
+EXPOSE 7860
+
+# Start the app using waitress
+CMD ["waitress-serve", "--listen=0.0.0.0:7860", "app:app"]

app.py

@@ -1,9 +1,7 @@
-from dotenv import load_dotenv
-load_dotenv()
-
-import os
 from flask import Flask, request, jsonify, render_template
 from flask_cors import CORS
+from dotenv import load_dotenv
+import os
 
 from langchain_community.embeddings import HuggingFaceEmbeddings
 from langchain_community.vectorstores import Chroma
@@ -11,85 +9,75 @@ from langchain_google_genai import ChatGoogleGenerativeAI
 from langchain_core.prompts import PromptTemplate
 from langchain.chains import RetrievalQA
 
-# === Step 1: Load API Key ===
+app = Flask(__name__)
+CORS(app)
+
+# Load environment variables
+load_dotenv()
 GOOGLE_API_KEY = os.environ.get("GOOGLE_API_KEY")
 if not GOOGLE_API_KEY:
     raise ValueError("GOOGLE_API_KEY not found in environment variables.")
 
-# === Step 2: Initialize LLM (Gemini) ===
-llm = ChatGoogleGenerativeAI(
-    model="gemini-2.0-flash-lite",
-    google_api_key=GOOGLE_API_KEY,
-    convert_system_message_to_human=True
-)
+# Lazy globals
+qa_chain = None
 
-# === Step 3: Load Chroma Vector Store ===
-embedding_model = HuggingFaceEmbeddings(model_name="BAAI/bge-large-en-v1.5")
-vectordb = Chroma(
-    persist_directory="./chroma_store",
-    embedding_function=embedding_model,
-    collection_name="pdf_search_chroma"
-)
-retriever = vectordb.as_retriever(search_kwargs={"k": 6})
+def get_qa_chain():
+    global qa_chain
+    if qa_chain is None:
+        # Initialize LLM
+        llm = ChatGoogleGenerativeAI(
+            model="gemini-2.0-flash-lite",
+            google_api_key=GOOGLE_API_KEY,
+            convert_system_message_to_human=True
+        )
 
-# === Step 4: Custom Prompt Template ===
-prompt_template = PromptTemplate.from_template("""
-You are an intelligent assistant for students asking about their university.
-If answer is not defined or not clearly understood, ask for clarification.
-Answer clearly and helpfully based on the retrieved context. Do not make up information or suggestions.
-Context:
-{context}
-Question:
-{question}
-Answer:
-""")
+        # Embeddings and vector store
+        embedding_model = HuggingFaceEmbeddings(model_name="BAAI/bge-large-en-v1.5")
+        vectordb = Chroma(
+            persist_directory="chroma_store",
+            embedding_function=embedding_model,
+            collection_name="pdf_search_chroma"
+        )
+        retriever = vectordb.as_retriever(search_kwargs={"k": 6})
 
-# === Step 5: Create Retrieval-QA Chain ===
-qa_chain = RetrievalQA.from_chain_type(
-    llm=llm,
-    chain_type="stuff",
-    retriever=retriever,
-    chain_type_kwargs={"prompt": prompt_template}
-)
+        # Prompt
+        prompt_template = PromptTemplate.from_template("""
+        You are an intelligent assistant for students asking about their university.
+        If answer is not defined or not clearly understood, ask for clarification.
+        Answer clearly and helpfully based on the retrieved context. Do not make up information or suggestions.
+        Context:
+        {context}
+        Question:
+        {question}
+        Answer:
+        """)
 
-# === Step 6: Flask Setup ===
-app = Flask(__name__, static_folder="static", template_folder="templates")
-# Enable CORS for all routes
-CORS(app)
+        # Create chain
+        qa_chain = RetrievalQA.from_chain_type(
+            llm=llm,
+            chain_type="stuff",
+            retriever=retriever,
+            chain_type_kwargs={"prompt": prompt_template}
+        )
+    return qa_chain
 
-# === Step 7: Serve Frontend ===
 @app.route("/")
-def index():
-    return render_template("index.html")  # Make sure chat.html exists
+def home():
+    return render_template("index.html")
 
-@app.route('/api/test', methods=['GET', 'POST'])
-def test():
-    print("Test endpoint reached")
-    return jsonify({"status": "API is working!", "message": "Connection successful"})
+@app.route("/get", methods=["POST"])
+def get_response():
+    data = request.get_json()
+    query = data.get("message", "")
+    if not query:
+        return jsonify({"response": {"response": "No message received."}}), 400
 
-# === Step 8: API Route - Change to match what your frontend expects ===
-@app.route('/api/chat', methods=['POST'])
-def chat():
-    print("Received request to /api/chat")
+    chain = get_qa_chain()
     try:
-        data = request.json
-        print(f"Request data: {data}")
-        
-        query = data.get('message', '').strip()
-        print(f"Query: {query}")
-
-        if not query:
-            print("No message provided")
-            return jsonify({"error": "No message provided."}), 400
-
-        response = qa_chain.run(query)
-        print(f"Generated response: {response}")
-        
-        return jsonify({"response": response})
+        response = chain.run(query)
+        return jsonify({"response": {"response": response}})
     except Exception as e:
-        print(f"Error in chat endpoint: {str(e)}")
-        return jsonify({"response": f"Sorry, I encountered an error: {str(e)}"}), 500
+        return jsonify({"response": {"response": f"Error: {str(e)}"}}), 500
 
-# === Step 9: Run the App ===
-if __name__ == '__main__':
-    app.run(host='0.0.0.0', port=7860, debug=False)
+if __name__ == "__main__":
+    app.run(debug=True)

requirements.txt

@@ -25,3 +25,4 @@ transformers==4.51.3
 torch==2.6.0
 uvicorn==0.34.1
 gunicorn
+waitress==3.0.2

templates/index.html

@@ -19,7 +19,6 @@
 <body class="bg-zinc-100 dark:bg-slate-950 text-black dark:text-white flex items-center justify-center min-h-screen">
     <div
         class="flex w-full w-full flex-col overflow-hidden border border-slate-800 dark:border-gray-700 shadow-lg rounded-lg h-[90vh] h-full">
-
         <div class="flex flex-col flex-grow overflow-hidden">
             <div id="chat-container" class="flex-grow overflow-y-auto p-3 space-y-3 bg-zinc-100 dark:bg-slate-950">
             </div>
@@ -50,6 +49,8 @@
             }
         });
 
+        const API_BASE_URL = window.location.origin;
+
         const chatContainer = document.getElementById("chat-container");
         const chatInput = document.getElementById("chat-input");
         const sendButton = document.getElementById("send-button");
@@ -70,15 +71,25 @@
                 bubble.className = `flex items-start gap-2 ${msg.isUser ? "flex-row-reverse" : "flex-row"}`;
                 const avatar = document.createElement("img");
                 avatar.className = "h-9 w-9 rounded-full object-cover";
-                avatar.src = msg.isUser ? "../static/profile.png" :
-                    "../static/JUIT_icon.png"; // adjust path if needed
+
+                // Use complete URLs for images
+                const baseUrl = window.location.origin;
+                avatar.src = msg.isUser ? `${baseUrl}/static/profile.png` : `${baseUrl}/static/JUIT_icon.png`;
                 avatar.alt = msg.isUser ? "User" : "Bot";
+
+                avatar.onerror = function () {
+                    // Fallback if image fails to load
+                    this.src = msg.isUser ?
+                        "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%230ea5e9'/%3E%3C/svg%3E" :
+                        "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23475569'/%3E%3C/svg%3E";
+                };
+
                 const msgDiv = document.createElement("div");
                 msgDiv.className = `max-w-[75%] break-words rounded-md px-3 py-1 text-sm ${
-            msg.isUser
-                ? "bg-blue-600 text-white rounded-tr-none"
-                : "bg-gray-200 text-black dark:bg-gray-700 dark:text-white rounded-tl-none"
-        }`;
+                    msg.isUser
+                        ? "bg-blue-600 text-white rounded-tr-none"
+                        : "bg-gray-200 text-black dark:bg-gray-700 dark:text-white rounded-tl-none"
+                }`;
                 msgDiv.innerText = msg.text;
                 bubble.appendChild(avatar);
                 bubble.appendChild(msgDiv);
@@ -102,44 +113,35 @@
         }
 
         async function simulateBotResponse(userInput) {
-          try {
-            console.log("Sending request to /api/chat", userInput);
-            
-            const response = await fetch("/api/chat", {  // Using relative URL
-              method: "POST",
-              headers: {
-                "Content-Type": "application/json",
-              },
-              body: JSON.stringify({
-                message: userInput
-              }),
-            });
-            
-            console.log("Response status:", response.status);
-            
-            if (!response.ok) {
-              const errorText = await response.text();
-              console.error("API error response:", errorText);
-              throw new Error(`API error: ${response.status} - ${errorText}`);
-            }
-            
-            const data = await response.json();
-            console.log("API response data:", data);
-            
-            if (data.error) {
-              throw new Error(data.error);
+            try {
+                const response = await fetch(`${API_BASE_URL}/get`, {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify({
+                        message: userInput
+                    }),
+                });
+
+                if (!response.ok) {
+                    const errorText = await response.text();
+                    throw new Error(`API error (${response.status}): ${errorText}`);
+                }
+
+                const data = await response.json();
+                if (data.error) throw new Error(data.error);
+
+                return data.response;
+            } catch (error) {
+                console.error("Error fetching response:", error);
+                throw error;
             }
-            
-            return data;
-          } catch (error) {
-            console.error("Error in simulateBotResponse:", error);
-            throw error;
-          }
         }
 
         async function handleSendMessage() {
             const text = chatInput.value.trim();
-            if (!text) return;
+            if (!text || isTyping) return;
 
             const userMessage = {
                 id: Date.now().toString(),
@@ -150,10 +152,24 @@
             messages.push(userMessage);
             chatInput.value = "";
             isTyping = true;
+
+            // Render messages, including typing animation
             renderMessages();
 
+            // Add typing animation (". . .")
+            const typingMessage = {
+                id: "typing",
+                text: ". . .", // Use animated dots here
+                isUser: false,
+            };
+            messages.push(typingMessage);
+
             try {
                 const res = await simulateBotResponse(text);
+
+                // Remove typing animation once response is received
+                messages.pop(); // Removes the ". . ." animation message
+
                 const botMessage = {
                     id: (Date.now() + 1).toString(),
                     text: res.response,
@@ -161,9 +177,12 @@
                 };
                 messages.push(botMessage);
             } catch (error) {
+                // Remove typing animation if there's an error
+                messages.pop(); // Removes the ". . ." animation message
+
                 messages.push({
                     id: Date.now().toString(),
-                    text: "Error: " + error.message,
+                    text: `Error: ${error.message || "Failed to get response. Please try again."}`,
                     isUser: false,
                 });
             }
@@ -172,6 +191,18 @@
             renderMessages();
         }
 
+        // Check server health on page load
+        async function checkServerHealth() {
+            try {
+                const response = await fetch(`${API_BASE_URL}/health`);
+                if (!response.ok) {
+                    console.warn("Server health check failed");
+                }
+            } catch (error) {
+                console.error("Server health check error:", error);
+            }
+        }
+
         sendButton.addEventListener("click", handleSendMessage);
         chatInput.addEventListener("keydown", (e) => {
             if (e.key === "Enter" && !e.shiftKey) {
@@ -180,7 +211,9 @@
             }
         });
 
+        // Initialize
         renderMessages();
+        checkServerHealth();
     </script>
 </body>