Update app.py

app.py

@@ -2,22 +2,63 @@ import gradio as gr
 from groq import Groq
 import os
 
-# Secret auslesen
-client = Groq(api_key=os.environ.get("GROQ_API_KEY"))
+# ✅ Groq-Client initialisieren (Secret auslesen)
+api_key = os.environ.get("GROQ_API_KEY")
+if not api_key:
+    raise ValueError("Bitte GROQ_API_KEY als Secret in deinem Space hinterlegen!")
 
+client = Groq(api_key=api_key)
+
+# 🔹 Funktion zur Spiel-Generierung
 def generate_game(prompt):
+    """
+    Nimmt eine Spielidee als Text und gibt kompletten HTML5-Code zurück.
+    """
     completion = client.chat.completions.create(
         model="llama3-70b-8192",
         messages=[
-            {"role": "system", "content": "Du generierst komplette HTML5-Spiele. Gib nur gültigen HTML-Code aus."},
+            {
+                "role": "system",
+                "content": (
+                    "Du bist ein professioneller Game Developer. "
+                    "Erzeuge vollständigen, sauberen HTML5-Spielcode. "
+                    "Nur HTML + JS, keine Erklärungen, kein Markdown. "
+                    "Canvas basiertes Spiel, spielbar im Browser."
+                )
+            },
             {"role": "user", "content": prompt}
         ],
         temperature=0.8
     )
+    # Der generierte HTML-Code
     return completion.choices[0].message.content
 
+# 🔹 Gradio UI
 with gr.Blocks() as demo:
     gr.Markdown("# ⚡ Groq HTML5 Game Generator")
-    prompt = gr.Textbox(label="Spielidee", placeholder="2D Jump and Run mit Gegnern")
-    btn = gr.Button("⚡ Generieren")
-    code = gr.Code(language="htm
+    gr.Markdown(
+        "Gib eine Spielidee ein, die KI generiert das HTML5-Spiel. "
+        "Der Code wird direkt spielbar im Browser."
+    )
+
+    prompt = gr.Textbox(
+        label="Spielidee",
+        placeholder="Beispiel: 2D Jump'n'Run mit Gegnern und Score",
+        lines=3
+    )
+
+    btn = gr.Button("🎮 Generieren")
+
+    code = gr.Code(
+        language="html",
+        label="HTML5 Game Code",
+        lines=25
+    )
+
+    preview = gr.HTML(label="Game Vorschau")
+
+    # Events
+    btn.click(generate_game, prompt, code)
+    code.change(lambda x: x, code, preview)
+
+demo.launch()