Update gradio_dashboard.py

gradio_dashboard.py

@@ -173,29 +173,134 @@ def get_thumbnails(category: str) -> list[str]:
 categories = ["All"] + sorted(books["simple_categories"].unique())
 tones = ["All", "Happy", "Surprising", "Angry", "Suspenseful", "Sad"]
 
+# Obsidian Dark Theme - Modern Minimalism
+obsidian_theme = gr.themes.Base(  # type: ignore
+    primary_hue="purple",
+    secondary_hue="slate",
+    neutral_hue="slate",
+).set(
+    # Dark surfaces
+    body_background_fill="#13111C",
+    body_background_fill_dark="#13111C",
+    body_text_color="#E9E6F2",
+    body_text_color_dark="#E9E6F2",
+    body_text_color_subdued="#8B8699",
+    body_text_color_subdued_dark="#8B8699",
+    # Backgrounds
+    background_fill_primary="#1C1829",
+    background_fill_primary_dark="#1C1829",
+    background_fill_secondary="#13111C",
+    background_fill_secondary_dark="#13111C",
+    # Button styling
+    button_primary_background_fill="#A78BFA",
+    button_primary_background_fill_dark="#A78BFA",
+    button_primary_background_fill_hover="#C4B5FD",
+    button_primary_background_fill_hover_dark="#C4B5FD",
+    button_primary_text_color="#13111C",
+    button_primary_text_color_dark="#13111C",
+    button_secondary_background_fill="#1C1829",
+    button_secondary_background_fill_dark="#1C1829",
+    button_secondary_background_fill_hover="#2D2A3D",
+    button_secondary_background_fill_hover_dark="#2D2A3D",
+    button_secondary_text_color="#E9E6F2",
+    button_secondary_text_color_dark="#E9E6F2",
+    # Borders
+    border_color_primary="#8B8699",
+    border_color_primary_dark="#8B8699",
+    border_color_accent="#A78BFA",
+    border_color_accent_dark="#A78BFA",
+    # Accent
+    color_accent="#A78BFA",
+    color_accent_soft="#2D2A3D",
+    color_accent_soft_dark="#2D2A3D",
+    # Input fields
+    input_background_fill="#1C1829",
+    input_background_fill_dark="#1C1829",
+    input_background_fill_hover="#2D2A3D",
+    input_background_fill_hover_dark="#2D2A3D",
+    input_background_fill_focus="#1C1829",
+    input_background_fill_focus_dark="#1C1829",
+    input_border_color="#8B8699",
+    input_border_color_dark="#8B8699",
+    input_border_color_hover="#A78BFA",
+    input_border_color_hover_dark="#A78BFA",
+    input_border_color_focus="#A78BFA",
+    input_border_color_focus_dark="#A78BFA",
+    input_placeholder_color="#8B8699",
+    input_placeholder_color_dark="#8B8699",
+    input_text_size="0.95rem",
+    # Block/card styling
+    block_background_fill="#1C1829",
+    block_background_fill_dark="#1C1829",
+    block_border_color="#2D2A3D",
+    block_border_color_dark="#2D2A3D",
+    block_info_text_color="#8B8699",
+    block_info_text_color_dark="#8B8699",
+    block_label_background_fill="#13111C",
+    block_label_background_fill_dark="#13111C",
+    block_label_text_color="#A78BFA",
+    block_label_text_color_dark="#A78BFA",
+    block_title_background_fill="#1C1829",
+    block_title_background_fill_dark="#1C1829",
+    block_title_text_color="#E9E6F2",
+    block_title_text_color_dark="#E9E6F2",
+    # Border radius
+    block_radius="10px",
+    container_radius="10px",
+    button_small_radius="6px",
+    button_medium_radius="10px",
+    button_large_radius="14px",
+)
+
 with gr.Blocks() as dashboard:
     with gr.Tab("🔍 Recommender"):
         gr.Markdown("""
         <style>
         #form-section {
-            padding: 18px;
-            border: 1px solid #dcdcdc;
-            border-radius: 15px;
-            background: #fdfdfd;
+            padding: 20px;
+            border: 1px solid #2D2A3D;
+            border-radius: 10px;
+            background: #1C1829;
             margin-bottom: 1.5rem;
         }
         .title {
-            font-size: 32px;
-            font-weight: bold;
+            font-size: 2.25rem;
+            font-weight: 700;
+            text-align: center;
+            margin-bottom: 0.5em;
+            color: #E9E6F2;
+            letter-spacing: -0.02em;
+        }
+        .subtitle {
+            font-size: 0.95rem;
             text-align: center;
-            margin-bottom: 1em;
+            color: #8B8699;
+            margin-bottom: 2em;
+            line-height: 1.55;
+        }
+        /* Dropdown styling */
+        .dropdown-container select,
+        .select-options {
+            border: 1px solid #8B8699 !important;
+            border-radius: 6px !important;
+        }
+        select {
+            border: 1px solid #8B8699 !important;
+            border-radius: 6px !important;
+        }
+        /* Horizontal separator styling */
+        hr {
+            border: none !important;
+            border-top: 1px solid #2D2A3D !important;
+            margin: 1.5rem 0 !important;
         }
         </style>
         """)
 
         gr.Markdown("# 📚 Semantic Book Recommender", elem_classes="title")
         gr.Markdown(
-            "Describe your ideal book and get smart recommendations based on semantics and emotions 🎯"
+            "Describe your ideal book and get smart recommendations based on semantics and emotions 🎯",
+            elem_classes="subtitle",
         )
 
         with gr.Group(elem_id="form-section"):
@@ -231,6 +336,60 @@ with gr.Blocks() as dashboard:
         )
 
     with gr.Tab("📊 Dataset Statistics"):
+        gr.Markdown("""
+        <style>
+        /* Override all text colors in tables */
+        table * {
+            color: #000000 !important;
+        }
+        table {
+            color: #000000 !important;
+            background-color: #1C1829 !important;
+            border: 1px solid #2D2A3D !important;
+        }
+        thead {
+            background-color: #2D2A3D !important;
+        }
+        thead th {
+            color: #000000 !important;
+            background-color: #2D2A3D !important;
+            border: 1px solid #8B8699 !important;
+            font-weight: 700 !important;
+        }
+        tbody tr {
+            background-color: #1C1829 !important;
+        }
+        tbody td {
+            color: #000000 !important;
+            background-color: #1C1829 !important;
+            border: 1px solid #2D2A3D !important;
+        }
+        tbody tr:nth-child(odd) td {
+            background-color: #1C1829 !important;
+        }
+        tbody tr:nth-child(even) td {
+            background-color: #13111C !important;
+        }
+        /* Ensure strong contrast */
+        table td, table th {
+            color: #000000 !important;
+            opacity: 1 !important;
+        }
+        /* Dropdown styling for statistics tab */
+        select {
+            border: 1px solid #8B8699 !important;
+            border-radius: 6px !important;
+            background-color: #1C1829 !important;
+            color: #E9E6F2 !important;
+        }
+        /* Horizontal separator */
+        hr {
+            border: none !important;
+            border-top: 1px solid #2D2A3D !important;
+            margin: 1.5rem 0 !important;
+        }
+        </style>
+        """)
         gr.Markdown("## 🧮 Dataset Summary Table")
         gr.Dataframe(value=get_summary_df(), interactive=False)
 
@@ -239,7 +398,7 @@ with gr.Blocks() as dashboard:
 
         gr.Markdown("## 🧁 Pie Chart Visualization")
         categorical_cols = books.select_dtypes(
-            include=["object", "category"]
+            include=["object", "string"]
         ).columns.tolist()
         col_dropdown = gr.Dropdown(
             choices=categorical_cols,
@@ -258,7 +417,7 @@ with gr.Blocks() as dashboard:
             fn=filter_by_rating, inputs=rating_slider, outputs=rating_table
         )
 
-        gr.Markdown("## 📦 Boxplot: Authors per Category")
+        gr.Markdown("## 📋 Boxplot: Authors per Category")
         box_img = gr.Image(
             type="pil", value=plot_author_boxplot(), label="Author Count Boxplot"
         )
@@ -272,4 +431,4 @@ with gr.Blocks() as dashboard:
         cat_dropdown.change(fn=get_thumbnails, inputs=cat_dropdown, outputs=gallery)
 
 if __name__ == "__main__":
-    dashboard.launch()
+    dashboard.launch(theme=obsidian_theme)