Update app.py

app.py

@@ -691,6 +691,57 @@ def get_progress_value(level):
     level_map = {"basic": 1, "intermediate": 2, "advanced": 3}
     return str(level_map.get(level.lower(), 1))
 
+# ================= Format CCOG =================
+def format_ccog_card(ccog_data):
+    if not ccog_data or not isinstance(ccog_data, dict):
+        return "<div class='ccog-container'><p>No CCOG classification data available</p></div>"
+    
+    # Extract level data
+    levels = []
+    for i in range(1, 5):
+        level_data = {
+            'code': ccog_data.get(f'Level_{i}_CCOG_code'),
+            'name': ccog_data.get(f'Level_{i}_CCOG_name'),
+            'desc': ccog_data.get(f'Level_{i}_CCOG_desc')
+        }
+        if level_data['code'] or level_data['name']:
+            levels.append(level_data)
+    
+    if not levels:
+        return "<div class='ccog-container'><p>No valid CCOG classification found</p></div>"
+    
+    # Build the card
+    card = f"""
+    <div class='ccog-card'>
+        <div class='ccog-header'>
+            <h3>CCOG Classification</h3>
+            <div class='ccog-system'>Common Classification of Occupational Groups</div>
+        </div>
+        
+        <div class='ccog-levels'>
+    """
+    
+    for i, level in enumerate(levels, 1):
+        card += f"""
+            <div class='ccog-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>
+        """
+    
+    card += """
+        </div>
+        <div class='ccog-footer'>
+            International Organization for Migration Standard Classification
+        </div>
+    </div>
+    """
+    
+    return f"<div class='ccog-container'>{card}</div>"
 
 # ================= Process Analysis =================
 from concurrent.futures import ThreadPoolExecutor
@@ -797,7 +848,8 @@ def process_pdf(file):
         # Prepare the results for each output component
         ccoq_levels = {f"Level_{i}_CCOG_{field}": occ_group.get(f"Level_{i}_CCOG_{field}")
                        for i in range(1, 5) for field in ["code", "name", "desc"]}
-
+        formatted_ccog = format_ccog_card(ccoq_levels)
+        
         if has_esco:
             esco_levels = {f"Level_{i}_ESCO_{field}": esco_occ.get(f"Level_{i}_ESCO_{field}")
                            for i in range(1, 6) for field in ["code", "name", "desc"]}
@@ -819,7 +871,8 @@ def process_pdf(file):
             responsibilities,
             job_family,
             "\n".join(qualification),
-            ccoq_levels,
+            #ccoq_levels,
+            formatted_ccog,
             "\n".join(interview),
             #joined_skills,
             formatted_skills,
@@ -1392,6 +1445,110 @@ progress::-webkit-progress-value {
     min-width: 80px;
     text-align: right;
 }
+/* CCOG card */
+.ccog-container {
+    margin: 1.5rem 0;
+}
+
+/* Card styling */
+.ccog-card {
+    background: white;
+    border-radius: 10px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+    overflow: hidden;
+    border: 1px solid #e0e0e0;
+}
+
+.ccog-header {
+    background: #0033A0;
+    color: white;
+    padding: 1.2rem;
+    border-bottom: 2px solid rgba(255,255,255,0.1);
+}
+
+.ccog-header h3 {
+    margin: 0;
+    font-size: 1.3rem;
+    font-weight: 600;
+}
+
+.ccog-system {
+    opacity: 0.9;
+    font-size: 0.85rem;
+    margin-top: 0.3rem;
+}
+
+/* Levels hierarchy */
+.ccog-levels {
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.ccog-level {
+    padding: 1rem;
+    border-radius: 6px;
+    position: relative;
+}
+
+.ccog-level.active {
+    background: #f8fafc;
+    border-left: 4px solid #0033A0;
+}
+
+.ccog-level.inactive {
+    background: #f5f5f5;
+    opacity: 0.7;
+}
+
+.level-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+    align-items: center;
+}
+
+.level-number {
+    font-weight: 600;
+    color: #0033A0;
+    font-size: 0.9rem;
+}
+
+.level-code {
+    background: rgba(0,51,160,0.1);
+    color: #0033A0;
+    padding: 0.2rem 0.5rem;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    font-family: monospace;
+}
+
+.level-name {
+    font-weight: 500;
+    font-size: 1.05rem;
+    margin-bottom: 0.5rem;
+    color: #333;
+}
+
+.level-desc {
+    font-size: 0.9rem;
+    color: #555;
+    line-height: 1.5;
+    padding-top: 0.5rem;
+    border-top: 1px dashed #e0e0e0;
+    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 {
@@ -1432,6 +1589,14 @@ progress::-webkit-progress-value {
         align-items: flex-start;
         gap: 0.5rem;
     }
+
+    .ccog-level {
+        padding: 0.8rem;
+    }
+    
+    .level-name {
+        font-size: 1rem;
+    }
 }
     """,
     head='''
@@ -1497,11 +1662,7 @@ progress::-webkit-progress-value {
     with gr.Row():
         with gr.Column():
             gr.Markdown("### Mapped Skills")            
-            skills_output = gr.HTML(
-                                value="",
-                                label="",
-                                elem_classes=["skills-container"]
-                                )
+            skills_output = gr.HTML(label="", elem_classes="skills-container")
 
     with gr.Row():
         with gr.Column():
@@ -1516,11 +1677,8 @@ progress::-webkit-progress-value {
     with gr.Row():
         with gr.Column():
             gr.Markdown("### United Nations Occupation Common Classification")
-            ccoq_levels_output = gr.Textbox(label="")
+            ccoq_levels_output = gr.HTML(label="", elem_classes="ccog-container")
  
-            
-
-
     with gr.Row():
         with gr.Column():
             gr.Markdown("### ESCO Mapping")
@@ -1528,21 +1686,13 @@ progress::-webkit-progress-value {
     
     with gr.Row():        
         with gr.Column():
-            esco_skills_output = (
-                                value="",
-                                label="",
-                                elem_classes=["skills-container"]
-                            )
-
-
+            esco_skills_output = gr.HTML(label="", 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():
             download_btn = gr.Button(