Update app.py

app.py

@@ -2,49 +2,123 @@ import gradio as gr
 from huggingface_hub import InferenceClient
 import os
 
-# 1. Wir nutzen Qwen 2.5 - das ist extrem stabil bei langen Chats
+# 1. Verbindung & Prompting
 hf_token = os.getenv("HF_TOKEN")
 client = InferenceClient("Qwen/Qwen2.5-7B-Instruct", token=hf_token)
 
-SYSTEM_PROMPT = "Du bist CocoAi, eine freundliche KI von CocoEntertainment. Deine Inspiration ist die Katze Coco."
+SYSTEM_PROMPT = """Du bist CocoAi, die offizielle KI von CocoEntertainment. 
+Du bist loyal, schlau und nutzt Katzen-Emojis 🐱. 
+Dein Wissen umfasst CocoGames, CocoCity und die Inspiration durch die Katze Coco."""
 
-def chat_fn(message, history):
+def respond(message, chat_history):
     messages = [{"role": "system", "content": SYSTEM_PROMPT}]
-    
-    # 2. Absolut sichere History-Verarbeitung
-    if history:
-        for interaction in history:
-            # Prüfen, ob die Interaktion ein Dictionary oder eine Liste ist
-            if isinstance(interaction, dict):
-                messages.append({"role": "user", "content": interaction.get("content", "")})
-            elif isinstance(interaction, (list, tuple)) and len(interaction) >= 2:
-                messages.append({"role": "user", "content": interaction[0]})
-                messages.append({"role": "assistant", "content": interaction[1]})
-    
-    # Aktuelle Nachricht
+    for user, assistant in chat_history:
+        messages.append({"role": "user", "content": user})
+        messages.append({"role": "assistant", "content": assistant})
     messages.append({"role": "user", "content": message})
 
     response = ""
-    try:
-        for msg in client.chat_completion(
-            messages,
-            max_tokens=1000,
-            stream=True,
-            temperature=0.7
-        ):
-            # 3. Sicherheits-Check für die Antwort-Pakete
-            if msg.choices and len(msg.choices) > 0:
-                token = msg.choices[0].delta.content
-                if token:
-                    response += token
-                    yield response
-    except Exception as e:
-        yield f"Diagnose: {str(e)}"
-
-# 4. Das stabilste Interface-Setup
-with gr.Blocks() as demo:
-    gr.Markdown("# 🐱 CocoAi")
-    gr.ChatInterface(fn=chat_fn)
+    for msg in client.chat_completion(messages, max_tokens=1000, stream=True, temperature=0.8):
+        if msg.choices and len(msg.choices) > 0:
+            token = msg.choices[0].delta.content
+            if token:
+                response += token
+                yield response
+
+# 2. Das "Smooth & Round" Design
+custom_css = """
+/* Ganze Seite auf Weiß umstellen */
+.gradio-container { 
+    background-color: #ffffff !important; 
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; 
+}
+
+/* Chatbot-Fenster: Keine harten Kanten, weicher Schatten */
+#custom-chatbot { 
+    border: none !important;
+    background-color: #f8fbff !important;
+    border-radius: 30px !important;
+}
+
+/* Sprechblasen abrunden */
+.message {
+    border-radius: 20px !important;
+    padding: 12px 16px !important;
+    border: 1px solid #e1effe !important;
+}
+
+/* Header Text in kräftigem Blau */
+#coco-header { 
+    text-align: center; 
+    color: #1a56db; 
+    margin-top: 20px;
+}
+
+/* Eingabefeld extrem rund */
+#input-box textarea {
+    border-radius: 25px !important;
+    border: 2px solid #e1effe !important;
+    padding: 10px 20px !important;
+}
+
+/* Buttons abrunden */
+.round-btn {
+    border-radius: 25px !important;
+    background: #3b82f6 !important;
+    color: white !important;
+    transition: all 0.3s ease;
+}
+.round-btn:hover {
+    transform: scale(1.02);
+    background: #2563eb !important;
+}
+
+footer { display: none !important; }
+"""
+
+with gr.Blocks(css=custom_css, title="CocoAi Smooth") as demo:
+    
+    with gr.Column(elem_id="coco-header"):
+        gr.Markdown("# 🐱 CocoAi")
+        gr.Markdown("### Intelligent • Loyal • CocoEntertainment")
+
+    chatbot = gr.Chatbot(
+        label=None, 
+        elem_id="custom-chatbot",
+        bubble_full_width=False,
+        show_label=False
+    )
+    
+    with gr.Row():
+        txt = gr.Textbox(
+            show_label=False,
+            placeholder="Nachricht an CocoAi...",
+            scale=4,
+            elem_id="input-box"
+        )
+        submit_btn = gr.Button("Senden", variant="primary", scale=1, elem_classes="round-btn")
+
+    with gr.Row():
+        # Auch der Löschen-Button wird rund
+        gr.ClearButton([txt, chatbot], value="Chat leeren", variant="secondary")
+
+    # Logik
+    def user_input(msg, history):
+        return "", history + [[msg, ""]]
+
+    def bot_response(history):
+        user_message = history[-1][0]
+        history[-1][1] = ""
+        for character in respond(user_message, history[:-1]):
+            history[-1][1] = character
+            yield history
+
+    submit_btn.click(user_input, [txt, chatbot], [txt, chatbot], queue=False).then(
+        bot_response, chatbot, chatbot
+    )
+    txt.submit(user_input, [txt, chatbot], [txt, chatbot], queue=False).then(
+        bot_response, chatbot, chatbot
+    )
 
 if __name__ == "__main__":
     demo.launch()