Spaces:
Running
Running
Update app.py
Browse files
app.py
CHANGED
@@ -19,27 +19,6 @@ with open("offer.html", "r", encoding="utf-8") as f:
|
|
19 |
with open("mtdna_tool_explainer_updated.html", "r", encoding="utf-8") as f:
|
20 |
flow_chart = f.read()
|
21 |
|
22 |
-
### NEW: CSS for NPS modal overlay
|
23 |
-
custom_css = """
|
24 |
-
#nps-overlay {
|
25 |
-
position: fixed;
|
26 |
-
top: 0; left: 0;
|
27 |
-
width: 100%; height: 100%;
|
28 |
-
background: rgba(0,0,0,0.6);
|
29 |
-
z-index: 9999;
|
30 |
-
display: none; /* hidden by default */
|
31 |
-
justify-content: center;
|
32 |
-
align-items: center;
|
33 |
-
}
|
34 |
-
#nps-box {
|
35 |
-
background: white;
|
36 |
-
padding: 20px;
|
37 |
-
border-radius: 12px;
|
38 |
-
width: 400px;
|
39 |
-
max-width: 90%;
|
40 |
-
text-align: center;
|
41 |
-
}
|
42 |
-
"""
|
43 |
|
44 |
with gr.Blocks() as interface:
|
45 |
# with gr.Tab("CURIOUS ABOUT THIS PRODUCT?"):
|
@@ -104,20 +83,28 @@ with gr.Blocks() as interface:
|
|
104 |
submit_report_button = gr.Button("Submit", visible=False)
|
105 |
status_report = gr.Markdown(visible=False)
|
106 |
|
107 |
-
with gr.Group(visible=
|
108 |
with gr.Column(elem_id="nps-box"):
|
109 |
gr.Markdown("### How likely are you to recommend this tool to a colleague or peer?")
|
110 |
-
|
111 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
112 |
with gr.Row():
|
113 |
-
|
114 |
-
|
115 |
-
|
116 |
-
|
|
|
117 |
|
118 |
-
nps_output = gr.Textbox(label="", interactive=False, visible=True)
|
119 |
|
120 |
-
|
121 |
progress_box = gr.Textbox(label="Live Processing Log", lines=20, interactive=False)
|
122 |
|
123 |
gr.Markdown("---")
|
@@ -1172,10 +1159,8 @@ with gr.Blocks() as interface:
|
|
1172 |
inputs=[raw_text, q1, q2, contact],
|
1173 |
outputs=[feedback_status]
|
1174 |
)
|
1175 |
-
|
1176 |
# Link each button to submit function
|
1177 |
-
for i, btn in enumerate(nps_buttons):
|
1178 |
-
btn.click(fn=submit_nps, inputs=[user_email, gr.State(i)], outputs=nps_output)
|
1179 |
|
1180 |
gr.HTML("""
|
1181 |
<style>
|
@@ -1220,6 +1205,44 @@ with gr.Blocks() as interface:
|
|
1220 |
|
1221 |
</style>
|
1222 |
""")
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1223 |
|
1224 |
# # Custom CSS styles
|
1225 |
# gr.HTML("""
|
@@ -1264,4 +1287,4 @@ with gr.Blocks() as interface:
|
|
1264 |
|
1265 |
|
1266 |
|
1267 |
-
interface.launch(share=True,debug=True)
|
|
|
19 |
with open("mtdna_tool_explainer_updated.html", "r", encoding="utf-8") as f:
|
20 |
flow_chart = f.read()
|
21 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
22 |
|
23 |
with gr.Blocks() as interface:
|
24 |
# with gr.Tab("CURIOUS ABOUT THIS PRODUCT?"):
|
|
|
83 |
submit_report_button = gr.Button("Submit", visible=False)
|
84 |
status_report = gr.Markdown(visible=False)
|
85 |
|
86 |
+
with gr.Group(visible=True, elem_id="nps-overlay") as nps_modal:
|
87 |
with gr.Column(elem_id="nps-box"):
|
88 |
gr.Markdown("### How likely are you to recommend this tool to a colleague or peer?")
|
89 |
+
# Use gr.Radio to create clickable buttons
|
90 |
+
nps_radio = gr.Radio(
|
91 |
+
choices=[str(i) for i in range(11)], # Choices from 0 to 10
|
92 |
+
label="Select score:",
|
93 |
+
interactive=True,
|
94 |
+
container=False, # Set to False to remove the default container
|
95 |
+
elem_id="nps-buttons-container" # Use an elem_id for custom styling
|
96 |
+
)
|
97 |
+
|
98 |
+
# Use a Markdown component for the "Not likely" and "Extremely likely" labels
|
99 |
with gr.Row():
|
100 |
+
gr.Markdown("<p style='text-align: left; margin: 0;'>Not likely</p>", elem_id="nps-left-label")
|
101 |
+
gr.Markdown("<p style='text-align: right; margin: 0;'>Extremely likely</p>", elem_id="nps-right-label")
|
102 |
+
|
103 |
+
nps_submit = gr.Button("Submit")
|
104 |
+
nps_output = gr.Textbox(label="", interactive=False, visible=True)
|
105 |
|
|
|
106 |
|
107 |
+
download_file = gr.File(label="Download File Here", visible=False, interactive=True)
|
108 |
progress_box = gr.Textbox(label="Live Processing Log", lines=20, interactive=False)
|
109 |
|
110 |
gr.Markdown("---")
|
|
|
1159 |
inputs=[raw_text, q1, q2, contact],
|
1160 |
outputs=[feedback_status]
|
1161 |
)
|
1162 |
+
nps_submit.click(fn=submit_nps, inputs=[user_email, nps_radio], outputs=[nps_output])
|
1163 |
# Link each button to submit function
|
|
|
|
|
1164 |
|
1165 |
gr.HTML("""
|
1166 |
<style>
|
|
|
1205 |
|
1206 |
</style>
|
1207 |
""")
|
1208 |
+
|
1209 |
+
# This would go in a separate CSS file or a <style> block in your Gradio app
|
1210 |
+
css = """
|
1211 |
+
#nps-buttons-container .gr-radio-group {
|
1212 |
+
display: flex;
|
1213 |
+
flex-direction: row;
|
1214 |
+
justify-content: center;
|
1215 |
+
gap: 8px; /* Adjust spacing between buttons */
|
1216 |
+
}
|
1217 |
+
#nps-buttons-container .gr-radio-input {
|
1218 |
+
display: none; /* Hide the default radio circle */
|
1219 |
+
}
|
1220 |
+
#nps-buttons-container .gr-radio-label {
|
1221 |
+
display: flex;
|
1222 |
+
justify-content: center;
|
1223 |
+
align-items: center;
|
1224 |
+
width: 40px; /* Adjust button size */
|
1225 |
+
height: 40px;
|
1226 |
+
border-radius: 8px; /* Adjust border radius for rounded corners */
|
1227 |
+
background-color: #38a169; /* Example green color */
|
1228 |
+
color: white;
|
1229 |
+
font-weight: bold;
|
1230 |
+
cursor: pointer;
|
1231 |
+
transition: background-color 0.2s ease;
|
1232 |
+
}
|
1233 |
+
#nps-buttons-container .gr-radio-label:hover {
|
1234 |
+
background-color: #2f855a; /* Darker green on hover */
|
1235 |
+
}
|
1236 |
+
#nps-buttons-container input[type="radio"]:checked + .gr-radio-label {
|
1237 |
+
background-color: #1a4f35; /* Even darker green for the selected state */
|
1238 |
+
border: 2px solid white; /* Highlight the selected button */
|
1239 |
+
}
|
1240 |
+
#nps-left-label, #nps-right-label {
|
1241 |
+
width: 50%;
|
1242 |
+
font-size: 0.9em;
|
1243 |
+
color: #666;
|
1244 |
+
}
|
1245 |
+
"""
|
1246 |
|
1247 |
# # Custom CSS styles
|
1248 |
# gr.HTML("""
|
|
|
1287 |
|
1288 |
|
1289 |
|
1290 |
+
interface.launch(share=True,debug=True,css=css)
|