Update app.py

app.py

@@ -10,124 +10,108 @@ BASE_DIR = Path(__file__).parent
 ASSETS   = BASE_DIR / "assets"
 
 # ========= META =========
-st.set_page_config(page_title="ST_LOG SUITE", layout="wide")
+st.set_page_config(page_title="Smart Thinking — AI for O&G", layout="wide")
 
-# ========= GLOBAL THEME (one place) =========
+# ========= GLOBAL THEME (all knobs live here) =========
 THEME: Dict[str, Any] = {
-    "strip": {
-        "gap": 10,               # px between pill and tagline
-        "below_gap": 30,         # px between strip row and hero
-        "pill_pad_v": 8,         # px
-        "pill_pad_h": 14,        # px
-        "pill_font": 16,         # px
-        "tagline_font": 15,      # px
-        # GOLD header palette (high contrast)
-        "bg1": "#D4AF37",        # gold
-        "bg2": "#B88917",        # deeper gold
-        "text": "#000052",       # dark text in pill for contrast
-        "tagline_color": "#000000",
-    },
     "page": {
-        "top_padding": 50,
-        "container_width": 1120,
-        "bg_radial": True,
+        "container_width": 1120,     # max content width (px)
+        "bg_radial": True,           # faint radial background
+        "section_gap": 48,           # px between hero and cards section
+        "footer_gap": 36,            # px space before footer
+        "top_padding": 40,           # top padding of the page
     },
     "hero": {
-        "width": 400,
-        "margin_bottom": 30,
-        "logo": ASSETS / "AI_Suite_Log_logo.png",
+        # Company logo in the middle
+        "logo": ASSETS / "company_logo.png",   # <— set your company logo file here
+        "width": 360,                           # rendered pixel width of hero logo
+        "tagline": "We Deliver AI-Based Solutions For O&G Industry",
+        "tagline_size": 22,                     # px
+        "tagline_weight": 800,                  # 600/700/800 etc.
+        "tagline_color": "#0B1220",
+        "logo_bottom": 18,                      # px space between logo and tagline
+        "block_bottom": 28,                     # px space below the whole hero block
     },
     "grid": {
-        "gap": 50,
-        "card_width": 340,
+        "columns": 2,               # number of cards per row (auto-wrap on narrow screens)
+        "gap": 40,                  # px gap between cards
+        "card_width": 460,          # preferred card width (px)
     },
     "card": {
-        "radius": 22,
-        "border_width": 2,
-        "pad_v": 24,
-        "pad_h": 20,
-        "border": "#0B1220",
+        "radius": 22,               # px
+        "border_width": 2,          # px
+        "border": "#0B1220",        # card outline
         "border_hover": "#243447",
-        "bg_top":  "#FFFFFF",
-        "bg_bot":  "#FBFCFE",
+        "bg_top":  "#FFFFFF",       # gradient top
+        "bg_bot":  "#FBFCFE",       # gradient bottom
+        "pad_v": 24,                # vertical padding inside card
+        "pad_h": 22,                # horizontal padding inside card
+
+        # Title & paragraph
         "title_color": "#0B1220",
+        "title_size": 26,
+        "title_weight": 900,
         "blurb_color": "#566275",
-    },
-    "icon": {
-        "diam": 118,
-        "img":  106,
-        "circle_bg": "#F1F5F9",
-        "circle_border": "rgba(12,18,32,0.10)",
+        "blurb_size": 16,
+
+        # Card logo controls (no frames/borders)
+        "logo_max_w": 140,          # max width of card logo (px)
+        "logo_top": 6,              # px space above card logo
+        "logo_bottom": 8,           # px space below card logo
     },
     "button": {
-        "pad_v": 12,
-        "pad_h": 20,
-        "radius": 14,
-        "bg1": "#0B1220",
-        "bg2": "#162338",
-        "text": "#FFFFFF",
-        "border": "rgba(11,18,32,.55)",
+        "pad_v": 12, "pad_h": 20, "radius": 14,
+        "bg1": "#0B1220", "bg2": "#162338",
+        "text": "#FFFFFF", "border": "rgba(11,18,32,.55)",
+        "font_size": 16, "font_weight": 800,
     },
 }
 
-# ========= CARDS =========
+# ========= CARDS (content + per-card overrides) =========
+# Supply your own icons in /assets and URLs below
 CARDS = [
     {
-        "title": " ST_Log_GR",
-        "blurb": "Real-time gamma-ray log prediction.",
-        "url":   "https://smart-thinking-gr.hf.space/",
-        "icon":  ASSETS / "GR_logo.png",
-        "style": {
-            "bg_top":  "#EAF7F1",
-            "bg_bot":  "#F6FBF8",
-            "border":  "#0F3D3E",
-        },
-    },
-    {
-        "title": " ST_Log_Sonic (Ts)",
-        "blurb": "Predict shear slowness (DtS) in real time.",
-        "url":   "https://smart-thinking-sonic-ts.hf.space",
-        "icon":  ASSETS / "Ts_logo.png",
+        "title": "Geomechanics",
+        "blurb": "Predict Rock Mechanical Behaviour Using AI",
+        "url":   "https://smart-thinking-smw.hf.space",  # example target
+        "icon":  ASSETS / "geomech_logo.png",             # <— card logo file
         "style": {
-            "bg_top":  "#EAF7FD",
-            "bg_bot":  "#F5FBFF",
+            "bg_top":  "#EEF7FF",
+            "bg_bot":  "#F7FBFF",
             "border":  "#0E4A6E",
         },
     },
     {
-        "title": " ST_Log_Sonic (Tc)",
-        "blurb": "Predict compressional slowness (DtC) in real time.",
-        "url":   "https://smart-thinking-sonic-tc.hf.space",
-        "icon":  ASSETS / "Tc_logo.png",
+        "title": "Logging",
+        "blurb": "Generate Synthetic Logging Profiles Using AI",
+        "url":   "https://smart-thinking-gr.hf.space",    # example target
+        "icon":  ASSETS / "logging_logo.png",             # <— card logo file
         "style": {
-            "bg_top":  "#EEF0FF",
-            "bg_bot":  "#F7F8FF",
-            "border":  "#3E4EB8",
+            "bg_top":  "#F8FFF4",
+            "bg_bot":  "#FBFFF8",
+            "border":  "#0F3D3E",
         },
     },
 ]
 
 # ========= Helpers =========
 def data_uri(path: Path) -> Optional[str]:
-    if not path or not path.exists():
-        return None
+    if not path or not path.exists(): return None
     mime, _ = mimetypes.guess_type(path.name)
-    if not mime:
-        mime = "image/png"
+    if not mime: mime = "image/png"
     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:
-        return ""
+    if not uri: return ""
     cls_attr = f' class="{cls}"' if cls else ""
     style_attr = f' style="{style}"' if style else ""
     return f'<img{cls_attr}{style_attr} src="{uri}" alt="{escape(alt)}" />'
 
-# ========= CSS =========
-strip = THEME["strip"]; page = THEME["page"]; hero = THEME["hero"]
-grid  = THEME["grid"];  card = THEME["card"];  icon = THEME["icon"]; button = THEME["button"]
+# ========= CSS (driven by THEME) =========
+page = THEME["page"]; hero = THEME["hero"]
+grid = THEME["grid"]; card = THEME["card"]; button = THEME["button"]
 
 bg_radial_css = """
 background:
@@ -141,96 +125,86 @@ background:
 st.markdown(f"""
 <style>
   :root {{
+    --container-w: {page["container_width"]}px;
     --top-pad: {page["top_padding"]}px;
-
-    --strip-gap: {strip["gap"]}px;
-    --strip-row-mb: {strip["below_gap"]}px;
-    --strip-pill-pv: {strip["pill_pad_v"]}px;
-    --strip-pill-ph: {strip["pill_pad_h"]}px;
-    --strip-pill-fs: {strip["pill_font"]}px;
-    --tagline-fs: {strip["tagline_font"]}px;
+    --section-gap: {page["section_gap"]}px;
+    --footer-gap: {page["footer_gap"]}px;
 
     --hero-w: {hero["width"]}px;
-    --hero-mb: {hero["margin_bottom"]}px;
+    --hero-logo-mb: {hero["logo_bottom"]}px;
+    --hero-block-mb: {hero["block_bottom"]}px;
+    --hero-tag-fs: {hero["tagline_size"]}px;
+    --hero-tag-weight: {hero["tagline_weight"]};
+    --hero-tag-color: {hero["tagline_color"]};
 
     --grid-gap: {grid["gap"]}px;
+    --grid-cols: {grid["columns"]};
     --card-w: {grid["card_width"]}px;
+
     --card-r: {card["radius"]}px;
     --card-bw: {card["border_width"]}px;
+    --card-border: {card["border"]};
+    --card-border-hover: {card["border_hover"]};
+    --card-bg-top: {card["bg_top"]};
+    --card-bg-bot: {card["bg_bot"]};
     --card-pv: {card["pad_v"]}px;
     --card-ph: {card["pad_h"]}px;
+    --card-title-color: {card["title_color"]};
+    --card-title-size: {card["title_size"]}px;
+    --card-title-weight: {card["title_weight"]};
+    --card-blurb-color: {card["blurb_color"]};
+    --card-blurb-size: {card["blurb_size"]}px;
 
-    --icon-d: {icon["diam"]}px;
-    --icon-img: {icon["img"]}px;
-
-    --stripBg1: {strip["bg1"]};
-    --stripBg2: {strip["bg2"]};
-    --stripText: {strip["text"]};
-    --taglineColor: {strip["tagline_color"]};
-
-    --cardStroke: {card["border"]};
-    --cardStrokeHover: {card["border_hover"]};
+    --logo-max-w: {card["logo_max_w"]}px;
+    --logo-top: {card["logo_top"]}px;
+    --logo-bottom: {card["logo_bottom"]}px;
 
     --btn1: {button["bg1"]};
     --btn2: {button["bg2"]};
     --btnText: {button["text"]};
     --btnBorder: {button["border"]};
+    --btnFS: {button["font_size"]}px;
+    --btnFW: {button["font_weight"]};
+    --btnPV: {button["pad_v"]}px;
+    --btnPH: {button["pad_h"]}px;
+    --btnRadius: {button["radius"]}px;
   }}
 
   html, body, [data-testid="stAppViewContainer"] {{ height: 100%; }}
   [data-testid="stAppViewContainer"] > .main {{ padding-top: 0 !important; padding-bottom: 0 !important; }}
 
   .block-container {{
-    max-width: {page["container_width"]}px;
+    max-width: var(--container-w);
     min-height: 100vh;
     display: flex; flex-direction: column;
-    gap: 14px;
-    padding: var(--top-pad) 0 28px !important;
+    gap: var(--section-gap);
+    padding: var(--top-pad) 0 var(--footer-gap) !important;
     {bg_radial_css}
   }}
 
-  /* ===== TOP-LEFT STRIP ===== */
-  .suite-row {{
-    display:flex; align-items:center; gap: var(--strip-gap);
-    justify-content:flex-start; flex-wrap: wrap;
-    margin: 0 0 var(--strip-row-mb) 0;
-  }}
-  .suite-pill {{
-    background: linear-gradient(90deg, var(--stripBg1) 0%, var(--stripBg2) 100%);
-    color: var(--stripText);
-    padding: var(--strip-pill-pv) var(--strip-pill-ph);
-    border-radius: 999px;
-    font-weight: 800; letter-spacing: .25px;
-    font-size: var(--strip-pill-fs);
-    box-shadow: 0 6px 14px rgba(2,12,30,.18);
-    white-space: nowrap;
-  }}
-  .suite-tagline {{
-    color: var(--taglineColor); font-weight: 600; opacity: .95;
-    font-size: var(--tagline-fs);
-    white-space: nowrap;
-  }}
-
-  /* ===== HERO ===== */
-  .hero {{ text-align:center; margin: 0 0 var(--hero-mb); }}
+  /* ===== HERO (centered company logo + tagline) ===== */
+  .hero {{ text-align:center; }}
   .hero img {{
     width: var(--hero-w); max-width: 92vw; height: auto;
-    display:block; margin: 0 auto var(--hero-mb);
+    display:block; margin: 0 auto var(--hero-logo-mb);
     filter: drop-shadow(0 6px 16px rgba(0,0,0,.10));
   }}
+  .hero .tagline {{
+    font-size: var(--hero-tag-fs);
+    font-weight: var(--hero-tag-weight);
+    color: var(--hero-tag-color);
+    letter-spacing:.2px;
+    margin-bottom: var(--hero-block-mb);
+  }}
 
-  /* ===== GRID ===== */
+  /* ===== GRID (two cards) ===== */
   .grid {{
     display: grid;
-    grid-template-columns: repeat(3, var(--card-w));
+    grid-template-columns: repeat(var(--grid-cols), var(--card-w));
     gap: var(--grid-gap);
     justify-content: center; align-items: stretch;
-    margin-top: 10px;
-  }}
-  @media (max-width: 1120px) {{
-    .grid {{ grid-template-columns: repeat(2, var(--card-w)); gap: calc(var(--grid-gap) - 12px); }}
   }}
-  @media (max-width: 720px) {{
+  @media (max-width: 1040px) {{
     .grid {{ grid-template-columns: 1fr; }}
   }}
 
@@ -240,93 +214,79 @@ st.markdown(f"""
     width: var(--c-w, 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%);
-    border: var(--c-bw, var(--card-bw)) solid var(--c-border, var(--cardStroke));
-    box-shadow:
-      0 14px 32px rgba(2,20,35,.12),
-      0 1px 0 rgba(255,255,255,0.70) inset,
-      0 -1px 6px rgba(255,255,255,0.18) inset;
+    background: linear-gradient(180deg, var(--c-bg-top, var(--card-bg-top)) 0%, var(--c-bg-bot, var(--card-bg-bot)) 100%);
+    border: var(--c-bw, var(--card-bw)) solid var(--c-border, var(--card-border));
+    box-shadow: 0 14px 32px rgba(2,20,35,.10), 0 1px 0 rgba(255,255,255,0.75) 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;
+    text-align:center; display:flex; flex-direction:column; gap:16px; align-items:center;
   }}
   .card:hover {{
     transform: translateY(-6px) scale(1.01);
-    border-color: var(--cardStrokeHover);
-    box-shadow:
-      0 22px 56px rgba(2,20,35,.18),
-      0 1px 0 rgba(255,255,255,.82) inset,
-      0 -1px 10px rgba(255,255,255,.28) inset;
+    border-color: var(--card-border-hover);
+    box-shadow: 0 22px 56px rgba(2,20,35,.18);
     filter: saturate(1.03);
   }}
 
-  /* ===== ICON / LOGO — self-contained, not trimmed ===== */
-  .icon-wrap {{
-    width: var(--c-icon-d, {icon["diam"]}px); height: var(--c-icon-d, {icon["diam"]}px);
-    border-radius: 9999px; display:grid; place-items:center;
-    background: var(--c-icon-bg, {icon["circle_bg"]});
-    border: 1px solid var(--c-icon-border, {icon["circle_border"]});
-    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 10px 22px rgba(2,20,35,.07);
-  }}
-  .icon-wrap img {{
-    width: calc(var(--c-icon-img, {icon["img"]}px) - 12px);
-    height: calc(var(--c-icon-img, {icon["img"]}px) - 12px);
-    padding: 6px;
-    box-sizing: border-box;
-    object-fit: contain;                   /* never crop */
-    background: #FFFFFF;                   /* clean canvas for mixed logos */
-    border: 2px solid var(--c-border, var(--cardStroke)); /* match card border */
-    border-radius: 14px;
+  /* Plain logo (NO frame/border) */
+  .card .logo-img {{
+    margin-top: var(--logo-top);
+    margin-bottom: var(--logo-bottom);
+    max-width: var(--logo-max-w);
+    width: 100%;
+    height: auto;
+    object-fit: contain;
     display:block;
   }}
 
   .card h3 {{
-    margin: 0; font-size: 25px; font-weight: 900;
-    color: {card["title_color"]}; letter-spacing: .15px;
+    margin: 0;
+    font-size: var(--card-title-size);
+    font-weight: var(--card-title-weight);
+    color: var(--c-title-color, var(--card-title-color));
+    letter-spacing: .15px;
   }}
   .card p {{
-    color: {card["blurb_color"]}; min-height: 40px; margin: 0 10px; font-size: 16px;
+    color: var(--c-blurb-color, var(--card-blurb-color));
+    font-size: var(--card-blurb-size);
+    margin: 0 6px;
   }}
 
   .btn {{
-    display:inline-block; padding: {button["pad_v"]}px {button["pad_h"]}px;
-    border-radius: {button["radius"]}px;
-    border: 1px solid {button["border"]};
-    background: linear-gradient(180deg, {button["bg1"]} 0%, {button["bg2"]} 100%);
-    font-weight: 800; letter-spacing:.3px; font-size: 16px;
-    margin: 6px auto 0;
+    display:inline-block;
+    padding: var(--btnPV) var(--btnPH);
+    border-radius: var(--btnRadius);
+    border: 1px solid var(--btnBorder);
+    background: linear-gradient(180deg, var(--btn1) 0%, var(--btn2) 100%);
+    font-weight: var(--btnFW);
+    font-size: var(--btnFS);
+    letter-spacing:.3px;
     box-shadow: 0 12px 28px rgba(11,18,32,.28), inset 0 1px 0 rgba(255,255,255,.10);
-    color: {button["text"]};
+    color: var(--btnText);
     text-decoration: none;
   }}
   a.btn, a.btn:link, a.btn:visited, a.btn:hover, a.btn:active, a.btn:focus {{
-    color: {button["text"]} !important; text-decoration: none !important;
-  }}
-  .btn:hover {{
-    filter: brightness(1.03) saturate(1.04);
-    transform: translateY(-1px);
-    box-shadow: 0 16px 38px rgba(11,18,32,.36);
+    color: var(--btnText) !important; text-decoration: none !important;
   }}
+  .btn:hover {{ filter: brightness(1.03) saturate(1.04); transform: translateY(-1px); }}
 
-  .footer {{ text-align:center; color:#3f4a5a; font-size:0.96em; margin-top: 26px; }}
+  .footer {{ text-align:center; color:#3f4a5a; font-size:0.96em; margin-top: 8px; }}
   .footer hr {{ margin: 12px 0; border-color: rgba(0,0,0,.08); }}
 </style>
 """, unsafe_allow_html=True)
 
-# ========= Strip (top-left) =========
+# ========= HERO (centered) =========
+hero_html = img_tag(hero["logo"], "Company Logo")
 st.markdown(
     f"""
-    <div class="suite-row">
-      <span class="suite-pill">{"ST_LOG SUITE"}</span>
-      <span class="suite-tagline">{"Generating AI-Based Well Logging Profiles While Drilling"}</span>
+    <div class="hero">
+      {hero_html}
+      <div class="tagline">{escape(hero["tagline"])}</div>
     </div>
     """,
     unsafe_allow_html=True,
 )
 
-# ========= Hero =========
-hero_html = img_tag(THEME["hero"]["logo"], "ST_LOG SUITE")
-st.markdown(f"<div class='hero'>{hero_html}</div>", unsafe_allow_html=True)
-
+# ========= Cards =========
 def build_card_vars(style: Dict[str, Any]) -> str:
     s = []
     if "width"        in style: s.append(f"--c-w:{int(style['width'])}px")
@@ -341,30 +301,19 @@ def build_card_vars(style: Dict[str, Any]) -> str:
     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_html = img_tag(card_cfg.get("icon"), "logo", cls="logo-img") if card_cfg.get("icon") and card_cfg["icon"].exists() else ""
     target = "_self"
     return (
         f"<div class='card' style='{vars_inline}'>"
-        + f"<div class='icon-wrap'>{icon_html}</div>"
+        + f"{icon_html}"
         + f"<h3>{escape(card_cfg['title'])}</h3>"
         + f"<p>{escape(card_cfg['blurb'])}</p>"
-        + f"<a class='btn' href='{escape(card_cfg['url'])}' target='{target}' rel='noopener'>Run App</a>"
+        + f"<a class='btn' href='{escape(card_cfg.get('url', '#'))}' target='{target}' rel='noopener'>Explore</a>"
         + "</div>"
     )