Update app.py

app.py

@@ -1,64 +1,67 @@
 import gradio as gr
 from groq import Groq
-import os
 
-# ✅ 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):
+def generate_game(api_key, prompt):
     """
-    Nimmt eine Spielidee als Text und gibt kompletten HTML5-Code zurück.
+    Generiert ein HTML5-Spiel mit Groq.
+    api_key: Groq API Key (wird nur im Speicher genutzt)
+    prompt: Spielidee
     """
-    completion = client.chat.completions.create(
-        model="llama3-70b-8192",
-        messages=[
-            {
-                "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
+    if not api_key:
+        return "Bitte API-Key eingeben!"
+    
+    try:
+        client = Groq(api_key=api_key)
+        completion = client.chat.completions.create(
+            model="llama3-70b-8192",
+            messages=[
+                {
+                    "role": "system",
+                    "content": (
+                        "Du bist ein professioneller Game Developer. "
+                        "Generiere sauberen, vollständigen HTML5-Code. "
+                        "Nur HTML + JS, keine Erklärungen, nur Canvas-Spiele."
+                    )
+                },
+                {"role": "user", "content": prompt}
+            ],
+            temperature=0.8
+        )
+        return completion.choices[0].message.content
+    except Exception as e:
+        return f"Fehler: {e}"
 
-# 🔹 Gradio UI
+# UI mit Gradio
 with gr.Blocks() as demo:
-    gr.Markdown("# ⚡ Groq HTML5 Game Generator")
+    gr.Markdown("# ⚡ KI HTML5 Game Generator")
     gr.Markdown(
-        "Gib eine Spielidee ein, die KI generiert das HTML5-Spiel. "
-        "Der Code wird direkt spielbar im Browser."
+        "Trage deinen GROQ API-Key ein (wird nicht gespeichert) und gib eine Spielidee ein. "
+        "Die KI generiert HTML5-Code, der direkt spielbar ist."
     )
 
-    prompt = gr.Textbox(
-        label="Spielidee",
-        placeholder="Beispiel: 2D Jump'n'Run mit Gegnern und Score",
-        lines=3
-    )
+    with gr.Row():
+        api_key_input = gr.Textbox(
+            label="GROQ API-Key",
+            placeholder="Hier API-Key einfügen",
+            type="password"
+        )
+        prompt_input = gr.Textbox(
+            label="Spielidee",
+            placeholder="Beispiel: 2D Jump'n'Run mit Gegnern",
+            lines=3
+        )
 
-    btn = gr.Button("🎮 Generieren")
+    btn = gr.Button("🎮 Spiel generieren")
 
-    code = gr.Code(
+    code_output = gr.Code(
         language="html",
         label="HTML5 Game Code",
         lines=25
     )
-
-    preview = gr.HTML(label="Game Vorschau")
+    preview_output = gr.HTML(label="Game Vorschau")
 
     # Events
-    btn.click(generate_game, prompt, code)
-    code.change(lambda x: x, code, preview)
+    btn.click(generate_game, inputs=[api_key_input, prompt_input], outputs=code_output)
+    code_output.change(lambda x: x, code_output, preview_output)
 
-demo.launch()
+demo.launch()