siyah1 commited on
Commit
2127385
·
verified ·
1 Parent(s): 42917ec

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +53 -328
app.py CHANGED
@@ -1,375 +1,100 @@
1
  import gradio as gr
2
  from geminisearch import webSearch
3
- import threading
4
- import time
5
 
6
- class QuasarAudioChat:
7
- def __init__(self):
8
- self.is_processing = False
9
-
10
- def process_audio_message(self, audio, chat_history):
11
- """Process audio input using Gradio's built-in speech recognition"""
12
- if audio is None:
13
- return chat_history, "Please provide audio input", "No audio received"
14
-
15
- try:
16
- # Gradio will handle the speech-to-text conversion automatically
17
- # when we use the audio input with the speech recognition feature
18
- return chat_history, "Processing audio...", "Audio received, processing..."
19
- except Exception as e:
20
- error_msg = f"Audio processing error: {str(e)}"
21
- chat_history.append({"role": "assistant", "content": error_msg})
22
- return chat_history, error_msg, "Error processing audio"
23
-
24
- def process_text_with_audio_response(self, text, chat_history):
25
- """Process text input and prepare for audio output"""
26
- if not text.strip():
27
- return chat_history, "", "Please enter a message"
28
-
29
- # Add user message to chat
30
- chat_history.append({"role": "user", "content": text})
31
-
32
- try:
33
- # Get response from webSearch
34
- response = webSearch(text)
35
- chat_history.append({"role": "assistant", "content": response})
36
-
37
- return chat_history, "", f"✅ Response ready: {text[:30]}..."
38
-
39
- except Exception as e:
40
- error_msg = f"Search error: {str(e)}"
41
- chat_history.append({"role": "assistant", "content": error_msg})
42
- return chat_history, "", f"❌ Error: {str(e)[:30]}..."
43
-
44
- # Initialize audio chat
45
- audio_chat = QuasarAudioChat()
46
-
47
- # Predefined questions for Quasar LLM
48
- quasar_examples = [
49
  "What are the latest AI technology developments?",
50
- "What's happening in global news today?",
51
  "What's the current cryptocurrency market status?"
52
  ]
53
 
54
- # Enhanced CSS with modern audio chat styling
55
  custom_css = """
56
- :root {
57
- --quasar-primary: #667eea;
58
- --quasar-secondary: #764ba2;
59
- --quasar-accent: #ff6b6b;
60
- --quasar-gold: #ffd93d;
61
- }
62
-
63
  .gradio-container {
64
- max-width: 1400px !important;
65
  margin: auto !important;
66
- background: linear-gradient(135deg, var(--quasar-primary) 0%, var(--quasar-secondary) 100%) !important;
67
- min-height: 100vh !important;
68
- padding: 1rem !important;
69
- }
70
-
71
- .main-container {
72
- background: rgba(255, 255, 255, 0.95) !important;
73
- border-radius: 25px !important;
74
- padding: 2rem !important;
75
- box-shadow: 0 25px 50px rgba(0,0,0,0.15) !important;
76
- backdrop-filter: blur(10px) !important;
77
  }
78
 
79
  .chatbot {
80
- border-radius: 20px !important;
81
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
82
- border: 2px solid rgba(102, 126, 234, 0.2) !important;
83
- background: rgba(255, 255, 255, 0.9) !important;
84
- }
85
-
86
- .audio-section {
87
- background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(255, 217, 61, 0.1)) !important;
88
- border-radius: 20px !important;
89
- padding: 1.5rem !important;
90
- margin: 1rem 0 !important;
91
- border: 2px solid rgba(255, 107, 107, 0.2) !important;
92
- }
93
-
94
- .audio-input {
95
  border-radius: 15px !important;
96
- background: rgba(255, 255, 255, 0.9) !important;
97
- border: 2px solid var(--quasar-accent) !important;
98
- box-shadow: 0 5px 15px rgba(255, 107, 107, 0.2) !important;
99
- }
100
-
101
- .voice-button {
102
- background: linear-gradient(135deg, var(--quasar-accent), var(--quasar-gold)) !important;
103
- border: none !important;
104
- border-radius: 50px !important;
105
- color: white !important;
106
- font-weight: 600 !important;
107
- font-size: 1.1rem !important;
108
- padding: 0.8rem 2rem !important;
109
- box-shadow: 0 8px 20px rgba(255, 107, 107, 0.3) !important;
110
- transition: all 0.3s ease !important;
111
- text-transform: uppercase !important;
112
- letter-spacing: 1px !important;
113
  }
114
 
115
- .voice-button:hover {
116
- transform: translateY(-3px) !important;
117
- box-shadow: 0 12px 30px rgba(255, 107, 107, 0.4) !important;
118
- }
119
-
120
- .text-section {
121
- background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1)) !important;
122
- border-radius: 20px !important;
123
- padding: 1.5rem !important;
124
- margin: 1rem 0 !important;
125
- border: 2px solid rgba(102, 126, 234, 0.2) !important;
126
- }
127
-
128
- .text-input {
129
- border-radius: 25px !important;
130
- border: 2px solid var(--quasar-primary) !important;
131
- background: rgba(255, 255, 255, 0.9) !important;
132
- font-size: 1rem !important;
133
- padding: 0.8rem 1.5rem !important;
134
- }
135
-
136
- .text-input:focus {
137
- border-color: var(--quasar-secondary) !important;
138
- box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
139
- }
140
-
141
- .send-button {
142
- background: linear-gradient(135deg, var(--quasar-primary), var(--quasar-secondary)) !important;
143
- border: none !important;
144
  border-radius: 25px !important;
145
- color: white !important;
146
- font-weight: 600 !important;
147
- padding: 0.8rem 1.5rem !important;
148
- transition: all 0.3s ease !important;
149
  }
150
 
151
- .send-button:hover {
152
- transform: translateY(-2px) !important;
153
- box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3) !important;
154
  }
155
 
156
  h1 {
157
  text-align: center !important;
158
- background: linear-gradient(135deg, var(--quasar-primary), var(--quasar-secondary)) !important;
159
- -webkit-background-clip: text !important;
160
- -webkit-text-fill-color: transparent !important;
161
- font-weight: 800 !important;
162
- font-size: 3rem !important;
163
- margin-bottom: 0.5rem !important;
164
- text-shadow: 2px 2px 4px rgba(0,0,0,0.1) !important;
165
- }
166
-
167
- .subtitle {
168
- text-align: center !important;
169
- color: #555 !important;
170
- font-size: 1.2rem !important;
171
  margin-bottom: 2rem !important;
172
- font-weight: 400 !important;
173
- }
174
-
175
- .status-box {
176
- background: linear-gradient(135deg, #e8f4f8, #f0f8ff) !important;
177
- border: 2px solid #1976d2 !important;
178
- border-radius: 15px !important;
179
- padding: 1rem !important;
180
- color: #1976d2 !important;
181
- font-weight: 500 !important;
182
- text-align: center !important;
183
- font-size: 0.95rem !important;
184
  }
185
 
186
  .examples {
187
- margin-top: 2rem !important;
188
  }
189
 
190
  .example {
191
- border-radius: 25px !important;
192
- background: linear-gradient(135deg, var(--quasar-primary) 0%, var(--quasar-secondary) 100%) !important;
193
  color: white !important;
194
  border: none !important;
195
  transition: all 0.3s ease !important;
196
- font-weight: 500 !important;
197
- padding: 0.8rem 1.5rem !important;
198
- font-size: 0.95rem !important;
199
  }
200
 
201
  .example:hover {
202
- transform: translateY(-3px) !important;
203
- box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3) !important;
204
- }
205
-
206
- .feature-badge {
207
- display: inline-block !important;
208
- background: var(--quasar-accent) !important;
209
- color: white !important;
210
- padding: 0.3rem 0.8rem !important;
211
- border-radius: 20px !important;
212
- font-size: 0.8rem !important;
213
- font-weight: 600 !important;
214
- margin: 0 0.3rem !important;
215
  }
216
  """
217
 
218
- # Create the Quasar LLM interface
219
- with gr.Blocks(
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
220
  theme=gr.themes.Soft(
221
  primary_hue="blue",
222
- secondary_hue="slate",
223
  neutral_hue="slate",
224
  font=gr.themes.GoogleFont("Inter")
225
  ),
 
 
226
  css=custom_css,
227
- title="Quasar LLM Audio Chat"
228
- ) as app:
229
-
230
- # Header
231
- gr.HTML("""
232
- <div style="text-align: center; margin-bottom: 2rem;">
233
- <h1>✨ Quasar LLM</h1>
234
- <p class="subtitle">
235
- 🎤 <span class="feature-badge">VOICE</span>
236
- 💬 <span class="feature-badge">TEXT</span>
237
- 🌐 <span class="feature-badge">WEB SEARCH</span><br>
238
- Real-time AI-powered conversations with web intelligence
239
- </p>
240
- </div>
241
- """)
242
-
243
- # Main chat interface
244
- chatbot = gr.Chatbot(
245
- value=[],
246
- height=450,
247
- show_label=False,
248
- container=True,
249
- bubble_full_width=False,
250
- render_markdown=True,
251
- type="messages",
252
- elem_classes=["chatbot"]
253
- )
254
-
255
- # Audio Input Section
256
- with gr.Group(elem_classes=["audio-section"]):
257
- gr.HTML("<h3 style='text-align: center; color: #ff6b6b; margin-bottom: 1rem;'>🎤 Voice Input</h3>")
258
-
259
- with gr.Row():
260
- with gr.Column(scale=4):
261
- audio_input = gr.Audio(
262
- sources=["microphone"],
263
- type="filepath",
264
- label="Record your question",
265
- show_label=False,
266
- container=False,
267
- elem_classes=["audio-input"]
268
- )
269
-
270
- with gr.Column(scale=1, min_width=150):
271
- audio_submit = gr.Button(
272
- "🎤 Ask Voice",
273
- variant="primary",
274
- size="lg",
275
- elem_classes=["voice-button"]
276
- )
277
-
278
- # Text Input Section
279
- with gr.Group(elem_classes=["text-section"]):
280
- gr.HTML("<h3 style='text-align: center; color: #667eea; margin-bottom: 1rem;'>💬 Text Input</h3>")
281
-
282
- with gr.Row():
283
- with gr.Column(scale=5):
284
- text_input = gr.Textbox(
285
- placeholder="Type your question here or use voice input above...",
286
- container=False,
287
- show_label=False,
288
- lines=1,
289
- max_lines=3,
290
- elem_classes=["text-input"]
291
- )
292
-
293
- with gr.Column(scale=1, min_width=100):
294
- text_submit = gr.Button(
295
- "Send",
296
- variant="secondary",
297
- elem_classes=["send-button"]
298
- )
299
-
300
- # Status Display
301
- status = gr.Textbox(
302
- value="🚀 Ready for your questions - Use voice or text input!",
303
- label="Status",
304
- interactive=False,
305
- elem_classes=["status-box"],
306
- show_label=False
307
- )
308
-
309
- # Example Questions
310
- gr.Examples(
311
- examples=quasar_examples,
312
- inputs=[text_input],
313
- label="✨ Try these example questions:",
314
- elem_classes=["examples"]
315
- )
316
-
317
- # Audio processing function
318
- def handle_audio_input(audio_file, history):
319
- if audio_file is None:
320
- return history, "Please record audio first 🎤"
321
-
322
- # For now, we'll add a placeholder message since we don't have speech-to-text
323
- # In a real deployment, you'd integrate with a speech-to-text service
324
- user_message = "🎤 [Voice message received - Speech-to-text would process this]"
325
- history.append({"role": "user", "content": user_message})
326
-
327
- # Add a helpful response
328
- response = "I received your voice message! However, speech-to-text processing requires additional services. Please use the text input below for now, or integrate with a cloud speech service like Google Speech-to-Text or OpenAI Whisper."
329
- history.append({"role": "assistant", "content": response})
330
-
331
- return history, "Voice message received (text processing recommended)"
332
-
333
- # Text processing function
334
- def handle_text_input(text, history):
335
- if not text.strip():
336
- return history, "", "Please enter a message 📝"
337
-
338
- # Add user message
339
- history.append({"role": "user", "content": text})
340
-
341
- try:
342
- # Get response from webSearch
343
- response = webSearch(text)
344
- history.append({"role": "assistant", "content": response})
345
-
346
- return history, "", f"✅ Question answered: {text[:40]}..."
347
-
348
- except Exception as e:
349
- error_msg = f"🔍 Search temporarily unavailable: {str(e)}"
350
- history.append({"role": "assistant", "content": error_msg})
351
- return history, "", f"❌ Error occurred"
352
-
353
- # Event handlers
354
- audio_submit.click(
355
- handle_audio_input,
356
- inputs=[audio_input, chatbot],
357
- outputs=[chatbot, status]
358
- )
359
-
360
- text_submit.click(
361
- handle_text_input,
362
- inputs=[text_input, chatbot],
363
- outputs=[chatbot, text_input, status]
364
- )
365
-
366
- text_input.submit(
367
- handle_text_input,
368
- inputs=[text_input, chatbot],
369
- outputs=[chatbot, text_input, status]
370
- )
371
 
372
- # Launch configuration
373
  if __name__ == "__main__":
374
  app.launch(
375
  mcp_server=True,
@@ -377,6 +102,6 @@ if __name__ == "__main__":
377
  inbrowser=True,
378
  show_error=True,
379
  quiet=False,
380
- server_name="0.0.0.0",
381
- server_port=7860
382
  )
 
1
  import gradio as gr
2
  from geminisearch import webSearch
 
 
3
 
4
+ # Concise example questions for MCP interface
5
+ mcp_examples = [
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6
  "What are the latest AI technology developments?",
7
+ "What's happening in global news today?",
8
  "What's the current cryptocurrency market status?"
9
  ]
10
 
11
+ # Custom CSS for better styling
12
  custom_css = """
 
 
 
 
 
 
 
13
  .gradio-container {
14
+ max-width: 1200px !important;
15
  margin: auto !important;
 
 
 
 
 
 
 
 
 
 
 
16
  }
17
 
18
  .chatbot {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  border-radius: 15px !important;
20
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
21
  }
22
 
23
+ .input-container {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  border-radius: 25px !important;
25
+ border: 2px solid #e1e5e9 !important;
 
 
 
26
  }
27
 
28
+ .input-container:focus-within {
29
+ border-color: #4285f4 !important;
30
+ box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1) !important;
31
  }
32
 
33
  h1 {
34
  text-align: center !important;
35
+ color: #1a73e8 !important;
36
+ font-weight: 600 !important;
 
 
 
 
 
 
 
 
 
 
 
37
  margin-bottom: 2rem !important;
 
 
 
 
 
 
 
 
 
 
 
 
38
  }
39
 
40
  .examples {
41
+ margin-top: 1rem !important;
42
  }
43
 
44
  .example {
45
+ border-radius: 20px !important;
46
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
47
  color: white !important;
48
  border: none !important;
49
  transition: all 0.3s ease !important;
 
 
 
50
  }
51
 
52
  .example:hover {
53
+ transform: translateY(-2px) !important;
54
+ box-shadow: 0 8px 25px rgba(0,0,0,0.2) !important;
 
 
 
 
 
 
 
 
 
 
 
55
  }
56
  """
57
 
58
+ # Create the enhanced interface
59
+ app = gr.ChatInterface(
60
+ webSearch,
61
+ chatbot=gr.Chatbot(
62
+ height=500,
63
+ show_label=False,
64
+ container=True,
65
+ bubble_full_width=False,
66
+ render_markdown=True
67
+ ),
68
+ type="messages",
69
+ textbox=gr.Textbox(
70
+ placeholder="🔍 Ask me anything about current events, news, or real-time information...",
71
+ container=False,
72
+ scale=7,
73
+ show_label=False,
74
+ lines=1,
75
+ max_lines=3
76
+ ),
77
+ title="✨ Quasar LLM Web Chat",
78
+ description="Quasar LLM powered interface for real-time web search and intelligent responses.",
79
  theme=gr.themes.Soft(
80
  primary_hue="blue",
81
+ secondary_hue="slate",
82
  neutral_hue="slate",
83
  font=gr.themes.GoogleFont("Inter")
84
  ),
85
+ examples=mcp_examples,
86
+ cache_examples=False,
87
  css=custom_css,
88
+ analytics_enabled=False,
89
+ show_progress="minimal"
90
+ )
91
+
92
+ # Additional configuration
93
+ app.queue(
94
+ default_concurrency_limit=20,
95
+ max_size=50
96
+ )
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
97
 
 
98
  if __name__ == "__main__":
99
  app.launch(
100
  mcp_server=True,
 
102
  inbrowser=True,
103
  show_error=True,
104
  quiet=False,
105
+ favicon_path=None,
106
+ ssl_verify=False
107
  )