import gradio as gr import os 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\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" ) }) completion = client.chat.completions.create( model="llama-3.3-70b-versatile", messages=conversation_history, temperature=0.95, max_tokens=1024, top_p=0.9, stream=True, ) response_content = "" for chunk in completion: response_content += chunk.choices[0].delta.content or "" conversation_history.append({"role": "assistant", "content": response_content}) return [ (msg["content"] if msg["role"] == "user" else None, msg["content"] if msg["role"] == "assistant" else None) for msg in conversation_history ], conversation_history # word translation translations = { "English": { "header_description": "Your own personal music discovery assistant!", "user_input_placeholder": "Enter your music-related questions here!", "send_button": "↗️ Send", "settings_tab_item": "⚙️ Settings", "settings_markdown": "### Settings", "apply_settings_button": "Apply Settings", "select_language_label": "🌐 Language", "theme_label": "🌗 Theme", "theme_choices": ["Dark", "Light"], "font_size_label": "🗛 Font Size", "font_size_choices": ["Small", "Medium", "Large"], "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", "settings_tab_item": "⚙️ Configuración", "settings_markdown": "### Configuración", "apply_settings_button": "Aplicar Configuración", "select_language_label": "🌐 Idioma", "theme_label": "🌗 Tema", "theme_choices": ["Oscuro", "Claro"], "font_size_label": "🗛 Tamaño de Fuente", "font_size_choices": ["Pequeño", "Mediano", "Grande"], "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", "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_choices": ["Sombre", "Clair"], "font_size_label": "🗛 Taille de police", "font_size_choices": ["Petit", "Moyen", "Grand"], "language_choices": ["English", "Español", "Français"] } } # translations for theme english_to_spanish_theme = {"Dark": "Oscuro", "Light": "Claro"} spanish_to_english_theme = {"Oscuro": "Dark", "Claro": "Light"} english_to_french_theme = {"Dark": "Sombre", "Light": "Clair"} french_to_english_theme = {"Sombre": "Dark", "Clair": "Light"} english_to_spanish_font = {"Small": "Pequeño", "Medium": "Mediano", "Large": "Grande"} spanish_to_english_font = {"Pequeño": "Small", "Mediano": "Medium", "Grande": "Large"} english_to_french_font = {"Small": "Petit", "Medium": "Moyen", "Large": "Grand"} french_to_english_font = {"Petit": "Small", "Moyen": "Medium", "Grand": "Large"} # I wanted to include the c in Fraincais and the spanish e and n in Spanish def normalize_language(lang): if lang in ["English", "Inglés", "Anglais"]: return "English" elif lang in ["Spanish", "Español", "Espagnol"]: return "Spanish" elif lang in ["French", "Français"]: return "French" else: return "English" def update_all_settings(theme, font_size, language): target_lang = normalize_language(language) t = translations[target_lang] if target_lang == "Spanish": theme_for_ui = english_to_spanish_theme.get(theme, theme) if theme in english_to_spanish_theme else theme if theme in spanish_to_english_theme else "Oscuro" elif target_lang == "French": theme_for_ui = english_to_french_theme.get(theme, theme) if theme in english_to_french_theme else theme if theme in french_to_english_theme else "Sombre" else: # target is English theme_for_ui = spanish_to_english_theme.get(theme, theme) if theme in spanish_to_english_theme else theme if theme in english_to_spanish_theme else "Dark" if target_lang == "Spanish": font_for_ui = english_to_spanish_font.get(font_size, font_size) if font_size in english_to_spanish_font else font_size if font_size in spanish_to_english_font else "Mediano" elif target_lang == "French": font_for_ui = english_to_french_font.get(font_size, font_size) if font_size in english_to_french_font else font_size if font_size in french_to_english_font else "Moyen" else: font_for_ui = spanish_to_english_font.get(font_size, font_size) if font_size in spanish_to_english_font else font_size if theme in english_to_spanish_font else "Medium" if theme in ["Dark", "Light"]: theme_for_style = theme elif theme in spanish_to_english_theme: theme_for_style = spanish_to_english_theme.get(theme, "Dark") elif theme in french_to_english_theme: theme_for_style = french_to_english_theme.get(theme, "Dark") else: theme_for_style = "Dark" if font_size in ["Small", "Medium", "Large"]: font_for_style = font_size elif font_size in spanish_to_english_font: font_for_style = spanish_to_english_font.get(font_size, "Medium") elif font_size in french_to_english_font: font_for_style = french_to_english_font.get(font_size, "Medium") else: font_for_style = "Medium" dynamic_style = update_styles(theme_for_style, font_for_style) #Languages if target_lang == "English": language_value = "English" elif target_lang == "Spanish": language_value = "Español" elif target_lang == "French": language_value = "Français" header_html = f'

{t["header_description"]}

' return ( dynamic_style, gr.update(value=header_html), gr.update(placeholder=t["user_input_placeholder"]), gr.update(value=t["send_button"]), gr.update(value=t["settings_markdown"]), gr.update(value=t["apply_settings_button"]), gr.update(label=t["theme_label"], choices=t["theme_choices"], value=theme_for_ui), gr.update(label=t["font_size_label"], choices=t["font_size_choices"], value=font_for_ui), gr.update(label=t["select_language_label"], choices=t["language_choices"], value=language_value) ) def update_styles(theme, font_size): if theme == "Dark": bg = "#18181B" text_color = "#EAEAEA" button_bg = "#56246B" radio_bg = "#444444" border_color = "#444444" placeholder_color = "#e8e8e8" 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 = "#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="#e0e0e0" bot_msg_bg_color="#cccccc" msg_text_color="#000000" if font_size == "Small": fsize = "0.8rem" tab_padding = "4px 8px" elif font_size == "Medium": fsize = "1.2rem" tab_padding = "6px 12px" elif font_size == "Large": fsize = "1.8rem" tab_padding = "8px 16px" else: fsize = "1rem" tab_padding = "5px 10px" style = f""" """ return style # Gradio build stuff actually starts here with gr.Blocks(css=None) as demo: dynamic_styles = gr.HTML(value=update_styles("Dark", "Medium")) with gr.Tabs(): with gr.TabItem("💬 Chatbot"): gr.HTML('
') header_desc = gr.HTML('

' + translations["English"]["header_description"] + '

') chatbot = gr.Chatbot(label="", height=500, show_label=False, elem_id="chatbot") with gr.Row(): user_input = gr.Textbox( show_label=False, lines=1, placeholder=translations["English"]["user_input_placeholder"], interactive=True, elem_id="user_input", scale=15 ) send_button = gr.Button( value=translations["English"]["send_button"], elem_id="send_button", scale=1 ) conversation_state = gr.State(value=[]) gr.HTML("
") gr.HTML("

Need inspiration? Try asking about one of these topics:

") 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], outputs=[chatbot, conversation_state] ).then( fn=lambda: "", inputs=None, outputs=user_input ) # SETTINGS PAGE 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( choices=translations["English"]["theme_choices"], value="Dark", label=translations["English"]["theme_label"], ) font_radio = gr.Radio( choices=translations["English"]["font_size_choices"], value="Medium", label=translations["English"]["font_size_label"], ) language_radio = gr.Radio( choices=translations["English"]["language_choices"], value="English", label=translations["English"]["select_language_label"], ) apply_button = gr.Button( translations["English"]["apply_settings_button"], elem_id="apply_button", ) apply_button.click( fn=update_all_settings, inputs=[theme_radio, font_radio, language_radio], outputs=[ dynamic_styles, header_desc, user_input, send_button, settings_md, apply_button, theme_radio, font_radio, language_radio ] ) demo.launch()