Update app.py

app.py

@@ -95,7 +95,6 @@ Antworte NUR mit dem verbesserten Post. Kein Vorwort, keine Erklärung."""
 # ── HF Dataset Persistenz ──────────────────────────────────────────────────────
 
 def _fetch_dataset() -> list:
-    """Laedt bestehende Einträge aus dem HF Dataset Repo."""
     if not DATASET_REPO or not HF_TOKEN:
         return []
     try:
@@ -113,13 +112,12 @@ def _fetch_dataset() -> list:
                     entries.append(json.loads(line))
         return entries
     except EntryNotFoundError:
-        return []   # Datei existiert noch nicht
+        return []
     except Exception:
         return []
 
 
 def _push_entry(entry: dict) -> str:
-    """Hängt einen neuen Eintrag an das JSONL im HF Dataset an. Gibt Fehler oder leer zurück."""
     if not DATASET_REPO or not HF_TOKEN:
         return ""
     try:
@@ -149,10 +147,9 @@ def _dataset_count() -> int:
 
 
 def _init_leaderboard():
-    """Beim Start: lokalen Cache immer frisch aus dem HF Dataset laden."""
     entries = _fetch_dataset()
     if not entries:
-        return  # kein Dataset konfiguriert oder noch leer
+        return
     lb = []
     for e in entries:
         metrics = e.get("metrics", [])
@@ -169,8 +166,7 @@ def _init_leaderboard():
     _save_lb(lb)
 
 
-
-# ── Lokales Leaderboard (schneller Cache für UI) ──────────────────────────────
+# ── Lokales Leaderboard ────────────────────────────────────────────────────────
 
 def _load_lb() -> list:
     try:
@@ -215,10 +211,10 @@ def _render_leaderboard() -> str:
     def entry_html(e, rank, side="worst"):
         pct = e["pct"]
         if side == "best":
-            color = "#1A5C34" if pct < 15 else "#27AE60" if pct < 70 else "#E67E22"
+            color = "#1A5C34" if pct < 20 else "#27AE60" if pct < 40 else "#E67E22"
         else:
             color = "#C0392B" if pct >= 70 else "#E67E22" if pct >= 50 else "#D4AC0D" if pct >= 30 else "#27AE60"
-        medal   = ["🥇","🥈","🥉"] [rank] if rank < 3 else f"{rank+1}."
+        medal   = ["🥇","🥈","🥉"][rank] if rank < 3 else f"{rank+1}."
         full    = e["text"].replace("<", "&lt;").replace(">", "&gt;")
         preview = full[:120] + ("..." if len(full) > 120 else "")
         has_more = len(e["text"]) > 120
@@ -274,11 +270,11 @@ def _render_leaderboard() -> str:
         </span>
         <div style="margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:4px;">
             {dataset_badge}
-            <button onclick="document.getElementById('hidden_sync_btn').click()" 
-                    style="background:transparent; border:1px solid #E0DFDC; color:#666; 
-                           font-size:.75rem; font-weight:600; padding:3px 10px; border-radius:99px; 
+            <button onclick="document.getElementById('hidden_sync_btn').click()"
+                    style="background:transparent; border:1px solid #E0DFDC; color:#666;
+                           font-size:.75rem; font-weight:600; padding:3px 10px; border-radius:99px;
                            cursor:pointer;"
-                    onmouseover="this.style.background='#EBF3FB'; this.style.color='#0A66C2';" 
+                    onmouseover="this.style.background='#EBF3FB'; this.style.color='#0A66C2';"
                     onmouseout="this.style.background='transparent'; this.style.color='#666';">
               🔄 Aktualisieren
             </button>
@@ -302,11 +298,12 @@ def _render_leaderboard() -> str:
       </div>
     </div>"""
 
+
 def force_sync_and_render():
-    """Zieht die aktuellsten Daten aus dem HF Dataset und rendert das Leaderboard neu."""
     _init_leaderboard()
     return _render_leaderboard()
 
+
 # ── Leaderboard beim Start initialisieren ─────────────────────────────────────
 _init_leaderboard()
 
@@ -369,10 +366,8 @@ def get_bingo(text):
             max_s   = len(metrics) * 10
             verdict = data.get("verdict", "")
 
-            # Lokales Leaderboard
             _add_to_lb(text, total, max_s, verdict)
 
-            # HF Dataset (async best-effort)
             entry = {
                 "timestamp":    datetime.datetime.now(datetime.timezone.utc).isoformat(),
                 "post_text":    text,
@@ -392,21 +387,20 @@ def get_bingo(text):
     return (f"<p style='color:#c00;font-size:.85rem;padding:8px;'>Analyse fehlgeschlagen: {last_err}</p>",
             _render_leaderboard())
 
+
 def generate_tuned_post(original_text, ton, substanz, laenge, zielgruppe, cta):
     if not original_text.strip() or not HF_TOKEN:
-        return "Bitte zuerst einen Post analysieren."
-    
+        return "Bitte zuerst einen Post eingeben."
     prompt = PROMPT_AI_TUNING.format(zielgruppe=zielgruppe, cta=cta)
     user_msg = f"""ORIGINAL POST:
 {original_text}
 
 TUNING:
 - Ton: {ton}/100 (0=Business Pro, 100=Dynamisch & Bold)
-- Substanz: {substanz}/100 (0=Storytelling, 100=Fakten & Insights)  
+- Substanz: {substanz}/100 (0=Storytelling, 100=Fakten & Insights)
 - Länge: {laenge}/100 (0=Kurz, 100=Ausführlich)
 - Zielgruppe: {zielgruppe}
 - Call to Action: {cta}"""
-    
     try:
         return _call_llm(prompt, user_msg, max_tokens=800)
     except Exception as e:
@@ -466,11 +460,12 @@ def _render_bingo(data):
         💬 <strong style="font-style:normal;">Urteil:</strong> {verdict}
       </div>
       <div style="margin-top:14px;display:flex;justify-content:flex-end;">
-        <button onclick="
-          var panel = document.getElementById('tuning_toggle_btn');
-          if(panel) panel.click();
-        " style="background:#004182;color:#fff;border:none;border-radius:22px;
-                 padding:8px 20px;font-size:.82rem;font-weight:700;cursor:pointer;">
+        <button onclick="document.getElementById('tuning_toggle_btn').click()"
+                style="background:#004182;color:#fff;border:none;border-radius:22px;
+                       padding:8px 20px;font-size:.82rem;font-weight:700;cursor:pointer;
+                       transition:background .15s;"
+                onmouseover="this.style.background='#0A66C2';"
+                onmouseout="this.style.background='#004182';">
           ✨ AI Tuning
         </button>
       </div>
@@ -560,28 +555,24 @@ button.secondary:hover { background:var(--li-blue-light) !important; }
     font-size:.74rem; color:var(--li-muted); border-top:1px solid var(--li-border);
     padding-top:10px; margin-top:8px; display:flex; gap:20px; flex-wrap:wrap; justify-content:center;
 }
-.tiny-sync {
-    min-width: fit-content !important;
-    width: fit-content !important;
-    margin-left: auto !important; 
-    margin-bottom: -15px !important; 
-    z-index: 10;
-}
-.tiny-sync button {
-    background: transparent !important;
-    border: 1px solid var(--li-border) !important;
-    color: var(--li-muted) !important;
-    font-size: 0.75rem !important;
-    padding: 4px 12px !important;
-    box-shadow: none !important;
-    border-radius: 99px !important;
+.tuning-card {
+    background: #fff !important;
+    border: 1px solid #E0DFDC !important;
+    border-radius: 12px !important;
+    padding: 22px 26px !important;
+    margin-top: 4px !important;
+    box-shadow: 0 2px 12px rgba(0,0,0,.07) !important;
 }
-.tiny-sync button:hover {
-    background: var(--li-blue-light) !important;
-    color: var(--li-blue-dark) !important;
-    border-color: var(--li-blue-mid) !important;
+.tuning-card .tuning-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 20px;
+    padding-bottom: 14px;
+    border-bottom: 1px solid #E0DFDC;
 }
 #hidden_sync_btn { display: none !important; }
+#tuning_toggle_btn { display: none !important; }
 """
 
 # ── UI ─────────────────────────────────────────────────────────────────────────
@@ -622,20 +613,21 @@ with gr.Blocks(title="LinkedIn Translator") as demo:
             markdown_out = gr.Markdown(value="*Noch kein Ergebnis - bitte zuerst übersetzen.*", visible=True)
             bingo_out    = gr.HTML(value="", visible=False)
 
-    # ── AI Tuning Panel ──────────────────────────────────────────────────────
+    # ── AI Tuning Panel ───────────────────────────────────────────────────────
+    tuning_toggle_btn = gr.Button("toggle", elem_id="tuning_toggle_btn", visible=False)
+
     with gr.Row():
         with gr.Column():
-            tuning_panel = gr.Column(visible=False)
-            tuning_toggle_btn = gr.Button("toggle", elem_id="tuning_toggle_btn", visible=False)
+            tuning_panel = gr.Column(visible=False, elem_classes=["tuning-card"])
             with tuning_panel:
                 gr.HTML("""
-                    <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;">
+                    <div class="tuning-header">
                         <span style="font-size:1.3rem;">✨</span>
                         <span style="font-weight:700;font-size:.95rem;color:#004182;
                                      text-transform:uppercase;letter-spacing:.5px;">AI Post Tuning</span>
-                      </div>
+                        <span style="font-size:.78rem;color:#888;margin-left:8px;">
+                            Optimiere deinen Post gezielt für dein Ziel
+                        </span>
                     </div>
                 """)
                 with gr.Row():
@@ -666,16 +658,17 @@ with gr.Blocks(title="LinkedIn Translator") as demo:
                             value="Kommentare & Dialog",
                             label="⚡ Call to Action"
                         )
+                        gr.HTML("<div style='height:8px'></div>")
                         tuning_btn = gr.Button("✨ Post optimieren", variant="primary")
-                
+
                 tuning_out = gr.Textbox(
                     label="💡 Optimierter Post",
                     lines=10,
                     interactive=True,
-                    placeholder="Der optimierte Post erscheint hier..."
+                    placeholder="Der optimierte Post erscheint hier – direkt kopierbar und editierbar."
                 )
-            
 
+    # ── Leaderboard ───────────────────────────────────────────────────────────
     with gr.Row():
         with gr.Column():
             lb_out = gr.HTML(value=_render_leaderboard())
@@ -701,11 +694,14 @@ with gr.Blocks(title="LinkedIn Translator") as demo:
             <span>🧠 Llama 4 Maverick 17B</span>
             <span>🔄 Bidirektional</span>
             <span>🎯 Corporate Nonsense Score</span>
+            <span>✨ AI Tuning</span>
             <span>🏆 Leaderboard</span>
             <span>🤗 Auto-Dataset</span>
         </div>
     """)
 
+    # ── Event Handler ─────────────────────────────────────────────────────────
+
     translate_btn.click(
         fn=run_translate,
         inputs=[input_box, direction_state],
@@ -714,12 +710,14 @@ with gr.Blocks(title="LinkedIn Translator") as demo:
 
     def do_swap(direction, inp, out):
         new_dir, new_inp, new_out, lbl_in, lbl_out, btn_txt = swap_direction(direction, inp, out)
-        banner = ('<div class="direction-banner">Modus: '
+        banner = ('<div class="direction-banner">'
                   + lbl_in.split("  ", 1)[1] + " &rarr; " + lbl_out.split("  ", 1)[1] + "</div>")
         if new_dir == "to_linkedin":
-            md_upd, bingo_upd = gr.update(value="*Noch kein Ergebnis.*", visible=True), gr.update(value="", visible=False)
+            md_upd    = gr.update(value="*Noch kein Ergebnis.*", visible=True)
+            bingo_upd = gr.update(value="", visible=False)
         else:
-            md_upd, bingo_upd = gr.update(value="", visible=False), gr.update(value="", visible=True)
+            md_upd    = gr.update(value="", visible=False)
+            bingo_upd = gr.update(value="", visible=True)
         return (new_dir, gr.update(value=new_inp, label=lbl_in),
                 gr.update(value=new_out, label=lbl_out),
                 gr.update(value=btn_txt), banner, md_upd, bingo_upd)
@@ -731,25 +729,21 @@ with gr.Blocks(title="LinkedIn Translator") as demo:
     )
 
     hidden_sync_btn.click(
-            fn=force_sync_and_render,
-            inputs=[],
-            outputs=[lb_out]
-        )
+        fn=force_sync_and_render,
+        inputs=[],
+        outputs=[lb_out]
+    )
 
-    # Tuning panel toggle
-    def toggle_tuning(current_text):
-        return gr.update(visible=True)
-    
     tuning_toggle_btn.click(
-        fn=toggle_tuning,
-        inputs=[input_box],
+        fn=lambda: gr.update(visible=True),
+        inputs=[],
         outputs=[tuning_panel]
     )
 
-    # Post optimieren
     tuning_btn.click(
         fn=generate_tuned_post,
         inputs=[input_box, slider_ton, slider_substanz, slider_laenge, dd_zielgruppe, dd_cta],
         outputs=[tuning_out]
     )
+
 demo.launch(css=CSS)