Update app.py

app.py

@@ -19,100 +19,124 @@ 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()
 
-# This would go in a separate CSS file or a <style> block in your Gradio app
+# Define the CSS to control layout and styling
 # css = """
+# /* The main container for the buttons */
 # #nps-buttons-container .gr-radio-group {
 #     display: flex;
-#     flex-direction: row;
-#     justify-content: center;
-#     gap: 8px; /* Adjust spacing between buttons */
-# }
-# #nps-buttons-container .gr-radio-input {
-#     display: none; /* Hide the default radio circle */
+#     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 */
 # }
+
+# /* Styling for each individual button */
 # #nps-buttons-container .gr-radio-label {
 #     display: flex;
 #     justify-content: center;
 #     align-items: center;
-#     width: 40px; /* Adjust button size */
-#     height: 40px;
-#     border-radius: 8px; /* Adjust border radius for rounded corners */
-#     background-color: #38a169; /* Example green color */
+#     width: 35px; /* Fixed width for each button */
+#     height: 35px; /* Fixed height for each button */
+#     border-radius: 4px; /* Slightly rounded corners */
+#     background-color: #38a169;
 #     color: white;
 #     font-weight: bold;
 #     cursor: pointer;
 #     transition: background-color 0.2s ease;
+#     font-size: 14px; /* Adjust font size to fit smaller boxes */
 # }
+
+# /* Hover and selected states */
 # #nps-buttons-container .gr-radio-label:hover {
-#     background-color: #2f855a; /* Darker green on hover */
+#     background-color: #2f855a;
 # }
 # #nps-buttons-container input[type="radio"]:checked + .gr-radio-label {
-#     background-color: #1a4f35; /* Even darker green for the selected state */
-#     border: 2px solid white; /* Highlight the selected button */
+#     background-color: #1a4f35;
+#     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;
 # }
-# #nps-left-label, #nps-right-label {
-#     width: 50%;
+# #nps-labels-row p {
+#     margin: 0;
 #     font-size: 0.9em;
 #     color: #666;
 # }
+
+# /* Styling for the submit button */
+# #nps-submit-button {
+#     margin-top: 15px; /* Adds space above the submit button */
+#     width: 100%; /* Makes the button full width */
+# }
 # """
-# 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%;
 }
 """
 
@@ -178,36 +202,22 @@ with gr.Blocks() as interface:
               #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)
-        
-          report_button = gr.Button("Report inaccurate output to receive 1 extra free query",elem_id="run-btn")
-          report_textbox = gr.Textbox(
+        <br>
+            
+        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)  
+        submit_report_button = gr.Button("Submit", visible=False, elem_id="run-btn")
+        status_report = gr.Markdown(visible=False)  
 
-          with gr.Group(visible=True, elem_id="nps-overlay") as nps_modal:
-            with gr.Column(elem_id="nps-box"):
+        with gr.Group(visible=True, elem_id="nps-overlay") as nps_modal:
+            #with gr.Column(elem_id="nps-box"):
+            with gr.Box(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
-                # nps_radio = gr.Radio(
-                #     choices=[str(i) for i in range(11)],  # Choices from 0 to 10
-                #     label="Select score:",
-                #     interactive=True,
-                #     container=False, # Set to False to remove the default container
-                #     elem_id="nps-buttons-container" # Use an elem_id for custom styling
-                # )
-                
-                # # Use a Markdown component for the "Not likely" and "Extremely likely" labels
-                # with gr.Row():
-                #     gr.Markdown("<p style='text-align: left; margin: 0;'>Not likely</p>", elem_id="nps-left-label")
-                #     gr.Markdown("<p style='text-align: right; margin: 0;'>Extremely likely</p>", elem_id="nps-right-label")
-    
-                # nps_submit = gr.Button("Submit")
-                # nps_output = gr.Textbox(label="", interactive=False, visible=True)
-                # The radio buttons container
                 with gr.Column(elem_id="nps-buttons-container"):
                     nps_radio = gr.Radio(
                         choices=[str(i) for i in range(11)],