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\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." ) }) 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 = "#ffffff" input_bg = "#2E2E2E" button_bg = "#3A3A3A" settings_box_bg = "#2E2E2E" apply_button_bg = "#3A3A3A" radio_bg = "#2E2E2E" settings_heading_color = text_color border_color = "#444444" placeholder_color = "#e8e8e8" chatbot_bg = "#18181B" chatbot_text_color = "#ffffff" purple="#56246B" light_purple="#795699" 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" chatbot_text_color = "#000000" purple="#56246B" light_purple="#795699" 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=400, 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=[]) 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_settings_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()