Update app.py

app.py

@@ -619,29 +619,66 @@ def _extract_json(raw: str) -> str:
 
 # ================= Format Skills Visualisation =================
 def format_skill_cards(skills_data):
-    if not skills_data:
-        return "No skills data available"
+    if not skills_data or not isinstance(skills_data, list):
+        return "<div class='skills-container'><p>No skills data available</p></div>"
     
     cards = []
     for skill in skills_data:
+        if not isinstance(skill, dict):
+            continue
+            
+        # Safely get all fields with fallbacks
+        skill_name = skill.get('skill_name', 'Unnamed Skill')
+        skill_code = skill.get('skill_code', 'N/A')
+        description = skill.get('skill_description', 'No description available')
+        skill_type = skill.get('type', '').capitalize()
+        importance = skill.get('importance', '').capitalize()
+        proficiency = skill.get('proficiency_level', '').capitalize()
+        distinctive = skill.get('distinctive_elements', 'Not specified')
+        resume_signals = skill.get('resume_signals', 'Not specified')
+        assessment = skill.get('assessment_method', 'Not specified')
+
         card = f"""
         <div class='skill-card'>
             <div class='skill-header'>
-                <h3>{skill.get('skill_name', 'Unnamed Skill')}</h3>
-                <div class='skill-pill {skill.get("type", "").lower()}'>{skill.get("type", "").capitalize()}</div>
-                <div class='skill-pill {skill.get("importance", "").lower()}'>{skill.get("importance", "").capitalize()}</div>
+                <div class='skill-title'>
+                    <h3>{skill_name}</h3>
+                    <span class='skill-code'>Code: {skill_code}</span>
+                </div>
+                <div class='skill-pills'>
+                    <span class='skill-pill type-{skill.get("type", "").lower()}'>{skill_type}</span>
+                    <span class='skill-pill importance-{skill.get("importance", "").lower()}'>{importance}</span>
+                </div>
             </div>
+            
             <div class='skill-body'>
-                <p><strong>Description:</strong> {skill.get('skill_description', '')}</p>
-                <div class='skill-meta'>
-                    <span class='proficiency'>
-                        <strong>Level:</strong> 
-                        <progress value={get_progress_value(skill.get("proficiency_level"))} max="3"></progress>
-                        {skill.get("proficiency_level", "").capitalize()}
-                    </span>
-                    <span class='assessment'>
-                        <strong>Assessment:</strong> {skill.get("assessment_method", "")}
-                    </span>
+                <div class='skill-description'>
+                    <p>{description}</p>
+                </div>
+                
+                <div class='skill-details'>
+                    <div class='detail-group'>
+                        <label>Proficiency Level:</label>
+                        <div class='proficiency-bar'>
+                            <progress value={get_progress_value(skill.get("proficiency_level"))} max="3"></progress>
+                            <span>{proficiency}</span>
+                        </div>
+                    </div>
+                    
+                    <div class='detail-group'>
+                        <label>Distinctive Elements:</label>
+                        <p class='detail-content'>{distinctive}</p>
+                    </div>
+                    
+                    <div class='detail-group'>
+                        <label>Resume Signals:</label>
+                        <p class='detail-content'>{resume_signals}</p>
+                    </div>
+                    
+                    <div class='detail-group'>
+                        <label>Assessment Method:</label>
+                        <p class='detail-content'>{assessment}</p>
+                    </div>
                 </div>
             </div>
         </div>
@@ -741,6 +778,7 @@ def process_pdf(file):
         # Format skills before returning
         formatted_skills = format_skill_cards(joined_skills)
         
+        
         joined_skills_esco = []
         if has_esco and skill_esco_extract:
             assessment_esco_lookup = {item['skill_name']: item for item in skill_esco_map}
@@ -753,7 +791,7 @@ def process_pdf(file):
                 }
                 for skill in skill_esco_extract
             ]
-
+        
         interview = build_interview(responsibilities, skills)
 
         # Prepare the results for each output component
@@ -773,6 +811,8 @@ def process_pdf(file):
                            for i in range(1, 6) for field in ["code", "name", "desc"]}
             esco_skills = None
 
+        formatted_esco_skills = format_skill_cards(esco_skills)
+        
         debug_message = "Processing completed successfully."
         return (
             os.path.basename(file.name),
@@ -784,7 +824,8 @@ def process_pdf(file):
             #joined_skills,
             formatted_skills,
             esco_levels,
-            esco_skills,
+            #esco_skills,
+            formatted_esco_skills
             debug_message if DEBUG else None
         )
 
@@ -1209,69 +1250,147 @@ label {
 /* Skills Card */
 .skills-container {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
-    gap: 1rem;
+    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
+    gap: 1.5rem;
     padding: 1rem;
 }
 
+/* Card styling */
 .skill-card {
     background: white;
     border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
     overflow: hidden;
-    transition: transform 0.2s;
+    transition: all 0.3s ease;
+    border: 1px solid #e0e0e0;
 }
 
 .skill-card:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    transform: translateY(-5px);
+    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
 }
 
+/* Header section */
 .skill-header {
     background: #0033A0;
     color: white;
-    padding: 1rem;
+    padding: 1.2rem;
     display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
+    flex-direction: column;
+    gap: 0.8rem;
+}
+
+.skill-title {
+    display: flex;
+    justify-content: space-between;
     align-items: center;
 }
 
-.skill-header h3 {
+.skill-title h3 {
     margin: 0;
-    flex-grow: 1;
-    font-size: 1.1rem;
+    font-size: 1.2rem;
+    font-weight: 600;
 }
 
-.skill-pill {
+.skill-code {
+    font-size: 0.85rem;
+    opacity: 0.8;
+    background: rgba(255,255,255,0.15);
     padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+}
+
+.skill-pills {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+
+.skill-pill {
+    padding: 0.35rem 0.7rem;
     border-radius: 999px;
     font-size: 0.8rem;
-    font-weight: bold;
+    font-weight: 500;
 }
 
-.skill-pill.skill { background: #4CAF50; }
-.skill-pill.knowledge { background: #2196F3; }
-.skill-pill.essential { background: #F44336; }
-.skill-pill.optional { background: #FF9800; }
+/* Type and Importance pills */
+.skill-pill.type-skill { background: #4CAF50; color: white; }
+.skill-pill.type-knowledge { background: #2196F3; color: white; }
+.skill-pill.importance-essential { background: #F44336; color: white; }
+.skill-pill.importance-optional { background: #FF9800; color: white; }
 
+/* Body section */
 .skill-body {
-    padding: 1rem;
+    padding: 1.2rem;
+}
+
+.skill-description {
+    margin-bottom: 1.2rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px dashed #eee;
 }
 
-.skill-meta {
-    margin-top: 1rem;
-    padding-top: 1rem;
-    border-top: 1px solid #eee;
+.skill-description p {
+    margin: 0;
+    color: #555;
+    line-height: 1.5;
+}
+
+/* Details sections */
+.skill-details {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
+    gap: 1rem;
+}
+
+.detail-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+}
+
+.detail-group label {
+    font-weight: 600;
+    font-size: 0.9rem;
+    color: #0033A0;
+}
+
+.detail-content {
+    margin: 0;
+    font-size: 0.95rem;
+    color: #444;
+    line-height: 1.5;
+}
+
+/* Proficiency bar */
+.proficiency-bar {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    margin-top: 0.3rem;
 }
 
 progress {
-    width: 100%;
-    height: 6px;
-    margin-top: 0.25rem;
+    flex-grow: 1;
+    height: 8px;
+    border-radius: 4px;
+}
+
+progress::-webkit-progress-bar {
+    background-color: #f0f0f0;
+    border-radius: 4px;
+}
+
+progress::-webkit-progress-value {
+    background-color: #0033A0;
+    border-radius: 4px;
+}
+
+.proficiency-bar span {
+    font-size: 0.9rem;
+    font-weight: 500;
+    min-width: 80px;
+    text-align: right;
 }
 
 /* Output Markdown */
@@ -1299,6 +1418,20 @@ progress {
         margin-right: 0 !important;
         margin-bottom: 1rem !important;
     }
+    
+    .skills-container {
+        grid-template-columns: 1fr;
+    }
+    
+    .skill-header {
+        flex-direction: column;
+    }
+    
+    .skill-title {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+    }
 }
     """,
     head='''
@@ -1364,7 +1497,10 @@ progress {
     with gr.Row():
         with gr.Column():
             gr.Markdown("### Mapped Skills")            
-            skills_output = gr.HTML(label="Related identified Skills")
+            skills_output = gr.HTML(
+                                elem_classes="skills-container",
+                                label=""
+                            )
 
     with gr.Row():
         with gr.Column():
@@ -1391,7 +1527,10 @@ progress {
     
     with gr.Row():        
         with gr.Column():
-            esco_skills_output = gr.Textbox(label="Mapped ESCO Skills linked to this Occupation Group")
+            esco_skills_output = (
+                                elem_classes="skills-container",
+                                label=""
+                            )