Upload app.py

app.py

@@ -15,12 +15,33 @@ st.sidebar.write("- Applications of GANs")
 # Centered Title
 st.markdown("<h1 style='text-align: center;'>Query Processing App</h1>", unsafe_allow_html=True)
 
-# Layout
-left_col, right_col = st.columns([2, 2])  # Equal width for left and right sections
+# Layout Structure
+st.markdown(
+    """
+    <style>
+        .section {
+            border: 2px solid #ddd;
+            border-radius: 10px;
+            padding: 15px;
+            margin-bottom: 10px;
+            background-color: #f9f9f9;
+            height: 100%;
+        }
+        .full-height {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+        }
+    </style>
+    """,
+    unsafe_allow_html=True,
+)
+
+left_col, right_col = st.columns([2, 2])
 
 # Left Side - Query Input & Response
 with left_col:
-    st.markdown("<div style='border:2px solid #ddd; padding:15px; border-radius:10px;'>", unsafe_allow_html=True)
+    st.markdown("<div class='section full-height'>", unsafe_allow_html=True)
 
     st.subheader("Enter your Query")
     query = st.text_area("Query:", height=100, key="query_input")
@@ -42,11 +63,11 @@ with left_col:
     st.subheader("Response")
     st.text_area("Response:", value=st.session_state.get("response", ""), height=100, key="response_box", disabled=True)
 
-    st.markdown("</div>", unsafe_allow_html=True)
+    st.markdown("</div>", unsafe_allow_html=True)  # Closing border div
 
 # Right Side - Retrieved Documents
 with right_col:
-    st.markdown("<div style='border:2px solid #ddd; padding:15px; border-radius:10px; height:100%;'>", unsafe_allow_html=True)
+    st.markdown("<div class='section full-height'>", unsafe_allow_html=True)
 
     if st.button("Show Retrieved Documents"):
         st.session_state.retrieved_docs = "Sample Retrieved Documents"
@@ -54,10 +75,10 @@ with right_col:
     st.subheader("Retrieved Documents")
     st.text_area("Retrieved Documents:", value=st.session_state.get("retrieved_docs", ""), height=230, key="docs_box", disabled=True)
 
-    st.markdown("</div>", unsafe_allow_html=True)
+    st.markdown("</div>", unsafe_allow_html=True)  # Closing border div
 
 # Bottom Section - Metrics
-st.markdown("<div style='border:2px solid #ddd; padding:15px; border-radius:10px; margin-top:20px;'>", unsafe_allow_html=True)
+st.markdown("<div class='section' style='text-align:center;'>", unsafe_allow_html=True)
 
 if st.button("Calculate Metrics"):
     st.session_state.metrics = "Sample Metrics: Accuracy 95%"
@@ -65,4 +86,4 @@ if st.button("Calculate Metrics"):
 st.subheader("Metrics")
 st.text_area("Metrics:", value=st.session_state.get("metrics", ""), height=100, key="metrics_box", disabled=True)
 
-st.markdown("</div>", unsafe_allow_html=True)
+st.markdown("</div>", unsafe_allow_html=True)  # Closing border div