add english version

application_neo4j/app.py

@@ -1,15 +1,17 @@
 # --- Import et initialisation Flask ---
 import os
-from flask import Flask, request, render_template, jsonify
+from flask import Flask, request, render_template, jsonify, session, redirect, url_for
 from neo4j import GraphDatabase, basic_auth
 from graphdatascience import GraphDataScience
 import app_algorithms as algo
+from translations import t
 import pandas as pd
 from typing import Dict
 from collections import defaultdict
 import argparse
 
 app = Flask(__name__, static_url_path="/static/")  # Application Flask
+app.secret_key = os.urandom(24)
 
 # --- Connexion à Neo4j et GDS ---
 NEO4J_URI = "bolt://localhost:7687"
@@ -99,6 +101,54 @@ def ensure_graph_projected(gds: GraphDataScience, graph_name):
     """)
     print(f"Graphe '{reverse_graph_name}' projeté.")
 
+@app.before_request
+def set_language():
+    """Determine current language from session or URL query param."""
+    if "lang" not in session:
+        session["lang"] = "fr"
+    lang = request.args.get("lang")
+    if lang in ("fr", "en"):
+        session["lang"] = lang
+
+
+@app.route("/set_language")
+def set_language_route():
+    """Endpoint used by the language selector in the navbar."""
+    lang = request.args.get("lang", "fr")
+    if lang in ("fr", "en"):
+        session["lang"] = lang
+    referrer = request.headers.get("Referer", "/")
+    if referrer and "//" in referrer:
+        from urllib.parse import urlparse, parse_qs, urlencode
+        parsed = urlparse(referrer)
+        qs = parse_qs(parsed.query, keep_blank_values=True)
+        qs["lang"] = [lang]
+        return redirect(parsed.path + ("?" + urlencode(qs, doseq=True) if qs else ""))
+    return redirect("/")
+
+
+@app.context_processor
+def inject_i18n():
+    """Inject t() and current_lang into all Jinja2 templates."""
+    def _t(key, **kwargs):
+        return t(key, session.get("lang", "fr"), **kwargs)
+    # Dictionnaire JS pour les clés utilisées côté client
+    js_i18n_keys = [
+        "js.node_info.name", "js.node_info.type", "js.node_info.followers",
+        "js.node_info.downloads", "js.node_info.created", "js.node_info.task",
+        "js.node_info.dataset", "js.node_info.undefined", "js.node_info.unknown_date",
+        "js.node_info.see_on_hf",
+        "js.unknown", "js.unknown_f", "js.na",
+    ]
+    lang = session.get("lang", "fr")
+    js_i18n_data = {k: t(k, lang) for k in js_i18n_keys}
+    return {
+        "t": _t,
+        "current_lang": lang,
+        "js_i18n_data": js_i18n_data,
+    }
+
+
 @app.route("/")  # Page d'accueil
 def home():
     return render_template("index.html")
@@ -177,7 +227,7 @@ def findnode():
         search_info = {"name": name, "depth": request.form.get("depth", 3), "unlimited": is_unlimited}
 
         if not name:
-            message = "Veuillez entrer un nom à rechercher."
+            message = t("error.empty_name", session.get("lang", "fr"))
             return render_template("search.html", message=message, search=search_info, graph_data=graph_data, highlights=highlights)
 
         try:
@@ -189,28 +239,28 @@ def findnode():
             # Appeler la fonction GDS BFS 
             gds_result = algo.run_gds_bfs(gds, natural_graph_name,reverse_graph_name, name, depth,False)
             if not gds_result :
-                message = f"Le modèle/dataset '{name}' n'a pas été trouvé."
+                message = t("error.model_not_found", session.get("lang", "fr"), name=name)
                 return render_template("search.html", message=message, search=search_info, graph_data=graph_data,highlights=highlights)
 
             process_gds_bfs_results(gds_result, graph_data, name)
             if gds_result["source_label"] == "Model" :
-                highlights = algo.get_genealogy_highlights(gds, name)
+                highlights = algo.get_genealogy_highlights(gds, name, lang=session.get("lang", "fr"))
                 return render_template("search.html", message=message, search=search_info, graph_data=graph_data,highlights=highlights)
             
             if gds_result["source_label"] == "Dataset" :
                 return render_template("search_dataset.html", message=message, search=search_info, graph_data=graph_data)
             
             if not graph_data["nodes"] and not graph_data["edges"]:
-                message = f"Le nœud '{name}' a été trouvé, mais il n'a pas de voisins dans la profondeur spécifiée."
+                message = t("error.no_neighbors", session.get("lang", "fr"), name=name)
                 return render_template("search.html", message=message, search=search_info, graph_data=graph_data,highlights=highlights)
         
         except Exception as e:
             # Gérer le cas où le nœud source n'existe pas du tout
             if "Failed to find a node" in str(e):
-                 message = f"Le nœud '{name}' n'a pas été trouvé dans le graphe."
+                 message = t("error.node_not_found", session.get("lang", "fr"), name=name)
             else:
                 print(f"GDS BFS Error: {e}")
-                message = f"Erreur lors de la recherche GDS: {str(e)}"
+                message = t("error.gds", session.get("lang", "fr"), error=str(e))
     return render_template("search.html", message=message, search=search_info, graph_data=graph_data,highlights=highlights)
 
 
@@ -250,7 +300,7 @@ def findnode_expert():
         search_info = {"name": name, "depth": request.form.get("depth", 3), "unlimited": is_unlimited,"filters": current_filters }
 
         if not name:
-            message = "Veuillez entrer un nom à rechercher."
+            message = t("error.empty_name", session.get("lang", "fr"))
             return render_template("expert.html", message=message, search=search_info, graph_data=graph_data)
 
         try:
@@ -262,22 +312,22 @@ def findnode_expert():
             # Appeler la fonction GDS BFS 
             gds_result = algo.run_gds_bfs(gds, natural_graph_name,reverse_graph_name, name, depth,True)
             if not gds_result :
-                message = f"Le noeud '{name}' n'a pas été trouvé."
+                message = t("error.node_not_found_expert", session.get("lang", "fr"), name=name)
                 return render_template("expert.html", message=message, search=search_info, graph_data=graph_data)
 
 
             process_gds_bfs_results(gds_result, graph_data, name)
 
             if not graph_data["nodes"] and not graph_data["edges"]:
-                message = f"Le nœud '{name}' a été trouvé, mais il n'a pas de voisins dans la profondeur spécifiée."                
+                message = t("error.no_neighbors", session.get("lang", "fr"), name=name)                
 
         except Exception as e:
             # Gérer le cas où le nœud source n'existe pas du tout
             if "Failed to find a node" in str(e):
-                 message = f"Le nœud '{name}' n'a pas été trouvé dans le graphe."
+                 message = t("error.node_not_found", session.get("lang", "fr"), name=name)
             else:
                 print(f"GDS BFS Error: {e}")
-                message = f"Erreur lors de la recherche GDS: {str(e)}"
+                message = t("error.gds", session.get("lang", "fr"), error=str(e))
     return render_template("expert.html", message=message, search=search_info, graph_data=graph_data)
 
 

application_neo4j/app_algorithms.py

@@ -2,6 +2,7 @@
 from graphdatascience import GraphDataScience
 from typing import Dict, List, Any
 import pandas as pd
+from translations import t
 
 def run_gds_bfs(gds: GraphDataScience, natural_graph_name: str, reverse_graph_name: str, source_name: str, max_depth: int = None, expert = False) -> Dict[str, Any]:
     """
@@ -78,7 +79,7 @@ def run_gds_bfs(gds: GraphDataScience, natural_graph_name: str, reverse_graph_na
 
 
 
-def get_genealogy_highlights(gds: "GraphDataScience", model_name: str, num_highlights: int = 2) -> Dict:
+def get_genealogy_highlights(gds: "GraphDataScience", model_name: str, num_highlights: int = 2, lang: str = "fr") -> Dict:
     """
     Trouve les modèles clés dans l'ascendance et la descendance (1er/2e plus cités/téléchargés).
     
@@ -100,50 +101,50 @@ def get_genealogy_highlights(gds: "GraphDataScience", model_name: str, num_highl
     # Les classes CSS sont directement des classes Bootstrap 5 pour simplifier le rendu dans le template HTML.
     badges_info = {
     'desc_cited_1': {
-        'text': '1er + cité', 
+        'text': t('badge.desc_cited_1.text', lang), 
         'class': 'bg-success',
-        'title': "Ce modèle est le plus cité parmi les modèles de la descendance."
+        'title': t('badge.desc_cited_1.title', lang)
     },
     'desc_cited_2': {
-        'text': '2e + cité', 
+        'text': t('badge.desc_cited_2.text', lang), 
         'class': 'bg-success bg-opacity-75',
-        'title': "Ce modèle est le deuxième plus cité parmi les modèles de la descendance."
+        'title': t('badge.desc_cited_2.title', lang)
     },
     'desc_downloaded_1': {
-        'text': '1er + téléchargé', 
+        'text': t('badge.desc_downloaded_1.text', lang), 
         'class': 'beta',
-        'title': "Ce modèle est le plus téléchargé parmi les modèles de la descendance."
+        'title': t('badge.desc_downloaded_1.title', lang)
     },
     'desc_downloaded_2': {
-        'text': '2e + téléchargé', 
+        'text': t('badge.desc_downloaded_2.text', lang), 
         'class': 'alpha',
-        'title': "Ce modèle est le deuxième plus téléchargé parmi les modèles de la descendance."
+        'title': t('badge.desc_downloaded_2.title', lang)
     },
     
     'asc_foundation': {
-        'text': 'Modèle racine', 
+        'text': t('badge.asc_foundation.text', lang), 
         'class': 'bg-warning text-dark',
-        'title': "Ce modèle n'a pas de parent connu."
+        'title': t('badge.asc_foundation.title', lang)
     },
     'asc_cited_1': {
-        'text': '1er + cité', 
+        'text': t('badge.asc_cited_1.text', lang), 
         'class': 'bg-success',
-        'title': "Ce modèle est le plus cité parmi les modèles de l'ascendance."
+        'title': t('badge.asc_cited_1.title', lang)
     },
     'asc_cited_2': {
-        'text': '2e + cité', 
+        'text': t('badge.asc_cited_2.text', lang), 
         'class': 'bg-success bg-opacity-75',
-        'title': "Ce modèle est le deuxième plus cité parmi les modèles de l'ascendance."
+        'title': t('badge.asc_cited_2.title', lang)
     },
     'asc_downloaded_1': {
-        'text': '1er + téléchargé', 
+        'text': t('badge.asc_downloaded_1.text', lang), 
         'class': 'beta',
-        'title': "Ce modèle est le plus téléchargé parmi les modèles de l'ascendance."
+        'title': t('badge.asc_downloaded_1.title', lang)
     },
     'asc_downloaded_2': {
-        'text': '2e + téléchargé', 
+        'text': t('badge.asc_downloaded_2.text', lang), 
         'class': 'alpha',
-        'title': "Ce modèle est le deuxième plus téléchargé parmi les modèles de l'ascendance."
+        'title': t('badge.asc_downloaded_2.title', lang)
     },
     }
     
@@ -272,13 +273,13 @@ def create_node_data(node_props, label):
             "followers": node_props.get("followers", 1)
         }
     elif label == "Model":
-        licens_ =str(node_props.get("license", "Inconnue")).strip("[]")
+        licens_ =str(node_props.get("license", t("node.unknown", "fr"))).strip("[]")
         if licens_ =="\'other\'" or pd.isna(licens_) or licens_ =="nan":
-            licens_ = "Autre"
+            licens_ = t("node.other", "fr")
         
         tache = node_props.get("task", "")
         if tache =="unknown": 
-            tache = "Inconnue"
+            tache = t("node.unknown", "fr")
         return {
             **base_data,
             "label": "Modèle",

application_neo4j/static/js/script.js

@@ -187,8 +187,11 @@ document.addEventListener("DOMContentLoaded", () => {
                 return;
             }
     
+            const datatablesLangUrl = (window.__I18N_LANG === 'en')
+                ? "https://cdn.datatables.net/plug-ins/1.13.4/i18n/en.json"
+                : "https://cdn.datatables.net/plug-ins/1.13.4/i18n/fr-FR.json";
             const common_dt_options = {
-                "language": { "url": "https://cdn.datatables.net/plug-ins/1.13.4/i18n/fr-FR.json" },
+                "language": { "url": datatablesLangUrl },
                 "pageLength": 10,
                 "responsive": true,"scrollX": true , "scrollY":true,
                 "columnDefs": [
@@ -227,12 +230,12 @@ document.addEventListener("DOMContentLoaded", () => {
                     node.id || "N/A",
                     node.author || "Inconnu",
                     // La conversion en string via la condition est parfaite ici
-                    String(node.downloads ?? "Inconnu"),
-                    node.task || "Inconnue",
+                    String(node.downloads ?? (window.__I18N['js.unknown'] || "Inconnu")),
+                    node.task || (window.__I18N['js.unknown_f'] || "Inconnue"),
                     String(node.likes ?? "0"),
-                    String(node.createdAt ?? "Inconnue"),
-                    node.dataset || "Inconnu",
-                    node.license || "Inconnue",
+                    String(node.createdAt ?? (window.__I18N['js.unknown_f'] || "Inconnue")),
+                    node.dataset || (window.__I18N['js.unknown'] || "Inconnu"),
+                    node.license || (window.__I18N['js.unknown_f'] || "Inconnue"),
                     distance > 0 ? `+${distance}` : String(distance ?? 0),
                     String(node.ascendantsCount ?? "0"),
                     String(node.descendantsCount ?? "0"),

application_neo4j/static/js/script_dataset.js

@@ -1,39 +1,43 @@
 const edgeInfos_dataset = {
     "Fait partie de cette organisation": {
-      color: "#a05195",name : "Fait partie de cette organisation",
-      tooltip: "Cette personne est membre de cette organisation"
+      color: "#a05195",
+      tooltip_fr: "Cette personne est membre de cette organisation",
+      tooltip_en: "This person is a member of this organization"
     },
     "A publié": {
-      color: "#003f5c",name : "A publié",
-      tooltip: "Un auteur (personne ou organistaion) a publié un modèle"
+      color: "#003f5c",
+      tooltip_fr: "Un auteur (personne ou organisation) a publié un modèle",
+      tooltip_en: "An author (person or organization) published a model"
     },
     "A été utilisé dans ce modèle": {
-      color: "#f50f0f",name : "A été utilisé dans ce modèle",
-      tooltip: "Ce dataset a servi pour l'entraînement de ce modèle"
-
+      color: "#f50f0f",
+      tooltip_fr: "Ce dataset a servi pour l'entraînement de ce modèle",
+      tooltip_en: "This dataset was used for training this model"
     },
     "A généré": {
-      color: "#8f7340",name : "A permis de générer",
-      tooltip: "Le modèle source a été téléchargé et modifié afin de créer le modèle cible (type de transformation inconnu)"
-
+      color: "#8f7340",
+      tooltip_fr: "Le modèle source a été téléchargé et modifié afin de créer le modèle cible (type de transformation inconnu)",
+      tooltip_en: "The source model was downloaded and modified to create the target model (transformation type unknown)"
     },
     "finetune": {
-      color: "#d9c00d",name : "Finetune",
-      tooltip: "Ajustement : le modèle source est ré-entraîné sur un jeu de données spécifique afin de pouvoir être performant pour une tâche précise."
-
+      color: "#d9c00d",
+      tooltip_fr: "Ajustement : le modèle source est ré-entraîné sur un jeu de données spécifique afin de pouvoir être performant pour une tâche précise.",
+      tooltip_en: "Fine-tuning: the source model is retrained on a specific dataset to perform well on a precise task."
     },
     "adapter": {
-      color: "#9af17c",name : "Adapter",
-
-      tooltip: "Adaptation : méthode d’ajustement qui peut être utilisée avec peu de ressources de calcul."
+      color: "#9af17c",
+      tooltip_fr: "Adaptation : méthode d'ajustement qui peut être utilisée avec peu de ressources de calcul.",
+      tooltip_en: "Adaptation: a fine-tuning method that can be used with limited computing resources."
     },
     "quantized": {
-      color: "#1bc3c6",name : "Quantized",
-      tooltip:"Quantisation : la précision des poids du modèle source est réduite afin de diminuer son empreinte en mémoire."
+      color: "#1bc3c6",
+      tooltip_fr: "Quantisation : la précision des poids du modèle source est réduite afin de diminuer son empreinte en mémoire.",
+      tooltip_en: "Quantization: the precision of the source model's weights is reduced to decrease its memory footprint."
     },
     "merge": {
-      color: "#e407e4",name : "Merge",
-      tooltip:"Fusion : méthode visant à mélanger des couches de différents modèles pour améliorer leur performance."
+      color: "#e407e4",
+      tooltip_fr: "Fusion : méthode visant à mélanger des couches de différents modèles pour améliorer leur performance.",
+      tooltip_en: "Merge: a method aiming to mix layers of different models to improve their performance."
     }
   };
 
@@ -42,7 +46,7 @@ const edgeInfos_dataset = {
     const legendContainer = document.getElementById("legend-edges");
     legendContainer.innerHTML = ""; // reset
   
-    Object.entries(edgeInfos_dataset).forEach(([relation, {color, name,tooltip}]) => {
+    Object.entries(edgeInfos_dataset).forEach(([relation, {color, tooltip_fr, tooltip_en}]) => {
       const li = document.createElement("li");
       li.className = "list-group-item d-flex align-items-center";
       
@@ -50,15 +54,15 @@ const edgeInfos_dataset = {
       li.setAttribute("data-bs-toggle", "tooltip");
       li.setAttribute("data-bs-placement", "top");
       li.setAttribute("data-bs-html", "true");
-      li.setAttribute("title", tooltip);
-  
+      li.setAttribute("title", I18N_LANG === 'en' ? (tooltip_en || tooltip_fr) : (tooltip_fr || tooltip_en || ""));
+
       const span = document.createElement("span");
       span.className = "legend-color edge me-2";
       span.style.backgroundColor = color;
-  
+
       li.appendChild(span);
-      li.appendChild(document.createTextNode(name));
-  
+      li.appendChild(document.createTextNode(edgeDisplayName(relation)));
+
       legendContainer.appendChild(li);
     });
   
@@ -199,8 +203,11 @@ document.addEventListener("DOMContentLoaded", () => {
                 return;
             }
     
+            const datatablesLangUrl = (window.__I18N_LANG === 'en')
+                ? "https://cdn.datatables.net/plug-ins/1.13.4/i18n/en.json"
+                : "https://cdn.datatables.net/plug-ins/1.13.4/i18n/fr-FR.json";
             const common_dt_options = {
-                "language": { "url": "https://cdn.datatables.net/plug-ins/1.13.4/i18n/fr-FR.json" },
+                "language": { "url": datatablesLangUrl },
                 "pageLength": 10,
                 "responsive": true,"scrollX": true , "scrollY":true,
                 "columnDefs": [
@@ -236,12 +243,12 @@ document.addEventListener("DOMContentLoaded", () => {
                     node.id || "N/A",
                     node.author || "Inconnu",
                     // La conversion en string via la condition est parfaite ici
-                    String(node.downloads ?? "Inconnu"),
-                    node.task || "Inconnue",
+                    String(node.downloads ?? (window.__I18N['js.unknown'] || "Inconnu")),
+                    node.task || (window.__I18N['js.unknown_f'] || "Inconnue"),
                     String(node.likes ?? "0"),
-                    String(node.createdAt ?? "Inconnue"),
-                    node.dataset || "Inconnu",
-                    node.license || "Inconnue",
+                    String(node.createdAt ?? (window.__I18N['js.unknown_f'] || "Inconnue")),
+                    node.dataset || (window.__I18N['js.unknown'] || "Inconnu"),
+                    node.license || (window.__I18N['js.unknown_f'] || "Inconnue"),
                     String(node.ascendantsCount ?? "0"),
                     String(node.descendantsCount ?? "0"),
                     String(node.citationCount ?? "0")

application_neo4j/static/js/script_expert.js

@@ -6,7 +6,7 @@ function buildEdgeFilters() {
     const container = document.getElementById('edge-filters-container');
     if (!container) return;
     container.innerHTML = '';
-    Object.entries(edgeInfos).forEach(([key, { name }]) => {
+    Object.entries(edgeInfos).forEach(([key, { color }]) => {
         const div = document.createElement('div');
         div.className = 'form-check form-switch';
         const input = document.createElement('input');
@@ -18,7 +18,7 @@ function buildEdgeFilters() {
         const label = document.createElement('label');
         label.className = 'form-check-label';
         label.htmlFor = input.id;
-        label.textContent = name;
+        label.textContent = edgeDisplayName(key);
         div.appendChild(input);
         div.appendChild(label);
         container.appendChild(div);
@@ -34,16 +34,19 @@ function populateGraphModelsTable(graphData, table) {
         
 
         // Construction de la ligne avec les nouvelles données
+        const unknown = window.__I18N['js.unknown'] || "Inconnu";
+        const unknownF = window.__I18N['js.unknown_f'] || "Inconnue";
+        const na = window.__I18N['js.na'] || "N/A";
         const rowData = [
-            node.id || "N/A",
-            node.author || "Inconnu",
+            node.id || na,
+            node.author || unknown,
             // La conversion en string via la condition est parfaite ici
-            String(node.downloads ?? "Inconnu"),
-            node.task || "Inconnue",
+            String(node.downloads ?? unknown),
+            node.task || unknownF,
             String(node.likes ?? "0"),
-            String(node.createdAt ?? "Inconnue"),
-            node.dataset || "Inconnu",
-            node.license || "Inconnue",
+            String(node.createdAt ?? unknownF),
+            node.dataset || unknown,
+            node.license || unknownF,
             distance > 0 ? `+${distance}` : String(distance ?? 0),
             String(node.ascendantsCount ?? "0"),
             String(node.descendantsCount ?? "0"),
@@ -204,8 +207,11 @@ function initializeSigmaGraph(graphData) {
     buildEdgeLegend();
     buildEdgeFilters(); 
     
+    const datatablesLangUrl = (window.__I18N_LANG === 'en')
+        ? "https://cdn.datatables.net/plug-ins/1.13.4/i18n/en.json"
+        : "https://cdn.datatables.net/plug-ins/1.13.4/i18n/fr-FR.json";
     const graphModelsTable = $('#graph-models-table').DataTable({
-        language: { "url": "https://cdn.datatables.net/plug-ins/1.13.4/i18n/fr-FR.json" },
+        language: { "url": datatablesLangUrl },
         pageLength: 5, responsive: true, scrollX: true
     });
     

application_neo4j/static/js/utils.js

@@ -1,45 +1,99 @@
 // --- FONCTIONS UTILITAIRES GLOBALES ---
 // Ces fonctions sont utilisées à plusieurs endroits et sont donc définies en premier.
+
+// ── I18N runtime (peut être surchargé par le template) ──
+const I18N = window.__I18N_DATA || {};
+const I18N_LANG = window.__I18N_LANG || 'fr';
+
+function _(key) {
+    return I18N[key] !== undefined ? I18N[key] : key;
+}
+
+// ── Edge labels translations (Neo4j relation name → display name) ──
+const EDGE_LABEL_MAP = {
+    fr: {
+        "POSTED": "A publié",
+        "IS_IN": "Fait partie de cette organisation",
+        "USED_IN": "A été utilisé dans ce modèle",
+        "A publié": "A publié",
+        "Fait partie de cette organisation": "Fait partie de cette organisation",
+        "A été utilisé dans ce modèle": "A été utilisé dans ce modèle",
+        "A généré": "A généré",
+        "finetune": "Finetune",
+        "adapter": "Adapter",
+        "quantized": "Quantized",
+        "merge": "Merge",
+        "other": "Autre",
+        "unknown": "Autre",
+    },
+    en: {
+        "POSTED": "Published",
+        "IS_IN": "Member of this organization",
+        "USED_IN": "Used in this model",
+        "A publié": "Published",
+        "Fait partie de cette organisation": "Member of this organization",
+        "A été utilisé dans ce modèle": "Used in this model",
+        "A généré": "Generated",
+        "finetune": "Fine-tuned",
+        "adapter": "Adapted",
+        "quantized": "Quantized",
+        "merge": "Merged",
+        "other": "Other",
+        "unknown": "Other",
+    },
+};
+
+function edgeDisplayName(relation) {
+    const map = EDGE_LABEL_MAP[I18N_LANG] || EDGE_LABEL_MAP.fr;
+    return map[relation] || relation;
+}
+
 // Mapping relations → {couleur, tooltip}
 const edgeInfos = {
     "Fait partie de cette organisation": {
-      color: "#a05195",name : "Fait partie de cette organisation",
-      tooltip: "Cette personne est membre de cette organisation"
+      color: "#a05195",
+      tooltip_fr: "Cette personne est membre de cette organisation",
+      tooltip_en: "This person is a member of this organization"
     },
     "A publié": {
-      color: "#003f5c",name : "A publié",
-      tooltip: "Un auteur (personne ou organistaion) a publié un modèle"
+      color: "#003f5c",
+      tooltip_fr: "Un auteur (personne ou organisation) a publié un modèle",
+      tooltip_en: "An author (person or organization) published a model"
     },
     "A généré": {
-      color: "#f50f0f",name : "A permis de générer",
-      tooltip: "Le modèle source a été téléchargé et modifié afin de créer le modèle cible (type de transformation inconnu)"
-
+      color: "#f50f0f",
+      tooltip_fr: "Le modèle source a été téléchargé et modifié afin de créer le modèle cible (type de transformation inconnu)",
+      tooltip_en: "The source model was downloaded and modified to create the target model (transformation type unknown)"
     },
     "finetune": {
-      color: "#cd6700",name : "Finetune",
-      tooltip: "Ajustement : le modèle source est ré-entraîné sur un jeu de données spécifique afin de pouvoir être performant pour une tâche précise."
-
+      color: "#cd6700",
+      tooltip_fr: "Ajustement : le modèle source est ré-entraîné sur un jeu de données spécifique afin de pouvoir être performant pour une tâche précise.",
+      tooltip_en: "Fine-tuning: the source model is retrained on a specific dataset to perform well on a precise task."
     },
     "adapter": {
-      color: "#238a00",name : "Adapter",
-
-      tooltip: "Adaptation : méthode d’ajustement qui peut être utilisée avec peu de ressources de calcul."
+      color: "#238a00",
+      tooltip_fr: "Adaptation : méthode d'ajustement qui peut être utilisée avec peu de ressources de calcul.",
+      tooltip_en: "Adaptation: a fine-tuning method that can be used with limited computing resources."
     },
     "quantized": {
-      color: "#009194",name : "Quantized",
-      tooltip:"Quantisation : la précision des poids du modèle source est réduite afin de diminuer son empreinte en mémoire."
+      color: "#009194",
+      tooltip_fr: "Quantisation : la précision des poids du modèle source est réduite afin de diminuer son empreinte en mémoire.",
+      tooltip_en: "Quantization: the precision of the source model's weights is reduced to decrease its memory footprint."
     },
     "merge": {
-      color: "#c29bc2",name : "Merge",
-      tooltip:"Fusion : méthode visant à mélanger des couches de différents modèles pour améliorer leur performance."
+      color: "#c29bc2",
+      tooltip_fr: "Fusion : méthode visant à mélanger des couches de différents modèles pour améliorer leur performance.",
+      tooltip_en: "Merge: a method aiming to mix layers of different models to improve their performance."
     },
     "other": {
-      color: "#8f7340",name : "Autre",
-      tooltip: "Autre type de relation"
-    }
-    , "unknown": {
-      color: "#8f7340",name : "Autre",
-      tooltip: "Autre type de relation"
+      color: "#8f7340",
+      tooltip_fr: "Autre type de relation",
+      tooltip_en: "Other type of relation"
+    },
+    "unknown": {
+      color: "#8f7340",
+      tooltip_fr: "Autre type de relation",
+      tooltip_en: "Other type of relation"
     }
   };
 
@@ -49,8 +103,8 @@ const edgeInfos = {
   function buildEdgeLegend() {
     const legendContainer = document.getElementById("legend-edges");
     legendContainer.innerHTML = ""; // reset
-  
-    Object.entries(edgeInfos).forEach(([relation, {color, name,tooltip}]) => {
+
+    Object.entries(edgeInfos).forEach(([relation, {color, tooltip_fr, tooltip_en}]) => {
       if (relation == "unknown") return;
       const li = document.createElement("li");
       li.className = "list-group-item d-flex align-items-center";
@@ -59,18 +113,19 @@ const edgeInfos = {
       li.setAttribute("data-bs-toggle", "tooltip");
       li.setAttribute("data-bs-placement", "top");
       li.setAttribute("data-bs-html", "true");
-      li.setAttribute("title", tooltip);
-  
+      const tooltipKey = I18N_LANG === 'en' ? 'tooltip_en' : 'tooltip_fr';
+      li.setAttribute("title", tooltip_fr !== undefined ? (I18N_LANG === 'en' ? tooltip_en : tooltip_fr) : (tooltip_en || tooltip_fr || ""));
+
       const span = document.createElement("span");
       span.className = "legend-color edge me-2";
       span.style.backgroundColor = color;
-  
+
       li.appendChild(span);
-      li.appendChild(document.createTextNode(name));
-  
+      li.appendChild(document.createTextNode(edgeDisplayName(relation)));
+
       legendContainer.appendChild(li);
     });
-  
+
     // nécessaire pour activer les tooltips Bootstrap dynamiques
     const tooltipTriggerList = [].slice.call(legendContainer.querySelectorAll('[data-bs-toggle="tooltip"]'))
     tooltipTriggerList.map(el => new bootstrap.Tooltip(el));
@@ -97,19 +152,30 @@ function showNodeInfo(attr) {
     infoCard.dataset.nodeId = attr.id;
  
     // --- ÉTAPE 2: Construction des détails ---
-    let infosHtml = `<p><strong>Nom :</strong> ${attr.id || "Non défini"}</p><p><strong>Type :</strong> ${attr.dataCat}</p>`;
+    const labels = {
+        name: I18N['js.node_info.name'] || "Nom :",
+        type: I18N['js.node_info.type'] || "Type :",
+        followers: I18N['js.node_info.followers'] || "Abonnés :",
+        downloads: I18N['js.node_info.downloads'] || "Téléchargements :",
+        created: I18N['js.node_info.created'] || "Créé le :",
+        task: I18N['js.node_info.task'] || "Tâche :",
+        dataset: I18N['js.node_info.dataset'] || "Dataset utilisé :",
+        undefined: I18N['js.node_info.undefined'] || "Non défini",
+    };
+    
+    let infosHtml = `<p><strong>${labels.name}</strong> ${attr.id || labels.undefined}</p><p><strong>${labels.type}</strong> ${attr.dataCat}</p>`;
     
     // ... (Le reste de la construction de infosHtml ne change pas) ...
     if (["personne", "organisation", "Author"].includes(attr.dataCat)) {
-        if (attr.followers) infosHtml += `<p><strong>Abonnés :</strong> ${formatNumberShort(attr.followers)}</p>`;
+        if (attr.followers) infosHtml += `<p><strong>${labels.followers}</strong> ${formatNumberShort(attr.followers)}</p>`;
     } else if (["Modèle", "Model"].includes(attr.dataCat)) {
-        if (attr.downloads) infosHtml += `<p><strong>Téléchargements :</strong> ${formatNumberShort(attr.downloads)}</p>`;
-        if (attr.createdAt) infosHtml += `<p><strong>Créé le :</strong> ${formatDateFr(attr.createdAt)}</p>`;
-        if (attr.task) infosHtml += `<p><strong>Tâche :</strong> ${attr.task}</p>`;
-        if (attr.dataset) infosHtml += `<p><strong>Dataset utilisé :</strong> ${attr.dataset}</p>`;
+        if (attr.downloads) infosHtml += `<p><strong>${labels.downloads}</strong> ${formatNumberShort(attr.downloads)}</p>`;
+        if (attr.createdAt) infosHtml += `<p><strong>${labels.created}</strong> ${formatDateFr(attr.createdAt)}</p>`;
+        if (attr.task) infosHtml += `<p><strong>${labels.task}</strong> ${attr.task}</p>`;
+        if (attr.dataset) infosHtml += `<p><strong>${labels.dataset}</strong> ${attr.dataset}</p>`;
     } else if (attr.dataCat === "Dataset") {
-        if (attr.downloads) infosHtml += `<p><strong>Téléchargements :</strong> ${formatNumberShort(attr.downloads)}</p>`;
-        if (attr.createdAt_dataset) infosHtml += `<p><strong>Créé le :</strong> ${formatDateFr(attr.createdAt_dataset)}</p>`;
+        if (attr.downloads) infosHtml += `<p><strong>${labels.downloads}</strong> ${formatNumberShort(attr.downloads)}</p>`;
+        if (attr.createdAt_dataset) infosHtml += `<p><strong>${labels.created}</strong> ${formatDateFr(attr.createdAt_dataset)}</p>`;
     }
  
     // --- ÉTAPE 3: Création du lien ---
@@ -126,7 +192,8 @@ function showNodeInfo(attr) {
         link.target = '_blank';
         link.rel = 'noopener noreferrer';
         link.className = 'stretched-link'; 
-        link.setAttribute('aria-label', `Voir ${attr.id} sur Hugging Face`);
+        const seeLabel = (I18N['js.node_info.see_on_hf'] || "Voir {name} sur Hugging Face").replace('{name}', attr.id);
+        link.setAttribute('aria-label', seeLabel);
         cardBody.appendChild(link);
     }
  
@@ -143,17 +210,18 @@ function showNodeInfo(attr) {
 
 
 /**
- * Formate une chaîne de date ISO en format français (ex: 1 janvier 2024).
+ * Formate une chaîne de date ISO.
  * @param {string} dateString - La date à formater.
- * @returns {string} La date formatée ou "Date inconnue".
+ * @returns {string} La date formatée ou "Date inconnue" / "Unknown date".
  */
 function formatDateFr(dateString) {
-    if (!dateString || dateString === "inconnue") return "Date inconnue";
+    if (!dateString || dateString === "inconnue") return I18N['js.node_info.unknown_date'] || "Date inconnue";
     try {
+        const locale = I18N_LANG === 'en' ? 'en-GB' : 'fr-FR';
         const options = { year: 'numeric', month: 'long', day: 'numeric' };
-        return new Date(dateString).toLocaleDateString('fr-FR', options);
+        return new Date(dateString).toLocaleDateString(locale, options);
     } catch (e) {
-        return "Date inconnue";
+        return I18N['js.node_info.unknown_date'] || "Date inconnue";
     }
 }
 

application_neo4j/templates/expert.html

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="fr">
+<html lang="{{ current_lang }}">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Généalogie des Modèles - Vue Experte</title>
+  <title>{{ t('site.title_expert') }}</title>
   
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
@@ -21,17 +21,21 @@
     <header class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
     <div class="container">
       <a class="navbar-brand" href="/">
-        <span class="fw-bold">Généalogie des Modèles</span>
-        <small class="d-block text-muted">Exploration des relations entre modèles et datasets</small>
+        <span class="fw-bold">{{ t('site.nav_brand_model_expert') }}</span>
+        <small class="d-block text-muted">{{ t('site.nav_subtitle') }}</small>
       </a>
+      <div class="d-flex gap-2">
+        <a href="{{ url_for('set_language_route', lang='fr') }}" class="btn btn-sm {{ 'btn-primary' if current_lang == 'fr' else 'btn-outline-primary' }}">{{ t('lang.fr') }}</a>
+        <a href="{{ url_for('set_language_route', lang='en') }}" class="btn btn-sm {{ 'btn-primary' if current_lang == 'en' else 'btn-outline-primary' }}">{{ t('lang.en') }}</a>
+      </div>
     </div>
   </header>
 
   <main class="container mt-4 flex-grow-1">
     <div class="row">
       <div class="col-12">
-        <h1 class="display-5">Recherche Experte</h1>
-        <p class="lead">Explorez et filtrez la généalogie des modèles</p>
+        <h1 class="display-5">{{ t('expert.page_title') }}</h1>
+        <p class="lead">{{ t('expert.page_lead') }}</p>
       </div>
     </div>   
     <div class="row g-3 mb-4">
@@ -42,44 +46,44 @@
           <div class="row g-3 align-items-end">
             <!-- Champ de recherche -->
             <div class="col-12 col-md-5">
-              <label for="search-input" class="form-label fw-bold">Nom à rechercher</label>
+              <label for="search-input" class="form-label fw-bold">{{ t('search.label_name') }}</label>
               <div class="position-relative">
                 <input type="text" name="name" id="search-input" class="form-control"
-                          placeholder="Taper le nom du modèle suspecté."
+                          placeholder="{{ t('expert.placeholder') }}"
                           value="{{ request.form.name or '' }}" required autocomplete="off" />
                 <ul id="suggestions-list" class="list-group position-absolute w-100" style="display: none; z-index: 1000;"></ul>
               </div>
             </div>
             <!-- Filtres -->
             <div class="col-12 col-md-3">
-              <label class="form-label fw-bold">Filtres</label>
+              <label class="form-label fw-bold">{{ t('search.label_filters') }}</label>
               <div class="d-flex gap-3">
                 <div class="form-check">
                   <input class="form-check-input" type="checkbox" name="filters" value="Model" id="filter-model"
                           {% if 'Model' in search.filters %}checked{% endif %}>
-                  <label class="form-check-label" for="filter-model">Modèle</label>
+                  <label class="form-check-label" for="filter-model">{{ t('search.filter_model') }}</label>
                 </div>
                 <div class="form-check">
                   <input class="form-check-input" type="checkbox" name="filters" value="Dataset" id="filter-dataset"
                           {% if 'Dataset' in search.filters %}checked{% endif %}>
-                  <label class="form-check-label" for="filter-dataset">Dataset</label>
+                  <label class="form-check-label" for="filter-dataset">{{ t('search.filter_dataset') }}</label>
                 </div>
                 <div class="form-check">
                   <input class="form-check-input" type="checkbox" name="filters" value="Author" id="filter-author" {% if 'Author' in search.filters %}checked{% endif %}>
-                  <label class="form-check-label" for="filter-author">Auteur</label>
+                  <label class="form-check-label" for="filter-author">{{ t('expert.filter_author') }}</label>
                 </div>
               </div>
             </div>
             <!-- Profondeur de recherche -->
             <div class="col-12 col-md-4">
-              <label class="form-label fw-bold">Profondeur de recherche</label>
+              <label class="form-label fw-bold">{{ t('search.label_depth') }}</label>
               <div class="d-flex align-items-center gap-3">
                 <div class="form-check form-switch">
                   <input class="form-check-input" type="checkbox" id="depth-unlimited" name="depth_unlimited" checked>
-                  <label class="form-check-label" for="depth-unlimited">Illimitée</label>
+                  <label class="form-check-label" for="depth-unlimited">{{ t('search.depth_unlimited') }}</label>
                 </div>
                 <div class="input-group input-group-sm">
-                  <span class="input-group-text">Limité à:</span>
+                  <span class="input-group-text">{{ t('search.depth_limited') }}</span>
                   <input class="form-control" type="number" name="depth" id="depth"
                           value="{{ request.form.depth }}" min="1" max="5" disabled>
                 </div>
@@ -89,7 +93,7 @@
           <div class="row mt-4">
             <div class="col-12">
               <button type="submit" name="submit" value="findnode_expert" class="btn btn-primary w-100">
-                <i class="bi bi-search me-1"></i>Rechercher
+                <i class="bi bi-search me-1"></i>{{ t('search.btn_search_simple') }}
               </button>
             </div>
           </div>
@@ -97,7 +101,7 @@
       </div>
     </div>
                 
-  
+                
     {% if message %}
     <div class="alert alert-info mt-3"><p class="mb-0">{{ message }}</p></div>
     {% endif %}
@@ -106,7 +110,7 @@
     {% if graph_data and graph_data.nodes %}    
     <div id="genealogy-graph-section"  class="mt-4">
       <div class="row g-4">
-        <div class="card-header"><h5 class="card-title mb-0">Composante connexe du noeud recherché</h5></div>
+        <div class="card-header"><h5 class="card-title mb-0">{{ t('expert.connected_component') }}</h5></div>
         <!-- Colonne de gauche pour le graphe et la carte d'info -->
         <div class="col-12 col-lg-8">
           <div class="card position-relative">
@@ -118,7 +122,7 @@
                   class="card p-2 position-absolute top-0 start-0 shadow-sm" 
                   style="width: 220px; background-color: rgba(255,255,255,0.95);">
                 <div class="d-flex justify-content-between align-items-center mb-2">
-                  <strong>Légendes</strong>
+                  <strong>{{ t('expert.legend_title') }}</strong>
                   <button class="btn btn-sm btn-light p-0" 
                           type="button" 
                           data-bs-toggle="collapse" 
@@ -131,27 +135,27 @@
                 <!-- Contenu de la légende -->
                 <div id="legend-content" class="collapse show">
                   <div class="card mb-2">
-                    <div class="card-header py-1"><h6 class="card-title mb-0">Nœuds</h6></div>
+                    <div class="card-header py-1"><h6 class="card-title mb-0">{{ t('expert.legend_nodes_title') }}</h6></div>
                     <div class="card-body p-2">
                       <ul id="legend-nodes" class="list-group list-group-flush small">
                         <li class="list-group-item d-flex align-items-center py-1">
-                          <span class="legend-color me-2" style="background-color: hsl(45, 65%, 52%);"></span>Dataset
+                          <span class="legend-color me-2" style="background-color: hsl(45, 65%, 52%);"></span>{{ t('expert.legend_dataset') }}
                         </li>
                         <li class="list-group-item d-flex align-items-center py-1">
-                          <span class="legend-color me-2" style="background-color: #007bff;"></span>Personne
+                          <span class="legend-color me-2" style="background-color: #007bff;"></span>{{ t('expert.legend_person') }}
                         </li>
                         <li class="list-group-item d-flex align-items-center py-1">
-                          <span class="legend-color me-2" style="background-color: #092d53;"></span>Organisation
+                          <span class="legend-color me-2" style="background-color: #092d53;"></span>{{ t('expert.legend_org') }}
                         </li>
                         <li class="list-group-item d-flex align-items-center py-1">
-                          <span class="legend-color me-2" style="background-color:#7D7D7D;"></span>Modèle
+                          <span class="legend-color me-2" style="background-color:#7D7D7D;"></span>{{ t('expert.legend_model') }}
                         </li>
                       </ul>
                     </div>
                   </div>
 
                   <div class="card">
-                    <div class="card-header py-1"><h6 class="card-title mb-0">Relations</h6></div>
+                    <div class="card-header py-1"><h6 class="card-title mb-0">{{ t('expert.legend_edges_title') }}</h6></div>
                     <div class="card-body p-2">
                       <ul id="legend-edges" class="list-group list-group-flush small">
                       </ul>
@@ -163,7 +167,7 @@
           </div>
           <div id="node-info-card" class="card mt-3 card-interactive" style="display: none;">                  
             <div class="card-body">
-                  <h5 class="card-title">Informations du nœud sélectionné</h5>
+                  <h5 class="card-title">{{ t('search.node_info_title') }}</h5>
                   <div id="node-details" class="mt-2"></div>
             </div>
           </div>
@@ -171,27 +175,27 @@
         <div class="col-12 col-lg-4">
           <!-- CORRECTION : Chaque section est dans sa propre carte -->
           <div class="card mb-3">
-              <div class="card-header"><h5 class="card-title mb-0">Filtres du Graphe</h5></div>
+              <div class="card-header"><h5 class="card-title mb-0">{{ t('expert.graph_filters') }}</h5></div>
               <div class="card-body" id="graph-filters-container">
-                  <h6>Types de Nœuds</h6>
+                  <h6>{{ t('expert.node_types') }}</h6>
                   <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" id="filter-node-model" value="Modèle" checked>
-                      <label class="form-check-label" for="filter-node-model">Modèle</label>
+                      <label class="form-check-label" for="filter-node-model">{{ t('expert.model_label') }}</label>
                   </div>
                   <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" id="filter-node-person" value="personne" checked>
-                      <label class="form-check-label" for="filter-node-person">Personne</label>
+                      <label class="form-check-label" for="filter-node-person">{{ t('expert.person_label') }}</label>
                   </div>
                   <div class="form-check form-switch">
                       <input class="form-check-input" type="checkbox" id="filter-node-org" value="organisation" checked>
-                      <label class="form-check-label" for="filter-node-org">Organisation</label>
+                      <label class="form-check-label" for="filter-node-org">{{ t('expert.org_label') }}</label>
                   </div>
                   <hr>
-                  <h6>Types de Relations</h6>
+                  <h6>{{ t('expert.rel_types') }}</h6>
                   <div id="edge-filters-container"></div>
               </div>
             </div>
-            <button id="export-btn" class="btn-modern">Télécharger le graphe</button>
+            <button id="export-btn" class="btn-modern">{{ t('expert.btn_export') }}</button>
         </div>
       </div>
       <hr class="my-5">
@@ -199,23 +203,23 @@
       <!-- CORRECTION : Tableau des modèles présents dans le graphe -->
       <div class="row mt-4">
           <div class="col-12">
-              <h4 class="h4">Modèles présents dans le graphe</h4>
+              <h4 class="h4">{{ t('expert.models_in_graph') }}</h4>
               <div class="table-responsive">
                   <table id="graph-models-table" class="table table-bordered table-striped table-hover" style="width:100%">
                       <thead>
                           <tr>
-                              <th scope="col">Modèle</th>
-                        <th scope="col">Auteur</th>
-                        <th scope="col">Téléchargements</th>
-                        <th scope="col">Tâche</th>
-                        <th scope="col">J'aime</th>
-                        <th scope="col">Date de publication</th>
-                        <th scope="col">Dataset utilisé</th>
-                        <th scope="col">Licence</th>
-                        <th scope="col">Distance au modèle recherché</th>
-                        <th scope="col">Ascendants</th>
-                        <th scope="col">Descendants</th>
-                        <th scope="col">Citations</th>
+                              <th scope="col">{{ t('search.table_model') }}</th>
+                        <th scope="col">{{ t('search.table_author') }}</th>
+                        <th scope="col">{{ t('search.table_downloads') }}</th>
+                        <th scope="col">{{ t('search.table_task') }}</th>
+                        <th scope="col">{{ t('search.table_likes') }}</th>
+                        <th scope="col">{{ t('search.table_date') }}</th>
+                        <th scope="col">{{ t('search.table_dataset') }}</th>
+                        <th scope="col">{{ t('search.table_license') }}</th>
+                        <th scope="col">{{ t('search.table_distance') }}</th>
+                        <th scope="col">{{ t('search.table_ascendants') }}</th>
+                        <th scope="col">{{ t('search.table_descendants') }}</th>
+                        <th scope="col">{{ t('search.table_citations') }}</th>
                           </tr>
                       </thead>
                       <tbody>
@@ -231,7 +235,7 @@
 
   <footer class="bg-dark text-white text-center p-4 mt-auto">
     <div class="container">
-      <p class="mb-0">Application de recherche et visualisation... © 2025</p>
+      <p class="mb-0">{{ t('site.footer_expert') }}</p>
     </div>
   </footer>
 
@@ -242,6 +246,10 @@
   <script src="https://unpkg.com/graphology@0.25.1/dist/graphology.umd.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/graphology-library/dist/graphology-library.min.js"></script>
   <script src="{{ url_for('static', filename='js/utils.js') }}"></script>
+  <script>
+    window.__I18N_DATA = {{ js_i18n_data | tojson }};
+    window.__I18N_LANG = "{{ current_lang }}";
+  </script>
   <script src="{{ url_for('static', filename='js/script_expert.js') }}"></script>
   <script>
     document.addEventListener('DOMContentLoaded', function () {
@@ -250,4 +258,4 @@
     });
   </script>
 </body>
-</html>
+</html>

application_neo4j/templates/index.html

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="fr">
+<html lang="{{ current_lang }}">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Accueil - Généalogie des Modèles</title>
+    <title>{{ t('site.title_home') }}</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
 
@@ -95,59 +95,69 @@
       margin-top: 20px;
     }
 
+    /* Language selector */
+    .lang-switch {
+      position: absolute;
+      top: 15px;
+      right: 20px;
+      display: flex;
+      gap: 5px;
+    }
+    .lang-switch a {
+      padding: 4px 10px;
+      border-radius: 4px;
+      text-decoration: none;
+      font-size: 0.85rem;
+      font-weight: bold;
+      color: #555;
+      background: #eee;
+    }
+    .lang-switch a.active {
+      background: #3498db;
+      color: #fff;
+    }
     
     </style>
     </head>
 
 <body>
+    <!-- Language selector -->
+    <div class="lang-switch">
+      <a href="{{ url_for('set_language_route', lang='fr') }}" class="{{ 'active' if current_lang == 'fr' else '' }}">{{ t('lang.fr') }}</a>
+      <a href="{{ url_for('set_language_route', lang='en') }}" class="{{ 'active' if current_lang == 'en' else '' }}">{{ t('lang.en') }}</a>
+    </div>
+
     <div class="welcome-container">
-      <h1>Bienvenue sur l'explorateur de généalogie des modèles publiés sur HuggingFace</h1>
-      <a href="{{ url_for('static', filename='notice/notice.pdf') }}" class="btn-modern" target="_blank">Plus d'infos</a>
+      <h1>{{ t('home.welcome_title') }}</h1>
+      <a href="{{ url_for('static', filename='notice/notice.pdf') }}" class="btn-modern" target="_blank">{{ t('home.more_info') }}</a>
     </div>
     <div class="container content-section">
       <div class="row g-4">
         <div class="col-md-6">
           <div class="content-card">
-          <h4>Qu'est-ce que la généalogie d'un <strong>modèle</strong> ?</h4>
+          <h4>{{ t('home.what_is_model') }}</h4>
           <p>
-            L'observation de la généalogie d’un modèle d’intelligence artificielle consiste à reconstituer l’historique de sa création et de ses transformations :<br><br>
-            • À partir de quel(s) modèle(s) il a été dérivé (<strong>ascendants</strong>) <br>
-            • Quelles <strong>modifications</strong> ont été apportées (ajustement,quantisation, adaptation, fusion…)<br>
-            • Quels nouveaux modèles ont été produits à partir de celui-ci (<strong>descendants</strong> )<br><br>
-            Cela peut être représenté sous forme d'<strong>arbre généalogique</strong>, retraçant l’ensemble des étapes qui ont conduit à un modèle open source donné.
+            {{ t('home.what_is_model_text') | safe }}
           </p>
         </div>
       </div>
       <div class="col-md-6">
         <div class="content-card">
-          <h4>Et dans le cas d'un <strong>dataset</strong> ?</h4>
+          <h4>{{ t('home.what_is_dataset') }}</h4>
           <p>
-            L'observation de la généalogie d’un dataset consiste à reconstituer l’historique de sa création et de ses différentes utilisations : <br> <br>
-            • À partir de quelle(s) <strong>source(s) de données</strong> le dataset a été construit <br>
-            • Quels modèles ont été <strong>entrainés</strong> sur ce jeu de données<br>
-            • A quelles(s) organisation(s) appartient l'auteur qui a publié ce jeu de données<br> <br>
-
-            La généalogie retrace toutes les étapes et ramifications de l'utilisation d'un dataset donné.
+            {{ t('home.what_is_dataset_text') | safe }}
           </p>
         </div>
       </div>
       <div class="col-md-6">
         <div class="content-card">
-          <h4>Pour quoi faire ?</h4>
+          <h4>{{ t('home.purpose') }}</h4>
           <p>
-           Visualiser la généalogie des modèles est une étape importante pour :<br> <br>
-            • Protéger la <strong>vie privée</strong> des personnes dont les données pourraient être mémorisées par un modèle ou contenues dans un dataset <br>
-            • Assurer la <strong>traçabilité</strong> sur les chaînes de modification des modèles<br> <br>
+           {{ t('home.purpose_text') | safe }}
           
-            <h6>Pour mieux comprendre l'utilité de cet outil, prenons le cas d'Alice Dupont:</h6>
+            <h6>{{ t('home.alice_title') }}</h6>
             <span class="highlight">
-            • Alice utilise un chatbot issu d'un modèle publié sur HuggingFace. <br>
-              Sa requête est : "Qui est Alice Dupont ?", le chatbot renvoie son adresse et son numéro de téléphone.<br><br>
-            • Alice veut connaître l'<strong>impact de la mémorisation potentielle de ses données personnelles</strong>, ainsi que l'origine de ce modèle.<br><br>
-              Avec cet outil, Alice a accès :<br>
-              • aux modèles issus du modèle interrogé et publiés sur HuggingFace<br>
-              • aux modèles parents de ce modèle.<br><br>
-            (A condition que les liens entre modèles soient déclarés par les utiliateurs sur HuggingFace)
+            {{ t('home.alice_text') | safe }}
           </span>
         </p>
         </div>
@@ -155,40 +165,40 @@
 
       <div class="col-md-6">
         <div class="content-card">
-          <h4>Vous souhaitez connaître la descendance et l'acsendance de ...</h4>
+          <h4>{{ t('home.find_label') }}</h4>
           <div class="buttons-container">
             <!-- Ce bouton mène à la page de recherche -->
-            <a href="{{ url_for('findnode', filter='Model') }}" class="btn-modern">Un modèle</a>
-            <a href="{{ url_for('findnode', filter='Dataset') }}" class="btn-modern">Un dataset</a>
-            <a href="{{ url_for('findnode') }}" class="btn-modern">Je ne sais pas</a><br><br>
-            <h4>Vous êtes un chercheur</h4>
+            <a href="{{ url_for('findnode', filter='Model') }}" class="btn-modern">{{ t('home.btn_model') }}</a>
+            <a href="{{ url_for('findnode', filter='Dataset') }}" class="btn-modern">{{ t('home.btn_dataset') }}</a>
+            <a href="{{ url_for('findnode') }}" class="btn-modern">{{ t('home.btn_unsure') }}"><br><br>
+            <h4>{{ t('home.expert_label') }}</h4>
             <div class="buttons-container">
             <!-- Ce bouton mène à la page de recherche -->
-            <a href="{{ url_for('findnode_expert', filter='Model') }}" class="btn-modern">Mode expert</a>
+            <a href="{{ url_for('findnode_expert', filter='Model') }}" class="btn-modern">{{ t('home.btn_expert') }}</a>
             </div>
           </div>
-      <p><br/> <br/> <br/>Date de téléchargement de la base de donnée : 01/09/2025</p>    
+      <p><br/> <br/> <br/>{{ t('home.download_date') }}</p>    
       </div>
     </div>
   <div class="welcome-container">
-      <h2>Mentions d'information sur les traitements de données à caractère personnel</h2>
+      <h2>{{ t('home.notice_title') }}</h2>
 
-<p>Afin d’étudier le développement de la communauté de l’IA open source, et de préparer la possibilité d’exercices de droits des citoyens, le projet vise à étudier la base de données des jeux de données et modèles présents sur la plateforme HuggingFace. Cette base de données permet d’établir un arbre généalogique des modèles.</p>
+<p>{{ t('home.notice_p1') }}</p>
 
-<p>Les données traitées sont le pseudonyme de l’auteur (quand il apparaît dans les métadonnées), le nom du modèle/jeu de données et plusieurs informations inhérentes à ce modèle/jeu de données telles que la date de publication, la licence utilisée ou encore le nombre de téléchargements.</p>
+<p>{{ t('home.notice_p2') }}</p>
 
-<p>Ce projet relève de la mission d’intérêt public dont est investie la CNIL en application du règlement général sur la protection des données et de la loi Informatique et Libertés modifiée (article 8).</p>
+<p>{{ t('home.notice_p3') }}</p>
 
-<p>Les données sont publiées à partir de l’espace CNIL sur HuggingFace.</p>
+<p>{{ t('home.notice_p4') }}</p>
 
-<p>Une première phase d’évaluation de l’utilité de l’outil interviendra après 6 mois de publication. A cette échéance, l’outil pourra être modifié et le projet reconduit.</p>
+<p>{{ t('home.notice_p5') }}</p>
 
-<p>Vous pouvez accéder et obtenir une copie de vos données, vous opposer au traitement de ces données, les faire rectifier ou effacer. Vous disposez également du droit de limiter le traitement de vos données.</p>
+<p>{{ t('home.notice_p6') }}</p>
 
-<p>Vous pouvez exercer vos droits ou poser vos questions sur ce projet en contactant le service IA de la CNIL : <a href="mailto:ia@cnil.fr">ia@cnil.fr</a>.</p>
+<p>{{ t('home.notice_p7') | safe }}</p>
 
-<p>Si vous estimez, après nous avoir contactés, que vos droits « Informatique et Libertés » ne sont pas respectés, vous pouvez contacter le DPO de la CNIL ou adresser une réclamation à la CNIL.</p>
+<p>{{ t('home.notice_p8') }}</p>
 
     </div>
 </body>
-</html>
+</html>

application_neo4j/templates/search.html

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="fr">
+<html lang="{{ current_lang }}">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Généalogie des Modèles</title>
+  <title>{{ t('site.title_search') }}</title>
   
   <!-- CSS de Bootstrap (remplace DSFR) -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
@@ -36,9 +36,13 @@
     <header class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
     <div class="container">
       <a class="navbar-brand" href="/">
-        <span class="fw-bold">Généalogie des Modèles </span>
-        <small class="d-block text-muted">Exploration des relations entre modèles et datasets (base de données actualisée le 01/09/2025)</small>
+        <span class="fw-bold">{{ t('site.nav_brand') }}</span>
+        <small class="d-block text-muted">{{ t('site.nav_subtitle_full') }}</small>
       </a>
+      <div class="d-flex gap-2">
+        <a href="{{ url_for('set_language_route', lang='fr') }}" class="btn btn-sm {{ 'btn-primary' if current_lang == 'fr' else 'btn-outline-primary' }}">{{ t('lang.fr') }}</a>
+        <a href="{{ url_for('set_language_route', lang='en') }}" class="btn btn-sm {{ 'btn-primary' if current_lang == 'en' else 'btn-outline-primary' }}">{{ t('lang.en') }}</a>
+      </div>
     </div>
   </header>
 
@@ -46,8 +50,8 @@
     <!-- Titre principal et Formulaire (inchangés) -->
     <div class="row">
       <div class="col-12">
-        <h1 class="display-5">Recherche dans la base de données HuggingFace</h1>
-        <p class="lead">Explorez la généalogie des modèles</p>
+        <h1 class="display-5">{{ t('search.page_title') }}</h1>
+        <p class="lead">{{ t('search.page_lead_model') }}</p>
       </div>
     </div>
     
@@ -59,10 +63,10 @@
           <div class="row g-3 align-items-end">
             <!-- Champ de recherche -->
             <div class="col-12 col-md-5">
-              <label for="search-input" class="form-label fw-bold">Nom à rechercher</label>
+              <label for="search-input" class="form-label fw-bold">{{ t('search.label_name') }}</label>
               <div class="position-relative">
                 <input type="text" name="name" id="search-input" class="form-control"
-                       placeholder="Taper le nom du modèle ou l'id de son repo Hugging Face."
+                       placeholder="{{ t('search.placeholder_model') }}"
                        value="{{ request.form.name or '' }}" required autocomplete="off" />
                 <ul id="suggestions-list" class="list-group position-absolute w-100" style="display: none; z-index: 1000;"></ul>
               </div>
@@ -70,31 +74,31 @@
     
             <!-- Filtres -->
             <div class="col-12 col-md-3">
-              <label class="form-label fw-bold">Filtres</label>
+              <label class="form-label fw-bold">{{ t('search.label_filters') }}</label>
               <div class="d-flex gap-3">
                 <div class="form-check">
                   <input class="form-check-input" type="checkbox" name="filters" value="Model" id="filter-model"
                          {% if 'Model' in search.filters %}checked{% endif %}>
-                  <label class="form-check-label" for="filter-model">Modèle</label>
+                  <label class="form-check-label" for="filter-model">{{ t('search.filter_model') }}</label>
                 </div>
                 <div class="form-check">
                   <input class="form-check-input" type="checkbox" name="filters" value="Dataset" id="filter-dataset"
                          {% if 'Dataset' in search.filters %}checked{% endif %}>
-                  <label class="form-check-label" for="filter-dataset">Dataset</label>
+                  <label class="form-check-label" for="filter-dataset">{{ t('search.filter_dataset') }}</label>
                 </div>
               </div>
             </div>
     
             <!-- Profondeur de recherche -->
             <div class="col-12 col-md-4">
-              <label class="form-label fw-bold">Profondeur de recherche</label>
+              <label class="form-label fw-bold">{{ t('search.label_depth') }}</label>
               <div class="d-flex align-items-center gap-3">
                 <div class="form-check form-switch">
                   <input class="form-check-input" type="checkbox" id="depth-unlimited" name="depth_unlimited" checked>
-                  <label class="form-check-label" for="depth-unlimited">Illimitée</label>
+                  <label class="form-check-label" for="depth-unlimited">{{ t('search.depth_unlimited') }}</label>
                 </div>
                 <div class="input-group input-group-sm">
-                  <span class="input-group-text">Limité à:</span>
+                  <span class="input-group-text">{{ t('search.depth_limited') }}</span>
                   <input class="form-control" type="number" name="depth" id="depth"
                          value="{{ request.form.depth }}" min="1" max="5" disabled>
                 </div>
@@ -106,7 +110,7 @@
           <div class="row mt-4">
             <div class="col-12">
               <button type="submit" name="submit" value="find_node" class="btn btn-primary w-100">
-                <i class="bi bi-search me-1"></i>Rechercher (le chargement peut prendre jusqu'à une minute pour les grandes généalogies)
+                <i class="bi bi-search me-1"></i>{{ t('search.btn_search') }}
               </button>
             </div>
           </div>
@@ -127,19 +131,19 @@
         <!-- COLONNE ASCENDANCE -->
         <div class="col-12 col-lg-3">
           <div class="d-flex justify-content-center  gap-2 mb-3">
-            <h4 class="h5 text-center mb-3">Modèles importants de l'ascendance
+            <h4 class="h5 text-center mb-3">{{ t('search.asc_section') }}
           <!-- L'icône avec les attributs pour le tooltip -->
           <i class="bi bi-info-circle-fill text-secondary align-middle ms-2" 
                        data-bs-toggle="tooltip" 
              data-bs-placement="right" 
-             title="Les modèles qui précèdent le modèle recherché dans la généalogie, c’est-à-dire, les modèles à partir desquels le modèle recherché a été constitué">
+             title="{{ t('search.asc_tooltip') }}">
           </i>
         </h4>
         </div>
             <div class="card">
                 <div class="card-body p-2">
                     {% if not highlights.asc_unique_models %}
-                        <p class="text-muted small m-2">Aucun modèle parent trouvé.</p>
+                        <p class="text-muted small m-2">{{ t('search.no_parent') }}</p>
                     {% else %}
                         {% for model in highlights.asc_unique_models %}
                             <div class="card mb-2 position-relative ">
@@ -161,20 +165,20 @@
                                         <!-- MODIFICATION : Ajout de la classe "text-break" pour empêcher le débordement -->
                                         <h6 class="card-title small mb-1 text-break card-interactive">
                                             <a href="https://huggingface.co/{{ model.name }}" target="_blank" rel="noopener noreferrer" class="stretched-link" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" 
-                                            title="<b>Informations :</b>
-                                            <br>Auteur : {{ (model.name.split('/') | first) if '/' in model.name else 'Inconnu' }}<br>
-                                            Ciations : {{ '{:,.0f}'.format((model.citation_count or 0) | int).replace(',', ' ') }}<br>
-                                            J'aime : {{ model.likes or 'Inconnu' }}<br>
-                                            Date publication : {{ model.createdAt or 'N/A' }}<br>
-                                            Tâche : {{ model.task or 'Inconnue' }}<br>
-                                            License : {{ model.license or 'Inconnue' }}"
+                                            title="<b>{{ t('search.info_label') }}</b>
+                                            <br>{{ t('search.info_author') }} : {{ (model.name.split('/') | first) if '/' in model.name else t('search.info_unknown') }}<br>
+                                            {{ t('search.info_citations') }} : {{ '{:,.0f}'.format((model.citation_count or 0) | int).replace(',', ' ') }}<br>
+                                            {{ t('search.info_likes') }} : {{ model.likes or t('search.info_unknown') }}<br>
+                                            {{ t('search.info_date') }} : {{ model.createdAt or 'N/A' }}<br>
+                                            {{ t('search.info_task') }} : {{ model.task or t('search.info_unknown_task') }}<br>
+                                            {{ t('search.info_license') }} : {{ model.license or t('search.info_unknown_task') }}"
                                             >
                                                 {{ model.name }}
                                             </a>
                                         </h6>
                                         <p class="card-text" style="font-size: 0.75em; line-height: 1.2;">
-                                            {{ "{:,.0f}".format((model.downloads or 0) | int).replace(',', ' ') }} téléchargements<br>
-                                            {{ "{:,.0f}".format((model.citation_count or 0) | int).replace(',', ' ') }} citations
+                                            {{ "{:,.0f}".format((model.downloads or 0) | int).replace(',', ' ') }} {{ t('search.downloads') }}<br>
+                                            {{ "{:,.0f}".format((model.citation_count or 0) | int).replace(',', ' ') }} {{ t('search.citations') }}
                                         </p>
                                     </div>
                                 </div>
@@ -192,7 +196,7 @@
 
         <!-- COLONNE MODÈLE RECHERCHÉ (CENTRE) (inchangée) -->
         <div class="col-12 col-lg-4 " id="center-column">
-            <h3 class="h5 text-center mb-3">Modèle recherché</h3>
+            <h3 class="h5 text-center mb-3">{{ t('search.searched_model') }}</h3>
             <a href="https://huggingface.co/{{ searched_node.id }}" target="_blank" rel="noopener noreferrer" class="text-white">
             <div class="card card-recherche text-center  border-2 ">
                 <div class="card-header card-recherche-header text-white">
@@ -204,46 +208,46 @@
                     <div class="row">
                         <div class="col">
                           <p class="fw-bold mb-0">{{ "{:,.0f}".format((searched_node.ascendantsCount or 0) | int).replace(',', ' ') }}</p>
-                            <p class="small text-muted">ascendant(s)
+                            <p class="small text-muted">{{ t('search.ascendants') }}
                             
                               <i class="bi bi-info-circle-fill ms-2" 
                                          data-bs-toggle="tooltip" 
                                data-bs-placement="right" 
-                               title="Nombre de modèles qui précèdent le modèle recherché dans la généalogie">
+                               title="{{ t('search.ascendants_tooltip') }}">
                             </i>
                             </p>
                       
                           </div>
                         <div class="col">
                             <p class="fw-bold mb-0">{{ "{:,.0f}".format((searched_node.descendantsCount or 0) | int).replace(',', ' ') }}</p>
-                            <p class="small text-muted">descendant(s)
+                            <p class="small text-muted">{{ t('search.descendants') }}
                               <i class="bi bi-info-circle-fill ms-2" 
                                          data-bs-toggle="tooltip" 
                                data-bs-placement="right" 
-                               title="Nombre de modèles directement ou indirectement constitués à partir du modèle recherché">
+                               title="{{ t('search.descendants_tooltip') }}">
                             </i>
                             </p>
                         </div>
                     </div>
                     <div class="row mt-2">
-                        <div class="col"><p class="fw-bold mb-0">{{ "{:,.0f}".format((searched_node.downloads or 0) | int).replace(',', ' ') }}</p><p class="small text-muted">téléchargement(s)</p></div>
+                        <div class="col"><p class="fw-bold mb-0">{{ "{:,.0f}".format((searched_node.downloads or 0) | int).replace(',', ' ') }}</p><p class="small text-muted">{{ t('search.downloads') }}</p></div>
                         <div class="col"><p class="fw-bold mb-0">{{ "{:,.0f}".format((searched_node.citationCount or 0) | int).replace(',', ' ') }}</p>
-                          <p class="small text-muted">citation(s)
+                          <p class="small text-muted">{{ t('search.citations') }}
                           <i class="bi bi-info-circle-fill ms-2" 
                                      data-bs-toggle="tooltip" 
                            data-bs-placement="right" 
-                           title="Nombre de descendants directs du modèle recherché : les enfants du modèle recherché">
+                           title="{{ t('search.citations_tooltip') }}">
                         </i>
                         </p></div>
-                        <div class="col"><p class="fw-bold mb-0">{{ "{:,.0f}".format((searched_node.likes or 0) | int).replace(',', ' ') }}</p><p class="small text-muted">J'aime</p></div>
+                        <div class="col"><p class="fw-bold mb-0">{{ "{:,.0f}".format((searched_node.likes or 0) | int).replace(',', ' ') }}</p><p class="small text-muted">{{ t('search.likes') }}</p></div>
                     </div>
                     <div class="mt-2"> 
-                        {% if searched_node.createdAt %}<span class="badge bg-light text-dark">Publié le: {{ searched_node.createdAt }}</span>{% endif %}
-                        {% if searched_node.task %}<span class="badge bg-light text-dark">Tâche: {{ searched_node.task }}</span>{% endif %}
+                        {% if searched_node.createdAt %}<span class="badge bg-light text-dark">{{ t('search.published') }} {{ searched_node.createdAt }}</span>{% endif %}
+                        {% if searched_node.task %}<span class="badge bg-light text-dark">{{ t('search.task') }} {{ searched_node.task }}</span>{% endif %}
                     </div>
                     <hr>
                   </a>
-                    <button id="show-graph-btn" class="btn btn-secondary"><i class="bi bi-diagram-3 me-1"></i>Voir l'arbre généalogique</button>
+                    <button id="show-graph-btn" class="btn btn-secondary"><i class="bi bi-diagram-3 me-1"></i>{{ t('search.btn_graph') }}</button>
                 </div>
             </div>
         </div>
@@ -256,12 +260,12 @@
         <!-- COLONNE DESCENDANCE (DROITE) -->
         <div class="col-12 col-lg-3">
           <div class="d-flex justify-content-center  gap-2 mb-3">
-            <h4 class="h5 text-center mb-3">Modèles importants de la descendance
+            <h4 class="h5 text-center mb-3">{{ t('search.desc_section') }}
             <!-- L'icône avec les attributs pour le tooltip -->
             <i class="bi bi-info-circle-fill text-secondary align-middle ms-2" 
             data-bs-toggle="tooltip" 
             data-bs-placement="right" 
-               title="Les modèles directement ou indirectement constitués à partir du modèle recherché">
+               title="{{ t('search.desc_tooltip') }}">
             </i>
           </h4>
           </div>
@@ -293,26 +297,26 @@
                                  data-bs-toggle="tooltip"
                                  data-bs-placement="top"
                                  data-bs-html="true"
-                                 title="<b>Informations :</b><br>
-                                        Auteur : {{ (model.name.split('/') | first) if '/' in model.name else 'Inconnu' }}<br>
-                                        Téléchargements : {{ '{:,.0f}'.format((model.downloads or 0) | int).replace(',', ' ') }}<br>
-                                        J'aime : {{ model.likes or 'Inconnu' }}<br>
-                                        Date publication : {{ model.createdAt or 'N/A' }}<br>
-                                        Tâche : {{ model.task or 'Inconnue' }}<br>
-                                        License : {{ model.license or 'Inconnue' }}">
+                                 title="<b>{{ t('search.info_label') }}</b><br>
+                                        {{ t('search.info_author') }} : {{ (model.name.split('/') | first) if '/' in model.name else t('search.info_unknown') }}<br>
+                                        {{ t('search.info_downloads') }} : {{ '{:,.0f}'.format((model.downloads or 0) | int).replace(',', ' ') }}<br>
+                                        {{ t('search.info_likes') }} : {{ model.likes or t('search.info_unknown') }}<br>
+                                        {{ t('search.info_date') }} : {{ model.createdAt or 'N/A' }}<br>
+                                        {{ t('search.info_task') }} : {{ model.task or t('search.info_unknown_task') }}<br>
+                                        {{ t('search.info_license') }} : {{ model.license or t('search.info_unknown_task') }}">
                                 {{ model.name }}
                               </a>
                             </h6>
                             <p class="card-text" style="font-size: 0.75em; line-height: 1.2;">
-                              {{ "{:,.0f}".format((model.downloads or 0) | int).replace(',', ' ') }} téléchargements<br>
-                              {{ "{:,.0f}".format((model.citation_count or 0) | int).replace(',', ' ') }} citations
+                              {{ "{:,.0f}".format((model.downloads or 0) | int).replace(',', ' ') }} {{ t('search.downloads') }}<br>
+                              {{ "{:,.0f}".format((model.citation_count or 0) | int).replace(',', ' ') }} {{ t('search.citations') }}
                             </p>    
                         </div>
                     </div>
                   </div>
                 {% endfor %} 
               {% else %}
-                <p class="text-muted small m-2">Aucun modèle dérivé trouvé.</p>
+                <p class="text-muted small m-2">{{ t('search.no_derived') }}</p>
               {% endif %}
             </div>
           </div>
@@ -325,23 +329,23 @@
       <hr class="mb-5">
       <div class="col-12">
           <div class="mb-5">
-              <h4 class="h4">Descendance détaillée</h4>
+              <h4 class="h4">{{ t('search.desc_detail_title') }}</h4>
               <div class="table-responsive">
                   <table id="descendance-table" class="table table-bordered table-striped table-hover">
                     <thead>
                       <tr>
-                          <th scope="col">Modèle</th>
-                          <th scope="col">Auteur</th>
-                          <th scope="col">Téléchargements</th>
-                          <th scope="col">Tâche</th>
-                          <th scope="col">J'aime</th>
-                          <th scope="col">Date de publication</th>
-                          <th scope="col">Dataset utilisé</th>
-                          <th scope="col">Licence</th>
-                          <th scope="col">Distance au modèle recherché</th>
-                          <th scope="col">Ascendants</th>
-                          <th scope="col">Descendants</th>
-                          <th scope="col">Citations</th>
+                          <th scope="col">{{ t('search.table_model') }}</th>
+                          <th scope="col">{{ t('search.table_author') }}</th>
+                          <th scope="col">{{ t('search.table_downloads') }}</th>
+                          <th scope="col">{{ t('search.table_task') }}</th>
+                          <th scope="col">{{ t('search.table_likes') }}</th>
+                          <th scope="col">{{ t('search.table_date') }}</th>
+                          <th scope="col">{{ t('search.table_dataset') }}</th>
+                          <th scope="col">{{ t('search.table_license') }}</th>
+                          <th scope="col">{{ t('search.table_distance') }}</th>
+                          <th scope="col">{{ t('search.table_ascendants') }}</th>
+                          <th scope="col">{{ t('search.table_descendants') }}</th>
+                          <th scope="col">{{ t('search.table_citations') }}</th>
                       </tr>
                   </thead>
                   </table>
@@ -349,23 +353,23 @@
           </div>
           <hr class="my-5">
           <div>
-              <h4 class="h4">Ascendance détaillée</h4>
+              <h4 class="h4">{{ t('search.asc_detail_title') }}</h4>
               <div class="table-responsive">
                   <table id="ascendance-table" class="table table-bordered table-striped table-hover">
                     <thead>
                       <tr>
-                          <th scope="col">Modèle</th>
-                          <th scope="col">Auteur</th>
-                          <th scope="col">Téléchargements</th>
-                          <th scope="col">Tâche</th>
-                          <th scope="col">J'aime</th>
-                          <th scope="col">Date de publication</th>
-                          <th scope="col">Dataset utilisé</th>
-                          <th scope="col">Licence</th>
-                          <th scope="col">Distance au modèle recherché</th>
-                          <th scope="col">Ascendants</th>
-                          <th scope="col">Descendants</th>
-                          <th scope="col">Citations</th>
+                          <th scope="col">{{ t('search.table_model') }}</th>
+                          <th scope="col">{{ t('search.table_author') }}</th>
+                          <th scope="col">{{ t('search.table_downloads') }}</th>
+                          <th scope="col">{{ t('search.table_task') }}</th>
+                          <th scope="col">{{ t('search.table_likes') }}</th>
+                          <th scope="col">{{ t('search.table_date') }}</th>
+                          <th scope="col">{{ t('search.table_dataset') }}</th>
+                          <th scope="col">{{ t('search.table_license') }}</th>
+                          <th scope="col">{{ t('search.table_distance') }}</th>
+                          <th scope="col">{{ t('search.table_ascendants') }}</th>
+                          <th scope="col">{{ t('search.table_descendants') }}</th>
+                          <th scope="col">{{ t('search.table_citations') }}</th>
                       </tr>
                   </thead>
                   </table>
@@ -378,30 +382,30 @@
       <div class="row g-4">
           <div class="col-12 col-lg-8">
               <div class="card">
-                  <div class="card-header"><h5 class="card-title mb-0">Visualisation de l'arbre généalogique</h5></div>
+                  <div class="card-header"><h5 class="card-title mb-0">{{ t('search.graph_visualization') }}</h5></div>
                   <div class="card-body">
                       <div id="sigma-container" data-graph='{{ graph_data | tojson | safe }}'></div>
                   </div>
               </div>
               <div id="node-info-card" class="card mt-3 card-interactive" style="display: none;">                  <div class="card-body">
-                      <h5 class="card-title">Informations du nœud sélectionné</h5>
+                      <h5 class="card-title">{{ t('search.node_info_title') }}</h5>
                       <div id="node-details" class="mt-2"></div>
                   </div>
               </div>
           </div>
           <div class="col-12 col-lg-4">
               <div class="card mb-3">
-                  <div class="card-header"><h5 class="card-title mb-0">Légende - Nœuds</h5></div>
+                  <div class="card-header"><h5 class="card-title mb-0">{{ t('search.legend_nodes') }}</h5></div>
                   <div class="card-body">
                       <ul id="legend-nodes" class="list-group list-group-flush">
-                          <li class="list-group-item d-flex align-items-center"><span class="legend-color me-2" style="background-color: #007bff;"></span>Personne (taille = nombre d'abonnés)</li>
-                          <li class="list-group-item d-flex align-items-center"><span class="legend-color me-2" style="background-color: #092d53;"></span>Organisation (taille = nombre d'abonnés)</li>
-                          <li class="list-group-item d-flex align-items-center"><span class="legend-color me-2" style="background-color:#7D7D7D;"></span>Modèle (taille = nombre de téléchargements)</li>
+                          <li class="list-group-item d-flex align-items-center"><span class="legend-color me-2" style="background-color: #007bff;"></span>{{ t('search.legend_person') }}</li>
+                          <li class="list-group-item d-flex align-items-center"><span class="legend-color me-2" style="background-color: #092d53;"></span>{{ t('search.legend_org') }}</li>
+                          <li class="list-group-item d-flex align-items-center"><span class="legend-color me-2" style="background-color:#7D7D7D;"></span>{{ t('search.legend_model') }}</li>
                       </ul>
                   </div>
               </div>
               <div class="card">
-                  <div class="card-header"><h5 class="card-title mb-0">Légende - Relations</h5></div>
+                  <div class="card-header"><h5 class="card-title mb-0">{{ t('search.legend_edges') }}</h5></div>
                   <div class="card-body">
                       <ul id="legend-edges" class="list-group list-group-flush"></ul>
                   </div>
@@ -415,7 +419,7 @@
   <!-- Pied de page et scripts (inchangés) -->
   <footer class="bg-dark text-white text-center p-4 mt-auto">
     <div class="container">
-      <p class="mb-0">Application de recherche et visualisation des relations entre modèles et jeux de données publiés sur la plateforme HuggingFace. © 2025</p>
+      <p class="mb-0">{{ t('site.footer') }}</p>
     </div>
   </footer>
 
@@ -426,6 +430,10 @@
   <script src="https://unpkg.com/graphology@0.25.1/dist/graphology.umd.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/graphology-library/dist/graphology-library.min.js"></script>
   <script src="{{ url_for('static', filename='js/utils.js') }}"></script>
+  <script>
+    window.__I18N_DATA = {{ js_i18n_data | tojson }};
+    window.__I18N_LANG = "{{ current_lang }}";
+  </script>
   <script src="{{ url_for('static', filename='js/script.js') }}"></script>
   <script>
     document.addEventListener('DOMContentLoaded', function () {
@@ -434,4 +442,4 @@
     });
   </script>
 </body>
-</html>
+</html>

application_neo4j/templates/search_dataset.html

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="fr">
+<html lang="{{ current_lang }}">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Généalogie des Modèles</title>
+  <title>{{ t('site.title_search') }}</title>
   
   <!-- CSS de Bootstrap (remplace DSFR) -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
@@ -36,9 +36,13 @@
     <header class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
     <div class="container">
       <a class="navbar-brand" href="/">
-        <span class="fw-bold">Généalogie des Modèles</span>
-        <small class="d-block text-muted">Exploration des relations entre modèles et datasets</small>
+        <span class="fw-bold">{{ t('site.nav_brand') }}</span>
+        <small class="d-block text-muted">{{ t('site.nav_subtitle') }}</small>
       </a>
+      <div class="d-flex gap-2">
+        <a href="{{ url_for('set_language_route', lang='fr') }}" class="btn btn-sm {{ 'btn-primary' if current_lang == 'fr' else 'btn-outline-primary' }}">{{ t('lang.fr') }}</a>
+        <a href="{{ url_for('set_language_route', lang='en') }}" class="btn btn-sm {{ 'btn-primary' if current_lang == 'en' else 'btn-outline-primary' }}">{{ t('lang.en') }}</a>
+      </div>
     </div>
   </header>
 
@@ -46,8 +50,8 @@
     <!-- Titre principal et Formulaire (inchangés) -->
     <div class="row">
       <div class="col-12">
-        <h1 class="display-5">Recherche dans la base de données HuggingFace</h1>
-        <p class="lead">Explorez la généalogie des modèles et datasets</p>
+        <h1 class="display-5">{{ t('search.page_title') }}</h1>
+        <p class="lead">{{ t('search.page_lead_dataset') }}</p>
       </div>
     </div>
     
@@ -59,10 +63,10 @@
           <div class="row g-3 align-items-end">
             <!-- Champ de recherche -->
             <div class="col-12 col-md-5">
-              <label for="search-input" class="form-label fw-bold">Nom à rechercher</label>
+              <label for="search-input" class="form-label fw-bold">{{ t('search.label_name') }}</label>
               <div class="position-relative">
                 <input type="text" name="name" id="search-input" class="form-control"
-                       placeholder="Taper le nom du dataset suspecté."
+                       placeholder="{{ t('search.placeholder_dataset') }}"
                        value="{{ request.form.name or '' }}" required autocomplete="off" />
                 <ul id="suggestions-list" class="list-group position-absolute w-100" style="display: none; z-index: 1000;"></ul>
               </div>
@@ -70,31 +74,31 @@
     
             <!-- Filtres -->
             <div class="col-12 col-md-3">
-              <label class="form-label fw-bold">Filtres</label>
+              <label class="form-label fw-bold">{{ t('search.label_filters') }}</label>
               <div class="d-flex gap-3">
                 <div class="form-check">
                   <input class="form-check-input" type="checkbox" name="filters" value="Model" id="filter-model"
                          {% if 'Model' in search.filters %}checked{% endif %}>
-                  <label class="form-check-label" for="filter-model">Modèle</label>
+                  <label class="form-check-label" for="filter-model">{{ t('search.filter_model') }}</label>
                 </div>
                 <div class="form-check">
                   <input class="form-check-input" type="checkbox" name="filters" value="Dataset" id="filter-dataset"
                          {% if 'Dataset' in search.filters %}checked{% endif %}>
-                  <label class="form-check-label" for="filter-dataset">Dataset</label>
+                  <label class="form-check-label" for="filter-dataset">{{ t('search.filter_dataset') }}</label>
                 </div>
               </div>
             </div>
     
             <!-- Profondeur de recherche -->
             <div class="col-12 col-md-4">
-              <label class="form-label fw-bold">Profondeur de recherche</label>
+              <label class="form-label fw-bold">{{ t('search.label_depth') }}</label>
               <div class="d-flex align-items-center gap-3">
                 <div class="form-check form-switch">
                   <input class="form-check-input" type="checkbox" id="depth-unlimited" name="depth_unlimited" checked>
-                  <label class="form-check-label" for="depth-unlimited">Illimitée</label>
+                  <label class="form-check-label" for="depth-unlimited">{{ t('search.depth_unlimited') }}</label>
                 </div>
                 <div class="input-group input-group-sm">
-                  <span class="input-group-text">Limité à:</span>
+                  <span class="input-group-text">{{ t('search.depth_limited') }}</span>
                   <input class="form-control" type="number" name="depth" id="depth"
                          value="{{ request.form.depth }}" min="1" max="5" disabled>
                 </div>
@@ -102,7 +106,7 @@
             </div>
           </div>
     
-  
+    
     {% if message %}
     <div class="alert alert-info mt-3"><p class="mb-0">{{ message }}</p></div>
     {% endif %}
@@ -110,7 +114,7 @@
       {% set searched_node = (graph_data.nodes | selectattr('id', 'equalto', search.name) | list | first) or {} %}
       <div class="row justify-content-center align-items-stretch g-4">        
         <div class="col-12 col-lg-4 " id="center-column">
-            <h4 class="h5 text-center mb-3">DATASET RECHERCHÉ</h4>
+            <h4 class="h5 text-center mb-3">{{ t('dataset.searched_title') }}</h4>
             <a href="https://huggingface.co/datasets/{{ searched_node.id }}" target="_blank" rel="noopener noreferrer" class="text-white">
             <div class="card card-recherche text-center border-primary border-2 ">
                 <div class="card-header bg-primary text-white">
@@ -122,20 +126,20 @@
                     <div class="row">
                         <div class="col">
                             <p class="fw-bold mb-0">{{ "{:,.0f}".format((graph_data.models_count[0] or 0) | int).replace(',', ' ') }}</p>
-                            <p class="small text-muted">modèle(s) utilisent ce dataset
+                            <p class="small text-muted">{{ t('dataset.models_using') }}
                               <i class="bi bi-info-circle-fill ms-2"></i>
                             </p>
                           </div>
                     </div>
                     <div class="row mt-2">
-                        <div class="col"><p class="fw-bold mb-0">{{ "{:,.0f}".format((searched_node.downloads or 0) | int).replace(',', ' ') }}</p><p class="small text-muted">téléchargement(s)</p></div>
+                        <div class="col"><p class="fw-bold mb-0">{{ "{:,.0f}".format((searched_node.downloads or 0) | int).replace(',', ' ') }}</p><p class="small text-muted">{{ t('search.downloads') }}</p></div>
                     </div>
                     <div class="mt-2"> 
-                        {% if searched_node.createdAt_dataset %}<span class="badge bg-light text-dark">Publié le: {{ searched_node.createdAt_dataset }}</span>{% endif %}
+                        {% if searched_node.createdAt_dataset %}<span class="badge bg-light text-dark">{{ t('search.published') }} {{ searched_node.createdAt_dataset }}</span>{% endif %}
                     </div>
                     <hr>
                   </a>
-                    <button id="show-graph-btn" class="btn btn-secondary"><i class="bi bi-diagram-3 me-1"></i>Voir l'arbre généalogique</button>
+                    <button id="show-graph-btn" class="btn btn-secondary"><i class="bi bi-diagram-3 me-1"></i>{{ t('search.btn_graph') }}</button>
                 </div>
             </div>
         </div>
@@ -147,22 +151,22 @@
       <hr class="mb-5">
       <div class="col-12">
           <div class="mb-5">
-              <h4 class="h4">Les modèles entraînés sur ce dataset</h4>
+              <h4 class="h4">{{ t('dataset.trained_title') }}</h4>
               <div class="table-responsive">
                   <table id="train-table" class="table table-bordered table-striped table-hover">
                     <thead>
                       <tr>
-                          <th scope="col">Modèle</th>
-                          <th scope="col">Auteur</th>
-                          <th scope="col">Téléchargements</th>
-                          <th scope="col">Tâche</th>
-                          <th scope="col">J'aime</th>
-                          <th scope="col">Date de publication</th>
-                          <th scope="col">Dataset utilisé</th>
-                          <th scope="col">Licence</th>
-                          <th scope="col">Ascendants</th>
-                          <th scope="col">Descendants</th>
-                          <th scope="col">Citations</th>
+                          <th scope="col">{{ t('search.table_model') }}</th>
+                          <th scope="col">{{ t('search.table_author') }}</th>
+                          <th scope="col">{{ t('search.table_downloads') }}</th>
+                          <th scope="col">{{ t('search.table_task') }}</th>
+                          <th scope="col">{{ t('search.table_likes') }}</th>
+                          <th scope="col">{{ t('search.table_date') }}</th>
+                          <th scope="col">{{ t('search.table_dataset') }}</th>
+                          <th scope="col">{{ t('search.table_license') }}</th>
+                          <th scope="col">{{ t('search.table_ascendants') }}</th>
+                          <th scope="col">{{ t('search.table_descendants') }}</th>
+                          <th scope="col">{{ t('search.table_citations') }}</th>
                       </tr>
                   </thead>
                   <tbody>
@@ -177,31 +181,31 @@
       <div class="row g-4">
           <div class="col-12 col-lg-8">
               <div class="card">
-                  <div class="card-header"><h5 class="card-title mb-0">Visualisation de l'arbre généalogique</h5></div>
+                  <div class="card-header"><h5 class="card-title mb-0">{{ t('search.graph_visualization') }}</h5></div>
                   <div class="card-body">
                       <div id="sigma-container" data-graph='{{ graph_data | tojson | safe }}'></div>
                   </div>
               </div>
               <div id="node-info-card" class="card mt-3 card-interactive" style="display: none;">                  <div class="card-body">
-                      <h5 class="card-title">Informations du nœud sélectionné</h5>
+                      <h5 class="card-title">{{ t('search.node_info_title') }}</h5>
                       <div id="node-details" class="mt-2"></div>
                   </div>
               </div>
           </div>
           <div class="col-12 col-lg-4">
               <div class="card mb-3">
-                  <div class="card-header"><h5 class="card-title mb-0">Légende - Nœuds</h5></div>
+                  <div class="card-header"><h5 class="card-title mb-0">{{ t('search.legend_nodes') }}</h5></div>
                   <div class="card-body">
                       <ul id="legend-nodes" class="list-group list-group-flush">
-                        <li class="list-group-item d-flex align-items-center"><span class="legend-color me-2" style="background-color: #ffc107;"></span>Dataset (taille = nombre de téléchargements)</li>
-                        <li class="list-group-item d-flex align-items-center"><span class="legend-color me-2" style="background-color: #007bff;"></span>Personne (taille = nombre d'abonnés)</li>
-                        <li class="list-group-item d-flex align-items-center"><span class="legend-color me-2" style="background-color: #092d53;"></span>Organisation (taille = nombre d'abonnés)</li>
-                        <li class="list-group-item d-flex align-items-center"><span class="legend-color me-2" style="background-color:#7D7D7D;"></span>Modèle (taille = nombre de téléchargements)</li>
+                        <li class="list-group-item d-flex align-items-center"><span class="legend-color me-2" style="background-color: #ffc107;"></span>{{ t('search.legend_dataset') }}</li>
+                        <li class="list-group-item d-flex align-items-center"><span class="legend-color me-2" style="background-color: #007bff;"></span>{{ t('search.legend_person') }}</li>
+                        <li class="list-group-item d-flex align-items-center"><span class="legend-color me-2" style="background-color: #092d53;"></span>{{ t('search.legend_org') }}</li>
+                        <li class="list-group-item d-flex align-items-center"><span class="legend-color me-2" style="background-color:#7D7D7D;"></span>{{ t('search.legend_model') }}</li>
                       </ul>
                   </div>
               </div>
               <div class="card">
-                  <div class="card-header"><h5 class="card-title mb-0">Légende - Relations</h5></div>
+                  <div class="card-header"><h5 class="card-title mb-0">{{ t('search.legend_edges') }}</h5></div>
                   <div class="card-body">
                       <ul id="legend-edges" class="list-group list-group-flush"></ul>
                   </div>
@@ -214,7 +218,7 @@
   <!-- Pied de page et scripts (inchangés) -->
   <footer class="bg-dark text-white text-center p-4 mt-auto">
     <div class="container">
-      <p class="mb-0">Application de recherche et visualisation des relations entre modèles et jeux de données publiés sur la plateforme HuggingFace. © 2025</p>
+      <p class="mb-0">{{ t('site.footer') }}</p>
     </div>
   </footer>
 
@@ -225,6 +229,10 @@
   <script src="https://unpkg.com/graphology@0.25.1/dist/graphology.umd.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/graphology-library/dist/graphology-library.min.js"></script>
   <script src="{{ url_for('static', filename='js/utils.js') }}"></script>
+  <script>
+    window.__I18N_DATA = {{ js_i18n_data | tojson }};
+    window.__I18N_LANG = "{{ current_lang }}";
+  </script>
   <script src="{{ url_for('static', filename='js/script_dataset.js') }}"></script>
   <script>
     document.addEventListener('DOMContentLoaded', function () {
@@ -233,4 +241,4 @@
     });
   </script>
 </body>
-</html>
+</html>