prasadnu commited on
Commit
acaff0c
Β·
1 Parent(s): dea898e
Files changed (2) hide show
  1. app.py +64 -16
  2. pages/Multimodal_Conversational_Search.py +1 -1
app.py CHANGED
@@ -33,6 +33,7 @@ st.markdown("""
33
  }
34
  font-family: 'Amazon Ember', sans-serif;
35
  }
 
36
  .block-container {
37
  padding-top: 2rem;
38
  }
@@ -50,12 +51,14 @@ st.markdown("""
50
  font-family: 'Amazon Ember Display 500', sans-serif;
51
  margin-bottom: 10px;
52
  }
 
 
53
  .card {
54
  background: rgba(255, 255, 255, 0.05); /* subtle white tint */
55
  backdrop-filter: blur(8px); /* frosted glass effect */
56
  border-radius: 12px;
57
  padding: 24px 16px;
58
- height: 240px;
59
  color: white;
60
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
61
  transition: transform 0.2s ease, background 0.2s ease;
@@ -66,8 +69,12 @@ st.markdown("""
66
  }
67
 
68
  .card:hover {
69
- transform: scale(1.02);
70
  color: #e46e08;
 
 
 
 
71
  }
72
 
73
  /* Header strip with icon */
@@ -85,7 +92,7 @@ st.markdown("""
85
  }
86
 
87
  .card-text {
88
- font-size: 28px;
89
  font-weight: 500;
90
  flex-grow: 1;
91
  display: flex;
@@ -95,6 +102,14 @@ st.markdown("""
95
  padding: 0 8px;
96
  }
97
 
 
 
 
 
 
 
 
 
98
  /* Bottom arrow */
99
  .card-arrow {
100
  position: absolute;
@@ -108,27 +123,58 @@ st.markdown("""
108
  color: #ffffff;
109
  }
110
 
111
- .card:hover .card-arrow {
112
- opacity: 1;
113
- color: #e46e08;
114
- }
 
 
115
 
116
- .card:active .card-arrow {
117
- transform: translateX(-50%) scale(1.3);
118
- }
119
 
120
 
121
 
122
  </style>
123
  """, unsafe_allow_html=True)
 
 
 
 
 
124
  # Header with logo and title
125
- col_logo, col_title = st.columns([31, 66])
126
  with col_logo:
127
  st.image("/home/user/app/images/OS_AI_1_cropped.png", use_column_width=True)
 
128
  spacer_col = st.columns(1)[0]
129
  with spacer_col:
130
  st.markdown("<div style='height: 120px;'></div>", unsafe_allow_html=True)
131
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
132
 
133
  col1, col2, col3 = st.columns(3)
134
 
@@ -138,18 +184,19 @@ with col1:
138
  <div class="card">
139
  <div class="card-header">πŸ”</div>
140
  <div class="card-text">AI Search</div>
141
- <div class="card-arrow">β†’</div>
142
  </div>
143
  </a>
144
  """, unsafe_allow_html=True)
145
 
 
 
 
146
  with col2:
147
  st.markdown("""
148
  <a href="/Multimodal_Conversational_Search" target="_self" style="text-decoration: none;">
149
  <div class="card">
150
  <div class="card-header">πŸ’¬</div>
151
  <div class="card-text">Multimodal RAG</div>
152
- <div class="card-arrow">β†’</div>
153
  </div>
154
  </a>
155
  """, unsafe_allow_html=True)
@@ -160,11 +207,9 @@ with col3:
160
  <div class="card">
161
  <div class="card-header">πŸ›οΈ</div>
162
  <div class="card-text">Agentic Shopping Assistant</div>
163
- <div class="card-arrow">β†’</div>
164
  </div>
165
  </a>
166
  """, unsafe_allow_html=True)
167
-
168
  st.markdown("""
169
  </div>
170
  """, unsafe_allow_html=True)
@@ -178,4 +223,7 @@ st.markdown("""
178
  color: white;
179
  }
180
  </style>
181
- """, unsafe_allow_html=True)
 
 
 
 
33
  }
34
  font-family: 'Amazon Ember', sans-serif;
35
  }
36
+
37
  .block-container {
38
  padding-top: 2rem;
39
  }
 
51
  font-family: 'Amazon Ember Display 500', sans-serif;
52
  margin-bottom: 10px;
53
  }
54
+
55
+
56
  .card {
57
  background: rgba(255, 255, 255, 0.05); /* subtle white tint */
58
  backdrop-filter: blur(8px); /* frosted glass effect */
59
  border-radius: 12px;
60
  padding: 24px 16px;
61
+ height: 220px;
62
  color: white;
63
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
64
  transition: transform 0.2s ease, background 0.2s ease;
 
69
  }
70
 
71
  .card:hover {
72
+
73
  color: #e46e08;
74
+ transform: scale(1.06); /* Optional: adds smooth grow effect */
75
+ transition: all 0.3s ease-in-out;
76
+ border: 2px solid #ff3c3c;
77
+
78
  }
79
 
80
  /* Header strip with icon */
 
92
  }
93
 
94
  .card-text {
95
+ font-size: 25px;
96
  font-weight: 500;
97
  flex-grow: 1;
98
  display: flex;
 
102
  padding: 0 8px;
103
  }
104
 
105
+ .card:hover .card-text{
106
+ opacity: 1;
107
+ color: #e46e08;
108
+ font-size: 28px;
109
+ transform: scale(1.2); /* Optional: adds smooth grow effect */
110
+ transition: all 0.3s ease-in-out;
111
+ }
112
+
113
  /* Bottom arrow */
114
  .card-arrow {
115
  position: absolute;
 
123
  color: #ffffff;
124
  }
125
 
126
+ # .card:hover .card-arrow {
127
+ # opacity: 1;
128
+ # color: #e46e08;
129
+ # font-size: 30px;
130
+
131
+ # }
132
 
133
+ # .card:active .card-arrow {
134
+ # transform: translateX(-50%) scale(1.3);
135
+ # }
136
 
137
 
138
 
139
  </style>
140
  """, unsafe_allow_html=True)
141
+
142
+
143
+
144
+
145
+
146
  # Header with logo and title
147
+ col_logo, col_title = st.columns([40, 58])
148
  with col_logo:
149
  st.image("/home/user/app/images/OS_AI_1_cropped.png", use_column_width=True)
150
+
151
  spacer_col = st.columns(1)[0]
152
  with spacer_col:
153
  st.markdown("<div style='height: 120px;'></div>", unsafe_allow_html=True)
154
 
155
+ #st.image("/home/ubuntu/images/OS_AI_1.png", use_column_width=True)
156
+ # with col_title:
157
+ # st.write("")
158
+ # st.markdown('<div class="title">OpenSearch AI demos</div>', unsafe_allow_html=True)
159
+
160
+ # def demo_link_block(icon, title, target_page):
161
+ # st.markdown(f"""
162
+ # <a href="/{target_page}" target="_self" style="text-decoration: none;">
163
+ # <div class="demo-card">
164
+ # <div class="demo-text">
165
+ # <span>{icon} {title}</span>
166
+ # <span class="demo-arrow">β†’</span>
167
+ # </div>
168
+ # </div>
169
+ # </a>
170
+ # """, unsafe_allow_html=True)
171
+
172
+
173
+ # st.write("")
174
+ # demo_link_block("πŸ”", "AI Search", "Semantic_Search")
175
+ # demo_link_block("πŸ’¬","Multimodal Conversational Search", "Multimodal_Conversational_Search")
176
+ # demo_link_block("πŸ›οΈ","Agentic Shopping Assistant", "AI_Shopping_Assistant")
177
+
178
 
179
  col1, col2, col3 = st.columns(3)
180
 
 
184
  <div class="card">
185
  <div class="card-header">πŸ”</div>
186
  <div class="card-text">AI Search</div>
 
187
  </div>
188
  </a>
189
  """, unsafe_allow_html=True)
190
 
191
+
192
+
193
+
194
  with col2:
195
  st.markdown("""
196
  <a href="/Multimodal_Conversational_Search" target="_self" style="text-decoration: none;">
197
  <div class="card">
198
  <div class="card-header">πŸ’¬</div>
199
  <div class="card-text">Multimodal RAG</div>
 
200
  </div>
201
  </a>
202
  """, unsafe_allow_html=True)
 
207
  <div class="card">
208
  <div class="card-header">πŸ›οΈ</div>
209
  <div class="card-text">Agentic Shopping Assistant</div>
 
210
  </div>
211
  </a>
212
  """, unsafe_allow_html=True)
 
213
  st.markdown("""
214
  </div>
215
  """, unsafe_allow_html=True)
 
223
  color: white;
224
  }
225
  </style>
226
+ """, unsafe_allow_html=True)
227
+
228
+ # <div class="card-arrow"></div>
229
+
pages/Multimodal_Conversational_Search.py CHANGED
@@ -437,8 +437,8 @@ with st.sidebar:
437
  </style>
438
  """,unsafe_allow_html=True)
439
  with st.expander("Sample questions:"):
440
- st.markdown("<span style = 'color:#FF9900;'>UK Housing</span> - which city has the highest average housing price in UK ?",unsafe_allow_html=True)
441
  st.markdown("<span style = 'color:#FF9900;'>Global Warming stats</span> - What is the projected energy percentage from renewable sources in future?",unsafe_allow_html=True)
 
442
  st.markdown("<span style = 'color:#FF9900;'>Covid19 impacts</span> - How many aged above 85 years died due to covid ?",unsafe_allow_html=True)
443
 
444
 
 
437
  </style>
438
  """,unsafe_allow_html=True)
439
  with st.expander("Sample questions:"):
 
440
  st.markdown("<span style = 'color:#FF9900;'>Global Warming stats</span> - What is the projected energy percentage from renewable sources in future?",unsafe_allow_html=True)
441
+ st.markdown("<span style = 'color:#FF9900;'>UK Housing</span> - which city has the highest average housing price in UK ?",unsafe_allow_html=True)
442
  st.markdown("<span style = 'color:#FF9900;'>Covid19 impacts</span> - How many aged above 85 years died due to covid ?",unsafe_allow_html=True)
443
 
444