Update app.py

app.py

@@ -47,92 +47,403 @@ def chat_with_bot_stream(user_input):
         for msg in conversation_history
     ]
 
-custom_css = """
-/* Overall page background */
-body, .gradio-container {
-    background-color: #18181B !important;
-    color: #FFFFFF !important;
-    font-family: sans-serif;
-    margin: 0;
-    padding: 0;
+# 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_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", "Spanish", "French"]
+    },
+    "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_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": ["Inglés", "Español", "Francés"]
+    },
+    "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_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": ["Anglais", "Espagnol", "Français"]
+    }
 }
 
-/* Headings, titles, etc. */
-h1, h2, h3, h4, h5, h6, label {
-    color: #795699 !important;
-}
+# 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"}
 
-/* Main 'white' box for the chatbot area */
-#main_box {
-    position: relative;
-    background-color: #E7E7E8; 
-    margin: 0 auto;
-    width: 80%;
-    border-radius: 8px;
-    padding: 20px;
-    min-height: 300px;
-}
+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"}
 
-/* Chatbot bubbles inside the #main_box */
-.gr-chatbot .bot, .gr-chatbot .user  {
-    color: #CFCFCF !important;
-}
+# 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"
 
-/* Textbox style */
-textarea, input[type=text] {
-    background-color: #18181B !important;
-    color: #FFFFFF !important;
-    border: 1px solid #795699 !important;
-    border-radius: 4px !important;
-}
+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'<p id="header_description">{t["header_description"]}</p>'
+    
+    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)
+    )
 
-/* Button style */
-button {
-    background-color: #56246B !important;
-    color: #FFFFFF !important;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-}
-button:hover {
-    background-color: #795699 !important;
-}
-"""
 
-TITLE = """
-<div style='text-align: center;'>
-  <h1 style='margin-bottom: 0;'>MUSIFY</h1>
-  <p style='margin-top: 5px; color: #795699;'>Your own personal music discovery assistant!</p>
-</div>
-"""
+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 = "#888888"
+        chatbot_bg = "#18181B"
+        chatbot_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 = "#666666"
+        chatbot_bg = "#cfcfcf"
+        chatbot_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;
+    }}
+
+    h3 {{
+        color: {text_color} !important;
+    }}
+    
+    #chatbot {{
+        background-color: {chatbot_bg} !important;
+        color: {chatbot_text_color} !important;
+        font-size: {fsize} !important;
+    }}
+
+    div[role="log"] {{
+        background-color: {chatbot_bg} !important;
+        color: {chatbot_text_color} !important;
+    }}
 
-with gr.Blocks(css=custom_css) as demo:
+    div[data-testid="bot"], div[data-testid="user"] {{
+        color: {chatbot_text_color} !important;
+    }}
+    
+    #user_input {{
+        background-color: {button_bg} !important;
+        border: 1px solid {border_color} !important;
+        height: 65px;
+    }}
+    #user_input textarea {{
+        background-color: {input_bg} !important;
+        color: {text_color} !important;
+        font-size: {fsize} !important;
+        border: 1px solid {border_color} !important;
+        padding: 10px;
+        border: none;
+    }}
+    #user_input textarea::placeholder {{
+        color: {placeholder_color} !important;
+        font-size: {fsize} !important;
+        opacity: 0.73;
+    }}
+    
+    #send_button {{
+        background-color: {button_bg} !important;
+        color: {text_color} !important;
+        font-size: {fsize} !important;
+        border: 1px solid {border_color} !important;
+        margin-left: 1px;
+        font-family: 'Inter', sans-serif;
+        height: 67px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 10px;
+    }}
+    
+    #settings_box {{
+        background-color: {settings_box_bg} !important;
+        padding: 10px;
+        border-radius: 8px;
+        font-size: {fsize} !important;
+        border: 1px solid {border_color} !important;
+    }}
+    #settings_box .gr-markdown h3 {{
+        color: {settings_heading_color} !important;
+        font-size: {fsize} !important;
+    }}
+    
+    #settings_box .gr-radio-group, 
+    #settings_box .gr-radio-group * {{
+        background-color: {radio_bg} !important;
+        color: {text_color} !important;
+        font-size: {fsize} !important;
+    }}
+    
+    #apply_settings_button {{
+        background-color: {apply_button_bg} !important;
+        color: {text_color} !important;
+        font-size: {fsize} !important;
+        border: 1px solid {border_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:#56246B !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;
+    }}
+
+    fieldset {{
+        background-color: {settings_box_bg} !important;
+        color: {text_color} !important;
+    }}
+
+    label[data-testid] {{
+        background-color: {bg} !important;
+        color: {text_color} !important;
+    }}
+
+    [data-testid="block-info"] {{
+        color: {text_color} !important;
+    }}
+
+    </style>
+    """
+    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("Main Page"):
-            gr.HTML(TITLE)
-            
-            with gr.Column(elem_id="main_box"):
-                chatbot = gr.Chatbot(label="Chat Output", height=300)
-            
+        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")
             with gr.Row():
                 user_input = gr.Textbox(
-                    placeholder="Type your question here...",
-                    lines=1
+                    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
                 )
-                send_button = gr.Button(value="🚀", elem_id="send_button_icon")
-            
             send_button.click(
                 fn=chat_with_bot_stream,
                 inputs=user_input,
-                outputs=chatbot,
-                queue=True
+                outputs=chatbot
             ).then(
                 fn=lambda: "",
                 inputs=None,
                 outputs=user_input
             )
-
-        with gr.TabItem("Settings"):
-            gr.Markdown("## Settings Page\n\nfjkfhkjgfkj")
-
-demo.launch()
+        
+        # SETTINGS PAGE
+        with gr.TabItem("⚙️ Settings"):
+            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()