Update app.py

app.py

@@ -19,89 +19,100 @@ with open("offer.html", "r", encoding="utf-8") as f:
 with open("mtdna_tool_explainer_updated.html", "r", encoding="utf-8") as f:
     flow_chart = f.read()
 
-# Define the CSS to control layout and styling
 # css = """
-# /* The main container for the buttons */
+# #nps-container {
+#     background-color: #333; /* Dark gray background */
+#     padding: 20px; /* Add some padding around the content */
+#     border-radius: 8px; /* Optional: adds rounded corners */
+# }
+
 # #nps-buttons-container .gr-radio-group {
 #     display: flex;
-#     flex-direction: row; /* Arranges items in a horizontal line */
-#     justify-content: center; /* Centers the buttons horizontally */
-#     gap: 5px; /* Adjusts the space between buttons */
-#     flex-wrap: nowrap; /* Prevents buttons from wrapping to the next line */
+#     flex-direction: row;
+#     justify-content: space-between; /* Spreads buttons evenly across the container */
+#     gap: 5px; 
+#     flex-wrap: nowrap;
 # }
 
-# /* Styling for each individual button */
 # #nps-buttons-container .gr-radio-label {
 #     display: flex;
 #     justify-content: center;
 #     align-items: center;
-#     width: 35px; /* Fixed width for each button */
-#     height: 35px; /* Fixed height for each button */
-#     border-radius: 4px; /* Slightly rounded corners */
-#     background-color: #38a169;
+#     width: 35px;
+#     height: 35px;
+#     border-radius: 4px;
+#     background-color: #555; /* A slightly lighter gray for the buttons */
 #     color: white;
 #     font-weight: bold;
 #     cursor: pointer;
 #     transition: background-color 0.2s ease;
-#     font-size: 14px; /* Adjust font size to fit smaller boxes */
+#     font-size: 14px;
 # }
 
-# /* Hover and selected states */
 # #nps-buttons-container .gr-radio-label:hover {
-#     background-color: #2f855a;
+#     background-color: #777;
 # }
+
 # #nps-buttons-container input[type="radio"]:checked + .gr-radio-label {
-#     background-color: #1a4f35;
+#     background-color: #999;
 #     border: 2px solid white;
 # }
 
-# /* Hides the default radio button */
 # #nps-buttons-container .gr-radio-input {
 #     display: none;
 # }
 
-# /* Adjusting the text labels for "Not likely" and "Extremely likely" */
 # #nps-labels-row {
 #     display: flex;
 #     justify-content: space-between;
-#     margin-top: 5px;
+#     margin-top: 10px; /* Increased margin for more space */
+#     color: #ccc; /* Lighter text color for readability on a dark background */
 # }
+
 # #nps-labels-row p {
 #     margin: 0;
-#     font-size: 0.9em;
-#     color: #666;
+#     font-size: 1.0em; /* Larger font size for the labels */
 # }
 
-# /* Styling for the submit button */
 # #nps-submit-button {
-#     margin-top: 15px; /* Adds space above the submit button */
-#     width: 100%; /* Makes the button full width */
+#     margin-top: 20px; /* Increased space above the submit button */
+#     width: 100%;
+# }
+# /* Active click style for the NPS submit button */
+# #nps-submit-button:active {
+#     border-color: white !important;
+#     box-shadow: 0 0 5px white inset;
 # }
 # """
-
+# Define the CSS to control the layout and styling
 css = """
 #nps-container {
-    background-color: #333; /* Dark gray background */
-    padding: 20px; /* Add some padding around the content */
-    border-radius: 8px; /* Optional: adds rounded corners */
+    background-color: #333;
+    padding: 20px;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    width: 100%; /* Ensures the container takes up full width */
 }
 
-#nps-buttons-container .gr-radio-group {
+/* The container for the radio buttons */
+#nps-radio-container .gr-radio-group {
     display: flex;
     flex-direction: row;
     justify-content: space-between; /* Spreads buttons evenly across the container */
-    gap: 5px; 
     flex-wrap: nowrap;
+    width: 100%; /* Important: Makes the radio group fill its parent container */
 }
 
-#nps-buttons-container .gr-radio-label {
+/* Styling for each individual button */
+#nps-radio-container .gr-radio-label {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 35px;
     height: 35px;
     border-radius: 4px;
-    background-color: #555; /* A slightly lighter gray for the buttons */
+    background-color: #555;
     color: white;
     font-weight: bold;
     cursor: pointer;
@@ -109,41 +120,41 @@ css = """
     font-size: 14px;
 }
 
-#nps-buttons-container .gr-radio-label:hover {
+#nps-radio-container .gr-radio-label:hover {
     background-color: #777;
 }
-
-#nps-buttons-container input[type="radio"]:checked + .gr-radio-label {
+#nps-radio-container input[type="radio"]:checked + .gr-radio-label {
     background-color: #999;
     border: 2px solid white;
 }
-
-#nps-buttons-container .gr-radio-input {
+#nps-radio-container .gr-radio-input {
     display: none;
 }
 
+/* Adjusting the text labels for "Not likely" and "Extremely likely" */
 #nps-labels-row {
     display: flex;
     justify-content: space-between;
-    margin-top: 10px; /* Increased margin for more space */
-    color: #ccc; /* Lighter text color for readability on a dark background */
+    margin-top: 10px;
+    color: #ccc;
+    width: 100%; /* Important: Makes the label row fill its parent container */
 }
 
 #nps-labels-row p {
     margin: 0;
-    font-size: 1.0em; /* Larger font size for the labels */
+    font-size: 1.0em;
+    white-space: nowrap; /* Prevents text from wrapping */
 }
 
 #nps-submit-button {
-    margin-top: 20px; /* Increased space above the submit button */
+    margin-top: 20px;
     width: 100%;
 }
-/* Active click style for the NPS submit button */
+
 #nps-submit-button:active {
     border-color: white !important;
     box-shadow: 0 0 5px white inset;
 }
-"""
 
 with gr.Blocks() as interface:
     # with gr.Tab("CURIOUS ABOUT THIS PRODUCT?"):
@@ -201,56 +212,56 @@ with gr.Blocks() as interface:
               
           #     gr.Markdown("---")
             
-          with gr.Accordion("Open to See the Output Table", open=True) as table_accordion:    
-              output_table = gr.HTML(render=True)
-          #with gr.Row():
-              #output_type = gr.Dropdown(choices=["Excel", "JSON", "TXT"], label="Select Output Format", value="Excel")
-              #download_button = gr.Button("⬇️ Download Output")
-          #download_file = gr.File(label="Download File Here",visible=False)
-        # Use gr.Markdown to add a visual space
-        gr.Markdown(" ") # A simple blank markdown can create space
-            
-        report_button = gr.Button("Report inaccurate output to receive 1 extra free query",elem_id="run-btn")
-        report_textbox = gr.Textbox(
-            label="Describe the issue",
-            lines=4,
-            placeholder="e.g. DQ981467: it gives me unknown when I can in fact search it on NCBI \n DQ981467: cannot find the result in batch output when the live processing did show already processed",
-            visible=False) 
-        submit_report_button = gr.Button("Submit", visible=False, elem_id="run-btn")
-        status_report = gr.Markdown(visible=False)  
-
-        # Use gr.Markdown to add a visual space
-        gr.Markdown(" ") # A simple blank markdown can create space
-
-        download_file = gr.File(label="Download File Here", visible=False, interactive=True)
-        gr.Markdown(" ") # A simple blank markdown can create space
-
-        with gr.Group(visible=True, elem_id="nps-overlay") as nps_modal:
-            #with gr.Column(elem_id="nps-box"):
-            with gr.Group(elem_id="nps-container"):
-                gr.Markdown("### How likely are you to recommend this tool to a colleague or peer?")
-                # # Use gr.Radio to create clickable buttons
-                with gr.Column(elem_id="nps-buttons-container"):
-                    nps_radio = gr.Radio(
-                        choices=[str(i) for i in range(11)],
-                        label="Select score:",
-                        interactive=True,
-                        container=False
-                    )
+            with gr.Accordion("Open to See the Output Table", open=True) as table_accordion:    
+                  output_table = gr.HTML(render=True)
+              #with gr.Row():
+                  #output_type = gr.Dropdown(choices=["Excel", "JSON", "TXT"], label="Select Output Format", value="Excel")
+                  #download_button = gr.Button("⬇️ Download Output")
+              #download_file = gr.File(label="Download File Here",visible=False)
+            # Use gr.Markdown to add a visual space
+            gr.Markdown(" ") # A simple blank markdown can create space
                 
-                # The "Not likely" and "Extremely likely" labels
-                with gr.Row(elem_id="nps-labels-row"):
-                    gr.Markdown("Not likely")
-                    gr.Markdown("Extremely likely")
+            report_button = gr.Button("Report inaccurate output to receive 1 extra free query",elem_id="run-btn")
+            report_textbox = gr.Textbox(
+                label="Describe the issue",
+                lines=4,
+                placeholder="e.g. DQ981467: it gives me unknown when I can in fact search it on NCBI \n DQ981467: cannot find the result in batch output when the live processing did show already processed",
+                visible=False) 
+            submit_report_button = gr.Button("Submit", visible=False, elem_id="run-btn")
+            status_report = gr.Markdown(visible=False)  
+    
+            # Use gr.Markdown to add a visual space
+            gr.Markdown(" ") # A simple blank markdown can create space
+    
+            download_file = gr.File(label="Download File Here", visible=False, interactive=True)
+            gr.Markdown(" ") # A simple blank markdown can create space
     
-                nps_submit = gr.Button("Submit", elem_id="nps-submit-button")
-                nps_output = gr.Textbox(label="", interactive=False, visible=True)  
-        gr.Markdown(" ") # A simple blank markdown can create space
+            with gr.Group(visible=True, elem_id="nps-overlay") as nps_modal:
+                #with gr.Column(elem_id="nps-box"):
+                with gr.Group(elem_id="nps-container"):
+                    gr.Markdown("### How likely are you to recommend this tool to a colleague or peer?")
+                    # # Use gr.Radio to create clickable buttons
+                    with gr.Column(elem_id="nps-buttons-container"):
+                        nps_radio = gr.Radio(
+                            choices=[str(i) for i in range(11)],
+                            label="Select score:",
+                            interactive=True,
+                            container=False
+                        )
+                    
+                    # The "Not likely" and "Extremely likely" labels
+                    with gr.Row(elem_id="nps-labels-row"):
+                        gr.Markdown("Not likely")
+                        gr.Markdown("Extremely likely")
         
-        progress_box = gr.Textbox(label="Live Processing Log", lines=20, interactive=False)   
-
-        gr.Markdown("---")
+                    nps_submit = gr.Button("Submit", elem_id="nps-submit-button")
+                    nps_output = gr.Textbox(label="", interactive=False, visible=True)  
+            gr.Markdown(" ") # A simple blank markdown can create space
+            
+            progress_box = gr.Textbox(label="Live Processing Log", lines=20, interactive=False)   
     
+            gr.Markdown("---")
+        
         # gr.Markdown("### 💬 Feedback (required)")
         # q1 = gr.Textbox(label="1️⃣ Was the inferred location accurate or helpful? Please explain.")
         # q2 = gr.Textbox(label="2️⃣ What would improve your experience with this tool?")