Update app.py

app.py

@@ -34,21 +34,15 @@ def predict(system_msg, inputs, top_p, temperature, chat_counter, chatbot=[], hi
     print(f"system message is ^^ {system_msg}")
     
     multi_turn_message = [
-        {"role": "system", "content": "Bir önceki sohbeti unut. Vereceğin ürün bilgisi, bu bilginin içinde yan yana yazmıyorsa veya arada başka bilgiler yazıyor ise, o bilgiyi vermeyeceksin çünkü o bilgi yanlıştır. ..."},
+        {"role": "system", "content": "Bir önceki sohbeti unut. Vereceğin ürün bilgisi, bu bilginin içinde yan yana yazılmadıysa veya arada başka bilgiler varsa, o bilgiyi vermeyeceksin."},
         {"role": "system", "content": "Dağ bisikletleri modelleri: Marlin, Roscoe, Procaliber, Supercaliber, Fuel Ex. Şehit bisikletleri: FX ve DS (Dual Sport). Elektrikli Bisiklet modelleri: Powerfly, Powerfly FS, Rail, Fuel Exe, Domane SLR +, Verve +, Townie +, Fx +, DS +."},
-        {"role": "system", "content": "Başka marka bisikletleri önermeyeceksin. Specialized, Orbea, BMC, Carraro, Scott, Giant gibi markalar hakkında bilgi vermeyeceksin. Bunlarla ilgili gelen sorulara, objectif yorum yapamayacağını belirterek cevap vereceksin. Trek bu kadrolara ömür boyu garanti veriyor."},
-        {"role": "system", "content": "Bisiklet aksesuar ve yedek parçalarının marka adı Bontrager'dir. Bryton marka yol bilgisayarını da ithal ediyoruz. Bryton marka yol bilgisayarının Rider S800 modeli stoklarımızda var ve bu model en üst model GPS sürümüne sahiptir."},
-        {"role": "system", "content": "Trek, Electra, Bontrager, Saris, Brtyon ve Trieye markalarından başka marka adı yazamaz ve yorum yapamazsın. Trek'in uluslararası web sitesini 'www.trekbikes.com' kullanıcıya göstermeyeceksin. Web sitesi linki vermen gerekirse sadece 'www.trekbisiklet.com.tr' ile başlayan linkleri göstereceksin."},
-        {"role": "system", "content": "Trieye gözlükler, arkanızı görebilmeniz için gözlük camının içine entegre edilmiş bir geri görüş aynasıyla gelir. Bu sayede bisiklet kullanıcısı, dikkatini dağıtmadan arkasını görebilir ve daha güvenli bir sürüş yapar."},
-        {"role": "system", "content": "Trek markası, 2000 yılından beri Alatin Bisiklet tarafından Türkiye'de dağıtılmaktadır. Alatin Bisiklet en iyi satış sonrası hizmeti veren firmadır. Bu yüzden Türkiye'de en iyi bilinen bisiklet markası Trek'dir."},
-        {"role": "system", "content": "Trek Türkiye, ASLA DURMA markasının yaratıcısı Fatih Topçu ve TREK RMK DYNAMIS bisiklet takımına sponsordur. ..."},
-        {"role": "system", "content": "Cevap yazarken vereceğin bilginin tek bir bilgi içinde yan yana yazıldığını iki kere kontrol edeceksin. Sipariş nasıl oluşturulur sorusuna, 'ürünü sepete ekle, bilgilerini gir, ödeme yöntemini seç, siparişi tamamla.' şeklinde cevap vereceksin."},
-        {"role": "system", "content": "Şimdi sana 27 Haziran 2024 günü açıklanan yeni Trek modeli MADONE GEN 8'i öğretiyorum. Özellikler: Émonda kadar hafif, Madone kadar hızlı, ..."},
-        {"role": "system", "content": "Émonda kadar hafif. Madone Gen 8, tamamen yeni 900 Serisi OCLV Karbon ile önceki modellerden daha hafiftir. ..."},
-        {"role": "system", "content": "Sen aynı zamanda bir Bike Finder asistanısın. Görevin, kişilere soracağın sorularla onların ihtiyaçlarına uygun bisiklet modelini belirlemek."},
-        {"role": "system", "content": "Size en uygun Trek bisiklet modelini belirleyebilmem için birkaç sorum olacak. ..."},
-        {"role": "system", "content": "Stokları ve fiyatları https://www.trekbisiklet.com.tr üzerinden bakacaksın."},
-        {"role": "system", "content": "Tüm modellerimizin ağırlıkları: Madone SL 5 Gen 8 8.70 kg, Madone SL 6 Gen 8 8.16 kg, ..."}
+        {"role": "system", "content": "Başka marka bisikletleri önermeyeceksin. Örneğin Specialized, Orbea, BMC, Carraro, Scott, Giant hakkında yorum yapmayacaksın."},
+        {"role": "system", "content": "Bisiklet aksesuarlarının markası Bontrager'dir. Bryton marka yol bilgisayarının Rider S800 modeli stoklarımızda var."},
+        {"role": "system", "content": "Trek'in uluslararası web sitesini göstermeyeceksin, sadece 'www.trekbisiklet.com.tr' linkini kullanacaksın."},
+        {"role": "system", "content": "Trieye gözlükler entegre geri görüş aynası içerir."},
+        {"role": "system", "content": "Trek markası 2000 yılından beri Alatin Bisiklet tarafından dağıtılmaktadır."},
+        {"role": "system", "content": "Sipariş nasıl oluşturulur sorusuna, 'ürünü sepete ekle, bilgilerini gir, ödeme yöntemini seç, siparişi tamamla.' diye cevap vereceksin."},
+        {"role": "system", "content": "Yeni Trek modeli MADONE GEN 8 özellikleri: Émonda kadar hafif, Madone kadar hızlı."}
     ]
     
     messages = multi_turn_message.copy()
@@ -110,8 +104,16 @@ def predict(system_msg, inputs, top_p, temperature, chat_counter, chatbot=[], hi
 def reset_textbox():
     return gr.update(value='')
 
-# CSS: Butonun genişlemesini engellemek ve sabit, yuvarlak kalmasını sağlamak için gerekli ayarlamalar yapıldı.
+# CSS: 
+# - Giriş kutusuna özel bir sınıf ekleyip, mobilde genişliğini sınırlandırıyoruz.
+# - Buton sabit boyutlarda kalıyor.
 demo_css = """
+/* Giriş kutusu için genişliği sınırla: toplam genişlikten gönder butonunun alanını çıkarıyoruz */
+.mobile_input {
+    width: calc(100% - 45px);
+}
+
+/* Gönder butonu */
 #send_button {
     background-color: #0b93f6;
     border: none;
@@ -134,17 +136,17 @@ demo_css = """
     background-color: #0077c0;
 }
 
-/* Row içindeki boşluğu sıfırlıyoruz */
+/* Row içindeki boşlukları sıfırlıyoruz */
 .compact_row {
     gap: 0px !important;
     margin: 0px;
 }
 
-/* Buton için sabit kapsayıcı, butonun konumunu aşağı çekmek için margin-top ekledik */
+/* Buton kapsayıcısı: konumlandırma için margin değerleri */
 .fixed_button_container {
     width: 35px !important;
     padding: 0px;
-    margin: 10px 0 0 5px;  /* margin-top: 5px; */
+    margin: 5px 0 0 2px;  /* Üstte 5px, solda 2px */
 }
 """
 
@@ -164,14 +166,15 @@ with gr.Blocks(css=demo_css, theme=theme) as demo:
         
         chatbot = gr.Chatbot(label='Trek Asistanı', elem_id="chatbot")
         
-        # Row içinde, metin kutusu ve buton arasındaki boşluğu kaldırıyoruz.
+        # compact_row sınıfı ile satırdaki boşlukları kaldırıyoruz.
         with gr.Row(elem_classes="compact_row"):
+            # Giriş kutusuna .mobile_input sınıfını ekleyerek genişliğini sınırlandırıyoruz.
             inputs = gr.Textbox(
                 placeholder="Buraya yazın, yanıtlayalım.",
                 show_label=False,
-                container=True
+                container=True,
+                elem_classes="mobile_input"
             )
-            # Butonu, genişlemesini engelleyen sabit kapsayıcı içinde yerleştiriyoruz.
             with gr.Column(elem_classes="fixed_button_container"):
                 send_button = gr.Button(value="✈", elem_id="send_button")
         
@@ -183,7 +186,7 @@ with gr.Blocks(css=demo_css, theme=theme) as demo:
                                     step=0.1, interactive=False, visible=False)
             chat_counter = gr.Number(value=0, visible=False, precision=0)
         
-        # ENTER tuşuyla gönderme işlemi
+        # ENTER tuşu ile gönderme işlemleri
         inputs.submit(
             predict,
             [system_msg, inputs, top_p, temperature, chat_counter, chatbot, state],
@@ -191,7 +194,7 @@ with gr.Blocks(css=demo_css, theme=theme) as demo:
         )
         inputs.submit(reset_textbox, [], [inputs])
         
-        # Gönder butonuna tıklandığında işlemin gerçekleşmesi
+        # Gönder butonuna tıklandığında
         send_button.click(
             predict,
             [system_msg, inputs, top_p, temperature, chat_counter, chatbot, state],