deployment

README.md

@@ -81,6 +81,11 @@ To run the tests, simply execute `pytest` at the project root. Make sure your vi
 pip install -r requirements-dev.txt
 ```
 
+Some tests are marked as `resource_intensive`. They take longer to run and might consume significant memory or CPU. To run them:
+```bash
+pytest -m resource_intensive
+```
+
 ## Load testing
 [k6](https://k6.io/open-source/) is an open-source tool for performing load testing. Test cases are defined in JavaScript files and can be run using the command `k6 run <filename>.js`.
 

champ/service.py

@@ -1,5 +1,6 @@
 # app/champ/service.py
 
+import logging
 from typing import Any, Dict, List, Literal, Optional, Sequence, Tuple
 
 from langchain_community.vectorstores import FAISS as LCFAISS
@@ -8,6 +9,8 @@ from langchain_core.messages import HumanMessage
 from .agent import build_champ_agent
 from .triage import safety_triage
 
+logger = logging.getLogger("uvicorn")
+
 
 class ChampService:
     vector_store: Optional[LCFAISS] = None
@@ -33,6 +36,7 @@ class ChampService:
             Tuple[str, Dict[str, Any], List[str]]: The replay, the triage_triggered object and the retrieved passages
         """
         if self.agent is None:
+            logger.error("CHAMP invoked before initialization")
             raise RuntimeError("CHAMP is not initialized yet.")
         # --- Safety triage micro-layer (before LLM) ---
         last_user_text = None

classes/base_models.py

@@ -7,7 +7,7 @@ from constants import (
     MAX_MESSAGE_LENGTH,
 )
 from pydantic import BaseModel, Field, field_validator
-from typing import List, Literal, Set
+from typing import Literal, Set
 
 
 class IdentifierBase(BaseModel):

classes/ocr_reader.py

@@ -1,8 +1,11 @@
+import logging
 from typing import Optional
 import cv2
 import easyocr
 import torch
 
+logger = logging.getLogger("uvicorn")
+
 
 class OCRReader:
     _instance: Optional["OCRReader"] = None
@@ -10,6 +13,7 @@ class OCRReader:
 
     def __new__(cls):
         if cls._instance is None:
+            logger.info("Loading the OCR model into memory...")
             cls._instance = super(OCRReader, cls).__new__(cls)
             cls._instance.ocr_reader = easyocr.Reader(
                 ["en", "fr"], gpu=torch.cuda.is_available()

classes/pii_filter.py

@@ -1,3 +1,4 @@
+import logging
 from typing import List, Optional
 from presidio_analyzer import AnalyzerEngine, Pattern, PatternRecognizer
 from presidio_analyzer.nlp_engine import NlpEngineProvider
@@ -5,6 +6,7 @@ from presidio_anonymizer import AnonymizerEngine
 from presidio_anonymizer.entities import OperatorConfig
 
 # from lingua import Language, LanguageDetector
+logger = logging.getLogger("uvicorn")
 
 
 def create_ssn_pattern_recognizer():
@@ -92,7 +94,7 @@ class PIIFilter:
 
     def __new__(cls):
         if cls._instance is None:
-            print("Initializing Presidio Engines (this should happen only once)...")
+            logger.info("Loading the prompt sanitizer into memory...")
             cls._instance = super(PIIFilter, cls).__new__(cls)
 
             # Define which models to use for which language

exceptions.py

@@ -53,7 +53,7 @@ class FileExtractionException(Exception):
 
 FILE_EXTRACTION_ERROR_STATUS_CODES = {
     FileExtractionError.INVALID_MIME_TYPE: STATUS_CODE_UNSUPPORTED_MEDIA_TYPE,
-    FileExtractionError.NO_TEXT: STATUS_CODE_INTERNAL_SERVER_ERROR,
+    FileExtractionError.NO_TEXT: STATUS_CODE_BAD_REQUEST,
     FileExtractionError.TEXT_EXTRACTION_TIMEOUT: STATUS_CODE_INTERNAL_SERVER_ERROR,
     FileExtractionError.UNSAFE_ZIP: STATUS_CODE_INTERNAL_SERVER_ERROR,
     FileExtractionError.FILE_TOO_LARGE: STATUS_CODE_CONTENT_TOO_LARGE,

helpers/file_helper.py

@@ -85,15 +85,17 @@ def safe_unzip_check(file_bytes: bytes) -> bool:
                             break
                         total += len(chunk)
                         if total > MAX_FILE_SIZE:
-                            return False  # bail out immediately
+                            raise FileExtractionException(
+                                FileExtractionError.FILE_TOO_LARGE
+                            )
         return True
     except zipfile.BadZipFile:
-        return False
+        raise FileExtractionException(FileExtractionError.UNSAFE_ZIP)
 
 
 def extract_text_from_docx(binary_content: bytes):
     if not safe_unzip_check(binary_content):
-        raise FileExtractionException(FileExtractionError.UNSAFE_ZIP)
+        return None
 
     # Load the binary data into a stream
     stream = io.BytesIO(binary_content)

main.py

@@ -1,29 +1,31 @@
-import os
 import asyncio
-import psutil
-import torch
-
+import logging
+import os
 from contextlib import asynccontextmanager
+from typing import Any, AsyncGenerator, Dict, List, Literal, Tuple
 
-from typing import AsyncGenerator, List, Literal, Tuple, Dict, Any
-
+import psutil
+import torch
 from dotenv import load_dotenv
-
-from fastapi import FastAPI, File, Form, Request, BackgroundTasks, Response, UploadFile
+from fastapi import BackgroundTasks, FastAPI, File, Form, Request, Response, UploadFile
 from fastapi.responses import HTMLResponse, JSONResponse, StreamingResponse
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
-
+from google import genai
+from openai import AsyncOpenAI
+from opentelemetry import trace
 from slowapi import Limiter
 from slowapi.util import get_remote_address
-
-from opentelemetry import trace
+from uvicorn.logging import DefaultFormatter
 
 from champ.rag import (
     create_embedding_model,
     create_session_vector_store,
     load_vector_store,
 )
+
+# from lingua import Language, LanguageDetectorBuilder
+from champ.service import ChampService
 from classes.base_models import (
     ChatMessage,
     ChatRequest,
@@ -36,10 +38,12 @@ from classes.ocr_reader import OCRReader
 from classes.pii_filter import PIIFilter
 from classes.prompt_injection_filter import PromptInjectionFilter
 from classes.session_conversation_store import SessionConversationStore
+from classes.session_document_store import SessionDocumentStore
 from classes.session_tracker import SessionTracker
 from constants import (
     MAX_ID_LENGTH,
     MAX_RAM_USAGE_PERCENT,
+    STATUS_CODE_BAD_REQUEST,
     STATUS_CODE_EXCEED_SIZE_LIMIT,
     STATUS_CODE_INTERNAL_SERVER_ERROR,
     STATUS_CODE_UNPROCESSABLE_CONTENT,
@@ -53,28 +57,19 @@ from exceptions import (
     FileValidationException,
 )
 from helpers.dynamodb_helper import log_event
-
-from openai import AsyncOpenAI
-from google import genai
-
-
-# from lingua import Language, LanguageDetectorBuilder
-
-from champ.service import ChampService
-
 from helpers.file_helper import (
     extract_text_from_file,
     is_valid_filename,
     replace_spaces_in_filename,
     validate_file,
 )
-from classes.session_document_store import SessionDocumentStore
-from helpers.message_helper import convert_messages
-from helpers.message_helper import convert_messages_langchain
+from helpers.message_helper import convert_messages, convert_messages_langchain
 from telemetry import setup_telemetry
 
 load_dotenv()
 
+logger = logging.getLogger("uvicorn")
+
 # -------------------- Config --------------------
 DEV = os.getenv("ENV", None) == "dev"
 
@@ -117,17 +112,17 @@ session_conversation_store = SessionConversationStore()
 
 
 def run_cleanup():
-    print("running cleanup")
+    logger.info("Running cleanup")
     deleted_session_ids = session_tracker.delete_inactive_sessions()
     if len(deleted_session_ids) > 0:
-        print(f"{len(deleted_session_ids)} inactive sessions will be deleted.")
+        logger.info(f"{len(deleted_session_ids)} inactive sessions will be deleted.")
     for session_id in deleted_session_ids:
         session_document_store.delete_session_documents(session_id)
         session_conversation_store.delete_session_conversations(session_id)
 
     while psutil.virtual_memory().percent > MAX_RAM_USAGE_PERCENT:
         oldest_session_id = session_tracker.delete_oldest_session()
-        print(f"Deleting {oldest_session_id} session because of high RAM usage")
+        logger.info(f"Deleting {oldest_session_id} session because of high RAM usage")
         if oldest_session_id is None:
             break
         session_document_store.delete_session_documents(oldest_session_id)
@@ -170,39 +165,44 @@ def _call_gemini(model_id: str, msgs: list[dict], temperature: float) -> str:
     return (resp.text or "").strip()
 
 
-def call_llm(
-    session_id: str,
-    model_type: str,
-    lang: Literal["en", "fr"],
-    conversation: List[ChatMessage],
-) -> AsyncGenerator[str, None] | Tuple[str, Dict[str, Any], List[str]]:
+def _call_champ(
+    session_id: str, lang: Literal["en", "fr"], conversation: List[ChatMessage]
+):
     tracer = trace.get_tracer(__name__)
 
-    if model_type == "champ":
-        session_documents = session_document_store.get_documents(session_id)
-        with tracer.start_as_current_span("vector_store"):
-            vector_store = (
-                base_vector_store
-                if session_documents is None
-                else create_session_vector_store(
-                    base_vector_store, embedding_model, session_documents
-                )
-            )
+    session_documents = session_document_store.get_documents(session_id)
+    if session_documents is None:
+        vector_store = base_vector_store
+    else:
+        vector_store = create_session_vector_store(
+            base_vector_store, embedding_model, session_documents
+        )
 
-        with tracer.start_as_current_span("ChampService"):
-            champ = ChampService(vector_store=vector_store, lang=lang)
+    with tracer.start_as_current_span("ChampService"):
+        champ = ChampService(vector_store=vector_store, lang=lang)
 
-        with tracer.start_as_current_span("convert_messages_langchain"):
-            msgs = convert_messages_langchain(conversation)
+    with tracer.start_as_current_span("convert_messages_langchain"):
+        msgs = convert_messages_langchain(conversation)
 
-        with tracer.start_as_current_span("invoke"):
-            reply, triage_meta, context = champ.invoke(msgs)
+    with tracer.start_as_current_span("invoke"):
+        reply, triage_meta, context = champ.invoke(msgs)
 
-        return reply, triage_meta, context
+    return reply, triage_meta, context
+
+
+def call_llm(
+    session_id: str,
+    model_type: str,
+    lang: Literal["en", "fr"],
+    conversation: List[ChatMessage],
+) -> AsyncGenerator[str, None] | Tuple[str, Dict[str, Any], List[str]]:
 
     if model_type not in MODEL_MAP:
         raise ValueError(f"Unknown model_type: {model_type}")
 
+    if model_type == "champ":
+        return _call_champ(session_id, lang, conversation)
+
     model_id = MODEL_MAP[model_type]
     document_contents = session_document_store.get_document_contents(session_id)
     msgs = convert_messages(conversation, lang=lang, docs_content=document_contents)
@@ -223,13 +223,24 @@ def call_llm(
 # -------------------- FastAPI setup --------------------
 @asynccontextmanager
 async def lifespan(app: FastAPI):
-    print(f"Is CUDA available: {torch.cuda.is_available()}")
+    logger = logging.getLogger("uvicorn")
+
+    if logger.handlers:
+        colored_formatter = DefaultFormatter(
+            fmt="%(levelprefix)s %(asctime)s | %(message)s", datefmt="%Y-%m-%d %H:%M:%S"
+        )
+        logger.handlers[0].setFormatter(colored_formatter)
+
+    logger.info("Logging configured!")
+
+    if torch.cuda.is_available():
+        logger.info("CUDA is available")
+    else:
+        logger.warning("CUDA is NOT available")
 
-    print("Loading the OCR model into memory...")
     # Loading the OCR Reader in advance, because loading the model takes time.
     OCRReader()
 
-    print("Loading the prompt sanitizer into memory...")
     # Idem for the prompt sanitizer.
     PIIFilter()
 
@@ -271,14 +282,16 @@ limiter = Limiter(key_func=get_remote_address)
 async def chat_endpoint(
     payload: ChatRequest, background_tasks: BackgroundTasks, request: Request
 ):
-    if not payload.human_message:
-        return JSONResponse({"error": "No message provided"}, status_code=400)
-
     session_id = payload.session_id
     model_type = payload.model_type
     lang = payload.lang
     conversation_id = payload.conversation_id
 
+    if not payload.human_message:
+        return JSONResponse(
+            {"error": "No message provided"}, status_code=STATUS_CODE_BAD_REQUEST
+        )
+
     session_tracker.update_session(session_id)
 
     prompt_injection_filter = PromptInjectionFilter()
@@ -370,7 +383,6 @@ async def chat_endpoint(
             },
         )
 
-    # Ajouter les passages récupérés
     background_tasks.add_task(
         log_event,
         user_id=payload.user_id,
@@ -402,7 +414,12 @@ def comment_endpoint(
     payload: CommentRequest, background_tasks: BackgroundTasks, request: Request
 ):
     if not payload.comment:
-        return JSONResponse({"error": "No comment provided"}, status_code=400)
+        logger.warning("Received empty comment")
+        return JSONResponse(
+            {"error": "No comment provided"}, status_code=STATUS_CODE_BAD_REQUEST
+        )
+
+    logger.info("Received comment")
 
     background_tasks.add_task(
         log_event,
@@ -459,6 +476,8 @@ async def upload_file(
         # )
         pii_filtered_file_text = pii_filter.sanitize(injection_filtered_file_text)
 
+    # TODO: total session file size should be related to the amount of text in the file
+    # instead of the size of the file
     if session_document_store.create_document(
         session_id, pii_filtered_file_text, file_name, file_size
     ):
@@ -478,11 +497,4 @@ def delete_file(
 
     file_name = replace_spaces_in_filename(file_name)
 
-    if not is_valid_filename(file_name):
-        return Response(status_code=STATUS_CODE_UNPROCESSABLE_CONTENT)
-
-    _, extension = os.path.splitext(file_name)
-    if extension not in SUPPORTED_FILE_EXTENSIONS:
-        return Response(status_code=STATUS_CODE_UNSUPPORTED_MEDIA_TYPE)
-
     session_document_store.delete_document(session_id, file_name)

static/app.js

@@ -14,10 +14,6 @@ const doneFileUploadBtn = document.getElementById('done-file-upload');
 const closeFileUploadBtn = document.getElementById('close-file-upload-btn');
 const fileListHtml = document.getElementById('file-list');
 
-const langSwitchContainer = document.getElementById('lang-switch-container');
-const enBtn = document.getElementById('btn-en');
-const frBtn = document.getElementById('btn-fr');
-
 document.createElement('svg');
 
 const HTML_UPLOAD_ICON = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -56,6 +52,8 @@ const consentBtn = document.getElementById('consentBtn');
 const frRadioBtn = document.getElementById('lang-fr');
 const enRadioBtn = document.getElementById('lang-en');
 const continueLangBtn = document.getElementById('lang-continue-btn');
+const frRadioBtnSettings = document.getElementById('lang-fr-settings');
+const enRadioBtnSettings = document.getElementById('lang-en-settings');
 
 const profileModal = document.getElementById('profile-modal');
 const profileBtn = document.getElementById('profileBtn');
@@ -78,6 +76,11 @@ const increaseFontSizeBtn = document.getElementById('increase-font-size-btn');
 const decreaseFontSizeBtn = document.getElementById('decrease-font-size-btn');
 const resetFontSizeBtn = document.getElementById('reset-font-size-btn');
 
+const settingsBtn = document.getElementById('settings-btn')
+const settingsModal = document.getElementById('settings-modal');
+const doneSettingsBtn = document.getElementById('done-settings');
+const closeSettingsBtn = document.getElementById('close-settings-btn');
+
 // Local in-browser chat history
 // We store for each model its chat history and a conversation id.
 const modelChats = {};
@@ -98,16 +101,6 @@ document.body.classList.add('no-scroll');
 
 let sessionFiles = [];
 
-function openModal() {
-  // Move the translation options at the top right corner of the screen
-  langSwitchContainer.classList.add('floating');
-}
-
-function closeModal() {
-  // Move the translation options in the toolbar
-  langSwitchContainer.classList.remove('floating');
-}
-
 function renderMessages() {
   chatWindow.innerHTML = '';
   const modelType = systemPresetSelect.value;
@@ -178,14 +171,14 @@ async function sendMessage() {
     });
 
     if (!res.ok) {
-      statusEl.className = 'status status-error';
-      if (data.error) {
-        statusEl.textContent = data.error;
+      statusEl.textContent = "";
+      if (res.status === 400) {
+        statusEl.dataset.i18n = "empty_message_error";
       } else {
-        statusEl.textContent = "";
         statusEl.dataset.i18n = "server_error";
-        applyTranslation();
       }
+      statusEl.className = 'status status-error';
+      applyTranslation();
       return;
     }
 
@@ -243,8 +236,6 @@ function openFileUploadOverlay(e) {
   e.preventDefault();
   // Let the stylesheet take over
   uploadFileOverlay.style.display = '';
-
-  openModal();
 }
 uploadFileBtn.addEventListener('click', openFileUploadOverlay);
 
@@ -438,7 +429,23 @@ async function uploadFile(file) {
     });
 
     if (!res.ok) {
-      showSnackbar(translations[currentLang]["file_upload_failed_server_error"], 'error');
+      if (res.status === 413) {
+        showSnackbar(translations[currentLang]["file_upload_failed_file_too_large"], 'error');
+      } else if (res.status === 400) {
+        // missing filename, filename too large, invalid file name, empty file, malformed file, no text in file
+        showSnackbar(translations[currentLang]["file_upload_failed_malformed_file"], 'error');
+      } else if (res.status === 415) {
+        // invalid mimetype or unsupported extension
+        showSnackbar(translations[currentLang]["file_upload_failed_unsupported_mime_type"], 'error');
+      } else if (res.status === 419) {
+        showSnackbar(translations[currentLang]["file_upload_failed_exceed_session_size"], 'error');
+      } else if (res.status === 500) {
+        // generic error, timeout, unsafe zip/docx
+        showSnackbar(translations[currentLang]["file_upload_failed_server_error"], 'error');
+      } else {
+        // unknown error occured.
+        showSnackbar(translations[currentLang]["file_upload_failed_unknown_error"], 'error');
+      }
       return false;
     }
 
@@ -485,14 +492,24 @@ async function deleteFile(file) {
 // Close the overlay
 closeFileUploadBtn.addEventListener('click', () => {
   uploadFileOverlay.style.display = 'none';
-  closeModal();
 });
 doneFileUploadBtn.addEventListener('click', () => {
   uploadFileOverlay.style.display = 'none';
-  closeModal();
 })
 
-// ----- Event wiring -----
+// Settings modal
+function openSettingsModal(e) {
+  e.preventDefault();
+  settingsModal.style.display = '';
+}
+settingsBtn.addEventListener('click', openSettingsModal);
+
+closeSettingsBtn.addEventListener('click', () => {
+  settingsModal.style.display = 'none';
+});
+doneSettingsBtn.addEventListener('click', () => {
+  settingsModal.style.display = 'none';
+});
 
 // Language modal logic
 continueLangBtn.addEventListener('click', () => {
@@ -511,6 +528,14 @@ enRadioBtn.addEventListener('change', () => {
   currentLang = enRadioBtn.value;
   setLanguage();
 });
+frRadioBtnSettings.addEventListener('change', () => {
+  currentLang = frRadioBtnSettings.value;
+  setLanguage();
+});
+enRadioBtnSettings.addEventListener('change', () => {
+  currentLang = enRadioBtnSettings.value;
+  setLanguage();
+});
 
 // Consent logic
 // When the checkbox is toggled, enable or disable the button
@@ -573,8 +598,6 @@ profileBtn.addEventListener('click', () => {
   gender = document.getElementById('gender').value;
   roles = Array.from(document.querySelectorAll('input[name="role"]:checked')).map(input => input.value);
   participantId = participantInput.value.trim();
-
-  closeModal();
 });
 
 sendBtn.addEventListener('click', sendMessage);
@@ -608,19 +631,15 @@ function openCommentOverlay(e) {
   e.preventDefault();
   // Let the stylesheet take over
   commentOverlay.style.display = '';
-
-  openModal();
 }
 leaveCommentText.addEventListener('click', openCommentOverlay);
 
 // Cancelling or closing the comment overlay simply hides the comment popup
 closeCommentBtn.addEventListener('click', () => {
   commentOverlay.style.display = 'none';
-  closeModal();
 });
 cancelCommentBtn.addEventListener('click', () => {
   commentOverlay.style.display = 'none';
-  closeModal();
 });
 
 async function sendComment() {
@@ -650,7 +669,11 @@ async function sendComment() {
     });
 
     if (!res.ok) {
-      statusComment.dataset.i18n = "server_error";
+      if (res.status === 400) {
+        statusComment.dataset.i18n = "empty_message_error";
+      } else {
+        statusComment.dataset.i18n = "server_error";
+      }
       statusComment.className = 'status-error';
       applyTranslation();
       return;
@@ -674,24 +697,14 @@ sendCommentBtn.addEventListener('click', sendComment);
 function setLanguage() { 
   applyTranslation();
 
-  document.getElementById('btn-en').classList.toggle('active', currentLang === 'en');
-  document.getElementById('btn-fr').classList.toggle('active', currentLang === 'fr');
-
   frRadioBtn.checked = currentLang === 'fr';
   enRadioBtn.checked = currentLang === 'en';
-  
+  frRadioBtnSettings.checked = currentLang === 'fr';
+  enRadioBtnSettings.checked = currentLang === 'en';
+
   localStorage.setItem('preferredLang', currentLang);
 };
 
-enBtn.addEventListener('click', () => {
-  currentLang = 'en';
-  setLanguage();
-});
-frBtn.addEventListener('click', () => {
-  currentLang = 'fr';
-  setLanguage();
-});
-
 function applyTranslation() {
   document.querySelectorAll('[data-i18n]').forEach(element => {
     const key = element.getAttribute('data-i18n');
@@ -702,7 +715,7 @@ function applyTranslation() {
 };
 
 const MIN_FONT_SIZE = 0.75;
-const MAX_FONT_SIZE = 2.5;
+const MAX_FONT_SIZE = 1.625;
 const FONT_SIZE_STEP = 0.125; // 1/8 rem for smooth increments
 
 let currentSize = 1; // 1rem = browser default (usually 16px)
@@ -731,11 +744,11 @@ statusComment.dataset.i18n = "ready";
 statusComment.className = 'status-ok';
 
 if (currentLang == "en") {
-  enBtn.classList.add('active');
   enRadioBtn.checked = true;
+  enRadioBtnSettings.checked = true;
 } else {
-  frBtn.classList.add('active');
   frRadioBtn.checked = true;
+  frRadioBtnSettings.checked = true;
 }
 
 applyTranslation();
@@ -745,5 +758,3 @@ renderFiles();
 if (window.innerWidth >= 460) {
   document.querySelector('details').setAttribute('open', '');
 }
-
-openModal();

static/style.css

@@ -34,7 +34,7 @@ a {
 }
 
 .chat-header {
-  padding: 8px 4px 12px;
+  padding: 0px 4px 12px;
   border-bottom: 1px solid #2c3554;
 }
 
@@ -54,21 +54,17 @@ a {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
-  margin-top: 10px;
   padding: 8px 4px;
   border-bottom: 1px solid #2c3554;
 }
 
 .control-group {
   display: flex;
-  flex-direction: column;
-  gap: 4px;
-  font-size: 0.85rem;
-  color: #d3dbff;
+  align-items: center;
+  gap: 8px;
 }
 
-.control-group select,
-.control-group input[type='range'] {
+.control-group select {
   background: #0d1324;
   border-radius: 8px;
   border: 1px solid #2c3554;
@@ -77,21 +73,36 @@ a {
   font-size: 0.85rem;
 }
 
-.secondary-button {
-  align-self: flex-end;
+.clear-button {
+  align-self: center;
   padding: 6px 12px;
   border-radius: 8px;
   border: 1px solid #2c3554;
+  background: #dc2626ba;
+  color: #f5f5f5;
+  font-size: 0.85rem;
+  cursor: pointer;
+}
+
+.clear-button:hover {
+  background: #dc2626;
+}
+
+.settings-button {
+  align-self: center;
+  padding: 12px 12px;
+  border-radius: 8px;
+  border: 1px solid #2c3554;
   background: #1f2840;
   color: #f5f5f5;
   font-size: 0.85rem;
   cursor: pointer;
+  margin-left: auto;
 }
 
-.secondary-button:hover {
+.settings-button:hover {
   background: #273256;
 }
-
 /* Chat window */
 .chat-window {
   flex: 1;
@@ -325,45 +336,6 @@ svg {
   color: #ff8080;
 }
 
-/* RESPONSIVE DESIGN */
-@media (max-width: 460px) {
-  /* Hide the text descriptions of the file action buttons */
-  .file-actions button span {
-    display: none;
-  }
-
-  /* Enlarge the chat container on mobile */
-  .chat-container {
-    margin: 0;
-    width: 100dvw;
-    height: 100dvh;
-  }
-
-  /* Reduce the font size of the title on mobile */
-  /* Also, add a gap between the title and the details */
-  .chat-header h1 {
-    margin: 0 0 10px 0;
-    font-size: 1.4rem;
-  }
-
-  /* Increase the size of the modals on mobile */
-  .modal-content {
-    width: 90%;
-  }
-}
-
-@media (min-width: 460px) {
-  details {
-    display: block;
-  }
-  details[open] {
-    display: block;
-  }
-  details summary {
-    display: none;
-  }
-}
-
 /* CONSENT OVERLAY FIXED VERSION */
 .modal {
   /* Covers the entier view port */
@@ -385,6 +357,11 @@ svg {
   background-color: rgba(0, 0, 0, 0.8);
 }
 
+.modal h2 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
 .slider {
   /* Smooth scrolling */
   scroll-snap-type: x mandatory;
@@ -435,17 +412,17 @@ svg {
 }
 
 .language-modal,
-.consent-box {
+.consent-box,
+.profile,
+.settings-modal-content {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  max-height: 400px;
 }
 
-.profile {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
+.language-modal,
+.consent-box {
+  max-height: 350px;
 }
 
 .form-group {
@@ -525,7 +502,7 @@ input[type="checkbox"] {
   accent-color: #007bff; /* Modern way to color native inputs */
 }
 
-.radio-group label, .checkbox-grid label, .checkbox-grid-lang label, {
+.radio-group label, .checkbox-grid label, .checkbox-grid-lang label {
   font-weight: 400;
   display: flex;
   align-items: center;
@@ -634,81 +611,97 @@ input[type='range'].disabled {
   transition: all 0.2s ease;
 }
 
-
-/* Translation */
-.lang-switch-container {
-  display: flex;
-  align-items: center;
-  font-family: sans-serif;
-  gap: 5px;
-
-  /* By default */
-  position: static;
-  margin-left: auto;
+/* Settings modal */
+.settings-modal-content  {
+  position: relative;
 }
 
-.lang-switch-container.floating {
-  /* At the top right corner, when a modal is opened */
-  position: fixed;
-  top: 20px;
-  right: 20px; 
-  z-index: 100; /* In front of the modals */
+/* Font size */
+.font-size-container {
+  display: flex;
+  gap: 12px;
+  margin-top: 8px;
+  justify-content: flex-start;
 }
 
-.lang-btn {
-  background: none;
-  border: none;
+.font-size-btn {
+  padding: 12px 20px;
+  border-radius: 8px;
+  border: 1px solid #2c3554;
+  background: #1f2840;
+  color: #f5f5f5;
+  font-size: 1rem;
+  font-weight: 600;
   cursor: pointer;
-  font-weight: bold;
-  color: #999999; /* Light grey for "disabled" look */
-  padding: 5px;
-  transition: color 0.3s;
+  transition: all 0.2s ease;
+  min-width: 60px;
 }
 
-.lang-btn.active {
-  color: #999999a1; /* Darker/Bold for active */
-  cursor: default;
-  pointer-events: none; /* User can't click the already active language */
+.font-size-btn:hover {
+  background: #273256;
+  border-color: #3d4a6e;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }
 
-.separator {
-  color: #ccc;
+.font-size-btn:active {
+  transform: translateY(0);
 }
 
-/* Font size */
-.font-size-container {
-  /* Center the container at the middle of the right screen edge. */
-  position: fixed;
-  top: 50%;
-  transform: translateY(-50%);
-  right: 20px;
+/* RESPONSIVE DESIGN */
+@media (max-width: 460px) {
+  /* Hide the text descriptions of the file action buttons */
+  .file-actions button span {
+    display: none;
+  }
 
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-  background: #0d0d0d;
-  border: 1px solid #2c3554;
-  border-radius: 8px;
-  padding: 10px 8px;
-}
+  /* Enlarge the chat container on mobile */
+  .chat-container {
+    margin: 0;
+    width: 100dvw;
+    height: 100dvh;
+  }
 
-.font-size-container button {
-  width: 36px;
-  height: 36px;
-  background: transparent;
-  color: white;
-  border: 1px solid #2c3554;
-  border-radius: 6px;
-  font-size: 1rem;
-  font-family: monospace;
-  cursor: pointer;
-  transition: background 0.2s, box-shadow 0.2s;
+  /* Reduce the font size of the title on mobile */
+  /* Also, add a gap between the title and the details */
+  .chat-header h1 {
+    margin: 0 0 10px 0;
+    font-size: 1.4rem;
+  }
 
-  font-size: 14px; /* px so it ignores root font-size changes */
+  /* Increase the size of the modals on mobile */
+  .modal-content {
+    width: 90%;
+  }
 }
 
-.font-size-container button:hover {
-  background: transparent;
-  box-shadow: 0 0 8px #007bff;
+@media (max-height: 720px) {
+  /* Enlarge the chat container on small screens */
+  .chat-container {
+    margin: 0;
+    width: 100dvw;
+    height: 100dvh;
+  }
+
+  /* Reduce the font size of the title */
+  .chat-header h1 {
+    font-size: 1.4rem;
+  }
+
+  /* Increase the size of the modals */
+  .modal-content {
+    width: 90%;
+  }
 }
+
+@media (min-width: 460px) {
+  details {
+    display: block;
+  }
+  details[open] {
+    display: block;
+  }
+  details summary {
+    display: none;
+  }
+}

static/translations.js

@@ -14,7 +14,9 @@ const translations = {
     conversation_cleared: "Conversation cleared. Start a new chat!",
 
     choose_language_title: "Choose your language",
-    change_language_instructions: "You can change the language at any time using the options in the toolbar, or in the top right corner when a dialog is open.",
+    change_language_instructions: "You can change the language at any time in the Settings menu located in the toolbar.",
+    change_language: "Change language",
+    change_font_size: "Change font size",
 
     consent_title: "Before you continue",
     consent_desc: "By using this demo you agree that your messages will be shared with us for processing. Do not provide sensitive or private details.",
@@ -47,8 +49,8 @@ const translations = {
 
     file_title: "Add a file",
     file_inactivity: "Uploaded files are automatically deleted after 4 hours of inactivity.",
-    file_format: "Accepted formats: PDF, TXT, DOCX, JPG, JPEG, PNG (Max 10MB).",
-    file_size_limit: "The total size of all uploaded files cannot exceed 30MB.",
+    file_format: "Accepted formats: PDF, TXT, DOCX, JPG, JPEG, PNG (Max 10 MB).",
+    file_size_limit: "The total size of all uploaded files cannot exceed 30 MB.",
     error_file_format: "Please upload a picture or a document in PDF, TXT, or DOCX format. Other file types are not supported.",
     error_file_size: "File size exceeds limit. Maximum allowed: 10MB.",
     error_total_file_size: "The total size of the files would exceed the maximum limit of 30 MB. Please free up space by deleting files.",
@@ -64,12 +66,19 @@ const translations = {
     file_add_instructions_suffix: " to browse",
     click: "Click",
 
-    file_upload_failed_server_error: "File upload was unsuccessful due to a server error.",
-    file_upload_failed_network_error: "File upload was unsuccessful due to a network error.",
+    settings_title: "Settings",
+
+    file_upload_failed_server_error: "File upload failed: server error.",
+    file_upload_failed_file_too_large: "File upload failed: size exceeds 10 MB limit",
+    file_upload_failed_malformed_file: "File upload failed: file invalid",
+    file_upload_failed_unsupported_mime_type: "File upload failed: file must be in PDF, TXT, DOCX, JPEG or PNG format",
+    file_upload_failed_exceed_session_size: "File upload failed: the total size of all uploaded files exceeds 30 MB",
+    file_upload_failed_network_error: "File upload failed: network error",
+    file_upload_failed_unknown_error: "File upload failed: unknown error",
     file_upload_success: "File upload successful!",
 
-    file_delete_failed_server_error: "File deletion was unsuccessful due to a server error.",
-    file_delete_failed_network_error: "File deletion was unsuccessful due to a network error.",
+    file_delete_failed_server_error: "File deletion failed: server error",
+    file_delete_failed_network_error: "File deletion failed: network error",
     file_delete_success: "File deletion successful!",
 
     done_btn: "Done",
@@ -79,6 +88,7 @@ const translations = {
     model_changed: "Model changed",
     sending: "Sending...",
     no_reply: "(No reply)",
+    empty_message_error: "Message cannot be empty",
     
     server_error: "Error from server",
     network_error: "Network error",
@@ -99,10 +109,12 @@ const translations = {
     gemini_conservative: "Gemini-3 (Prudent)",
     gemini_creative: "Gemini-3 (Créatif)",
     btn_clear: "Réinitialiser",
-    conversation_cleared: "Conversation réinitialisée. Commencer une nouvelle conversation !",
+    conversation_cleared: "Conversation réinitialisée.",
 
     choose_language_title: "Choisissez votre langue",
-    change_language_instructions: "Vous pouvez changer la langue à tout moment grâce aux options dans la barre d'outils, ou en haut à droite lorsqu'une fenêtre est ouverte.",
+    change_language_instructions: "Vous pouvez changer la langue à tout moment dans le menu Paramètres situé dans la barre d'outils.",
+    change_language: "Changer la langue",
+    change_font_size: "Modifier la taille de la police",
 
     consent_title: "Avant de poursuivre",
     consent_desc: "En interagissant avec cette démo, vous acceptez que vos messages soient partagés avec nous à des fins de traitement. Veillez à ne partager aucune information sensible ou privée.",
@@ -152,12 +164,19 @@ const translations = {
     file_add_instructions_suffix: " pour parcourir",
     click: "Cliquez",
 
-    file_upload_failed_server_error: "Le téléversement du fichier a échoué en raison d'une erreur du serveur.",
-    file_upload_failed_network_error: "Le téléversement du fichier a échoué en raison d'une erreur réseau.",
+    settings_title: "Paramètres",
+
+    file_upload_failed_server_error: "Échec du téléversement: erreur du serveur.",
+    file_upload_failed_file_too_large: "Échec du téléversement: la taille du fichier dépasse la limite de 10 Mo",
+    file_upload_failed_malformed_file: "Échec du téléversement: le fichier est invalide",
+    file_upload_failed_unsupported_mime_type: "Échec du téléversement: le fichier doit être en format PDF, TXT, DOCX, PNG ou JPEG",
+    file_upload_failed_exceed_session_size: "Échec du téléversement: la taille totale des fichiers téléversés dépassent 30 Mo",
+    file_upload_failed_network_error: "Échec du téléversement: erreur réseau",
+    file_upload_failed_unknown_error: "Échec du téléversement: erreur inconnu",
     file_upload_success: "Téléversement du fichier réussi !",
 
-    file_delete_failed_server_error: "La suppression du fichier a échoué en raison d'une erreur du serveur.",
-    file_delete_failed_network_error: "La suppression du fichier a échoué en raison d'une erreur réseau.",
+    file_delete_failed_server_error: "Échec de la suppression: erreur du serveur",
+    file_delete_failed_network_error: "Échec de la suppression: erreur réseau",
     file_delete_success: "Suppression du fichier réussie !",
 
     done_btn: "Terminer",
@@ -167,6 +186,7 @@ const translations = {
     model_changed: "Changement de modèle",
     sending: "Envoi...",
     no_reply: "(Aucune réponse)",
+    empty_message_error: "Le message ne peut pas être vide.",
 
     server_error: "Erreur du serveur",
     network_error: "Erreur réseau",

templates/index.html

@@ -31,22 +31,47 @@
       <!-- Controls bar -->
       <div class="controls-bar">
         <div class="control-group">
-          <label for="systemPreset" data-i18n="model_selection"></label>
-          <select id="systemPreset">
-            <option value="champ" selected>CHAMP</option>
-            <!-- champ is our model -->
-            <option value="openai">GPT-5.2</option>
-            <option value="google-conservative" data-i18n="gemini_conservative"></option>
-            <option value="google-creative" data-i18n="gemini_creative"></option>
-          </select>
+          <fieldset class="control-group">
+            <legend for="systemPreset" data-i18n="model_selection"></legend>
+            <select id="systemPreset">
+              <option value="champ" selected>CHAMP</option>
+              <!-- champ is our model -->
+              <option value="openai">GPT-5.2</option>
+              <option value="google-conservative" data-i18n="gemini_conservative"></option>
+              <option value="google-creative" data-i18n="gemini_creative"></option>
+            </select>
+            <button id="clearBtn" class="clear-button" data-i18n="btn_clear"></button>
+          </fieldset>
         </div>
 
-        <button id="clearBtn" class="secondary-button" data-i18n="btn_clear"></button>
+        <button id="settings-btn" class="settings-button">⚙️</button>
+      </div>
+
+      <!-- Settings overlay -->
+      <div id="settings-modal" class="modal" style="display: none;">
+        <div class="modal-content settings-modal-content">
+          <button id="close-settings-btn" class="closeBtn">×</button>
+          <h2 data-i18n="settings_title"></h2>
+          <h3 data-i18n="change_language"></h3>
+          <div class="form-group">
+            <span class="group-label" data-i18n="language"></span>
+            <div class="checkbox-grid-lang">
+              <label for="lang-fr-settings"><input type="radio" name="lang-settings" value="fr" id="lang-fr-settings"><span>Français</span></label>
+              <label for="lang-en-settings"><input type="radio" name="lang-settings" value="en" id="lang-en-settings"><span>English</span></label>
+            </div>
+          </div>
+
+          <h3 data-i18n="change_font_size"></h3>
+          <div class="font-size-container">
+            <button id="increase-font-size-btn" class="font-size-btn" style="font-size: 1.2rem;">Aa+</button> 
+            <button id="reset-font-size-btn" class="font-size-btn" style="font-size: 1rem;">Aa</button>
+            <button id="decrease-font-size-btn" class="font-size-btn" style="font-size: 0.8rem;">Aa-</button>
+          </div>
 
-        <div class="lang-switch-container" id="lang-switch-container">
-          <button id="btn-en" class="lang-btn">EN</button>
-          <span class="separator">|</span>
-          <button id="btn-fr" class="lang-btn">FR</button>
+          <!-- div to center the button -->
+          <div class="center-button">
+            <button id="done-settings" class="ok-button" style="margin-top: 20px;" data-i18n="done_btn"></button>
+          </div>
         </div>
       </div>
 
@@ -170,7 +195,7 @@
       <!-- Comment overlay -->
       <div id="comment-overlay" class="modal" style="display:none">
         <div class="modal-content comment-area">
-          <button id="closeCommentBtn" class="closeBtn" aria-label="Close">×</button>
+          <button id="closeCommentBtn" class="closeBtn">×</button>
           <h2 data-i18n="comment_title"></h2>
           <textarea
             id="commentInput"
@@ -185,7 +210,7 @@
       <!-- Upload file overlay -->
       <div id="upload-file-overlay" class="modal" style="display:none">
         <div class="modal-content upload-file-area">
-          <button id="close-file-upload-btn" class="closeBtn" aria-label="Close">×</button>
+          <button id="close-file-upload-btn" class="closeBtn">×</button>
           <h2 data-i18n="file_title"></h2>
           <p data-i18n="file_inactivity"></p>
           <p data-i18n="file_format"></p>
@@ -216,12 +241,6 @@
 
     <div id="snackbar-container"></div>
 
-    <div class="font-size-container">
-      <button id="increase-font-size-btn" class="font-size-btn">Aa+</button> 
-      <button id="reset-font-size-btn" class="font-size-btn">Aa</button>
-      <button id="decrease-font-size-btn" class="font-size-btn">Aa-</button>
-    </div>
-
     <script src="/static/translations.js"></script>
     <script src="/static/snackbar.js"></script>
     <script src="/static/app.js"></script>