Update app.py

app.py

@@ -18,114 +18,102 @@ 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: fixed navigation, header, and adjusted height
-st.markdown("""
+# Custom CSS: fixed header and tabs, dynamic height, result box formatting
+st.markdown(
+    """
     <style>
-        html, body {
-            height: 100%;
-            margin: 0;
-            overflow: hidden;
-        }
-        .main-container {
-            height: calc(100vh - 55px);
-            overflow-y: auto;
-            padding: 20px;
-        }
-        .big-title { 
-            font-size: 36px; 
-            font-weight: bold; 
-            color: #4A90E2; 
-            text-align: center; 
-            margin-top: 20px;
-            position: sticky;
-            top: 0;
-            background-color: white;
-            z-index: 100;
-            padding: 10px 0;
-        }
-        .sub-title { 
-            font-size: 20px; 
-            color: #666; 
-            text-align: center; 
-            margin-bottom: 20px;
-            position: sticky;
-            top: 56px;
-            background-color: white;
-            z-index: 100;
-            padding-bottom: 10px;
-        }
-        .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;
-        }
-        .verdict-icon { 
-            margin-right: 10px;
-        }
-        /* Fixed sidebar */
-        .css-1d391kg, .css-1cypcdb {
-            position: sticky;
-            top: 0;
-            height: calc(100vh - 55px);
-            overflow-y: auto;
-        }
-        /* Tab content area */
-        .stTabs [data-baseweb="tab-panel"] {
-            height: calc(100vh - 150px);
-            overflow-y: auto;
-        }
-        /* Loading animation */
-        .loading-animation {
-            text-align: center;
-            padding: 20px;
-        }
-        .loading-animation .dot {
-            display: inline-block;
-            width: 12px;
-            height: 12px;
-            border-radius: 50%;
-            background-color: #4A90E2;
-            margin: 0 5px;
-            animation: pulse 1.4s infinite ease-in-out;
-        }
-        .loading-animation .dot:nth-child(2) {
-            animation-delay: 0.2s;
-        }
-        .loading-animation .dot:nth-child(3) {
-            animation-delay: 0.4s;
-        }
-        @keyframes pulse {
-            0%, 100% { transform: scale(0.8); opacity: 0.5; }
-            50% { transform: scale(1.2); opacity: 1; }
-        }
+    html, body {
+        height: 100%;
+        margin: 0;
+        overflow: hidden;
+    }
+    .main-container {
+        height: calc(100vh - 55px); /* Browser height - 55px */
+        overflow-y: auto;
+        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;
+    }
+    .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;
+    }
+    .stSidebar .sidebar-content {
+        background-color: #f0f2f6;
+        padding: 20px;
+        border-radius: 10px;
+    }
+    .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>
-""", unsafe_allow_html=True)
+    """,
+    unsafe_allow_html=True,
+)
 
-# Main container with fixed height
+# Container for the whole content with dynamic height
 with st.container():
-    st.markdown("<p class='big-title'>SemViQA: Semantic QA Information Verification System for Vietnamese</p>", unsafe_allow_html=True)
-    st.markdown("<p class='sub-title'>Enter information to verify and context to check its accuracy</p>", unsafe_allow_html=True)
+    st.markdown("<p class='big-title'>SemViQA: Vietnamese Semantic QA for Fact Verification</p>", unsafe_allow_html=True)
+    st.markdown("<p class='sub-title'>Enter the claim and context to verify its accuracy</p>", unsafe_allow_html=True)
 
     # Sidebar: Global Settings
     with st.sidebar.expander("⚙️ Settings", expanded=True):
@@ -153,17 +141,15 @@ with st.container():
             "SemViQA/tc-erniem-viwikifc",
             "SemViQA/tc-erniem-isedsc01"
         ])
-        show_details = st.checkbox("Show probability details", value=False)
+        show_details = st.checkbox("Show Probability Details", value=False)
 
     # Store verification history
     if 'history' not in st.session_state:
         st.session_state.history = []
     if 'latest_result' not in st.session_state:
         st.session_state.latest_result = None
-    if 'is_verifying' not in st.session_state:
-        st.session_state.is_verifying = False
 
-    # Load selected models
+    # Load the selected models
     tokenizer_qatc, model_qatc = load_model(qatc_model_name, QATCForQuestionAnswering)
     tokenizer_bc, model_bc = load_model(bc_model_name, ClaimModelForClassification, is_bc=True)
     tokenizer_tc, model_tc = load_model(tc_model_name, ClaimModelForClassification)
@@ -175,50 +161,29 @@ with st.container():
         "NEI": "⚠️"
     }
 
-    # Create tabs: Verify, History, About
+    # Tabs: Verify, History, About
     tabs = st.tabs(["Verify", "History", "About"])
 
-    # --- Verify Tab ---
+    # --- Tab Verify ---
     with tabs[0]:
-        st.subheader("Verify Information")
-        # Use 2-column layout: inputs on left, results on right
+        st.subheader("Verify a Claim")
+        # 2-column layout: input on the left, results on the right
         col_input, col_result = st.columns([2, 1])
-        
+
         with col_input:
             claim = st.text_area("Enter Claim", "Vietnam is a country in Southeast Asia.")
             context = st.text_area("Enter Context", "Vietnam is a country located in Southeast Asia, covering an area of over 331,000 km² with a population of more than 98 million people.")
-            
-            def start_verification():
-                st.session_state.is_verifying = True
-                st.experimental_rerun()
-                
-            if st.button("Verify", key="verify_button", on_click=start_verification):
-                pass
-        
-        # Display results in right column
+            verify_button = st.button("Verify", key="verify_button")
+
         with col_result:
-            st.markdown("<h3>Verification Results</h3>", unsafe_allow_html=True)
-            
-            if st.session_state.is_verifying:
-                # Show loading animation
-                st.markdown("""
-                    <div class="result-box">
-                        <p><strong>Processing verification...</strong></p>
-                        <div class="loading-animation">
-                            <span class="dot"></span>
-                            <span class="dot"></span>
-                            <span class="dot"></span>
-                        </div>
-                        <p>1. Extracting evidence...</p>
-                        <p>2. Running binary classification...</p>
-                        <p>3. Running 3-class classification...</p>
-                        <p>4. Determining final verdict...</p>
-                    </div>
-                """, unsafe_allow_html=True)
-                
-                # Perform actual verification
+            st.markdown("<h3>Verification Result</h3>", unsafe_allow_html=True)
+            if verify_button:
+                # Placeholder for displaying result/loading
+                result_placeholder = st.empty()
+                result_placeholder.markdown("<em>Verifying...</em>")
+
                 with torch.no_grad():
-                    # Extract evidence and classify information
+                    # Extract evidence and classify the claim
                     evidence = extract_evidence_tfidf_qatc(
                         claim, context, model_qatc, tokenizer_qatc,
                         "cuda" if torch.cuda.is_available() else "cpu",
@@ -244,8 +209,8 @@ with st.container():
                             verdict = ["NEI", "SUPPORTED", "REFUTED"][pred_tc]
                         if show_details:
                             details = f"<p><strong>3-Class Probability:</strong> {prob3class.item():.2f} - <strong>2-Class Probability:</strong> {prob2class.item():.2f}</p>"
-                    
-                    # Save verification history and latest result
+
+                    # Store verification history and the latest result
                     st.session_state.history.append({
                         "claim": claim,
                         "evidence": evidence,
@@ -257,17 +222,13 @@ with st.container():
                         "verdict": verdict,
                         "details": details
                     }
-                    
+
                     if torch.cuda.is_available():
                         torch.cuda.empty_cache()
-                
-                # Turn off verification flag
-                st.session_state.is_verifying = False
-                st.experimental_rerun()
-                
-            elif st.session_state.latest_result is not None:
+
+                # Display the result after verification
                 res = st.session_state.latest_result
-                st.markdown(f"""
+                result_placeholder.markdown(f"""
                     <div class='result-box'>
                         <p><strong>Claim:</strong> {res['claim']}</p>
                         <p><strong>Evidence:</strong> {res['evidence']}</p>
@@ -275,13 +236,13 @@ with st.container():
                         {res['details']}
                     </div>
                 """, unsafe_allow_html=True)
-                # Download verification result
+                # Download Verification Result Feature
                 result_text = f"Claim: {res['claim']}\nEvidence: {res['evidence']}\nVerdict: {res['verdict']}\nDetails: {res['details']}"
                 st.download_button("Download Result", data=result_text, file_name="verification_result.txt", mime="text/plain")
             else:
-                st.info("No verification results yet.")
+                st.info("No verification result yet.")
 
-    # --- History Tab ---
+    # --- Tab History ---
     with tabs[1]:
         st.subheader("Verification History")
         if st.session_state.history:
@@ -290,7 +251,7 @@ with st.container():
         else:
             st.write("No verification history yet.")
 
-    # --- About Tab ---
+    # --- Tab About ---
     with tabs[2]:
         st.subheader("About")
         st.markdown("""
@@ -311,6 +272,6 @@ with st.container():
         """, unsafe_allow_html=True)
         st.markdown("""
             **Description:**  
-            SemViQA is a Semantic QA system designed to verify information in Vietnamese.  
-            The system extracts evidence from the provided context and classifies information as **SUPPORTED**, **REFUTED**, or **NEI** (Not Enough Information) based on advanced models.
+            SemViQA is a Semantic QA system designed for fact verification in Vietnamese.  
+            The system extracts evidence from the provided context and classifies claims as **SUPPORTED**, **REFUTED**, or **NEI** (Not Enough Information) using advanced models.
         """)