Update app.py

app.py

@@ -3,92 +3,114 @@ import gradio as gr
 from huggingface_hub import InferenceClient
 
 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)
 
-# Unser eigenes Design (CSS) - Dunkel, giftgrün und atmosphärisch!
-eigenes_design = """
-body, .gradio-container { background-color: #0a0a0a !important; color: #d1d5db !important; }
-h1 { color: #39ff14 !important; text-align: center; text-transform: uppercase; text-shadow: 0 0 10px #39ff14; font-weight: bold;}
-.rucksack-box { border: 2px solid #8b0000 !important; background: #1a1a1a !important; padding: 10px; border-radius: 5px; color: #ffaa00 !important; font-family: monospace; font-size: 1.2em;}
-button { background-color: #8b0000 !important; color: white !important; font-weight: bold !important; border: 1px solid #ff0000 !important; }
-button:hover { background-color: #ff0000 !important; }
+# Das absolute krasse Custom CSS (Terminal-Style)
+hartes_design = """
+@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
+
+body, .gradio-container { 
+    background-color: #050505 !important; 
+    color: #33ff33 !important; 
+    font-family: 'Share Tech Mono', monospace !important; 
+    background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(51, 255, 51, 0.05) 2px, rgba(51, 255, 51, 0.05) 4px);
+}
+
+.haupt-terminal {
+    max-width: 800px !important;
+    margin: 0 auto !important;
+    border: 2px solid #33ff33 !important;
+    box-shadow: 0 0 20px rgba(51, 255, 51, 0.2);
+    padding: 20px !important;
+    background: #000 !important;
+}
+
+h1 { color: #33ff33 !important; text-align: center; text-transform: uppercase; text-shadow: 0 0 10px #33ff33; font-size: 2.5em !important; margin-bottom: 20px !important;}
+
+.rucksack-anzeige {
+    border: 1px dashed #ff3333 !important;
+    padding: 10px !important;
+    color: #ff3333 !important;
+    text-align: center;
+    margin-bottom: 20px !important;
+    text-transform: uppercase;
+}
+
+.output-bild { border: 2px solid #33ff33 !important; border-radius: 0 !important; margin-bottom: 15px !important;}
+.output-text { color: #fff !important; font-size: 1.2em !important; line-height: 1.5 !important; padding: 15px !important; background: rgba(51,255,51,0.1) !important; border-left: 5px solid #33ff33 !important;}
+
+input, textarea { background: #111 !important; color: #33ff33 !important; border: 1px solid #33ff33 !important; font-family: 'Share Tech Mono', monospace !important; font-size: 1.2em !important;}
+button { background: #33ff33 !important; color: #000 !important; border: none !important; font-weight: bold !important; text-transform: uppercase !important; font-size: 1.2em !important; padding: 10px !important; box-shadow: 0 0 10px #33ff33 !important;}
+button:hover { background: #fff !important; color: #000 !important; box-shadow: 0 0 20px #fff !important;}
 """
 
-def spiel_zug(nachricht, verlauf, aktueller_rucksack):
-    # Wir sagen der KI streng, dass sie das Inventar mit verwalten muss
-    system_prompt = f"""Du bist der Spielleiter von 'Zombie Go'.
-    Der Spieler hat aktuell diesen Rucksack: {aktueller_rucksack}.
-    WICHTIG: Der Spieler kann nur Dinge nutzen, die im Rucksack sind! Erfinde keine Waffen für ihn.
-    Füge neu gefundene Gegenstände oder gesammeltes 'Go' logisch zum Rucksack hinzu.
-    Aktion des Spielers: '{nachricht}'.
+def spiel_zug(nachricht, aktueller_rucksack):
+    if not nachricht:
+        return None, "Du musst schon was tun!", aktueller_rucksack, f"🎒 INVENTAR: {aktueller_rucksack}", ""
+
+    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}'.
     
-    Antworte EXAKT in dieser Form (ohne Ausnahmen):
-    STORY: [Beschreibe in max 3 spannenden Sätzen, was passiert]
-    RUCKSACK: [Liste der Items] | GO: [Anzahl]"""
+    Antworte in diesem Format:
+    STORY: [Max 3 Sätze, düster, beschreibe die Folgen der Aktion]
+    RUCKSACK: [Aktualisierte Liste der Items] | GO: [Anzahl]"""
     
     try:
         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:
             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 = "Die Verbindung stottert... die KI schnappt nach Luft."
+        story_text = "Systemfehler. Verbindung zur Realität unterbrochen."
         neuer_rucksack = aktueller_rucksack
         
-    # Bild KI (mit düsteren englischen Suchbegriffen)
-    bild_prompt = f"dark zombie apocalypse survival scene, first person view, {nachricht}, eerie green lighting, highly detailed, 8k resolution"
+    bild_prompt = f"dark zombie apocalypse survival scene, first person view, {nachricht}, eerie green lighting, highly detailed, retro game style"
     try:
         bild = bild_client.text_to_image(bild_prompt)
     except:
         bild = None
 
-    verlauf.append((nachricht, story_text))
+    rucksack_ui_text = f"🎒 INVENTAR: {neuer_rucksack}"
     
-    # Rucksack-Text für die Oberfläche formatieren
-    rucksack_anzeige = f"**🎒 DEIN RUCKSACK:** {neuer_rucksack}"
-    
-    # Gibt alles zurück: Chat, Bild, leeres Textfeld, schicke Anzeige, unsichtbarer Speicher
-    return verlauf, bild, "", rucksack_anzeige, neuer_rucksack
+    # Wir geben das Bild, die Story, den neuen Speicher, die UI-Anzeige und leeren das Textfeld
+    return bild, story_text, neuer_rucksack, rucksack_ui_text, ""
 
 
-# Wir laden das eigene CSS direkt in den Baukasten
-with gr.Blocks(css=eigenes_design, theme=gr.themes.Monochrome()) as spiel_oberflaeche:
-    gr.Markdown("# 🧟 ZOMBIE GO")
-    
-    # State (unsichtbarer Speicher) für deinen Start-Rucksack
-    rucksack_speicher = gr.State("Taschenlampe, leere Wasserflasche | GO: 0")
-    
-    with gr.Row():
-        with gr.Column(scale=1):
-            szene_bild = gr.Image(label="Kamera-Feed", type="pil")
-            # Die sichtbare Anzeige für das Inventar
-            rucksack_ui = gr.Markdown("**🎒 DEIN RUCKSACK:** Taschenlampe, leere Wasserflasche | GO: 0", elem_classes="rucksack-box")
-            
-        with gr.Column(scale=1):
-            chat = gr.Chatbot(label="Überlebens-Logbuch", height=350)
-            eingabe = gr.Textbox(label="Aktion", placeholder="Was tust du? (z.B. Ich suche nach Waffen)")
-            senden_btn = gr.Button("⚔️ Aktion ausführen")
+with gr.Blocks(css=hartes_design, theme=gr.themes.Base()) as spiel_oberflaeche:
+    with gr.Column(elem_classes="haupt-terminal"):
+        gr.Markdown("# 🧟 ZOMBIE GO")
+        
+        rucksack_speicher = gr.State("Brecheisen, leere Wasserflasche | GO: 0")
+        rucksack_ui = gr.Markdown("🎒 INVENTAR: Brecheisen, leere Wasserflasche | GO: 0", elem_classes="rucksack-anzeige")
+        
+        # Ein Block für die Ausgabe (Bild + Text darunter)
+        szene_bild = gr.Image(label="Kamera-Feed", type="pil", elem_classes="output-bild")
+        story_ausgabe = gr.Markdown("*Warte auf Eingabe...*", elem_classes="output-text")
+        
+        gr.Markdown("---")
+        
+        # Eingabe-Bereich
+        eingabe = gr.Textbox(label="", placeholder="Aktion eingeben... (z.B. Umschauen)", lines=1)
+        senden_btn = gr.Button("▶ AUSFÜHREN")
 
-    # Verknüpfungen der Knöpfe
+    # Auslöser
     senden_btn.click(
         spiel_zug, 
-        inputs=[eingabe, chat, rucksack_speicher], 
-        outputs=[chat, 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, rucksack_speicher], 
-        outputs=[chat, szene_bild, eingabe, rucksack_ui, rucksack_speicher]
+        inputs=[eingabe, rucksack_speicher], 
+        outputs=[szene_bild, story_ausgabe, rucksack_speicher, rucksack_ui, eingabe]
     )
 
 spiel_oberflaeche.launch()