Update app.py

app.py

@@ -114,103 +114,76 @@ def reset_textbox():
 
 # CSS: Butonun sabit, yuvarlak kalması ve sağa doğru hafifçe 2px uzaklaşması için ayarlandı.
 # Ek olarak, mobilde giriş alanının genişliğini kısıtlamak için "#input_text" id'sine genişlik ayarı ekledik.
+
+# CSS: Chatbot yüksekliğini ayarlama ve mevcut CSS'i koruma
 demo_css = """
 #send_button {
-    background-color: #0b93f6;
-    border: none;
-    color: white;
-    font-size: 24px;
-    border-radius: 10%;
-    width: 35px !important;
-    height: 37px !important;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: background-color 0.3s;
+  background-color: #0b93f6;
+  border: none;
+  color: white;
+  font-size: 24px;
+  border-radius: 10%;
+  width: 35px !important;
+  height: 37px !important;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background-color 0.3s;
 }
 #send_button:hover {
-    background-color: #0077c0;
+  background-color: #0077c0;
 }
-
-
-
-
-
-
 /* Buton kapsayıcısındaki sol margin değerini kaldırıyoruz */
 .fixed_button_container {
-  
-    padding: 0px;
-    margin: 0px 0 0 0px;  /* Sol boşluk kaldırıldı */
+  padding: 0px;
+  margin: 0px 0 0 0px; /* Sol boşluk kaldırıldı */
 }
 #custom_row {
-    width: 150% !important;  /* İstediğiniz yüksekliği girin */
-    flex-wrap: nowrap !important;
+  width: 150% !important; /* İstediğiniz yüksekliği girin */
+  flex-wrap: nowrap !important;
 }
-
 /* Mobil ekranlar için özel düzenleme */
 @media only screen and (max-width: 1000px) {
-    .custom_row {  /* Eğer Row'a bu sınıf atanmışsa */
-        flex-wrap: nowrap !important;
-    }
+  .custom_row { /* Eğer Row'a bu sınıf atanmışsa */
+    flex-wrap: nowrap !important;
+  }
+}
+#chatbot {
+  height: 100vh !important; /* Bu, chatbotun yüksekliğini sayfanın tamamına yayacaktır */
+  overflow-y: auto; /* Bu, dikey kaydırma çubuğunu etkinleştirir */
 }
-
-
 """
 
-
-
 # Tema ayarları
-theme = gr.themes.Base(
-    neutral_hue="blue",
-    text_size="sm",
-    spacing_size="sm",
-)
+theme = gr.themes.Base(neutral_hue="blue", text_size="sm", spacing_size="sm")
 
-with gr.Blocks(css=demo_css, theme=theme) as demo:
+with gr.Blocks(css=demo_css) as demo:
     with gr.Column(elem_id="col_container"):
         with gr.Accordion("", open=False, visible=False):
             system_msg = gr.Textbox(value="")
             new_msg = gr.Textbox(value="")
             accordion_msg = gr.HTML(value="", visible=False)
-        
         chatbot = gr.Chatbot(label='Trek Asistanı', elem_id="chatbot")
         
-        # Row içinde, metin kutusu ve buton arasındaki boşluğu sıfırlıyoruz.
+        # Row içinde, metin kutusu ve buton arasındaki boşluğu sıfırlıyoruz
         with gr.Row(elem_id="custom_row"):
-            inputs = gr.Textbox(
-                placeholder="Buraya yazın",
-                show_label=False,
-                container=False,
-                
-            )
-            # Butonu, genişlemesini engelleyen sabit kapsayıcı içinde yerleştiriyoruz.
+            inputs = gr.Textbox(placeholder="Buraya yazın", show_label=False, container=False)
             with gr.Column(elem_classes="fixed_button_container"):
                 send_button = gr.Button(value="✈", elem_id="send_button")
-        
         state = gr.State([])
+
         with gr.Accordion("", open=False, visible=False):
-            top_p = gr.Slider(minimum=0, maximum=1.0, value=0.5,
-                              step=0.05, interactive=False, visible=False)
-            temperature = gr.Slider(minimum=0, maximum=5.0, value=0.1,
-                                    step=0.1, interactive=False, visible=False)
+            top_p = gr.Slider(minimum=0, maximum=1.0, value=0.5, step=0.05, interactive=False, visible=False)
+            temperature = gr.Slider(minimum=0, maximum=5.0, value=0.1, step=0.1, interactive=False, visible=False)
             chat_counter = gr.Number(value=0, visible=False, precision=0)
         
         # ENTER tuşuyla gönderme işlemi
-        inputs.submit(
-            predict,
-            [system_msg, inputs, top_p, temperature, chat_counter, chatbot, state],
-            [chatbot, state, chat_counter]
-        )
+        inputs.submit(predict, [system_msg, inputs, top_p, temperature, chat_counter, chatbot, state], [chatbot, state, chat_counter])
         inputs.submit(reset_textbox, [], [inputs])
-        
         # Gönder butonuna tıklandığında işlemin gerçekleşmesi
-        send_button.click(
-            predict,
-            [system_msg, inputs, top_p, temperature, chat_counter, chatbot, state],
-            [chatbot, state, chat_counter]
-        )
+        send_button.click(predict, [system_msg, inputs, top_p, temperature, chat_counter, chatbot, state], [chatbot, state, chat_counter])
         send_button.click(reset_textbox, [], [inputs])
 
 demo.queue(max_size=10).launch(debug=True)
+