Upload 2 files

app.py

@@ -3,6 +3,7 @@ import gradio as gr
 import pandas as pd
 import numpy as np
 import requests
+import markdown as md_lib
 from datasets import load_dataset
 
 # --- Chargement des données ---
@@ -16,6 +17,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()}
+
 
 def encode_query(text: str):
     headers = {"Content-Type": "application/json"}
@@ -39,79 +42,134 @@ def encode_query(text: str):
         return None
 
 
+def score_badge(score):
+    if score is None:
+        return ""
+    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")
+    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>'
+    )
+
+
 def render_cards(results_df, scores=None):
     if results_df.empty:
         return "<p style='color:#888;text-align:center;padding:2rem'>Aucun résultat trouvé.</p>"
 
     cards = []
     for i, (_, row) in enumerate(results_df.iterrows()):
-        titre = row.get("titre") or "Poste sans titre"
+        job_id    = str(row.get("id") or "")
+        titre     = row.get("titre") or "Poste sans titre"
         direction = row.get("direction_interne") or ""
-        grade = row.get("corps_grade") or ""
-        lieu = row.get("lieu_travail") or ""
-        immed = row.get("disponible_immediatement", False)
-        url = row.get("url") or ""
-        texte = (row.get("text") or "")[:200].strip()
-        score = scores[i] if scores is not None else None
-
-        immed_badge = (
+        grade     = row.get("corps_grade") or ""
+        lieu      = row.get("lieu_travail") or ""
+        immed     = row.get("disponible_immediatement", False)
+        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 ""
         )
-        score_badge = (
-            f'<span style="background:#ede9fe;color:#5b21b6;font-size:11px;'
-            f'padding:2px 8px;border-radius:12px">{score:.0%}</span>'
-            if score is not None 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>'
         )
-        meta_parts = [p for p in [direction, grade, lieu] if p]
-        meta = " · ".join(meta_parts)
-
-        link_btn = (
-            f'<a href="{url}" target="_blank" style="display:inline-block;margin-top:10px;'
-            f'padding:8px 16px;background:#2563eb;color:#fff;border-radius:8px;'
+        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>'
             if url else ""
         )
 
-        card = f"""
+        cards.append(f"""
 <div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;
-            padding:14px 16px;margin-bottom:12px">
+            padding:14px 16px;margin-bottom:10px">
   <div style="display:flex;justify-content:space-between;align-items:flex-start;
-              flex-wrap:wrap;gap:6px;margin-bottom:6px">
+              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;flex-shrink:0">{score_badge}{immed_badge}</div>
+    <div style="display:flex;gap:4px;align-items:center;flex-shrink:0">
+      {score_badge(score)}{immed_html}
+    </div>
   </div>
   <p style="font-size:12px;color:#6b7280;margin:0 0 6px">{meta}</p>
-  <p style="font-size:13px;color:#374151;margin:0;line-height:1.5">{texte}…</p>
-  {link_btn}
-</div>"""
-        cards.append(card)
+  <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>
+</div>""")
 
-    header = f'<p style="font-size:13px;color:#6b7280;margin-bottom:12px">{len(results_df)} offre(s) trouvée(s)</p>'
+    header = f'<p style="font-size:13px;color:#6b7280;margin-bottom:10px">{len(results_df)} offre(s) trouvée(s)</p>'
     return header + "\n".join(cards)
 
 
+def render_detail(job_id: str):
+    row = job_index.get(job_id)
+    if not row:
+        return "<p>Annonce introuvable.</p>"
+
+    titre     = row.get("titre") or "Poste sans titre"
+    direction = row.get("direction_interne") or ""
+    grade     = row.get("corps_grade") or ""
+    lieu      = row.get("lieu_travail") or ""
+    immed     = row.get("disponible_immediatement", False)
+    url       = row.get("url") or ""
+    url_pdf   = row.get("url_pdf") or ""
+    texte_md  = row.get("text") or ""
+
+    # Markdown → HTML
+    body_html = md_lib.markdown(texte_md, extensions=["nl2br", "sane_lists"])
+
+    immed_html = (
+        '<span style="background:#d1fae5;color:#065f46;font-size:12px;'
+        'padding:3px 10px;border-radius:12px;font-weight:500">⚡ Disponible immédiatement</span>'
+        if immed else ""
+    )
+    meta = " · ".join(p for p in [direction, grade, lieu] if p)
+    btns = ""
+    if url:
+        btns += (f'<a href="{url}" target="_blank" style="padding:8px 16px;background:#2563eb;'
+                 f'color:#fff;border-radius:8px;text-decoration:none;font-size:13px;'
+                 f'font-weight:500;margin-right:8px">🌐 Voir l\'annonce</a>')
+    if url_pdf:
+        btns += (f'<a href="{url_pdf}" target="_blank" style="padding:8px 16px;'
+                 f'background:#f3f4f6;color:#374151;border-radius:8px;text-decoration:none;'
+                 f'font-size:13px;font-weight:500">📎 PDF</a>')
+
+    return f"""
+<div style="padding:4px 0">
+  <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}
+  </div>
+</div>"""
+
+
 def search(query):
     if not query.strip():
-        # Afficher toutes les offres par défaut
-        return render_cards(df)
+        return render_cards(df), ""
 
     q_vec = encode_query(query)
-
     if q_vec is not None:
         sims = embeddings_norm @ q_vec
         order = np.argsort(sims)[::-1]
         results = df.iloc[order].copy()
         scores = sims[order].tolist()
-        # Garder seulement les résultats pertinents (similarité > 0.3)
         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)
+        return render_cards(results, scores), ""
     else:
-        # Fallback mots-clés
         qwords = query.lower().split()
         def score_row(row):
             text = f"{row.get('titre','')} {row.get('text','')} {row.get('corps_grade','')}".lower()
@@ -119,20 +177,26 @@ def search(query):
         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), ""
+
+
+def show_detail(job_id: str):
+    return render_detail(job_id)
 
 
 with gr.Blocks(title="AVPS OPT-NC") as demo:
     gr.HTML("""<style>
-body { max-width: 600px; margin: 0 auto; }
-.gradio-container { padding: 0 !important; }
+.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; }
+@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.Markdown("## 📋 Offres OPT-NC\nDécrivez votre profil ou saisissez des mots-clés.")
 
     query_input = gr.Textbox(
         elem_id="query",
@@ -145,15 +209,39 @@ footer { display: none !important; }
         max_lines=8,
         show_label=False,
     )
-
     search_btn = gr.Button("🔍 Rechercher", variant="primary", elem_id="search-btn")
 
-    results_html = gr.HTML()
-
-    # Lancement au démarrage
-    demo.load(fn=search, inputs=query_input, outputs=results_html)
-    search_btn.click(fn=search, inputs=query_input, outputs=results_html)
-    query_input.submit(fn=search, inputs=query_input, outputs=results_html)
+    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):
+            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>'
+            )
+
+    # Bouton Détail : appel via gr.Text caché qui transmet l'id
+    selected_id = gr.Textbox(visible=False)
+
+    # JS : le bouton "Détail" dans le HTML met à jour selected_id
+    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 }));
+  }
+}
+</script>""")
+
+    selected_id.change(fn=show_detail, inputs=selected_id, outputs=detail_html)
+
+    inputs = [query_input]
+    search_btn.click(fn=search, inputs=inputs, outputs=[results_html, detail_html])
+    query_input.submit(fn=search, inputs=inputs, outputs=[results_html, detail_html])
+    demo.load(fn=search, inputs=inputs, outputs=[results_html, detail_html])
 
 if __name__ == "__main__":
     demo.launch()

requirements.txt

@@ -2,3 +2,4 @@ gradio>=6.0.0
 datasets
 pandas
 numpy
+markdown