updated css related to theme + added a clear output button
Browse files
app.py
CHANGED
@@ -269,18 +269,28 @@ def main():
|
|
269 |
st.error(f"Error loading knowledge base: {str(e)}")
|
270 |
st.session_state.vectorstore = None
|
271 |
|
272 |
-
# Custom CSS for modern look
|
273 |
st.markdown("""
|
274 |
<style>
|
275 |
-
|
276 |
.stApp {max-width: 1200px; margin: 0 auto;}
|
277 |
-
.css-1v3fvcr {background-color: #f8f9fa;}
|
278 |
.css-18e3th9 {padding-top: 2rem;}
|
|
|
|
|
279 |
.stButton>button {background-color: #3498db; color: white;}
|
280 |
.stButton>button:hover {background-color: #2980b9;}
|
281 |
-
|
282 |
-
|
283 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
284 |
</style>
|
285 |
""", unsafe_allow_html=True)
|
286 |
|
@@ -339,7 +349,7 @@ def main():
|
|
339 |
col1, col2, col3 = st.columns(3)
|
340 |
with col1:
|
341 |
st.markdown("""
|
342 |
-
<div style='text-align:center;
|
343 |
<img src="https://img.icons8.com/color/48/000000/search--v1.png">
|
344 |
<h3>Intelligent Retrieval</h3>
|
345 |
<p>Finds the most relevant clinical information from the MIMIC-IV-Ext dataset</p>
|
@@ -348,7 +358,7 @@ def main():
|
|
348 |
|
349 |
with col2:
|
350 |
st.markdown("""
|
351 |
-
<div style='text-align:center;
|
352 |
<img src="https://img.icons8.com/color/48/000000/brain.png">
|
353 |
<h3>Advanced Reasoning</h3>
|
354 |
<p>Applies clinical knowledge to generate accurate diagnostic insights</p>
|
@@ -357,7 +367,7 @@ def main():
|
|
357 |
|
358 |
with col3:
|
359 |
st.markdown("""
|
360 |
-
<div style='text-align:center;
|
361 |
<img src="https://img.icons8.com/color/48/000000/document.png">
|
362 |
<h3>Source Transparency</h3>
|
363 |
<p>Provides references to all clinical sources used in generating responses</p>
|
@@ -366,14 +376,23 @@ def main():
|
|
366 |
|
367 |
# Chat interface
|
368 |
elif st.session_state.page == 'chat':
|
369 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
370 |
st.markdown("Ask any clinical diagnostic question and get insights based on medical knowledge and patient cases.")
|
371 |
|
372 |
# Display chat history
|
373 |
for i, (query, response) in enumerate(st.session_state.chat_history):
|
374 |
-
st.markdown(f"<div
|
375 |
|
376 |
-
st.markdown(f"<div
|
377 |
|
378 |
with st.expander("View Sources"):
|
379 |
for doc in response["context"]:
|
|
|
269 |
st.error(f"Error loading knowledge base: {str(e)}")
|
270 |
st.session_state.vectorstore = None
|
271 |
|
272 |
+
# Custom CSS for modern look with dark theme compatibility
|
273 |
st.markdown("""
|
274 |
<style>
|
275 |
+
/* Remove background overrides that conflict with dark theme */
|
276 |
.stApp {max-width: 1200px; margin: 0 auto;}
|
|
|
277 |
.css-18e3th9 {padding-top: 2rem;}
|
278 |
+
|
279 |
+
/* Button styling */
|
280 |
.stButton>button {background-color: #3498db; color: white;}
|
281 |
.stButton>button:hover {background-color: #2980b9;}
|
282 |
+
|
283 |
+
/* Chat message styling */
|
284 |
+
.chat-message {border-radius: 10px; padding: 10px; margin-bottom: 10px;}
|
285 |
+
.chat-message-user {background-color: rgba(52, 152, 219, 0.2); color: inherit;}
|
286 |
+
.chat-message-assistant {background-color: rgba(240, 240, 240, 0.2); color: inherit;}
|
287 |
+
|
288 |
+
/* Source and metrics boxes with dark theme compatibility */
|
289 |
+
.source-box {background-color: rgba(255, 255, 255, 0.1); color: inherit; border-radius: 5px; padding: 15px; margin-bottom: 10px; border-left: 5px solid #3498db;}
|
290 |
+
.metrics-box {background-color: rgba(255, 255, 255, 0.1); color: inherit; border-radius: 5px; padding: 15px; margin-top: 20px;}
|
291 |
+
|
292 |
+
/* Feature cards for homepage */
|
293 |
+
.feature-card {background-color: rgba(255, 255, 255, 0.1); color: inherit; border-radius: 10px; padding: 20px; height: 200px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);}
|
294 |
</style>
|
295 |
""", unsafe_allow_html=True)
|
296 |
|
|
|
349 |
col1, col2, col3 = st.columns(3)
|
350 |
with col1:
|
351 |
st.markdown("""
|
352 |
+
<div class='feature-card' style='text-align:center;'>
|
353 |
<img src="https://img.icons8.com/color/48/000000/search--v1.png">
|
354 |
<h3>Intelligent Retrieval</h3>
|
355 |
<p>Finds the most relevant clinical information from the MIMIC-IV-Ext dataset</p>
|
|
|
358 |
|
359 |
with col2:
|
360 |
st.markdown("""
|
361 |
+
<div class='feature-card' style='text-align:center;'>
|
362 |
<img src="https://img.icons8.com/color/48/000000/brain.png">
|
363 |
<h3>Advanced Reasoning</h3>
|
364 |
<p>Applies clinical knowledge to generate accurate diagnostic insights</p>
|
|
|
367 |
|
368 |
with col3:
|
369 |
st.markdown("""
|
370 |
+
<div class='feature-card' style='text-align:center;'>
|
371 |
<img src="https://img.icons8.com/color/48/000000/document.png">
|
372 |
<h3>Source Transparency</h3>
|
373 |
<p>Provides references to all clinical sources used in generating responses</p>
|
|
|
376 |
|
377 |
# Chat interface
|
378 |
elif st.session_state.page == 'chat':
|
379 |
+
# Header with clear button
|
380 |
+
col1, col2 = st.columns([3, 1])
|
381 |
+
with col1:
|
382 |
+
st.markdown("<h1>Clinical Diagnostic Assistant</h1>", unsafe_allow_html=True)
|
383 |
+
with col2:
|
384 |
+
# Add a clear button in the header
|
385 |
+
if st.button("🗑️ Clear Chat"):
|
386 |
+
st.session_state.chat_history = []
|
387 |
+
st.rerun()
|
388 |
+
|
389 |
st.markdown("Ask any clinical diagnostic question and get insights based on medical knowledge and patient cases.")
|
390 |
|
391 |
# Display chat history
|
392 |
for i, (query, response) in enumerate(st.session_state.chat_history):
|
393 |
+
st.markdown(f"<div class='chat-message chat-message-user'><b>🧑⚕️ You:</b> {query}</div>", unsafe_allow_html=True)
|
394 |
|
395 |
+
st.markdown(f"<div class='chat-message chat-message-assistant'><b>🩺 DiReCT:</b> {response['answer']}</div>", unsafe_allow_html=True)
|
396 |
|
397 |
with st.expander("View Sources"):
|
398 |
for doc in response["context"]:
|