VyLala commited on
Commit
317ffc1
·
verified ·
1 Parent(s): c7298d0

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +111 -37
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: 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
 
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
- choices=[str(i) for i in range(11)], # Choices from 0 to 10
138
- label="Select score:",
139
- interactive=True,
140
- container=False, # Set to False to remove the default container
141
- elem_id="nps-buttons-container" # Use an elem_id for custom styling
142
- )
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
143
 
144
- # Use a Markdown component for the "Not likely" and "Extremely likely" labels
145
- with gr.Row():
146
- gr.Markdown("<p style='text-align: left; margin: 0;'>Not likely</p>", elem_id="nps-left-label")
147
- gr.Markdown("<p style='text-align: right; margin: 0;'>Extremely likely</p>", elem_id="nps-right-label")
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
- # Return a gr.update() to make the textbox visible and set the message
173
- return gr.update(visible=True), gr.update(value="Give your email to download excel output and 20+ more free samples", visible=True)
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
- fn=show_email_textbox,
1122
- outputs=[user_email, output_message] # The outputs are the components to be updated
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,