Update app.py

app.py

@@ -23,6 +23,9 @@ def chat_with_bot_stream(user_input):
                 "suggest multiple options when possible, and encourage users to explore new sounds. "
                 "If requested, provide brief descriptions of artists or genres, and explain why a "
                 "recommendation might suit the user."
+                "If asked about visibility on the website, such as font sizing and themes (dark or light mode ONLY), direct them to the settings tab at the top of the chatbot."
+                "If asked about the languages you speak, you can say that you speak English, Spanish, and French ONLY. Direct the user to the settings tab to change the language."
+                "Limit your responses to music-related inquiries only. Limit your responses to 10 lines or less." 
             )
         })
     
@@ -31,7 +34,7 @@ def chat_with_bot_stream(user_input):
         messages=conversation_history,
         temperature=0.95,
         max_tokens=1024,
-        top_p=1,
+        top_p=0.9,
         stream=True,
     )
     
@@ -52,41 +55,44 @@ translations = {
     "English": {
          "header_description": "Your own personal music discovery assistant!",
          "user_input_placeholder": "Enter your music-related questions here!",
-         "send_button": "Send",
+         "send_button": "↗️ Send",
+         "settings_tab_item": "⚙️ Settings",
          "settings_markdown": "### Settings",
          "apply_settings_button": "Apply Settings",
-         "select_language_label": "Language",
-         "theme_label": "Theme",
+         "select_language_label": "🌐 Language",
+         "theme_label": "🌗 Theme",
          "theme_choices": ["Dark", "Light"],
-         "font_size_label": "Font Size",
+         "font_size_label": "🗛 Font Size",
          "font_size_choices": ["Small", "Medium", "Large"],
-         "language_choices": ["English", "Spanish", "French"]
+         "language_choices": ["English", "Español", "Français"]
     },
     "Spanish": {
          "header_description": "¡Tu asistente personal para descubrir música!",
          "user_input_placeholder": "¡Introduce tus preguntas relacionadas con la música!",
-         "send_button": "Enviar",
+         "send_button": "↗️ Enviar",
+         "settings_tab_item": "⚙️ Configuración",
          "settings_markdown": "### Configuración",
          "apply_settings_button": "Aplicar Configuración",
          "select_language_label": "🌐 Idioma",
-         "theme_label": "Tema",
+         "theme_label": "🌗 Tema",
          "theme_choices": ["Oscuro", "Claro"],
-         "font_size_label": "Tamaño de Fuente",
+         "font_size_label": "🗛 Tamaño de Fuente",
          "font_size_choices": ["Pequeño", "Mediano", "Grande"],
-         "language_choices": ["Inglés", "Español", "Francés"]
+         "language_choices": ["English", "Español", "Français"]
     },
     "French": {
          "header_description": "Votre assistant personnel pour découvrir de la musique !",
          "user_input_placeholder": "Entrez vos questions sur la musique ici !",
-         "send_button": "Envoyer",
+         "send_button": "↗️ Envoyer",
+         "settings_tab_item": "⚙️ Paramètres",
          "settings_markdown": "### Paramètres",
          "apply_settings_button": "Appliquer les paramètres",
          "select_language_label": "🌐 Langue",
-         "theme_label": "Thème",
+         "theme_label": "🌗 Thème",
          "theme_choices": ["Sombre", "Clair"],
-         "font_size_label": "Taille de police",
+         "font_size_label": "🗛 Taille de police",
          "font_size_choices": ["Petit", "Moyen", "Grand"],
-         "language_choices": ["Anglais", "Espagnol", "Français"]
+         "language_choices": ["English", "Español", "Français"]
     }
 }
 
@@ -183,9 +189,11 @@ def update_styles(theme, font_size):
         radio_bg = "#2E2E2E"
         settings_heading_color = text_color
         border_color = "#444444"
-        placeholder_color = "#888888"
+        placeholder_color = "#e8e8e8"
         chatbot_bg = "#18181B"
         chatbot_text_color = "#ffffff"
+        purple="#56246B"
+        light_purple="#795699"
     else:
         bg = "#ffffff"
         text_color = "#000000"
@@ -196,9 +204,11 @@ def update_styles(theme, font_size):
         radio_bg = "#e0e0e0"
         settings_heading_color = "#333333"
         border_color = "#cccccc"
-        placeholder_color = "#666666"
+        placeholder_color = "#e8e8e8"
         chatbot_bg = "#cfcfcf"
         chatbot_text_color = "#000000"
+        purple="#56246B"
+        light_purple="#795699"
     
     if font_size == "Small":
         fsize = "0.8rem"
@@ -245,6 +255,12 @@ def update_styles(theme, font_size):
 
     h3 {{
         color: {text_color} !important;
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        font-size: {fsize} !important;
     }}
     
     #chatbot {{
@@ -263,29 +279,32 @@ def update_styles(theme, font_size):
     }}
     
     #user_input {{
-        background-color: {button_bg} !important;
-        border: 1px solid {border_color} !important;
+        background-color: {purple} !important;
+        border: 1px solid {purple} !important;
         height: 65px;
     }}
+
     #user_input textarea {{
-        background-color: {input_bg} !important;
+        background-color: {light_purple} !important;
         color: {text_color} !important;
         font-size: {fsize} !important;
-        border: 1px solid {border_color} !important;
+        border: 1px solid {light_purple} !important;
         padding: 10px;
         border: none;
     }}
+
     #user_input textarea::placeholder {{
+        background-color: {light_purple} !important;
         color: {placeholder_color} !important;
         font-size: {fsize} !important;
         opacity: 0.73;
     }}
     
     #send_button {{
-        background-color: {button_bg} !important;
-        color: {text_color} !important;
+        background-color: {purple} !important;
+        color: {placeholder_color} !important;
         font-size: {fsize} !important;
-        border: 1px solid {border_color} !important;
+        border: 1px solid {purple} !important;
         margin-left: 1px;
         font-family: 'Inter', sans-serif;
         height: 67px;
@@ -302,6 +321,7 @@ def update_styles(theme, font_size):
         font-size: {fsize} !important;
         border: 1px solid {border_color} !important;
     }}
+
     #settings_box .gr-markdown h3 {{
         color: {settings_heading_color} !important;
         font-size: {fsize} !important;
@@ -315,8 +335,8 @@ def update_styles(theme, font_size):
     }}
     
     #apply_settings_button {{
-        background-color: {apply_button_bg} !important;
-        color: {text_color} !important;
+        background-color: {purple} !important;
+        color: {placeholder_color} !important;
         font-size: {fsize} !important;
         border: 1px solid {border_color} !important;
     }}
@@ -408,7 +428,7 @@ with gr.Blocks(css=None) as demo:
             )
         
         # SETTINGS PAGE
-        with gr.TabItem("⚙️ Settings"):
+        with gr.TabItem(translations["English"]["settings_tab_item"]):
             with gr.Column(elem_id="settings_box"):
                 settings_md = gr.Markdown(translations["English"]["settings_markdown"])
                 theme_radio = gr.Radio(