Hugging Face's logo

Spaces:
aim4composites
/
Production_Updated_Mat_Database
Running

App Files Community
8
gvlktejaswi commited on
Commit
aa495c1
·
verified ·
1 Parent(s): 9bd3246

Update page_files/Home.py

Browse files
Files changed (1) hide show
  1. page_files/Home.py +90 -65
page_files/Home.py CHANGED
@@ -57,7 +57,7 @@ def img_to_b64(path):
57
  _HERE = Path(__file__).parent # page_files/
58
  _ROOT = _HERE.parent # project root
59
 
60
- home_img = img_to_b64(str(_ROOT / "Home.png"))
61
  logo_img = img_to_b64(str(_ROOT / "logo.png"))
62
  extract_card_img = img_to_b64(str(_ROOT / "extract_card_img.png"))
63
  search_card_img = img_to_b64(str(_ROOT / "search_card_img.png"))
@@ -188,6 +188,34 @@ st.markdown("""
188
  """, unsafe_allow_html=True)
189
 
190
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
191
  # Helper
192
  def go_categorized(material=None, search=None):
193
  if material:
@@ -501,140 +529,127 @@ st.markdown("""
501
 
502
 
503
  # Showcase section - Databricks style
504
- # Cards rendered in components.html so image+text+click all live inside one card
505
  _extract_img = extract_card_img
506
  _search_img = search_card_img
507
 
508
- components.html(f"""
509
  <!DOCTYPE html><html lang="en"><head>
510
  <meta charset="UTF-8"/>
511
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
512
  <style>
513
- *, *::before, *::after {{ box-sizing: border-box; margin: 0; padding: 0; }}
514
- body {{ font-family: 'DM Sans', sans-serif; background: #fff; }}
515
 
516
- .showcase-wrap {{
517
  display: flex;
518
  align-items: flex-start;
519
  gap: 48px;
520
  padding: 64px 60px 64px;
521
  background: #fff;
522
- }}
523
-
524
- /* LEFT TEXT */
525
- .showcase-left {{
526
- flex: 0 0 320px;
527
  padding-top: 16px;
528
- }}
529
- .showcase-label {{
530
  font-size: 0.68rem;
531
  font-weight: 700;
532
  letter-spacing: 1.8px;
533
  text-transform: uppercase;
534
  color: #8ACAFF;
535
  margin-bottom: 14px;
536
- }}
537
- .showcase-heading {{
538
- font-size: clamp(1.8rem, 3vw, 2.4rem);
539
  font-weight: 800;
540
  color: #0f1f1a;
541
  letter-spacing: -1px;
542
  line-height: 1.15;
543
  margin-bottom: 16px;
544
- }}
545
- .showcase-sub {{
546
  color: #5a6b65;
547
  font-size: 0.93rem;
548
  line-height: 1.7;
549
- }}
550
-
551
- /* RIGHT CARDS */
552
- .showcase-cards {{
553
  flex: 1;
554
  display: flex;
555
  gap: 20px;
556
- }}
557
- .s-card {{
558
  flex: 1;
559
  border-radius: 16px;
560
  overflow: hidden;
561
  background: #0f1f1a;
562
  border: 1.5px solid #1e3a30;
563
  box-shadow: 0 4px 20px rgba(0,0,0,0.10);
564
- text-decoration: none;
565
  display: flex;
566
  flex-direction: column;
567
- transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
568
  cursor: pointer;
569
- }}
570
- .s-card:hover {{
 
571
  box-shadow: 0 8px 32px rgba(138,202,255,0.18);
572
  border-color: #8ACAFF;
573
  transform: translateY(-3px);
574
- }}
575
- .s-card-img {{
576
  width: 100%;
577
- height: 260px;
578
- object-fit: cover;
579
- object-position: top left;
580
  display: block;
 
581
  border-bottom: 1px solid #1e3a30;
582
- }}
583
- .s-card-body {{
584
- padding: 22px 22px 26px;
585
  flex: 1;
586
  display: flex;
587
  flex-direction: column;
588
- }}
589
- .s-card-title {{
590
- font-size: 1.15rem;
591
  font-weight: 700;
592
  color: #fff;
593
  margin-bottom: 8px;
594
- letter-spacing: -0.3px;
595
- }}
596
- .s-card-desc {{
597
- font-size: 0.85rem;
598
  color: #7a9e8f;
599
  line-height: 1.6;
600
  flex: 1;
601
- margin-bottom: 18px;
602
- }}
603
- .s-card-link {{
604
- font-size: 0.85rem;
605
  font-weight: 600;
606
  color: #8ACAFF;
607
- text-decoration: none;
608
  display: inline-flex;
609
  align-items: center;
610
- gap: 6px;
611
- }}
612
- .s-card-link::after {{
613
- content: "\2192";
614
- }}
615
  </style>
616
  </head><body>
617
-
618
  <div class="showcase-wrap">
619
  <div class="showcase-left">
620
  <div class="showcase-label">Platform Features</div>
621
  <div class="showcase-heading">Accelerate Your Composites Research</div>
622
- <p class="showcase-sub">Access a centralized, open-source database for experimental composite
623
- material properties. Polymer, fiber, and composite datasets, all in one place.</p>
624
  </div>
625
-
626
  <div class="showcase-cards">
627
- <div class="s-card" onclick="window.parent.location.href='Upload_Data'">
628
- <img class="s-card-img" src="{_extract_img}" alt="Extract Data"/>
629
  <div class="s-card-body">
630
  <div class="s-card-title">Extract Data</div>
631
  <p class="s-card-desc">Upload experimental datasets and extract structured material property data into the AIM database.</p>
632
  <span class="s-card-link">Open platform</span>
633
  </div>
634
- </a>
635
-
636
- <div class="s-card" onclick="window.parent.location.href='Categorized_Search'">
637
- <img class="s-card-img" src="{_search_img}" alt="Search"/>
638
  <div class="s-card-body">
639
  <div class="s-card-title">Search</div>
640
  <p class="s-card-desc">Browse and filter polymer, fiber, and composite material properties across the full database.</p>
@@ -643,9 +658,19 @@ body {{ font-family: 'DM Sans', sans-serif; background: #fff; }}
643
  </div>
644
  </div>
645
  </div>
646
-
647
  </body></html>
648
- """, height=500, scrolling=False)
 
 
 
 
 
 
 
 
 
 
 
649
 
650
 
651
 
 
57
  _HERE = Path(__file__).parent # page_files/
58
  _ROOT = _HERE.parent # project root
59
 
60
+ home_img = img_to_b64(str(_HERE / "images" / "Home.png"))
61
  logo_img = img_to_b64(str(_ROOT / "logo.png"))
62
  extract_card_img = img_to_b64(str(_ROOT / "extract_card_img.png"))
63
  search_card_img = img_to_b64(str(_ROOT / "search_card_img.png"))
 
188
  """, unsafe_allow_html=True)
189
 
190
 
191
+
192
+ # PostMessage listener for iframe card clicks
193
+ components.html("""
194
+ <script>
195
+ window.addEventListener('message', function(e) {
196
+ if (e.data && e.data.type === 'streamlit:setComponentValue') {
197
+ // Write to a hidden input Streamlit can read via query params
198
+ const val = e.data.value;
199
+ window.parent.location.href = window.parent.location.href.split('?')[0] + '?card=' + val;
200
+ }
201
+ });
202
+ </script>
203
+ """, height=0)
204
+
205
+ # Check query param for card navigation
206
+ import urllib.parse
207
+ try:
208
+ _qp = st.query_params
209
+ if "card" in _qp:
210
+ _card_val = _qp["card"]
211
+ st.query_params.clear()
212
+ if _card_val == "upload":
213
+ st.switch_page("page_files/Upload_Data.py")
214
+ elif _card_val == "search":
215
+ st.switch_page("page_files/Categorized_Search.py")
216
+ except Exception:
217
+ pass
218
+
219
  # Helper
220
  def go_categorized(material=None, search=None):
221
  if material:
 
529
 
530
 
531
  # Showcase section - Databricks style
 
532
  _extract_img = extract_card_img
533
  _search_img = search_card_img
534
 
535
+ _showcase_html = ("""
536
  <!DOCTYPE html><html lang="en"><head>
537
  <meta charset="UTF-8"/>
538
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
539
  <style>
540
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
541
+ body { font-family: 'DM Sans', sans-serif; background: #fff; }
542
 
543
+ .showcase-wrap {
544
  display: flex;
545
  align-items: flex-start;
546
  gap: 48px;
547
  padding: 64px 60px 64px;
548
  background: #fff;
549
+ }
550
+ .showcase-left {
551
+ flex: 0 0 280px;
 
 
552
  padding-top: 16px;
553
+ }
554
+ .showcase-label {
555
  font-size: 0.68rem;
556
  font-weight: 700;
557
  letter-spacing: 1.8px;
558
  text-transform: uppercase;
559
  color: #8ACAFF;
560
  margin-bottom: 14px;
561
+ }
562
+ .showcase-heading {
563
+ font-size: 2rem;
564
  font-weight: 800;
565
  color: #0f1f1a;
566
  letter-spacing: -1px;
567
  line-height: 1.15;
568
  margin-bottom: 16px;
569
+ }
570
+ .showcase-sub {
571
  color: #5a6b65;
572
  font-size: 0.93rem;
573
  line-height: 1.7;
574
+ }
575
+ .showcase-cards {
 
 
576
  flex: 1;
577
  display: flex;
578
  gap: 20px;
579
+ }
580
+ .s-card {
581
  flex: 1;
582
  border-radius: 16px;
583
  overflow: hidden;
584
  background: #0f1f1a;
585
  border: 1.5px solid #1e3a30;
586
  box-shadow: 0 4px 20px rgba(0,0,0,0.10);
 
587
  display: flex;
588
  flex-direction: column;
 
589
  cursor: pointer;
590
+ transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
591
+ }
592
+ .s-card:hover {
593
  box-shadow: 0 8px 32px rgba(138,202,255,0.18);
594
  border-color: #8ACAFF;
595
  transform: translateY(-3px);
596
+ }
597
+ .s-card-img {
598
  width: 100%;
599
+ height: 220px;
600
+ object-fit: contain;
601
+ object-position: top center;
602
  display: block;
603
+ background: #fff;
604
  border-bottom: 1px solid #1e3a30;
605
+ }
606
+ .s-card-body {
607
+ padding: 20px 22px 24px;
608
  flex: 1;
609
  display: flex;
610
  flex-direction: column;
611
+ }
612
+ .s-card-title {
613
+ font-size: 1.1rem;
614
  font-weight: 700;
615
  color: #fff;
616
  margin-bottom: 8px;
617
+ }
618
+ .s-card-desc {
619
+ font-size: 0.83rem;
 
620
  color: #7a9e8f;
621
  line-height: 1.6;
622
  flex: 1;
623
+ margin-bottom: 16px;
624
+ }
625
+ .s-card-link {
626
+ font-size: 0.83rem;
627
  font-weight: 600;
628
  color: #8ACAFF;
 
629
  display: inline-flex;
630
  align-items: center;
631
+ gap: 4px;
632
+ }
633
+ .s-card-link::after { content: " \2192"; }
 
 
634
  </style>
635
  </head><body>
 
636
  <div class="showcase-wrap">
637
  <div class="showcase-left">
638
  <div class="showcase-label">Platform Features</div>
639
  <div class="showcase-heading">Accelerate Your Composites Research</div>
640
+ <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>
 
641
  </div>
 
642
  <div class="showcase-cards">
643
+ <div class="s-card" onclick="window.parent.postMessage({type:'streamlit:setComponentValue',value:'upload'}, '*')">
644
+ <img class="s-card-img" src="""" + _extract_img + """" alt="Extract Data"/>
645
  <div class="s-card-body">
646
  <div class="s-card-title">Extract Data</div>
647
  <p class="s-card-desc">Upload experimental datasets and extract structured material property data into the AIM database.</p>
648
  <span class="s-card-link">Open platform</span>
649
  </div>
650
+ </div>
651
+ <div class="s-card" onclick="window.parent.postMessage({type:'streamlit:setComponentValue',value:'search'}, '*')">
652
+ <img class="s-card-img" src="""" + _search_img + """" alt="Search"/>
 
653
  <div class="s-card-body">
654
  <div class="s-card-title">Search</div>
655
  <p class="s-card-desc">Browse and filter polymer, fiber, and composite material properties across the full database.</p>
 
658
  </div>
659
  </div>
660
  </div>
 
661
  </body></html>
662
+ """)
663
+
664
+ components.html(_showcase_html, height=480, scrolling=False)
665
+
666
+ # Handle card clicks via session state
667
+ _card_click = st.session_state.get("_showcase_click", None)
668
+ if _card_click == "upload":
669
+ st.session_state["_showcase_click"] = None
670
+ st.switch_page("page_files/Upload_Data.py")
671
+ elif _card_click == "search":
672
+ st.session_state["_showcase_click"] = None
673
+ st.switch_page("page_files/Categorized_Search.py")
674
 
675
 
676