Update app.py

app.py

@@ -908,107 +908,26 @@ def display_evaluation(evaluation: Dict[str, Any]):
         tabs = st.tabs(["Communication", "Teaching", "Recommendations", "Transcript"])
 
         with tabs[0]:
-            with st.status("Loading communication metrics...") as status:
-                progress_bar = st.progress(0)
-                progress_bar.progress(0.2)
-                st.header("Communication")
-
-                # Speed metrics
-                st.subheader("Speed")
-                col1, col2 = st.columns(2)
-                with col1:
-                    st.metric("Score", "Pass" if evaluation["communication"]["speed"]["score"] == 1 
-                             else "Need Improvement")
-                with col2:
-                    st.metric("Words per Minute", 
-                             f"{evaluation['communication']['speed']['wpm']:.1f}")
-                st.caption("Acceptable Range: 130-150 WPM")
-                progress_bar.progress(0.4)
-
-                # Fluency metrics
-                st.subheader("Fluency")
-                col1, col2, col3 = st.columns(3)
-                with col1:
-                    st.metric("Score", "Pass" if evaluation["communication"]["fluency"]["score"] == 1 
-                             else "Need Improvement")
-                with col2:
-                    st.metric("Fillers/Min", 
-                             f"{evaluation['communication']['fluency']['fillersPerMin']:.1f}")
-                with col3:
-                    st.metric("Errors/Min", 
-                             f"{evaluation['communication']['fluency']['errorsPerMin']:.1f}")
-                progress_bar.progress(0.6)
-
-                # Flow metrics
-                st.subheader("Flow")
-                col1, col2 = st.columns(2)
-                with col1:
-                    st.metric("Score", "Pass" if evaluation["communication"]["flow"]["score"] == 1 
-                             else "Need Improvement")
-                with col2:
-                    st.metric("Pauses/Min", 
-                             f"{evaluation['communication']['flow']['pausesPerMin']:.1f}")
-                st.caption("Acceptable Range: 8-12 pauses/min")
-
-                # Intonation metrics
-                st.subheader("Intonation")
-                
-                # Frequency/Pitch section
-                st.write("**Frequency/Pitch Metrics:**")
-                col1, col2, col3 = st.columns(3)
-                with col1:
-                    st.metric("Base Frequency", 
-                             f"{evaluation['communication']['intonation']['pitch']:.1f} Hz")
-                with col2:
-                    st.metric("Pitch Score", 
-                             "Pass" if evaluation["communication"]["intonation"]["pitchScore"] == 1 
-                             else "Need Improvement")
-                with col3:
-                    st.metric("Pitch Variation (σ)", 
-                             f"{evaluation['communication']['intonation']['pitchVariation']:.1f} Hz")
-                st.caption("Acceptable Pitch Variation Range: 80-90 Hz")
-                
-                # Patterns section
-                st.write("**Pattern Analysis:**")
-                col1, col2, col3, col4 = st.columns(4)
-                with col1:
-                    st.metric("Pattern Score",
-                             "Pass" if evaluation["communication"]["intonation"]["patternScore"] == 1 
-                             else "Need Improvement")
-                with col2:
-                    st.metric("Rising Patterns",
-                             evaluation["communication"]["intonation"]["risingPatterns"])
-                with col3:
-                    st.metric("Falling Patterns",
-                             evaluation["communication"]["intonation"]["fallingPatterns"])
-                with col4:
-                    st.metric("Variations/Min",
-                             f"{evaluation['communication']['intonation']['variationsPerMin']:.1f}")
-                st.caption("Acceptable Variations per Minute: >=8")
-                progress_bar.progress(0.8)
-
-                # Energy metrics
-                st.subheader("Energy")
-                col1, col2, col3 = st.columns(3)
-                with col1:
-                    st.metric("Score", 
-                             "Pass" if evaluation["communication"]["energy"]["score"] == 1 
-                             else "Need Improvement")
-                with col2:
-                    st.metric("Mean Amplitude",
-                             f"{evaluation['communication']['energy']['meanAmplitude']:.1f}")
-                with col3:
-                    st.metric("Amplitude Deviation (σ/μ)",
-                             f"{evaluation['communication']['energy']['amplitudeDeviation']:.2f}")
-                
-                st.caption("""
-                Acceptable Ranges:
-                - Mean Amplitude: 20 - 40 (normalized RMS value)
-                - Amplitude Deviation (σ/μ): >0.2
-                """)
+            st.markdown("""
+                <div class="category-header slide-in">
+                    <h2>Communication Metrics</h2>
+                </div>
+            """, unsafe_allow_html=True)
+            
+            # Update metrics to use the new card style
+            metrics = evaluation.get("communication", {})
+            for category, data in metrics.items():
+                score = data.get("score", 0)
+                score_class = "score-pass" if score == 1 else "score-fail"
                 
-                progress_bar.progress(1.0)
-                status.update(label="Communication metrics loaded!", state="complete")
+                st.markdown(f"""
+                    <div class="metric-card fade-in">
+                        <h3>{category.title()}</h3>
+                        <span class="score-badge {score_class}">
+                            {"Pass" if score == 1 else "Needs Improvement"}
+                        </span>
+                    </div>
+                """, unsafe_allow_html=True)
 
         with tabs[1]:
             st.header("Teaching Analysis")
@@ -1128,122 +1047,53 @@ def display_evaluation(evaluation: Dict[str, Any]):
             # Geography Fit with improved formatting
             st.subheader("🌍 Geography Fit")
             geography_fit = recommendations.get("geographyFit", "Not specified")
-            st.write(geography_fit)
+            st.info(geography_fit)
             
             # Improvements Needed with better formatting
             st.subheader("💡 Suggested Improvements")
             improvements = recommendations.get("improvements", [])
             if isinstance(improvements, list):
                 for i, improvement in enumerate(improvements, 1):
-                    if isinstance(improvement, dict):
-                        aspect = improvement.get('aspect', 'General').title()
-                        recommendation = improvement.get('recommendation', '')
-                        st.markdown(f"""
-                        **{i}. {aspect}**  
-                        {recommendation}
-                        """)
-                    elif isinstance(improvement, str):
-                        # If improvement is a string, create a meaningful category based on content
-                        if "amplitude" in improvement.lower() or "voice" in improvement.lower():
-                            aspect = "Voice and Energy"
-                        elif "interaction" in improvement.lower() or "audience" in improvement.lower():
-                            aspect = "Engagement"
-                        elif "citation" in improvement.lower() or "accuracy" in improvement.lower():
-                            aspect = "Content Quality"
-                        elif "connection" in improvement.lower() or "narrative" in improvement.lower():
-                            aspect = "Structure and Flow"
-                        else:
-                            aspect = "General Improvement"
+                    if isinstance(improvement, str):
+                        # Create categories based on content keywords
+                        category = "General"
+                        if any(keyword in improvement.lower() for keyword in ["voice", "volume", "pitch", "pace"]):
+                            category = "Voice and Delivery"
+                        elif any(keyword in improvement.lower() for keyword in ["explain", "concept", "understanding"]):
+                            category = "Teaching Approach"
+                        elif any(keyword in improvement.lower() for keyword in ["engage", "interact", "question"]):
+                            category = "Engagement"
+                        elif any(keyword in improvement.lower() for keyword in ["code", "technical", "implementation"]):
+                            category = "Technical Content"
                         
                         st.markdown(f"""
-                        **{i}. {aspect}**  
-                        {improvement}
-                        """)
+                        <div class="recommendation-card">
+                            <h4>{i}. {category}</h4>
+                            <p>{improvement}</p>
+                        </div>
+                        """, unsafe_allow_html=True)
             
-            # Rigor Assessment with enhanced display
+            # Rigor Assessment with enhanced formatting
             st.subheader("📊 Rigor Assessment")
             rigor = recommendations.get("rigor", {})
             
-            # Handle different rigor data structures
             if isinstance(rigor, dict):
                 for category, assessment in rigor.items():
-                    if isinstance(assessment, dict):
-                        # Format category name for better display
-                        category_display = category.replace('ability', ' Ability').title()
-                        score_text = "Pass" if assessment.get('score') == 1 else "Needs Improvement"
-                        score_color = "green" if assessment.get('score') == 1 else "orange"
-                        
-                        st.markdown(f"""
-                        **{category_display}**  
-                        Score: :{score_color}[{score_text}]  
-                        {assessment.get('justification', '')}
-                        """)
-                        st.markdown("---")
-                    else:
-                        st.write(f"**{category.title()}:** {assessment}")
-            elif isinstance(rigor, str):
-                # If rigor is a string, display it directly
-                st.write(rigor)
-            else:
-                st.write("No rigor assessment available")
-            
-            # Add visual separator before metrics
-            st.markdown("---")
-            
-            # Summary metrics with error handling
-            st.subheader("📈 Overall Scores")
-            col1, col2, col3 = st.columns(3)
-            
-            with col1:
-                # Calculate teaching score correctly from the teaching data
-                teaching_data = evaluation.get("teaching", {})
-                concept_assessment = teaching_data.get("Concept Assessment", {})
-                code_assessment = teaching_data.get("Code Assessment", {})
-                
-                # Calculate concept scores
-                concept_scores = [
-                    category.get("Score", 0)
-                    for category in concept_assessment.values()
-                ]
-                
-                # Calculate code scores
-                code_scores = [
-                    category.get("Score", 0)
-                    for category in code_assessment.values()
-                ]
-                
-                # Calculate overall teaching score
-                all_teaching_scores = concept_scores + code_scores
-                teaching_score = (sum(all_teaching_scores) / len(all_teaching_scores) * 100) if all_teaching_scores else 0
-                st.metric("Teaching Score", f"{teaching_score:.1f}%")
-            
-            with col2:
-                # Calculate communication score
-                communication = evaluation.get("communication", {})
-                comm_categories = ["speed", "fluency", "flow", "intonation", "energy"]
-                comm_scores = [
-                    communication.get(cat, {}).get("score", 0)
-                    for cat in comm_categories
-                ]
-                comm_score = (sum(comm_scores) / len(comm_scores) * 100) if comm_scores else 0
-                st.metric("Communication Score", f"{comm_score:.1f}%")
-            
-            with col3:
-                # Calculate overall score (average of teaching and communication)
-                overall_score = (teaching_score + comm_score) / 2
-                st.metric("Overall Score", f"{overall_score:.1f}%")
-            
-            # Additional metrics row
-            col1, col2 = st.columns(2)
-            with col1:
-                # Count total improvement points
-                improvement_count = len(improvements) if isinstance(improvements, list) else 1
-                st.metric("Improvement Points", improvement_count)
-            
-            with col2:
-                # Display words per minute if available
-                wpm = communication.get("speed", {}).get("wpm", 0)
-                st.metric("Speaking Speed", f"{wpm:.1f} WPM")
+                    # Format category name
+                    category_display = " ".join(word.capitalize() for word in category.replace("assessment", "").split())
+                    
+                    # Get score and format assessment data
+                    score = "Pass" if isinstance(assessment, dict) and assessment.get('score') == 1 else "Needs Improvement"
+                    score_color = "green" if score == "Pass" else "orange"
+                    
+                    # Display assessment in a card format
+                    st.markdown(f"""
+                    <div class="rigor-card">
+                        <h4>{category_display}</h4>
+                        <p class="score-badge {score_color.lower()}-score">{score}</p>
+                        <p>{assessment.get('justification', '') if isinstance(assessment, dict) else assessment}</p>
+                    </div>
+                    """, unsafe_allow_html=True)
 
         # Transcript tab with error handling
         with tabs[3]:
@@ -1255,6 +1105,54 @@ def display_evaluation(evaluation: Dict[str, Any]):
         st.error(f"Error displaying results: {str(e)}")
         st.error("Please check the evaluation data structure and try again.")
 
+    # Add these styles to the existing CSS in the main function
+    st.markdown("""
+        <style>
+        /* ... existing styles ... */
+        
+        .recommendation-card {
+            background-color: #f8f9fa;
+            border-left: 4px solid #1f77b4;
+            padding: 15px;
+            margin: 10px 0;
+            border-radius: 4px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        
+        .recommendation-card h4 {
+            color: #1f77b4;
+            margin: 0 0 10px 0;
+        }
+        
+        .rigor-card {
+            background-color: #ffffff;
+            border: 1px solid #e0e0e0;
+            padding: 20px;
+            margin: 10px 0;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+        }
+        
+        .score-badge {
+            display: inline-block;
+            padding: 4px 12px;
+            border-radius: 15px;
+            font-weight: bold;
+            margin: 10px 0;
+        }
+        
+        .green-score {
+            background-color: #28a745;
+            color: white;
+        }
+        
+        .orange-score {
+            background-color: #fd7e14;
+            color: white;
+        }
+        </style>
+    """, unsafe_allow_html=True)
+
 def check_dependencies() -> List[str]:
     """Check if required dependencies are installed"""
     missing = []
@@ -1266,6 +1164,115 @@ def check_dependencies() -> List[str]:
 
 def main():
     try:
+        # Add custom CSS for animations and styling
+        st.markdown("""
+            <style>
+                @keyframes fadeIn {
+                    from { opacity: 0; }
+                    to { opacity: 1; }
+                }
+                
+                @keyframes slideIn {
+                    from { transform: translateX(-100%); }
+                    to { transform: translateX(0); }
+                }
+                
+                @keyframes pulse {
+                    0% { transform: scale(1); }
+                    50% { transform: scale(1.05); }
+                    100% { transform: scale(1); }
+                }
+                
+                .fade-in {
+                    animation: fadeIn 1s ease-in;
+                }
+                
+                .slide-in {
+                    animation: slideIn 0.5s ease-out;
+                }
+                
+                .pulse {
+                    animation: pulse 2s infinite;
+                }
+                
+                .metric-card {
+                    background-color: #f0f2f6;
+                    border-radius: 10px;
+                    padding: 20px;
+                    margin: 10px 0;
+                    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+                    transition: transform 0.3s ease;
+                }
+                
+                .metric-card:hover {
+                    transform: translateY(-5px);
+                }
+                
+                .stButton>button {
+                    transition: all 0.3s ease;
+                }
+                
+                .stButton>button:hover {
+                    transform: scale(1.05);
+                }
+                
+                .category-header {
+                    background: linear-gradient(90deg, #1f77b4, #2c3e50);
+                    color: white;
+                    padding: 10px;
+                    border-radius: 5px;
+                    margin: 10px 0;
+                }
+                
+                .score-badge {
+                    padding: 5px 10px;
+                    border-radius: 15px;
+                    font-weight: bold;
+                }
+                
+                .score-pass {
+                    background-color: #28a745;
+                    color: white;
+                }
+                
+                .score-fail {
+                    background-color: #dc3545;
+                    color: white;
+                }
+            </style>
+        """, unsafe_allow_html=True)
+
+        # Animated title
+        st.markdown("""
+            <div class="fade-in">
+                <h1 style='text-align: center; color: #1f77b4;'>
+                    🎓 Mentor Demo Review System
+                </h1>
+            </div>
+        """, unsafe_allow_html=True)
+
+        # Animated sidebar
+        with st.sidebar:
+            st.markdown("""
+                <div class="slide-in">
+                    <h2>Instructions</h2>
+                </div>
+            """, unsafe_allow_html=True)
+            
+            st.markdown("""
+                <div class="fade-in">
+                    <ol>
+                        <li>Upload your teaching video</li>
+                        <li>Wait for the analysis</li>
+                        <li>Review the detailed feedback</li>
+                        <li>Download the report</li>
+                    </ol>
+                    
+                    <p><strong>Supported formats:</strong> MP4, AVI, MOV<br>
+                    <strong>Maximum file size:</strong> 500mb</p>
+                </div>
+            """, unsafe_allow_html=True)
+
         st.set_page_config(page_title="🎓 Mentor Demo Review System", layout="wide")
         
         st.title("🎓 Mentor Demo Review System")
@@ -1332,6 +1339,13 @@ def main():
             )
         
         if uploaded_file:
+            # Add a pulsing animation while processing
+            st.markdown("""
+                <div class="pulse" style="text-align: center;">
+                    <h3>Processing your video...</h3>
+                </div>
+            """, unsafe_allow_html=True)
+            
             # Create temp directory for processing
             temp_dir = tempfile.mkdtemp()
             video_path = os.path.join(temp_dir, uploaded_file.name)