Create app.py

app.py

@@ -0,0 +1,292 @@
+import os
+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"
+
+# ── 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.
+
+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
+- Endet mit einer rhetorischen Frage an die Community
+- Benutze dramatische Zeilenumbrüche für 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
+
+Antworte NUR mit dem LinkedIn-Post. Kein Vorwort, keine Erklärung."""
+
+PROMPT_FROM_LINKEDIN = """Du bist ein semantischer Reduzierer. Deine Aufgabe ist es, aufgeblasene LinkedIn-Texte auf den absolut nüchternen, semantisch einzig relevanten Kern zu reduzieren.
+
+Regeln:
+- Entferne ALLE Buzzwords, Emojis, Hashtags und Floskeln
+- Ein Satz. Maximal zwei.
+- Keine Wertung, keine Emotion, reiner Informationsgehalt
+- Kein "Ich freue mich", kein "Excited", kein "Honored" – was ist das Faktum?
+- Schreibe wie ein Pressemitteilungs-Minimalist
+
+Antworte NUR mit dem reduzierten Satz. Kein Vorwort, keine Erklärung."""
+
+
+# ── LLM-Call ──────────────────────────────────────────────────────────────────
+
+def translate(text: str, direction: str) -> str:
+    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
+
+    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()
+    except Exception as 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 _labels(direction):
+    if direction == "to_linkedin":
+        return "✍️  Normale Aussage", "💼  LinkedIn Speech", "🔄  →  LinkedIn"
+    else:
+        return "💼  LinkedIn Speech", "✍️  Normale Aussage", "🔄  →  Entbuzzen"
+
+def run_translate(text, direction):
+    return translate(text, direction)
+
+
+# ── CSS ───────────────────────────────────────────────────────────────────────
+
+CSS = """
+:root {
+    --li-blue:        #0A66C2;
+    --li-blue-dark:   #004182;
+    --li-blue-light:  #EBF3FB;
+    --li-blue-mid:    #70B5F9;
+    --li-bg:          #F3F2EF;
+    --li-card:        #FFFFFF;
+    --li-text:        #191919;
+    --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;
+    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; }
+.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;
+}
+
+.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;
+}
+
+label > span {
+    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;
+}
+textarea:focus {
+    border-color: var(--li-blue) !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;
+}
+
+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;
+}
+
+.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;
+}
+"""
+
+# ── UI ─────────────────────────────────────────────────────────────────────────
+
+with gr.Blocks(title="LinkedIn Translator", css=CSS) as demo:
+
+    direction_state = gr.State("to_linkedin")
+
+    gr.HTML("""
+        <div class="li-header">
+            <div class="icon">💼</div>
+            <div>
+                <h1>LinkedIn Translator</h1>
+                <p>Banale Wahrheit ↔ Epische LinkedIn-Prosa &nbsp;·&nbsp; powered by Llama 4</p>
+            </div>
+            <div class="badge">✨ AI-Powered</div>
+        </div>
+    """)
+
+    dir_label = gr.HTML(
+        '<div class="direction-banner">Modus: Normale Sprache → LinkedIn Speech</div>'
+    )
+
+    with gr.Row(equal_height=True):
+        with gr.Column(scale=5):
+            input_box = gr.Textbox(
+                label="✍️  Normale Aussage",
+                placeholder="z.B. „Ich hab heute meinen Kaffee verschüttet."",
+                lines=10,
+            )
+        with gr.Column(scale=1, min_width=120):
+            gr.HTML("<div style='height:40px'></div>")
+            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")
+        with gr.Column(scale=5):
+            output_box = gr.Textbox(
+                label="💼  LinkedIn Speech",
+                placeholder="Die transformierte Version erscheint hier ...",
+                lines=10,
+                interactive=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.
+            </div>
+        """)
+
+    gr.HTML("""
+        <div class="li-footer">
+            <span>🧠 Llama 4 Maverick 17B</span>
+            <span>🔄 Bidirektional</span>
+            <span>💡 Ironie inklusive</span>
+        </div>
+    """)
+
+    # ── Event-Handler ───────────���──────────────────────────────────────────────
+
+    translate_btn.click(
+        fn=run_translate,
+        inputs=[input_box, direction_state],
+        outputs=[output_box],
+    )
+
+    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,
+        )
+
+    swap_btn.click(
+        fn=do_swap,
+        inputs=[direction_state, input_box, output_box],
+        outputs=[direction_state, input_box, output_box, swap_btn, dir_label],
+    )
+
+demo.launch()