app look

app.py

@@ -13,52 +13,46 @@ st.set_page_config(
     page_icon="/home/ubuntu/images/opensearch_mark_default.png"
 )
 
-st.markdown("""
-    <style>
-    #MainMenu, header, footer {
-        visibility: hidden;
-    }
-    </style>
-""", unsafe_allow_html=True)
+import streamlit as st
+from PIL import Image
+import base64
+import yaml
+import os
+import urllib.request
+import tarfile
+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>
+    /* Import Amazon Ember font */
+    @import url('https://fonts.cdnfonts.com/css/amazon-ember');
+
+    /* Global layout tweaks */
     html, body, .main {
         overflow: hidden;
         height: 100vh;
-    }
-    </style>
-""", unsafe_allow_html=True)
-hide_img_fs = '''
-<style>
-button[title="View fullscreen"]{
-    visibility: hidden;}
-</style>
-'''
-
-st.markdown(hide_img_fs, unsafe_allow_html=True)
-st.markdown("""
-    <style>
-    body {
         background-color: #1E1E1E;
         color: #FFFFFF;
+        font-family: 'Amazon Ember', sans-serif;
     }
-    .main {
-        background-color: #1E1E1E !important;
+
+    .block-container {
+        padding-top: 5rem;
     }
-    </style>
-""", unsafe_allow_html=True)
-# Font
-st.markdown("""
-    <style>
-    @import url('https://fonts.cdnfonts.com/css/amazon-ember');
 
-    body {
-        background-color: #000000;
-        color: #FFFFFF;
-        font-family: 'Amazon Ember', sans-serif;
+    /* Hide Streamlit UI elements */
+    #MainMenu, header, footer,
+    button[title="View fullscreen"] {
+        visibility: hidden;
     }
 
+    /* Title styling */
     .title {
         font-size: 40px;
         color: #FF9900;
@@ -66,6 +60,7 @@ st.markdown("""
         margin-bottom: 10px;
     }
 
+    /* Demo card styling */
     .demo-card {
         background-color: #111111;
         border-radius: 12px;
@@ -78,7 +73,7 @@ st.markdown("""
     }
 
     .demo-text {
-        font-size: 28px;
+        font-size: 24px;
         color: #c5c3c0;
         font-family: 'Amazon Ember Cd RC 250', sans-serif;
     }
@@ -91,18 +86,45 @@ st.markdown("""
         border-radius: 6px;
         font-size: 16px;
     }
-    
+
     a .demo-card:hover {
-    background-color: #e46e08 !important;
-    color: black !important;
-    transition: 0.3s;
+        background-color: #e46e08 !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/ubuntu/AI-search-with-amazon-opensearch-service/OpenSearchApp/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")
+
+
+
+
 # Header with logo and title
 extra, col_logo, col_title = st.columns([3,34, 63])
 with col_logo: