chatbot updated

app.py

@@ -34,13 +34,14 @@ import json
 # -----------------------------------------------------------------------------
 # Chatbot setup
 #
-# The chatbot feature uses a local vector database (Chroma) to search the
-# ``chatbot/chatbot.txt`` knowledge base and then calls the Groq API via the
-# OpenAI client.  To avoid the expensive model and database initialisation on
-# every request, we lazily load the embeddings and collection the first time
-# a chat query is processed.  Subsequent requests reuse the same global
-# objects.  See ``init_chatbot()`` and ``get_chatbot_response()`` below for
-# implementation details.
+# The chatbot uses a local vector database (Chroma) to search the
+# ``chatbot/chatbot.txt`` knowledge base.  Retrieved passages are fed to
+# a lightweight conversational model from Hugging Face (see
+# ``init_hf_model`` below).  To avoid the expensive model and database
+# initialisation on every request, embeddings and the vector collection are
+# loaded lazily the first time a chat query is processed.  Subsequent
+# requests reuse the same global objects.  See ``init_chatbot`` and
+# ``get_chatbot_response`` for implementation details.
 
 # Paths for the chatbot knowledge base and persistent vector store.  We
 # compute these relative to the current file so that the app can be deployed
@@ -56,42 +57,47 @@ CHATBOT_DB_DIR = "/tmp/chroma_db"
 # -----------------------------------------------------------------------------
 # Hugging Face model configuration
 #
-# The original chatbot implementation sent queries to the Groq API via the
-# OpenAI client.  To remove that dependency we now load a small conversational
-# model from Hugging Face.  ``HF_MODEL_NAME`` defines which model to use.  The
-# default value, ``facebook/blenderbot-400M-distill``, provides a good
-# balance between quality and resource consumption and is available on
-# Hugging Face without requiring authentication.  Should you wish to swap to
-# another conversational model (e.g. ``microsoft/DialoGPT-medium``), update
-# this constant accordingly.  The model and tokenizer are loaded lazily in
-# ``init_hf_model()`` to avoid impacting application startup time.
-HF_MODEL_NAME = "facebook/blenderbot-400M-distill"
+# The chatbot uses a small conversational model hosted on Hugging Face.  To
+# allow easy experimentation, the model name can be overridden via the
+# ``HF_CHATBOT_MODEL`` environment variable.  If unset, we fall back to
+# ``facebook/blenderbot-400M-distill`` which provides a good balance of
+# quality and resource usage and is freely available without authentication.
+HF_MODEL_NAME = os.getenv("HF_CHATBOT_MODEL", "facebook/blenderbot-400M-distill")
 
 # Global Hugging Face model and tokenizer.  These variables remain ``None``
 # until ``init_hf_model()`` is called.  They are reused across all chatbot
 # requests to prevent repeatedly loading the large model into memory.
-_hf_model = None
-_hf_tokenizer = None
+_hf_model: 'AutoModelForSeq2SeqLM | None' = None  # type: ignore[type-arg]
+_hf_tokenizer: 'AutoTokenizer | None' = None  # type: ignore[type-arg]
 
 def init_hf_model() -> None:
-    """Initialise the Hugging Face conversational model and tokenizer."""
+    """
+    Initialise the Hugging Face conversational model and tokenizer.
+
+    This function loads the specified ``HF_MODEL_NAME`` model and its
+    corresponding tokenizer.  The model is moved to GPU if available,
+    otherwise it runs on CPU.  Subsequent calls return immediately if
+    the model and tokenizer have already been instantiated.
+    """
     global _hf_model, _hf_tokenizer
     if _hf_model is not None and _hf_tokenizer is not None:
         return
 
-    from transformers import AutoModelForSeq2SeqLM, AutoTokenizer
+    from transformers import AutoModelForSeq2SeqLM, AutoTokenizer  # type: ignore
     import torch
 
-    model_name = "facebook/blenderbot-400M-distill"
+    model_name = HF_MODEL_NAME
     device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
 
+    # Load tokenizer and model from Hugging Face.  We deliberately avoid
+    # specifying ``use_auth_token`` here since the default models are
+    # publicly accessible.  Should you wish to use a private model, set
+    # HF_HOME/HF_TOKEN environment variables accordingly.
     tokenizer = AutoTokenizer.from_pretrained(model_name)
     model = AutoModelForSeq2SeqLM.from_pretrained(model_name).to(device)
 
     _hf_model = model
     _hf_tokenizer = tokenizer
-
-HF_MODEL_NAME = "facebook/blenderbot-400M-distill"
 _chatbot_embedder = None
 _chatbot_collection = None
 

backend/templates/base.html

@@ -778,7 +778,13 @@
   
 #CHATBOT START
 <!-- Chatbot Toggle Button -->
-<div id="chatbot-toggle" onclick="toggleChatbot()">💬 Chat</div>
+    <!--
+      The floating chat button toggles the visibility of the chat window.
+      We use a flex container here to ensure the emoji and text remain
+      centred on all screen sizes.  Additional media queries adjust the
+      button's position and padding for very small viewports.
+    -->
+    <div id="chatbot-toggle" onclick="toggleChatbot()">💬 Chat</div>
 
 <!-- Chatbox Popup -->
 <div id="chatbot-box">
@@ -790,29 +796,41 @@
 <style>
   #chatbot-toggle {
     position: fixed;
-    bottom: 20px;
-    right: 20px;
+    bottom: 1rem;
+    right: 1rem;
     background-color: #4caf50;
     color: white;
-    padding: 12px 15px;
+    padding: 0.75rem 1rem;
     border-radius: 30px;
     cursor: pointer;
     z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem;
+    line-height: 1;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
+    transition: background-color 0.2s ease;
+  }
+
+  #chatbot-toggle:hover {
+    background-color: #43a047; /* slightly darker green on hover */
   }
 
   #chatbot-box {
     position: fixed;
-    bottom: 80px;
-    right: 20px;
+    bottom: calc(1rem + 3.5rem); /* sit above the toggle on desktop */
+    right: 1rem;
     /* Default dimensions for larger screens */
-    width: 300px;
-    height: 400px;
+    width: 20rem;
+    height: 25rem;
     background: white;
     border: 2px solid #ccc;
     border-radius: 10px;
     display: none;
     flex-direction: column;
     z-index: 1000;
+    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
   }
 
   #chat-header {
@@ -835,18 +853,26 @@
     #chatbot-box {
       width: 90vw;
       height: 60vh;
-      bottom: 70px;
+      bottom: calc(1rem + 3rem);
       right: 5vw;
     }
     #chat-messages {
-      max-height: calc(60vh - 100px);
+      max-height: calc(60vh - 5.5rem);
+    }
+    #chatbot-toggle {
+      bottom: 1rem;
+      right: 1rem;
+      padding: 0.65rem 0.9rem;
+      font-size: 0.9rem;
     }
   }
+
   @media (max-width: 400px) {
     #chatbot-toggle {
-      bottom: 10px;
-      right: 10px;
-      padding: 10px 12px;
+      bottom: 0.75rem;
+      right: 0.75rem;
+      padding: 0.6rem 0.8rem;
+      font-size: 0.85rem;
     }
   }
 

requirements.txt

@@ -1,6 +1,3 @@
-
-
-
 flask
 flask_login
 flask_sqlalchemy