Update app.py

app.py

@@ -1,11 +1,13 @@
 import os
 import json
+import datetime
 import gradio as gr
 from huggingface_hub import InferenceClient
 
 # ── Konfiguration ──────────────────────────────────────────────────────────────
-HF_TOKEN = os.environ.get("HF_TOKEN", "")
-MODEL_ID  = "meta-llama/Llama-4-Maverick-17B-128E-Instruct-FP8"
+HF_TOKEN       = os.environ.get("HF_TOKEN", "")
+MODEL_ID       = "meta-llama/Llama-4-Maverick-17B-128E-Instruct-FP8"
+LEADERBOARD_PATH = os.path.join(os.path.dirname(os.path.abspath(__file__)), "leaderboard.json")
 
 # ── System Prompts ─────────────────────────────────────────────────────────────
 
@@ -65,6 +67,100 @@ Rules:
 - ALL string values must be valid JSON strings. Plain ASCII only."""
 
 
+# ── Leaderboard ────────────────────────────────────────────────────────────────
+
+def _load_lb() -> list:
+    try:
+        with open(LEADERBOARD_PATH, "r", encoding="utf-8") as f:
+            return json.load(f)
+    except Exception:
+        return []
+
+def _save_lb(entries: list):
+    try:
+        with open(LEADERBOARD_PATH, "w", encoding="utf-8") as f:
+            json.dump(entries, f, ensure_ascii=False, indent=2)
+    except Exception:
+        pass
+
+def _add_to_lb(post_text: str, total: int, max_score: int, verdict: str):
+    entries = _load_lb()
+    entries.append({
+        "text":    post_text[:280].strip(),   # preview, max 280 chars
+        "total":   total,
+        "max":     max_score,
+        "pct":     round(total / max_score * 100) if max_score else 0,
+        "verdict": verdict,
+        "date":    datetime.datetime.now().strftime("%d.%m.%Y"),
+    })
+    _save_lb(entries)
+
+def _render_leaderboard() -> str:
+    entries = _load_lb()
+    if not entries:
+        return "<p style='color:#888;font-size:.85rem;text-align:center;padding:20px;'>Noch keine Eintraege. Analysiere einen LinkedIn-Post um zu starten.</p>"
+
+    sorted_asc  = sorted(entries, key=lambda x: x["pct"])
+    sorted_desc = sorted(entries, key=lambda x: x["pct"], reverse=True)
+    best  = sorted_asc[:5]
+    worst = sorted_desc[:5]
+
+    def entry_html(e, rank, is_worst):
+        pct   = e["pct"]
+        color = "#C0392B" if pct >= 70 else "#E67E22" if pct >= 40 else "#27AE60"
+        medal = ["🥇","🥈","🥉","4.","5."][rank]
+        text_preview = e["text"][:120] + ("…" if len(e["text"]) > 120 else "")
+        return f"""
+        <div style="padding:10px 12px;border:1px solid #E0DFDC;border-radius:8px;
+                    margin-bottom:8px;background:#FAFAFA;">
+          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
+            <span style="font-size:.82rem;font-weight:700;color:#333;">{medal}</span>
+            <span style="font-size:.82rem;font-weight:700;color:{color};
+                         background:{color}18;border-radius:99px;padding:2px 8px;">
+              {pct}% &nbsp;({e['total']}/{e['max']})
+            </span>
+            <span style="font-size:.72rem;color:#aaa;">{e.get('date','')}</span>
+          </div>
+          <div style="font-size:.78rem;color:#555;line-height:1.45;margin-bottom:4px;">{text_preview}</div>
+          <div style="font-size:.75rem;color:#888;font-style:italic;">"{e.get('verdict','')}"</div>
+        </div>"""
+
+    best_html  = "".join(entry_html(e, i, False) for i, e in enumerate(best))
+    worst_html = "".join(entry_html(e, i, True)  for i, e in enumerate(worst))
+
+    total_count = len(entries)
+    avg_pct     = round(sum(e["pct"] for e in entries) / total_count) if entries else 0
+
+    return f"""
+    <div style="background:#fff;border:1px solid #E0DFDC;border-radius:12px;
+                padding:22px 26px;margin-top:4px;box-shadow:0 2px 12px rgba(0,0,0,.07);">
+      <div style="display:flex;align-items:center;gap:10px;margin-bottom:20px;">
+        <span style="font-size:1.3rem;">🏆</span>
+        <span style="font-weight:700;font-size:.95rem;color:#004182;
+                     text-transform:uppercase;letter-spacing:.5px;">Leaderboard</span>
+        <span style="margin-left:auto;font-size:.78rem;color:#888;">
+          {total_count} Eintraege &nbsp;&middot;&nbsp; Ø {avg_pct}% Nonsense
+        </span>
+      </div>
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;">
+        <div>
+          <div style="font-size:.76rem;font-weight:700;text-transform:uppercase;
+                      letter-spacing:.5px;color:#27AE60;margin-bottom:10px;">
+            ✅ Substanzreichste Posts (niedrigster Score)
+          </div>
+          {best_html}
+        </div>
+        <div>
+          <div style="font-size:.76rem;font-weight:700;text-transform:uppercase;
+                      letter-spacing:.5px;color:#C0392B;margin-bottom:10px;">
+            💩 Reinster LinkedIn-Nonsense (hoechster Score)
+          </div>
+          {worst_html}
+        </div>
+      </div>
+    </div>"""
+
+
 # ── LLM-Calls ─────────────────────────────────────────────────────────────────
 
 def _call_llm(system, user, max_tokens=1024):
@@ -91,13 +187,10 @@ def translate(text, direction):
 
 
 def _extract_json(raw: str) -> dict:
-    """Mehrere Strategien um JSON aus LLM-Antwort zu extrahieren."""
-    # 1. Direkt parsen
     try:
         return json.loads(raw)
     except Exception:
         pass
-    # 2. JSON-Block per Index extrahieren
     try:
         start = raw.find("{")
         end   = raw.rfind("}") + 1
@@ -105,7 +198,6 @@ def _extract_json(raw: str) -> dict:
             return json.loads(raw[start:end])
     except Exception:
         pass
-    # 3. Whitespace bereinigen und nochmal versuchen
     try:
         cleaned = raw[raw.find("{"):raw.rfind("}")+1]
         cleaned = " ".join(cleaned.split())
@@ -115,18 +207,29 @@ def _extract_json(raw: str) -> dict:
     raise ValueError("Kein valides JSON gefunden")
 
 
-def get_bingo(text: str) -> str:
+def get_bingo(text: str):
+    """Gibt (bingo_html, leaderboard_html) zurueck."""
     if not text.strip() or not HF_TOKEN:
-        return ""
+        return "", _render_leaderboard()
     last_err = None
     for attempt in range(3):
         try:
             raw  = _call_llm(PROMPT_BINGO, text, max_tokens=600)
             data = _extract_json(raw)
-            return _render_bingo(data)
+            bingo_html = _render_bingo(data)
+
+            # Leaderboard aktualisieren
+            metrics   = data.get("metrics", [])
+            total     = sum(int(m.get("score", 0)) for m in metrics)
+            max_score = len(metrics) * 10
+            verdict   = data.get("verdict", "")
+            _add_to_lb(text, total, max_score, verdict)
+
+            return bingo_html, _render_leaderboard()
         except Exception as e:
             last_err = e
-    return f"<p style='color:#c00;font-size:.85rem;padding:8px;'>Analyse fehlgeschlagen nach 3 Versuchen: {last_err}</p>"
+    err_html = f"<p style='color:#c00;font-size:.85rem;padding:8px;'>Analyse fehlgeschlagen: {last_err}</p>"
+    return err_html, _render_leaderboard()
 
 
 def _render_bingo(data):
@@ -150,7 +253,7 @@ def _render_bingo(data):
     for m in metrics:
         score = int(m.get("score", 0))
         label = m.get("label", m.get("icon", ""))
-        icon  = ICONS.get(label, m.get("icon", ""))
+        icon  = ICONS.get(label, "")
         color = bar_color(score)
         pct   = score * 10
         rows += f"""
@@ -168,13 +271,11 @@ def _render_bingo(data):
     total     = sum(int(m.get("score", 0)) for m in metrics)
     max_score = len(metrics) * 10
     total_pct = round(total / max_score * 100) if max_score else 0
-
     badge_color = "#C0392B" if total_pct >= 70 else "#E67E22" if total_pct >= 40 else "#27AE60"
 
     return f"""
     <div style="background:#fff;border:1px solid #E0DFDC;border-radius:12px;
-                padding:22px 26px;margin-top:4px;
-                box-shadow:0 2px 12px rgba(0,0,0,.07);">
+                padding:22px 26px;margin-top:4px;box-shadow:0 2px 12px rgba(0,0,0,.07);">
       <div style="display:flex;align-items:center;gap:10px;margin-bottom:20px;">
         <span style="font-size:1.3rem;">🎯</span>
         <span style="font-weight:700;font-size:.95rem;color:#004182;
@@ -211,10 +312,16 @@ def swap_direction(current_dir, inp, out):
 def run_translate(text, direction):
     result = translate(text, direction)
     if direction == "to_linkedin":
-        return result, gr.update(value=result, visible=True), gr.update(value="", visible=False)
+        return (result,
+                gr.update(value=result, visible=True),
+                gr.update(value="",     visible=False),
+                gr.update(value=_render_leaderboard()))
     else:
-        bingo_html = get_bingo(text)
-        return result, gr.update(value="", visible=False), gr.update(value=bingo_html, visible=True)
+        bingo_html, lb_html = get_bingo(text)
+        return (result,
+                gr.update(value="",         visible=False),
+                gr.update(value=bingo_html, visible=True),
+                gr.update(value=lb_html))
 
 
 # ── CSS ───────────────────────────────────────────────────────────────────────
@@ -237,13 +344,8 @@ body, .gradio-container {
 }
 .li-header {
     background: linear-gradient(135deg, var(--li-blue-dark) 0%, var(--li-blue) 70%, var(--li-blue-mid) 100%);
-    border-radius: 12px;
-    padding: 24px 28px;
-    margin-bottom: 20px;
-    box-shadow: 0 4px 20px rgba(10,102,194,.3);
-    display: flex;
-    align-items: center;
-    gap: 18px;
+    border-radius: 12px; padding: 24px 28px; margin-bottom: 20px;
+    box-shadow: 0 4px 20px rgba(10,102,194,.3); display: flex; align-items: center; gap: 18px;
 }
 .li-header .icon { font-size: 2.6rem; line-height: 1; }
 .li-header h1   { margin: 0 !important; font-size: 1.65rem !important; font-weight: 700 !important; color: #fff !important; }
@@ -316,7 +418,7 @@ with gr.Blocks(title="LinkedIn Translator", css=CSS) as demo:
             )
         with gr.Column(scale=1, min_width=120):
             gr.HTML("<div style='height:40px'></div>")
-            translate_btn = gr.Button("Übersetzen", variant="primary", size="lg")
+            translate_btn = gr.Button("Uebersetzen", variant="primary", size="lg")
             gr.HTML("<div style='height:12px'></div>")
             swap_btn = gr.Button("🔄  →  LinkedIn", variant="secondary", size="sm")
         with gr.Column(scale=5):
@@ -327,14 +429,20 @@ with gr.Blocks(title="LinkedIn Translator", css=CSS) as demo:
                 interactive=False,
             )
 
+    # ── Score + Markdown ──────────────────────────────────────────────────────
     with gr.Row():
         with gr.Column():
             markdown_out = gr.Markdown(
-                value="*Noch kein Ergebnis – bitte zuerst übersetzen.*",
+                value="*Noch kein Ergebnis - bitte zuerst uebersetzen.*",
                 visible=True,
             )
             bingo_out = gr.HTML(value="", visible=False)
 
+    # ── Leaderboard ───────────────────────────────────────────────────────────
+    with gr.Row():
+        with gr.Column():
+            lb_out = gr.HTML(value=_render_leaderboard())
+
     if not HF_TOKEN:
         gr.HTML("""
             <div style="background:#FFF4CE;border:1px solid #F9C642;border-left:4px solid #F9C642;
@@ -349,6 +457,7 @@ with gr.Blocks(title="LinkedIn Translator", css=CSS) as demo:
             <span>🧠 Llama 4 Maverick 17B</span>
             <span>🔄 Bidirektional</span>
             <span>🎯 Corporate Nonsense Score</span>
+            <span>🏆 Leaderboard</span>
         </div>
     """)
 
@@ -357,7 +466,7 @@ with gr.Blocks(title="LinkedIn Translator", css=CSS) as demo:
     translate_btn.click(
         fn=run_translate,
         inputs=[input_box, direction_state],
-        outputs=[output_box, markdown_out, bingo_out],
+        outputs=[output_box, markdown_out, bingo_out, lb_out],
     )
 
     def do_swap(direction, inp, out):