Spaces:
Paused
Paused
| # -*- coding: utf-8 -*- | |
| from typing import Optional, Dict, Any | |
| import base64, mimetypes | |
| from html import escape | |
| from pathlib import Path | |
| import streamlit as st | |
| # ========= PATHS ========= | |
| BASE_DIR = Path(__file__).parent | |
| ASSETS = BASE_DIR / "assets" | |
| # ========= META ========= | |
| st.set_page_config(page_title="ST_LOG SUITE", layout="wide") | |
| # ========= GLOBAL THEME (one place) ========= | |
| THEME: Dict[str, Any] = { | |
| "strip": { | |
| "gap": 10, "below_gap": 30, "pill_pad_v": 8, "pill_pad_h": 14, | |
| "pill_font": 16, "tagline_font": 15, | |
| "bg1": "#D4AF37", "bg2": "#B88917", "text": "#000052", | |
| "tagline_color": "#000000", | |
| }, | |
| "page": { | |
| "top_padding": 50, | |
| "container_width": 1120, | |
| "bg_radial": True, | |
| }, | |
| "hero": { | |
| "width": 400, | |
| "margin_bottom": 30, | |
| "logo": ASSETS / "AI_Suite_Log_logo.png", | |
| }, | |
| # ---------- GRID CONTROLS (you asked for this) ---------- | |
| "grid": { | |
| "card_width": 340, # fixed card width to keep sizes consistent | |
| "gap_x": 40, # horizontal gap between cards (px) | |
| "gap_y": 40, # vertical gap between rows (px) | |
| "cols_desktop": 4, # cards per row on desktop | |
| "cols_tablet": 2, # cards per row for medium widths | |
| "cols_mobile": 1, # cards per row on phones | |
| # Optional: force left/center alignment of the whole grid row | |
| "justify": "center", # 'start' | 'center' | 'end' | |
| }, | |
| "card": { | |
| "radius": 22, "border_width": 2, "pad_v": 24, "pad_h": 20, | |
| "border": "#0B1220", "border_hover": "#243447", | |
| "bg_top": "#FFFFFF", "bg_bot": "#FBFCFE", | |
| "title_color": "#0B1220", "blurb_color": "#566275", | |
| }, | |
| "icon": { | |
| "diam": 118, "img": 106, | |
| "circle_bg": "#F1F5F9", | |
| "circle_border": "rgba(12,18,32,0.10)", | |
| }, | |
| "button": { | |
| "pad_v": 12, "pad_h": 20, "radius": 14, | |
| "bg1": "#0B1220", "bg2": "#162338", | |
| "text": "#FFFFFF", "border": "rgba(11,18,32,.55)", | |
| }, | |
| } | |
| # ========= CARDS ========= | |
| 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", | |
| "style": {"bg_top": "#EAF7FD", "bg_bot": "#F5FBFF", "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", | |
| "style": {"bg_top": "#EEF0FF", "bg_bot": "#F7F8FF", "border": "#3E4EB8"}, | |
| }, | |
| { | |
| "title": " ST_Log_RHOB", | |
| "blurb": "Predict formation bulk density in real time.", | |
| "url": "https://smart-thinking-rhob.hf.space", | |
| "icon": ASSETS / "RHOB_logo.png", | |
| "style": {"bg_top": "#EAF7FD", "bg_bot": "#F5FBFF", "border": "#0E4A6E"}, | |
| }, | |
| ] | |
| # ========= Helpers ========= | |
| def data_uri(path: Path) -> Optional[str]: | |
| if not path or not path.exists(): | |
| return None | |
| mime, _ = mimetypes.guess_type(path.name) | |
| 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 "" | |
| 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"] | |
| bg_radial_css = """ | |
| background: | |
| radial-gradient(980px 460px at 50% -140px, | |
| rgba(2,12,30,0.06) 0%, | |
| rgba(2,12,30,0.04) 28%, | |
| rgba(255,255,255,0.98) 60%, | |
| rgba(255,255,255,1) 100%); | |
| """ if page["bg_radial"] else "background: #fff;" | |
| st.markdown(f""" | |
| <style> | |
| :root {{ | |
| --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; | |
| --hero-w: {hero["width"]}px; | |
| --hero-mb: {hero["margin_bottom"]}px; | |
| /* GRID controls you can tweak */ | |
| --card-w: {grid["card_width"]}px; | |
| --grid-gap-x: {grid["gap_x"]}px; | |
| --grid-gap-y: {grid["gap_y"]}px; | |
| --grid-cols: {grid["cols_desktop"]}; | |
| --grid-justify: {grid["justify"]}; | |
| --card-r: {card["radius"]}px; | |
| --card-bw: {card["border_width"]}px; | |
| --card-pv: {card["pad_v"]}px; | |
| --card-ph: {card["pad_h"]}px; | |
| --cardBgTop: {card["bg_top"]}; | |
| --cardBgBot: {card["bg_bot"]}; | |
| --cardStroke: {card["border"]}; | |
| --cardStrokeHover: {card["border_hover"]}; | |
| --icon-d: {icon["diam"]}px; | |
| --icon-img: {icon["img"]}px; | |
| --titleColor: {card["title_color"]}; | |
| --blurbColor: {card["blurb_color"]}; | |
| --btn1: {button["bg1"]}; | |
| --btn2: {button["bg2"]}; | |
| --btnText: {button["text"]}; | |
| --btnBorder: {button["border"]}; | |
| }} | |
| 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; | |
| min-height: 100vh; | |
| display: flex; flex-direction: column; | |
| gap: 14px; | |
| padding: var(--top-pad) 0 28px !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, {strip["bg1"]} 0%, {strip["bg2"]} 100%); | |
| color: {strip["text"]}; | |
| 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: {strip["tagline_color"]}; 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 img {{ | |
| width: var(--hero-w); max-width: 92vw; height: auto; | |
| display:block; margin: 0 auto var(--hero-mb); | |
| filter: drop-shadow(0 6px 16px rgba(0,0,0,.10)); | |
| }} | |
| /* ===== GRID (cards per row are controlled via --grid-cols) ===== */ | |
| .grid {{ | |
| display: grid; | |
| grid-template-columns: repeat(var(--grid-cols), var(--card-w)); | |
| column-gap: var(--grid-gap-x); | |
| row-gap: var(--grid-gap-y); | |
| justify-content: var(--grid-justify); | |
| align-items: stretch; | |
| margin-top: 10px; | |
| }} | |
| /* Override # of columns on smaller screens */ | |
| @media (max-width: 1120px) {{ .grid {{ --grid-cols: {grid["cols_tablet"]}; }} }} | |
| @media (max-width: 720px) {{ .grid {{ --grid-cols: {grid["cols_mobile"]}; }} }} | |
| /* ===== CARD ===== */ | |
| .card {{ | |
| position: relative; | |
| width: var(--card-w); | |
| border-radius: {card["radius"]}px; | |
| padding: var(--card-pv) var(--card-ph); | |
| background: linear-gradient(180deg, var(--cardBgTop) 0%, var(--cardBgBot) 100%); | |
| border: var(--card-bw) solid 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; | |
| 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; | |
| }} | |
| .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,0.82) inset, | |
| 0 -1px 10px rgba(255,255,255,0.28) inset; | |
| filter: saturate(1.03); | |
| }} | |
| /* Icon (kept same styling) */ | |
| .icon-wrap {{ | |
| width: var(--icon-d); height: var(--icon-d); | |
| border-radius: 9999px; display:grid; place-items:center; | |
| background: {icon["circle_bg"]}; | |
| border: 1px solid {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(--icon-img) - 12px); | |
| height: calc(var(--icon-img) - 12px); | |
| padding: 6px; box-sizing: border-box; object-fit: contain; | |
| background: #FFFFFF; border: 2px solid var(--cardStroke); border-radius: 14px; display:block; | |
| }} | |
| .card h3 {{ margin: 0; font-size: 25px; font-weight: 900; color: var(--titleColor); letter-spacing: .15px; }} | |
| .card p {{ color: var(--blurbColor); min-height: 40px; margin: 0 10px; font-size: 16px; }} | |
| .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; | |
| box-shadow: 0 12px 28px rgba(11,18,32,.28), inset 0 1px 0 rgba(255,255,255,.10); | |
| color: {button["text"]}; 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); }} | |
| .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) | |
| # ========= Strip (top-left) ========= | |
| 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> | |
| """, | |
| 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"--card-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"--card-pv:{int(style['pad_v'])}px") | |
| if "pad_h" in style: s.append(f"--card-ph:{int(style['pad_h'])}px") | |
| if "bg_top" in style: s.append(f"--cardBgTop:{style['bg_top']}") | |
| if "bg_bot" in style: s.append(f"--cardBgBot:{style['bg_bot']}") | |
| if "border" in style: s.append(f"--cardStroke:{style['border']}") | |
| if "border_width" in style: s.append(f"--card-bw:{int(style['border_width'])}px") | |
| if "title_color" in style: s.append(f"--titleColor:{style['title_color']}") | |
| if "blurb_color" in style: s.append(f"--blurbColor:{style['blurb_color']}") | |
| 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 "" | |
| target = "_self" | |
| return ( | |
| f"<div class='card' style='{vars_inline}'>" | |
| + f"<div class='icon-wrap'>{icon_html}</div>" | |
| + 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>" | |
| + "</div>" | |
| ) | |
| st.markdown("<div class='grid'>" + "".join(app_card(c) for c in CARDS) + "</div>", unsafe_allow_html=True) | |
| # ========= Footer ========= | |
| st.markdown( | |
| """ | |
| <hr> | |
| <div class='footer'> | |
| © 2025 Smart Thinking AI-Solutions Team. All rights reserved.<br> | |
| Website: <a href="https://smartthinking.com.sa" target="_blank" rel="noopener noreferrer">smartthinking.com.sa</a> | |
| </div> | |
| """, | |
| unsafe_allow_html=True, | |
| ) | |