Update app.py

app.py

@@ -228,30 +228,102 @@ def simulate(prompt, selected_event, selected_persona_file, ai_mode,
         })
         state_history.append(updated_state.copy())
 
-        # Conversation display (now uses Interlocutor)
+        # Conversation display with modern styling
         conversation_display = ""
         for i, turn in enumerate(conversation_history, 1):
-            conversation_display += f"**Turn {i}**\n"
+            # Turn number with gradient badge
+            conversation_display += f"""
+<div style='background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white; padding: 0.5rem 1rem; border-radius: 8px; display: inline-block;
+            margin-bottom: 0.5rem; font-weight: 600; font-size: 0.9rem;'>
+    Turn {i}
+</div>\n\n"""
+
+            # Scenario context if present
             if 'scenario' in turn:
-                conversation_display += f"*[Scenario: {turn['scenario']}]*\n"
-            conversation_display += f"**Interviewer:** {turn['student']}\n\n"
-            conversation_display += f"**{persona['persona_name']}:** {turn['client']}\n\n"
-            conversation_display += "---\n\n"
+                conversation_display += f"""
+<div style='background: #f8f9fa; border-left: 4px solid #f5576c; padding: 0.5rem 1rem;
+            margin-bottom: 1rem; border-radius: 4px; color: #495057; font-style: italic;'>
+    📖 Scene: {turn['scenario']}
+</div>\n\n"""
+
+            # Student question with modern styling
+            conversation_display += f"""
+<div style='background: #e8eaf6; border-radius: 12px; padding: 1rem;
+            margin-bottom: 0.8rem; border-left: 4px solid #667eea;'>
+    <div style='color: #667eea; font-weight: 700; margin-bottom: 0.3rem; font-size: 0.9rem;'>
+        👤 YOU ASKED:
+    </div>
+    <div style='color: #2d3748; font-size: 1rem; line-height: 1.5;'>
+        {turn['student']}
+    </div>
+</div>\n\n"""
+
+            # Character response with modern styling
+            conversation_display += f"""
+<div style='background: #fff3e0; border-radius: 12px; padding: 1rem;
+            margin-bottom: 1.5rem; border-left: 4px solid #f5576c;'>
+    <div style='color: #f5576c; font-weight: 700; margin-bottom: 0.3rem; font-size: 0.9rem;'>
+        🎭 {persona['persona_name'].upper()} REPLIED:
+    </div>
+    <div style='color: #2d3748; font-size: 1rem; line-height: 1.6;'>
+        {turn['client']}
+    </div>
+</div>\n\n"""
+
+            conversation_display += "<hr style='border: none; border-top: 2px solid #e9ecef; margin: 1.5rem 0;'>\n\n"
 
         # Visualizations
         state_yaml = yaml.dump(updated_state, sort_keys=False)
         current_chart = plot_state(updated_state, persona['persona_name'])
         history_chart = plot_interaction_history(state_history)
 
-        # Teaching feedback
-        teaching_feedback = f"**Note:**\n{teaching_note}\n\n"
-        teaching_feedback += f"**Current State:**\n"
-        for k, v in updated_state.items():
-            if isinstance(v, (int, float)):
-                teaching_feedback += f"- {k.capitalize()}: {v:.2f}\n"
+        # Teaching feedback - clean, educational format
+        teaching_feedback = f"""
+<div style='background: white; border-radius: 8px; padding: 1rem; margin-bottom: 1rem;'>
+    <div style='color: #2d3748; font-size: 1rem; line-height: 1.8;'>
+        {teaching_note}
+    </div>
+</div>
+
+<div style='background: white; border-radius: 8px; padding: 1rem; border-left: 4px solid #667eea;'>
+    <div style='color: #667eea; font-weight: 700; font-size: 0.95rem; margin-bottom: 0.8rem;'>
+        📊 Character's Current State
+    </div>
+    <div style='color: #495057; font-size: 0.95rem; line-height: 1.6;'>
+"""
+
+        # Add readable state descriptions
+        intensity = updated_state.get('anxiety', 0)
+        openness = updated_state.get('trust', 0)
+        candor = updated_state.get('openness', 0)
+        mode = updated_state.get('mode', 'baseline')
+
+        if intensity > 0.7:
+            teaching_feedback += "        • The character is highly emotionally charged right now<br>\n"
+        elif intensity > 0.4:
+            teaching_feedback += "        • The character shows moderate emotional intensity<br>\n"
+        else:
+            teaching_feedback += "        • The character is relatively calm<br>\n"
 
-        if 'emotional_memory' in updated_state and updated_state['emotional_memory']:
-            teaching_feedback += f"\n**Memory:** {updated_state['emotional_memory'][-1]}\n"
+        if openness > 0.6:
+            teaching_feedback += "        • They're willing to share and engage deeply<br>\n"
+        elif openness > 0.4:
+            teaching_feedback += "        • They're somewhat open but still cautious<br>\n"
+        else:
+            teaching_feedback += "        • They're guarded and protective<br>\n"
+
+        if mode == "trusting":
+            teaching_feedback += "        • <strong>Excellent!</strong> You've built strong rapport<br>\n"
+        elif mode == "triggered":
+            teaching_feedback += "        �� <strong>Note:</strong> The character feels defensive - try a gentler approach<br>\n"
+        elif mode == "decompensating":
+            teaching_feedback += "        • <strong>Alert:</strong> The character is overwhelmed - consider shifting topics<br>\n"
+
+        teaching_feedback += """
+    </div>
+</div>
+"""
 
         # Log interaction
         transcript_path = log_interaction(
@@ -528,7 +600,7 @@ with gr.Blocks(
                 </div>
             """)
 
-            conversation_display = gr.Markdown(
+            conversation_display = gr.HTML(
                 label="",
                 value="""
                 <div style='text-align: center; padding: 3rem; color: #6c757d;'>
@@ -591,7 +663,7 @@ with gr.Blocks(
                     </h3>
                 </div>
             """)
-            teaching_output = gr.Markdown(
+            teaching_output = gr.HTML(
                 label="",
                 elem_classes=["feedback-box"]
             )