Updating UI

app.py

@@ -51,10 +51,18 @@ def process_query(query):
         tf_idf_ranking_modified, bm25_ranking_modified, open_source_ranking_modified
     )
 
-    agent1_context = wiki_data[0]
+    try:
+        agent1_context = wiki_data[0]
+    except:
+        agent1_context = "Can't find a Wiki article for this query."
+        
     agent2_context = article
 
-    boolean_context = miniWikiCollectionDict[boolean_ranking[0]]
+    try:
+        boolean_context = miniWikiCollectionDict[boolean_ranking[0]]
+    except:
+        boolean_context = "Can't find a matching document for this query."
+
     tf_idf_context = miniWikiCollectionDict[tf_idf_ranking[0]]
     bm25_context = miniWikiCollectionDict[str(bm25_ranking[0])]
     vision_context = miniWikiCollectionDict[vision_ranking[0]]
@@ -136,29 +144,85 @@ def process_query(query):
         zeroShot, "Zero-shot doesn't have a context."
     )
 
+# CSS Styling for the fancy effects
+css = """
+#fancy-column {
+    background: linear-gradient(135deg, #1a242f, #2b3a44);  /* Dark blue-gray gradient background */
+    padding: 20px;
+    border-radius: 15px;
+}
+
+#query-input, #submit-button, #best-model-output, #best-answer-output {
+    border-radius: 10px;  /* Rounded corners */
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);  /* Darker shadow for better contrast */
+    background-color: #34495e;  /* Dark background for inputs */
+    color: #ecf0f1;  /* Light text for good readability */
+}
+
+#query-input:focus, #submit-button:focus, #best-model-output:focus, #best-answer-output:focus {
+    outline: none;
+    border: 2px solid #7f8c8d;  /* Subtle accent border on focus */
+}
+
+#submit-button {
+    background-color: #16a085;  /* Muted teal color for button */
+    color: #ecf0f1;  /* Light text for button */
+    font-weight: bold;
+    padding: 10px;
+}
+
+#submit-button:hover {
+    background-color: #1abc9c;  /* Slightly lighter teal on hover */
+}
+
+#best-model-output, #best-answer-output {
+    background-color: #2c3e50;  /* Darker background for output boxes */
+}
+
+#best-model-output label, #best-answer-output label, #query-input label {
+    color: #ecf0f1;  /* Light text for labels */
+}
+"""
+
+
+
 # Interface creation
 def create_interface():
     with gr.Blocks() as interface:
-        query_input = gr.Textbox(label="Enter your query")
-        best_model_output = gr.Textbox(label="Best Model", interactive=False)
-        best_answer_output = gr.Textbox(label="Best Answer", interactive=False)
-
-        def create_answer_row(label):
+        with gr.Column(elem_id="fancy-column", scale=3):  # Fancy column with extra styling
             with gr.Row():
-                answer_textbox = gr.Textbox(label=f"{label} Answer", interactive=False)
-                context_button = gr.Button(f"Show {label} Context")
-                context_textbox = gr.Textbox(label=f"{label} Context", visible=False)
-
-                # Event to show the context
-                context_button.click(
-                    fn=lambda x: gr.update(visible=True, value=x),
-                    inputs=None,
-                    outputs=context_textbox
-                )
+                query_input = gr.Textbox(label="Enter your query", scale=3, elem_id="query-input")
+                submit_button = gr.Button("Submit", scale=1, elem_id="submit-button")
+            
+            # Adjusting the spacing between the output fields
+            with gr.Row():
+                best_model_output = gr.Textbox(label="Best Model", interactive=False, scale=1.5, elem_id="best-model-output")
+                best_answer_output = gr.Textbox(label="Best Answer", interactive=False, scale=1.5, elem_id="best-answer-output")
+
+        with gr.Column():
+            # Function to create a row for answers and contexts
+            def create_answer_row(label):
+                if label == "Agent 1":
+                    label = "Wiki Search"
+                elif label == "Agent 2":
+                    label = "Llama Context Generation"
+                elif label == "Open Source Answer":
+                    label = 'MiniLM Text Embedding model'
+                elif label == "Open Source (Modified)":
+                    label = 'MiniLM Text Embedding model (Modified)'
+                elif label == "TF-IDF + BM25 + Open RRF":
+                    label = "RRF (TF-IDF + BM25 + MiniLM)"
+                elif label == "TF-IDF + BM25 + Open RRF (Modified)":
+                    label = "RRF (TF-IDF + BM25 + MiniLM) (Modified)"
+                elif label == "TF-IDF + BM25 + Open RRF (Combined)":
+                    label = "RRF (TF-IDF + BM25 + MiniLM) (Combined)"
+                with gr.Row():
+                    answer_textbox = gr.Textbox(label=f"{label} Answer", interactive=False, scale=1.2, elem_id="best-model-output")
+                    context_textbox = gr.Textbox(label=f"{label} Context", scale=1.8, elem_id="best-answer-output")
+                
                 return answer_textbox, context_textbox
 
         agent1_output, agent1_context_output = create_answer_row("Agent 1")
-
         agent2_output, agent2_context_output = create_answer_row("Agent 2")
         boolean_output, boolean_context_output = create_answer_row("Boolean")
         tf_idf_output, tf_idf_context_output = create_answer_row("TF-IDF")
@@ -170,7 +234,7 @@ def create_interface():
         tf_idf_mod_output, tf_idf_mod_context_output = create_answer_row("TF-IDF (Modified)")
         bm25_mod_output, bm25_mod_context_output = create_answer_row("BM25 (Modified)")
         vision_mod_output, vision_mod_context_output = create_answer_row("Vision (Modified)")
-        open_source_mod_output, open_source_context_output = create_answer_row("Open Source (Modified)")
+        open_source_mod_output, open_source_mod_context_output = create_answer_row("Open Source (Modified)")
 
         tf_idf_rrf_output, tf_idf_rrf_context_output = create_answer_row("TF-IDF + BM25 + Open RRF")
         tf_idf_rrf_mod_output, tf_idf_rrf_mod_context_output = create_answer_row("TF-IDF + BM25 + Open RRF (Modified)")
@@ -178,7 +242,7 @@ def create_interface():
 
         zero_shot_output, zero_shot_context_output = create_answer_row("Zero Shot")
 
-        gr.Button("Submit").click(
+        submit_button.click(
             fn=process_query,
             inputs=query_input,
             outputs=[
@@ -195,7 +259,7 @@ def create_interface():
                 tf_idf_mod_output, tf_idf_mod_context_output,
                 bm25_mod_output, bm25_mod_context_output,
                 vision_mod_output, vision_mod_context_output,
-                open_source_mod_output, open_source_context_output,
+                open_source_mod_output, open_source_mod_context_output,
                 tf_idf_rrf_output, tf_idf_rrf_context_output,
                 tf_idf_rrf_mod_output, tf_idf_rrf_mod_context_output,
                 tf_idf_rrf_combined_output, tf_idf_rrf_combined_context_output,
@@ -208,4 +272,5 @@ def create_interface():
 # Launch the interface
 if __name__ == "__main__":
     interface = create_interface()
+    interface.css = css
     interface.launch()