Update app.py

app.py

@@ -5,29 +5,30 @@ from huggingface_hub import InferenceClient
 # Token aus den Hugging Face Secrets laden
 token = os.environ.get("HF_TOKEN")
 text_client = InferenceClient("google/gemma-1.1-7b-it", token=token)
-bild_client = InferenceClient("stabilityai/stable-diffusion-xl-base-1.0", token=token)
+# Wir nutzen SDXL Turbo für extrem schnelle Bilder am Handy!
+bild_client = InferenceClient("stabilityai/sdxl-turbo", token=token)
 
 # Unser neues, ultra-atmosphärisches CSS (Gestaltungscode)
+# Wir fügen die Styles für das gestapelte Logbuch hinzu.
 geiles_design = """
 @import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
 
 body, .gradio-container { 
-    /* 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;
+    /* Lädt das Bild DIREKT von deinem eigenen Hugging Face Space! */
+    background-image: url('file/image.png') !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(3px); /* Macht das Hintergrundbild leicht unscharf */
+    backdrop-filter: blur(2px);
     border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
@@ -45,25 +46,47 @@ h1 { color: #d4af37 !important; text-align: center; text-transform: uppercase; f
     font-weight: bold;
 }
 
-/* Der Notizzettel für die Story! */
-.notizzettel { 
-    background: #e3dec6 !important; /* Schmutzige Papier-Farbe */
+/* 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; 
     color: #1a1a1a !important; 
-    font-family: 'Special Elite', monospace !important; /* Echte Schreibmaschinen-Schrift */
+    font-family: 'Special Elite', monospace !important; 
     font-size: 1.3em !important; 
     line-height: 1.6 !important; 
-    padding: 25px !important; 
+    padding: 15px !important; 
     border-radius: 2px !important;
-    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 */
+    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;
 }
 
-/* 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;}
+/* Deine Notizen sind links */
+.user-notiz { 
+    transform: rotate(0.5deg);
+    margin-right: 15% !important;
+    border-left-color: #d4af37 !important;
+    opacity: 0.9;
+}
 
-/* Eingabefeld durchsichtig machen */
+/* Die Notizen der KI sind rechts */
+.ai-notiz { 
+    transform: rotate(-0.5deg);
+    margin-left: 15% !important;
+}
+
+/* --- Eingabe --- */
 input, textarea { 
     background: rgba(0, 0, 0, 0.6) !important; 
     color: #fff !important; 
@@ -72,7 +95,6 @@ input, textarea {
     border-radius: 5px !important;
 }
 
-/* Aggressiver Action-Button */
 button { 
     background: #8b0000 !important; 
     color: #fff !important; 
@@ -87,73 +109,112 @@ button {
 button:hover { background: #aa0000 !important; }
 """
 
-def spiel_zug(nachricht, aktueller_rucksack):
+# 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):
     if not nachricht:
-        return None, "Der Zettel ist leer. Du musst schon etwas tun!", aktueller_rucksack, f"🎒 INVENTAR: {aktueller_rucksack}", ""
+        return (generiere_logbuch_html(verlauf), verlauf, None, 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.
-    Aktion: '{nachricht}'.
+    Regel: Der Spieler darf NUR Dinge nutzen, die im Inventar sind. Erfinde keine Waffen für ihn.
+    Aktion des Spielers: '{nachricht}'.
     
-    Antworte in diesem Format:
-    STORY: [Max 3 Sätze, düster, beschreibe die Folgen der Aktion]
-    RUCKSACK: [Aktualisierte Liste der Items] | GO: [Anzahl]"""
+    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.]
+    RUCKSACK: [Liste der Items] | GO: [Anzahl]"""
     
     try:
-        antwort = text_client.text_generation(system_prompt, max_new_tokens=200)
+        antwort = text_client.text_generation(system_prompt, max_new_tokens=250)
         
+        # Split (Text zerteilen): Wir trennen Story und Rucksack am Wort "RUCKSACK:"
         if "RUCKSACK:" in antwort:
             teile = antwort.split("RUCKSACK:")
             story_text = teile[0].replace("STORY:", "").strip()
             neuer_rucksack = teile[1].strip()
         else:
+            # Falls die KI den Befehl vermasselt, behalten wir den alten Rucksack
             story_text = antwort.replace("STORY:", "").strip()
             neuer_rucksack = aktueller_rucksack
+            
     except Exception as e:
-        story_text = "Der Stift bricht ab... Schreibblockade. (Verbindung zur KI unterbrochen)"
+        story_text = "Die Tinte versagt... (Verbindung zur KI unterbrochen)"
         neuer_rucksack = aktueller_rucksack
         
-    bild_prompt = f"dark zombie apocalypse survival scene, first person view, {nachricht}, eerie lighting, ruined city, highly detailed, realistic texture"
+    # 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!)
+    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:
-        bild = bild_client.text_to_image(bild_prompt)
+        # SDXL Turbo braucht extrem wenige Schritte und ist fast sofort fertig!
+        bild = bild_client.text_to_image(bild_prompt, num_inference_steps=1)
     except:
         bild = None
 
     rucksack_ui_text = f"🎒 INVENTAR: {neuer_rucksack}"
     
-    return bild, story_text, neuer_rucksack, rucksack_ui_text, ""
+    # 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
 
 
+# Wir laden das eigene CSS direkt in den Baukasten
 with gr.Blocks(css=geiles_design, theme=gr.themes.Base()) as spiel_oberflaeche:
     with gr.Column(elem_classes="haupt-bereich"):
         gr.Markdown("# 🧟 ZOMBIE GO")
         
-        # Der Start-Rucksack
+        # 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")
         
-        # Das Bild
+        # Das generierte Bild
         szene_bild = gr.Image(label="Visuelles Echo", type="pil", elem_classes="output-bild")
         
-        # HIER IST DEIN START-TEXT AUF DEM NOTIZZETTEL
-        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..."
-        story_ausgabe = gr.Markdown(start_text, elem_classes="notizzettel")
+        # 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")
         
         gr.Markdown("---")
         
-        eingabe = gr.Textbox(label="", placeholder="Was tust du? (z.B. Ich schleiche zur Tür)", lines=1)
+        # Eingabe-Bereich
+        eingabe = gr.Textbox(label="", placeholder="Was tust du? (z.B. Umschauen)", 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, rucksack_speicher], 
-        outputs=[szene_bild, story_ausgabe, rucksack_speicher, rucksack_ui, eingabe]
+        inputs=[eingabe, chat_verlauf, rucksack_speicher], 
+        outputs=[logbuch_ui, chat_verlauf, szene_bild, eingabe, rucksack_ui, rucksack_speicher]
     )
     eingabe.submit(
         spiel_zug, 
-        inputs=[eingabe, rucksack_speicher], 
-        outputs=[szene_bild, story_ausgabe, rucksack_speicher, rucksack_ui, eingabe]
+        inputs=[eingabe, chat_verlauf, rucksack_speicher], 
+        outputs=[logbuch_ui, chat_verlauf, szene_bild, eingabe, rucksack_ui, rucksack_speicher]
     )
 
+# Startet das Game
 spiel_oberflaeche.launch()