ghostai1 commited on
Commit
28b2645
·
verified ·
1 Parent(s): 5bbd563

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +33 -66
app.py CHANGED
@@ -87,14 +87,14 @@ except Exception as e:
87
  # RAG process
88
  def rag_process(query, k=2):
89
  if not query.strip() or len(query) < 5:
90
- return "Invalid query. Please select a question.", "", "", None
91
 
92
  start_time = time.perf_counter()
93
  try:
94
  query_embedding = embedder.encode([query], show_progress_bar=False)
95
  embed_time = time.perf_counter() - start_time
96
  except Exception as e:
97
- return f"Error embedding query: {str(e)}", "", "", None
98
 
99
  start_time = time.perf_counter()
100
  distances, indices = index.search(query_embedding.astype(np.float32), k)
@@ -141,7 +141,7 @@ def plot_metrics(metrics):
141
  plt.close()
142
  return 'rag_plot.png'
143
 
144
- # Gradio interface with stacked buttons and single output
145
  def chat_interface(query):
146
  try:
147
  response, retrieved_faqs, metrics = rag_process(query)
@@ -167,11 +167,6 @@ body {
167
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
168
  color: #e0e0e0;
169
  font-family: 'Arial', sans-serif;
170
- display: flex;
171
- justify-content: center;
172
- align-items: center;
173
- min-height: 100vh;
174
- margin: 0;
175
  }
176
  .gr-box {
177
  background: #3a3a3a;
@@ -185,12 +180,8 @@ body {
185
  color: white;
186
  border-radius: 5px;
187
  padding: 10px 20px;
188
- margin: 5px 0;
189
- width: 80%;
190
- align-self: center;
191
- text-align: center;
192
  transition: background 0.3s ease;
193
- font-size: 16px;
194
  }
195
  .gr-button:hover {
196
  background: #1c86ee;
@@ -201,43 +192,22 @@ body {
201
  color: #e0e0e0;
202
  border: 1px solid #4a4a4a;
203
  border-radius: 5px;
204
- margin-bottom: 10px;
205
- font-size: 14px;
206
- }
207
- #app-container {
208
- max-width: 800px;
209
- width: 100%;
210
- padding: 20px;
211
- background: #252525;
212
- border-radius: 12px;
213
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
214
  }
215
  #button-container {
216
  display: flex;
217
- flex-direction: column;
218
  gap: 10px;
219
- padding: 15px;
220
- background: #303030;
 
221
  border-radius: 8px;
222
  margin-bottom: 20px;
223
- align-items: center;
224
- width: 66%;
225
  }
226
  #output-container {
227
  background: #303030;
228
- padding: 15px;
229
  border-radius: 8px;
230
- margin-top: 20px;
231
- width: 100%;
232
- }
233
- .text-center {
234
- text-align: center;
235
- margin-bottom: 20px;
236
- }
237
- #app-row {
238
- display: flex;
239
- gap: 20px;
240
- justify-content: space-between;
241
  }
242
  """
243
 
@@ -245,31 +215,28 @@ body {
245
  unique_questions = faq_data['question'].tolist()
246
 
247
  with gr.Blocks(css=custom_css) as demo:
248
- with gr.Column(elem_id="app-container"):
249
- gr.Markdown("# Customer Experience Bot Demo", elem_classes="text-center")
250
- gr.Markdown("Select a question to see the bot's response, retrieved FAQs, and call center data cleanup stats.", elem_classes="text-center")
251
-
252
- # Rule of thirds layout: buttons on left 2/3, outputs on right 1/3
253
- with gr.Row(elem_id="app-row"):
254
- # Buttons (left 2/3)
255
- with gr.Column(elem_id="button-container"):
256
- for question in unique_questions:
257
- gr.Button(question).click(
258
- fn=chat_interface,
259
- inputs=gr.State(value=question),
260
- outputs=[
261
- gr.Textbox(label="Bot Response", elem_id="response-output"),
262
- gr.Textbox(label="Retrieved FAQs", elem_id="faq-output"),
263
- gr.Textbox(label="Data Cleanup Stats", elem_id="cleanup-output"),
264
- gr.Image(label="RAG Pipeline Metrics", elem_id="plot-output")
265
- ]
266
- )
267
-
268
- # Single output panel (right 1/3)
269
- with gr.Column(elem_id="output-container"):
270
- response_output = gr.Textbox(label="Bot Response", elem_id="response-output")
271
- faq_output = gr.Textbox(label="Retrieved FAQs", elem_id="faq-output")
272
- cleanup_output = gr.Textbox(label="Data Cleanup Stats", elem_id="cleanup-output")
273
- plot_output = gr.Image(label="RAG Pipeline Metrics", elem_id="plot-output")
274
 
275
  demo.launch()
 
87
  # RAG process
88
  def rag_process(query, k=2):
89
  if not query.strip() or len(query) < 5:
90
+ return "Invalid query. Please select a question.", [], {}
91
 
92
  start_time = time.perf_counter()
93
  try:
94
  query_embedding = embedder.encode([query], show_progress_bar=False)
95
  embed_time = time.perf_counter() - start_time
96
  except Exception as e:
97
+ return f"Error embedding query: {str(e)}", [], {}
98
 
99
  start_time = time.perf_counter()
100
  distances, indices = index.search(query_embedding.astype(np.float32), k)
 
141
  plt.close()
142
  return 'rag_plot.png'
143
 
144
+ # Gradio interface with buttons and single output panel
145
  def chat_interface(query):
146
  try:
147
  response, retrieved_faqs, metrics = rag_process(query)
 
167
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
168
  color: #e0e0e0;
169
  font-family: 'Arial', sans-serif;
 
 
 
 
 
170
  }
171
  .gr-box {
172
  background: #3a3a3a;
 
180
  color: white;
181
  border-radius: 5px;
182
  padding: 10px 20px;
183
+ margin: 5px;
 
 
 
184
  transition: background 0.3s ease;
 
185
  }
186
  .gr-button:hover {
187
  background: #1c86ee;
 
192
  color: #e0e0e0;
193
  border: 1px solid #4a4a4a;
194
  border-radius: 5px;
 
 
 
 
 
 
 
 
 
 
195
  }
196
  #button-container {
197
  display: flex;
198
+ flex-wrap: wrap;
199
  gap: 10px;
200
+ justify-content: center;
201
+ padding: 20px;
202
+ background: #252525;
203
  border-radius: 8px;
204
  margin-bottom: 20px;
 
 
205
  }
206
  #output-container {
207
  background: #303030;
208
+ padding: 20px;
209
  border-radius: 8px;
210
+ margin: 10px 0;
 
 
 
 
 
 
 
 
 
 
211
  }
212
  """
213
 
 
215
  unique_questions = faq_data['question'].tolist()
216
 
217
  with gr.Blocks(css=custom_css) as demo:
218
+ gr.Markdown("# Customer Experience Bot Demo", elem_classes="text-center")
219
+ gr.Markdown("Select a question to see the bot's response, retrieved FAQs, and call center data cleanup stats.", elem_classes="text-center")
220
+
221
+ # Button container for questions
222
+ with gr.Row(elem_id="button-container"):
223
+ for question in unique_questions:
224
+ gr.Button(question).click(
225
+ fn=chat_interface,
226
+ inputs=gr.State(value=question),
227
+ outputs=[
228
+ gr.Textbox(label="Bot Response"),
229
+ gr.Textbox(label="Retrieved FAQs"),
230
+ gr.Textbox(label="Data Cleanup Stats"),
231
+ gr.Image(label="RAG Pipeline Metrics")
232
+ ]
233
+ )
234
+
235
+ # Single output panel
236
+ with gr.Column(elem_id="output-container"):
237
+ response_output = gr.Textbox(label="Bot Response")
238
+ faq_output = gr.Textbox(label="Retrieved FAQs")
239
+ cleanup_output = gr.Textbox(label="Data Cleanup Stats")
240
+ plot_output = gr.Image(label="RAG Pipeline Metrics")
 
 
 
241
 
242
  demo.launch()