feat: Add job description option and skills evaluation

app.py

@@ -4,7 +4,7 @@ import gradio as gr
 from gradio import ChatMessage
 
 from src.constants import FULL_QUESTIONS, DEFAULT_GRADING_SYSTEM_DF, CUSTOM_CSS
-from src.utils import generate_session_id, highlight_feedback, show_popup, reset_popup
+from src.utils import generate_session_id, highlight_feedback, show_popup, reset_popup, generate_skills_evaluation_markdown
 from src.api_calls import chatbot_api_call, feedback_api_call, ideal_answer_api_call, conversation_feedback_api_call
 
 session_id = generate_session_id()
@@ -116,6 +116,7 @@ def reset_interface(conversation_mode):
     grading_system_df = gr.update(value=DEFAULT_GRADING_SYSTEM_DF, label="Insights")
     include_company_name = gr.update(interactive=True, value=False)
     include_resume_text = gr.update(interactive=True, value=False)
+    include_job_description = gr.update(interactive=True, value=True)
 
     history = [
         ChatMessage(
@@ -125,7 +126,7 @@ def reset_interface(conversation_mode):
         ChatMessage(
             role="assistant",
             content=chatbot_greeting_message,
-        ),
+        )
     ]
 
     return (
@@ -138,7 +139,8 @@ def reset_interface(conversation_mode):
         feedback_type_state,
         grading_system_df,
         include_company_name,
-        include_resume_text
+        include_resume_text,
+        include_job_description
     )
 
 # Gradio interface
@@ -148,12 +150,18 @@ def create_demo():
 
         gr.Markdown("""### Please select a conversation mode to begin""")
 
-        with gr.Row():
+        with gr.Row(equal_height=True):
             with gr.Column(scale=6):
-                conversation_mode = gr.Radio(choices=["Interviewer", "Coach"], label="""Choose "Interviewer" to simulate a real interview or "Coach" for guidance and feedback""", value=None)
+                conversation_mode = gr.Radio(
+                    choices=["Interviewer", "Coach"], 
+                    label="""Choose "Interviewer" to simulate a real interview or "Coach" for guidance and feedback""", 
+                    info=""">**Important note:**\n>This has been *hardcoded* for a **Senior Product Manager** role""", 
+                    value=None
+                )
 
-            with gr.Column(scale=2):
+            with gr.Column(scale=2, variant="panel"):
                 include_company_name = gr.Checkbox(label="Include the company name in the request", value=False, interactive=False)
+                include_job_description = gr.Checkbox(label="Include the job description in the request", value=True, interactive=False)
                 include_resume_text = gr.Checkbox(label="Include the candidate's resume in the request", value=False, interactive=False)
 
         conversation_turns_limit = gr.Slider(minimum=1, maximum=20, step=1, label="Choose the number of exchanges (turns) between you and the AI agent (1 min, 20 max)", value=5, interactive=False)
@@ -196,7 +204,7 @@ def create_demo():
 
         question_dropdown.change(fn=handle_question_change, inputs=[chatbot, question_dropdown, conversation_mode], outputs=[chatbot, send_btn, msg, chatbot, feedback_box, grading_system_df])
 
-        def respond(message, history, conversation_mode, selected_question, conversation_turns_limit, feedback_type, include_company_name, include_resume_text):
+        def respond(message, history, conversation_mode, selected_question, conversation_turns_limit, feedback_type, include_company_name, include_resume_text, include_job_description):
             global session_id, current_turns, interview_data_with_feedback
 
             feedback_value = None
@@ -230,14 +238,13 @@ def create_demo():
 
             if conversation_end_flag:
                 if conversation_mode == 'Interviewer':
-                    feedback_output = conversation_feedback_api_call(chat_memory['messages'], feedback_type.lower(), include_resume_text, include_job_description="")
-
-                    print(feedback_output)
+                    feedback_output = conversation_feedback_api_call(chat_memory['messages'], feedback_type.lower(), include_resume_text, include_job_description)
                     
                     feedback_show_legend, highlighted_feedback = highlight_feedback(feedback_output)
                     feedback_value = [("Whole conversation feedback\n\n", None)] + highlighted_feedback
 
                     criteria_feedback_data = feedback_output["criteria_feedback"]
+                    skills_evaluation_data = feedback_output["skills_evaluation"]
 
                     if criteria_feedback_data:
                         criteria_feedback_df = pd.DataFrame(criteria_feedback_data)
@@ -247,6 +254,15 @@ def create_demo():
                             "evaluation": "Evaluation"
                         }, inplace=True)
 
+                    if skills_evaluation_data:
+                        skills_evaluation = generate_skills_evaluation_markdown(skills_evaluation_data)
+
+                        history.append(ChatMessage(
+                            role="assistant",
+                            content=skills_evaluation,
+                            metadata={"title": "🛠️ Skills evaluation"}
+                        ))
+                        
                     print()
                     print(feedback_output)
                     print()
@@ -299,11 +315,13 @@ def create_demo():
                 ideal_answer = ideal_answer_api_call(interview_data_with_feedback, feedback_type.lower(), include_resume_text)
                 cleaned_ideal_answer = ideal_answer.replace("\\n", " ")
 
+                cleaned_ideal_answer_html = f"""<p style="text-align: left; font-size: 14px;">{cleaned_ideal_answer}</p>"""
+
                 print(cleaned_ideal_answer)
 
                 history.append(ChatMessage(
                     role="assistant",
-                    content=cleaned_ideal_answer,
+                    content=cleaned_ideal_answer_html,
                     metadata={"title": "💡 Ideal answer"}
                 ))
 
@@ -319,20 +337,25 @@ def create_demo():
                 gr.update(value=criteria_feedback_df, label="Insights")
             )
 
-        conversation_mode.change(fn=reset_interface, inputs=conversation_mode, outputs=[chatbot, question_dropdown, msg, send_btn, conversation_turns_limit, feedback_box, feedback_type_dropdown, grading_system_df, include_company_name, include_resume_text])
+        conversation_mode.change(fn=reset_interface, inputs=conversation_mode, outputs=[chatbot, question_dropdown, msg, send_btn, conversation_turns_limit, feedback_box, feedback_type_dropdown, grading_system_df, include_company_name, include_resume_text, include_job_description])
 
-        msg.submit(fn=respond, inputs=[msg, chatbot, conversation_mode, question_dropdown, conversation_turns_limit, feedback_type_dropdown, include_company_name, include_resume_text], outputs=[chatbot, msg, send_btn, msg, chatbot, feedback_box, grading_system_df])
-        send_btn.click(fn=respond, inputs=[msg, chatbot, conversation_mode, question_dropdown, conversation_turns_limit, feedback_type_dropdown, include_company_name, include_resume_text], outputs=[chatbot, msg, send_btn, msg, chatbot, feedback_box, grading_system_df])
+        msg.submit(fn=respond, inputs=[msg, chatbot, conversation_mode, question_dropdown, conversation_turns_limit, feedback_type_dropdown, include_company_name, include_resume_text, include_job_description], outputs=[chatbot, msg, send_btn, msg, chatbot, feedback_box, grading_system_df])
+        send_btn.click(fn=respond, inputs=[msg, chatbot, conversation_mode, question_dropdown, conversation_turns_limit, feedback_type_dropdown, include_company_name, include_resume_text, include_job_description], outputs=[chatbot, msg, send_btn, msg, chatbot, feedback_box, grading_system_df])
 
         popup = gr.HTML(label="Popup", elem_classes=["popup"])  
     
         include_company_name.change(
-            fn=lambda selected: show_popup(False, selected) if selected else reset_popup(),
+            fn=lambda selected: show_popup(False, selected, False) if selected else reset_popup(),
             inputs=include_company_name,
             outputs=popup
         )
+        include_job_description.change(
+            fn=lambda selected: show_popup(False, False, selected) if selected else reset_popup(),
+            inputs=include_job_description,
+            outputs=popup
+        )
         include_resume_text.change(
-            fn=lambda selected: show_popup(selected, False) if selected else reset_popup(),
+            fn=lambda selected: show_popup(selected, False, False) if selected else reset_popup(),
             inputs=include_resume_text,
             outputs=popup
         )

src/utils.py

@@ -37,14 +37,14 @@ def highlight_feedback(feedback_output):
         return False, [(str(feedback_output["feedback_text"]), None)]
     return True, [(item["text"], item["category"]) for item in feedback_output["feedback_by_category"]]
 
-def show_popup(selected_resume, selected_company):
+def show_popup(selected_resume, selected_company, selected_job_description):
     if selected_resume:
         return """<div id="popup-resume" style="position: fixed; top: 30%; left: 50%; transform: translate(-50%, -50%);
                     background-color: #fffaf0; border: 2px solid #ffa500; padding: 20px; 
                     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); border-radius: 10px; z-index: 1000; 
                     color: #ff6700; font-family: Arial, sans-serif; text-align: center;">
                     <p><strong>Notice:</strong> You selected the option to include the candidate's resume.</p>
-                    <p><a href='https://huggingface.co/spaces/multimodalai/talent-interview-prep/blob/main/resources/Senior_Product_Manager_Resume.txt'
+                    <p><a href='https://huggingface.co/spaces/multimodalai/talent-interview-prep/resolve/main/resources/Senior_Product_Manager_Resume.txt'
                           style='color: #ff6700; text-decoration: none; font-weight: bold;' target="_blank">
                         Click here to view the resume</a></p>
                     <button onclick="document.getElementById('popup-resume').remove();"
@@ -54,7 +54,7 @@ def show_popup(selected_resume, selected_company):
                     </button>
                   </div>"""
     elif selected_company:
-        return f"""<div id="popup-company" style="position: fixed; top: 30%; left: 50%; transform: translate(-50%, -50%);
+        return """<div id="popup-company" style="position: fixed; top: 30%; left: 50%; transform: translate(-50%, -50%);
                     background-color: #fffaf0; border: 2px solid #ffa500; padding: 20px; 
                     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); border-radius: 10px; z-index: 1000; 
                     color: #ff6700; font-family: Arial, sans-serif; text-align: center;">
@@ -66,7 +66,72 @@ def show_popup(selected_resume, selected_company):
                         Close
                     </button>
                   </div>"""
+    elif selected_job_description:
+        return """<div id="popup-job-desc" style="position: fixed; top: 30%; left: 50%; transform: translate(-50%, -50%);
+                    background-color: #fffaf0; border: 2px solid #ffa500; padding: 20px; 
+                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); border-radius: 10px; z-index: 1000; 
+                    color: #ff6700; font-family: Arial, sans-serif; text-align: center;">
+                    <p><strong>Notice:</strong> You selected the option to include the job description.</p>
+                    <p><a href='https://huggingface.co/spaces/multimodalai/talent-interview-prep/resolve/main/resources/Senior_Product_Manager_Job_Description.txt'
+                          style='color: #ff6700; text-decoration: none; font-weight: bold;' target="_blank">
+                        Click here to view the job description</a></p>
+                    <button onclick="document.getElementById('popup-job-desc').remove();"
+                            style="background-color: #ff6700; color: white; border: none; 
+                            padding: 5px 10px; border-radius: 5px; cursor: pointer;">
+                        Close
+                    </button>
+                  </div>"""
     return ""
 
 def reset_popup():
-    return ""
+    return ""
+
+def generate_skills_evaluation_markdown(skills_data):
+    job_skills = skills_data["job_skills"]
+    candidate_skills = skills_data["candidate_skills"]["proven_skills"]
+    unproven_skills = skills_data["candidate_skills"]["mentioned_but_unproven_skills"]
+    missing_skills = skills_data["candidate_skills"]["missing_skills"]
+
+    total_job_skills = len(job_skills)
+    proven_skills_count = len(candidate_skills)
+    unproven_skills_count = len(unproven_skills)
+    missing_skills_count = len(missing_skills)
+
+    html = "<div style='text-align: left; font-size: 20px;'>"
+    html += (
+        f"<p>The job requires <strong>{total_job_skills} skills</strong>, and the candidate has <strong>{proven_skills_count} proven skills</strong>. "
+        f"There are <strong>{unproven_skills_count} unproven skills</strong> and <strong>{missing_skills_count} missing skills</strong>.</p><br>"
+    )
+    html += "<ul style='font-size: 20px;'>"
+
+    if total_job_skills > 0:
+        html += f"<strong>Job skills ({total_job_skills}):</strong><ol style='font-size: 18px;'>"
+        for skill in job_skills:
+            html += f"<li> <strong>{skill['name']}</strong> - {skill['description']}</li>"
+        html += "</ol>"
+
+    if proven_skills_count > 0:
+        html += f"<strong>Candidate skills ({proven_skills_count} out of {total_job_skills}):</strong><ol style='font-size: 18px;'>"
+        for skill in candidate_skills:
+            html += (f"<li><strong>{skill['name']}</strong><br>"
+                     f"   <em>Example:</em> {skill['example']}<br>"
+                     f"   <em>Metrics:</em> {skill['metrics']}</li>")
+        html += "</ol>"
+
+    if unproven_skills_count > 0:
+        html += "<strong>Mentioned but unproven skills:</strong>"
+        html += "<ol style='font-size: 18px;'>"
+        for skill in unproven_skills:
+            html += f"<li><strong>{skill['name']}</strong> - {skill['reason']}</li>"
+        html += "</ol>"
+
+    if missing_skills_count > 0:
+        html += "<strong>Missing skills:</strong>"
+        html += "<ol style='font-size: 18px;'>"
+        for skill in missing_skills:
+            html += f"<li><strong>{skill['name']}</strong> - {skill['reason']}</li>"
+        html += "</ol>"
+
+    html += "</ul></div>"
+
+    return html