Upload app.py

app.py

@@ -6,7 +6,7 @@ import requests
 import markdown as md_lib
 from datasets import load_dataset
 
-# --- Chargement des données ---
+# --- Données ---
 ds = load_dataset("opt-nc/avps", split="train")
 df = ds.to_pandas()
 
@@ -16,8 +16,8 @@ embeddings_norm = embeddings_matrix / (norms + 1e-10)
 
 EMBED_API = "https://api-inference.huggingface.co/models/BAAI/bge-m3"
 HF_TOKEN = os.environ.get("HF_TOKEN", "")
-
 job_index = {str(row["id"]): dict(row) for _, row in df.iterrows()}
+RSS_URL = "https://opt-nc.github.io/avps/feed.xml"
 
 
 def encode_query(text: str):
@@ -26,8 +26,7 @@ def encode_query(text: str):
         headers["Authorization"] = f"Bearer {HF_TOKEN}"
     try:
         r = requests.post(
-            EMBED_API,
-            headers=headers,
+            EMBED_API, headers=headers,
             json={"inputs": text, "options": {"wait_for_model": True}},
             timeout=30,
         )
@@ -42,96 +41,153 @@ def encode_query(text: str):
         return None
 
 
-def score_badge(score):
-    if score is None:
+def fmt_date(d):
+    if not d or str(d) in ("NaT", "None", "nan"):
         return ""
+    try:
+        dt = pd.to_datetime(d)
+        delta = (dt - pd.Timestamp.now()).days
+        urgence = " 🔴" if delta <= 7 else (" 🟡" if delta <= 14 else "")
+        return dt.strftime("%d/%m/%Y") + urgence
+    except Exception:
+        return str(d)[:10]
+
+
+def score_widget(score):
+    """Badge visuel score style 'immédiat'."""
     pct = int(round(score * 100))
-    bg    = "#d1fae5" if pct >= 70 else ("#fef3c7" if pct >= 50 else "#f3f4f6")
-    color = "#065f46" if pct >= 70 else ("#92400e" if pct >= 50 else "#6b7280")
+    if pct >= 70:
+        bg, color, label = "#d1fae5", "#065f46", f"✦ {pct}% match"
+    elif pct >= 50:
+        bg, color, label = "#fef3c7", "#92400e", f"◈ {pct}% match"
+    else:
+        bg, color, label = "#f3f4f6", "#6b7280", f"○ {pct}% match"
     return (
-        f'<span style="background:{bg};color:{color};font-size:12px;font-weight:600;'
-        f'padding:3px 10px;border-radius:12px;white-space:nowrap">Score {pct}%</span>'
+        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>'
     )
 
 
-def render_cards(results_df, scores=None):
+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:
+        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
+
+
+def render_cards(results_df, scores=None, qwords=None):
     if results_df.empty:
-        return "<p style='color:#888;text-align:center;padding:2rem'>Aucun résultat trouvé.</p>"
+        return "<p style='color:#888;text-align:center;padding:2rem'>Aucun résultat.</p>"
 
     cards = []
     for i, (_, row) in enumerate(results_df.iterrows()):
         job_id    = str(row.get("id") or "")
         titre     = row.get("titre") or "Poste sans titre"
-        direction = row.get("direction_interne") or ""
+        numero    = row.get("numero") or job_id
+        direction = row.get("direction_interne_acronyme") or ""
+        service   = row.get("service_acronyme") 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 ""
-        apercu    = (row.get("text") or "")[:200].strip()
         score     = scores[i] if scores is not None else None
 
-        immed_html = (
-            '<span style="background:#d1fae5;color:#065f46;font-size:11px;'
-            'padding:2px 8px;border-radius:12px;font-weight:500">⚡ Immédiat</span>'
-            if immed else ""
-        )
-        meta = " · ".join(p for p in [direction, grade, lieu] if p)
-        detail_btn = (
-            f'<button onclick="showDetail(\'{job_id}\')" '
-            f'style="padding:7px 14px;background:#f3f4f6;color:#374151;border:none;'
-            f'border-radius:8px;font-size:13px;cursor:pointer;font-weight:500">'
-            f'📄 Détail</button>'
-        )
+        dir_str = direction + (f" › {service}" if service else "")
+        meta = " · ".join(p for p in [dir_str, grade, lieu] if p)
+
+        badges = ""
+        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>'
+
+        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>'
+
         annonce_btn = (
             f'<a href="{url}" target="_blank" '
-            f'style="padding:7px 14px;background:#2563eb;color:#fff;border-radius:8px;'
-            f'text-decoration:none;font-size:13px;font-weight:500">Voir l\'annonce →</a>'
+            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 ""
         )
 
         cards.append(f"""
-<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;
-            padding:14px 16px;margin-bottom:10px">
+<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"
+     onmouseenter="this.style.borderColor='#93c5fd'"
+     onmouseleave="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">
-    <span style="font-size:15px;font-weight:600;color:#111;line-height:1.3;
-                 flex:1;min-width:0">{titre}</span>
-    <div style="display:flex;gap:4px;align-items:center;flex-shrink:0">
-      {score_badge(score)}{immed_html}
-    </div>
+    <span style="font-size:15px;font-weight:600;color:#111;line-height:1.3;flex:1;min-width:0">{titre}</span>
+    <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">
+    {cloture_html}{ref_html}
   </div>
-  <p style="font-size:12px;color:#6b7280;margin:0 0 6px">{meta}</p>
-  <p style="font-size:13px;color:#374151;margin:0 0 10px;line-height:1.5">{apercu}…</p>
-  <div style="display:flex;gap:8px;flex-wrap:wrap">{detail_btn}{annonce_btn}</div>
+  {snippet_html}
+  <div style="margin-top:10px">{annonce_btn}</div>
 </div>""")
 
-    header = f'<p style="font-size:13px;color:#6b7280;margin-bottom:10px">{len(results_df)} offre(s) trouvée(s)</p>'
+    n = len(results_df)
+    header = f'<p style="font-size:13px;color:#6b7280;margin-bottom:10px">{n} offre{"s" if n > 1 else ""} trouvée{"s" if n > 1 else ""}</p>'
     return header + "\n".join(cards)
 
 
 def render_detail(job_id: str):
-    row = job_index.get(job_id)
+    row = job_index.get(str(job_id))
     if not row:
-        return "<p>Annonce introuvable.</p>"
+        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
 
-    # Markdown → HTML
     body_html = md_lib.markdown(texte_md, extensions=["nl2br", "sane_lists"])
+    dir_str = direction + (f" › {service}" if service else "")
+    meta = " · ".join(p for p in [dir_str, grade, lieu] if p)
 
     immed_html = (
-        '<span style="background:#d1fae5;color:#065f46;font-size:12px;'
-        'padding:3px 10px;border-radius:12px;font-weight:500">⚡ Disponible immédiatement</span>'
+        '<span style="background:#d1fae5;color:#065f46;font-size:12px;padding:3px 10px;'
+        'border-radius:12px;font-weight:600">⚡ Disponible immédiatement</span> '
         if immed else ""
     )
-    meta = " · ".join(p for p in [direction, grade, lieu] if p)
+    cloture_html = f'<span style="font-size:12px;color:#6b7280">🗓 Clôture : {cloture}</span>' if cloture else ""
+
     btns = ""
     if url:
         btns += (f'<a href="{url}" target="_blank" style="padding:8px 16px;background:#2563eb;'
@@ -142,20 +198,47 @@ def render_detail(job_id: str):
                  f'background:#f3f4f6;color:#374151;border-radius:8px;text-decoration:none;'
                  f'font-size:13px;font-weight:500">📎 PDF</a>')
 
+    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)
+
+    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">
+    <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}"
+       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"
+       style="padding:5px 12px;background:#f1f5f9;color:#374151;border:1px solid #e2e8f0;
+              border-radius:8px;font-size:12px;text-decoration:none">💬 WhatsApp</a>
+  </div>
+</div>"""
+
     return f"""
 <div style="padding:4px 0">
+  <p style="font-size:11px;color:#9ca3af;margin:0 0 4px">#{numero}</p>
   <h2 style="font-size:17px;font-weight:700;color:#111;margin:0 0 6px;line-height:1.3">{titre}</h2>
-  <p style="font-size:12px;color:#6b7280;margin:0 0 8px">{meta}</p>
-  {immed_html}
-  <div style="margin:16px 0">{btns}</div>
-  <hr style="border:none;border-top:1px solid #e5e7eb;margin:12px 0">
-  <div style="font-size:14px;color:#374151;line-height:1.7">
-    {body_html}
+  <p style="font-size:12px;color:#6b7280;margin:0 0 10px">{meta}</p>
+  <div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px">
+    {immed_html}{cloture_html}
   </div>
+  <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>"""
 
 
-def search(query):
+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), ""
 
@@ -165,82 +248,148 @@ def search(query):
         order = np.argsort(sims)[::-1]
         results = df.iloc[order].copy()
         scores = sims[order].tolist()
-        mask = [s > 0.3 for s in scores]
-        results = results[mask]
-        scores = [s for s, m in zip(scores, mask) if m]
-        return render_cards(results, scores), ""
+        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), ""
     else:
-        qwords = query.lower().split()
         def score_row(row):
             text = f"{row.get('titre','')} {row.get('text','')} {row.get('corps_grade','')}".lower()
             return sum(1 for w in qwords if w in text)
         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), ""
+        return render_cards(df2, qwords=qwords), ""
 
 
-def show_detail(job_id: str):
-    return render_detail(job_id)
+def on_card_click(job_id):
+    if not job_id or not job_id.strip():
+        return ""
+    return render_detail(job_id.strip())
 
 
-with gr.Blocks(title="AVPS OPT-NC") as demo:
+with gr.Blocks(title="AVPs OPT-NC") as demo:
     gr.HTML("""<style>
 .gradio-container { max-width: 1100px !important; }
 footer { display: none !important; }
-#query textarea { font-size: 16px !important; line-height: 1.5 !important; }
-#search-btn { font-size: 16px !important; height: 48px !important; border-radius: 10px !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; }
-  #results-col { width: 100% !important; }
 }
 </style>""")
 
-    gr.Markdown("## 📋 Offres OPT-NC\nDécrivez votre profil ou saisissez des mots-clés.")
+    gr.HTML(f"""
+<div style="display:flex;justify-content:space-between;align-items:center;
+            flex-wrap:wrap;gap:8px;margin-bottom:1rem">
+  <div>
+    <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"
+     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">
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="#c2410c">
+      <path d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19.01 7.38 20 6.18 20C4.98 20 4 19.01 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1z"/>
+    </svg>
+    Flux RSS
+  </a>
+</div>""")
 
     query_input = gr.Textbox(
         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..."
+            "ou : chef de service, télécoms, RH, marketing...\n"
+            "Ctrl+Entrée pour lancer la recherche"
         ),
-        lines=4,
-        max_lines=8,
+        lines=3,
+        max_lines=4,
         show_label=False,
     )
-    search_btn = gr.Button("🔍 Rechercher", variant="primary", elem_id="search-btn")
+
+    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,
+        )
 
     with gr.Row():
         with gr.Column(scale=1, elem_id="results-col"):
             results_html = gr.HTML()
-        with gr.Column(scale=1, elem_id="detail-panel", visible=True):
+        with gr.Column(scale=1, elem_id="detail-panel"):
             detail_html = gr.HTML(
                 '<div style="padding:2rem;color:#9ca3af;text-align:center;'
                 'border:1px dashed #e5e7eb;border-radius:12px;margin-top:4px">'
-                '← Cliquez sur "Détail" pour afficher une annonce</div>'
+                'Cliquez sur une vignette pour afficher le détail</div>'
             )
 
-    # Bouton Détail : appel via gr.Text caché qui transmet l'id
-    selected_id = gr.Textbox(visible=False)
+    # State pour l'id sélectionné — plus fiable que le textbox caché
+    selected_id = gr.State("")
 
-    # JS : le bouton "Détail" dans le HTML met à jour selected_id
+    # Ctrl+Entrée → recherche
     gr.HTML("""<script>
-function showDetail(jobId) {
-  const input = document.querySelector('#selected-id textarea') ||
-                document.querySelector('#selected-id input');
-  if (input) {
-    input.value = jobId;
-    input.dispatchEvent(new Event('input', { bubbles: true }));
+document.addEventListener('keydown', function(e) {
+  if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+    const btn = document.getElementById('search-btn');
+    if (btn) btn.click();
+  }
+});
+
+function selectJob(jobId, el) {
+  // Highlight la carte sélectionnée
+  document.querySelectorAll('[id^="card-"]').forEach(c => {
+    c.style.borderColor = '#e5e7eb';
+    c.style.background = '#fff';
+  });
+  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();
   }
 }
 </script>""")
 
-    selected_id.change(fn=show_detail, inputs=selected_id, outputs=detail_html)
+    # 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]
+    inputs = [query_input, threshold_slider]
     search_btn.click(fn=search, inputs=inputs, outputs=[results_html, detail_html])
-    query_input.submit(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])
 
 if __name__ == "__main__":