Update app.py

app.py

@@ -617,6 +617,44 @@ def _extract_json(raw: str) -> str:
     json_text = json_text.strip()
     return json_text
 
+# ================= Format Skills Visualisation =================
+def format_skill_cards(skills_data):
+    if not skills_data:
+        return "No skills data available"
+    
+    cards = []
+    for skill in skills_data:
+        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>
+            <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>
+            </div>
+        </div>
+        """
+        cards.append(card)
+    
+    return f"<div class='skills-container'>{''.join(cards)}</div>"
+
+def get_progress_value(level):
+    level_map = {"basic": 1, "intermediate": 2, "advanced": 3}
+    return str(level_map.get(level.lower(), 1))
+
+
 # ================= Process Analysis =================
 from concurrent.futures import ThreadPoolExecutor
 
@@ -700,6 +738,9 @@ def process_pdf(file):
             for skill in skills
         ]
 
+        # 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}
@@ -835,6 +876,8 @@ def generate_word_document(
         log_debug(f"Error building result dictionary: {str(e)}")
         result = default_values
 
+
+    
     # ================= DOCUMENT CONTENT GENERATION =================
     try:
         # Document header
@@ -1131,6 +1174,105 @@ label {
 .btn-primary:active {
     transform: translateY(0) !important;
 }
+
+/* Intro */
+.intro-box {
+        background: #f0f7ff;
+        border-left: 4px solid #0033A0;
+        border-radius: 4px;
+        padding: 16px;
+        margin-bottom: 20px;
+}
+.intro-title {
+        color: #0033A0;
+        font-weight: 600;
+        margin-top: 0 !important;
+}
+.intro-icon {
+        color: #0033A0;
+        margin-right: 8px;
+}
+.benefits-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        gap: 12px;
+        margin: 16px 0;
+}
+.benefit-card {
+        background: white;
+        padding: 12px;
+        border-radius: 8px;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+/* Skills Card */
+.skills-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    gap: 1rem;
+    padding: 1rem;
+}
+
+.skill-card {
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    overflow: hidden;
+    transition: transform 0.2s;
+}
+
+.skill-card:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+
+.skill-header {
+    background: #0033A0;
+    color: white;
+    padding: 1rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-items: center;
+}
+
+.skill-header h3 {
+    margin: 0;
+    flex-grow: 1;
+    font-size: 1.1rem;
+}
+
+.skill-pill {
+    padding: 0.25rem 0.5rem;
+    border-radius: 999px;
+    font-size: 0.8rem;
+    font-weight: bold;
+}
+
+.skill-pill.skill { background: #4CAF50; }
+.skill-pill.knowledge { background: #2196F3; }
+.skill-pill.essential { background: #F44336; }
+.skill-pill.optional { background: #FF9800; }
+
+.skill-body {
+    padding: 1rem;
+}
+
+.skill-meta {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid #eee;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+progress {
+    width: 100%;
+    height: 6px;
+    margin-top: 0.25rem;
+}
+
 /* Output Markdown */
 .gr-markdown {
     background: #f9f9f9;
@@ -1181,6 +1323,36 @@ label {
                     <p>Use AI to standardise an initial draft position description and identify related Job Family, Occupation, Qualification, match Skills and suggest interview questions.</p>
                 </div>
                 """)
+    # Introduction Section
+    with gr.Column(elem_classes="intro-box"):
+        gr.Markdown("""
+        <h2 class='intro-title'><span class='intro-icon'>📊</span>Standardizing Talent Management with AI</h2>
+        <p>This tool transforms position descriptions into standardized job profiles using international classification frameworks.</p>
+        
+        <div class='benefits-grid'>
+            <div class='benefit-card'>
+                <strong>🔍 Consistent Roles</strong>
+                <p>Aligns with ESCO/CCOG standards automatically</p>
+            </div>
+            <div class='benefit-card'>
+                <strong>⏱️ Time Saver</strong>
+                <p>Reduces hours of manual research to minutes</p>
+            </div>
+            <div class='benefit-card'>
+                <strong>⚖️ Reduced Bias</strong>
+                <p>Data-driven skills recommendations</p>
+            </div>
+            <div class='benefit-card'>
+                <strong>🎯 Better Hiring</strong>
+                <p>Generates tailored interview questions</p>
+            </div>
+        </div>
+        
+        <div style="background: #e6f2ff; padding: 12px; border-radius: 4px;">
+            <strong>💡 How it works:</strong> Upload a PD PDF to get automated classification, 
+            skills mapping, and interview questions.
+        </div>
+        """)
                 
     with gr.Row():
         with gr.Column():