Beta version

README.md

@@ -1,11 +1,9 @@
 ---
 title: RAGnarok
 emoji: 📘
-colorFrom: yellow
-colorTo: red
-sdk: gradio
-sdk_version: 5.33.2
-app_file: app.py
+colorFrom: red
+colorTo: blue
+sdk: docker
 pinned: true
 license: gpl-3.0
 short_description: Chat with the specs

app.py

@@ -0,0 +1,138 @@
+from typing import List, Dict, Any
+import zipfile
+import os
+import warnings
+from openai import OpenAI
+from dotenv import load_dotenv
+import bm25s
+from fastapi.staticfiles import StaticFiles
+from nltk.stem import WordNetLemmatizer
+import nltk
+from fastapi import FastAPI
+from fastapi.responses import FileResponse
+from fastapi.middleware.cors import CORSMiddleware
+import numpy as np
+from pydantic import BaseModel
+from sklearn.preprocessing import MinMaxScaler
+
+load_dotenv()
+
+nltk.download('wordnet')
+if os.path.exists("bm25s.zip"):
+    with zipfile.ZipFile("bm25s.zip", 'r') as zip_ref:
+        zip_ref.extractall(".")
+    bm25_engine = bm25s.BM25.load("3gpp_bm25_docs", load_corpus=True)
+lemmatizer = WordNetLemmatizer()
+llm = OpenAI(api_key=os.environ.get("GEMINI"), base_url="https://generativelanguage.googleapis.com/v1beta/openai/")
+
+warnings.filterwarnings("ignore")
+
+app = FastAPI(title="RAGnarok", 
+              description="API to search specifications for RAG")
+
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+origins = [
+    "*",
+]
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=origins,
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+class SearchRequest(BaseModel):
+    keyword: str
+    threshold: int
+
+class SearchResponse(BaseModel):
+    results: List[Dict[str, Any]]
+
+class ChatRequest(BaseModel):
+    messages: List[Dict[str, str]]
+    model: str
+
+class ChatResponse(BaseModel):
+    response: str
+
+@app.get("/")
+async def main_menu():
+    return FileResponse(os.path.join("templates", "index.html"))
+
+@app.post("/chat", response_model=ChatResponse)
+def question_the_sources(req: ChatRequest):
+    model = req.model
+    resp = llm.chat.completions.create(
+        messages=req.messages,
+        model=model
+    )
+    return ChatResponse(response=resp.choices[0].message.content)
+
+@app.post("/search", response_model=SearchResponse)
+def search_specifications(req: SearchRequest):
+    keywords = req.keyword
+    threshold = req.threshold
+    query = lemmatizer.lemmatize(keywords)
+    results_out = []
+    query_tokens = bm25s.tokenize(query)
+    results, scores = bm25_engine.retrieve(query_tokens, k=len(bm25_engine.corpus))
+
+    def calculate_boosted_score(metadata, score, query):
+        title = {lemmatizer.lemmatize(metadata['title']).lower()}
+        q = {query.lower()}
+        spec_id_presence = 0.5 if len(q & {metadata['id']}) > 0 else 0
+        booster = len(q & title) * 0.5
+        return score + spec_id_presence + booster
+
+    spec_scores = {}
+    spec_indices = {}
+    spec_details = {}
+
+    for i in range(results.shape[1]):
+        doc = results[0, i]
+        score = scores[0, i]
+        spec = doc["metadata"]["id"]
+
+        boosted_score = calculate_boosted_score(doc['metadata'], score, query)
+
+        if spec not in spec_scores or boosted_score > spec_scores[spec]:
+            spec_scores[spec] = boosted_score
+            spec_indices[spec] = i
+            spec_details[spec] = {
+                'original_score': score,
+                'boosted_score': boosted_score,
+                'doc': doc
+            }
+
+    def normalize_scores(scores_dict):
+        if not scores_dict:
+            return {}
+            
+        scores_array = np.array(list(scores_dict.values())).reshape(-1, 1)
+        scaler = MinMaxScaler()
+        normalized_scores = scaler.fit_transform(scores_array).flatten()
+            
+        normalized_dict = {}
+        for i, spec in enumerate(scores_dict.keys()):
+            normalized_dict[spec] = normalized_scores[i]
+            
+        return normalized_dict
+
+    normalized_scores = normalize_scores(spec_scores)
+
+    for spec in spec_details:
+        spec_details[spec]["normalized_score"] = normalized_scores[spec]
+
+    unique_specs = sorted(normalized_scores.keys(), key=lambda x: normalized_scores[x], reverse=True)
+
+    for rank, spec in enumerate(unique_specs, 1):
+        details = spec_details[spec]
+        metadata = details['doc']['metadata']
+        if details['normalized_score'] < threshold / 100:
+            break
+        results_out.append({'id': metadata['id'], 'title': metadata['title'], 'section': metadata['section_title'], 'content': details['doc']['text'], 'similarity': int(details['normalized_score']*100)})
+    
+    return SearchResponse(results=results_out)

requirements.txt

@@ -0,0 +1,8 @@
+openai
+fastapi
+uvicorn[standard]
+python-dotenv
+bm25s[full]
+ntlk
+numpy
+scikit-learn

static/script.js

@@ -0,0 +1,304 @@
+class DocumentSearchChatBot {
+    constructor() {
+        this.selectedDocuments = new Set();
+        this.searchResults = [];
+        this.chatHistory = [];
+        this.initializeEventListeners();
+        this.updateThresholdDisplay();
+    }
+
+    initializeEventListeners() {
+        // Search form
+        document.getElementById('search-form').addEventListener('submit', (e) => {
+            e.preventDefault();
+            this.performSearch();
+        });
+
+        // Threshold slider
+        document.getElementById('threshold').addEventListener('input', (e) => {
+            this.updateThresholdDisplay();
+        });
+
+        // Selection controls
+        document.getElementById('select-all').addEventListener('click', () => {
+            this.selectAllDocuments();
+        });
+
+        document.getElementById('unselect-all').addEventListener('click', () => {
+            this.unselectAllDocuments();
+        });
+
+        // Chat launch
+        document.getElementById('start-chat').addEventListener('click', () => {
+            this.startChat();
+        });
+
+        // Chat form
+        document.getElementById('chat-form').addEventListener('submit', (e) => {
+            e.preventDefault();
+            this.sendChatMessage();
+        });
+
+        // Back to search
+        document.getElementById('back-to-search').addEventListener('click', () => {
+            this.backToSearch();
+        });
+
+        // Modal close
+        document.querySelector('.modal-close').addEventListener('click', () => {
+            this.closeModal();
+        });
+
+        // Close modal on background click
+        document.getElementById('modal').addEventListener('click', (e) => {
+            if (e.target.id === 'modal') {
+                this.closeModal();
+            }
+        });
+    }
+
+    updateThresholdDisplay() {
+        const threshold = document.getElementById('threshold').value;
+        document.getElementById('threshold-value').textContent = threshold;
+    }
+
+    async performSearch() {
+        const keyword = document.getElementById('keyword').value.trim();
+        const threshold = parseFloat(document.getElementById('threshold').value);
+
+        if (!keyword) return;
+
+        this.showLoading();
+
+        try {
+            const response = await fetch('/search', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    keyword: keyword,
+                    threshold: threshold
+                })
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const data = await response.json();
+            this.searchResults = data.results || [];
+            this.displayResults();
+            
+        } catch (error) {
+            console.error('Erreur lors de la recherche:', error);
+            this.showError('Erreur lors de la recherche. Veuillez réessayer.');
+        } finally {
+            this.hideLoading();
+        }
+    }
+
+    displayResults() {
+        const resultsContainer = document.getElementById('results-container');
+        const resultsSection = document.getElementById('results-section');
+        
+        if (this.searchResults.length === 0) {
+            resultsContainer.innerHTML = '<p class="no-results">Aucun résultat trouvé.</p>';
+            resultsSection.classList.remove('hidden');
+            return;
+        }
+
+        resultsContainer.innerHTML = '';
+        
+        this.searchResults.forEach((result, index) => {
+            const card = this.createResultCard(result, index);
+            resultsContainer.appendChild(card);
+            let viewBtn = card.querySelector('.view-btn');
+            viewBtn.addEventListener('click', () => {
+                this.showDocumentContent(result.id, result.section, result.content);
+            });
+        });
+
+        resultsSection.classList.remove('hidden');
+        this.updateChatButtonState();
+    }
+
+    createResultCard(result, index) {
+        const card = document.createElement('div');
+        card.className = 'result-card';
+        card.dataset.index = index;
+
+        card.innerHTML = `
+    <div class="card-header">
+        <div class="card-info">
+            <div class="card-id">ID: ${result.id}</div>
+            <div class="card-title">${result.title}</div>
+            <div class="card-section">${result.section}</div>
+        </div>
+        <div class="similarity-score">${result.similarity}%</div>
+    </div>
+    <div class="card-actions">
+        <button class="view-btn" data-id="${result.id}" data-section="${result.section}" data-content="${result.content}">
+            <span class="material-icons">visibility</span>
+            Voir le contenu
+        </button>
+        <input type="checkbox" class="select-checkbox" onchange="app.toggleDocumentSelection(${index})">
+    </div>
+`;
+
+        return card;
+    }
+
+    toggleDocumentSelection(index) {
+        const card = document.querySelector(`[data-index="${index}"]`);
+        const checkbox = card.querySelector('.select-checkbox');
+        
+        if (checkbox.checked) {
+            this.selectedDocuments.add(index);
+            card.classList.add('selected');
+        } else {
+            this.selectedDocuments.delete(index);
+            card.classList.remove('selected');
+        }
+        
+        this.updateChatButtonState();
+    }
+
+    selectAllDocuments() {
+        const checkboxes = document.querySelectorAll('.select-checkbox');
+        checkboxes.forEach((checkbox, index) => {
+            checkbox.checked = true;
+            this.selectedDocuments.add(index);
+            checkbox.closest('.result-card').classList.add('selected');
+        });
+        this.updateChatButtonState();
+    }
+
+    unselectAllDocuments() {
+        const checkboxes = document.querySelectorAll('.select-checkbox');
+        checkboxes.forEach((checkbox, index) => {
+            checkbox.checked = false;
+            this.selectedDocuments.delete(index);
+            checkbox.closest('.result-card').classList.remove('selected');
+        });
+        this.updateChatButtonState();
+    }
+
+    updateChatButtonState() {
+        const chatButton = document.getElementById('start-chat');
+        chatButton.disabled = this.selectedDocuments.size === 0;
+    }
+
+    showDocumentContent(id, section, content) {
+        // Simuler le contenu du document (remplacer par un appel API réel)
+        document.getElementById('modal-title').textContent = `Specification n°${id} - ${section}`;
+        document.getElementById('modal-body').textContent = content;
+        document.getElementById('modal').style.display = 'block';
+    }
+
+    closeModal() {
+        document.getElementById('modal').style.display = 'none';
+    }
+
+    startChat() {
+        
+        if (this.selectedDocuments.size === 0) return;
+
+        const selectedDocs = Array.from(this.selectedDocuments).map(index => {
+            const doc = this.searchResults[index];
+            return `(${doc.id} ${doc.title} ${doc.section} ${doc.content || ""})`
+        }).join("\n");
+        this.chatHistory = [{"role": "system", "content": `You are a helpful AI assistant. You will answer any questions related to the following specifications: ${selectedDocs}`}];
+
+        document.getElementById('search-section').classList.add('hidden');
+        document.getElementById('results-section').classList.add('hidden');
+        document.getElementById('chat-section').classList.remove('hidden');
+
+        // Ajouter un message de bienvenue
+        this.addChatMessage('bot', `Bonjour ! Je suis prêt à répondre à vos questions sur les ${this.selectedDocuments.size} document(s) sélectionné(s). Que souhaitez-vous savoir ?`);
+    }
+
+    backToSearch() {
+        document.getElementById('chat-section').classList.add('hidden');
+        document.getElementById('search-section').classList.remove('hidden');
+        document.getElementById('results-section').classList.remove('hidden');
+        
+        // Vider les messages du chat
+        document.getElementById('chat-messages').innerHTML = '';
+    }
+
+    async sendChatMessage() {
+        const input = document.getElementById('chat-input');
+        const message = input.value.trim();
+        const model = document.getElementById('model-select').value;
+
+        if (!message) return;
+
+        // Ajouter le message de l'utilisateur
+        this.addChatMessage('user', message);
+        input.value = '';
+
+        this.chatHistory.push({"role": "user", "content": message});
+
+        // Désactiver le formulaire pendant l'envoi
+        const form = document.getElementById('chat-form');
+        const submitBtn = form.querySelector('button');
+        submitBtn.disabled = true;
+
+        try {
+            const response = await fetch('/chat', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    messages: this.chatHistory,
+                    model: model,
+                })
+            });
+
+            if (!response.ok) {
+                this.chatHistory.push({"role": "assistant", "content": `HTTP error! status: ${response.status}`})
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const data = await response.json();
+            this.addChatMessage('bot', data.response);
+            this.chatHistory.push({"role": "assistant", "content": data.response})
+            
+        } catch (error) {
+            console.error('Erreur lors de l\'envoi du message:', error);
+            this.addChatMessage('bot', 'Désolé, une erreur s\'est produite. Veuillez réessayer.');
+        } finally {
+            submitBtn.disabled = false;
+        }
+    }
+
+    addChatMessage(sender, message) {
+        const messagesContainer = document.getElementById('chat-messages');
+        const messageDiv = document.createElement('div');
+        messageDiv.className = `message ${sender}`;
+        messageDiv.textContent = message;
+        messagesContainer.appendChild(messageDiv);
+        messagesContainer.scrollTop = messagesContainer.scrollHeight;
+    }
+
+    showLoading() {
+        document.getElementById('loading').classList.remove('hidden');
+    }
+
+    hideLoading() {
+        document.getElementById('loading').classList.add('hidden');
+    }
+
+    showError(message) {
+        // Vous pouvez implémenter une notification d'erreur plus sophistiquée
+        alert(message);
+    }
+}
+
+// Initialiser l'application
+const app = new DocumentSearchChatBot();
+
+// Fonction globale pour les événements onclick dans le HTML
+window.app = app;

static/styles.css

@@ -0,0 +1,511 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Roboto', sans-serif;
+    background-color: #f8f9fa;
+    color: #202124;
+    line-height: 1.6;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+/* Header */
+.header {
+    text-align: center;
+    margin-bottom: 40px;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+}
+
+.logo .material-icons {
+    font-size: 32px;
+    color: #4285f4;
+}
+
+.logo h1 {
+    color: #202124;
+    font-weight: 400;
+    font-size: 28px;
+}
+
+/* Search Section */
+.search-section {
+    background: white;
+    border-radius: 8px;
+    padding: 40px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    margin-bottom: 30px;
+}
+
+.search-container h2 {
+    text-align: center;
+    margin-bottom: 30px;
+    color: #202124;
+    font-weight: 400;
+}
+
+.search-form {
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.input-group {
+    position: relative;
+    margin-bottom: 20px;
+}
+
+.input-group input {
+    width: 100%;
+    padding: 16px 50px 16px 16px;
+    border: 2px solid #dadce0;
+    border-radius: 24px;
+    font-size: 16px;
+    outline: none;
+    transition: border-color 0.3s;
+}
+
+.input-group input:focus {
+    border-color: #4285f4;
+}
+
+.input-group .material-icons {
+    position: absolute;
+    right: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #5f6368;
+}
+
+.threshold-group {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    margin-bottom: 30px;
+    justify-content: center;
+}
+
+.threshold-group label {
+    font-weight: 500;
+    color: #5f6368;
+}
+
+.threshold-group input[type="range"] {
+    width: 200px;
+    accent-color: #4285f4;
+}
+
+#threshold-value {
+    font-weight: 500;
+    color: #4285f4;
+    min-width: 30px;
+}
+
+.search-btn {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: #4285f4;
+    color: white;
+    border: none;
+    padding: 12px 24px;
+    border-radius: 24px;
+    font-size: 16px;
+    cursor: pointer;
+    margin: 0 auto;
+    transition: background-color 0.3s;
+}
+
+.search-btn:hover {
+    background: #3367d6;
+}
+
+/* Results Section */
+.results-section {
+    background: white;
+    border-radius: 8px;
+    padding: 30px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    margin-bottom: 30px;
+}
+
+.results-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    flex-wrap: wrap;
+    gap: 15px;
+}
+
+.results-header h3 {
+    color: #202124;
+    font-weight: 500;
+}
+
+.selection-controls {
+    display: flex;
+    gap: 10px;
+}
+
+.control-btn {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    background: #f8f9fa;
+    border: 1px solid #dadce0;
+    padding: 8px 16px;
+    border-radius: 20px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: background-color 0.3s;
+}
+
+.control-btn:hover {
+    background: #e8f0fe;
+}
+
+.results-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    gap: 20px;
+    margin-bottom: 30px;
+}
+
+.result-card {
+    border: 1px solid #dadce0;
+    border-radius: 8px;
+    padding: 20px;
+    background: white;
+    transition: all 0.3s;
+    cursor: pointer;
+}
+
+.result-card:hover {
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    transform: translateY(-2px);
+}
+
+.result-card.selected {
+    border-color: #4285f4;
+    background: #e8f0fe;
+}
+
+.card-header {
+    display: flex;
+    justify-content: between;
+    align-items: flex-start;
+    margin-bottom: 15px;
+}
+
+.card-info {
+    flex: 1;
+}
+
+.card-id {
+    font-size: 12px;
+    color: #5f6368;
+    font-weight: 500;
+}
+
+.card-title {
+    font-size: 16px;
+    font-weight: 500;
+    color: #202124;
+    margin: 5px 0;
+}
+
+.card-section {
+    font-size: 14px;
+    color: #5f6368;
+    margin-bottom: 10px;
+}
+
+.similarity-score {
+    background: #e8f0fe;
+    color: #4285f4;
+    padding: 4px 8px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: 500;
+    margin-left: 10px;
+}
+
+.card-actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 15px;
+}
+
+.view-btn {
+    background: #4285f4;
+    color: white;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 16px;
+    cursor: pointer;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.view-btn:hover {
+    background: #3367d6;
+}
+
+.select-checkbox {
+    width: 20px;
+    height: 20px;
+    accent-color: #4285f4;
+}
+
+.chat-launch {
+    text-align: center;
+}
+
+.chat-btn {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    background: #34a853;
+    color: white;
+    border: none;
+    padding: 16px 32px;
+    border-radius: 24px;
+    font-size: 16px;
+    cursor: pointer;
+    margin: 0 auto;
+    transition: background-color 0.3s;
+}
+
+.chat-btn:hover:not(:disabled) {
+    background: #2d8f47;
+}
+
+.chat-btn:disabled {
+    background: #dadce0;
+    cursor: not-allowed;
+}
+
+/* Chat Section */
+.chat-section {
+    background: white;
+    border-radius: 8px;
+    padding: 30px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    height: 600px;
+    display: flex;
+    flex-direction: column;
+}
+
+.chat-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    padding-bottom: 15px;
+    border-bottom: 1px solid #dadce0;
+}
+
+.back-btn {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    background: #f8f9fa;
+    border: 1px solid #dadce0;
+    padding: 8px 16px;
+    border-radius: 20px;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.chat-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px 0;
+    border-bottom: 1px solid #dadce0;
+    margin-bottom: 20px;
+}
+
+.message {
+    margin-bottom: 15px;
+    padding: 12px 16px;
+    border-radius: 18px;
+    max-width: 80%;
+}
+
+.message.user {
+    background: #4285f4;
+    color: white;
+    margin-left: auto;
+}
+
+.message.bot {
+    background: #f1f3f4;
+    color: #202124;
+}
+
+.chat-input-group {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+
+.chat-input-group input {
+    flex: 1;
+    padding: 12px 16px;
+    border: 1px solid #dadce0;
+    border-radius: 24px;
+    outline: none;
+}
+
+.chat-input-group select {
+    padding: 12px;
+    border: 1px solid #dadce0;
+    border-radius: 20px;
+    outline: none;
+}
+
+.chat-input-group button {
+    background: #4285f4;
+    color: white;
+    border: none;
+    padding: 12px;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Modal */
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.5);
+    z-index: 1000;
+}
+
+.modal-content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: white;
+    border-radius: 8px;
+    max-width: 800px;
+    max-height: 80vh;
+    width: 90%;
+    overflow: hidden;
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+    border-bottom: 1px solid #dadce0;
+}
+
+.modal-close {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 5px;
+    border-radius: 50%;
+}
+
+.modal-body {
+    padding: 20px;
+    max-height: 60vh;
+    overflow-y: auto;
+    line-height: 1.6;
+}
+
+/* Loading */
+.loading {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(255,255,255,0.9);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 999;
+}
+
+.spinner {
+    width: 40px;
+    height: 40px;
+    border: 4px solid #f3f3f3;
+    border-top: 4px solid #4285f4;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 20px;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Utility classes */
+.hidden {
+    display: none !important;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .container {
+        padding: 10px;
+    }
+    
+    .search-section {
+        padding: 20px;
+    }
+    
+    .results-container {
+        grid-template-columns: 1fr;
+    }
+    
+    .results-header {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    
+    .selection-controls {
+        justify-content: center;
+    }
+    
+    .threshold-group {
+        flex-direction: column;
+        gap: 10px;
+    }
+}

templates/index.html

@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document Search ChatBot</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="stylesheet" href="/static/styles.css">
+</head>
+<body>
+    <div class="container">
+        <!-- Header -->
+        <header class="header">
+            <div class="logo">
+                <span class="material-icons">search</span>
+                <h1>Document Search</h1>
+            </div>
+        </header>
+
+        <!-- Search Section -->
+        <section id="search-section" class="search-section">
+            <div class="search-container">
+                <h2>Rechercher des documents techniques</h2>
+                <form id="search-form" class="search-form">
+                    <div class="input-group">
+                        <input type="text" id="keyword" placeholder="Entrez vos mots-clés..." required>
+                        <span class="material-icons">search</span>
+                    </div>
+                    <div class="threshold-group">
+                        <label for="threshold">Seuil de similarité :</label>
+                        <input type="range" id="threshold" min="0" max="100" step="1" value="70">
+                        <span id="threshold-value"></span>
+                    </div>
+                    <button type="submit" class="search-btn">
+                        <span class="material-icons">search</span>
+                        Rechercher
+                    </button>
+                </form>
+            </div>
+        </section>
+
+        <!-- Results Section -->
+        <section id="results-section" class="results-section hidden">
+            <div class="results-header">
+                <h3>Résultats de recherche</h3>
+                <div class="selection-controls">
+                    <button id="select-all" class="control-btn">
+                        <span class="material-icons">select_all</span>
+                        Tout sélectionner
+                    </button>
+                    <button id="unselect-all" class="control-btn">
+                        <span class="material-icons">deselect</span>
+                        Tout désélectionner
+                    </button>
+                </div>
+            </div>
+            <div id="results-container" class="results-container"></div>
+            <div class="chat-launch">
+                <button id="start-chat" class="chat-btn" disabled>
+                    <span class="material-icons">chat</span>
+                    Démarrer le ChatBot
+                </button>
+            </div>
+        </section>
+
+        <!-- ChatBot Section -->
+        <section id="chat-section" class="chat-section hidden">
+            <div class="chat-header">
+                <h3>ChatBot Assistant</h3>
+                <button id="back-to-search" class="back-btn">
+                    <span class="material-icons">arrow_back</span>
+                    Retour à la recherche
+                </button>
+            </div>
+            <div class="chat-container">
+                <div id="chat-messages" class="chat-messages"></div>
+                <form id="chat-form" class="chat-form">
+                    <div class="chat-input-group">
+                        <input type="text" id="chat-input" placeholder="Posez votre question..." required>
+                        <select id="model-select">
+                            <option value="gemini-2.5-flash-preview-05-20">Gemini 2.5 Flash Preview</option>
+                            <option value="gemini-2.0-flash">Gemini 2.0 Flash</option>
+                            <option value="gemma-3-27b-it">Gemma 3</option>
+                            <option value="gemma-3n-e4b-it">Gemma 3n</option>
+                        </select>
+                        <button type="submit">
+                            <span class="material-icons">send</span>
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </section>
+    </div>
+
+    <!-- Modal for document content -->
+    <div id="modal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 id="modal-title"></h4>
+                <button class="modal-close">
+                    <span class="material-icons">close</span>
+                </button>
+            </div>
+            <div id="modal-body" class="modal-body"></div>
+        </div>
+    </div>
+
+    <!-- Loading overlay -->
+    <div id="loading" class="loading hidden">
+        <div class="spinner"></div>
+        <p>Recherche en cours...</p>
+    </div>
+
+    <script src="/static/script.js"></script>
+</body>
+</html>