Update app.py

app.py

@@ -3,11 +3,11 @@ from groq import Groq
 
 def generate_and_preview(api_key, prompt):
     """
-    Generiert HTML5-Spiel mit Groq und gibt den Code für Code-Feld
-    und HTML-Vorschau zurück.
+    Generiert HTML5-Spiel mit Groq und gibt Code + Vorschau zurück.
+    Vorschau wird über ein iframe dargestellt, damit JS läuft.
     """
     if not api_key:
-        return "Bitte API-Key eingeben!", ""
+        return "Bitte API-Key eingeben!", "<p>Keine Vorschau</p>"
     
     try:
         client = Groq(api_key=api_key)
@@ -28,38 +28,46 @@ def generate_and_preview(api_key, prompt):
             temperature=0.8
         )
         html_code = completion.choices[0].message.content
-        return html_code, html_code  # Code + Vorschau
+
+        # Vorschau in iframe packen, damit JS läuft
+        preview_html = f"""
+        <iframe srcdoc="{html_code.replace('"', '&quot;')}" 
+                width="100%" height="600px" style="border:none;"></iframe>
+        """
+        return html_code, preview_html
+
     except Exception as e:
-        return f"Fehler: {e}", ""
+        return f"Fehler: {e}", "<p>Fehler bei der Vorschau</p>"
 
 # Gradio UI
 with gr.Blocks() as demo:
     gr.Markdown("# ⚡ KI HTML5 Game Generator mit Live-Vorschau")
     gr.Markdown(
-        "API-Key eingeben (wird nicht gespeichert) + Spielidee → "
-        "Die KI generiert HTML5-Code, der sofort spielbar ist."
+        "API-Key eingeben (nicht gespeichert) + Spielidee → "
+        "Die KI generiert HTML5-Code. Vorschau rechts neben dem Code."
     )
 
     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("🎮 Spiel generieren")
+        with gr.Column(scale=1):
+            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("🎮 Spiel generieren")
+            code_output = gr.Code(
+                language="html",
+                label="HTML5 Game Code",
+                lines=25
+            )
 
-    code_output = gr.Code(
-        language="html",
-        label="HTML5 Game Code",
-        lines=25
-    )
-    preview_output = gr.HTML(label="Live Vorschau")
+        with gr.Column(scale=1):
+            preview_output = gr.HTML(label="Live Vorschau")
 
     # Event: Button klick
     btn.click(generate_and_preview,