feat: Enhance chat interface with grading system and detailed feedback

app.py

@@ -1,7 +1,10 @@
+import pandas as pd
+
 import gradio as gr
+from gradio import ChatMessage
 
-from src.constants import FULL_QUESTIONS
-from src.utils import remove_html_tags, generate_session_id
+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.api_calls import chatbot_api_call, feedback_api_call, ideal_answer_api_call, conversation_feedback_api_call
 
 session_id = generate_session_id()
@@ -25,12 +28,13 @@ def handle_question_change(history, selected_question, conversation_mode):
     if conversation_mode == 'Interviewer':
         updated_label = f"Conversation turns: {current_turns}"
         feedback_box = gr.update(value=None)
-        
     else:
         updated_label = "Multimodal Coach Agent"
         feedback_box = gr.update(value=None, show_legend=False)
+        
+    grading_system_df = gr.update(value=DEFAULT_GRADING_SYSTEM_DF, label="Insights")
 
-    if len(history) > 1:
+    if len(history) > 2:
         first_question_selected = True
     
     if first_question_selected:
@@ -38,16 +42,39 @@ def handle_question_change(history, selected_question, conversation_mode):
 
         transition_message = f"Alright, let's move on to the next question:\n\n{selected_question}"
 
-        return [("I'm ready for the next question now.", transition_message)], gr.update(interactive=False), gr.update(interactive=True), gr.update(label=updated_label), feedback_box
+        new_history = [
+            ChatMessage(
+                role="user",
+                content="I'm ready for the next question now.",
+            ),
+            ChatMessage(
+                role="assistant",
+                content=transition_message,
+            ),
+        ]
+
+        return new_history, gr.update(interactive=False), gr.update(interactive=True), gr.update(label=updated_label), feedback_box, grading_system_df
     else:
         if selected_question:
             last_question = f"Great start! Here's your first question:\n\n{selected_question}"
         else:
             last_question = selected_question
 
-        new_history = history + [("One moment...", last_question)]
+        if last_question != None:
+            history.append(
+                {
+                    "role": "user",
+                    "content": "One moment...",
+                }
+            )
+            history.append(
+                {
+                    "role": "assistant",
+                    "content": last_question,
+                }
+            )
 
-        return [entry for entry in new_history if entry[1] is not None], gr.update(interactive=False), gr.update(interactive=True), gr.update(label=updated_label), feedback_box
+        return [entry for entry in history if entry["content"] is not None], gr.update(interactive=False), gr.update(interactive=True), gr.update(label=updated_label), feedback_box, grading_system_df
 
 def reset_interface(conversation_mode):
     global session_id, first_question_selected, current_turns, interview_data_with_feedback
@@ -86,24 +113,37 @@ def reset_interface(conversation_mode):
         feedback_box = gr.update(value=None, show_legend=False)
         feedback_type_state = gr.update(interactive=False, value=" ")
 
+    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)
+
+    history = [
+        ChatMessage(
+            role="user",
+            content=user_greeting_message,
+        ),
+        ChatMessage(
+            role="assistant",
+            content=chatbot_greeting_message,
+        ),
+    ]
+
     return (
-        gr.update(value=[(user_greeting_message, chatbot_greeting_message)], label=chatbot_label),  
+        gr.update(value=history, label=chatbot_label),  
         gr.update(choices=FULL_QUESTIONS, value=None, label="Choose an interview question (Required)", interactive=True), 
         "",  
         gr.update(value="Send", interactive=False),
         slider_state,
         feedback_box,
-        feedback_type_state
+        feedback_type_state,
+        grading_system_df,
+        include_company_name,
+        include_resume_text
     )
 
-def highlight_feedback(feedback_output):
-    if not feedback_output["feedback_by_category"]:
-        return False, [(feedback_output["feedback_text"], None)]
-    return True, [(item["text"], item["category"]) for item in feedback_output["feedback_by_category"]]
-
 # Gradio interface
 def create_demo():
-    with gr.Blocks() as demo:
+    with gr.Blocks(css=CUSTOM_CSS) as demo:
         gr.Markdown("# Talent Interview Prep - Conversational Model")
 
         gr.Markdown("""### Please select a conversation mode to begin""")
@@ -113,8 +153,8 @@ def create_demo():
                 conversation_mode = gr.Radio(choices=["Interviewer", "Coach"], label="""Choose "Interviewer" to simulate a real interview or "Coach" for guidance and feedback""", value=None)
 
             with gr.Column(scale=2):
-                include_company_name = gr.Checkbox(label="Include the company name in the request", value=False)
-                include_resume_text = gr.Checkbox(label="Include the candidate resume in the request", value=False)
+                include_company_name = gr.Checkbox(label="Include the company name in the request", value=False, 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)
 
@@ -131,28 +171,37 @@ def create_demo():
                     allow_custom_value=True
                 )
     
-        chatbot = gr.Chatbot(label="""The Multimodal Chatbot will be ready once you select a mode""")
-        # feedback_box = gr.Textbox(label="Conversation feedback", placeholder="Feedback for each conversation turn, as well as an overall feedback for the entire conversation, will be displayed here", interactive=False)
+        chatbot = gr.Chatbot(type="messages", label="""The Multimodal Chatbot will be ready once you select a mode""", show_copy_button=True)
+
+        with gr.Row(equal_height=True):
+            with gr.Column(scale=10):
+                msg = gr.Textbox(label="Type your answer here")
+            with gr.Column(min_width=50):
+                send_btn = gr.Button(value="Send\n", variant="primary", interactive=False, elem_id="fill-button")
+
+        gr.Markdown(" ")
+        gr.Markdown("---")
+        gr.Markdown("## Conversation Feedback", )
 
         feedback_box = gr.HighlightedText(
-            label="Conversation feedback",
+            label="Breakdown",
             show_legend=True,
             color_map={"Strength": "green", "Area for Improvement": "orange", "Action Item": "blue"}
         )
 
-        msg = gr.Textbox(label="Type your answer here")
-        send_btn = gr.Button(value="Send", variant="primary", interactive=False)  
+        grading_system_df = gr.DataFrame(value=DEFAULT_GRADING_SYSTEM_DF, interactive=False, label="Insights", max_height=200, min_width=25)
 
         msg.change(fn=enable_send_button, inputs=[msg, question_dropdown], outputs=[send_btn, question_dropdown])
         question_dropdown.change(fn=enable_send_button, inputs=[msg, question_dropdown], outputs=[send_btn, question_dropdown])
 
-        question_dropdown.change(fn=handle_question_change, inputs=[chatbot, question_dropdown, conversation_mode], outputs=[chatbot, send_btn, msg, chatbot, feedback_box])
+        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):
             global session_id, current_turns, interview_data_with_feedback
 
             feedback_value = None
             feedback_show_legend = False
+            criteria_feedback_df = DEFAULT_GRADING_SYSTEM_DF
 
             if not message.strip():  
                 return history, message  
@@ -166,6 +215,19 @@ def create_demo():
 
             updated_label = f"Conversation turns: {current_turns}" if conversation_mode == 'Interviewer' else "Multimodal Coach Agent"
 
+            history.append(
+                ChatMessage(
+                    role="user",
+                    content=message,
+                )
+            )
+            history.append(
+                ChatMessage(
+                    role="assistant",
+                    content=bot_message,
+                )
+            )
+
             if conversation_end_flag:
                 if conversation_mode == 'Interviewer':
                     feedback_output = conversation_feedback_api_call(chat_memory['messages'], feedback_type.lower(), include_resume_text)
@@ -173,17 +235,30 @@ def create_demo():
                     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"]
+
+                    if criteria_feedback_data:
+                        criteria_feedback_df = pd.DataFrame(criteria_feedback_data)
+
+                        criteria_feedback_df.rename(columns={
+                            "question_criteria": "Question criteria",
+                            "evaluation": "Evaluation"
+                        }, inplace=True)
+
                     print()
                     print(feedback_output)
                     print()
                     print(highlighted_feedback)
+                    print()
+                    print(criteria_feedback_df)
                 return (
-                    history + [(message, bot_message)],
+                    history,
                     "",
                     gr.update(interactive=False),
                     gr.update(interactive=False),
                     gr.update(label=updated_label),
-                    gr.update(value=feedback_value, show_legend=feedback_show_legend)
+                    gr.update(value=feedback_value, show_legend=feedback_show_legend),
+                    gr.update(value=criteria_feedback_df, label="Insights")
                 )
 
             if conversation_mode == 'Interviewer':
@@ -196,12 +271,23 @@ def create_demo():
                 feedback_show_legend, highlighted_feedback = highlight_feedback(feedback_output)
                 feedback_value = [(f"{current_turns}º conversation turn feedback\n\n", None)] + highlighted_feedback
 
+                criteria_feedback_data = feedback_output["criteria_feedback"]
+                
+                if criteria_feedback_data:
+                    criteria_feedback_df = pd.DataFrame(criteria_feedback_data)
+
+                    criteria_feedback_df.rename(columns={
+                        "question_criteria": "Question criteria",
+                        "evaluation": "Evaluation"
+                    }, inplace=True)
+
                 print()
                 print(feedback_output)
                 print()
                 print(highlighted_feedback)
-
-                # feedback = f"{current_turns}º conversation turn feedback\n\n{remove_html_tags(feedback_output).strip()}"
+                print()
+                print(criteria_feedback_df)
+                print()
                 
                 interview_data_with_feedback.extend(interview_data)
                 interview_data_with_feedback.append({"type": "feedback", "content": feedback_output["feedback_text"]})
@@ -209,29 +295,45 @@ def create_demo():
                 print(f"{interview_data_with_feedback=}\n")
                 
                 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 = ideal_answer.replace("\\n", " ")
 
                 print(cleaned_ideal_answer)
 
-                bot_message += f"\n\n---"
-                bot_message += f"\n**Ideal answer:**"
-                bot_message += f"\n>{cleaned_ideal_answer}"
+                history.append(ChatMessage(
+                    role="assistant",
+                    content=cleaned_ideal_answer,
+                    metadata={"title": "💡 Ideal answer"},
+                ))
 
             updated_label = f"Conversation turns: {current_turns}" if conversation_mode == 'Interviewer' else "Multimodal Coach Agent"
 
             return (
-                history + [(message, bot_message)],
+                history,
                 "",
                 gr.update(interactive=True),
                 gr.update(interactive=True),
                 gr.update(label=updated_label),
-                gr.update(value=feedback_value, show_legend=feedback_show_legend)
+                gr.update(value=feedback_value, show_legend=feedback_show_legend),
+                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])
+        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])
+
+        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], outputs=[chatbot, msg, send_btn, msg, chatbot, feedback_box])
-        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])
+        popup = gr.HTML(label="Popup", elem_classes=["popup"])  
+    
+        include_company_name.change(
+            fn=lambda selected: show_popup(False, selected) if selected else reset_popup(),
+            inputs=include_company_name,
+            outputs=popup
+        )
+        include_resume_text.change(
+            fn=lambda selected: show_popup(selected, False) if selected else reset_popup(),
+            inputs=include_resume_text,
+            outputs=popup
+        )
 
     return demo