Upload app.py
Browse files
app.py
CHANGED
@@ -612,21 +612,50 @@ h3 {
|
|
612 |
background: white;
|
613 |
}
|
614 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
615 |
/* JavaScript ile placeholder eklemek için */
|
616 |
</style>
|
617 |
<script>
|
618 |
document.addEventListener('DOMContentLoaded', function() {
|
619 |
-
//
|
620 |
setTimeout(function() {
|
621 |
-
const
|
622 |
-
|
623 |
-
|
|
|
|
|
|
|
624 |
|
625 |
-
//
|
626 |
-
|
627 |
-
|
628 |
-
|
629 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
630 |
});
|
631 |
</script>
|
632 |
<style>
|
@@ -642,21 +671,13 @@ with gr.Blocks(css=custom_css, theme="soft", title="Trek Asistanı") as demo:
|
|
642 |
gr.Markdown("# 🚲 Trek Asistanı AI")
|
643 |
gr.Markdown("**Akıllı özellikler:** Ürün karşılaştırması, kişisel öneriler ve detaylı ürün bilgileri sunuyorum.")
|
644 |
|
645 |
-
|
646 |
-
with gr.Column(scale=4):
|
647 |
-
chatbot = gr.Chatbot(height=500, elem_id="chatbot", show_label=False)
|
648 |
-
|
649 |
-
with gr.Column(scale=1):
|
650 |
-
gr.Markdown("### ℹ️ Bilgi")
|
651 |
-
gr.Markdown("Trek bisiklet uzmanı AI asistanınız. Ürün bilgileri, fiyatlar ve öneriler için sorularınızı yazın.")
|
652 |
|
653 |
-
|
654 |
-
|
655 |
-
|
656 |
-
|
657 |
-
|
658 |
-
)
|
659 |
-
submit_btn = gr.Button("Gönder", scale=1)
|
660 |
|
661 |
def respond(message, chat_history):
|
662 |
if not message.strip():
|
@@ -692,7 +713,6 @@ with gr.Blocks(css=custom_css, theme="soft", title="Trek Asistanı") as demo:
|
|
692 |
chat_history.append((message, error_msg))
|
693 |
return "", chat_history
|
694 |
|
695 |
-
submit_btn.click(respond, [msg, chatbot], [msg, chatbot])
|
696 |
msg.submit(respond, [msg, chatbot], [msg, chatbot])
|
697 |
|
698 |
if __name__ == "__main__":
|
|
|
612 |
background: white;
|
613 |
}
|
614 |
|
615 |
+
/* Input alanına uçan kağıt ikonu ekle */
|
616 |
+
#msg-input {
|
617 |
+
position: relative;
|
618 |
+
}
|
619 |
+
|
620 |
+
#msg-input textarea {
|
621 |
+
padding-right: 40px !important;
|
622 |
+
}
|
623 |
+
|
624 |
+
.input-icon {
|
625 |
+
position: absolute;
|
626 |
+
right: 12px;
|
627 |
+
top: 50%;
|
628 |
+
transform: translateY(-50%);
|
629 |
+
font-size: 16px;
|
630 |
+
pointer-events: none;
|
631 |
+
z-index: 10;
|
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');
|
642 |
+
if (msgInput) {
|
643 |
+
// Icon elementi oluştur
|
644 |
+
const icon = document.createElement('div');
|
645 |
+
icon.innerHTML = '✈️';
|
646 |
+
icon.className = 'input-icon';
|
647 |
|
648 |
+
// Input container'ına ekle
|
649 |
+
msgInput.style.position = 'relative';
|
650 |
+
msgInput.appendChild(icon);
|
651 |
+
|
652 |
+
// Textarea'ya padding ekle
|
653 |
+
const textarea = msgInput.querySelector('textarea');
|
654 |
+
if (textarea) {
|
655 |
+
textarea.style.paddingRight = '40px';
|
656 |
+
}
|
657 |
+
}
|
658 |
+
}, 1000);
|
659 |
});
|
660 |
</script>
|
661 |
<style>
|
|
|
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=500, elem_id="chatbot", show_label=False)
|
|
|
|
|
|
|
|
|
|
|
|
|
675 |
|
676 |
+
msg = gr.Textbox(
|
677 |
+
placeholder="Trek bisikletleri hakkında soru sorun...",
|
678 |
+
show_label=False,
|
679 |
+
elem_id="msg-input"
|
680 |
+
)
|
|
|
|
|
681 |
|
682 |
def respond(message, chat_history):
|
683 |
if not message.strip():
|
|
|
713 |
chat_history.append((message, error_msg))
|
714 |
return "", chat_history
|
715 |
|
|
|
716 |
msg.submit(respond, [msg, chatbot], [msg, chatbot])
|
717 |
|
718 |
if __name__ == "__main__":
|