waghib commited on
Commit
31cff59
·
verified ·
1 Parent(s): 3597171

updated css related to theme + added a clear output button

Browse files
Files changed (1) hide show
  1. app.py +31 -12
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
- .main {background-color: #f8f9fa;}
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
- .source-box {background-color: #ffffff; border-radius: 5px; padding: 15px; margin-bottom: 10px; border-left: 5px solid #3498db;}
282
- .metrics-box {background-color: #ffffff; border-radius: 5px; padding: 15px; margin-top: 20px;}
283
- h1, h2, h3 {color: #2c3e50;}
 
 
 
 
 
 
 
 
 
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;padding:20px;background-color:white;border-radius:10px;height:200px;'>
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;padding:20px;background-color:white;border-radius:10px;height:200px;'>
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;padding:20px;background-color:white;border-radius:10px;height:200px;'>
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
- st.markdown("<h1>Clinical Diagnostic Assistant</h1>", unsafe_allow_html=True)
 
 
 
 
 
 
 
 
 
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 style='background-color:#e6f7ff;padding:10px;border-radius:5px;margin-bottom:10px;'><b>🧑‍⚕️ You:</b> {query}</div>", unsafe_allow_html=True)
375
 
376
- st.markdown(f"<div style='background-color:#f0f0f0;padding:10px;border-radius:5px;margin-bottom:10px;'><b>🩺 DiReCT:</b> {response['answer']}</div>", unsafe_allow_html=True)
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"]: