Update app.py

app.py

@@ -714,8 +714,7 @@ def format_ccog_card(ccog_data):
     card = f"""
     <div class='ccog-card'>
         <div class='ccog-header'>
-            <h3>CCOG Classification</h3>
-            <div class='ccog-system'>Common Classification of Occupational Groups</div>
+            <h3>UN Common Classification of Occupational Groups</h3>
         </div>
         
         <div class='ccog-levels'>
@@ -732,16 +731,55 @@ def format_ccog_card(ccog_data):
                 {f"<div class='level-desc'>{level['desc']}</div>" if level['desc'] else ""}
             </div>
         """
+
+    """
     
-    card += """
-        </div>
-        <div class='ccog-footer'>
-            International Organization for Migration Standard Classification
+    return f"<div class='ccog-container'>{card}</div>"
+
+# ================= Format CCOG =================
+def format_esco_card(esco_data):
+    if not esco_data or not isinstance(esco_data, dict):
+        return "<div class='ccog-container'><p>No ESCO classification data available</p></div>"
+    
+    # Extract level data
+    levels = []
+    for i in range(1, 5):
+        level_data = {
+            'code': esco_data.get(f'Level_{i}_ESCO_code'),
+            'name': esco_data.get(f'Level_{i}_ESCO_name'),
+            'desc': esco_data.get(f'Level_{i}_ESCO_desc')
+        }
+        if level_data['code'] or level_data['name']:
+            levels.append(level_data)
+    
+    if not levels:
+        return "<div class='esco-container'><p>No valid ESCO classification found</p></div>"
+    
+    # Build the card
+    card = f"""
+    <div class='esco-card'>
+        <div class='esco-header'>
+            <h3>ESCO Occupation Classification</h3>
         </div>
-    </div>
+        
+        <div class='esco-levels'>
     """
     
-    return f"<div class='ccog-container'>{card}</div>"
+    for i, level in enumerate(levels, 1):
+        card += f"""
+            <div class='esco-level {'active' if level['desc'] else 'inactive'}'>
+                <div class='level-header'>
+                    <span class='level-number'>Level {i}</span>
+                    <span class='level-code'>{level['code'] or 'N/A'}</span>
+                </div>
+                <div class='level-name'>{level['name'] or 'Not classified'}</div>
+                {f"<div class='level-desc'>{level['desc']}</div>" if level['desc'] else ""}
+            </div>
+        """
+
+    """
+    
+    return f"<div class='esco-container'>{card}</div>"    
 
 # ================= Process Analysis =================
 from concurrent.futures import ThreadPoolExecutor
@@ -863,6 +901,7 @@ def process_pdf(file):
                            for i in range(1, 6) for field in ["code", "name", "desc"]}
             esco_skills = None
 
+        formatted_esco_levels = format_esco_card(esco_levels)
         formatted_esco_skills = format_skill_cards(esco_skills)
         
         debug_message = "Processing completed successfully."
@@ -876,7 +915,8 @@ def process_pdf(file):
             "\n".join(interview),
             #joined_skills,
             formatted_skills,
-            esco_levels,
+           # esco_levels,
+            formatted_esco_levels,
             #esco_skills,
             formatted_esco_skills,
             debug_message if DEBUG else None
@@ -1325,7 +1365,7 @@ label {
 
 /* Header section */
 .skill-header {
-    background: #0033A0;
+    background: #ecf0f1;
     color: white;
     padding: 1.2rem;
     display: flex;
@@ -1450,7 +1490,6 @@ progress::-webkit-progress-value {
     margin: 1.5rem 0;
 }
 
-/* Card styling */
 .ccog-card {
     background: white;
     border-radius: 10px;
@@ -1460,7 +1499,7 @@ progress::-webkit-progress-value {
 }
 
 .ccog-header {
-    background: #0033A0;
+    background: #ecf0f1;
     color: white;
     padding: 1.2rem;
     border-bottom: 2px solid rgba(255,255,255,0.1);
@@ -1478,7 +1517,6 @@ progress::-webkit-progress-value {
     margin-top: 0.3rem;
 }
 
-/* Levels hierarchy */
 .ccog-levels {
     padding: 1rem;
     display: flex;
@@ -1502,6 +1540,61 @@ progress::-webkit-progress-value {
     opacity: 0.7;
 }
 
+/* ESCO card */
+.esco-container {
+    margin: 1.5rem 0;
+}
+
+.esco-card {
+    background: white;
+    border-radius: 10px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+    overflow: hidden;
+    border: 1px solid #e0e0e0;
+}
+
+.esco-header {
+    background: #ecf0f1;
+    color: white;
+    padding: 1.2rem;
+    border-bottom: 2px solid rgba(255,255,255,0.1);
+}
+
+.esco-header h3 {
+    margin: 0;
+    font-size: 1.3rem;
+    font-weight: 600;
+}
+
+.esco-system {
+    opacity: 0.9;
+    font-size: 0.85rem;
+    margin-top: 0.3rem;
+}
+
+.esco-levels {
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.esco-level {
+    padding: 1rem;
+    border-radius: 6px;
+    position: relative;
+}
+
+.esco-level.active {
+    background: #f8fafc;
+    border-left: 4px solid #0033A0;
+}
+
+.esco-level.inactive {
+    background: #f5f5f5;
+    opacity: 0.7;
+}
+
 .level-header {
     display: flex;
     justify-content: space-between;
@@ -1540,15 +1633,6 @@ progress::-webkit-progress-value {
     margin-top: 0.5rem;
 }
 
- 
-.ccog-footer {
-    padding: 0.8rem 1.2rem;
-    background: #f5f7fa;
-    color: #666;
-    font-size: 0.8rem;
-    text-align: center;
-    border-top: 1px solid #eee;
-}
 
 /* Output Markdown */
 .gr-markdown {
@@ -1593,6 +1677,10 @@ progress::-webkit-progress-value {
     .ccog-level {
         padding: 0.8rem;
     }
+
+    .esco-level {
+        padding: 0.8rem;
+    }
     
     .level-name {
         font-size: 1rem;
@@ -1668,6 +1756,11 @@ progress::-webkit-progress-value {
         with gr.Column():
             gr.Markdown("### Expected Qualifications")
             qualification_output = gr.Textbox(label="", lines=5, interactive=False)
+            
+    with gr.Row():
+        with gr.Column():
+            gr.Markdown("## Interview Questions")
+            interview_output = gr.Textbox(label="Interview Questions", lines=10, interactive=False)
 
     with gr.Row():
         with gr.Column():
@@ -1676,22 +1769,16 @@ progress::-webkit-progress-value {
             
     with gr.Row():
         with gr.Column():
-            gr.Markdown("### United Nations Occupation Common Classification")
             ccoq_levels_output = gr.HTML(label="", elem_classes="ccog-container")
  
     with gr.Row():
         with gr.Column():
-            gr.Markdown("### ESCO Mapping")
-            esco_levels_output = gr.Textbox(label="Mapped ESCO Occupation group")
+            esco_levels_output = gr.HTML(label="", elem_classes="esco-container")
     
     with gr.Row():        
         with gr.Column():
-            esco_skills_output = gr.HTML(label="", elem_classes="skills-container")
+            esco_skills_output = gr.HTML(label="Linked ESCO Skills", elem_classes="skills-container")
 
-    with gr.Row():
-        with gr.Column():
-            gr.Markdown("## Interview Questions")
-            interview_output = gr.Textbox(label="Interview Questions", lines=10, interactive=False)
 
     with gr.Row():
         with gr.Column():