| import gradio as gr |
| import os |
| from groq import Groq |
|
|
| api_key = os.getenv("GROQ_API_KEY") |
| client = Groq(api_key=api_key) |
|
|
| def chat_with_bot_stream(user_input, conversation_history): |
| if conversation_history is None: |
| conversation_history = [] |
|
|
| conversation_history.append({"role": "user", "content": user_input}) |
|
|
| |
| 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" |
| "If you're unable to provide a recommendation, let the user know and suggest they try rephrasing their question.\n\n" |
| "Remember to always be polite, engaging, and helpful. Make sure to keep the conversation flowing and the user engaged." |
| "Make sure to match the user's tone and energy, and always be respectful and professional." |
| "If a user sends lots of prompts back-to-back, politely ask them to slow down and clarify what they would like" |
| ) |
| }) |
|
|
| 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 |
|
|
|
|
| |
| translations = { |
| "English": { |
| "header_description": "Your own personal music discovery assistant!", |
| "user_input_placeholder": "Enter your music-related questions here!", |
| "send_button": "↗️ Send", |
| "clear_button": "🗑️ Clear", |
| "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"], |
| "inspiration_heading": "Need inspiration? Try asking about one of these topics:", |
| "example_questions": [ |
| "🎵 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?" |
| ] |
| }, |
| "Spanish": { |
| "header_description": "¡Tu asistente personal para descubrir música!", |
| "user_input_placeholder": "¡Introduce tus preguntas relacionadas con la música!", |
| "send_button": "↗️ Enviar", |
| "clear_button": "🗑️ Limpiar", |
| "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"], |
| "inspiration_heading": "¿Necesitas inspiración? Prueba preguntar sobre uno de estos temas:", |
| "example_questions": [ |
| "🎵 ¿Qué buena música ambiental recomiendas para estudiar?", |
| "🔥 ¿Qué artistas indie están en auge ahora mismo?", |
| "🎷 ¿Puedes recomendar álbumes icónicos de jazz?", |
| "🎶 Necesito una lista de reproducción para entrenar, ¿alguna sugerencia?", |
| "💿 ¿Qué álbumes de rock clásico debería escuchar?", |
| "🎧 ¿Qué artista poco reconocido debería escuchar?" |
| ] |
| }, |
| "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", |
| "clear_button": "🗑️ Effacer", |
| "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"], |
| "inspiration_heading": "Besoin d'inspiration ? Essayez de poser l'une de ces questions :", |
| "example_questions": [ |
| "🎵 Quelle bonne musique d'ambiance pour étudier ?", |
| "🔥 Quels artistes indie font sensation en ce moment ?", |
| "🎷 Peux-tu recommander des albums de jazz emblématiques ?", |
| "🎶 J'ai besoin d'une playlist pour m'entraîner, des suggestions ?", |
| "💿 Quels albums de rock classique devrais-je écouter ?", |
| "🎧 Quel artiste sous-estimé devrais-je découvrir ?" |
| ] |
| } |
| } |
|
|
| |
| 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"} |
|
|
| |
| 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: |
| 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 font_size 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) |
| |
| |
| 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'<p id="header_description">{t["header_description"]}</p>' |
| clear_button_text = t["clear_button"] |
| inspiration_html = f'<h3 style="text-align: center;">{t["inspiration_heading"]}</h3>' |
| |
| 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), |
| gr.update(value=clear_button_text), |
| gr.update(value=inspiration_html), |
| gr.update(choices=t["example_questions"]) |
| ) |
|
|
|
|
| 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""" |
| <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; |
| font-size: {fsize} !important; |
| font-family: 'Inter', sans-serif; |
| margin: 0; |
| padding: 0; |
| }} |
| |
| #header_section {{ |
| width: 400px; |
| height: 100px; |
| background: url("https://huggingface.co/spaces/MusifyLTD/Musify/resolve/main/logo.png") |
| no-repeat center center; |
| background-size: contain; |
| margin: 0px auto; |
| margin-bottom: -10px; |
| }} |
| |
| #header_description {{ |
| text-align: center; |
| color: {text_color} !important; |
| font-size: {fsize} !important; |
| margin-top: -10px; |
| margin-bottom: 10px; |
| }} |
| |
| #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; |
| }} |
| |
| #user_input {{ |
| background-color: {purple} !important; |
| border: none; |
| height: 65px; |
| }} |
| |
| #user_input textarea {{ |
| background-color: {light_purple} !important; |
| color: {button_text_color} !important; |
| font-size: {fsize} !important; |
| border: 0.5px solid {light_purple} !important; |
| padding: 10px; |
| }} |
| |
| #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: {button_text_color} !important; |
| font-size: {fsize} !important; |
| border: none; |
| border-radius: 6px; |
| margin-left: 1px; |
| font-family: 'Inter', sans-serif; |
| 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: 13%; |
| 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; |
| color: {text_color} !important; |
| font-size: {fsize} !important; |
| border: {border_color} solid 0.5px; |
| border-radius: 6px; |
| padding: 10px; |
| margin: 10px; |
| }} |
| |
| 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; |
| }} |
| |
| .form.svelte-633qhp {{ |
| border: {border_color} solid 0.5px; |
| border-radius: 6px; |
| }} |
| |
| label[data-testid] {{ |
| background-color: {bg} !important; |
| color: {text_color} !important; |
| }} |
| |
| [data-testid="block-info"] {{ |
| color: {text_color} !important; |
| }} |
| |
| div[role="tablist"] {{ |
| border: 1px; |
| border-radius: 8px; |
| padding: {tab_padding} !important; |
| height: auto !important; |
| min-height: 0 !important; |
| }} |
| |
| div[role="tab"] {{ |
| font-size: {fsize} !important; |
| padding: {tab_padding} !important; |
| color: {text_color} !important; |
| }} |
| |
| button[role="tab"][aria-selected="true"]::after {{ |
| background-color:{light_purple} !important; |
| }} |
| |
| button[role="tab"][aria-selected="true"] {{ |
| color: {text_color} !important; |
| }} |
| |
| button[role="tab"][aria-selected="false"] {{ |
| background-color:transparent !important; |
| color: #616161 !important; |
| }} |
| |
| input[type="radio"] {{ |
| background-color: #795699 !important; |
| }} |
| |
| input[type="radio"]:checked {{ |
| background-color: #56246B !important; |
| border-color: #795699 !important; |
| }} |
| |
| .user.svelte-pcjl1g.message {{ |
| background-color: {user_msg_bg_color} !important; |
| color: {msg_text_color} !important; |
| }} |
| |
| .bot.svelte-pcjl1g.message {{ |
| background-color: {bot_msg_bg_color} !important; |
| color: {msg_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> |
| """ |
| return style |
|
|
| def load_chat_history(chat_history): |
| if chat_history is None: |
| return [] |
| return [ |
| ( |
| msg["content"] if msg["role"] == "user" else None, |
| msg["content"] if msg["role"] == "assistant" else None |
| ) |
| for msg in chat_history |
| ] |
|
|
| |
| 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('<div id="header_section"></div>') |
| header_desc = gr.HTML('<p id="header_description">' + translations["English"]["header_description"] + '</p>') |
| chatbot = gr.Chatbot(label="", height=500, show_label=False, elem_id="chatbot", show_copy_button=False, show_copy_all_button=False, show_share_button=False) |
| |
| 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=13 |
| ) |
| send_button = gr.Button( |
| value=translations["English"]["send_button"], |
| elem_id="send_button", |
| scale=2 |
| ) |
| clear_button = gr.Button( |
| value=translations["English"]["clear_button"], |
| elem_id="send_button", |
| scale=2 |
| ) |
|
|
| conversation_state = gr.BrowserState([]) |
| demo.load(load_chat_history, inputs=[conversation_state], outputs=[chatbot]) |
| |
| gr.HTML("<br>") |
| |
| inspiration_heading = gr.HTML('<h3 style="text-align: center;">' + translations["English"]["inspiration_heading"] + '</h3>') |
| |
| example_questions = gr.Radio( |
| choices=translations["English"]["example_questions"], |
| label="", |
| interactive=True, |
| elem_id="example_questions" |
| ) |
|
|
| example_questions.change( |
| fn=lambda x: chat_with_bot_stream(x, conversation_state.value[:1]), |
| inputs=example_questions, |
| outputs=[chatbot, conversation_state] |
| ) |
|
|
| user_input.submit( |
| fn=chat_with_bot_stream, |
| inputs=[user_input, conversation_state], |
| outputs=[chatbot, conversation_state] |
| ).then( |
| fn=lambda: "", |
| inputs=None, |
| outputs=user_input |
| ) |
|
|
| 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 |
| ) |
|
|
| clear_button.click( |
| fn=lambda: ([], []), |
| inputs=None, |
| outputs=[chatbot, conversation_state] |
| ) |
|
|
| |
| 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, |
| clear_button, |
| inspiration_heading, |
| example_questions |
| ] |
| ) |
|
|
| demo.launch() |
