VyLala commited on
Commit
408aa77
·
verified ·
1 Parent(s): f739d5d

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +57 -34
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=False, elem_id="nps-overlay") as nps_modal:
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
- # Create 11 buttons (0–10)
 
 
 
 
 
 
 
 
112
  with gr.Row():
113
- nps_buttons = []
114
- for i in range(0, 11):
115
- btn = gr.Button(str(i), elem_id=f"nps-btn-{i}")
116
- nps_buttons.append(btn)
 
117
 
118
- nps_output = gr.Textbox(label="", interactive=False, visible=True)
119
 
120
- download_file = gr.File(label="Download File Here", visible=False, interactive=True)
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
- #nps_submit.click(fn=submit_nps, inputs=[user_email, nps_slider], outputs=[nps_output])
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)