Update app.py

app.py

@@ -59,27 +59,31 @@ def categorize_entities(entities):
     return hskill, sskill
 
 def highlight_entities(text, hskill, sskill):
+# ฟังก์ชันสร้าง Named Entity Annotation แสดงแบบ Tagging
     all_entities = sorted(hskill + sskill, key=lambda e: e["start"])  # เรียงตามตำแหน่งเริ่มต้น
 
     last_idx = 0
-    highlighted_text = ""
+    annotated_text = ""
 
     for entity in all_entities:
         start, end, word, entity_type = entity["start"], entity["end"], entity["word"], entity["entity"]
         color = ENTITY_COLORS["hskill"] if entity in hskill else ENTITY_COLORS["sskill"]
 
         # เพิ่มข้อความก่อน Entity
-        highlighted_text += text[last_idx:start]
-
-        # เพิ่ม Entity แบบมีไฮไลต์
-        highlighted_text += f'<span style="background-color: {color}; padding: 2px 5px; border-radius: 5px;">[{word}] ({entity_type.upper()})</span>'
-
+        annotated_text += text[last_idx:start]
+
+        # เพิ่ม Entity แบบมีไฮไลต์และ Tagging
+        annotated_text += f'''
+            <span style="background-color: {color}; padding: 3px 6px; border-radius: 5px; font-weight: bold;">
+                {word} <span style="background: white; color: black; font-size: 12px; padding: 1px 4px; border-radius: 3px;">{entity_type.upper()}</span>
+            </span>
+        '''
         last_idx = end  # อัปเดตตำแหน่งล่าสุด
 
     # เพิ่มข้อความที่เหลือหลังจาก Entity สุดท้าย
-    highlighted_text += text[last_idx:]
+    annotated_text += text[last_idx:]
 
-    return f'<div style="font-size:16px; line-height:1.6;">{highlighted_text}</div>'
+    return f'<div style="font-size:16px; line-height:1.6;">{annotated_text}</div>'
 
     
 # UI ด้วย Streamlit