Spaces:

aim4composites
/

Production_Updated_Mat_Database

Running

App Files Files Community

gvlktejaswi commited on May 7

Commit

6b8dff4

verified ·

1 Parent(s): f89056c

Update page_files/Home.py

Browse files

Files changed (1) hide show

page_files/Home.py +53 -24

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(_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"))
@@ -553,39 +553,68 @@ def _build_showcase_html(extract_b64, search_b64):
         ".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)

 _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"))
         ".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:' →';}"
         "</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='document.getElementById("btn_upload").click()'>"
+              "<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='document.getElementById("btn_search").click()'>"
+              "<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>"
+        "<button id='btn_upload' style='display:none' "
+          "onclick="window.parent.document.querySelectorAll('[data-testid=stBaseButton-header]')[0]?.click()">"
+        "</button>"
+        "<button id='btn_search' style='display:none' "
+          "onclick="window.parent.document.querySelectorAll('[data-testid=stBaseButton-header]')[1]?.click()">"
+        "</button>"
         "</body></html>"
     )
 components.html(_build_showcase_html(extract_card_img, search_card_img), height=480, scrolling=False)
+# Hidden Streamlit buttons wired to the card clicks via JS
+_btn_col1, _btn_col2 = st.columns(2)
+with _btn_col1:
+    if st.button("Go to Extract Data", key="_nav_upload", help="", use_container_width=True):
+        st.switch_page("page_files/Upload_Data.py")
+with _btn_col2:
+    if st.button("Go to Search", key="_nav_search", help="", use_container_width=True):
+        st.switch_page("page_files/Categorized_Search.py")
+# Hide the nav buttons visually — they are only triggered by JS
+st.markdown("""
+<style>
+.st-key-_nav_upload, .st-key-_nav_search {
+    position: absolute !important;
+    opacity: 0 !important;
+    pointer-events: none !important;
+    height: 0 !important;
+    overflow: hidden !important;
+}
+</style>
+""", unsafe_allow_html=True)