feat: updated app script

app.py

@@ -10,61 +10,60 @@ from sklearn.metrics import mean_absolute_error, mean_squared_error
 from joblib import dump, load
 from utils import recomienda_tfid
 
+# Navigation menu
+with st.sidebar:
+    st.sidebar.title("DeepInsightz")
+
+    # Theme toggle for light/dark mode
+    theme_toggle = st.sidebar.selectbox('Select Theme', ['Light', 'Dark'])
+
+    # Existing tool selection
+    page = st.sidebar.selectbox("Select the tool you want to use", ["Summary", "Customer Analysis", "Articles Recommendations"])
 
 # Page configuration
 st.set_page_config(page_title="DeepInsightz", page_icon=":bar_chart:", layout="wide")
 
-# Custom CSS for styling similar to the inspiration
-st.markdown("""
+# Custom CSS for dynamic theme styling
+# Define light and dark theme specific colors and styles
+if theme_toggle == 'Dark':
+    background_color = "#282828"
+    text_color = "white"
+    metric_box_color = "#4f4f4f"
+    sidebar_color = "#282828"
+    plot_bgcolor = "rgba(0, 0, 0, 0)"
+    primary_color = '#00FF00'  # for positive delta
+    negative_color = '#FF0000'  # for negative delta
+else:
+    background_color = "white"
+    text_color = "black"
+    metric_box_color = "#f5f5f5"
+    sidebar_color = "#f0f0f0"
+    plot_bgcolor = "rgba(255, 255, 255, 1)"
+    primary_color = '#228B22'  # for positive delta in light mode
+    negative_color = '#8B0000'  # for negative delta in light mode
+
+st.markdown(f"""
     <style>
-    /* General Page Background */
-    body {
-        background-color: #282828;
-        color: white;
-    }
-    
-    /* Container styling for metric boxes */
-    [data-testid="stMetric"] {
-        background-color: #4f4f4f;
+    body {{
+        background-color: {background_color};
+        color: {text_color};
+    }}
+    [data-testid="stMetric"] {{
+        background-color: {metric_box_color};
         border-radius: 10px;
         text-align: center;
         padding: 15px 0;
         margin-bottom: 20px;
-    }
-
-    [data-testid="stMetricLabel"] {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      color: white;
-    }
-
-    [data-testid="stMetricDeltaIcon-Up"] {
-        position: relative;
-        left: 38%;
-        transform: translateX(-50%);
-        color: #00FF00; /* Green for positive delta */
-    }
-
-    [data-testid="stMetricDeltaIcon-Down"] {
-        position: relative;
-        left: 38%;
-        transform: translateX(-50%);
-        color: #FF0000; /* Red for negative delta */
-    }
-    
-    /* Customize the sidebar background */
-    [data-testid="stSidebar"] {
-        background-color: #282828;
-    }
-    
-    /* General container for charts and boxes */
-    .container {
+    }}
+    [data-testid="stMetricLabel"] {{
         display: flex;
-        justify-content: space-between;
-        background-color: #282828;
-    }
-
+        justify-content: center;
+        align-items: center;
+        color: {text_color};
+    }}
+    [data-testid="stSidebar"] {{
+        background-color: {sidebar_color};
+    }}
     </style>
 """, unsafe_allow_html=True)
 
@@ -109,30 +108,25 @@ def create_donut_chart(values, labels, color_scheme, title):
     fig = px.pie(
         values=values, 
         names=labels, 
-        hole=0.7,  # Adjusting the hole size for a modern look
-        color_discrete_sequence=color_scheme  # Set color scheme
+        hole=0.7,
+        color_discrete_sequence=color_scheme
     )
-    
-    # Styling adjustments to center the percentage
-    fig.update_traces(
-        textinfo='percent+label',
-        hoverinfo='label+percent',
-        textposition='inside',
-        showlegend=False
-    )
-    
-    # Layout adjustments
+    fig.update_traces(textinfo='percent+label', hoverinfo='label+percent', textposition='inside', showlegend=False)
     fig.update_layout(
-        annotations=[dict(text=f"{int(values[1])}%", x=0.5, y=0.5, font_size=40, showarrow=False)],  # Center percentage text
+        annotations=[dict(text=f"{int(values[1])}%", x=0.5, y=0.5, font_size=40, showarrow=False)],
         title=title,
-        height=300,  # Adjust the size
+        height=300,
         margin=dict(t=30, b=10, l=10, r=10),
-        paper_bgcolor="rgba(0, 0, 0, 0)",  # Background color transparent
-        plot_bgcolor="rgba(0, 0, 0, 0)"
+        paper_bgcolor=plot_bgcolor,  # Use theme-dependent background color
+        plot_bgcolor=plot_bgcolor
     )
-    
     return fig
 
+if theme_toggle == 'Dark':
+    donut_color_scheme = ['#155F7A', '#29b5e8']  # Example colors for dark mode
+else:
+    donut_color_scheme = ['#007BFF', '#66b5ff']  # Example colors for light mode
+
 # Function to create radar chart with square root transformation
 def radar_chart(categories, values, amounts, title):
     N = len(categories)
@@ -177,11 +171,6 @@ def radar_chart(categories, values, amounts, title):
     
     return fig
 
-# Navigation menu
-with st.sidebar:
-    st.sidebar.title("DeepInsightz")
-    page = st.sidebar.selectbox("Select the tool you want to use", ["Summary", "Customer Analysis", "Articles Recommendations"])
-
 
 
 if page == "Summary":
@@ -205,12 +194,10 @@ if page == "Summary":
         # Create a placeholder for your own donut charts with Plotly
         inbound_values = [23, 77]  # Adjust the values
         labels = ['Outbound', 'Inbound']
-        color_scheme = ['#155F7A', '#29b5e8']
 
-        donut_fig = create_donut_chart(inbound_values, labels, color_scheme, title="")
+        donut_fig = create_donut_chart(inbound_values, labels, donut_color_scheme, title="")
         st.plotly_chart(donut_fig, use_container_width=True)
 
-
     # Middle Column (White): 3D Cluster Model and Bar Chart
     with col2:
         st.markdown('#### 3D Customer Clusters')
@@ -238,6 +225,7 @@ if page == "Summary":
                     'Sales': [400000, 600000, 500000, 300000]}
         df_sales = pd.DataFrame(sales_data)
         fig_sales = px.bar(df_sales, x='Cluster', y='Sales')
+        fig_sales.update_layout(paper_bgcolor=plot_bgcolor, plot_bgcolor=plot_bgcolor)
         st.plotly_chart(fig_sales, use_container_width=True)
 
     # Right Column (Blue): Key Metrics Overview and Data Preparation Summary