Upload app.py

app.py

@@ -1,4 +1,5 @@
 import os
+import re
 import gradio as gr
 import pandas as pd
 import numpy as np
@@ -6,7 +7,6 @@ import requests
 import markdown as md_lib
 from datasets import load_dataset
 
-# --- Données ---
 ds = load_dataset("opt-nc/avps", split="train")
 df = ds.to_pandas()
 
@@ -25,11 +25,8 @@ def encode_query(text: str):
     if HF_TOKEN:
         headers["Authorization"] = f"Bearer {HF_TOKEN}"
     try:
-        r = requests.post(
-            EMBED_API, headers=headers,
-            json={"inputs": text, "options": {"wait_for_model": True}},
-            timeout=30,
-        )
+        r = requests.post(EMBED_API, headers=headers,
+            json={"inputs": text, "options": {"wait_for_model": True}}, timeout=8)
         if r.status_code in (429, 503):
             return None
         r.raise_for_status()
@@ -54,41 +51,43 @@ def fmt_date(d):
 
 
 def score_widget(score):
-    """Badge visuel score style 'immédiat'."""
     pct = int(round(score * 100))
     if pct >= 70:
-        bg, color, label = "#d1fae5", "#065f46", f"✦ {pct}% match"
+        bg, color, label = "#d1fae5", "#065f46", f"✦ {pct}%"
+        tip = f"{pct}% — très bonne correspondance"
     elif pct >= 50:
-        bg, color, label = "#fef3c7", "#92400e", f"◈ {pct}% match"
+        bg, color, label = "#fef3c7", "#92400e", f"◈ {pct}%"
+        tip = f"{pct}% — correspondance correcte"
     else:
-        bg, color, label = "#f3f4f6", "#6b7280", f"○ {pct}% match"
+        bg, color, label = "#f3f4f6", "#6b7280", f"○ {pct}%"
+        tip = f"{pct}% — correspondance partielle"
+    tooltip = (
+        f"{tip}. Score de similarité sémantique entre votre profil "
+        "et le texte de l'annonce (missions, compétences), "
+        "calculé par le modèle BAAI/bge-m3. 100% = correspondance parfaite."
+    )
     return (
-        f'<span style="background:{bg};color:{color};font-size:11px;font-weight:600;'
-        f'padding:3px 9px;border-radius:12px;white-space:nowrap">{label}</span>'
+        f'<span title="{tooltip}" '
+        f'style="background:{bg};color:{color};font-size:11px;font-weight:600;'
+        f'padding:3px 9px;border-radius:12px;white-space:nowrap;cursor:help;'
+        f'border-bottom:1px dotted {color}">{label} match</span>'
     )
 
 
-def highlight_matches(text, qwords):
-    """Extrait un snippet du texte autour des mots matchés."""
-    if not qwords or not text:
-        return ""
-    tl = text.lower()
-    best_pos = -1
-    for w in qwords:
-        pos = tl.find(w)
-        if pos != -1:
-            best_pos = pos
-            break
-    if best_pos == -1:
+def md_to_html_highlighted(text_md, qwords):
+    """Convertit le markdown en HTML et surligne les mots-clés avec contraste correct."""
+    if not text_md:
         return ""
-    start = max(0, best_pos - 40)
-    end = min(len(text), best_pos + 120)
-    snippet = ("…" if start > 0 else "") + text[start:end].strip() + "…"
-    # Surligner les mots
-    for w in qwords:
-        import re
-        snippet = re.sub(f"({re.escape(w)})", r'<mark style="background:#fef08a;border-radius:3px;padding:0 2px">\1</mark>', snippet, flags=re.IGNORECASE)
-    return snippet
+    html = md_lib.markdown(text_md, extensions=["nl2br", "sane_lists"])
+    if qwords:
+        for w in qwords:
+            # Surlignage sombre (fond foncé + texte blanc) pour lisibilité
+            html = re.sub(
+                f"(?<![<\w])({re.escape(w)})(?![>\w])",
+                r'<mark>\1</mark>',
+                html, flags=re.IGNORECASE
+            )
+    return html
 
 
 def render_cards(results_df, scores=None, qwords=None):
@@ -107,6 +106,7 @@ def render_cards(results_df, scores=None, qwords=None):
         immed     = row.get("disponible_immediatement", False)
         cloture   = fmt_date(row.get("date_cloture"))
         url       = row.get("url") or ""
+        texte_md  = row.get("text") or ""
         score     = scores[i] if scores is not None else None
 
         dir_str = direction + (f" › {service}" if service else "")
@@ -116,20 +116,24 @@ def render_cards(results_df, scores=None, qwords=None):
         if score is not None:
             badges += score_widget(score) + " "
         if immed:
-            badges += '<span style="background:#d1fae5;color:#065f46;font-size:11px;font-weight:600;padding:3px 9px;border-radius:12px">⚡ Immédiat</span>'
+            badges += ('<span style="background:#d1fae5;color:#065f46;font-size:11px;'
+                      'font-weight:600;padding:3px 9px;border-radius:12px">⚡ Immédiat</span>')
 
         cloture_html = f'<span style="font-size:11px;color:#6b7280">🗓 {cloture}</span>' if cloture else ""
-        ref_html = f'<span style="font-size:11px;color:#c4b5fd">#{numero}</span>'
-
-        # Snippet surligné pour expliquer le match
-        snippet_html = ""
-        if qwords:
-            snippet = highlight_matches(str(row.get("text") or ""), qwords)
-            if snippet:
-                snippet_html = f'<p style="font-size:12px;color:#6b7280;margin:6px 0 0;line-height:1.5;font-style:italic">{snippet}</p>'
+        ref_html = f'<span style="font-size:11px;color:#a78bfa">#{numero}</span>'
+
+        # Aperçu HTML du markdown avec surlignage
+        preview_html = md_to_html_highlighted(texte_md, qwords)
+        preview_block = f"""
+<div class="md-preview" style="font-size:12px;color:#374151;line-height:1.6;
+     margin-top:10px;max-height:160px;overflow:hidden;position:relative;">
+  {preview_html}
+  <div style="position:absolute;bottom:0;left:0;right:0;height:40px;
+              background:linear-gradient(transparent,#fff)"></div>
+</div>"""
 
         annonce_btn = (
-            f'<a href="{url}" target="_blank" '
+            f'<a href="{url}" target="_blank" onclick="event.stopPropagation()" '
             f'style="padding:6px 14px;background:#2563eb;color:#fff;border-radius:8px;'
             f'text-decoration:none;font-size:13px;font-weight:500">Voir →</a>'
             if url else ""
@@ -138,9 +142,9 @@ def render_cards(results_df, scores=None, qwords=None):
         cards.append(f"""
 <div id="card-{job_id}"
      style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;
-            padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:border-color 0.15s"
+            padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:border-color 0.15s,background 0.15s"
      onmouseenter="this.style.borderColor='#93c5fd'"
-     onmouseleave="this.style.borderColor='#e5e7eb'"
+     onmouseleave="if(!this.classList.contains('selected'))this.style.borderColor='#e5e7eb'"
      onclick="selectJob('{job_id}', this)">
   <div style="display:flex;justify-content:space-between;align-items:flex-start;
               flex-wrap:wrap;gap:6px;margin-bottom:4px">
@@ -148,10 +152,10 @@ def render_cards(results_df, scores=None, qwords=None):
     <div style="display:flex;gap:4px;align-items:center;flex-shrink:0;flex-wrap:wrap">{badges}</div>
   </div>
   <p style="font-size:12px;color:#6b7280;margin:0 0 4px">{meta}</p>
-  <div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:6px">
+  <div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:4px">
     {cloture_html}{ref_html}
   </div>
-  {snippet_html}
+  {preview_block}
   <div style="margin-top:10px">{annonce_btn}</div>
 </div>""")
 
@@ -165,17 +169,17 @@ def render_detail(job_id: str):
     if not row:
         return ""
 
-    titre     = row.get("titre") or "Poste sans titre"
-    direction = row.get("direction_interne") or ""
-    service   = row.get("service") or ""
-    grade     = row.get("corps_grade") or ""
-    lieu      = row.get("lieu_travail") or ""
-    immed     = row.get("disponible_immediatement", False)
-    cloture   = fmt_date(row.get("date_cloture"))
-    url       = row.get("url") or ""
-    url_pdf   = row.get("url_pdf") or ""
-    texte_md  = row.get("text") or ""
-    numero    = row.get("numero") or job_id
+    titre    = row.get("titre") or "Poste sans titre"
+    direction= row.get("direction_interne") or ""
+    service  = row.get("service") or ""
+    grade    = row.get("corps_grade") or ""
+    lieu     = row.get("lieu_travail") or ""
+    immed    = row.get("disponible_immediatement", False)
+    cloture  = fmt_date(row.get("date_cloture"))
+    url      = row.get("url") or ""
+    url_pdf  = row.get("url_pdf") or ""
+    texte_md = row.get("text") or ""
+    numero   = row.get("numero") or job_id
 
     body_html = md_lib.markdown(texte_md, extensions=["nl2br", "sane_lists"])
     dir_str = direction + (f" › {service}" if service else "")
@@ -200,21 +204,20 @@ def render_detail(job_id: str):
 
     share_url = f"https://opt-nc.github.io/avps/{numero}/"
     share_text = f"AVP OPT-NC — {titre} ({numero})"
-    share_encoded = requests.utils.quote(share_text)
-    share_url_encoded = requests.utils.quote(share_url)
+    se = requests.utils.quote(share_text)
+    ue = requests.utils.quote(share_url)
 
     share_html = f"""
-<div style="margin-top:16px;padding:12px;background:#f8fafc;border-radius:10px;
-            border:1px solid #e2e8f0">
-  <p style="font-size:12px;color:#6b7280;margin:0 0 8px;font-weight:500">📤 Partager cette annonce</p>
-  <div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center">
+<div style="margin-top:16px;padding:12px;background:#f8fafc;border-radius:10px;border:1px solid #e2e8f0">
+  <p style="font-size:12px;color:#6b7280;margin:0 0 8px;font-weight:500">📤 Partager</p>
+  <div style="display:flex;gap:8px;flex-wrap:wrap">
     <button onclick="navigator.clipboard.writeText('{share_url}').then(()=>alert('Lien copié !'))"
             style="padding:5px 12px;background:#f1f5f9;color:#374151;border:1px solid #e2e8f0;
                    border-radius:8px;font-size:12px;cursor:pointer">📋 Copier le lien</button>
-    <a href="mailto:?subject={share_encoded}&body=Bonjour%2C%0A%0AJe%20vous%20partage%20cette%20offre%20OPT-NC%20%3A%0A{share_url_encoded}"
+    <a href="mailto:?subject={se}&body=Bonjour%2C%0A%0AVoici%20une%20AVP%20OPT-NC%20%3A%0A{ue}"
        style="padding:5px 12px;background:#f1f5f9;color:#374151;border:1px solid #e2e8f0;
               border-radius:8px;font-size:12px;text-decoration:none">✉️ Email</a>
-    <a href="https://wa.me/?text={share_encoded}%20{share_url_encoded}" target="_blank"
+    <a href="https://wa.me/?text={se}%20{ue}" target="_blank"
        style="padding:5px 12px;background:#f1f5f9;color:#374151;border:1px solid #e2e8f0;
               border-radius:8px;font-size:12px;text-decoration:none">💬 WhatsApp</a>
   </div>
@@ -231,16 +234,36 @@ def render_detail(job_id: str):
   <div style="margin-bottom:16px">{btns}</div>
   {share_html}
   <hr style="border:none;border-top:1px solid #e5e7eb;margin:16px 0">
-  <div style="font-size:14px;color:#374151;line-height:1.7">{body_html}</div>
+  <div class="md-body" style="font-size:14px;color:#374151;line-height:1.7">{body_html}</div>
 </div>"""
 
 
+BANNER_SEMANTIC = """
+<div style="display:flex;align-items:center;gap:8px;padding:8px 14px;margin-bottom:10px;
+            background:#eff6ff;border:1px solid #bfdbfe;border-radius:10px;font-size:13px;color:#1e40af">
+  <span style="font-size:16px">🧠</span>
+  <span><strong>Recherche sémantique active</strong> — les résultats sont classés par similarité avec votre profil
+  (modèle <a href="https://huggingface.co/BAAI/bge-m3" target="_blank"
+  style="color:#1e40af;text-decoration:underline">BAAI/bge-m3</a>)</span>
+</div>"""
+
+BANNER_KEYWORDS = """
+<div style="display:flex;align-items:center;gap:8px;padding:8px 14px;margin-bottom:10px;
+            background:#fefce8;border:1px solid #fde68a;border-radius:10px;font-size:13px;color:#854d0e">
+  <span style="font-size:16px">⚠️</span>
+  <span><strong>Mode mots-clés</strong> — l'API sémantique est indisponible,
+  les résultats sont filtrés par présence de mots dans le texte (pas de classement par pertinence)</span>
+</div>"""
+
+BANNER_EMPTY = ""
+
+
 def search(query, threshold):
     min_score = threshold / 100.0
     qwords = [w for w in query.lower().split() if len(w) > 2] if query.strip() else []
 
     if not query.strip():
-        return render_cards(df), ""
+        return render_cards(df), "", BANNER_EMPTY
 
     q_vec = encode_query(query)
     if q_vec is not None:
@@ -251,7 +274,7 @@ def search(query, threshold):
         mask = [s >= min_score for s in scores]
         filtered = results[mask]
         filtered_scores = [s for s, m in zip(scores, mask) if m]
-        return render_cards(filtered, filtered_scores, qwords), ""
+        return render_cards(filtered, filtered_scores, qwords), "", BANNER_SEMANTIC
     else:
         def score_row(row):
             text = f"{row.get('titre','')} {row.get('text','')} {row.get('corps_grade','')}".lower()
@@ -259,7 +282,7 @@ def search(query, threshold):
         df2 = df.copy()
         df2["_s"] = df2.apply(score_row, axis=1)
         df2 = df2[df2["_s"] > 0].sort_values("_s", ascending=False)
-        return render_cards(df2, qwords=qwords), ""
+        return render_cards(df2, qwords=qwords), "", BANNER_KEYWORDS
 
 
 def on_card_click(job_id):
@@ -273,11 +296,14 @@ with gr.Blocks(title="AVPs OPT-NC") as demo:
 .gradio-container { max-width: 1100px !important; }
 footer { display: none !important; }
 #query textarea { font-size: 15px !important; line-height: 1.5 !important; }
-#search-btn { font-size: 15px !important; height: 44px !important; border-radius: 10px !important; }
-mark { background: #fef08a; border-radius: 3px; padding: 0 2px; }
-@media (max-width: 640px) {
-  #detail-panel { display: none !important; }
-}
+#search-btn button { font-size: 15px !important; height: 44px !important; border-radius: 10px !important; }
+/* Surlignage lisible : fond orange foncé, texte blanc */
+mark { background: #b45309; color: #fff !important; border-radius: 3px; padding: 0 3px; font-style: normal; }
+.md-preview p, .md-preview li { margin: 0 0 4px; }
+.md-body h1,.md-body h2,.md-body h3 { font-weight:600; margin:12px 0 6px; }
+.md-body ul,.md-body ol { padding-left:18px; margin:6px 0; }
+.md-body p { margin:0 0 8px; }
+@media (max-width: 640px) { #detail-panel { display: none !important; } }
 </style>""")
 
     gr.HTML(f"""
@@ -287,7 +313,7 @@ mark { background: #fef08a; border-radius: 3px; padding: 0 2px; }
     <h1 style="font-size:20px;font-weight:700;margin:0;color:#111">📋 AVPs OPT-NC</h1>
     <p style="font-size:13px;color:#6b7280;margin:2px 0 0">Décrivez votre profil ou saisissez des mots-clés</p>
   </div>
-  <a href="{RSS_URL}" title="S'abonner au flux RSS des nouvelles AVPs"
+  <a href="{RSS_URL}" title="S'abonner au flux RSS"
      style="display:flex;align-items:center;gap:6px;padding:7px 14px;
             background:#fff7ed;color:#c2410c;border:1px solid #fed7aa;
             border-radius:10px;text-decoration:none;font-size:13px;font-weight:500">
@@ -299,25 +325,21 @@ mark { background: #fef08a; border-radius: 3px; padding: 0 2px; }
 </div>""")
 
     query_input = gr.Textbox(
-        elem_id="query",
-        label="",
+        elem_id="query", label="",
         placeholder=(
             "Ex : \"Cadre avec expérience en gestion de projets SI et management d'équipe\"\n"
             "ou : chef de service, télécoms, RH, marketing...\n"
             "Ctrl+Entrée pour lancer la recherche"
         ),
-        lines=3,
-        max_lines=4,
-        show_label=False,
+        lines=3, max_lines=4, show_label=False,
     )
 
     with gr.Row():
         search_btn = gr.Button("🔍 Rechercher", variant="primary", elem_id="search-btn", scale=1)
-        threshold_slider = gr.Slider(
-            minimum=0, maximum=100, value=50, step=5,
-            label="Score minimum (%)",
-            scale=2,
-        )
+        threshold_slider = gr.Slider(minimum=0, maximum=100, value=50, step=5,
+                                     label="Score minimum (%)", scale=2)
+
+    mode_banner = gr.HTML()
 
     with gr.Row():
         with gr.Column(scale=1, elem_id="results-col"):
@@ -329,68 +351,43 @@ mark { background: #fef08a; border-radius: 3px; padding: 0 2px; }
                 'Cliquez sur une vignette pour afficher le détail</div>'
             )
 
-    # State pour l'id sélectionné — plus fiable que le textbox caché
-    selected_id = gr.State("")
+    hidden_id_input = gr.Textbox(visible=False, elem_id="hidden-job-id")
 
-    # Ctrl+Entrée → recherche
     gr.HTML("""<script>
+// Ctrl+Entrée — cible le <button> à l'intérieur du wrapper Gradio
 document.addEventListener('keydown', function(e) {
   if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
-    const btn = document.getElementById('search-btn');
+    const btn = document.querySelector('#search-btn button');
     if (btn) btn.click();
   }
 });
 
 function selectJob(jobId, el) {
-  // Highlight la carte sélectionnée
-  document.querySelectorAll('[id^="card-"]').forEach(c => {
+  document.querySelectorAll('[id^="card-"]').forEach(function(c) {
+    c.classList.remove('selected');
     c.style.borderColor = '#e5e7eb';
     c.style.background = '#fff';
   });
+  el.classList.add('selected');
   el.style.borderColor = '#3b82f6';
   el.style.background = '#eff6ff';
 
-  // Mettre à jour le State Gradio via le bouton caché
-  const hiddenBtn = document.getElementById('detail-trigger');
-  if (hiddenBtn) {
-    window._selectedJobId = jobId;
-    hiddenBtn.click();
+  const ta = document.querySelector('#hidden-job-id textarea') ||
+             document.querySelector('#hidden-job-id input');
+  if (ta) {
+    ta.value = jobId;
+    ta.dispatchEvent(new Event('input', { bubbles: true }));
   }
 }
-</script>""")
-
-    # Bouton invisible déclenché par le JS
-    detail_trigger = gr.Button("trigger", visible=False, elem_id="detail-trigger")
-
-    def trigger_detail(current_id):
-        # Appelé via JS — on retourne le même id pour déclencher on_card_click
-        return current_id
-
-    # On utilise un textbox caché pour passer l'id depuis JS
-    hidden_id_input = gr.Textbox(visible=False, elem_id="hidden-job-id")
-
-    gr.HTML("""<script>
-// Override : quand le bouton detail-trigger est cliqué, on injecte l'id dans le textbox caché
-document.addEventListener('click', function(e) {
-  if (e.target && e.target.id === 'detail-trigger') {
-    setTimeout(function() {
-      const ta = document.querySelector('#hidden-job-id textarea') ||
-                 document.querySelector('#hidden-job-id input');
-      if (ta && window._selectedJobId) {
-        ta.value = window._selectedJobId;
-        ta.dispatchEvent(new Event('input', { bubbles: true }));
-      }
-    }, 50);
-  }
-}, true);
 </script>""")
 
     hidden_id_input.change(fn=on_card_click, inputs=hidden_id_input, outputs=detail_html)
 
     inputs = [query_input, threshold_slider]
-    search_btn.click(fn=search, inputs=inputs, outputs=[results_html, detail_html])
-    threshold_slider.release(fn=search, inputs=inputs, outputs=[results_html, detail_html])
-    demo.load(fn=search, inputs=inputs, outputs=[results_html, detail_html])
+    outputs = [results_html, detail_html, mode_banner]
+    search_btn.click(fn=search, inputs=inputs, outputs=outputs)
+    threshold_slider.release(fn=search, inputs=inputs, outputs=outputs)
+    demo.load(fn=search, inputs=inputs, outputs=outputs)
 
 if __name__ == "__main__":
     demo.launch()