Update app.py

app.py

@@ -19,32 +19,99 @@ def load_model(model_name, model_class, is_bc=False):
 # Set up page configuration
 st.set_page_config(page_title="SemViQA Demo", layout="wide")
 
-# Custom CSS and JavaScript to make the sidebar sticky
+# Custom CSS: fixed header and tabs, dynamic height, result box formatting
 st.markdown(
     """
     <style>
-    /* Fix the sidebar */
-    .stSidebar {
-        position: fixed;
-        top: 0;
-        height: 100vh;
+    html, body {
+        height: 100%;
+        margin: 0;
+        overflow: hidden;
+    }
+    .main-container {
+        height: calc(100vh - 55px); /* Browser height - 55px */
         overflow-y: auto;
-        z-index: 1000;
+        padding: 20px;
+    }
+    .big-title {
+        font-size: 36px;
+        font-weight: bold;
+        color: #4A90E2;
+        text-align: center;
+        margin-top: 20px;
+        position: sticky; /* Pin the header */
+        top: 0;
+        background-color: white; /* Ensure the header covers content when scrolling */
+        z-index: 100; /* Ensure it's above other content */
+    }
+    .sub-title {
+        font-size: 20px;
+        color: #666;
+        text-align: center;
+        margin-bottom: 20px;
+    }
+    .stButton>button {
+        background-color: #4CAF50;
+        color: white;
+        font-size: 16px;
+        width: 100%;
+        border-radius: 8px;
+        padding: 10px;
+    }
+    .stTextArea textarea {
+        font-size: 16px;
+        min-height: 120px;
+    }
+    .result-box {
+        background-color: #f9f9f9;
+        padding: 20px;
+        border-radius: 10px;
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+        margin-top: 20px;
+    }
+    .verdict {
+        font-size: 24px;
+        font-weight: bold;
+        margin: 0;
+        display: flex;
+        align-items: center;
     }
-    /* Adjust main content to avoid overlap with the fixed sidebar */
-    .main .block-container {
-        margin-left: 25rem; /* Adjust this value based on your sidebar width */
+    .verdict-icon {
+        margin-right: 10px;
+    }
+    /* Fix the tabs at the top */
+    div[data-baseweb="tab-list"] {
+        position: sticky;
+        top: 55px; /* Height of the header */
+        background-color: white;
+        z-index: 99;
+    }
+    /* Fix the sidebar content */
+    .stSidebar .sidebar-content {
+        background-color: #f0f2f6;
+        padding: 20px;
+        border-radius: 10px;
+        position: sticky;
+        top: 55px; /* Height of the header */
+        height: calc(100vh - 75px); /* Adjust height to fit within the viewport */
+        overflow-y: auto; /* Enable scrolling within the sidebar if content is too long */
+    }
+    .stSidebar .st-expander {
+        background-color: #ffffff;
+        border-radius: 10px;
+        padding: 10px;
+        margin-bottom: 10px;
+    }
+    .stSidebar .stSlider {
+        margin-bottom: 20px;
+    }
+    .stSidebar .stSelectbox {
+        margin-bottom: 20px;
+    }
+    .stSidebar .stCheckbox {
+        margin-bottom: 20px;
     }
     </style>
-    <script>
-    // JavaScript to make the sidebar sticky
-    window.addEventListener('scroll', function() {
-        const sidebar = document.querySelector('.stSidebar');
-        if (sidebar) {
-            sidebar.style.top = `${window.scrollY}px`;
-        }
-    });
-    </script>
     """,
     unsafe_allow_html=True,
 )
@@ -187,9 +254,9 @@ with st.container():
                         <div class='result-box'>
                             <p><strong>Claim:</strong> {res['claim']}</p>
                             <p><strong>Evidence:</strong> {res['evidence']}</p>
+                            <p class='verdict'><span class='verdict-icon'>{verdict_icons.get(res['verdict'], '')}</span>{res['verdict']}</p>
                             <p><strong>Evidence Inference Time:</strong> {res['evidence_time']:.2f} seconds</p>
                             <p><strong>Verdict Inference Time:</strong> {res['verdict_time']:.2f} seconds</p>
-                            <p class='verdict'><span class='verdict-icon'>{verdict_icons.get(res['verdict'], '')}</span>{res['verdict']}</p>
                             {res['details']}
                         </div>
                     """, unsafe_allow_html=True)