mtyrrell commited on
Commit
a0b841e
·
1 Parent(s): 7c296c0

fix to warning pop up positioning

Browse files
Files changed (2) hide show
  1. app.py +33 -31
  2. style.css +25 -74
app.py CHANGED
@@ -3,6 +3,7 @@ import pandas as pd
3
  import logging
4
  import asyncio
5
  import os
 
6
  from uuid import uuid4
7
  from datetime import datetime, timedelta
8
  from pathlib import Path
@@ -22,8 +23,6 @@ import json
22
 
23
  # # fetch tokens and model config params
24
  SPACES_LOG = os.environ["SPACES_LOG"]
25
- # SPACES_LOG = os.getenv('SPACES_LOG')
26
-
27
  model_config = getconfig("model_params.cfg")
28
 
29
  # create the local logs repo
@@ -176,11 +175,15 @@ async def chat(query, history, sources, reports, subtype, year, client_ip=None,
176
  vectorstore = vectorstores["allreports"]
177
 
178
  ##------------------------------get context----------------------------------------------
179
-
 
180
  context_retrieved = get_context(vectorstore=vectorstore,query=query,reports=reports,
181
  sources=sources,subtype=subtype,year=year)
182
-
183
- # Check if any paragraphs were retrieved - add warning if none found
 
 
 
184
  if not context_retrieved or len(context_retrieved) == 0:
185
  warning_message = "⚠️ **No relevant information was found in the audit reports pertaining your query.** Please try rephrasing your question or selecting different report filters."
186
  history[-1] = (query, warning_message)
@@ -249,16 +252,16 @@ async def chat(query, history, sources, reports, subtype, year, client_ip=None,
249
  "session_duration_seconds": session_duration,
250
  "client_location": session_data['location_info'],
251
  "platform": session_data['platform_info'],
252
- # "system_prompt": SYSTEM_PROMPT, #REMOVED FOR TESTING
253
- # "sources": sources, #REMOVED FOR TESTING
254
- # "reports": reports, #REMOVED FOR TESTING
255
- # "subtype": subtype, #REMOVED FOR TESTING
256
- "year": year,
257
  "question": query,
258
  "retriever": model_config.get('retriever','MODEL'),
259
  "endpoint_type": model_config.get('reader','TYPE'),
260
  "reader": model_config.get('reader','NVIDIA_MODEL'),
261
- # "docs": [doc.page_content for doc in context_retrieved], #REMOVED FOR TESTING
262
  }
263
 
264
  if model_config.get('reader','TYPE') == 'NVIDIA':
@@ -383,10 +386,10 @@ with gr.Blocks(title="Audit Q&A", css= "style.css", theme=theme,elem_id = "main-
383
  chatbot = gr.Chatbot(
384
  value=[(None,init_prompt)],
385
  show_copy_button=True,show_label = False,elem_id="chatbot",layout = "panel",
386
- avatar_images = (None,"data-collection.png"),
387
  )
388
 
389
- # feedback UI
390
  with gr.Column(elem_id="feedback-container"):
391
  with gr.Row(visible=False) as feedback_row:
392
  gr.Markdown("Was this response helpful?")
@@ -395,9 +398,23 @@ with gr.Blocks(title="Audit Q&A", css= "style.css", theme=theme,elem_id = "main-
395
  not_okay_btn = gr.Button("👎 Not to expectations", elem_classes="feedback-button")
396
  feedback_thanks = gr.Markdown("Thanks for the feedback!", visible=False)
397
  feedback_state = gr.State()
398
-
399
-
400
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
401
  with gr.Row(elem_id = "input-message"):
402
  textbox=gr.Textbox(placeholder="Ask me anything here!",show_label=False,scale=7,
403
  lines = 1,interactive = True,elem_id="input-textbox")
@@ -710,14 +727,6 @@ with gr.Blocks(title="Audit Q&A", css= "style.css", theme=theme,elem_id = "main-
710
  warning_state = gr.State(False)
711
  pending_query = gr.State(None)
712
 
713
- # Warning UI is implemented as a hidden row (to keep it simple)
714
- with gr.Row(visible=False, elem_id="warning-row", elem_classes="warning-message") as warning_row:
715
- with gr.Column():
716
- gr.Markdown("<span class='warning-icon'>⚠️</span> **No report filter selected. Are you sure you want to proceed?**")
717
- with gr.Row(elem_classes="warning-buttons"):
718
- proceed_btn = gr.Button("Proceed", elem_classes="proceed")
719
- cancel_btn = gr.Button("Cancel", elem_classes="cancel")
720
-
721
  def show_warning():
722
  """Show warning popup when no filters selected"""
723
  return gr.update(visible=True)
@@ -782,13 +791,6 @@ with gr.Blocks(title="Audit Q&A", css= "style.css", theme=theme,elem_id = "main-
782
  # Warn users when query is too short (less than 4 words)
783
  short_query_warning_state = gr.State(False)
784
  check_status = gr.State(None)
785
-
786
- # Short query warning UI - using exact same structure as filters warning
787
- with gr.Row(visible=False, elem_id="warning-row", elem_classes="warning-message") as short_query_warning_row:
788
- with gr.Column():
789
- gr.Markdown("<span class='warning-icon'>⚠️</span> **Your query is too short. Please lengthen your query to ensure the app has adequate context.**")
790
- with gr.Row(elem_classes="warning-buttons"):
791
- short_query_proceed_btn = gr.Button("OK", elem_classes="proceed")
792
 
793
  def check_query_length(textbox_value):
794
  """Check if query has at least 4 words"""
 
3
  import logging
4
  import asyncio
5
  import os
6
+ import time
7
  from uuid import uuid4
8
  from datetime import datetime, timedelta
9
  from pathlib import Path
 
23
 
24
  # # fetch tokens and model config params
25
  SPACES_LOG = os.environ["SPACES_LOG"]
 
 
26
  model_config = getconfig("model_params.cfg")
27
 
28
  # create the local logs repo
 
175
  vectorstore = vectorstores["allreports"]
176
 
177
  ##------------------------------get context----------------------------------------------
178
+ ### adding for assessing computation time
179
+ start_time = time.time()
180
  context_retrieved = get_context(vectorstore=vectorstore,query=query,reports=reports,
181
  sources=sources,subtype=subtype,year=year)
182
+ end_time = time.time()
183
+ print("Time for retriever:",end_time - start_time)
184
+
185
+ # WARNING FOR NO CONTEXT: Check if any paragraphs were retrieved, add warning if none found
186
+ # We use this in the Gradio UI below (displays in the chat dialogue box)
187
  if not context_retrieved or len(context_retrieved) == 0:
188
  warning_message = "⚠️ **No relevant information was found in the audit reports pertaining your query.** Please try rephrasing your question or selecting different report filters."
189
  history[-1] = (query, warning_message)
 
252
  "session_duration_seconds": session_duration,
253
  "client_location": session_data['location_info'],
254
  "platform": session_data['platform_info'],
255
+ "system_prompt": SYSTEM_PROMPT,
256
+ "sources": sources,
257
+ "reports": reports,
258
+ "subtype": subtype,
259
+ #"year": year,
260
  "question": query,
261
  "retriever": model_config.get('retriever','MODEL'),
262
  "endpoint_type": model_config.get('reader','TYPE'),
263
  "reader": model_config.get('reader','NVIDIA_MODEL'),
264
+ "docs": [doc.page_content for doc in context_retrieved],
265
  }
266
 
267
  if model_config.get('reader','TYPE') == 'NVIDIA':
 
386
  chatbot = gr.Chatbot(
387
  value=[(None,init_prompt)],
388
  show_copy_button=True,show_label = False,elem_id="chatbot",layout = "panel",
389
+ avatar_images = (None,"data-collection.png")
390
  )
391
 
392
+ #---------------- FEEDBACK ----------------------
393
  with gr.Column(elem_id="feedback-container"):
394
  with gr.Row(visible=False) as feedback_row:
395
  gr.Markdown("Was this response helpful?")
 
398
  not_okay_btn = gr.Button("👎 Not to expectations", elem_classes="feedback-button")
399
  feedback_thanks = gr.Markdown("Thanks for the feedback!", visible=False)
400
  feedback_state = gr.State()
401
+ #---------------- WARNINGS ----------------------
402
+ # No filters selected warning
403
+ with gr.Row(visible=False, elem_id="warning-row", elem_classes="warning-message") as warning_row:
404
+ with gr.Column():
405
+ gr.Markdown("<span class='warning-icon'>⚠️</span> **No report filter selected. Are you sure you want to proceed?**")
406
+ with gr.Row(elem_classes="warning-buttons"):
407
+ proceed_btn = gr.Button("Proceed", elem_classes="proceed")
408
+ cancel_btn = gr.Button("Cancel", elem_classes="cancel")
409
+
410
+ # Short query warning (< 4 words)
411
+ with gr.Row(visible=False, elem_id="warning-row", elem_classes="warning-message") as short_query_warning_row:
412
+ with gr.Column():
413
+ gr.Markdown("<span class='warning-icon'>⚠️</span> **Your query is too short. Please lengthen your query to ensure the app has adequate context.**")
414
+ with gr.Row(elem_classes="warning-buttons"):
415
+ short_query_proceed_btn = gr.Button("OK", elem_classes="proceed")
416
+
417
+ #---------------- QUERY INPUT ----------------------
418
  with gr.Row(elem_id = "input-message"):
419
  textbox=gr.Textbox(placeholder="Ask me anything here!",show_label=False,scale=7,
420
  lines = 1,interactive = True,elem_id="input-textbox")
 
727
  warning_state = gr.State(False)
728
  pending_query = gr.State(None)
729
 
 
 
 
 
 
 
 
 
730
  def show_warning():
731
  """Show warning popup when no filters selected"""
732
  return gr.update(visible=True)
 
791
  # Warn users when query is too short (less than 4 words)
792
  short_query_warning_state = gr.State(False)
793
  check_status = gr.State(None)
 
 
 
 
 
 
 
794
 
795
  def check_query_length(textbox_value):
796
  """Check if query has at least 4 words"""
style.css CHANGED
@@ -56,8 +56,6 @@ body.dark .tip-box * {
56
 
57
  .message{
58
  font-size:14px !important;
59
- position: relative;
60
- overflow: hidden;
61
  }
62
 
63
 
@@ -182,90 +180,38 @@ label.selected{
182
 
183
  @media screen and (min-width: 1024px) {
184
  div#tab-examples{
185
- height: calc(100vh - 190px);
186
  overflow-y: auto;
187
- max-height: calc(100vh - 190px);
188
  }
189
 
190
  div#sources-textbox{
191
- height: calc(100vh - 190px);
192
- overflow-y: auto;
193
- max-height: calc(100vh - 190px);
194
  }
195
 
196
  div#tab-config{
197
- height: calc(100vh - 190px);
198
- overflow-y: auto;
199
- max-height: calc(100vh - 190px);
200
  }
201
 
202
  div#chatbot-row{
203
- height: calc(100vh - 90px);
204
- max-height: calc(100vh - 90px);
205
- overflow: hidden;
206
  }
207
 
208
  div#chatbot{
209
- height: calc(100vh - 170px);
210
- max-height: calc(100vh - 170px);
211
- overflow-y: auto;
212
- position: relative;
213
  }
214
 
215
  .max-height{
216
- height: calc(100vh - 90px);
217
- max-height: calc(100vh - 90px);
218
- overflow-y: auto;
219
- }
220
-
221
- /* Enhanced containment for right panel */
222
- #right-panel {
223
- height: calc(100vh - 90px);
224
- max-height: calc(100vh - 90px);
225
- overflow: hidden;
226
- position: relative;
227
- display: flex;
228
- flex-direction: column;
229
- }
230
-
231
- #right-panel > div {
232
- height: 100%;
233
- max-height: 100%;
234
- overflow-y: auto;
235
- flex: 1;
236
- position: relative;
237
- }
238
-
239
- .tabitem {
240
- height: calc(100vh - 190px);
241
- max-height: calc(100vh - 190px);
242
  overflow-y: auto;
243
- position: relative;
244
- display: flex;
245
- flex-direction: column;
246
  }
247
 
248
- .other-tabs {
249
- height: 100%;
250
- max-height: 100%;
251
- overflow: hidden;
252
- }
253
-
254
- .other-tabs > div {
255
- padding-left: 40px;
256
- padding-right: 40px;
257
- padding-top: 10px;
258
- height: 100%;
259
- max-height: 100%;
260
- overflow-y: auto;
261
- position: relative;
262
- }
263
-
264
- .gallery-item {
265
- position: relative;
266
- overflow: hidden;
267
- max-height: fit-content;
268
- }
269
  }
270
 
271
  footer {
@@ -414,9 +360,11 @@ span.chatbot > p > img{
414
  text-decoration: none !important;
415
  }
416
 
 
 
417
  /* #_______ Feedback UI _______ */
418
 
419
- .feedback-button {
420
  border: none;
421
  padding: 8px 16px;
422
  border-radius: 4px;
@@ -441,7 +389,7 @@ span.chatbot > p > img{
441
  .feedback-button {
442
  min-width: 100px;
443
  margin: 0 5px;
444
- }
445
 
446
  /* #_______ Warning "popup" styling _______ */
447
  #warning-row {
@@ -449,14 +397,18 @@ span.chatbot > p > img{
449
  border: 1px solid #ffeeba;
450
  border-radius: 4px;
451
  padding: 15px 20px;
452
- margin: 10px 0; /* Reset margin */
453
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
454
- position: left; /* Reset to normal positioning */
 
 
 
455
  z-index: 1000;
456
  font-size: 14px;
457
  color: #856404;
458
- width: 65%; /* Approximatation of chatbox width */
459
- box-sizing: border-box;
 
460
  }
461
 
462
  #warning-row.visible {
@@ -568,7 +520,6 @@ span.chatbot > p > img{
568
  opacity: 1;
569
  }
570
 
571
- /* Arrow for tooltip */
572
  .question-tooltip .tooltip-content::after {
573
  content: "";
574
  position: absolute;
 
56
 
57
  .message{
58
  font-size:14px !important;
 
 
59
  }
60
 
61
 
 
180
 
181
  @media screen and (min-width: 1024px) {
182
  div#tab-examples{
183
+ height:calc(100vh - 190px) !important;
184
  overflow-y: auto;
 
185
  }
186
 
187
  div#sources-textbox{
188
+ height:calc(100vh - 190px) !important;
189
+ overflow-y: auto !important;
 
190
  }
191
 
192
  div#tab-config{
193
+ height:calc(100vh - 190px) !important;
194
+ overflow-y: auto !important;
 
195
  }
196
 
197
  div#chatbot-row{
198
+ height:calc(100vh - 90px) !important;
 
 
199
  }
200
 
201
  div#chatbot{
202
+ height:calc(100vh - 170px) !important;
 
 
 
203
  }
204
 
205
  .max-height{
206
+ height:calc(100vh - 90px) !important;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
207
  overflow-y: auto;
 
 
 
208
  }
209
 
210
+ /* .tabitem:nth-child(n+3) {
211
+ padding-top:30px;
212
+ padding-left:40px;
213
+ padding-right:40px;
214
+ } */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
215
  }
216
 
217
  footer {
 
360
  text-decoration: none !important;
361
  }
362
 
363
+
364
+
365
  /* #_______ Feedback UI _______ */
366
 
367
+ /* .feedback-button {
368
  border: none;
369
  padding: 8px 16px;
370
  border-radius: 4px;
 
389
  .feedback-button {
390
  min-width: 100px;
391
  margin: 0 5px;
392
+ } */
393
 
394
  /* #_______ Warning "popup" styling _______ */
395
  #warning-row {
 
397
  border: 1px solid #ffeeba;
398
  border-radius: 4px;
399
  padding: 15px 20px;
400
+ margin: 10px 0;
401
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
402
+ position: fixed;
403
+ bottom: 100px;
404
+ left: 50%;
405
+ transform: translateX(-50%);
406
  z-index: 1000;
407
  font-size: 14px;
408
  color: #856404;
409
+ width: 65%;
410
+ max-width: 600px;
411
+ box-sizing: border-box;
412
  }
413
 
414
  #warning-row.visible {
 
520
  opacity: 1;
521
  }
522
 
 
523
  .question-tooltip .tooltip-content::after {
524
  content: "";
525
  position: absolute;