Clean up unnecessary comments in UI code

app.py

@@ -149,30 +149,32 @@ def parse_tool_calls(text):
 def _escape(text: str) -> str:
     return text.replace("&", "&amp;").replace("<", "&lt;").replace(">", "&gt;")
 
+# Arayüz için HTML Oluşturucuları
 def render_thinking(text: str) -> str:
-    """Modelin araç çağrısı öncesi/yanındaki serbest metnini ayrı bir 'düşünce' bloğu olarak gösterir."""
+    """Modelin araç çağrısı öncesi/yanındaki serbest metnini açılır-kapanır blok olarak gösterir."""
     return (
-        f'<div class="think-block">'
-        f'<span class="think-label">düşünce</span>'
-        f'<div class="think-text">{_escape(text)}</div>'
-        f'</div>'
+        f'<details class="chatgpt-details">'
+        f'<summary>🤔 Düşünce Süreci</summary>'
+        f'<div class="details-content thinking-text">{_escape(text)}</div>'
+        f'</details>'
     )
 
 def render_tool(name: str, args_str: str, output_str: str, is_error: bool = False) -> str:
-    """Bir araç çağrısını girdi/çıktısıyla birlikte ayrı bir 'araç' bloğu olarak gösterir."""
-    cls = "tool-block tool-error" if is_error else "tool-block"
-    mark = "⚠" if is_error else ""
+    """Bir araç çağrısını açılır-kapanır şık bir blok olarak gösterir."""
+    icon = "⚠️" if is_error else "🛠️"
+    status = "Hata" if is_error else "Başarılı"
     return (
-        f'<div class="{cls}">'
-        f'<span class="tool-label">araç çağrısı</span>'
-        f'<div class="tool-head"><span class="tool-dot"></span>{_escape(str(name))}{(" " + mark) if mark else ""}</div>'
-        f'<div class="tool-io"><span class="io-label">girdi</span>{_escape(args_str)}</div>'
-        f'<div class="tool-io"><span class="io-label">çıktı</span>{_escape(output_str)}</div>'
+        f'<details class="chatgpt-details">'
+        f'<summary>{icon} Araç Kullanımı: <code>{_escape(str(name))}</code></summary>'
+        f'<div class="details-content">'
+        f'<div class="io-section"><span class="io-label">Girdi:</span> <code>{_escape(args_str)}</code></div>'
+        f'<div class="io-section"><span class="io-label">Çıktı ({status}):</span> <pre><code>{_escape(output_str)}</code></pre></div>'
         f'</div>'
+        f'</details>'
     )
 
-def render_status(text: str = "model çalışıyor") -> str:
-    return f'<div class="status-line"><span class="pulse-dot"></span>{_escape(text)}</div>'
+def render_status(text: str = "Model düşünüyor") -> str:
+    return f'<div class="status-indicator"><span class="spinner"></span>{_escape(text)}...</div>'
 
 def chat_interface(user_input, history):
     if not model:
@@ -229,7 +231,7 @@ def chat_interface(user_input, history):
                 try:
                     result = available_functions[func_name](**args)
                     res_json = json.dumps(result, ensure_ascii=False)
-                    out_display = res_json[:200] + ("…" if len(res_json) > 200 else "")
+                    out_display = res_json[:300] + ("…" if len(res_json) > 300 else "")
                     final_output += render_tool(func_name, args_str, out_display)
                     # Sonucu modele geri besle
                     messages.append({
@@ -257,237 +259,234 @@ def chat_interface(user_input, history):
         turn += 1
 
         # Ara adımları UI'da akarak göster (stream)
-        yield final_output + render_status("model aksiyon alıyor")
+        yield final_output + render_status("Araç sonuçları işleniyor")
 
 # ==========================================
-# 4. Gradio UI — düz (flat), AMOLED siyah + gri arayüz
+# 4. Gradio UI
 # ==========================================
 css = """
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
-
-:root {
-  --bg: #000000;
-  --fg: #ededed;
-  --fg-dim: #9a9a9a;
-  --fg-dimmer: #5c5c5c;
-  --line: #232323;
-  --think: #8f8f8f;
-}
-
-* { box-sizing: border-box; }
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
 
 body, .gradio-container {
-  background: var(--bg) !important;
-  color: var(--fg) !important;
-  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
 }
 
 .gradio-container {
-  border: none !important;
-  box-shadow: none !important;
-  max-width: 900px !important;
-  margin: 0 auto !important;
+    max-width: 850px !important;
+    margin: auto !important;
 }
 
+/* Footer gizleme */
 footer { display: none !important; }
-::selection { background: #3a3a3a; color: #fff; }
-
-/* ince, gri kaydırma çubuğu */
-::-webkit-scrollbar { width: 6px; height: 6px; }
-::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 4px; }
-::-webkit-scrollbar-track { background: transparent; }
 
-/* ---------- başlık ---------- */
-.header-wrap { text-align: center; padding: 30px 0 18px 0; }
-.header-title { font-size: 1.35em; font-weight: 300; letter-spacing: 0.09em; color: #f2f2f2; }
-.header-sub { font-size: 0.72em; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-dimmer); margin-top: 6px; }
+/* Başlık */
+.header-title {
+    text-align: center;
+    font-weight: 600;
+    font-size: 1.5rem;
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+}
 
-/* ---------- sohbet penceresi: tamamen düz, kutu yok ---------- */
+/* Chatbot Alanı */
 #chatbot {
-  background: var(--bg) !important;
-  border: none !important;
-  box-shadow: none !important;
-}
-#chatbot .message-wrap,
-#chatbot .wrap,
-#chatbot .bot-row,
-#chatbot .user-row {
-  background: transparent !important;
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
 }
-#chatbot .message {
-  background: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
-  padding: 10px 6px !important;
-  font-size: 0.97em;
-  line-height: 1.65;
+
+/* Örnek Butonları (Pills) */
+.examples-row {
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+    margin-bottom: 12px;
 }
-#chatbot .user {
-  color: #ffffff !important;
-  font-weight: 500;
+.bubble-btn {
+    background: transparent !important;
+    border: 1px solid var(--border-color-primary) !important;
+    border-radius: 9999px !important;
+    font-size: 0.85rem !important;
+    padding: 6px 16px !important;
+    box-shadow: none !important;
+    transition: background 0.2s;
 }
-#chatbot .bot {
-  color: var(--fg) !important;
+.bubble-btn:hover {
+    background: var(--neutral-100) !important;
 }
-/* mesajlar arası kutu değil, ince ayraç */
-#chatbot .message-row:not(:first-child) {
-  border-top: 1px solid var(--line);
-  margin-top: 4px;
-  padding-top: 4px;
+.dark .bubble-btn:hover {
+    background: var(--neutral-800) !important;
 }
 
-/* ---------- düşünce bloğu ---------- */
-.think-block {
-  border-left: 1px dashed #444;
-  padding: 3px 0 3px 16px;
-  margin: 12px 0;
+/* Modern Input Alanı */
+#input-container {
+    display: flex;
+    align-items: center;
+    border: 1px solid var(--border-color-primary);
+    border-radius: 24px;
+    padding: 4px 8px;
+    background: var(--background-fill-primary);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+    margin-bottom: 20px;
 }
-.think-label,
-.tool-label {
-  display: block;
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 0.65em;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: var(--fg-dimmer);
-  margin-bottom: 5px;
+.dark #input-container {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
 }
-.think-text {
-  font-style: italic;
-  color: var(--think);
-  font-size: 0.92em;
-  line-height: 1.55;
-  white-space: pre-wrap;
+#msg_box, #msg_box textarea {
+    border: none !important;
+    box-shadow: none !important;
+    background: transparent !important;
+    font-size: 1rem !important;
+    resize: none !important;
+}
+#submit_btn {
+    background: #10a37f !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 50% !important;
+    width: 38px !important;
+    height: 38px !important;
+    min-width: 38px !important;
+    padding: 0 !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: transform 0.1s, background 0.2s;
+    margin-left: 8px;
+    margin-right: 4px;
+}
+#submit_btn:hover {
+    background: #0d8a6a !important;
+}
+#submit_btn:active {
+    transform: scale(0.95);
 }
 
-/* ---------- araç bloğu ---------- */
-.tool-block {
-  border-left: 1px solid #3a3a3a;
-  padding: 3px 0 8px 16px;
-  margin: 12px 0;
+/* Araç ve Düşünce Çıktıları */
+.chatgpt-details {
+    border: 1px solid var(--border-color-primary);
+    border-radius: 8px;
+    margin: 10px 0;
+    background-color: var(--background-fill-secondary);
+    overflow: hidden;
 }
-.tool-head {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 0.8em;
-  color: #c2c2c2;
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  margin-bottom: 5px;
+.chatgpt-details summary {
+    padding: 10px 14px;
+    cursor: pointer;
+    font-weight: 500;
+    font-size: 0.9rem;
+    outline: none;
+    user-select: none;
 }
-.tool-dot {
-  width: 5px; height: 5px; border-radius: 50%;
-  background: #9a9a9a;
-  display: inline-block;
-  flex-shrink: 0;
+.chatgpt-details summary:hover {
+    background-color: var(--neutral-100);
 }
-.tool-io {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 0.78em;
-  color: var(--fg-dim);
-  padding: 2px 0;
-  word-break: break-word;
-  white-space: pre-wrap;
+.dark .chatgpt-details summary:hover {
+    background-color: var(--neutral-800);
 }
-.io-label {
-  color: var(--fg-dimmer);
-  margin-right: 8px;
+.details-content {
+    padding: 12px 14px;
+    border-top: 1px solid var(--border-color-primary);
+    font-size: 0.85rem;
 }
-.tool-error .tool-head { color: #d8d8d8; }
-.tool-error { border-left-color: #555; }
-
-/* ---------- çalışıyor göstergesi ---------- */
-.status-line {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--fg-dimmer);
-  font-size: 0.8em;
-  margin-top: 8px;
-  font-style: italic;
+.thinking-text {
+    font-style: italic;
+    color: var(--body-text-color-subdued);
+    white-space: pre-wrap;
 }
-.pulse-dot {
-  width: 6px; height: 6px; border-radius: 50%;
-  background: var(--fg-dim);
-  animation: pulse 1.2s ease-in-out infinite;
-  flex-shrink: 0;
+.io-section {
+    margin-bottom: 8px;
 }
-@keyframes pulse { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
-
-/* ---------- örnek baloncukları (textbox'ın üstünde, küçük) ---------- */
-.examples-row { margin-bottom: 8px !important; gap: 6px !important; }
-.bubble-btn {
-  background: transparent !important;
-  border: 1px solid #2c2c2c !important;
-  border-radius: 999px !important;
-  color: var(--fg-dim) !important;
-  font-size: 0.76em !important;
-  font-weight: 400 !important;
-  padding: 5px 14px !important;
-  min-width: auto !important;
-  flex-grow: 0 !important;
-  box-shadow: none !important;
-  transition: color .15s ease, border-color .15s ease;
+.io-section:last-child {
+    margin-bottom: 0;
 }
-.bubble-btn:hover {
-  color: #fff !important;
-  border-color: #6a6a6a !important;
+.io-label {
+    font-weight: 600;
+    margin-right: 6px;
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
 }
-
-/* ---------- mesaj kutusu ---------- */
-#msg_box textarea {
-  background: transparent !important;
-  border: none !important;
-  border-bottom: 1px solid #2a2a2a !important;
-  border-radius: 0 !important;
-  color: var(--fg) !important;
-  padding: 10px 4px !important;
-  font-size: 0.95em !important;
+.details-content pre {
+    background: var(--neutral-100);
+    padding: 8px;
+    border-radius: 6px;
+    overflow-x: auto;
+    margin-top: 4px;
+}
+.dark .details-content pre {
+    background: #1e1e1e;
 }
-#msg_box textarea:focus {
-  border-bottom-color: #808080 !important;
-  box-shadow: none !important;
+.details-content code {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.8rem;
 }
-#msg_box textarea::placeholder { color: #555 !important; }
 
-#submit_btn {
-  background: transparent !important;
-  color: var(--fg) !important;
-  border: 1px solid #333 !important;
-  border-radius: 999px !important;
-  font-weight: 400 !important;
+/* Yükleniyor / Durum Göstergesi */
+.status-indicator {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.85rem;
+    color: var(--body-text-color-subdued);
+    margin-top: 10px;
+}
+.spinner {
+    width: 12px;
+    height: 12px;
+    border: 2px solid var(--border-color-primary);
+    border-top-color: var(--color-accent);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+@keyframes spin {
+    to { transform: rotate(360deg); }
 }
-#submit_btn:hover { border-color: #7a7a7a !important; color: #fff !important; }
 """
 
-with gr.Blocks(theme=gr.themes.Base(), css=css) as demo:
-    gr.Markdown(
-        "<div class='header-wrap'>"
-        "<div class='header-title'>🌍 AFET TAKİP</div>"
-        "<div class='header-sub'>agentic disaster intelligence</div>"
-        "</div>"
-    )
+with gr.Blocks(theme=gr.themes.Soft(primary_hue="zinc", neutral_hue="slate"), css=css) as demo:
+    gr.Markdown("<div class='header-title'>🌍 Afet Takip Asistanı</div>")
 
-    chatbot = gr.Chatbot(elem_id="chatbot", height=520, label="Asistan", show_label=False)
+    # Sohbet Ekranı
+    chatbot = gr.Chatbot(
+        elem_id="chatbot", 
+        height=550, 
+        show_label=False, 
+        bubble_full_width=False, 
+        avatar_images=(None, "https://upload.wikimedia.org/wikipedia/commons/0/04/ChatGPT_logo.svg")
+    )
 
+    # Örnek Sorular
     with gr.Row(elem_classes="examples-row"):
-        ex1 = gr.Button("son depremler", elem_classes="bubble-btn")
-        ex2 = gr.Button("aktif yangınlar", elem_classes="bubble-btn")
-        ex3 = gr.Button("deprem + yangın birleştir", elem_classes="bubble-btn")
-
-    with gr.Row():
-        msg = gr.Textbox(placeholder="Afetlerle ilgili ne öğrenmek istersiniz?", label="Mesajınız", lines=1, show_label=False, elem_id="msg_box", scale=4)
-        submit_btn = gr.Button("Gönder", variant="primary", scale=1, elem_id="submit_btn")
-
+        ex1 = gr.Button("Son depremler", elem_classes="bubble-btn")
+        ex2 = gr.Button("Aktif yangınlar", elem_classes="bubble-btn")
+        ex3 = gr.Button("Deprem + Yangınları analiz et", elem_classes="bubble-btn")
+
+    # Giriş Alanı
+    with gr.Row(elem_id="input-container"):
+        msg = gr.Textbox(
+            placeholder="Afetlerle ilgili ne öğrenmek istersiniz?", 
+            lines=1, 
+            max_lines=4, 
+            show_label=False, 
+            elem_id="msg_box", 
+            scale=10
+        )
+        # Gönder ikonu
+        submit_btn = gr.Button("↑", scale=1, elem_id="submit_btn")
+
+    # Buton Fonksiyonları
     ex1.click(lambda: "2026-07-25 ile 2026-07-30 tarihleri arasındaki 5.5 üzeri depremleri listele.", outputs=msg)
     ex2.click(lambda: "Şu anki aktif büyük orman yangınları hangileri? 3 tanesini getir.", outputs=msg)
     ex3.click(lambda: "Son 7 günde (2026-07-23 ile 2026-07-30) 6.0'dan büyük deprem oldu mu? Ayrıca şu an aktif orman yangını var mı?", outputs=msg)
 
     def respond(user_message, chat_history):
-        # Arayüze kullanıcının mesajını ekle
+        if not user_message.strip():
+            return chat_history, ""
+            
         chat_history.append((user_message, ""))
 
-        # Jeneratörden gelen kısımları adım adım güncelle
         for bot_message in chat_interface(user_message, chat_history[:-1]):
             chat_history[-1] = (user_message, bot_message)
             yield chat_history, ""