Update app.py

app.py

@@ -1,13 +1,14 @@
 # -*- coding: utf-8 -*-
 from typing import Optional, Dict, Any
-import base64, mimetypes
+import base64
+import mimetypes
 from html import escape
 from pathlib import Path
 import streamlit as st
 
 # ========= PATHS =========
 BASE_DIR = Path(__file__).parent
-ASSETS   = BASE_DIR / "assets"
+ASSETS = BASE_DIR / "assets"
 
 # ========= META =========
 st.set_page_config(page_title="ST_GeoMech SUITE", layout="wide")
@@ -52,14 +53,14 @@ THEME: Dict[str, Any] = {
         "pad_h": 20,
         "border": "#0B1220",
         "border_hover": "#243447",
-        "bg_top":  "#FFFFFF",
-        "bg_bot":  "#FBFCFE",
+        "bg_top": "#FFFFFF",
+        "bg_bot": "#FBFCFE",
         "title_color": "#0B1220",
         "blurb_color": "#566275",
     },
     "icon": {
         "diam": 118,
-        "img":  106,
+        "img": 106,
         "circle_bg": "#F1F5F9",
         "circle_border": "rgba(12,18,32,0.10)",
     },
@@ -79,51 +80,51 @@ CARDS = [
     {
         "title": " ST_GeoMEch_UCS",
         "blurb": "Real-time Uniconfined Compressive Strength Prediction.",
-        "url":   "https://smart-thinking-ucs.hf.space/",
-        "icon":  ASSETS / "UCS_logo.png",
-        "style": {"bg_top":"#EAF7F1","bg_bot":"#F6FBF8","border":"#0F3D3E"},
+        "url": "https://smart-thinking-ucs.hf.space/",
+        "icon": ASSETS / "UCS_logo.png",
+        "style": {"bg_top": "#EAF7F1", "bg_bot": "#F6FBF8", "border": "#0F3D3E"},
     },
     {
         "title": " ST_GeoMEch_UCS",
         "blurb": "Real-time Uniconfined Compressive Strength Prediction.",
-        "url":   "https://smart-thinking-ucs.hf.space/",
-        "icon":  ASSETS / "UCS_logo.png",
-        "style": {"bg_top":"#EAF7F1","bg_bot":"#F6FBF8","border":"#0F3D3E"},
+        "url": "https://smart-thinking-ucs.hf.space/",
+        "icon": ASSETS / "UCS_logo.png",
+        "style": {"bg_top": "#EAF7F1", "bg_bot": "#F6FBF8", "border": "#0F3D3E"},
     },
     {
         "title": " ST_GeoMEch_UCS",
         "blurb": "Real-time Uniconfined Compressive Strength Prediction.",
-        "url":   "https://smart-thinking-ucs.hf.space/",
-        "icon":  ASSETS / "UCS_logo.png",
-        "style": {"bg_top":"#EAF7F1","bg_bot":"#F6FBF8","border":"#0F3D3E"},
+        "url": "https://smart-thinking-ucs.hf.space/",
+        "icon": ASSETS / "UCS_logo.png",
+        "style": {"bg_top": "#EAF7F1", "bg_bot": "#F6FBF8", "border": "#0F3D3E"},
     },
     {
         "title": " ST_GeoMEch_UCS",
         "blurb": "Real-time Uniconfined Compressive Strength Prediction.",
-        "url":   "https://smart-thinking-ucs.hf.space/",
-        "icon":  ASSETS / "UCS_logo.png",
-        "style": {"bg_top":"#EAF7F1","bg_bot":"#F6FBF8","border":"#0F3D3E"},
+        "url": "https://smart-thinking-ucs.hf.space/",
+        "icon": ASSETS / "UCS_logo.png",
+        "style": {"bg_top": "#EAF7F1", "bg_bot": "#F6FBF8", "border": "#0F3D3E"},
     },
     {
         "title": " ST_GeoMEch_UCS",
         "blurb": "Real-time Uniconfined Compressive Strength Prediction.",
-        "url":   "https://smart-thinking-ucs.hf.space/",
-        "icon":  ASSETS / "UCS_logo.png",
-        "style": {"bg_top":"#EAF7F1","bg_bot":"#F6FBF8","border":"#0F3D3E"},
+        "url": "https://smart-thinking-ucs.hf.space/",
+        "icon": ASSETS / "UCS_logo.png",
+        "style": {"bg_top": "#EAF7F1", "bg_bot": "#F6FBF8", "border": "#0F3D3E"},
     },
     {
         "title": " ST_GeoMech_Ym",
         "blurb": "Real-time Static Young's Modulus Prediction.",
-        "url":   "https://smart-thinking-ym.hf.space",
-        "icon":  ASSETS / "Ym_logo.png",
-        "style": {"bg_top":"#EAF7FD","bg_bot":"#F5FBFF","border":"#0E4A6E"},
+        "url": "https://smart-thinking-ym.hf.space",
+        "icon": ASSETS / "Ym_logo.png",
+        "style": {"bg_top": "#EAF7FD", "bg_bot": "#F5FBFF", "border": "#0E4A6E"},
     },
     {
         "title": " ST_GeoMech_SMW",
         "blurb": "Real-Time Safe Mud Window Prediction",
-        "url":   "https://smart-thinking-smw.hf.space",
-        "icon":  ASSETS / "SMW_logo.png",
-        "style": {"bg_top":"#EEF0FF","bg_bot":"#F7F8FF","border":"#3E4EB8"},
+        "url": "https://smart-thinking-smw.hf.space",
+        "icon": ASSETS / "SMW_logo.png",
+        "style": {"bg_top": "#EEF0FF", "bg_bot": "#F7F8FF", "border": "#3E4EB8"},
     },
 ]
 
@@ -137,6 +138,7 @@ def data_uri(path: Path) -> Optional[str]:
     b64 = base64.b64encode(path.read_bytes()).decode("utf-8")
     return f"data:{mime};base64,{b64}"
 
+
 def img_tag(path: Path, alt: str, cls: str = "", style: str = "") -> str:
     uri = data_uri(path)
     if not uri:
@@ -145,9 +147,15 @@ def img_tag(path: Path, alt: str, cls: str = "", style: str = "") -> str:
     style_attr = f' style="{style}"' if style else ""
     return f'<img{cls_attr}{style_attr} src="{uri}" alt="{escape(alt)}" />'
 
+
 # ========= CSS (driven from THEME) =========
-strip = THEME["strip"]; page = THEME["page"]; hero = THEME["hero"]
-grid  = THEME["grid"];  card = THEME["card"];  icon = THEME["icon"]; button = THEME["button"]
+strip = THEME["strip"]
+page = THEME["page"]
+hero = THEME["hero"]
+grid = THEME["grid"]
+card = THEME["card"]
+icon = THEME["icon"]
+button = THEME["button"]
 
 bg_radial_css = """
 background:
@@ -158,7 +166,8 @@ background:
     rgba(255,255,255,1) 100%);
 """ if page["bg_radial"] else "background: #fff;"
 
-st.markdown(f"""
+st.markdown(
+    f"""
 <style>
   :root {{
     --top-pad: {page["top_padding"]}px;
@@ -263,8 +272,8 @@ st.markdown(f"""
   /* ===== CARD ===== */
   .card {{
     position: relative;
-    width: 100%;                    /* full width of its grid cell */
-    max-width: var(--card-w);       /* optional max width for nice measure */
+    width: 100%;
+    max-width: var(--card-w);
     border-radius: var(--c-radius, var(--card-r));
     padding: var(--c-pv, var(--card-pv)) var(--c-ph, var(--card-ph));
     background: linear-gradient(180deg, var(--c-bg-top, {card["bg_top"]}) 0%, var(--c-bg-bot, {card["bg_bot"]}) 100%);
@@ -275,7 +284,7 @@ st.markdown(f"""
       0 -1px 6px rgba(255,255,255,0.18) inset;
     transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
     text-align:center; display:flex; flex-direction:column; gap:16px; align-items: center;
-    margin: 0 auto;                 /* center within grid cell if narrower than cell */
+    margin: 0 auto;
   }}
   .card:hover {{
     transform: translateY(-6px) scale(1.01);
@@ -333,14 +342,16 @@ st.markdown(f"""
   .footer {{ text-align:center; color:#3f4a5a; font-size:0.96em; margin-top: 26px; }}
   .footer hr {{ margin: 12px 0; border-color: rgba(0,0,0,.08); }}
 </style>
-""", unsafe_allow_html=True)
+""",
+    unsafe_allow_html=True,
+)
 
 # ========= Strip (top-left) =========
 st.markdown(
-    f"""
+    """
     <div class="suite-row">
-      <span class="suite-pill">{"ST_GeoMech SUITE"}</span>
-      <span class="suite-tagline">{"Predicting Rock Mechanical Behavious While Drilling"}</span>
+      <span class="suite-pill">ST_GeoMech SUITE</span>
+      <span class="suite-tagline">Predicting Rock Mechanical Behavious While Drilling</span>
     </div>
     """,
     unsafe_allow_html=True,
@@ -350,37 +361,63 @@ st.markdown(
 hero_html = img_tag(THEME["hero"]["logo"], "ST_GeoMech SUITE")
 st.markdown(f"<div class='hero'>{hero_html}</div>", unsafe_allow_html=True)
 
+
 def build_card_vars(style: Dict[str, Any]) -> str:
     s = []
-    if "width"        in style: s.append(f"--c-w:{int(style['width'])}px")
-    if "radius"       in style: s.append(f"--c-radius:{int(style['radius'])}px")
-    if "pad_v"        in style: s.append(f"--c-pv:{int(style['pad_v'])}px")
-    if "pad_h"        in style: s.append(f"--c-ph:{int(style['pad_h'])}px")
-    if "bg_top"       in style: s.append(f"--c-bg-top:{style['bg_top']}")
-    if "bg_bot"       in style: s.append(f"--c-bg-bot:{style['bg_bot']}")
-    if "border"       in style: s.append(f"--c-border:{style['border']}")
-    if "border_width" in style: s.append(f"--c-bw:{int(style['border_width'])}px")
-    if "title_color"  in style: s.append(f"--c-title-color:{style['title_color']}")
-    if "title_fs"     in style: s.append(f"--c-title-fs:{int(style['title_fs'])}px")
-    if "blurb_color"  in style: s.append(f"--c-blurb-color:{style['blurb_color']}")
-    if "blurb_fs"     in style: s.append(f"--c-blurb-fs:{int(style['blurb_fs'])}px")
-    if "btn_bg1"      in style: s.append(f"--c-btn-bg1:{style['btn_bg1']}")
-    if "btn_bg2"      in style: s.append(f"--c-btn-bg2:{style['btn_bg2']}")
-    if "btn_text"     in style: s.append(f"--c-btn-text:{style['btn_text"]}")
-    if "btn_border"   in style: s.append(f"--c-btn-border:{style['btn_border"]}")
-    if "btn_fs"       in style: s.append(f"--c-btn-fs:{int(style['btn_fs'])}px")
-    if "btn_pad_v"    in style: s.append(f"--c-btn-pv:{int(style['btn_pad_v'])}px")
-    if "btn_pad_h"    in style: s.append(f"--c-btn-ph:{int(style['btn_pad_h'])}px")
-    if "icon_diam"    in style: s.append(f"--c-icon-d:{int(style['icon_diam'])}px")
-    if "icon_img"     in style: s.append(f"--c-icon-img:{int(style['icon_img"]) }px")
-    if "icon_bg"      in style: s.append(f"--c-icon-bg:{style['icon_bg"]}")
-    if "icon_border"  in style: s.append(f"--c-icon-border:{style['icon_border"]}")
+    if "width" in style:
+        s.append(f"--c-w:{int(style['width'])}px")
+    if "radius" in style:
+        s.append(f"--c-radius:{int(style['radius'])}px")
+    if "pad_v" in style:
+        s.append(f"--c-pv:{int(style['pad_v'])}px")
+    if "pad_h" in style:
+        s.append(f"--c-ph:{int(style['pad_h'])}px")
+    if "bg_top" in style:
+        s.append(f"--c-bg-top:{style['bg_top']}")
+    if "bg_bot" in style:
+        s.append(f"--c-bg-bot:{style['bg_bot']}")
+    if "border" in style:
+        s.append(f"--c-border:{style['border']}")
+    if "border_width" in style:
+        s.append(f"--c-bw:{int(style['border_width'])}px")
+    if "title_color" in style:
+        s.append(f"--c-title-color:{style['title_color']}")
+    if "title_fs" in style:
+        s.append(f"--c-title-fs:{int(style['title_fs'])}px")
+    if "blurb_color" in style:
+        s.append(f"--c-blurb-color:{style['blurb_color']}")
+    if "blurb_fs" in style:
+        s.append(f"--c-blurb-fs:{int(style['blurb_fs'])}px")
+    if "btn_bg1" in style:
+        s.append(f"--c-btn-bg1:{style['btn_bg1']}")
+    if "btn_bg2" in style:
+        s.append(f"--c-btn-bg2:{style['btn_bg2']}")
+    if "btn_text" in style:
+        s.append(f"--c-btn-text:{style['btn_text']}")
+    if "btn_border" in style:
+        s.append(f"--c-btn-border:{style['btn_border']}")
+    if "btn_fs" in style:
+        s.append(f"--c-btn-fs:{int(style['btn_fs'])}px")
+    if "btn_pad_v" in style:
+        s.append(f"--c-btn-pv:{int(style['btn_pad_v'])}px")
+    if "btn_pad_h" in style:
+        s.append(f"--c-btn-ph:{int(style['btn_pad_h'])}px")
+    if "icon_diam" in style:
+        s.append(f"--c-icon-d:{int(style['icon_diam'])}px")
+    if "icon_img" in style:
+        s.append(f"--c-icon-img:{int(style['icon_img'])}px")
+    if "icon_bg" in style:
+        s.append(f"--c-icon-bg:{style['icon_bg']}")
+    if "icon_border" in style:
+        s.append(f"--c-icon-border:{style['icon_border']}")
     return "; ".join(s)
 
+
 def app_card(card_cfg: Dict[str, Any]) -> str:
     style = card_cfg.get("style", {})
     vars_inline = build_card_vars(style)
-    icon_html = img_tag(card_cfg.get("icon"), "icon") if card_cfg.get("icon") and card_cfg["icon"].exists() else ""
+    icon_path = card_cfg.get("icon")
+    icon_html = img_tag(icon_path, "icon") if isinstance(icon_path, Path) and icon_path.exists() else ""
     target = "_self"
     return (
         f"<div class='card' style='{vars_inline}'>"
@@ -391,6 +428,7 @@ def app_card(card_cfg: Dict[str, Any]) -> str:
         + "</div>"
     )
 
+
 st.markdown("<div class='grid'>" + "".join(app_card(c) for c in CARDS) + "</div>", unsafe_allow_html=True)
 
 # ========= Footer =========