Upload app.py
Browse files
app.py
CHANGED
@@ -527,6 +527,23 @@ button, input, select, textarea {
|
|
527 |
font-size: 0.6rem !important;
|
528 |
}
|
529 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
530 |
/* Input alanı için de aynı boyut */
|
531 |
.message-textbox textarea {
|
532 |
font-size: 0.6rem !important;
|
@@ -612,6 +629,44 @@ h3 {
|
|
612 |
background: white;
|
613 |
}
|
614 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
615 |
/* Input alanına uçan kağıt ikonu ekle */
|
616 |
#msg-input {
|
617 |
position: relative;
|
@@ -632,10 +687,81 @@ h3 {
|
|
632 |
color: #666;
|
633 |
}
|
634 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
635 |
/* JavaScript ile placeholder eklemek için */
|
636 |
</style>
|
637 |
<script>
|
638 |
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
639 |
// Input alanına uçan kağıt ikonu ekle
|
640 |
setTimeout(function() {
|
641 |
const msgInput = document.querySelector('#msg-input');
|
@@ -666,12 +792,12 @@ document.addEventListener('DOMContentLoaded', function() {
|
|
666 |
def enhanced_chatbot_fn(message, history, image):
|
667 |
return chatbot_fn(message, history, image)
|
668 |
|
669 |
-
# Demo arayüzü -
|
670 |
with gr.Blocks(css=custom_css, theme="soft", title="Trek Asistanı") as demo:
|
671 |
gr.Markdown("# 🚲 Trek Asistanı AI")
|
672 |
gr.Markdown("**Akıllı özellikler:** Ürün karşılaştırması, kişisel öneriler ve detaylı ürün bilgileri sunuyorum.")
|
673 |
|
674 |
-
chatbot = gr.Chatbot(height=
|
675 |
|
676 |
msg = gr.Textbox(
|
677 |
placeholder="Trek bisikletleri hakkında soru sorun...",
|
|
|
527 |
font-size: 0.6rem !important;
|
528 |
}
|
529 |
|
530 |
+
/* Mobil responsive başlangıç */
|
531 |
+
@media (max-width: 768px) {
|
532 |
+
.gradio-container, .gradio-container *, .message-wrap, .message-wrap p, .message-wrap div {
|
533 |
+
font-size: 0.8rem !important;
|
534 |
+
}
|
535 |
+
|
536 |
+
h1 {
|
537 |
+
font-size: 1.8rem !important;
|
538 |
+
text-align: center;
|
539 |
+
margin: 10px 0;
|
540 |
+
}
|
541 |
+
|
542 |
+
h2 {
|
543 |
+
font-size: 1.4rem !important;
|
544 |
+
}
|
545 |
+
}
|
546 |
+
|
547 |
/* Input alanı için de aynı boyut */
|
548 |
.message-textbox textarea {
|
549 |
font-size: 0.6rem !important;
|
|
|
629 |
background: white;
|
630 |
}
|
631 |
|
632 |
+
/* Mobil responsive - Chatbot */
|
633 |
+
@media (max-width: 768px) {
|
634 |
+
#chatbot {
|
635 |
+
height: 60vh !important;
|
636 |
+
margin: 10px 0;
|
637 |
+
}
|
638 |
+
|
639 |
+
.gradio-container {
|
640 |
+
padding: 8px !important;
|
641 |
+
margin: 0 !important;
|
642 |
+
}
|
643 |
+
|
644 |
+
/* Mesaj baloncukları mobilde daha küçük */
|
645 |
+
.message-wrap {
|
646 |
+
max-width: 95% !important;
|
647 |
+
margin: 0.3rem 0 !important;
|
648 |
+
padding: 8px 12px !important;
|
649 |
+
border-radius: 18px !important;
|
650 |
+
font-size: 0.9rem !important;
|
651 |
+
}
|
652 |
+
|
653 |
+
/* Kullanıcı mesajları */
|
654 |
+
.user-message, .user-message-highlighted {
|
655 |
+
background-color: #007AFF !important;
|
656 |
+
color: white !important;
|
657 |
+
margin-left: auto !important;
|
658 |
+
margin-right: 8px !important;
|
659 |
+
}
|
660 |
+
|
661 |
+
/* Bot mesajları */
|
662 |
+
.bot-message, .bot-message-highlighted {
|
663 |
+
background-color: #f1f1f1 !important;
|
664 |
+
color: #333 !important;
|
665 |
+
margin-left: 8px !important;
|
666 |
+
margin-right: auto !important;
|
667 |
+
}
|
668 |
+
}
|
669 |
+
|
670 |
/* Input alanına uçan kağıt ikonu ekle */
|
671 |
#msg-input {
|
672 |
position: relative;
|
|
|
687 |
color: #666;
|
688 |
}
|
689 |
|
690 |
+
/* Mobil responsive - Input alanı */
|
691 |
+
@media (max-width: 768px) {
|
692 |
+
#msg-input {
|
693 |
+
margin: 10px 0;
|
694 |
+
}
|
695 |
+
|
696 |
+
#msg-input textarea {
|
697 |
+
padding: 12px 45px 12px 15px !important;
|
698 |
+
font-size: 1rem !important;
|
699 |
+
border-radius: 20px !important;
|
700 |
+
border: 2px solid #e0e0e0 !important;
|
701 |
+
min-height: 50px !important;
|
702 |
+
}
|
703 |
+
|
704 |
+
#msg-input textarea:focus {
|
705 |
+
border-color: #007AFF !important;
|
706 |
+
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1) !important;
|
707 |
+
}
|
708 |
+
|
709 |
+
.input-icon {
|
710 |
+
right: 15px;
|
711 |
+
font-size: 18px;
|
712 |
+
}
|
713 |
+
|
714 |
+
/* Ürün galeri mobil responsive */
|
715 |
+
.product-gallery {
|
716 |
+
gap: 8px !important;
|
717 |
+
margin: 8px 0 !important;
|
718 |
+
}
|
719 |
+
|
720 |
+
.product-card {
|
721 |
+
max-width: 140px !important;
|
722 |
+
padding: 6px !important;
|
723 |
+
font-size: 0.8rem !important;
|
724 |
+
}
|
725 |
+
|
726 |
+
.product-card img {
|
727 |
+
max-width: 120px !important;
|
728 |
+
max-height: 80px !important;
|
729 |
+
}
|
730 |
+
|
731 |
+
/* Resimler mobilde daha küçük */
|
732 |
+
#chatbot .message img {
|
733 |
+
max-width: 250px !important;
|
734 |
+
max-height: 150px !important;
|
735 |
+
border-radius: 12px !important;
|
736 |
+
margin: 6px 0 !important;
|
737 |
+
}
|
738 |
+
|
739 |
+
/* Tablo responsive */
|
740 |
+
table {
|
741 |
+
font-size: 0.8rem !important;
|
742 |
+
overflow-x: auto !important;
|
743 |
+
display: block !important;
|
744 |
+
white-space: nowrap !important;
|
745 |
+
}
|
746 |
+
|
747 |
+
table th, table td {
|
748 |
+
padding: 4px 6px !important;
|
749 |
+
min-width: 60px !important;
|
750 |
+
}
|
751 |
+
}
|
752 |
+
|
753 |
/* JavaScript ile placeholder eklemek için */
|
754 |
</style>
|
755 |
<script>
|
756 |
document.addEventListener('DOMContentLoaded', function() {
|
757 |
+
// Viewport meta tag ekle (mobil için)
|
758 |
+
if (!document.querySelector('meta[name="viewport"]')) {
|
759 |
+
const viewport = document.createElement('meta');
|
760 |
+
viewport.name = 'viewport';
|
761 |
+
viewport.content = 'width=device-width, initial-scale=1.0, user-scalable=no';
|
762 |
+
document.head.appendChild(viewport);
|
763 |
+
}
|
764 |
+
|
765 |
// Input alanına uçan kağıt ikonu ekle
|
766 |
setTimeout(function() {
|
767 |
const msgInput = document.querySelector('#msg-input');
|
|
|
792 |
def enhanced_chatbot_fn(message, history, image):
|
793 |
return chatbot_fn(message, history, image)
|
794 |
|
795 |
+
# Demo arayüzü - Mobil responsive
|
796 |
with gr.Blocks(css=custom_css, theme="soft", title="Trek Asistanı") as demo:
|
797 |
gr.Markdown("# 🚲 Trek Asistanı AI")
|
798 |
gr.Markdown("**Akıllı özellikler:** Ürün karşılaştırması, kişisel öneriler ve detaylı ürün bilgileri sunuyorum.")
|
799 |
|
800 |
+
chatbot = gr.Chatbot(height=600, elem_id="chatbot", show_label=False)
|
801 |
|
802 |
msg = gr.Textbox(
|
803 |
placeholder="Trek bisikletleri hakkında soru sorun...",
|