Update app.py

app.py

@@ -5,27 +5,36 @@ from groq import Groq
 api_key = os.getenv("GROQ_API_KEY")
 client = Groq(api_key=api_key)
 
+# TODO for solin: add new translations
+
 def chat_with_bot_stream(user_input, conversation_history):
     if conversation_history is None:
         conversation_history = []
 
     conversation_history.append({"role": "user", "content": user_input})
 
+    # Provide an engaging system message and introduce the chatbot with example questions
     if len(conversation_history) == 1:
         conversation_history.insert(0, {
             "role": "system",
             "content": (
                 "You are a music and genre recommendation bot designed to help users discover new music "
-                "based on their preferences, mood, or activity.\n\nYour responses should be engaging, "
-                "personalized, and insightful. You can recommend:\n\n- Specific songs, albums, or artists\n"
-                "- Genres based on mood, activity, or past preferences\n- Hidden gems and deep cuts "
-                "for music enthusiasts\n- Trending or classic hits based on user taste\n\nBe conversational, "
-                "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." 
+                "based on their preferences, mood, or activity.\n\n"
+                "Your responses should be engaging, personalized, and insightful. You can recommend:\n\n"
+                "- Specific songs, albums, or artists\n"
+                "- Genres based on mood, activity, or past preferences\n"
+                "- Hidden gems and deep cuts for music enthusiasts\n"
+                "- Trending or classic hits based on user taste\n\n"
+                "Be conversational, 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.\n\n"
+                "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.\n\n"
+                "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.\n\n"
+                "Limit your responses to music-related inquiries only. Limit your responses to 15 lines or less.\n\n"
+                "If you do not recognize an artist/genre/album/song name, try to clarify further, and if you still don't recognize it let the user know that you're not familiar with said artist/genre/album/song.\n\n"
+                "Encourage users to continue the conversation. If you suggest music, offer to refine your recommendations further, "
+                "such as recommending more similar artists, making a mini playlist, or adjusting based on user feedback.\n\n"
             )
         })
 
@@ -48,7 +57,8 @@ def chat_with_bot_stream(user_input, conversation_history):
         (msg["content"] if msg["role"] == "user" else None,
          msg["content"] if msg["role"] == "assistant" else None)
         for msg in conversation_history
-    ], conversation_history 
+    ], conversation_history
+
 
 # word translation
 translations = {
@@ -180,35 +190,39 @@ def update_all_settings(theme, font_size, language):
 
 def update_styles(theme, font_size):
     if theme == "Dark":
-        bg = "#18181B"
-        text_color = "#ffffff"
-        input_bg = "#2E2E2E"
-        button_bg = "#3A3A3A"
-        settings_box_bg = "#2E2E2E"
-        apply_button_bg = "#3A3A3A"
-        radio_bg = "#2E2E2E"
-        settings_heading_color = text_color
+        bg = "#18181B" 
+        text_color = "#EAEAEA"
+        button_bg = "#56246B"
+        radio_bg = "#444444"
         border_color = "#444444"
         placeholder_color = "#e8e8e8"
-        chatbot_bg = "#18181B"
+        button_text_color = "#ffffff"
+        chatbot_bg = "#212125"
+        settings_box_bg = chatbot_bg
         chatbot_text_color = "#ffffff"
         purple="#56246B"
         light_purple="#795699"
+        settings_heading_color = text_color
+        user_msg_bg_color="#333333"
+        bot_msg_bg_color="#1F1F1F"
+        msg_text_color="#FFFFFF"
     else:
-        bg = "#ffffff"
-        text_color = "#000000"
-        input_bg = "#f2f2f2"
-        button_bg = "#dddddd"
-        settings_box_bg = "#eeeeee"
-        apply_button_bg = "#e0e0e0"
-        radio_bg = "#e0e0e0"
-        settings_heading_color = "#333333"
-        border_color = "#cccccc"
-        placeholder_color = "#e8e8e8"
-        chatbot_bg = "#cfcfcf"
+        bg = "#F2F2F2"
+        text_color = "#1C1C1C"
+        button_bg = "#56246B"
+        radio_bg = "#CCCCCC"
+        border_color = "#B0B0B0"
+        placeholder_color = "#EAEAEA"
+        button_text_color = "#ffffff"
+        chatbot_bg = "#fcfcfc" 
+        settings_box_bg = chatbot_bg
         chatbot_text_color = "#000000"
         purple="#56246B"
         light_purple="#795699"
+        settings_heading_color = "#333333"
+        user_msg_bg_color="#cccccc"
+        bot_msg_bg_color="#e0e0e0"
+        msg_text_color="#000000"
     
     if font_size == "Small":
         fsize = "0.8rem"
@@ -226,6 +240,7 @@ def update_styles(theme, font_size):
     style = f"""
     <style id="dynamic_styles">
     @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
+
     body, .gradio-container {{
         background-color: {bg} !important;
         color: {text_color} !important;
@@ -253,44 +268,39 @@ def update_styles(theme, font_size):
         margin-bottom: 10px;
     }}
 
-    h3 {{
-        color: {text_color} !important;
-        text-align: center;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 100%;
-        font-size: {fsize} !important;
-    }}
-    
     #chatbot {{
         background-color: {chatbot_bg} !important;
         color: {chatbot_text_color} !important;
         font-size: {fsize} !important;
+        border: {border_color} solid 0.5px;
+    }}
+
+    fieldset {{
+        background-color: {settings_box_bg} !important;
+        color: {text_color} !important;
+        border: none;
+        margin: 0;
     }}
 
     div[role="log"] {{
+        border: none;
         background-color: {chatbot_bg} !important;
         color: {chatbot_text_color} !important;
+        font-size: {fsize} !important;
     }}
 
-    div[data-testid="bot"], div[data-testid="user"] {{
-        color: {chatbot_text_color} !important;
-    }}
-    
     #user_input {{
         background-color: {purple} !important;
-        border: 1px solid {purple} !important;
+        border: none;
         height: 65px;
     }}
 
     #user_input textarea {{
         background-color: {light_purple} !important;
-        color: {text_color} !important;
+        color: {button_text_color} !important;
         font-size: {fsize} !important;
-        border: 1px solid {light_purple} !important;
+        border: 0.5px solid {light_purple} !important;
         padding: 10px;
-        border: none;
     }}
 
     #user_input textarea::placeholder {{
@@ -299,48 +309,78 @@ def update_styles(theme, font_size):
         font-size: {fsize} !important;
         opacity: 0.73;
     }}
-    
+
     #send_button {{
-        background-color: {purple} !important;
-        color: {placeholder_color} !important;
+        background-color: {button_bg} !important;
+        color: {button_text_color} !important;
         font-size: {fsize} !important;
-        border: 1px solid {purple} !important;
+        border: none;
+        border-radius: 6px;
         margin-left: 1px;
         font-family: 'Inter', sans-serif;
-        height: 67px;
+        height: 65px;
         display: flex;
         align-items: center;
         justify-content: center;
         padding: 0 10px;
+        transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
+    }}
+
+    #send_button:hover {{
+        background-color: {light_purple} !important;
+    }}
+
+    #apply_button {{
+        background-color: {button_bg} !important;
+        color: {button_text_color} !important;
+        font-size: {fsize} !important;
+        border: none;
+        border-radius: 6px;
+        width: 20%;
+        align-self: center;
+        font-family: 'Inter', sans-serif;
+        transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
     }}
     
+    #apply_button:hover {{
+        background-color: {light_purple} !important;
+    }}
+
     #settings_box {{
         background-color: {settings_box_bg} !important;
-        padding: 10px;
-        border-radius: 8px;
+        color: {text_color} !important;
         font-size: {fsize} !important;
-        border: 1px solid {border_color} !important;
+        border: {border_color} solid 0.5px;
+        border-radius: 6px;
+        padding: 10px;
+        margin: 10px;
     }}
 
-    #settings_box .gr-markdown h3 {{
-        color: {settings_heading_color} !important;
+    h3 {{
+        color: {text_color} !important;
+        font-weight: 600;
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
         font-size: {fsize} !important;
     }}
-    
-    #settings_box .gr-radio-group, 
-    #settings_box .gr-radio-group * {{
-        background-color: {radio_bg} !important;
+
+    .form.svelte-633qhp {{
+        border: {border_color} solid 0.5px;
+        border-radius: 6px;
+    }}
+
+    label[data-testid] {{
+        background-color: {bg} !important;
         color: {text_color} !important;
-        font-size: {fsize} !important;
     }}
-    
-    #apply_settings_button {{
-        background-color: {purple} !important;
-        color: {placeholder_color} !important;
-        font-size: {fsize} !important;
-        border: 1px solid {border_color} !important;
+
+    [data-testid="block-info"] {{
+        color: {text_color} !important;
     }}
-    
+
     div[role="tablist"] {{
         border: 1px;
         border-radius: 8px;
@@ -348,6 +388,7 @@ def update_styles(theme, font_size):
         height: auto !important;
         min-height: 0 !important;
     }}
+
     div[role="tab"] {{
         font-size: {fsize} !important;
         padding: {tab_padding} !important;
@@ -355,7 +396,7 @@ def update_styles(theme, font_size):
     }}
 
     button[role="tab"][aria-selected="true"]::after {{
-        background-color:#56246B !important;
+        background-color:{light_purple} !important;
     }}
 
     button[role="tab"][aria-selected="true"] {{
@@ -366,7 +407,7 @@ def update_styles(theme, font_size):
         background-color:transparent !important;
         color: #616161 !important;
     }}
-    
+
     input[type="radio"] {{
         background-color: #795699 !important;
     }}
@@ -376,18 +417,32 @@ def update_styles(theme, font_size):
         border-color: #795699 !important;
     }}
 
-    fieldset {{
-        background-color: {settings_box_bg} !important;
-        color: {text_color} !important;
+    .user.svelte-pcjl1g.message {{
+        background-color: {user_msg_bg_color} !important;
+        color: {msg_text_color} !important;
     }}
 
-    label[data-testid] {{
-        background-color: {bg} !important;
-        color: {text_color} !important;
+    .bot.svelte-pcjl1g.message {{
+        background-color: {bot_msg_bg_color} !important;
+        color: {msg_text_color} !important;
     }}
 
-    [data-testid="block-info"] {{
-        color: {text_color} !important;
+    .md.svelte-7ddecg.chatbot.prose > p {{
+        color: {msg_text_color} !important;
+        font-size: {fsize} !important;
+    }}
+
+    #example_questions {{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 10px;
+    text-align: center;
+    }}
+
+    #example_questions .wrap.svelte-1kzox3m {{
+        display: contents;
     }}
 
     </style>
@@ -402,7 +457,8 @@ with gr.Blocks(css=None) as demo:
         with gr.TabItem("💬 Chatbot"):
             gr.HTML('<div id="header_section"></div>')
             header_desc = gr.HTML('<p id="header_description">' + translations["English"]["header_description"] + '</p>')
-            chatbot = gr.Chatbot(label="", height=400, show_label=False, elem_id="chatbot")
+            chatbot = gr.Chatbot(label="", height=500, show_label=False, elem_id="chatbot")
+            
             with gr.Row():
                 user_input = gr.Textbox(
                     show_label=False, 
@@ -419,6 +475,29 @@ with gr.Blocks(css=None) as demo:
                 )
             conversation_state = gr.State(value=[])
 
+            gr.HTML("<br>")
+            gr.HTML("<h3 style='text-align: center; color: {text_color};'>Need inspiration? Try asking about one of these topics:</h3>")
+
+            example_questions = gr.Radio(
+                choices=[
+                    "🎵 What's some good background music for studying?",
+                    "🔥 Which indie artists are blowing up right now?",
+                    "🎷 Can you recommend iconic jazz albums?",
+                    "🎶 I need a workout playlist—any suggestions?",
+                    "💿 What classic rock albums should I listen to?",
+                    "🎧 Who’s an underrated artist I should check out?"
+                ],
+                label="",
+                interactive=True,
+                elem_id="example_questions"
+            )
+
+            example_questions.change(
+                fn=lambda x: chat_with_bot_stream(x, conversation_state.value),
+                inputs=example_questions,
+                outputs=[chatbot, conversation_state]
+            )
+
             send_button.click(
                 fn=chat_with_bot_stream,
                 inputs=[user_input, conversation_state],
@@ -436,21 +515,21 @@ with gr.Blocks(css=None) as demo:
                 theme_radio = gr.Radio(
                     choices=translations["English"]["theme_choices"],
                     value="Dark",
-                    label=translations["English"]["theme_label"]
+                    label=translations["English"]["theme_label"],
                 )
                 font_radio = gr.Radio(
                     choices=translations["English"]["font_size_choices"],
                     value="Medium",
-                    label=translations["English"]["font_size_label"]
+                    label=translations["English"]["font_size_label"],
                 )
                 language_radio = gr.Radio(
                     choices=translations["English"]["language_choices"],
                     value="English",
-                    label=translations["English"]["select_language_label"]
+                    label=translations["English"]["select_language_label"],
                 )
                 apply_button = gr.Button(
-                    translations["English"]["apply_settings_button"], 
-                    elem_id="apply_settings_button"
+                    translations["English"]["apply_settings_button"],
+                    elem_id="apply_button",
                 )
                 apply_button.click(
                     fn=update_all_settings, 
@@ -467,5 +546,5 @@ with gr.Blocks(css=None) as demo:
                         language_radio
                     ]
                 )
-    
-    demo.launch()
+
+demo.launch()