Upload 10 files

Deploy.py

@@ -0,0 +1,40 @@
+import os, ssl
+from huggingface_hub import HfApi, create_repo
+
+# --- PATCH SSL ---
+if hasattr(ssl, '_create_unverified_context'):
+    ssl._create_default_https_context = ssl._create_unverified_context
+
+# --- CONFIGURATION ---
+TOKEN = "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" # Allez sur hf.co/settings/tokens (Rôle: WRITE)
+USER = "OUAREDAEK"
+SPACE_NAME = "AskLAQ3"
+REPO_ID = f"{USER}/{SPACE_NAME}"
+
+def deploy():
+    api = HfApi(token=TOKEN)
+    print(f"🚀 Création du Space {REPO_ID}...")
+    create_repo(repo_id=REPO_ID, repo_type="space", space_sdk="gradio", exist_ok=True, token=TOKEN)
+
+    print("📤 Envoi des fichiers en cours...")
+    # Liste spécifique des fichiers à envoyer
+    files_to_upload = [
+        "app.py", "requirements.txt", "dataset_2026.csv", "embeddings_questions.pt"
+    ]
+    
+    # Envoi des fichiers racines
+    for file in files_to_upload:
+        if os.path.exists(file):
+            api.upload_file(path_or_fileobj=file, path_in_repo=file, repo_id=REPO_ID, repo_type="space")
+    
+    # Envoi des dossiers templates et static
+    for folder in ["templates", "static"]:
+        if os.path.exists(folder):
+            api.upload_folder(folder_path=folder, path_in_repo=folder, repo_id=REPO_ID, repo_type="space")
+
+    print("\n" + "="*50)
+    print(f"✅ TERMINÉ ! Accès : https://{USER.lower()}-{SPACE_NAME.lower()}.hf.space")
+    print("="*50)
+
+if __name__ == "__main__":
+    deploy()

Dockerfile

@@ -0,0 +1,26 @@
+FROM python:3.10-slim
+
+# Évite les problèmes d'affichage logs
+ENV PYTHONUNBUFFERED=1
+
+# Installer dépendances système (important pour torch & pandas)
+RUN apt-get update && apt-get install -y \
+    git \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+# Dossier de travail
+WORKDIR /app
+
+# Copier fichiers
+COPY . /app
+
+# Installer dépendances Python
+RUN pip install --no-cache-dir --upgrade pip
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Port utilisé par Hugging Face
+EXPOSE 7860
+
+# Lancer ton app
+CMD ["python", "app.py"]

README.txt

@@ -0,0 +1,78 @@
+# AskLAQ2 - Local Q&A System
+
+## Overview
+AskLAQ2 is a local question-answering system that runs completely offline on your machine. It uses sentence embeddings to find the most relevant answers from your dataset.
+
+## System Requirements
+- Windows 7/8/10/11, macOS, or Linux
+- 4GB RAM minimum (8GB recommended)
+- 2GB free disk space
+- Python 3.8 or higher
+
+## Installation
+
+### Option 1: Using the Installer (Windows)
+1. Double-click `install.bat`
+2. Follow the on-screen instructions
+
+### Option 2: Manual Installation
+1. Ensure Python 3.8+ is installed
+2. Open terminal/command prompt in this folder
+3. Run: `pip install -r requirements.txt`
+
+## Running the Application
+
+### Windows:
+- Double-click `AskLAQ2.exe`
+- OR Run `launch_app.py` with Python
+
+### Mac/Linux:
+- Open terminal in this folder
+- Run: `python launch_app.py`
+
+## Application Structure
+- `app.py` - Main Flask application
+- `gradio_app.py` - Gradio interface wrapper
+- `launch_app.py` - Application launcher
+- `dataset_2026.csv` - Your dataset
+- `embeddings_questions.pt` - Pre-computed embeddings
+- `user_interactions.json` - User interaction log
+- `templates/index.html` - Web interface
+- `static/script.js` - Frontend JavaScript
+
+## How to Use
+1. Launch the application
+2. A browser window will open automatically
+3. Type your question in the input box
+4. Click "Get Answer" or press Enter
+5. View the response from your dataset
+
+## Troubleshooting
+
+### Application won't start:
+- Ensure all files are in the same folder
+- Check if Python is installed correctly
+- Try running: `python app.py` directly
+
+### No answers returned:
+- Check if `dataset_2026.csv` exists
+- Verify `embeddings_questions.pt` is in the folder
+
+### Performance issues:
+- Close other applications to free memory
+- Consider using a smaller dataset
+
+## Updating
+To update the dataset:
+1. Replace `dataset_2026.csv` with your new file
+2. Delete `embeddings_questions.pt` (it will be regenerated)
+3. Restart the application
+
+## Support
+For issues or questions, please check:
+1. Application logs in the terminal
+2. `user_interactions.json` for error history
+3. Ensure all required files are present
+
+## Version: 1.0.0
+© 2024 AskLAQ2 Application

app.py

@@ -0,0 +1,172 @@
+import os, random
+import torch
+import pandas as pd
+from flask import Flask, render_template, request, jsonify
+from sentence_transformers import SentenceTransformer, util
+import gradio as gr
+
+BASE_DIR = os.path.abspath(os.path.dirname(__file__))
+
+app = Flask(
+    __name__,
+    template_folder=os.path.join(BASE_DIR, "templates"),
+    static_folder=os.path.join(BASE_DIR, "static")
+)
+
+CSV_DATA = "dataset_2026.csv"
+EMB_FILE = "embeddings_questions.pt"
+TOP_K_RECOMMANDATIONS = 5
+
+print("🔄 Chargement du modèle...")
+try:
+    model = SentenceTransformer(
+        "OrdalieTech/Solon-embeddings-mini-beta-1.1",
+        device="cpu",
+        trust_remote_code=True
+    )
+    print("✓ Modèle principal (Solon) chargé")
+except Exception as e:
+    print(f"⚠️ Échec du modèle principal (probablement dû à la version Hugging Face Hub): {e}")
+    print("🔄 Chargement du modèle de secours (paraphrase-multilingual)...")
+    model = SentenceTransformer(
+        "paraphrase-multilingual-MiniLM-L12-v2",
+        device="cpu"
+    )
+    print("✓ Modèle de secours chargé avec succès !")
+
+df_cache = None
+
+def load_data():
+    global df_cache
+    if df_cache is None:
+        try:
+            # We enforce reading the Latin-1 CSV using ';' as sep.
+            df_cache = pd.read_csv(CSV_DATA, sep=";", encoding="latin-1")
+            df_cache.columns = df_cache.columns.str.strip()
+        except:
+            # Fallback if somehow it's utf-8 with comma
+            df_cache = pd.read_csv(CSV_DATA, sep=None, engine='python', encoding="utf-8")
+            df_cache.columns = df_cache.columns.str.strip()
+    return df_cache
+
+def load_or_create_embeddings(df):
+    if os.path.exists(EMB_FILE):
+        emb = torch.load(EMB_FILE, map_location="cpu")
+        if emb.shape[0] == len(df) and emb.shape[1] == model.get_sentence_embedding_dimension():
+            return emb
+        print("⚠️ Dimensions embeddings incorrectes, recréation...")
+
+    print("🔨 Création embeddings...")
+    questions = df["Question"].astype(str).tolist()
+    emb = model.encode(
+        questions,
+        convert_to_tensor=True,
+        normalize_embeddings=True
+    )
+    torch.save(emb, EMB_FILE)
+    return emb
+
+def enrich_message(base):
+    return random.choice([
+        f"Bonne question 🙂\n\n{base}",
+        f"Voici la réponse détaillée :\n\n{base}",
+        f"Voici ce que j'ai trouvé :\n\n{base}",
+        base
+    ])
+
+def process_question(question):
+    df = load_data()
+    emb_base = load_or_create_embeddings(df)
+
+    emb_q = model.encode(question, convert_to_tensor=True, normalize_embeddings=True)
+    scores = util.pytorch_cos_sim(emb_q, emb_base)[0]
+
+    best_idx = torch.argmax(scores).item()
+    confidence = int(scores[best_idx].item() * 100)
+
+    if confidence < 40:
+        recs = df["Question"].sample(min(TOP_K_RECOMMANDATIONS, len(df))).tolist()
+        return {
+            "response": "Je ne suis pas sûr",
+            "confidence": confidence,
+            "matched": "—",
+            "intent": "Inconnu",
+            "recs": recs,
+            "service": None,
+            "lat": None,
+            "lon": None
+        }
+
+    row = df.iloc[best_idx]
+    
+    service_val = str(row["Service"]).strip() if pd.notna(row["Service"]) else None
+    if service_val and service_val.lower() in ['nan', 'none', 'null', '']: service_val = None
+
+    link_val = str(row["ServiceLink"]).strip() if pd.notna(row["ServiceLink"]) else None
+    if link_val and link_val.lower() in ['nan', 'none', 'null', '']: link_val = None
+
+    try:
+        raw_lat = str(row["Latitude"]).replace(',', '.')
+        raw_lon = str(row["Longitude"]).replace(',', '.')
+        lat_val = float(raw_lat)
+        lon_val = float(raw_lon)
+    except Exception:
+        lat_val = None
+        lon_val = None
+
+    return {
+        "response": enrich_message(row["Response"]),
+        "confidence": confidence,
+        "matched": row["Question"],
+        "intent": row["Intent"],
+        "recs": [],
+        "service": service_val,
+        "link": link_val,
+        "lat": lat_val,
+        "lon": lon_val
+    }
+
+@app.route("/")
+def index():
+    return render_template("index.html")
+
+@app.route("/ask", methods=["POST"])
+def ask():
+    return jsonify(process_question(request.json.get("question", "")))
+
+@app.route("/api/services", methods=["GET"])
+def get_services():
+    df = load_data()
+    valid_df = df.dropna(subset=["Service", "Latitude", "Longitude"])
+    
+    services = []
+    seen = set()
+
+    for _, row in valid_df.iterrows():
+        try:
+            name = str(row["Service"]).strip()
+            lat = float(str(row["Latitude"]).replace(',', '.'))
+            lon = float(str(row["Longitude"]).replace(',', '.'))
+
+            if name and name not in seen:
+                services.append({"service": name, "lat": lat, "lon": lon})
+                seen.add(name)
+        except Exception:
+            pass
+            
+    return jsonify({"status": "success", "services": services})
+
+# ==============================
+# HUGGING FACE SPACES (GRADIO)
+# ==============================
+def gradio_chat(message, history):
+    return process_question(message)["response"]
+
+iface = gr.ChatInterface(
+    fn=gradio_chat,
+    title="AskLaQ Assistant"
+)
+
+if __name__ == "__main__":
+    print("🚀 Serveur Flask lancé sur http://127.0.0.1:7860")
+    app.run(host="0.0.0.0", port=7860, debug=True, use_reloader=False)

embeddings.py

@@ -0,0 +1,54 @@
+import torch
+import pandas as pd
+from sentence_transformers import SentenceTransformer
+
+# ملفات
+CSV_DATA = "dataset_2026.csv"
+EMB_FILE = "embeddings_questions.pt"
+
+# ✅ موديل مستقر يدعم العربية/الفرنسية/الإنجليزية
+model = SentenceTransformer("paraphrase-multilingual-MiniLM-L12-v2")
+
+print("📥 Chargement du dataset...")
+
+try:
+    df = pd.read_excel(CSV_DATA, engine="openpyxl")
+except Exception:
+    # Fallback to CSV if it's genuinely a CSV
+    df = pd.read_csv(CSV_DATA, sep=None, engine="python", encoding="utf-8", on_bad_lines="skip")
+
+# ✅ nettoyage colonnes (fix BOM + espaces)
+df.columns = df.columns.str.replace('\ufeff', '', regex=True).str.strip()
+
+print("📊 Colonnes détectées :", df.columns.tolist())
+
+required_cols = ["Intent", "SubIntent", "Question"]
+for col in required_cols:
+    if col not in df.columns:
+        raise ValueError(f"❌ Column '{col}' not found. Found: {df.columns}")
+
+print("🧠 Construction des phrases enrichies...")
+texts = (
+    df["Intent"].astype(str) + " " +
+    df["SubIntent"].astype(str) + " " +
+    df["Question"].astype(str)
+).tolist()
+
+print(f"✅ {len(texts)} entrées chargées")
+print("🧠 Calcul des embeddings...")
+
+# ✅ batching لتفادي مشاكل الذاكرة وتسريع العملية
+embeddings = model.encode(
+    texts,
+    batch_size=32,                 # تقدر تنقصها إذا كان RAM ضعيف
+    show_progress_bar=True,
+    convert_to_tensor=True,
+    normalize_embeddings=True
+)
+
+print("💾 Sauvegarde des embeddings...")
+
+# ✅ حفظ embeddings
+torch.save(embeddings, EMB_FILE)
+
+print("✅ Terminé :", embeddings.shape)

embeddings_questions.pt

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f7e519df203613a3e4556e0e9962da294fc835c3ac03058b58977428cf7176b7
+size 1537668

requirements.txt

@@ -0,0 +1,9 @@
+flask
+torch
+pandas
+sentence-transformers
+gradio
+fastapi
+uvicorn
+a2wsgi
+nest_asyncio

static/script.js

@@ -0,0 +1,386 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const input = document.getElementById('question');
+    const sendBtn = document.getElementById('sendBtn');
+    const chatContainer = document.getElementById('chat');
+    const globalIntent = document.getElementById('global-intent');
+    const globalConfidence = document.getElementById('global-confidence');
+    const inputContainer = document.getElementById('input-container');
+
+    let isWaiting = false;
+    let messageCounter = 0; // To generate unique IDs for maps
+
+    // Auto-resize textarea
+    input.addEventListener('input', function() {
+        this.style.height = 'auto';
+        this.style.height = (this.scrollHeight) + 'px';
+        if (parseFloat(this.style.height) > 200) {
+            this.style.overflowY = 'auto';
+        } else {
+            this.style.overflowY = 'hidden';
+        }
+        
+        // Enable/disable send button
+        if(this.value.trim().length > 0 && !isWaiting) {
+            sendBtn.removeAttribute('disabled');
+        } else {
+            sendBtn.setAttribute('disabled', 'true');
+        }
+    });
+
+    input.addEventListener('focus', () => inputContainer.classList.add('focused'));
+    input.addEventListener('blur', () => inputContainer.classList.remove('focused'));
+
+    input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            sendMessage();
+        }
+    });
+
+    sendBtn.addEventListener('click', () => {
+        sendMessage();
+    });
+
+    // Handle clicks on recommendation chips
+    chatContainer.addEventListener('click', (e) => {
+        if (e.target.classList.contains('rec-chip')) {
+            const question = e.target.textContent;
+            input.value = question;
+            // Hack to trigger auto-resize logic before sending
+            input.dispatchEvent(new Event('input'));
+            sendMessage();
+        }
+    });
+
+    async function sendMessage() {
+        const text = input.value.trim();
+        if (!text || isWaiting) return;
+
+        // Reset input
+        input.value = '';
+        input.style.height = 'auto';
+        sendBtn.setAttribute('disabled', 'true');
+
+        // Add User Message
+        appendMessage('user', text);
+        
+        // Scroll to bottom
+        scrollToBottom();
+
+        // Show loading indicator
+        isWaiting = true;
+        const loadingId = appendLoading();
+        scrollToBottom();
+
+        try {
+            const response = await fetch('/ask', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ question: text })
+            });
+
+            if (!response.ok) {
+                throw new Error('Erreur de communication avec le serveur');
+            }
+
+            const data = await response.json();
+            
+            // Remove loading
+            document.getElementById(loadingId).remove();
+
+            // Handle Bot Response
+            handleBotResponse(data);
+
+        } catch (error) {
+            console.error('Error:', error);
+            document.getElementById(loadingId).remove();
+            appendMessage('bot', 'Désolé, une erreur est survenue lors de la communication avec le serveur.');
+        } finally {
+            isWaiting = false;
+            if(input.value.trim().length > 0) {
+                sendBtn.removeAttribute('disabled');
+            }
+            scrollToBottom();
+        }
+    }
+
+    function appendMessage(role, text) {
+        messageCounter++;
+        const row = document.createElement('div');
+        row.className = `message-row ${role}`;
+        
+        const avatarSvg = role === 'user' 
+            ? '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>'
+            : '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path><path d="M7 10v4"></path><path d="M11 10v4"></path></svg>';
+
+        // Format basic markdown-like text elements (newlines)
+        const formattedText = text.replace(/\n/g, '<br>');
+
+        row.innerHTML = `
+            <div class="message-content">
+                <div class="avatar ${role}">${avatarSvg}</div>
+                <div class="message-body">
+                    <p>${formattedText}</p>
+                </div>
+            </div>
+        `;
+        
+        chatContainer.appendChild(row);
+        return row;
+    }
+
+    function appendLoading() {
+        const id = 'loading-' + Date.now();
+        const row = document.createElement('div');
+        row.className = 'message-row bot';
+        row.id = id;
+        
+        row.innerHTML = `
+            <div class="message-content">
+                <div class="avatar bot">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path><path d="M7 10v4"></path><path d="M11 10v4"></path></svg>
+                </div>
+                <div class="message-body">
+                    <div class="typing-indicator">
+                        <div class="typing-dot"></div>
+                        <div class="typing-dot"></div>
+                        <div class="typing-dot"></div>
+                    </div>
+                </div>
+            </div>
+        `;
+        
+        chatContainer.appendChild(row);
+        return id;
+    }
+
+    function handleBotResponse(data) {
+        messageCounter++;
+        const row = document.createElement('div');
+        row.className = 'message-row bot';
+        
+        const contentDiv = document.createElement('div');
+        contentDiv.className = 'message-content';
+
+        const avatar = document.createElement('div');
+        avatar.className = 'avatar bot';
+        avatar.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path><path d="M7 10v4"></path><path d="M11 10v4"></path></svg>';
+        
+        const bodyDiv = document.createElement('div');
+        bodyDiv.className = 'message-body';
+
+        // 1. Add Answer Text
+        const textP = document.createElement('p');
+        textP.innerHTML = (data.response || '').replace(/\n/g, '<br>');
+        bodyDiv.appendChild(textP);
+
+        // Update header tracking
+        if (data.intent) globalIntent.textContent = `Intent: ${data.intent}`;
+        if (data.confidence !== undefined) {
+             const confVal = typeof data.confidence === 'number' ? data.confidence.toFixed(1) : parseFloat(data.confidence).toFixed(1);
+             globalConfidence.textContent = `Confiance: ${confVal}%`;
+        }
+
+        // Rich Content Container
+        const richContainer = document.createElement('div');
+        richContainer.className = 'rich-content';
+
+        // 2. Service Card
+        const hasService = data.service && data.service !== '';
+        const hasLocation = data.lat !== null && data.lon !== null && data.lat !== undefined;
+        
+        if (hasService || hasLocation || (data.link && data.link !== '')) {
+            const serviceCard = document.createElement('div');
+            serviceCard.className = 'service-card';
+            
+            let btnHtml = '';
+            if (data.link && data.link !== '') {
+                // Ensure proper link parsing if needed
+                btnHtml = `
+                <a href="${data.link}" target="_blank" class="btn btn-outline" title="${data.link}">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
+                    Ouvrir le lien
+                </a>`;
+            }
+
+            let navBtnHtml = '';
+            if (data.lat && data.lon) {
+                const mapUrl = `https://www.google.com/maps?q=${data.lat},${data.lon}`;
+                navBtnHtml = `
+                <a href="${mapUrl}" target="_blank" class="btn btn-nav">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="3 11 22 2 13 21 11 13 3 11"></polygon></svg>
+                    Y aller
+                </a>`;
+            }
+
+            const serviceName = hasService ? data.service : (hasLocation ? "Emplacement trouvé" : "Lien identifié");
+            
+            serviceCard.innerHTML = `
+                <div class="service-info">
+                    <h3>${serviceName}</h3>
+                    <p>Information identifiée pour cette requête</p>
+                </div>
+                <div class="service-actions">
+                    ${btnHtml}
+                    ${navBtnHtml}
+                </div>
+            `;
+            richContainer.appendChild(serviceCard);
+        }
+
+        // 3. Map Container
+        let mapId = null;
+        if (data.lat && data.lon) {
+            mapId = `map-${messageCounter}`;
+            const mapWrapper = document.createElement('div');
+            mapWrapper.className = 'map-container';
+            mapWrapper.id = mapId;
+            richContainer.appendChild(mapWrapper);
+        }
+
+        // 4. Recommendations
+        if (data.recs && Array.isArray(data.recs) && data.recs.length > 0) {
+            const recsWrapper = document.createElement('div');
+            recsWrapper.className = 'recs-container';
+            data.recs.forEach(rec => {
+                if (rec.trim() !== '') {
+                    const chip = document.createElement('button');
+                    chip.className = 'rec-chip';
+                    chip.textContent = rec;
+                    recsWrapper.appendChild(chip);
+                }
+            });
+            richContainer.appendChild(recsWrapper);
+        }
+
+        if (richContainer.children.length > 0) {
+            bodyDiv.appendChild(richContainer);
+        }
+        
+        // Add analytics quietly at bottom of message
+        const analyticsP = document.createElement('div');
+        analyticsP.className = 'analytics-data';
+        analyticsP.innerHTML = `
+            <span>
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 16 16 12 12 8"></polyline><line x1="8" y1="12" x2="16" y2="12"></line></svg>
+                Intent: ${data.intent || 'N/A'}
+            </span>
+            <span>
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
+                Confiance: ${data.confidence !== undefined ? (typeof data.confidence === 'number' ? data.confidence.toFixed(1) : parseFloat(data.confidence).toFixed(1)) : '--'}%
+            </span>
+        `;
+        bodyDiv.appendChild(analyticsP);
+
+        contentDiv.appendChild(avatar);
+        contentDiv.appendChild(bodyDiv);
+        row.appendChild(contentDiv);
+        chatContainer.appendChild(row);
+
+
+
+        // Initialize Map after DOM insertion
+        if (mapId) {
+            setTimeout(() => {
+                initMap(mapId, parseFloat(data.lat), parseFloat(data.lon), data.service || 'Emplacement');
+            }, 100);
+        }
+
+        scrollToBottom();
+    }
+
+    function initMap(elementId, lat, lon, title) {
+        const map = L.map(elementId).setView([lat, lon], 15);
+        
+        // Use CartoDB Dark Matter tiles to match the ChatGPT dark theme natively
+        L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
+            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/">CARTO</a>',
+            subdomains: 'abcd',
+            maxZoom: 20
+        }).addTo(map);
+
+        const marker = L.marker([lat, lon]).addTo(map);
+        marker.bindPopup(`<b>${title}</b>`).openPopup();
+        
+        // Invalidate size to ensure it renders correctly in a dynamic container
+        setTimeout(() => map.invalidateSize(), 300);
+    }
+
+
+
+    function scrollToBottom() {
+        chatContainer.scrollTop = chatContainer.scrollHeight;
+    }
+
+    // =====================================
+    // GLOBAL MAP MODAL LOGIC
+    // =====================================
+    const globalMapBtn = document.getElementById('global-map-btn');
+    const globalModal = document.getElementById('global-map-modal');
+    const closeModal = document.getElementById('close-modal-span');
+    let globalLeafletMap = null;
+
+    if (globalMapBtn) {
+        globalMapBtn.addEventListener('click', async () => {
+            globalModal.style.display = 'block';
+
+            // Initialize map only once
+            if (!globalLeafletMap) {
+                globalLeafletMap = L.map('global-map').setView([34.88, -1.30], 13); // Default view
+                L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
+                    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+                    subdomains: 'abcd',
+                    maxZoom: 20
+                }).addTo(globalLeafletMap);
+            }
+
+            // Must invalidate size since it was display:none
+            setTimeout(() => globalLeafletMap.invalidateSize(), 300);
+
+            // Fetch all services
+            try {
+                const resp = await fetch('/api/services');
+                const data = await resp.json();
+                
+                if (data.status === 'success' && data.services && data.services.length > 0) {
+                    const bounds = [];
+                    data.services.forEach(srv => {
+                        const marker = L.marker([srv.lat, srv.lon]).addTo(globalLeafletMap);
+                        
+                        // Action button inside popup to search the service directly
+                        const popupContent = `
+                            <div style="text-align:center;">
+                                <b style="display:block;margin-bottom:8px;">${srv.service}</b>
+                                <button onclick="document.getElementById('question').value='${srv.service.replace(/'/g, "\\'")}'; document.getElementById('sendBtn').click(); document.getElementById('global-map-modal').style.display='none';" style="background:var(--accent-color);color:white;border:none;padding:5px 10px;border-radius:4px;cursor:pointer;">Demander</button>
+                            </div>
+                        `;
+                        marker.bindPopup(popupContent);
+                        bounds.push([srv.lat, srv.lon]);
+                    });
+                    
+                    // Center map on all pins
+                    if (bounds.length > 0) {
+                        globalLeafletMap.fitBounds(bounds, {padding: [50, 50]});
+                    }
+                }
+            } catch(e) {
+                console.error("Error loading global map services", e);
+            }
+        });
+    }
+
+    if (closeModal) {
+        closeModal.addEventListener('click', () => {
+            globalModal.style.display = 'none';
+        });
+    }
+
+    window.addEventListener('click', (e) => {
+        if (e.target == globalModal) {
+            globalModal.style.display = 'none';
+        }
+    });
+
+});

templates/index.html

@@ -0,0 +1,472 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AskLAQ Assistant</title>
+    <!-- Leaflet CSS -->
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>>
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
+    <!-- Custom CSS -->
+    <style>
+        :root {
+            /* ChatGPT inspired color palette */
+            --bg-color: #343541;
+            --chat-bg: #444654;
+            --text-color: #ECECF1;
+            --input-bg: #40414F;
+            --border-color: rgba(255,255,255,0.1);
+            --accent-color: #10A37F;
+            --accent-hover: #1A7F64;
+            --bot-icon-bg: #10A37F;
+            --user-icon-bg: #5436DA;
+        }
+
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Inter', sans-serif;
+        }
+
+        body {
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            display: flex;
+            height: 100vh;
+            overflow: hidden;
+            flex-direction: column;
+        }
+
+        /* Header */
+        header {
+            padding: 1rem 2rem;
+            border-bottom: 1px solid var(--border-color);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background-color: var(--bg-color);
+            z-index: 10;
+        }
+
+        header h1 {
+            font-size: 1.2rem;
+            font-weight: 500;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .status-container {
+            font-size: 0.85rem;
+            color: #ccc;
+            display: flex;
+            gap: 15px;
+            align-items: center;
+        }
+
+        .status-badge {
+            background: var(--chat-bg);
+            padding: 4px 10px;
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+        }
+
+        /* Chat Container */
+        .chat-container {
+            flex: 1;
+            overflow-y: auto;
+            scroll-behavior: smooth;
+        }
+
+        .message-row {
+            padding: 1.5rem 0;
+            border-bottom: 1px solid rgba(0,0,0,0.1);
+        }
+
+        .message-row.bot {
+            background-color: var(--chat-bg);
+            border-bottom: 1px solid rgba(0,0,0,0.2);
+        }
+
+        .message-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            gap: 1.5rem;
+            padding: 0 1rem;
+        }
+
+        .avatar {
+            width: 30px;
+            height: 30px;
+            border-radius: 4px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1rem;
+            flex-shrink: 0;
+        }
+
+        .avatar.user { background-color: var(--user-icon-bg); }
+        .avatar.bot { background-color: var(--bot-icon-bg); }
+
+        .message-body {
+            flex: 1;
+            line-height: 1.6;
+            font-size: 1rem;
+            overflow-wrap: break-word;
+        }
+
+        /* Rich Content Elements */
+        .rich-content {
+            margin-top: 1rem;
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+        }
+
+        /* Service Card */
+        .service-card {
+            background-color: var(--bg-color);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            padding: 1.2rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 1rem;
+        }
+
+        .service-info h3 {
+            font-size: 1.1rem;
+            margin-bottom: 0.3rem;
+            font-weight: 600;
+        }
+
+        .service-info p {
+            font-size: 0.9rem;
+            color: #aaa;
+        }
+
+        .btn {
+            background-color: var(--accent-color);
+            color: white;
+            border: none;
+            padding: 0.6rem 1rem;
+            border-radius: 6px;
+            cursor: pointer;
+            font-weight: 500;
+            text-decoration: none;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            transition: background 0.2s ease;
+            font-size: 0.9rem;
+            white-space: nowrap;
+        }
+
+        .btn:hover { background-color: var(--accent-hover); }
+
+        .btn-outline {
+            background-color: transparent;
+            border: 1px solid var(--border-color);
+        }
+        .btn-outline:hover {
+            background-color: rgba(255,255,255,0.05);
+        }
+
+        .btn-nav {
+            background-color: #2563EB; /* A distinct blue */
+            color: white;
+        }
+        .btn-nav:hover {
+            background-color: #1D4ED8;
+        }
+
+        .service-actions {
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+        }
+
+        /* Map Container */
+        .map-container {
+            height: 250px;
+            width: 100%;
+            border-radius: 8px;
+            border: 1px solid var(--border-color);
+            z-index: 1; /* Keep map behind header/input */
+        }
+
+        /* Recommendations */
+        .recs-container {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            margin-top: 1rem;
+        }
+
+        .rec-chip {
+            background-color: var(--bg-color);
+            border: 1px solid var(--border-color);
+            color: var(--text-color);
+            padding: 0.5rem 1rem;
+            border-radius: 20px;
+            cursor: pointer;
+            font-size: 0.85rem;
+            transition: all 0.2s ease;
+        }
+
+        .rec-chip:hover {
+            background-color: rgba(255,255,255,0.1);
+            border-color: var(--accent-color);
+        }
+
+        /* Analytics Data */
+        .analytics-data {
+            font-size: 0.85rem;
+            color: #888;
+            margin-top: 1rem;
+            display: flex;
+            gap: 15px;
+            padding-top: 0.8rem;
+            border-top: 1px solid rgba(255, 255, 255, 0.05);
+        }
+        
+        .analytics-data span {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+
+        /* Input Area */
+        .input-area {
+            padding: 2rem;
+            background: linear-gradient(180deg, transparent, var(--bg-color) 20%);
+        }
+
+        .input-form {
+            max-width: 800px;
+            margin: 0 auto;
+            position: relative;
+            display: flex;
+            align-items: flex-end;
+            background-color: var(--input-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 12px;
+            box-shadow: 0 0 15px rgba(0,0,0,0.1);
+            padding: 8px;
+            transition: border-color 0.2s ease, box-shadow 0.2s ease;
+        }
+        
+        .input-form.focused {
+            border-color: rgba(255,255,255,0.2);
+            box-shadow: 0 0 15px rgba(0,0,0,0.2);
+        }
+
+        .input-form textarea {
+            flex: 1;
+            background: transparent;
+            border: none;
+            color: var(--text-color);
+            padding: 8px 12px;
+            font-size: 1rem;
+            resize: none;
+            outline: none;
+            max-height: 200px;
+            overflow-y: auto;
+            min-height: 24px;
+            line-height: 1.5;
+        }
+
+        .send-btn {
+            background-color: var(--accent-color);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            width: 32px;
+            height: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: background 0.2s ease;
+            margin-bottom: 2px;
+            margin-right: 4px;
+            flex-shrink: 0;
+        }
+
+        .send-btn[disabled] {
+            background-color: transparent;
+            color: #666;
+            cursor: not-allowed;
+        }
+
+        .send-btn:not([disabled]):hover {
+            background-color: var(--accent-hover);
+        }
+
+        /* Loading Dots */
+        .typing-indicator {
+            display: inline-flex;
+            gap: 4px;
+            padding: 4px 0;
+        }
+        
+        .typing-dot {
+            width: 6px;
+            height: 6px;
+            background-color: #888;
+            border-radius: 50%;
+            animation: typing 1.4s infinite ease-in-out both;
+        }
+
+        .typing-dot:nth-child(1) { animation-delay: -0.32s; }
+        .typing-dot:nth-child(2) { animation-delay: -0.16s; }
+
+        @keyframes typing {
+            0%, 80%, 100% { transform: scale(0); }
+            40% { transform: scale(1); }
+        }
+
+        /* Markdown-like formatting helpers */
+        .message-body strong { font-weight: 600; color: #fff; }
+        .message-body p { margin-bottom: 0.8rem; }
+        .message-body p:last-child { margin-bottom: 0; }
+        .message-body a { color: var(--accent-color); text-decoration: none; }
+        .message-body a:hover { text-decoration: underline; }
+
+        /* Custom scrollbar */
+        ::-webkit-scrollbar { width: 8px; }
+        ::-webkit-scrollbar-track { background: transparent; }
+        ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }
+        ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }
+
+        /* Responsive refinements */
+        @media (max-width: 768px) {
+            .input-area { padding: 1rem; }
+            .message-content { padding: 0 0.5rem; gap: 1rem; }
+            .service-card { flex-direction: column; align-items: flex-start; }
+            header { padding: 1rem; }
+            .status-container { display: none; } /* Hide statuses on very small screens to save space */
+        }
+
+        .survey-link {
+            text-align: center;
+            margin-top: 12px;
+            font-size: 0.8rem;
+            color: #888;
+        }
+
+        .survey-link a {
+            color: #888;
+            text-decoration: none;
+            transition: color 0.2s;
+        }
+
+        .survey-link a:hover {
+            color: var(--accent-color);
+            text-decoration: underline;
+        }
+
+        /* Modal Styles */
+        .modal {
+            display: none; 
+            position: fixed; 
+            z-index: 1000; 
+            left: 0;
+            top: 0;
+            width: 100%; 
+            height: 100%; 
+            background-color: rgba(0,0,0,0.8); 
+        }
+
+        .modal-content {
+            background-color: var(--chat-bg);
+            margin: 5vh auto; 
+            padding: 20px;
+            border: 1px solid var(--border-color);
+            border-radius: 12px;
+            width: 90%; 
+            max-width: 1000px;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.5);
+        }
+
+        .modal-content h2 {
+            margin-top: 0;
+            margin-bottom: 15px;
+            font-weight: 500;
+        }
+
+        .close-modal {
+            color: #aaa;
+            float: right;
+            font-size: 28px;
+            font-weight: bold;
+            cursor: pointer;
+        }
+
+        .close-modal:hover {
+            color: white;
+        }
+    </style>
+</head>
+<body>
+
+    <header>
+        <h1>
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path><path d="M21 8a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v2"></path></svg>
+            AskLAQ
+        </h1>
+        <div class="status-container">
+            <button id="global-map-btn" class="btn btn-outline" style="padding: 4px 10px; font-size: 0.8rem; margin-right: 10px;">🗺️ Carte des Services</button>
+            <div class="status-badge" id="global-intent">Intent: En attente</div>
+            <div class="status-badge" id="global-confidence">Confiance: --%</div>
+        </div>
+    </header>
+
+    <div class="chat-container" id="chat">
+        <!-- Initial Message -->
+        <div class="message-row bot">
+            <div class="message-content">
+                <div class="avatar bot">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path><path d="M7 10v4"></path><path d="M11 10v4"></path></svg>
+                </div>
+                <div class="message-body">
+                    <p>Bonjour ! Je suis l'assistant <strong>AskLAQ</strong>.</p>
+                    <p>Je suis prêt à analyser vos questions et à vous orienter vers les meilleurs services. Comment puis-je vous aider aujourd'hui ?</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="input-area">
+        <div class="input-form" id="input-container">
+            <textarea id="question" rows="1" placeholder="Envoyer un message à AskLAQ..."></textarea>
+            <button id="sendBtn" class="send-btn" disabled>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+            </button>
+        </div>
+        <div class="survey-link">
+            AskLAQ peut faire des erreurs. <a href="https://docs.google.com/forms/d/e/1FAIpQLSeU80CFppkSmMxCB6K2opel8MSc0Qi8QfKvQtXlIXeHfX7_TQ/viewform?fbzx=9108896931053451286" target="_blank">Aidez-nous à l'améliorer avec ce questionnaire de satisfaction</a>.
+        </div>
+    </div>
+
+    <!-- Global Map Modal -->
+    <div id="global-map-modal" class="modal">
+        <div class="modal-content">
+            <span class="close-modal" id="close-modal-span">&times;</span>
+            <h2>Carte Globale des Services</h2>
+            <div id="global-map" style="height: 60vh; width: 100%; border-radius: 8px;"></div>
+        </div>
+    </div>
+
+    <!-- Leaflet JS -->
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+    <!-- Custom JS -->
+    <script src="/static/script.js"></script>
+</body>
+</html>