Add theme selector with JavaScript reload

app.py

@@ -481,6 +481,23 @@ def update_ui_for_language(lang):
     )
 
 
+# Available themes
+THEMES = {
+    "Soft": gr.themes.Soft(),
+    "Default": gr.themes.Default(),
+    "Monochrome": gr.themes.Monochrome(),
+    "Base": gr.themes.Base(),
+    "Glass": gr.themes.Glass(),
+}
+
+THEME_CSS = {
+    "Soft": "",
+    "Default": "",
+    "Monochrome": "",
+    "Base": "",
+    "Glass": "",
+}
+
 with gr.Blocks(
     title="IsemPoeticVoice",
     theme=gr.themes.Soft(),
@@ -490,13 +507,22 @@ with gr.Blocks(
     .rtl textarea, .rtl input { direction: rtl !important; text-align: right !important; }
     """,
 ) as demo:
-    # Language selector
-    lang_selector = gr.Dropdown(
-        label="Language / اللغة",
-        choices=["العربية", "English", "Français", "Español", "Türkçe"],
-        value="العربية",
-        interactive=True,
-    )
+    # Language and theme selectors
+    with gr.Row():
+        lang_selector = gr.Dropdown(
+            label="Language / اللغة",
+            choices=["العربية", "English", "Français", "Español", "Türkçe"],
+            value="العربية",
+            interactive=True,
+            scale=1,
+        )
+        theme_selector = gr.Dropdown(
+            label="Theme / المظهر",
+            choices=["Soft", "Default", "Monochrome", "Base", "Glass"],
+            value="Soft",
+            interactive=True,
+            scale=1,
+        )
 
     # Title and subtitle
     title_md = gr.Markdown(
@@ -602,6 +628,19 @@ with gr.Blocks(
         ],
     )
 
+    # Update theme when theme selector changes
+    theme_selector.change(
+        fn=None,
+        inputs=[theme_selector],
+        outputs=None,
+        js="""
+        function(theme) {
+            localStorage.setItem('gradio_theme', theme);
+            location.reload();
+        }
+        """,
+    )
+
     generate_button.click(
         fn=generate_poetry,
         inputs=[user_text, style, creativity],