Spaces:
Running
on
T4
Running
on
T4
app look
Browse files- app.py +64 -16
- 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:
|
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 |
-
|
70 |
color: #e46e08;
|
|
|
|
|
|
|
|
|
71 |
}
|
72 |
|
73 |
/* Header strip with icon */
|
@@ -85,7 +92,7 @@ st.markdown("""
|
|
85 |
}
|
86 |
|
87 |
.card-text {
|
88 |
-
font-size:
|
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 |
-
|
113 |
-
|
114 |
-
|
|
|
|
|
115 |
|
116 |
-
.card:active .card-arrow {
|
117 |
-
|
118 |
-
}
|
119 |
|
120 |
|
121 |
|
122 |
</style>
|
123 |
""", unsafe_allow_html=True)
|
|
|
|
|
|
|
|
|
|
|
124 |
# Header with logo and title
|
125 |
-
col_logo, col_title = st.columns([
|
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 |
|