Update app.py

app.py

@@ -26,7 +26,6 @@ for item in root.findall('item'):
             # name: ilk kelime (marka), item_info: (stok durumu, fiyat)
             products.append((name, item_info, full_name))
 
-
 def predict(system_msg, inputs, top_p, temperature, chat_counter, chatbot=[], history=[]):
     headers = {
         "Content-Type": "application/json",
@@ -97,75 +96,86 @@ def predict(system_msg, inputs, top_p, temperature, chat_counter, chatbot=[], hi
                 token_counter += 1
                 yield chat, history, chat_counter, response
 
-
 def reset_textbox():
     return gr.update(value='')
 
-
 def set_visible_false():
     return gr.update(visible=False)
 
-
 def set_visible_true():
     return gr.update(visible=False)
 
-
-# WhatsApp tarzı görünüm için özel CSS
+# Yeni jenerasyon, okunaklı ve modern tasarım için özel CSS
 css = """
-/* Chat Başlığı: WhatsApp koyu yeşili */
+/* Chat Başlığı: Temiz ve modern görünüm */
 .chat-header {
-    background-color: #075e54;
-    color: #fff;
+    background-color: #ffffff;
+    color: #333;
     padding: 15px;
     text-align: center;
-    font-size: 20px;
-    font-weight: bold;
+    font-size: 22px;
+    font-weight: 600;
+    border-bottom: 1px solid #e0e0e0;
 }
 
-/* Chat penceresi: arka plan rengi */
+/* Chat penceresi: Açık ve ferah arka plan */
 #chatbot {
-    background-color: #ece5dd;
+    background-color: #fafafa;
     border: none;
-    padding: 10px;
+    padding: 15px;
 }
 
-/* Kullanıcı mesajı (sağa hizalı, açık yeşil) */
+/* Kullanıcı mesajı: Açık mavi ton, modern görünüm */
 .chat-bubble.user {
-    background-color: #dcf8c6 !important;
+    background-color: #e1f5fe;
     align-self: flex-end;
-    border-radius: 20px;
-    padding: 10px 15px;
+    border-radius: 16px;
+    padding: 12px 18px;
     margin: 8px 0;
     max-width: 70%;
-    word-wrap: break-word;
+    box-shadow: 0px 1px 3px rgba(0,0,0,0.1);
+    font-size: 16px;
+    color: #333;
 }
 
-/* Bot mesajı (sola hizalı, beyaz) */
+/* Bot mesajı: Beyaz, hafif gri kenarlık, modern görünüm */
 .chat-bubble.bot {
-    background-color: #fff !important;
+    background-color: #ffffff;
     align-self: flex-start;
-    border: 1px solid #ccc;
-    border-radius: 20px;
-    padding: 10px 15px;
+    border: 1px solid #e0e0e0;
+    border-radius: 16px;
+    padding: 12px 18px;
     margin: 8px 0;
     max-width: 70%;
-    word-wrap: break-word;
+    box-shadow: 0px 1px 3px rgba(0,0,0,0.1);
+    font-size: 16px;
+    color: #333;
 }
 
-/* Mesaj gönderme alanı */
+/* Mesaj gönderme alanı: Temiz ve modern */
 .chat-input-container {
     display: flex;
-    padding: 10px;
-    border-top: 1px solid #ddd;
-    background-color: #f0f0f0;
+    padding: 15px;
+    border-top: 1px solid #e0e0e0;
+    background-color: #ffffff;
+}
+
+/* Chat input alanı */
+.chat-input {
+    flex: 1;
+    padding: 10px 15px;
+    border: 1px solid #ddd;
+    border-radius: 20px;
+    font-size: 16px;
+    outline: none;
 }
 
-/* Gönder butonu */
+/* Gönder butonu: Modern mavi ton */
 .send-button {
-    background-color: #075e54;
+    background-color: #1976d2;
     border: none;
     color: #fff;
-    padding: 10px 15px;
+    padding: 10px 20px;
     margin-left: 10px;
     border-radius: 20px;
     font-size: 16px;
@@ -173,15 +183,15 @@ css = """
 }
 """
 
-# Tema ayarını güncelliyoruz: neutral_hue 'green' ile WhatsApp benzeri yeşil ton
+# Tema ayarını güncelliyoruz: modern ve temiz görünüm için neutral_hue "blue"
 theme = gr.themes.Base(
-    neutral_hue="green",
+    neutral_hue="blue",
     text_size="sm",
     spacing_size="sm",
 )
 
 with gr.Blocks(theme=theme, css=css) as demo:
-    # WhatsApp tarzı chat başlığı
+    # Modern chat başlığı
     gr.Markdown("<div class='chat-header'>Trek Bike Finder Chatbot</div>")
     
     with gr.Column(elem_id="col_container"):
@@ -189,7 +199,7 @@ with gr.Blocks(theme=theme, css=css) as demo:
             system_msg = gr.Textbox(value="")
             new_msg = gr.Textbox(value="")
             accordion_msg = gr.HTML(value="", visible=False)
-        # Gradio'nun Chatbot bileşeni; özel CSS #chatbot ile stil veriyoruz
+        # Gradio Chatbot bileşeni; CSS ile stil veriliyor.
         chatbot = gr.Chatbot(label='Trek Bike Finder', elem_id="chatbot")
         inputs = gr.Textbox(
             placeholder="Buraya yazın, istediğiniz modeli beraber bulalım.", show_label=False)