Update ui_modules.py

ui_modules.py

@@ -1,48 +1,89 @@
 import gradio as gr
 
-def create_ui_layout():
-    # CSS'e ikon ve kart tasarımları eklendi
-    custom_css = """
-    .entity-card { border: 1px solid #e0e0e0; padding: 15px; border-radius: 10px; margin-bottom: 15px; background: #ffffff; box-shadow: 2px 2px 5px rgba(0,0,0,0.05); }
-    .wiki-section { color: #0056b3; background: #f0f7ff; padding: 5px; border-radius: 5px; margin: 5px 0; }
-    .llm-section { color: #155724; background: #f4fff3; padding: 5px; border-radius: 5px; margin: 5px 0; }
+def format_entity_log(word, wiki, reasoning, new_label):
+    """
+    LLM'den gelen analiz sonuçlarını şık bir HTML kart yapısına dönüştürür.
     """
+    # Adımları parçalara ayırarak daha okunaklı hale getirelim
+    steps = reasoning.split('|')
+    steps_html = ""
     
-    with gr.Blocks(title="RAG-NER Uzman Sistemi", css=custom_css) as demo:
+    # Her bir adımı ikonlu ve temiz bir satır olarak biçimlendir
+    for step in steps:
+        if step.strip():
+            steps_html += f"<div style='margin-bottom: 5px; font-size: 0.9em; color: #34495e;'>• {step.strip()}</div>"
+
+    return f"""
+    <div style="border: 1px solid #e0e0e0; border-radius: 10px; padding: 15px; margin-bottom: 15px; background-color: #ffffff; box-shadow: 2px 2px 5px rgba(0,0,0,0.05);">
+        <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #3498db; padding-bottom: 8px; margin-bottom: 10px;">
+            <span style="font-weight: bold; font-size: 1.1em; color: #2c3e50;">🔍 Tespit Edilen: {word}</span>
+            <span style="background-color: #3498db; color: white; padding: 2px 10px; border-radius: 15px; font-size: 0.85em;">{new_label}</span>
+        </div>
+        
+        <div style="background-color: #f8f9fa; border-left: 4px solid #9b59b6; padding: 8px; margin-bottom: 10px; border-radius: 4px;">
+            <small style="color: #8e44ad; font-weight: bold;">🌐 Wikipedia Özeti:</small>
+            <p style="margin: 5px 0 0 0; font-size: 0.9em; color: #2c3e50;">{wiki}</p>
+        </div>
+        
+        <div style="background-color: #f0fdf4; border-left: 4px solid #27ae60; padding: 8px; border-radius: 4px;">
+            <small style="color: #218838; font-weight: bold;">🧠 LLM Karar Mekanizması (CoT):</small>
+            <div style="margin-top: 5px;">
+                {steps_html}
+            </div>
+        </div>
+        
+        <div style="margin-top: 10px; text-align: right;">
+            <span style="font-size: 0.8em; color: #7f8c8d;">🎯 Yeni Etiket: <b style="color: #e67e22;">{new_label}</b></span>
+        </div>
+    </div>
+    """
+
+def create_ui_layout():
+    """
+    Gradio arayüzünün iskeletini oluşturur.
+    """
+    with gr.Blocks(theme=gr.themes.Soft(primary_hue="orange", secondary_hue="blue")) as demo:
         gr.Markdown("# 🚀 RAG-NER Uzman Karar Destek Sistemi")
+        gr.Markdown("MISC varlıkları Wikipedia ve LLM muhakemesi ile otomatik olarak yeniden etiketler.")
         
         with gr.Tab("Metin Analizi"):
-            input_text = gr.Textbox(label="Analiz Edilecek Metin", lines=3, placeholder="Metni buraya girin...")
-            
-            # Eksik olan hazır örnekler burada tanımlandı
-            gr.Examples(
-                examples=[
-                    ["Antalya Altın Portakal ödülünü Vizontele filmi aldı."],
-                    ["Nuri Bilge Ceylan, Kış Uykusu filmiyle Cannes Film Festivali'nde ödül kazandı."],
-                    ["Amerikalı yazar George Orwell'in 1984 romanı, Apple'ın Macintosh reklamına ilham verdi."],
-                    ["Android işletim sistemli bir telefon aldım, içinde Python yüklüydü."]
-                ],
-                inputs=input_text,
-                label="Hazır Senaryolar"
-            )
-            
             with gr.Row():
-                log_output = gr.HTML(label="Sistem Akış Günlüğü")
-                table_output = gr.Dataframe(headers=["Varlık", "İlk", "Nihai", "Kaynak"], datatype="markdown", wrap=True)
+                with gr.Column(scale=2):
+                    input_text = gr.Textbox(
+                        label="Analiz Edilecek Metin",
+                        placeholder="Örn: Antalya Altın Portakal ödülünü Vizontele filmi aldı.",
+                        lines=4
+                    )
+                    
+                    # Hazır senaryolar (Kullanıcı için kolaylık)
+                    gr.Examples(
+                        examples=[
+                            ["Antalya Altın Portakal ödülünü Vizontele filmi aldı."],
+                            ["Nuri Bilge Ceylan, Kış Uykusu filmiyle Cannes Film Festivali'nde ödül kazandı."],
+                            ["Amerikalı yazar George Orwell'in 1984 romanı, Apple'ın Macintosh reklamına ilham verdi."],
+                            ["Android işletim sistemli bir telefon aldım, içinde Python yüklüydü."]
+                        ],
+                        inputs=input_text,
+                        label="Hazır Senaryolar"
+                    )
+                    
+                    analyze_btn = gr.Button("Analiz Et", variant="primary", size="lg")
+                
+                with gr.Column(scale=1):
+                    # Sağ panelde hızlı sonuç tablosu
+                    output_table = gr.Dataframe(
+                        headers=["Varlık", "İlk", "Nihai", "Kaynak"],
+                        datatype=["str", "str", "html", "str"],
+                        label="Analiz Özeti"
+                    )
             
-            submit_btn = gr.Button("Analiz Et", variant="primary")
+            gr.Divider()
             
-    return demo, input_text, log_output, table_output, submit_btn
-
-def format_entity_log(word, wiki, reasoning, label):
-    # İkonlar ve hiyerarşik yapı
-    return f"""
-    <div class='entity-card'>
-        <div style='font-size: 1.2em; font-weight: bold; color: #333;'>🔍 Tespit Edilen: {word}</div>
-        <div class='wiki-section'>🌐 <b>Wikipedia:</b> {wiki}</div>
-        <div class='llm-section'>🧠 <b>LLM CoT Analizi:</b> {reasoning}</div>
-        <div style='margin-top: 10px; border-top: 1px dashed #ccc; pt: 5px;'>
-            🎯 <b>Yeni Etiket:</b> <span style='color: #e67e22; font-size: 1.1em;'>{label}</span>
-        </div>
-    </div>
-    """
+            with gr.Row():
+                # Alt panelde detaylı reasoning logları
+                output_logs = gr.HTML(
+                    label="Detaylı Muhakeme Kartları",
+                    value="<p style='text-align:center; color:gray;'>Analiz sonuçları burada kartlar halinde görünecektir.</p>"
+                )
+        
+    return demo, input_text, output_logs, output_table, analyze_btn