app look

app.py

@@ -5,74 +5,110 @@ import yaml
 import os
 import urllib.request
 import tarfile
-import subprocess
 from yaml.loader import SafeLoader
 
-
+# Page setup
 st.set_page_config(
     layout="wide",
     page_icon="/home/ubuntu/images/opensearch_mark_default.png"
 )
+st.markdown("""
+    <style>
+    html, body, .main {
+        overflow: hidden;
+        height: 100vh;
+    }
+    </style>
+""", unsafe_allow_html=True)
 
-st.markdown("""<style>
-            @import url('https://fonts.cdnfonts.com/css/amazon-ember');
-            </style>
-                """,unsafe_allow_html=True)
+st.markdown("""
+    <style>
+    body {
+        background-color: #1E1E1E;
+        color: #FFFFFF;
+    }
+    .main {
+        background-color: #1E1E1E !important;
+    }
+    </style>
+""", unsafe_allow_html=True)
+# Font
+st.markdown("""
+    <style>
+    @import url('https://fonts.cdnfonts.com/css/amazon-ember');
 
-AI_ICON = "images/opensearch-twitter-card.png"
-col_0_1,col_0_2,col_0_3= st.columns([10,50,85])
-with col_0_1:
-    st.image(AI_ICON, use_column_width='always')
-with col_0_2:
-    st.markdown('<p style="fontSize:40px;color:#FF9900;fontFamily:\'Amazon Ember Display 500\', sans-serif;">OpenSearch AI demos</p>',unsafe_allow_html=True)
+    body {
+        background-color: #000000;
+        color: #FFFFFF;
+        font-family: 'Amazon Ember', sans-serif;
+    }
 
+    .title {
+        font-size: 40px;
+        color: #FF9900;
+        font-family: 'Amazon Ember Display 500', sans-serif;
+        margin-bottom: 10px;
+    }
 
-#st.header(":rewind: Demos available")
-st.write("")
+    .demo-card {
+        background-color: #111111;
+        border-radius: 12px;
+        padding: 20px;
+        margin: 10px 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border: 1px solid #333333;
+    }
 
-st.write("")
-col_1_1,col_1_2,col_1_3 = st.columns([3,40,65])
-with col_1_1:
-    st.subheader(" ")
-with col_1_2:
-    st.markdown('<p style="fontSize:28px;color:#c5c3c0;fontFamily:\'Amazon Ember Cd RC 250\', sans-serif;">Neural Search</p>',unsafe_allow_html=True)
-with col_1_3:
-    demo_1 = st.button("Launch",key = "demo_1")
-if(demo_1):
-    st.switch_page('pages/Semantic_Search.py')
-st.write("")
+    .demo-text {
+        font-size: 24px;
+        color: #c5c3c0;
+        font-family: 'Amazon Ember Cd RC 250', sans-serif;
+    }
 
-col_2_1,col_2_2,col_2_3 = st.columns([3,40,65])
-with col_2_1:
-    st.subheader(" ")
-with col_2_2:
-    st.markdown('<p style="fontSize:28px;color:#c5c3c0;fontFamily:\'Amazon Ember Cd RC 250\', sans-serif;">Multimodal Conversational Search</p>',unsafe_allow_html=True)
+    .demo-button {
+        background-color: #000000;
+        border: 1px solid #888;
+        color: white;
+        padding: 8px 18px;
+        border-radius: 6px;
+        font-size: 16px;
+    }
     
-with col_2_3:
-    demo_2 = st.button("Launch",key = "demo_2")
-if(demo_2):
-    st.switch_page('pages/Multimodal_Conversational_Search.py')
+    a .demo-card:hover {
+    background-color: #FF9900 !important;
+    color: black !important;
+    transition: 0.3s;
+    }
+
+    </style>
+""", unsafe_allow_html=True)
+
+
+
+# Header with logo and title
+extra, col_logo, col_title = st.columns([3,40, 58])
+with col_logo:
+    st.image("/home/user/app/images/OS_AI_1_cropped.png", use_column_width=True)
+
+    #st.image("/home/ubuntu/images/OS_AI_1.png", use_column_width=True)
+# with col_title:
+#     st.write("")
+#     st.markdown('<div class="title">OpenSearch AI demos</div>', unsafe_allow_html=True)
+
+def demo_link_block(icon, title, target_page):
+    st.markdown(f"""
+        <a href="/{target_page}" target="_self" style="text-decoration: none;">
+            <div class="demo-card">
+                <div class="demo-text">{icon} {title}</div>
+            </div>
+        </a>
+    """, unsafe_allow_html=True)
+
 st.write("")
+demo_link_block("🔍", "AI Search", "Semantic_Search")
+demo_link_block("💬","Multimodal Conversational Search", "Multimodal_Conversational_Search")
+demo_link_block("🛍️","Agentic Shopping Assistant", "AI_Shopping_Assistant")
 
 
-col_3_1,col_3_2,col_3_3 = st.columns([3,40,65])
-with col_3_1:
-    st.subheader(" ")
-with col_3_2:
-    st.markdown('<div style="fontSize:28px;color:#c5c3c0;fontFamily:\'Amazon Ember Cd RC 250\', sans-serif;">Agentic Shopping Assistant</div>',unsafe_allow_html=True)#<span style="fontSize:14px;color:#099ef3;fontWeight:bold;textDecorationLine:underline;textDecorationStyle: dashed;">New</span>
-with col_3_3:
-    demo_3 = st.button("Launch",key = "demo_3")
-if(demo_3):
-    st.switch_page('pages/AI_Shopping_Assistant.py')
-
-isExist = os.path.exists("/home/user/images_retail")
-if not isExist:   
-    os.makedirs("/home/user/images_retail")
-    metadata_file = urllib.request.urlretrieve('https://aws-blogs-artifacts-public.s3.amazonaws.com/BDB-3144/products-data.yml', '/home/user/products.yaml')
-    img_filename,headers= urllib.request.urlretrieve('https://aws-blogs-artifacts-public.s3.amazonaws.com/BDB-3144/images.tar.gz', '/home/user/images_retail/images.tar.gz')              
-    print(img_filename)
-    file = tarfile.open('/home/user/images_retail/images.tar.gz')
-    file.extractall('/home/user/images_retail/')
-    file.close()
-    #remove images.tar.gz
-    os.remove('/home/user/images_retail/images.tar.gz')