Spaces:
Running
Running
Update app.py
Browse files
app.py
CHANGED
@@ -331,120 +331,15 @@ def respond(
|
|
331 |
else:
|
332 |
yield response
|
333 |
|
334 |
-
# Custom CSS for a sleeker, more modern chat interface
|
335 |
custom_css = """
|
336 |
-
|
337 |
-
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
|
338 |
|
339 |
-
/*
|
340 |
-
|
341 |
-
0% { background-position: 0% 50%; }
|
342 |
-
50% { background-position: 100% 50%; }
|
343 |
-
100% { background-position: 0% 50%; }
|
344 |
-
}
|
345 |
-
|
346 |
-
.gradio-container {
|
347 |
font-family: 'Inter', sans-serif;
|
348 |
-
background: linear-gradient(120deg, #6a11cb, #2575fc);
|
349 |
-
background-size: 200% 200%;
|
350 |
-
animation: gradient-animation 12s ease infinite;
|
351 |
-
color: #333;
|
352 |
-
padding: 16px;
|
353 |
-
border-radius: 10px;
|
354 |
-
max-width: 90%;
|
355 |
-
margin: 0 auto;
|
356 |
-
overflow: hidden;
|
357 |
-
}
|
358 |
-
|
359 |
-
/* Adaptive Padding for All Screens */
|
360 |
-
@media (max-width: 768px) {
|
361 |
-
.gradio-container {
|
362 |
-
padding: 10px;
|
363 |
-
max-width: 95%;
|
364 |
-
}
|
365 |
-
}
|
366 |
-
|
367 |
-
/* Chat Bubble Styling */
|
368 |
-
.user, .assistant {
|
369 |
-
padding: 12px 16px;
|
370 |
-
border-radius: 8px;
|
371 |
-
margin: 8px 0;
|
372 |
-
max-width: 75%;
|
373 |
-
line-height: 1.5;
|
374 |
-
font-size: 15px;
|
375 |
-
}
|
376 |
-
|
377 |
-
/* User Bubble - Sleek Dark Blue */
|
378 |
-
.user {
|
379 |
-
background-color: #1e40af;
|
380 |
-
color: #ffffff;
|
381 |
-
margin-left: auto;
|
382 |
-
position: relative;
|
383 |
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
384 |
}
|
385 |
|
386 |
-
/*
|
387 |
-
.assistant {
|
388 |
-
background-color: #f3f4f6;
|
389 |
-
color: #333;
|
390 |
-
margin-right: auto;
|
391 |
-
position: relative;
|
392 |
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
393 |
-
}
|
394 |
-
|
395 |
-
/* Message Input Area */
|
396 |
-
textarea {
|
397 |
-
border-radius: 6px;
|
398 |
-
padding: 10px;
|
399 |
-
border: 1px solid #ddd;
|
400 |
-
font-size: 14px;
|
401 |
-
resize: none;
|
402 |
-
outline: none;
|
403 |
-
width: 100%;
|
404 |
-
}
|
405 |
-
textarea:focus {
|
406 |
-
border-color: #4a6fb3;
|
407 |
-
}
|
408 |
-
|
409 |
-
/* Sliders and Labels */
|
410 |
-
input[type="range"], .gradio-container label {
|
411 |
-
display: block;
|
412 |
-
width: 100%;
|
413 |
-
font-size: 14px;
|
414 |
-
color: #555;
|
415 |
-
}
|
416 |
-
|
417 |
-
/* Sliders Styling */
|
418 |
-
input[type="range"] {
|
419 |
-
-webkit-appearance: none;
|
420 |
-
width: 100%;
|
421 |
-
height: 6px;
|
422 |
-
background-color: #ddd;
|
423 |
-
outline: none;
|
424 |
-
border-radius: 5px;
|
425 |
-
transition: background 0.3s ease-in-out;
|
426 |
-
}
|
427 |
-
|
428 |
-
input[type="range"]:hover {
|
429 |
-
background-color: #bbb;
|
430 |
-
}
|
431 |
-
|
432 |
-
/* Send Button Styling */
|
433 |
-
button {
|
434 |
-
font-size: 15px;
|
435 |
-
color: white;
|
436 |
-
background-color: #4f46e5;
|
437 |
-
border: none;
|
438 |
-
padding: 10px 16px;
|
439 |
-
border-radius: 6px;
|
440 |
-
cursor: pointer;
|
441 |
-
transition: background 0.3s ease;
|
442 |
-
width: 100%;
|
443 |
-
}
|
444 |
-
|
445 |
-
button:hover {
|
446 |
-
background-color: #4338ca;
|
447 |
-
}
|
448 |
"""
|
449 |
|
450 |
# Gradio chat interface with the updated CSS
|
|
|
331 |
else:
|
332 |
yield response
|
333 |
|
|
|
334 |
custom_css = """
|
335 |
+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
|
|
|
336 |
|
337 |
+
/* Apply Inter font to the entire interface */
|
338 |
+
body, .gradio-container {
|
|
|
|
|
|
|
|
|
|
|
|
|
339 |
font-family: 'Inter', sans-serif;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
340 |
}
|
341 |
|
342 |
+
/* Additional styling (add any other required custom CSS here) */
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
343 |
"""
|
344 |
|
345 |
# Gradio chat interface with the updated CSS
|