Spaces:
Running
Running
Update app.py
Browse files
app.py
CHANGED
@@ -20,41 +20,100 @@ with open("mtdna_tool_explainer_updated.html", "r", encoding="utf-8") as f:
|
|
20 |
flow_chart = f.read()
|
21 |
|
22 |
# This would go in a separate CSS file or a <style> block in your Gradio app
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
23 |
css = """
|
|
|
24 |
#nps-buttons-container .gr-radio-group {
|
25 |
display: flex;
|
26 |
-
flex-direction: row;
|
27 |
-
justify-content: center;
|
28 |
-
gap:
|
29 |
-
|
30 |
-
#nps-buttons-container .gr-radio-input {
|
31 |
-
display: none; /* Hide the default radio circle */
|
32 |
}
|
|
|
|
|
33 |
#nps-buttons-container .gr-radio-label {
|
34 |
display: flex;
|
35 |
justify-content: center;
|
36 |
align-items: center;
|
37 |
-
width:
|
38 |
-
height:
|
39 |
-
border-radius:
|
40 |
-
background-color: #38a169;
|
41 |
color: white;
|
42 |
font-weight: bold;
|
43 |
cursor: pointer;
|
44 |
transition: background-color 0.2s ease;
|
|
|
45 |
}
|
|
|
|
|
46 |
#nps-buttons-container .gr-radio-label:hover {
|
47 |
-
background-color: #2f855a;
|
48 |
}
|
49 |
#nps-buttons-container input[type="radio"]:checked + .gr-radio-label {
|
50 |
-
background-color: #1a4f35;
|
51 |
-
border: 2px solid white;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
52 |
}
|
53 |
-
#nps-
|
54 |
-
|
55 |
font-size: 0.9em;
|
56 |
color: #666;
|
57 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
58 |
"""
|
59 |
|
60 |
with gr.Blocks() as interface:
|
@@ -132,24 +191,39 @@ with gr.Blocks() as interface:
|
|
132 |
with gr.Group(visible=True, elem_id="nps-overlay") as nps_modal:
|
133 |
with gr.Column(elem_id="nps-box"):
|
134 |
gr.Markdown("### How likely are you to recommend this tool to a colleague or peer?")
|
135 |
-
# Use gr.Radio to create clickable buttons
|
136 |
-
nps_radio = gr.Radio(
|
137 |
-
|
138 |
-
|
139 |
-
|
140 |
-
|
141 |
-
|
142 |
-
)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
143 |
|
144 |
-
#
|
145 |
-
with gr.Row():
|
146 |
-
gr.Markdown("
|
147 |
-
gr.Markdown("
|
148 |
|
149 |
-
nps_submit = gr.Button("Submit")
|
150 |
nps_output = gr.Textbox(label="", interactive=False, visible=True)
|
151 |
-
|
152 |
-
|
153 |
download_file = gr.File(label="Download File Here", visible=False, interactive=True)
|
154 |
progress_box = gr.Textbox(label="Live Processing Log", lines=20, interactive=False)
|
155 |
|
@@ -168,9 +242,9 @@ with gr.Blocks() as interface:
|
|
168 |
# return gr.update(visible=True), gr.update(visible=False)
|
169 |
# else:
|
170 |
# return gr.update(visible=False), gr.update(visible=True)
|
171 |
-
def show_email_textbox():
|
172 |
-
|
173 |
-
|
174 |
|
175 |
def classify_with_loading():
|
176 |
return gr.update(value="⏳ Please wait... processing...",visible=True) # Show processing message
|
@@ -1117,10 +1191,10 @@ with gr.Blocks() as interface:
|
|
1117 |
# #every=0.5
|
1118 |
# )
|
1119 |
# Link the button to the function
|
1120 |
-
sign_in_button.click(
|
1121 |
-
|
1122 |
-
|
1123 |
-
)
|
1124 |
|
1125 |
run_button.click(
|
1126 |
fn=threaded_batch_runner,
|
|
|
20 |
flow_chart = f.read()
|
21 |
|
22 |
# This would go in a separate CSS file or a <style> block in your Gradio app
|
23 |
+
# css = """
|
24 |
+
# #nps-buttons-container .gr-radio-group {
|
25 |
+
# display: flex;
|
26 |
+
# flex-direction: row;
|
27 |
+
# justify-content: center;
|
28 |
+
# gap: 8px; /* Adjust spacing between buttons */
|
29 |
+
# }
|
30 |
+
# #nps-buttons-container .gr-radio-input {
|
31 |
+
# display: none; /* Hide the default radio circle */
|
32 |
+
# }
|
33 |
+
# #nps-buttons-container .gr-radio-label {
|
34 |
+
# display: flex;
|
35 |
+
# justify-content: center;
|
36 |
+
# align-items: center;
|
37 |
+
# width: 40px; /* Adjust button size */
|
38 |
+
# height: 40px;
|
39 |
+
# border-radius: 8px; /* Adjust border radius for rounded corners */
|
40 |
+
# background-color: #38a169; /* Example green color */
|
41 |
+
# color: white;
|
42 |
+
# font-weight: bold;
|
43 |
+
# cursor: pointer;
|
44 |
+
# transition: background-color 0.2s ease;
|
45 |
+
# }
|
46 |
+
# #nps-buttons-container .gr-radio-label:hover {
|
47 |
+
# background-color: #2f855a; /* Darker green on hover */
|
48 |
+
# }
|
49 |
+
# #nps-buttons-container input[type="radio"]:checked + .gr-radio-label {
|
50 |
+
# background-color: #1a4f35; /* Even darker green for the selected state */
|
51 |
+
# border: 2px solid white; /* Highlight the selected button */
|
52 |
+
# }
|
53 |
+
# #nps-left-label, #nps-right-label {
|
54 |
+
# width: 50%;
|
55 |
+
# font-size: 0.9em;
|
56 |
+
# color: #666;
|
57 |
+
# }
|
58 |
+
# """
|
59 |
+
# Define the CSS to control layout and styling
|
60 |
css = """
|
61 |
+
/* The main container for the buttons */
|
62 |
#nps-buttons-container .gr-radio-group {
|
63 |
display: flex;
|
64 |
+
flex-direction: row; /* Arranges items in a horizontal line */
|
65 |
+
justify-content: center; /* Centers the buttons horizontally */
|
66 |
+
gap: 5px; /* Adjusts the space between buttons */
|
67 |
+
flex-wrap: nowrap; /* Prevents buttons from wrapping to the next line */
|
|
|
|
|
68 |
}
|
69 |
+
|
70 |
+
/* Styling for each individual button */
|
71 |
#nps-buttons-container .gr-radio-label {
|
72 |
display: flex;
|
73 |
justify-content: center;
|
74 |
align-items: center;
|
75 |
+
width: 35px; /* Fixed width for each button */
|
76 |
+
height: 35px; /* Fixed height for each button */
|
77 |
+
border-radius: 4px; /* Slightly rounded corners */
|
78 |
+
background-color: #38a169;
|
79 |
color: white;
|
80 |
font-weight: bold;
|
81 |
cursor: pointer;
|
82 |
transition: background-color 0.2s ease;
|
83 |
+
font-size: 14px; /* Adjust font size to fit smaller boxes */
|
84 |
}
|
85 |
+
|
86 |
+
/* Hover and selected states */
|
87 |
#nps-buttons-container .gr-radio-label:hover {
|
88 |
+
background-color: #2f855a;
|
89 |
}
|
90 |
#nps-buttons-container input[type="radio"]:checked + .gr-radio-label {
|
91 |
+
background-color: #1a4f35;
|
92 |
+
border: 2px solid white;
|
93 |
+
}
|
94 |
+
|
95 |
+
/* Hides the default radio button */
|
96 |
+
#nps-buttons-container .gr-radio-input {
|
97 |
+
display: none;
|
98 |
+
}
|
99 |
+
|
100 |
+
/* Adjusting the text labels for "Not likely" and "Extremely likely" */
|
101 |
+
#nps-labels-row {
|
102 |
+
display: flex;
|
103 |
+
justify-content: space-between;
|
104 |
+
margin-top: 5px;
|
105 |
}
|
106 |
+
#nps-labels-row p {
|
107 |
+
margin: 0;
|
108 |
font-size: 0.9em;
|
109 |
color: #666;
|
110 |
}
|
111 |
+
|
112 |
+
/* Styling for the submit button */
|
113 |
+
#nps-submit-button {
|
114 |
+
margin-top: 15px; /* Adds space above the submit button */
|
115 |
+
width: 100%; /* Makes the button full width */
|
116 |
+
}
|
117 |
"""
|
118 |
|
119 |
with gr.Blocks() as interface:
|
|
|
191 |
with gr.Group(visible=True, elem_id="nps-overlay") as nps_modal:
|
192 |
with gr.Column(elem_id="nps-box"):
|
193 |
gr.Markdown("### How likely are you to recommend this tool to a colleague or peer?")
|
194 |
+
# # Use gr.Radio to create clickable buttons
|
195 |
+
# nps_radio = gr.Radio(
|
196 |
+
# choices=[str(i) for i in range(11)], # Choices from 0 to 10
|
197 |
+
# label="Select score:",
|
198 |
+
# interactive=True,
|
199 |
+
# container=False, # Set to False to remove the default container
|
200 |
+
# elem_id="nps-buttons-container" # Use an elem_id for custom styling
|
201 |
+
# )
|
202 |
+
|
203 |
+
# # Use a Markdown component for the "Not likely" and "Extremely likely" labels
|
204 |
+
# with gr.Row():
|
205 |
+
# gr.Markdown("<p style='text-align: left; margin: 0;'>Not likely</p>", elem_id="nps-left-label")
|
206 |
+
# gr.Markdown("<p style='text-align: right; margin: 0;'>Extremely likely</p>", elem_id="nps-right-label")
|
207 |
+
|
208 |
+
# nps_submit = gr.Button("Submit")
|
209 |
+
# nps_output = gr.Textbox(label="", interactive=False, visible=True)
|
210 |
+
# The radio buttons container
|
211 |
+
with gr.Column(elem_id="nps-buttons-container"):
|
212 |
+
nps_radio = gr.Radio(
|
213 |
+
choices=[str(i) for i in range(11)],
|
214 |
+
label="Select score:",
|
215 |
+
interactive=True,
|
216 |
+
container=False
|
217 |
+
)
|
218 |
|
219 |
+
# The "Not likely" and "Extremely likely" labels
|
220 |
+
with gr.Row(elem_id="nps-labels-row"):
|
221 |
+
gr.Markdown("Not likely")
|
222 |
+
gr.Markdown("Extremely likely")
|
223 |
|
224 |
+
nps_submit = gr.Button("Submit", elem_id="nps-submit-button")
|
225 |
nps_output = gr.Textbox(label="", interactive=False, visible=True)
|
226 |
+
|
|
|
227 |
download_file = gr.File(label="Download File Here", visible=False, interactive=True)
|
228 |
progress_box = gr.Textbox(label="Live Processing Log", lines=20, interactive=False)
|
229 |
|
|
|
242 |
# return gr.update(visible=True), gr.update(visible=False)
|
243 |
# else:
|
244 |
# return gr.update(visible=False), gr.update(visible=True)
|
245 |
+
# def show_email_textbox():
|
246 |
+
# # Return a gr.update() to make the textbox visible and set the message
|
247 |
+
# return gr.update(visible=True), gr.update(value="Give your email to download excel output and 20+ more free samples", visible=True)
|
248 |
|
249 |
def classify_with_loading():
|
250 |
return gr.update(value="⏳ Please wait... processing...",visible=True) # Show processing message
|
|
|
1191 |
# #every=0.5
|
1192 |
# )
|
1193 |
# Link the button to the function
|
1194 |
+
# sign_in_button.click(
|
1195 |
+
# fn=show_email_textbox,
|
1196 |
+
# outputs=[user_email, output_message] # The outputs are the components to be updated
|
1197 |
+
# )
|
1198 |
|
1199 |
run_button.click(
|
1200 |
fn=threaded_batch_runner,
|