Update app.py

app.py

@@ -1,4 +1,5 @@
 import os
+import json
 import gradio as gr
 from huggingface_hub import InferenceClient
 
@@ -8,74 +9,155 @@ MODEL_ID  = "meta-llama/Llama-4-Maverick-17B-128E-Instruct-FP8"
 
 # ── System Prompts ─────────────────────────────────────────────────────────────
 
-PROMPT_TO_LINKEDIN = """Du bist ein LinkedIn-Influencer-Generator. Deine einzige Aufgabe ist es, banale, alltägliche Aussagen in absurd ausschweifende, klischeebeladene LinkedIn-Posts zu verwandeln.
+PROMPT_TO_LINKEDIN = """Du bist ein LinkedIn-Influencer-Generator. Deine einzige Aufgabe ist es, banale, alltaegliche Aussagen in absurd ausschweifende, klischeebeladene LinkedIn-Posts zu verwandeln.
 
 Regeln:
 - Alles ist eine "Journey", ein "Gamechanger" oder eine "powerful lesson"
 - Nutze mindestens 3 Emojis strategisch
-- Erwähne "Growth", "Mindset", "Passion" oder "Impact" wo immer möglich
-- Füge eine persönliche Anekdote hinzu, die niemand braucht
+- Erwaehne "Growth", "Mindset", "Passion" oder "Impact" wo immer moeglich
+- Fuege eine persoenliche Anekdote hinzu, die niemand braucht
 - Endet mit einer rhetorischen Frage an die Community
-- Benutze dramatische Zeilenumbrüche für Effekt
+- Benutze dramatische Zeilenumbrueche fuer Effekt
 - Alles ist ausnahmslos positiv, auch wenn das Original negativ ist
 - Hashtags am Ende sind Pflicht (mindestens 5)
-- Klingt wie jemand, der gerade ein Buch über sich selbst schreiben würde
-- Formatiere mit Markdown: Eröffnungssatz als ## Überschrift, Schlüsselbegriffe wie **Gamechanger**, **Growth**, **Mindset**, **Journey** fett hervorheben, Abschnitte mit Leerzeilen trennen
+- Klingt wie jemand, der gerade ein Buch ueber sich selbst schreiben wuerde
+- Formatiere mit Markdown: Eroeffnungssatz als ## Ueberschrift, Schluesselbegriffe wie **Gamechanger**, **Growth**, **Mindset**, **Journey** fett hervorheben, Abschnitte mit Leerzeilen trennen
 
-Antworte NUR mit dem LinkedIn-Post in Markdown. Kein Vorwort, keine Erklärung."""
+Antworte NUR mit dem LinkedIn-Post in Markdown. Kein Vorwort, keine Erklaerung."""
 
 PROMPT_FROM_LINKEDIN = """Du bist ein gnadenloser semantischer Reduzierer. Du hasst Floskeln. Deine Aufgabe: LinkedIn-Texte auf das absolute, brutalste Minimum eindampfen.
 
 Regeln:
 - EIN Satz. Nicht zwei. Einer.
-- Kürze bis es wehtut. Dann nochmal kürzen.
+- Kuerze bis es wehtut. Dann nochmal kuerzen.
 - Null Emotion, null Wertung, null Kontext der niemanden interessiert
-- Streiche alles was keine neue Information trägt: kein "Ich bin dankbar", kein "Diese Erfahrung hat mich gelehrt", kein "Lasst mich das erklären"
-- Wenn der gesamte Post nur bedeutet "Ich hab heute Kaffee getrunken" – schreib genau das
-- Maximal 15 Wörter
+- Streiche alles was keine neue Information traegt
+- Wenn der gesamte Post nur bedeutet "Ich hab heute Kaffee getrunken" schreib genau das
+- Maximal 15 Woerter
 
-Antworte NUR mit diesem einen Satz. Kein Punkt dahinter wenn er zu selbstgefällig wirkt."""
+Antworte NUR mit diesem einen Satz. Kein Vorwort, keine Erklaerung."""
 
+PROMPT_BINGO = """Du bist ein sarkastischer LinkedIn-Prosa-Analytiker. Bewerte den folgenden LinkedIn-Post anhand von 5 Metriken.
 
-# ── LLM-Call ──────────────────────────────────────────────────────────────────
+Antworte AUSSCHLIESSLICH mit einem validen JSON-Objekt. Kein Markdown, keine Backticks, keine Erklärung davor oder danach. Nur das rohe JSON.
 
-def translate(text: str, direction: str) -> str:
+Format:
+{"metrics":[{"icon":"X","label":"Y","score":N,"comment":"Z"},...], "verdict":"..."}
+
+Verwende diese 5 Metriken in dieser Reihenfolge:
+1. icon="Buzzword-Dichte" label="Buzzword-Dichte" - Wie viele inhaltsleere Modebegriffe?
+2. icon="Laenge vs. Inhalt" label="Laenge vs. Inhalt" - Wie viel Laenge fuer wie wenig Aussage?
+3. icon="Selbstbeweihraeuche" label="Selbstbeweihraeuche" - Wie sehr dreht sich alles um den Autor?
+4. icon="Hashtag-Overload" label="Hashtag-Overload" - Hashtag-Dichte und Sinnlosigkeit
+5. icon="Sinnlosigkeits-Index" label="Sinnlosigkeits-Index" - Koennte man den Post loeschen ohne Informationsverlust?
+
+score ist ein Integer von 1-10. 10 = maximaler LinkedIn-Exzess.
+comment ist max. 6 Woerter, sarkastisch.
+verdict ist ein einziger vernichtender Satz, max. 12 Woerter."""
+
+
+# ── LLM-Calls ─────────────────────────────────────────────────────────────────
+
+def _call_llm(system, user, max_tokens=1024):
+    client = InferenceClient(provider="novita", api_key=HF_TOKEN)
+    resp = client.chat.completions.create(
+        model=MODEL_ID,
+        messages=[{"role": "system", "content": system},
+                  {"role": "user",   "content": user}],
+        max_tokens=max_tokens,
+    )
+    return resp.choices[0].message.content.strip()
+
+
+def translate(text, direction):
     if not text.strip():
         return ""
     if not HF_TOKEN:
-        return "⚠️ Kein HF_TOKEN gefunden. Bitte in den Space-Settings als Secret hinterlegen."
-
-    system_prompt = PROMPT_TO_LINKEDIN if direction == "to_linkedin" else PROMPT_FROM_LINKEDIN
-
+        return "Kein HF_TOKEN gefunden."
+    prompt = PROMPT_TO_LINKEDIN if direction == "to_linkedin" else PROMPT_FROM_LINKEDIN
     try:
-        client = InferenceClient(provider="novita", api_key=HF_TOKEN)
-        response = client.chat.completions.create(
-            model=MODEL_ID,
-            messages=[
-                {"role": "system",  "content": system_prompt},
-                {"role": "user",    "content": text},
-            ],
-            max_tokens=1024,
-        )
-        return response.choices[0].message.content.strip()
+        return _call_llm(prompt, text)
     except Exception as e:
-        return f"⚠️ Fehler: {e}"
-
+        return f"Fehler: {e}"
 
-# ── State & Handler ────────────────────────────────────────────────────────────
 
-# direction: "to_linkedin"  → Normal → LinkedIn
-#            "from_linkedin" → LinkedIn → Normal
-
-def swap_direction(current_dir, input_text, output_text):
-    """Tauscht Richtung und Felder."""
-    new_dir = "from_linkedin" if current_dir == "to_linkedin" else "to_linkedin"
-    return (
-        new_dir,
-        output_text,   # altes Output wird neuer Input
-        input_text,    # alter Input wird neues Output
-        *_labels(new_dir),
-    )
+def get_bingo(text):
+    if not text.strip() or not HF_TOKEN:
+        return ""
+    try:
+        raw   = _call_llm(PROMPT_BINGO, text, max_tokens=512)
+        start = raw.find("{")
+        end   = raw.rfind("}") + 1
+        data  = json.loads(raw[start:end])
+        return _render_bingo(data)
+    except Exception as e:
+        return f"<p style='color:#c00'>Analyse fehlgeschlagen: {e}</p>"
+
+
+def _render_bingo(data):
+    metrics = data.get("metrics", [])
+    verdict = data.get("verdict", "")
+
+    ICONS = {
+        "Buzzword-Dichte":      "🗣️",
+        "Länge vs. Inhalt":    "📏",
+        "Selbstbeweihräuche":  "🪞",
+        "Hashtag-Overload":     "#️⃣",
+        "Sinnlosigkeits-Index": "🌀",
+    }
+
+    def bar_color(s):
+        if s >= 8: return "#C0392B"
+        if s >= 5: return "#E67E22"
+        return "#27AE60"
+
+    rows = ""
+    for m in metrics:
+        score = int(m.get("score", 0))
+        label = m.get("label", m.get("icon", ""))
+        icon  = ICONS.get(label, m.get("icon", ""))
+        color = bar_color(score)
+        pct   = score * 10
+        rows += f"""
+        <div style="margin-bottom:14px;">
+          <div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;">
+            <span style="font-size:.88rem;font-weight:600;color:#191919;">{icon} {label}</span>
+            <span style="font-size:.78rem;color:#888;font-style:italic;margin:0 8px;">{m.get('comment','')}</span>
+            <span style="font-size:1.05rem;font-weight:700;color:{color};min-width:24px;text-align:right;">{score}</span>
+          </div>
+          <div style="background:#E0DFDC;border-radius:99px;height:9px;overflow:hidden;">
+            <div style="width:{pct}%;background:{color};height:100%;border-radius:99px;"></div>
+          </div>
+        </div>"""
+
+    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);">
+      <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;">Corporate Nonsense Score</span>
+        <span style="margin-left:auto;background:{badge_color};color:#fff;
+                     border-radius:99px;padding:4px 14px;font-size:.85rem;font-weight:700;">
+          {total}&thinsp;/&thinsp;{max_score} &nbsp;&middot;&nbsp; {total_pct}%
+        </span>
+      </div>
+      {rows}
+      <div style="margin-top:18px;padding-top:14px;border-top:1px solid #E0DFDC;
+                  font-size:.88rem;color:#444;font-style:italic;line-height:1.6;">
+        💬 <strong style="font-style:normal;">Urteil:</strong> {verdict}
+      </div>
+    </div>"""
+
+
+# ── Labels & Swap ────────────────────────────────────────────────────────��─────
 
 def _labels(direction):
     if direction == "to_linkedin":
@@ -83,9 +165,21 @@ def _labels(direction):
     else:
         return "💼  LinkedIn Speech", "✍️  Normale Aussage", "🔄  →  Entbuzzen"
 
+
+def swap_direction(current_dir, inp, out):
+    new_dir = "from_linkedin" if current_dir == "to_linkedin" else "to_linkedin"
+    return new_dir, out, inp, *_labels(new_dir)
+
+
+# ── Haupt-Handler ──────────────────────────────────────────────────────────────
+
 def run_translate(text, direction):
     result = translate(text, direction)
-    return result, result
+    if direction == "to_linkedin":
+        return result, gr.update(value=result, visible=True), gr.update(value="", visible=False)
+    else:
+        bingo_html = get_bingo(text)
+        return result, gr.update(value="", visible=False), gr.update(value=bingo_html, visible=True)
 
 
 # ── CSS ───────────────────────────────────────────────────────────────────────
@@ -102,12 +196,10 @@ CSS = """
     --li-muted:       #666666;
     --li-border:      #E0DFDC;
 }
-
 body, .gradio-container {
     background: var(--li-bg) !important;
     font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
 }
-
 .li-header {
     background: linear-gradient(135deg, var(--li-blue-dark) 0%, var(--li-blue) 70%, var(--li-blue-mid) 100%);
     border-radius: 12px;
@@ -122,89 +214,41 @@ body, .gradio-container {
 .li-header h1   { margin: 0 !important; font-size: 1.65rem !important; font-weight: 700 !important; color: #fff !important; }
 .li-header p    { margin: 4px 0 0 !important; font-size: .86rem !important; color: rgba(255,255,255,.88) !important; }
 .li-header .badge {
-    margin-left: auto;
-    background: rgba(255,255,255,.18);
-    border-radius: 20px;
-    padding: 5px 14px;
-    font-size: .74rem;
-    font-weight: 600;
-    letter-spacing: .4px;
-    color: #fff;
-    white-space: nowrap;
+    margin-left: auto; background: rgba(255,255,255,.18); border-radius: 20px;
+    padding: 5px 14px; font-size: .74rem; font-weight: 600; letter-spacing: .4px; color: #fff; white-space: nowrap;
 }
-
 .direction-banner {
-    text-align: center;
-    font-size: .8rem;
-    font-weight: 700;
-    letter-spacing: .6px;
-    text-transform: uppercase;
-    color: var(--li-blue-dark);
-    margin-bottom: 6px;
+    text-align: center; font-size: .8rem; font-weight: 700; letter-spacing: .6px;
+    text-transform: uppercase; color: var(--li-blue-dark); margin-bottom: 6px;
 }
-
 label > span {
-    font-weight: 600 !important;
-    font-size: .76rem !important;
-    text-transform: uppercase !important;
-    letter-spacing: .5px !important;
-    color: var(--li-blue-dark) !important;
+    font-weight: 600 !important; font-size: .76rem !important; text-transform: uppercase !important;
+    letter-spacing: .5px !important; color: var(--li-blue-dark) !important;
 }
-
 textarea {
-    font-size: .9rem !important;
-    line-height: 1.7 !important;
-    border-color: var(--li-border) !important;
-    border-radius: 8px !important;
-    background: var(--li-card) !important;
-    color: var(--li-text) !important;
-    resize: vertical !important;
+    font-size: .9rem !important; line-height: 1.7 !important; border-color: var(--li-border) !important;
+    border-radius: 8px !important; background: var(--li-card) !important;
+    color: var(--li-text) !important; resize: vertical !important;
 }
 textarea:focus {
     border-color: var(--li-blue) !important;
-    box-shadow: 0 0 0 2px var(--li-blue-light) !important;
-    outline: none !important;
+    box-shadow: 0 0 0 2px var(--li-blue-light) !important; outline: none !important;
 }
-
 button.primary {
-    background: var(--li-blue) !important;
-    border-radius: 22px !important;
-    border: none !important;
-    font-weight: 700 !important;
-    font-size: 1rem !important;
-    padding: 10px 32px !important;
-    box-shadow: 0 2px 10px rgba(10,102,194,.35) !important;
-    transition: background .15s, box-shadow .15s !important;
-}
-button.primary:hover {
-    background: var(--li-blue-dark) !important;
-    box-shadow: 0 4px 18px rgba(10,102,194,.45) !important;
+    background: var(--li-blue) !important; border-radius: 22px !important; border: none !important;
+    font-weight: 700 !important; font-size: 1rem !important; padding: 10px 32px !important;
+    box-shadow: 0 2px 10px rgba(10,102,194,.35) !important; transition: background .15s, box-shadow .15s !important;
 }
-
+button.primary:hover { background: var(--li-blue-dark) !important; box-shadow: 0 4px 18px rgba(10,102,194,.45) !important; }
 button.secondary {
-    background: var(--li-card) !important;
-    color: var(--li-blue) !important;
-    border: 2px solid var(--li-blue) !important;
-    border-radius: 22px !important;
-    font-weight: 700 !important;
-    font-size: 1rem !important;
-    padding: 10px 28px !important;
-    transition: all .15s !important;
-}
-button.secondary:hover {
-    background: var(--li-blue-light) !important;
+    background: var(--li-card) !important; color: var(--li-blue) !important;
+    border: 2px solid var(--li-blue) !important; border-radius: 22px !important;
+    font-weight: 700 !important; font-size: 1rem !important; padding: 10px 28px !important; transition: all .15s !important;
 }
-
+button.secondary:hover { background: var(--li-blue-light) !important; }
 .li-footer {
-    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;
+    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;
 }
 """
 
@@ -218,14 +262,14 @@ with gr.Blocks(title="LinkedIn Translator", css=CSS) as demo:
         <div class="li-header">
             <div>
                 <h1>LinkedIn Translator</h1>
-                <p>Banale Wahrheit ↔ Epische LinkedIn-Prosa &nbsp;·&nbsp; powered by Llama 4</p>
+                <p>Banale Wahrheit &harr; Epische LinkedIn-Prosa &nbsp;&middot;&nbsp; powered by Llama 4</p>
             </div>
-            <div class="badge">✨ AI-Powered</div>
+            <div class="badge">&#10024; AI-Powered</div>
         </div>
     """)
 
     dir_label = gr.HTML(
-        '<div class="direction-banner">Modus: Normale Sprache → LinkedIn Speech</div>'
+        '<div class="direction-banner">Modus: Normale Sprache &rarr; LinkedIn Speech</div>'
     )
 
     with gr.Row(equal_height=True):
@@ -237,10 +281,9 @@ 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("Übersetzen", variant="primary", size="lg")
             gr.HTML("<div style='height:12px'></div>")
-            swap_btn = gr.Button("🔄  →  LinkedIn", variant="secondary", size="sm",
-                                 elem_id="swap_btn")
+            swap_btn = gr.Button("🔄  →  LinkedIn", variant="secondary", size="sm")
         with gr.Column(scale=5):
             output_box = gr.Textbox(
                 label="💼  LinkedIn Speech",
@@ -249,21 +292,20 @@ with gr.Blocks(title="LinkedIn Translator", css=CSS) as demo:
                 interactive=False,
             )
 
-    # ── Markdown-Vorschau ──────────────────────────────────────────────────────
     with gr.Row():
         with gr.Column():
-            gr.HTML('<div style="font-weight:700;font-size:.76rem;text-transform:uppercase;letter-spacing:.5px;color:#004182;margin-bottom:4px;">📋&nbsp; Gerenderte Vorschau</div>')
             markdown_out = gr.Markdown(
                 value="*Noch kein Ergebnis – bitte zuerst übersetzen.*",
-                elem_id="md_preview",
+                visible=True,
             )
+            bingo_out = gr.HTML(value="", visible=False)
 
     if not HF_TOKEN:
         gr.HTML("""
             <div style="background:#FFF4CE;border:1px solid #F9C642;border-left:4px solid #F9C642;
                         border-radius:6px;padding:10px 14px;font-size:.85rem;color:#7A5800;margin-top:8px;">
-                <strong>⚠️ Kein HF_TOKEN gefunden.</strong>
-                Füge ihn unter <em>Settings → Variables and secrets</em> als <code>HF_TOKEN</code> hinzu.
+                <strong>Kein HF_TOKEN gefunden.</strong>
+                Unter <em>Settings &rarr; Variables and secrets</em> als <code>HF_TOKEN</code> hinzufuegen.
             </div>
         """)
 
@@ -271,33 +313,44 @@ with gr.Blocks(title="LinkedIn Translator", css=CSS) as demo:
         <div class="li-footer">
             <span>🧠 Llama 4 Maverick 17B</span>
             <span>🔄 Bidirektional</span>
-            <span>💡 Ironie inklusive</span>
+            <span>🎯 Corporate Nonsense Score</span>
         </div>
     """)
 
-    # ── Event-Handler ──────────────────────────────────────────────────────────
+    # ── Events ────────────────────────────────────────────────────────────────
 
     translate_btn.click(
         fn=run_translate,
         inputs=[input_box, direction_state],
-        outputs=[output_box, markdown_out],
+        outputs=[output_box, markdown_out, bingo_out],
     )
 
     def do_swap(direction, inp, out):
         new_dir, new_inp, new_out, lbl_in, lbl_out, btn_txt = swap_direction(direction, inp, out)
-        banner = f'<div class="direction-banner">Modus: {lbl_in.split("  ", 1)[1]} → {lbl_out.split("  ", 1)[1]}</div>'
-        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,
+        banner = (
+            '<div class="direction-banner">Modus: '
+            + lbl_in.split("  ", 1)[1]
+            + " &rarr; "
+            + lbl_out.split("  ", 1)[1]
+            + "</div>"
         )
+        if new_dir == "to_linkedin":
+            md_upd    = gr.update(value="*Noch kein Ergebnis.*", visible=True)
+            bingo_upd = gr.update(value="", visible=False)
+        else:
+            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)
 
     swap_btn.click(
         fn=do_swap,
         inputs=[direction_state, input_box, output_box],
-        outputs=[direction_state, input_box, output_box, swap_btn, dir_label],
+        outputs=[direction_state, input_box, output_box, swap_btn, dir_label,
+                 markdown_out, bingo_out],
     )
 
 demo.launch()