Update app.py

app.py

@@ -14,21 +14,22 @@ geiles_design = """
 @import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
 
 body, .gradio-container { 
-    /* Lädt das Bild DIREKT von deinem eigenen Hugging Face Space! */
-    background-image: url('file/image.png') !important;
+    /* Düsteres Apokalypse-Hintergrundbild aus dem Netz */
+    background-image: url('https://images.unsplash.com/photo-1485603099951-40344d18721c?q=80&w=2000&auto=format&fit=crop') !important;
     background-size: cover !important;
     background-position: center !important;
     background-attachment: fixed !important;
     font-family: sans-serif;
 }
 
+/* Der Hauptbereich wird schwarz und leicht durchsichtig */
 .haupt-bereich {
     background: rgba(0, 0, 0, 0.7) !important; 
     border-radius: 10px;
     padding: 20px !important;
     max-width: 800px !important;
     margin: 0 auto !important;
-    backdrop-filter: blur(2px);
+    backdrop-filter: blur(3px); /* Macht das Hintergrundbild leicht unscharf */
     border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
@@ -46,47 +47,25 @@ h1 { color: #d4af37 !important; text-align: center; text-transform: uppercase; f
     font-weight: bold;
 }
 
-/* Rahmen für das generierte Bild */
-.output-bild { border: 2px solid #555 !important; border-radius: 3px !important; box-shadow: 0 5px 15px rgba(0,0,0,0.9) !important;}
-
-/* --- Das Logbuch --- */
-/* Dies ist der Container für den Chat-Verlauf, der wie ein Stapel Notizen aussieht */
-.logbuch-stapel { 
-    margin: 20px 0 !important;
-    height: 400px !important;
-    overflow-y: scroll !important; /* Scrollen, wenn der Stapel zu lang wird */
-}
-
-/* Jeder Eintrag (dein Text ODER der KI-Text) wird zu einem eigenen Notizzettel */
-.notizzettel-eintrag { 
-    background: #e3dec6 !important; 
+/* Der Notizzettel für die Story! */
+.notizzettel { 
+    background: #e3dec6 !important; /* Schmutzige Papier-Farbe */
     color: #1a1a1a !important; 
-    font-family: 'Special Elite', monospace !important; 
+    font-family: 'Special Elite', monospace !important; /* Echte Schreibmaschinen-Schrift */
     font-size: 1.3em !important; 
     line-height: 1.6 !important; 
-    padding: 15px !important; 
+    padding: 25px !important; 
     border-radius: 2px !important;
-    box-shadow: 2px 2px 10px rgba(0,0,0,0.8) !important;
-    margin-bottom: -15px !important; /* Stapelungseffekt */
-    position: relative !important;
-    border-left: 4px solid #8b0000 !important;
-}
-
-/* Deine Notizen sind links */
-.user-notiz { 
-    transform: rotate(0.5deg);
-    margin-right: 15% !important;
-    border-left-color: #d4af37 !important;
-    opacity: 0.9;
+    box-shadow: 3px 3px 15px rgba(0,0,0,0.8) !important;
+    transform: rotate(-1deg); /* Leichte Drehung für den echten Zettel-Look */
+    margin: 20px 5px !important;
+    border-left: 4px solid #8b0000 !important; /* Roter Rand */
 }
 
-/* Die Notizen der KI sind rechts */
-.ai-notiz { 
-    transform: rotate(-0.5deg);
-    margin-left: 15% !important;
-}
+/* Rahmen für das generierte Bild */
+.output-bild { border: 2px solid #555 !important; border-radius: 3px !important; box-shadow: 0 5px 15px rgba(0,0,0,0.9) !important;}
 
-/* --- Eingabe --- */
+/* Eingabefeld durchsichtig machen */
 input, textarea { 
     background: rgba(0, 0, 0, 0.6) !important; 
     color: #fff !important; 
@@ -95,6 +74,7 @@ input, textarea {
     border-radius: 5px !important;
 }
 
+/* Aggressiver Action-Button */
 button { 
     background: #8b0000 !important; 
     color: #fff !important; 
@@ -109,40 +89,22 @@ button {
 button:hover { background: #aa0000 !important; }
 """
 
-# Eine Hilfsfunktion, die den Chat-Verlauf in HTML-Notizzettel umwandelt
-def generiere_logbuch_html(verlauf):
-    html = '<div class="logbuch-stapel">'
-    # Start-Text hinzufügen, wenn der Verlauf leer ist
-    if not verlauf:
-        start_text = "Tag 1. Mein Kopf dröhnt. Ich bin in einem verlassenen Supermarkt aufgewacht. Die Regale sind geplündert, draußen brennen Autos. Ich höre ein ekliges Kratzen an den vernagelten Fenstern. Neben mir liegt ein altes Brecheisen. Ich muss hier raus..."
-        html += f'<div class="notizzettel-eintrag ai-notiz"> {start_text} </div>'
-    else:
-        # Den Verlauf durchgehen und Notizen stapeln
-        for user_text, ai_text in verlauf:
-            if user_text:
-                html += f'<div class="notizzettel-eintrag user-notiz"> {user_text} </div>'
-            if ai_text:
-                html += f'<div class="notizzettel-eintrag ai-notiz"> {ai_text} </div>'
-    html += '</div>'
-    return html
-
-def spiel_zug(nachricht, verlauf, aktueller_rucksack):
+def spiel_zug(nachricht, aktueller_rucksack):
     if not nachricht:
-        return (generiere_logbuch_html(verlauf), verlauf, None, aktueller_rucksack, 
-                f"🎒 INVENTAR: {aktueller_rucksack}", "")
+        return None, "Du musst schon was tun!", aktueller_rucksack, f"🎒 INVENTAR: {aktueller_rucksack}", ""
 
-    # Die KI soll die Story UND den Rucksack verwalten
     system_prompt = f"""Du bist 'Zombie Go'.
     Inventar des Spielers: {aktueller_rucksack}.
     Regel: Der Spieler darf NUR Dinge nutzen, die im Inventar sind. Erfinde keine Waffen für ihn.
+    Füge neu gefundene Gegenstände oder gesammeltes 'Go' logisch zum Rucksack hinzu.
     Aktion des Spielers: '{nachricht}'.
     
     Antworte EXAKT in dieser Form (ohne Ausnahmen):
-    STORY: [Beschreibe in max 3 spannenden Sätzen, was passiert. Füge neu gefundene Gegenstände logisch zum Rucksack hinzu.]
+    STORY: [Beschreibe in max 3 spannenden Sätzen, was passiert]
     RUCKSACK: [Liste der Items] | GO: [Anzahl]"""
     
     try:
-        antwort = text_client.text_generation(system_prompt, max_new_tokens=250)
+        antwort = text_client.text_generation(system_prompt, max_new_tokens=200)
         
         # Split (Text zerteilen): Wir trennen Story und Rucksack am Wort "RUCKSACK:"
         if "RUCKSACK:" in antwort:
@@ -155,16 +117,11 @@ def spiel_zug(nachricht, verlauf, aktueller_rucksack):
             neuer_rucksack = aktueller_rucksack
             
     except Exception as e:
-        story_text = "Die Tinte versagt... (Verbindung zur KI unterbrochen)"
+        story_text = "Die Verbindung stottert... die KI schnappt nach Luft."
         neuer_rucksack = aktueller_rucksack
         
-    # Den Chat-Verlauf aktualisieren
-    verlauf.append((nachricht, story_text))
-    
-    # Das Logbuch-HTML neu generieren (inklusive neuer Aktionen)
-    logbuch_html = generiere_logbuch_html(verlauf)
-    
     # Bild-KI (SDXL Turbo - EXTREM SCHNELL!)
+    # Wir fügen düstere englische Begriffe hinzu, damit die KI das Zombie-Go-Thema versteht
     bild_prompt = f"dark zombie apocalypse survival scene, first person view, {nachricht}, eerie green lighting from glowing crystals, highly detailed, realistic texture, derelict ruined city, atmospheric"
     try:
         # SDXL Turbo braucht extrem wenige Schritte und ist fast sofort fertig!
@@ -174,46 +131,41 @@ def spiel_zug(nachricht, verlauf, aktueller_rucksack):
 
     rucksack_ui_text = f"🎒 INVENTAR: {neuer_rucksack}"
     
-    # Gibt alles zurück: Logbuch, Chat-History (gr.State), Bild, leeres Textfeld, schicke Rucksack-Anzeige, unsichtbarer Rucksack-Speicher
-    return logbuch_html, verlauf, bild, "", rucksack_ui_text, neuer_rucksack
+    # Gibt alles zurück: Chat, Bild, leeres Textfeld, schicke Anzeige, unsichtbarer Speicher
+    return bild, story_text, neuer_rucksack, rucksack_ui_text, ""
 
 
-# Wir laden das eigene CSS direkt in den Baukasten
 with gr.Blocks(css=geiles_design, theme=gr.themes.Base()) as spiel_oberflaeche:
+    # Wir geben dem Haupt-Bereich die CSS-Klasse 'haupt-bereich'
     with gr.Column(elem_classes="haupt-bereich"):
         gr.Markdown("# 🧟 ZOMBIE GO")
         
-        # Unsichtbare Speicher (gr.State)
-        chat_verlauf = gr.State([]) # Speichert den kompletten Verlauf
-        rucksack_speicher = gr.State("Brecheisen, leere Wasserflasche | GO: 0")
-        
-        # Die sichtbare Anzeige für das Inventar
-        rucksack_ui = gr.Markdown("🎒 INVENTAR: Brecheisen, leere Wasserflasche | GO: 0", elem_classes="rucksack-anzeige")
+        # State (unsichtbarer Speicher) für deinen Start-Rucksack
+        rucksack_speicher = gr.State("Taschenlampe, leere Wasserflasche | GO: 0")
+        rucksack_ui = gr.Markdown("🎒 INVENTAR: Taschenlampe, leere Wasserflasche | GO: 0", elem_classes="rucksack-anzeige")
         
         # Das generierte Bild
         szene_bild = gr.Image(label="Visuelles Echo", type="pil", elem_classes="output-bild")
         
-        # Das Logbuch (HTML Container für die gestapelten Notizen)
-        # Wir rufen direkt am Anfang die Funktion auf, um den Start-Text zu zeigen.
-        logbuch_ui = gr.HTML(generiere_logbuch_html([]), elem_classes="logbuch-stapel")
+        # Der Notizzettel für die Story!
+        story_ausgabe = gr.Markdown("*Warte auf Eingabe... (Tipp: 'Umschauen')*", elem_classes="notizzettel")
         
         gr.Markdown("---")
         
         # Eingabe-Bereich
-        eingabe = gr.Textbox(label="", placeholder="Was tust du? (z.B. Umschauen)", lines=1)
+        eingabe = gr.Textbox(label="", placeholder="Was tust du? (z.B. Zombies looten)", lines=1)
         senden_btn = gr.Button("▶ AKTION EINTRAGEN")
 
     # Verknüpfungen der Knöpfe (wichtige Reihenfolge der Outputs!)
-    # Wir aktualisieren jetzt das logbuch_ui und chat_verlauf
     senden_btn.click(
         spiel_zug, 
-        inputs=[eingabe, chat_verlauf, rucksack_speicher], 
-        outputs=[logbuch_ui, chat_verlauf, szene_bild, eingabe, rucksack_ui, rucksack_speicher]
+        inputs=[eingabe, rucksack_speicher], 
+        outputs=[szene_bild, story_ausgabe, rucksack_speicher, rucksack_ui, eingabe]
     )
     eingabe.submit(
         spiel_zug, 
-        inputs=[eingabe, chat_verlauf, rucksack_speicher], 
-        outputs=[logbuch_ui, chat_verlauf, szene_bild, eingabe, rucksack_ui, rucksack_speicher]
+        inputs=[eingabe, rucksack_speicher], 
+        outputs=[szene_bild, story_ausgabe, rucksack_speicher, rucksack_ui, eingabe]
     )
 
 # Startet das Game