Update app.py

app.py

@@ -58,21 +58,26 @@ def categorize_entities(entities):
     
     return hskill, sskill
 
-# ฟังก์ชันสร้าง HTML สำหรับแสดงผล Entity ที่ถูก Highlight พร้อม Tag
 def highlight_entities(text, hskill, sskill):
-    all_entities = hskill + sskill  # รวมทั้งหมดเพื่อไฮไลต์
-    highlighted_text = text
-
-    for entity in sorted(all_entities, key=lambda e: text.find(e["word"]), reverse=True):
-        entity_word = entity["word"]
-        entity_label = "HSKILL" if entity in hskill else "SSKILL"
-        entity_color = ENTITY_COLORS.get(entity_label, "#D3D3D3")
-
-        # ใช้ HTML + CSS ในการไฮไลต์ Entity และใส่ TAG
-        highlighted_text = highlighted_text.replace(
-            entity_word,
-            f'<span style="background-color: {entity_color}; padding: 2px 5px; border-radius: 5px;">[{entity_word}] ({entity_label.upper()})</span>'
-        )
+    all_entities = sorted(hskill + sskill, key=lambda e: e["start"])  # เรียงตามตำแหน่งเริ่มต้น
+
+    last_idx = 0
+    highlighted_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>'
+
+        last_idx = end  # อัปเดตตำแหน่งล่าสุด
+
+    # เพิ่มข้อความที่เหลือหลังจาก Entity สุดท้าย
+    highlighted_text += text[last_idx:]
 
     return f'<div style="font-size:16px; line-height:1.6;">{highlighted_text}</div>'