Update app.py

app.py

@@ -22,7 +22,9 @@ TARGET = "UCS"
 MODELS_DIR = Path("models")
 DEFAULT_MODEL = MODELS_DIR / "ucs_rf.joblib"
 MODEL_FALLBACKS = [MODELS_DIR / "model.joblib", MODELS_DIR / "model.pkl"]
-COLORS = {"pred": "#1f77b4", "actual": "#f2b702", "ref": "#5a5a5a"}
+
+# Updated colors for a dark blue theme
+COLORS = {"pred": "#4A90E2", "actual": "#FFC107", "ref": "#B0B0B0"}
 
 # ---- Plot sizing controls ----
 CROSS_W = 450      # px (matplotlib figure size; Streamlit will still scale)
@@ -39,33 +41,41 @@ st.set_page_config(page_title="ST_GeoMech_UCS", page_icon="logo.png", layout="wi
 # This is the new CSS block for the sticky header and message box
 st.markdown("""
 <style>
-/* CSS for the main app title in the sidebar and password gate */
+/* Changed to a lighter blue for visibility on a dark background */
 .app-title {
-    color: #89b4f2; /* Light blue color for the title */
+    color: #89b4f2;
     font-weight:800;
     font-size:1.2rem;
 }
 
-/* CSS to make the header sticky */
+/* Changed background to a dark blue to match the theme */
 .fixed-header-container {
     position: sticky;
     top: 0;
     z-index: 1000;
-    background-color: #f0f2f6; /* Adjust to match your app's background color */
+    background-color: #0a192f;
     padding: 10px 0;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+}
+
+/* Changed to a light gray/blue to be visible on the dark background */
+.info-box {
+    background-color: #172a45;
+    color: #b1c7e0;
+    padding: 10px;
+    border-radius: 5px;
+    margin-bottom: 1rem;
 }
 
-/* CSS to ensure main content doesn't get hidden under the sticky header */
 .main .block-container {
-    padding-top: 250px; /* Adjust this value to match the height of your sticky header */
+    padding-top: 250px;
 }
 
 /* General CSS */
 .brand-logo { width: 16px; height: auto; object-fit: contain; }
 .sidebar-header { display:flex; align-items:center; gap:12px; }
 .sidebar-header .text h1 { font-size: 1.05rem; margin:0; line-height:1.1; }
-.sidebar-header .text .tag { font-size: .85rem; color:#6b7280; margin:2px 0 0; }
+.sidebar-header .text .tag { font-size: .85rem; color:#b1c7e0; margin:2px 0 0; } /* Changed color */
 .centered-container {
     display: flex;
     flex-direction: column;
@@ -78,18 +88,20 @@ st.markdown("""
 # Make the Preview expander title & tabs sticky (pinned to the top)
 st.markdown("""
 <style>
+/* Updated to a dark background for consistency */
 div[data-testid="stExpander"] > details > summary {
     position: sticky;
     top: 0;
     z-index: 10;
-    background: #fff;
-    border-bottom: 1px solid #eee;
+    background: #0a192f;
+    border-bottom: 1px solid #172a45;
 }
+/* Updated to a dark background for consistency */
 div[data-testid="stExpander"] div[data-baseweb="tab-list"] {
     position: sticky;
-    top: 42px;    /* adjust if your expander header height differs */
+    top: 42px;
     z-index: 9;
-    background: #fff;
+    background: #0a192f;
     padding-top: 6px;
 }
 </style>
@@ -129,7 +141,7 @@ def add_password_gate() -> None:
         <div class="centered-container">
             <img src="{inline_logo('logo.png')}" style="width: 200px; height: auto; object-fit: contain;">
             <div class='app-title' style='margin-top: 10px;'>ST_GeoMech_UCS</div>
-            <div style='color:#FFD700;'>Smart Thinking • Secure Access</div>
+            <div style='color:#b1c7e0;'>Smart Thinking • Secure Access</div>
         </div>
         """, unsafe_allow_html=True
     )
@@ -201,7 +213,7 @@ def df_centered_rounded(df: pd.DataFrame, hide_index=True):
 # =========================
 def cross_plot_static(actual, pred):
     a = pd.Series(actual, dtype=float)
-    p = pd.Series(pred,    dtype=float)
+    p = pd.Series(pred, dtype=float)
 
     fixed_min, fixed_max = 6000, 10000
     ticks = np.arange(fixed_min, fixed_max + 1, 1000)
@@ -212,6 +224,9 @@ def cross_plot_static(actual, pred):
         dpi=dpi,
         constrained_layout=False
     )
+    # Set the background color of the plot
+    fig.patch.set_facecolor('#0a192f')
+    ax.set_facecolor('#0a192f')
 
     ax.scatter(a, p, s=16, c=COLORS["pred"], alpha=0.9, linewidths=0)
     ax.plot([fixed_min, fixed_max], [fixed_min, fixed_max],
@@ -219,22 +234,21 @@ def cross_plot_static(actual, pred):
 
     ax.set_xlim(fixed_min, fixed_max)
     ax.set_ylim(fixed_min, fixed_max)
-    ax.set_xticks(ticks)
-    ax.set_yticks(ticks)
     ax.set_aspect("equal", adjustable="box")  # true 45°
 
     fmt = FuncFormatter(lambda x, _: f"{int(x):,}")
     ax.xaxis.set_major_formatter(fmt)
     ax.yaxis.set_major_formatter(fmt)
 
-    ax.set_xlabel("Actual UCS (psi)", fontweight="bold", fontsize=12, color="black")
-    ax.set_ylabel("Predicted UCS (psi)", fontweight="bold", fontsize=12, color="black")
-    ax.tick_params(labelsize=10, colors="black")
+    # Changed text and tick colors to a light blue for contrast
+    ax.set_xlabel("Actual UCS (psi)", fontweight="bold", fontsize=12, color="#E0E7FF")
+    ax.set_ylabel("Predicted UCS (psi)", fontweight="bold", fontsize=12, color="#E0E7FF")
+    ax.tick_params(labelsize=10, colors="#E0E7FF")
 
     ax.grid(True, linestyle=":", alpha=0.3)
     for spine in ax.spines.values():
         spine.set_linewidth(1.1)
-        spine.set_color("#444")
+        spine.set_color("#A0A0A0") # Changed spine color to a lighter gray
 
     fig.subplots_adjust(left=0.16, bottom=0.16, right=0.98, top=0.98)
     return fig
@@ -279,38 +293,40 @@ def track_plot(df, include_actual=True):
 
     fig.update_layout(
         height=TRACK_H, width=None,  # width auto-fits the column
-        paper_bgcolor="#fff", plot_bgcolor="#fff",
+        # Updated background colors for dark theme
+        paper_bgcolor="#0a192f", plot_bgcolor="#0a192f",
         margin=dict(l=64, r=16, t=36, b=48), hovermode="closest",
-        font=dict(size=FONT_SZ, color="#000"),
+        # Updated font color
+        font=dict(size=FONT_SZ, color="#E0E7FF"),
         legend=dict(
             x=0.98, y=0.05, xanchor="right", yanchor="bottom",
-            bgcolor="rgba(255,255,255,0.75)", bordercolor="#ccc", borderwidth=1
+            bgcolor="rgba(10,25,47,0.75)", bordercolor="#ccc", borderwidth=1
         ),
         legend_title_text=""
     )
 
-    # Bold, black axis titles & ticks
+    # Bold, light blue axis titles & ticks
     fig.update_xaxes(
         title_text="UCS (psi)",
-        title_font=dict(size=16, family=BOLD_FONT, color="#000"),
-        tickfont=dict(size=11, family=BOLD_FONT, color="#000"),
+        title_font=dict(size=16, family=BOLD_FONT, color="#E0E7FF"),
+        tickfont=dict(size=11, family=BOLD_FONT, color="#E0E7FF"),
         side="top",
         range=[xmin, xmax],
         ticks="outside",
         tickformat=",.0f",
         tickmode="auto",
         tick0=tick0,
-        showline=True, linewidth=1.2, linecolor="#444", mirror=True,
-        showgrid=True, gridcolor="rgba(0,0,0,0.12)", automargin=True
+        showline=True, linewidth=1.2, linecolor="#A0A0A0", mirror=True,
+        showgrid=True, gridcolor="rgba(255,255,255,0.12)", automargin=True
     )
     fig.update_yaxes(
         title_text=ylab,
-        title_font=dict(size=16, family=BOLD_FONT, color="#000"),
-        tickfont=dict(size=11, family=BOLD_FONT, color="#000"),
+        title_font=dict(size=16, family=BOLD_FONT, color="#E0E7FF"),
+        tickfont=dict(size=11, family=BOLD_FONT, color="#E0E7FF"),
         range=y_range,
         ticks="outside",
-        showline=True, linewidth=1.2, linecolor="#444", mirror=True,
-        showgrid=True, gridcolor="rgba(0,0,0,0.12)", automargin=True
+        showline=True, linewidth=1.2, linecolor="#A0A0A0", mirror=True,
+        showgrid=True, gridcolor="rgba(255,255,255,0.12)", automargin=True
     )
 
     return fig
@@ -321,17 +337,22 @@ def preview_tracks(df: pd.DataFrame, cols: list[str]):
     n = len(cols)
     if n == 0:
         fig, ax = plt.subplots(figsize=(4, 2))
-        ax.text(0.5,0.5,"No selected columns",ha="center",va="center"); ax.axis("off")
+        ax.text(0.5,0.5,"No selected columns",ha="center",va="center", color="#E0E7FF"); ax.axis("off")
         return fig
     fig, axes = plt.subplots(1, n, figsize=(2.2*n, 7.0), sharey=True, dpi=100)
+    fig.patch.set_facecolor('#0a192f')
     if n == 1: axes = [axes]
     idx = np.arange(1, len(df) + 1)
     for ax, col in zip(axes, cols):
-        ax.plot(df[col], idx, '-', lw=1.4, color="#333")
-        ax.set_xlabel(col); ax.xaxis.set_label_position('top'); ax.xaxis.tick_top(); ax.invert_yaxis()
+        ax.set_facecolor('#0a192f')
+        ax.plot(df[col], idx, '-', lw=1.4, color="#b1c7e0") # Light blue plot line
+        ax.set_xlabel(col, color="#b1c7e0"); ax.xaxis.set_label_position('top'); ax.xaxis.tick_top(); ax.invert_yaxis() # Light blue labels
+        ax.tick_params(axis='both', colors='#b1c7e0') # Light blue ticks
         ax.grid(True, linestyle=":", alpha=0.3)
-        for s in ax.spines.values(): s.set_visible(True)
-    axes[0].set_ylabel("Point Index")
+        for s in ax.spines.values():
+            s.set_visible(True)
+            s.set_edgecolor("#A0A0A0") # Lighter spine color
+    axes[0].set_ylabel("Point Index", color="#b1c7e0") # Light blue label
     return fig
 
 # Modal wrapper (Streamlit compatibility)
@@ -420,7 +441,7 @@ st.sidebar.markdown(f"""
     <div class="centered-container">
         <img src="{inline_logo('logo.png')}" style="width: 200px; height: auto; object-fit: contain;">
         <div class='app-title'>ST_GeoMech_UCS</div>
-        <div style='color:#667085;'>Real-Time UCS Tracking While Drilling</div>
+        <div style='color:#b1c7e0;'>Real-Time UCS Tracking While Drilling</div>
     </div>
     """, unsafe_allow_html=True
 )
@@ -658,11 +679,11 @@ if st.session_state.app_step == "predict":
             table = pd.DataFrame({
                 "Metric": ["# points","Pred min","Pred max","Pred mean","Pred std","OOR %"],
                 "Value":  [sv["n"],
-                            round(sv["pred_min"],2),
-                            round(sv["pred_max"],2),
-                            round(sv["pred_mean"],2),
-                            round(sv["pred_std"],2),
-                            f'{sv["oor"]:.1f}%']
+                          round(sv["pred_min"],2),
+                          round(sv["pred_max"],2),
+                          round(sv["pred_mean"],2),
+                          round(sv["pred_std"],2),
+                          f'{sv["oor"]:.1f}%']
             })
             st.success("Predictions ready ✓")
             df_centered_rounded(table, hide_index=True)
@@ -679,7 +700,7 @@ if st.session_state.app_step == "predict":
 st.markdown("---")
 st.markdown(
     """
-    <div style='text-align:center; color:#6b7280; line-height:1.6'>
+    <div style='text-align:center; color:#b1c7e0; line-height:1.6'>
       ST_GeoMech_UCS • © Smart Thinking<br/>
       <strong>Visit our website:</strong> <a href='https://www.smartthinking.com.sa' target='_blank'>smartthinking.com.sa</a>
     </div>