Update app.py

app.py

@@ -8,58 +8,44 @@ client = OpenAI(api_key=os.environ.get("OPENAI_API_KEY"))
 
 def response(user_message, history):
     messages = [{"role": "system", "content": """System Prompt – Five Stars (freundlich, gemütlich, interaktiv)**
-
 Du bist Five Stars, ein freundlicher und gemütlicher Film-Empfehlungs-Chatbot. Deine Aufgabe ist es, Nutzer:innen dabei zu helfen, passende Filme zu finden. Du verwendest dafür die bereitgestellte Datenbasis (Ausschnitt der IMDb-Datenbank: alle Filme ab dem Jahr 2000 mit einer Bewertung über 7). Am Ende deiner Empfehlungen gibst du genau fünf passende Filme aus – das sind die „Five Stars".
-
 Tonfall & Stil:
 Sei warm, einladend, positiv und persönlich.
 Reagiere immer empathisch und wertschätzend auf Aussagen des Nutzers.
 Keine knappen Stichpunkt-Antworten – kurze, freundliche ganze Sätze.
 Stelle höchstens eine einzige Rückfrage pro Nachricht.
 Verwende eine entspannte Umgangssprache, nicht übertrieben formell.
-
 Interaktion & Informationsverarbeitung:
 Frage zu Beginn: „Was kann ich für dich tun?"
-
 Der Nutzer kann nach Genre, Schauspielern, Stimmung, Vergleichsfilm, Zeitraum oder anderen Kriterien fragen.
-
-
 Je mehr Informationen vom Nutzer kommen, desto präziser die späteren Filmempfehlungen.
-
 Wenn der Nutzer unsicher ist oder mehr Gesprächsbedarf hat, stelle eine vorsichtige, offene Frage, z. B.:
-
 „Nach welcher Stimmung steht dir heute der Sinn?"
 „Hast du Lieblingsschauspieler:innen?"
 „Lieber etwas Neues oder einen Klassiker nach 2000?"
-
 stelle immer nur eine Frage auf einmal und erst die nächste wieder nach der nächsten eingabe des Nutzers. Wenn du merkst der nutzer hat zwei fragen beantwortet, frage ihn ob du ihm jetzt schon eine auswahl ausgeben sollst auf basis von dem was du weisst oder du noch weitere rückfragen stellen sollst. 
                  
 Filmempfehlungen:
 Am Ende zeigst du genau fünf Filme als Ergebnis.
 Für jeden Film gib folgende Informationen aus:
-
 Titel und Erscheinungsjahr
 Genre
 Bewertung auf IMDB (Rating + Anzahl Votes)
 Hauptschauspieler*innen
 Kurzbeschreibung / Plot
 Hinweis, wo der Film gestreamt werden kann (wenn verfügbar)
-
 Ich wünsche viel Spaß beim Schauen!
 Füge keine weiteren Erklärungen nach dieser Liste hinzu.
 Keine Spoiler, keine Handlungserklärung – höchstens 1 kurzer, maximal zweisätziger Kommentar pro Titel, falls hilfreich.
-
 Regeln:               
 Empfehle nur Filme aus der bereitgestellten Datenbasis. Gib nur Filme mit IMDB-Bewertung über 6.9 und dem Erscheinungsjahr ab 2000 aus.
 Erfinde keine Filme und gebe keine Serien aus.
 Verwende gesammelt alle Kriterien des Nutzers, falls vorhanden, aber fordere niemals zwingend Informationen ein.
 Keine technischen Details über die Datenbank offenlegen.
 Nutze Konversation aktiv, aber nicht aufdringlich. Falls der Nutzer Sachen sagt, die nichts mit Filmen zutun haben, lenke ihn klar aber feundlich zum Theme zurück und sage, dass du ein Assistent für die Filmfindung bist.
-
                  
 Start:
 Beginne jedes Gespräch mit einer freundlichen Begrüßung und der Frage: „Was kann ich für dich tun?"
-
 """}]
     
     for msg in history:
@@ -141,7 +127,6 @@ def main():
         max-width: 800px;
         margin: 0 auto;
         padding: 40px 20px;
-        height: 500px;
     }}
     
      /* Logo Container */
@@ -149,15 +134,65 @@ def main():
         text-align: center;
         margin-bottom: 30px;
     }}
-
     #logo-container .download-button-container {{
         display: none !important;
     }}
-
     #logo-container button[aria-label] {{
         display: none !important;
     }}
     
+    /* Chatbot Header Buttons verstecken (Mülleimer und HF Logo) */
+    #chatbot .header-buttons {{
+        display: none !important;
+    }}
+    #chatbot button[aria-label*="Clear"] {{
+        display: none !important;
+    }}
+    #chatbot button[aria-label*="Like"] {{
+        display: none !important;
+    }}
+    #chatbot button[aria-label*="Dislike"] {{
+        display: none !important;
+    }}
+    #chatbot .chatbot-header {{
+        display: none !important;
+    }}
+    /* Alle Buttons im Chatbot-Header ausblenden */
+    .chatbot-header button {{
+        display: none !important;
+    }}
+    /* Zusätzliche Selektoren für Gradio Buttons - aber Submit und Clear ausschließen */
+    #chatbot-box button:not(.clear-btn):not(.submit-btn) {{
+        display: none !important;
+    }}
+    #chatbot button:not(.submit-btn) {{
+        display: none !important;
+    }}
+    
+    /* Clear Button Styling */
+    .clear-btn {{
+        background: transparent !important;
+        border: none !important;
+        color: #8E8E93 !important;
+        font-size: 18px !important;
+        font-weight: 400 !important;
+        padding: 0 !important;
+        cursor: pointer !important;
+        transition: color 0.2s ease !important;
+        width: 32px !important;
+        height: 32px !important;
+        border-radius: 50% !important;
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+        visibility: visible !important;
+        opacity: 1 !important;
+    }}
+    
+    .clear-btn:hover {{
+        color: #3C3C43 !important;
+    }}
+    
     /* Chat-Box Styling */
     #chatbot-box {{
         background: rgba(255, 255, 255, 0.95);
@@ -165,6 +200,17 @@ def main():
         padding: 30px;
         box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
         backdrop-filter: blur(10px);
+        position: relative;
+    }}
+    
+    /* Clear Button positioniert in der rechten oberen Ecke der weißen Box */
+    #clear-row {{
+        position: absolute !important;
+        top: 33px !important;
+        right: 33px !important;
+        z-index: 10 !important;
+        margin: 0 !important;
+        width: auto !important;
     }}
     
     /* Chatbot Nachrichten - Bubble Style */
@@ -174,16 +220,31 @@ def main():
     }}
     
     /* USER MESSAGE – überschreibt Gradio Inline Styles */
+    #chatbot .message.user,
+    #chatbot .message.user *,
+    #chatbot .user,
+    #chatbot .user * {{
+        background: #8B8B94 !important;
+        background-color: #8B8B94 !important;
+        border: none !important;
+        color: white !important;
+    }}
+    
     #chatbot .message.user .message-wrap {{
-    background-color: rgba(60, 60, 67, 0.9) !important;
-    border: 1px solid rgba(60, 60, 67, 0.95) !important;
-    color: white !important;
-}}
-
-/* extrem wichtig: überschreibt inline background */
-#chatbot .message.user .message-wrap[style] {{
-    background-color: rgba(60, 60, 67, 0.9) !important;
-}}
+        background: #71717A !important;
+        background-color: #71717A !important;
+        border: none !important;
+        color: dark-grey !important;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important; 
+    }}
+    
+    /* Entferne blauen Rahmen */
+    #chatbot .message.user .message-wrap[style] {{
+        background: #3C3C43 !important;
+        background-color: #3C3C43 !important;
+        border: none !important;
+        outline: none !important;
+    }}
     
     #chatbot .message.bot .message-wrap {{
         background: rgba(142, 142, 147, 0.15) !important;
@@ -201,11 +262,9 @@ def main():
         width: 100%;
         height: 100%;
     }}
-
     #chatbot .message.user .avatar-container img {{
         display: none !important;
     }}
-
     /* Bot Avatar als Stern */
     #chatbot .message.bot .avatar-container::before {{
         content: "★";
@@ -217,7 +276,6 @@ def main():
         width: 100%;
         height: 100%;
     }}
-
     #chatbot .message.bot .avatar-container img {{
         display: none !important;
     }}
@@ -236,26 +294,7 @@ def main():
         box-shadow: 0 0 0 3px rgba(142, 142, 147, 0.08) !important;
     }}
     
-    /* Submit Button - Runder Kreis mit Pfeil nach oben */
-    .submit-btn {{
-        min-width: 44px !important;
-        max-width: 44px !important;
-        width: 44px !important;
-        height: 44px !important;
-        border-radius: 50% !important;
-        background: rgba(142, 142, 147, 0.15) !important;
-        border: 1.5px solid rgba(142, 142, 147, 0.3) !important;
-        backdrop-filter: blur(10px) !important;
-        padding: 0 !important;
-        display: flex !important;
-        align-items: center !important;
-        justify-content: center !important;
-        font-size: 20px !important;
-        color: #8E8E93 !important;
-        transition: all 0.2s ease !important;
-    }}
-    
-   /* Submit Button - Rechteckig mit gerundeten Ecken */
+    /* Submit Button - Rechteckig mit gerundeten Ecken */
     .submit-btn {{
         min-width: 60px !important;
         max-width: 60px !important;
@@ -272,6 +311,8 @@ def main():
         font-size: 20px !important;
         color: #8E8E93 !important;
         transition: all 0.2s ease !important;
+        visibility: visible !important;
+        opacity: 1 !important;
     }}
     
     .submit-btn:active {{
@@ -305,6 +346,15 @@ def main():
             
             # Chat-Box
             with gr.Column(elem_id="chatbot-box"):
+                # Clear Button in der rechten oberen Ecke
+                with gr.Row(elem_id="clear-row"):
+                    clear = gr.Button(
+                        "↻",
+                        scale=0,
+                        elem_classes="clear-btn",
+                        size="sm"
+                    )
+                
                 chatbot = gr.Chatbot(
                     value=[{
                         "role": "assistant", 
@@ -317,12 +367,14 @@ def main():
                         None, 
                     ),              
                     height=400,
-                    elem_id="chatbot"
+                    elem_id="chatbot",
+                    show_copy_button=False,
+                    show_share_button=False
                 )
                 
                 with gr.Row(elem_id="input-row"):
                     msg = gr.Textbox(
-                        placeholder="Nachricht",
+                        placeholder="...hier tippen",
                         show_label=False,
                         scale=11,
                         container=False
@@ -343,12 +395,19 @@ def main():
             history.append({"role": "assistant", "content": bot_msg})
             return history
         
+        def clear_chat():
+            return [{
+                "role": "assistant", 
+                "content": "Hey! Willkommen bei Fivestars! Was kann ich für dich tun?"
+            }]
+        
         msg.submit(user_message, [msg, chatbot], [msg, chatbot]).then(
             bot_response, chatbot, chatbot
         )
         submit.click(user_message, [msg, chatbot], [msg, chatbot]).then(
             bot_response, chatbot, chatbot
         )
+        clear.click(clear_chat, None, chatbot)
     
     demo.launch(inbrowser=True)