Apply user custom UI

app.py

@@ -121,10 +121,10 @@ def generate_step(messages):
     """
     text = tokenizer.apply_chat_template(messages, tools=tools, tokenize=False, add_generation_prompt=True)
     inputs = tokenizer(text, return_tensors="pt").to(model.device)
-    
+
     outputs = model.generate(**inputs, max_new_tokens=1024, temperature=0.3)
     response_text = tokenizer.decode(outputs[0][inputs.input_ids.shape[1]:], skip_special_tokens=False)
-    
+
     # Qwen2.5 tool call formatında bitiş token'larını temizleme
     response_text = response_text.replace("<|im_end|>", "")
     return response_text
@@ -146,6 +146,34 @@ def parse_tool_calls(text):
             print(f"Tool parse hatası: {e} - Veri: {match}")
     return calls
 
+def _escape(text: str) -> str:
+    return text.replace("&", "&amp;").replace("<", "&lt;").replace(">", "&gt;")
+
+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."""
+    return (
+        f'<div class="think-block">'
+        f'<span class="think-label">düşünce</span>'
+        f'<div class="think-text">{_escape(text)}</div>'
+        f'</div>'
+    )
+
+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 ""
+    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'</div>'
+    )
+
+def render_status(text: str = "model çalışıyor") -> str:
+    return f'<div class="status-line"><span class="pulse-dot"></span>{_escape(text)}</div>'
+
 def chat_interface(user_input, history):
     if not model:
         yield "Model yüklenemediği için yanıt verilemiyor."
@@ -155,16 +183,16 @@ def chat_interface(user_input, history):
     messages = [
         {"role": "system", "content": "Sen yetenekli bir afet takip asistanısın. Kullanıcı sorularına cevap verirken gerektiğinde 'get_earthquakes' ve 'get_wildfires' araçlarını kullan. Araçların sonuçlarını inceleyerek doğal dilde cevap ver. Bugünkü tarih: " + datetime.now().strftime("%Y-%m-%d")}
     ]
-    
+
     for user_msg, asst_msg in history:
         messages.append({"role": "user", "content": user_msg})
         messages.append({"role": "assistant", "content": asst_msg})
-        
+
     messages.append({"role": "user", "content": user_input})
-    
+
     turn = 1
     final_output = ""
-    
+
     # Maksimum 5 tool-calling döngüsü (Agentic Loop)
     for _ in range(5):
         try:
@@ -172,35 +200,37 @@ def chat_interface(user_input, history):
             response_text = generate_step(messages)
             messages.append({"role": "assistant", "content": response_text})
         except Exception as e:
-            final_output += f"\n[Hata] Model çalıştırılamadı: {str(e)}"
+            final_output += render_tool("model", "", str(e), is_error=True)
             yield final_output
             break
-            
+
         tool_calls = parse_tool_calls(response_text)
-        
+        # <tool_call> etiketleri dışında kalan serbest metin: düşünce ya da nihai cevap
+        reasoning_text = re.sub(r"<tool_call>.*?</tool_call>", "", response_text, flags=re.DOTALL).strip()
+
         # Eğer tool çağrısı yoksa, model nihai cevabı üretmiştir. Döngüden çık.
         if not tool_calls:
-            # Sadece doğal dildeki cevabı ekle (varsa tool tagleri dışında kalan kısım)
-            clean_response = re.sub(r"<tool_call>.*?</tool_call>", "", response_text, flags=re.DOTALL).strip()
-            if clean_response:
-                final_output += f"\n\n[Nihai Yanıt]:\n{clean_response}"
+            if reasoning_text:
+                final_output += f"\n\n{reasoning_text}"
             yield final_output
             break
-            
-        # Tool çağrısı varsa UI'da göstermek için metin formatla
-        turn_str = ""
-        
+
+        # Tool çağrısından önceki/yanındaki serbest metin varsa ayrı "düşünce" bloğu olarak göster
+        if reasoning_text:
+            final_output += render_thinking(reasoning_text)
+
         for call in tool_calls:
             func_name = call.get("name")
             args = call.get("arguments", {})
             args_str = ", ".join(f"{k}={v}" for k, v in args.items())
-            
+
             # Aracı çalıştır
             if func_name in available_functions:
                 try:
                     result = available_functions[func_name](**args)
                     res_json = json.dumps(result, ensure_ascii=False)
-                    turn_str += f"<div class='tool-box'><div class='tool-title'>🛠️ Araç: {func_name}</div><div class='tool-code'>Girdi: {args_str}</div><div class='tool-code'>Çıktı: {res_json[:200]}...</div></div>"
+                    out_display = res_json[:200] + ("…" if len(res_json) > 200 else "")
+                    final_output += render_tool(func_name, args_str, out_display)
                     # Sonucu modele geri besle
                     messages.append({
                         "role": "tool",
@@ -209,7 +239,7 @@ def chat_interface(user_input, history):
                     })
                 except Exception as e:
                     error_msg = {"error": str(e)}
-                    turn_str += f"<div class='tool-box'><div class='tool-title'>⚠️ Hata: {func_name}</div><div class='tool-code'>{str(e)}</div></div>"
+                    final_output += render_tool(func_name, args_str, str(e), is_error=True)
                     messages.append({
                         "role": "tool",
                         "name": func_name,
@@ -217,60 +247,246 @@ def chat_interface(user_input, history):
                     })
             else:
                 error_msg = {"error": f"Bilinmeyen fonksiyon: {func_name}"}
-                turn_str += f"<div class='tool-box'><div class='tool-title'>⚠️ Bilinmeyen Araç: {func_name}</div></div>"
+                final_output += render_tool(func_name, args_str, "bilinmeyen araç", is_error=True)
                 messages.append({
                     "role": "tool",
                     "name": func_name,
                     "content": json.dumps(error_msg, ensure_ascii=False)
                 })
-                
-        final_output += turn_str
+
         turn += 1
-        
+
         # Ara adımları UI'da akarak göster (stream)
-        yield final_output + "<br><i style='color:#666; font-size: 0.9em;'>💭 Model aksiyon alıyor...</i>"
+        yield final_output + render_status("model aksiyon alıyor")
 
 # ==========================================
-# 4. Gradio UI
+# 4. Gradio UI — düz (flat), AMOLED siyah + gri arayüz
 # ==========================================
 css = """
-body { background-color: #000000 !important; color: #e0e0e0; font-family: 'Inter', sans-serif; }
-.gradio-container { background: #000000 !important; border: none !important; }
-#chatbot { background: #000000 !important; border: none !important; box-shadow: none !important; }
-.message { border-radius: 12px !important; border: 1px solid #333 !important; padding: 14px !important; }
-.bot { background: #0a0a0a !important; color: #ccc !important; }
-.user { background: #1a1a1a !important; color: #fff !important; }
-.tool-box { background: #111; border: 1px solid #222; border-left: 3px solid #555; padding: 10px; margin: 8px 0; border-radius: 4px 8px 8px 4px; font-size: 0.85em; color: #999; }
-.tool-title { font-weight: 600; color: #bbb; margin-bottom: 4px; }
-.tool-code { font-family: monospace; background: #000; padding: 4px; border-radius: 4px; overflow-wrap: break-word; }
-.bubble-btn { background: #111 !important; border: 1px solid #333 !important; border-radius: 20px !important; color: #aaa !important; font-size: 0.85em !important; padding: 4px 12px !important; box-shadow: none !important; cursor: pointer; transition: 0.2s; min-width: auto !important; flex-grow: 0 !important; }
-.bubble-btn:hover { background: #222 !important; color: #fff !important; border-color: #555 !important; }
-#msg_box textarea { background: #111 !important; border: 1px solid #333 !important; color: white !important; border-radius: 12px !important; }
-#submit_btn { background: #222 !important; color: white !important; border: 1px solid #444 !important; border-radius: 12px !important; }
+@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; }
+
+body, .gradio-container {
+  background: var(--bg) !important;
+  color: var(--fg) !important;
+  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
+}
+
+.gradio-container {
+  border: none !important;
+  box-shadow: none !important;
+  max-width: 900px !important;
+  margin: 0 auto !important;
+}
+
+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; }
+
+/* ---------- sohbet penceresi: tamamen düz, kutu yok ---------- */
+#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;
+}
+#chatbot .message {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  padding: 10px 6px !important;
+  font-size: 0.97em;
+  line-height: 1.65;
+}
+#chatbot .user {
+  color: #ffffff !important;
+  font-weight: 500;
+}
+#chatbot .bot {
+  color: var(--fg) !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;
+}
+
+/* ---------- düşünce bloğu ---------- */
+.think-block {
+  border-left: 1px dashed #444;
+  padding: 3px 0 3px 16px;
+  margin: 12px 0;
+}
+.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;
+}
+.think-text {
+  font-style: italic;
+  color: var(--think);
+  font-size: 0.92em;
+  line-height: 1.55;
+  white-space: pre-wrap;
+}
+
+/* ---------- araç bloğu ---------- */
+.tool-block {
+  border-left: 1px solid #3a3a3a;
+  padding: 3px 0 8px 16px;
+  margin: 12px 0;
+}
+.tool-head {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.8em;
+  color: #c2c2c2;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  margin-bottom: 5px;
+}
+.tool-dot {
+  width: 5px; height: 5px; border-radius: 50%;
+  background: #9a9a9a;
+  display: inline-block;
+  flex-shrink: 0;
+}
+.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;
+}
+.io-label {
+  color: var(--fg-dimmer);
+  margin-right: 8px;
+}
+.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;
+}
+.pulse-dot {
+  width: 6px; height: 6px; border-radius: 50%;
+  background: var(--fg-dim);
+  animation: pulse 1.2s ease-in-out infinite;
+  flex-shrink: 0;
+}
+@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;
+}
+.bubble-btn:hover {
+  color: #fff !important;
+  border-color: #6a6a6a !important;
+}
+
+/* ---------- 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;
+}
+#msg_box textarea:focus {
+  border-bottom-color: #808080 !important;
+  box-shadow: none !important;
+}
+#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;
+}
+#submit_btn:hover { border-color: #7a7a7a !important; color: #fff !important; }
 """
 
 with gr.Blocks(theme=gr.themes.Base(), css=css) as demo:
-    gr.Markdown("<h1 style='text-align: center; color: #fff; font-weight: 300;'>🌍 Agentic Disaster Tracker</h1>")
-    
-    chatbot = gr.Chatbot(elem_id="chatbot", height=500, label="Asistan", show_label=False)
-    
-    with gr.Row():
-        ex1 = gr.Button("Son depremler", elem_classes="bubble-btn")
-        ex2 = gr.Button("Aktif yangınlar", elem_classes="bubble-btn")
-        ex3 = gr.Button("Deprem ve yangınları birleştir", elem_classes="bubble-btn")
+    gr.Markdown(
+        "<div class='header-wrap'>"
+        "<div class='header-title'>🌍 AFET TAKİP</div>"
+        "<div class='header-sub'>agentic disaster intelligence</div>"
+        "</div>"
+    )
+
+    chatbot = gr.Chatbot(elem_id="chatbot", height=520, label="Asistan", show_label=False)
+
+    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.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
         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)
@@ -280,4 +496,4 @@ with gr.Blocks(theme=gr.themes.Base(), css=css) as demo:
     msg.submit(respond, [msg, chatbot], [chatbot, msg], api_name=False)
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()