Spaces:

aim4composites
/

Production_Updated_Mat_Database

Running

App Files Files Community

gvlktejaswi commited on May 7

Commit

f89056c

verified ·

1 Parent(s): aa495c1

Update page_files/Home.py

Browse files

Files changed (1) hide show

page_files/Home.py +56 -141

page_files/Home.py CHANGED Viewed

@@ -57,7 +57,7 @@ def img_to_b64(path):
 _HERE = Path(__file__).parent        # page_files/
 _ROOT = _HERE.parent                 # project root
-home_img         = img_to_b64(str(_HERE / "images" / "Home.png"))
 logo_img         = img_to_b64(str(_ROOT / "logo.png"))
 extract_card_img = img_to_b64(str(_ROOT / "extract_card_img.png"))
 search_card_img  = img_to_b64(str(_ROOT / "search_card_img.png"))
@@ -529,148 +529,63 @@ st.markdown("""
 # Showcase section - Databricks style
-_extract_img = extract_card_img
-_search_img  = search_card_img
-_showcase_html = ("""
-<!DOCTYPE html><html lang="en"><head>
-<meta charset="UTF-8"/>
-<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-<style>
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-body { font-family: 'DM Sans', sans-serif; background: #fff; }
-.showcase-wrap {
-    display: flex;
-    align-items: flex-start;
-    gap: 48px;
-    padding: 64px 60px 64px;
-    background: #fff;
-}
-.showcase-left {
-    flex: 0 0 280px;
-    padding-top: 16px;
-}
-.showcase-label {
-    font-size: 0.68rem;
-    font-weight: 700;
-    letter-spacing: 1.8px;
-    text-transform: uppercase;
-    color: #8ACAFF;
-    margin-bottom: 14px;
-}
-.showcase-heading {
-    font-size: 2rem;
-    font-weight: 800;
-    color: #0f1f1a;
-    letter-spacing: -1px;
-    line-height: 1.15;
-    margin-bottom: 16px;
-}
-.showcase-sub {
-    color: #5a6b65;
-    font-size: 0.93rem;
-    line-height: 1.7;
-}
-.showcase-cards {
-    flex: 1;
-    display: flex;
-    gap: 20px;
-}
-.s-card {
-    flex: 1;
-    border-radius: 16px;
-    overflow: hidden;
-    background: #0f1f1a;
-    border: 1.5px solid #1e3a30;
-    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
-    display: flex;
-    flex-direction: column;
-    cursor: pointer;
-    transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
-}
-.s-card:hover {
-    box-shadow: 0 8px 32px rgba(138,202,255,0.18);
-    border-color: #8ACAFF;
-    transform: translateY(-3px);
-}
-.s-card-img {
-    width: 100%;
-    height: 220px;
-    object-fit: contain;
-    object-position: top center;
-    display: block;
-    background: #fff;
-    border-bottom: 1px solid #1e3a30;
-}
-.s-card-body {
-    padding: 20px 22px 24px;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-}
-.s-card-title {
-    font-size: 1.1rem;
-    font-weight: 700;
-    color: #fff;
-    margin-bottom: 8px;
-}
-.s-card-desc {
-    font-size: 0.83rem;
-    color: #7a9e8f;
-    line-height: 1.6;
-    flex: 1;
-    margin-bottom: 16px;
-}
-.s-card-link {
-    font-size: 0.83rem;
-    font-weight: 600;
-    color: #8ACAFF;
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-}
-.s-card-link::after { content: " \2192"; }
-</style>
-</head><body>
-<div class="showcase-wrap">
-    <div class="showcase-left">
-        <div class="showcase-label">Platform Features</div>
-        <div class="showcase-heading">Accelerate Your Composites Research</div>
-        <p class="showcase-sub">Access a centralized, open-source database for experimental composite material properties. Polymer, fiber, and composite datasets, all in one place.</p>
-    </div>
-    <div class="showcase-cards">
-        <div class="s-card" onclick="window.parent.postMessage({type:'streamlit:setComponentValue',value:'upload'}, '*')">
-            <img class="s-card-img" src="""" + _extract_img + """" alt="Extract Data"/>
-            <div class="s-card-body">
-                <div class="s-card-title">Extract Data</div>
-                <p class="s-card-desc">Upload experimental datasets and extract structured material property data into the AIM database.</p>
-                <span class="s-card-link">Open platform</span>
-            </div>
-        </div>
-        <div class="s-card" onclick="window.parent.postMessage({type:'streamlit:setComponentValue',value:'search'}, '*')">
-            <img class="s-card-img" src="""" + _search_img + """" alt="Search"/>
-            <div class="s-card-body">
-                <div class="s-card-title">Search</div>
-                <p class="s-card-desc">Browse and filter polymer, fiber, and composite material properties across the full database.</p>
-                <span class="s-card-link">Open search</span>
-            </div>
-        </div>
-    </div>
-</div>
-</body></html>
-""")
-components.html(_showcase_html, height=480, scrolling=False)
-# Handle card clicks via session state
-_card_click = st.session_state.get("_showcase_click", None)
-if _card_click == "upload":
-    st.session_state["_showcase_click"] = None
-    st.switch_page("page_files/Upload_Data.py")
-elif _card_click == "search":
-    st.session_state["_showcase_click"] = None
-    st.switch_page("page_files/Categorized_Search.py")

 _HERE = Path(__file__).parent        # page_files/
 _ROOT = _HERE.parent                 # project root
+home_img         = img_to_b64(str(_ROOT / "Home.png"))
 logo_img         = img_to_b64(str(_ROOT / "logo.png"))
 extract_card_img = img_to_b64(str(_ROOT / "extract_card_img.png"))
 search_card_img  = img_to_b64(str(_ROOT / "search_card_img.png"))
 # Showcase section - Databricks style
+def _build_showcase_html(extract_b64, search_b64):
+    return (
+        "<!DOCTYPE html><html lang='en'><head>"
+        "<meta charset='UTF-8'/>"
+        "<link href='https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap' rel='stylesheet'>"
+        "<style>"
+        "*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}"
+        "body{font-family:'DM Sans',sans-serif;background:#fff;}"
+        ".showcase-wrap{display:flex;align-items:flex-start;gap:48px;padding:64px 60px;background:#fff;}"
+        ".showcase-left{flex:0 0 280px;padding-top:16px;}"
+        ".showcase-label{font-size:.68rem;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:#8ACAFF;margin-bottom:14px;}"
+        ".showcase-heading{font-size:2rem;font-weight:800;color:#0f1f1a;letter-spacing:-1px;line-height:1.15;margin-bottom:16px;}"
+        ".showcase-sub{color:#5a6b65;font-size:.93rem;line-height:1.7;}"
+        ".showcase-cards{flex:1;display:flex;gap:20px;}"
+        ".s-card{flex:1;border-radius:16px;overflow:hidden;background:#0f1f1a;border:1.5px solid #1e3a30;"
+        "box-shadow:0 4px 20px rgba(0,0,0,.10);display:flex;flex-direction:column;"
+        "cursor:pointer;transition:box-shadow .2s,border-color .2s,transform .2s;}"
+        ".s-card:hover{box-shadow:0 8px 32px rgba(138,202,255,.18);border-color:#8ACAFF;transform:translateY(-3px);}"
+        ".s-card-img{width:100%;height:220px;object-fit:contain;object-position:top center;"
+        "display:block;background:#fff;border-bottom:1px solid #1e3a30;}"
+        ".s-card-body{padding:20px 22px 24px;flex:1;display:flex;flex-direction:column;}"
+        ".s-card-title{font-size:1.1rem;font-weight:700;color:#fff;margin-bottom:8px;}"
+        ".s-card-desc{font-size:.83rem;color:#7a9e8f;line-height:1.6;flex:1;margin-bottom:16px;}"
+        ".s-card-link{font-size:.83rem;font-weight:600;color:#8ACAFF;display:inline-flex;align-items:center;gap:4px;}"
+        ".s-card-link::after{content:' \u2192';}"
+        "</style></head><body>"
+        "<div class='showcase-wrap'>"
+            "<div class='showcase-left'>"
+                "<div class='showcase-label'>Platform Features</div>"
+                "<div class='showcase-heading'>Accelerate Your Composites Research</div>"
+                "<p class='showcase-sub'>Access a centralized, open-source database for experimental composite "
+                "material properties. Polymer, fiber, and composite datasets, all in one place.</p>"
+            "</div>"
+            "<div class='showcase-cards'>"
+                "<div class='s-card' onclick=\"window.parent.location.href=window.parent.location.pathname.replace(/\\/[^/]*$/, '') + '/Upload_Data'\">"
+                    "<img class='s-card-img' src='" + extract_b64 + "' alt='Extract Data'/>"
+                    "<div class='s-card-body'>"
+                        "<div class='s-card-title'>Extract Data</div>"
+                        "<p class='s-card-desc'>Upload experimental datasets and extract structured material property data into the AIM database.</p>"
+                        "<span class='s-card-link'>Open platform</span>"
+                    "</div>"
+                "</div>"
+                "<div class='s-card' onclick=\"window.parent.location.href=window.parent.location.pathname.replace(/\\/[^/]*$/, '') + '/Categorized_Search'\">"
+                    "<img class='s-card-img' src='" + search_b64 + "' alt='Search'/>"
+                    "<div class='s-card-body'>"
+                        "<div class='s-card-title'>Search</div>"
+                        "<p class='s-card-desc'>Browse and filter polymer, fiber, and composite material properties across the full database.</p>"
+                        "<span class='s-card-link'>Open search</span>"
+                    "</div>"
+                "</div>"
+            "</div>"
+        "</div>"
+        "</body></html>"
+    )
+components.html(_build_showcase_html(extract_card_img, search_card_img), height=480, scrolling=False)