upgrade the UI and fix warning of standard scaler

app.py

@@ -23,6 +23,16 @@ trained_models_folder = 'Optical Illusion - Trained Models'
 DISPLAY_WIDTH = 1920
 DISPLAY_HEIGHT = 1080
 
+# Image descriptions for better user understanding
+IMAGE_DESCRIPTIONS = {
+    'duck-rabbit': 'A classic ambiguous figure that can be seen as either a duck or a rabbit',
+    'face-vase': 'The famous Rubin\'s vase - you might see two faces in profile or a vase',
+    'young-old': 'This image can appear as either a young woman or an old woman',
+    'princess-oldMan': 'Can be perceived as either a princess or an old man',
+    'lily-woman': 'This ambiguous image shows either a lily flower or a woman',
+    'tiger-monkey': 'You might see either a tiger or a monkey in this image'
+}
+
 # Load all saved models at startup
 def load_all_models():
     """Load all saved models into memory"""
@@ -65,16 +75,17 @@ def create_placeholder_image(image_name):
     
     # Handle None or empty image_name
     if image_name is None:
-        display_text = 'NO IMAGE SELECTED\n\nSelect an image from the dropdown'
+        display_text = '🖼️ NO IMAGE SELECTED\n\n👆 Select an image from the dropdown above'
     else:
-        display_text = f'{image_name.upper()}\n\nClick where you first look\n\n(Image not found)'
+        display_text = f'🖼️ {image_name.upper()}\n\n👆 Click where you first look\n\n⚠️ (Image not found)'
     
     ax.text(0.5, 0.5, display_text,
            transform=ax.transAxes, ha='center', va='center',
-           fontsize=32, fontweight='bold')
+           fontsize=28, fontweight='bold', color='#666666')
     ax.set_xlim(0, DISPLAY_WIDTH)
     ax.set_ylim(0, DISPLAY_HEIGHT)
     ax.axis('off')
+    ax.set_facecolor('#f8f9fa')  # Light gray background for placeholder
 
     buf = io.BytesIO()
     plt.savefig(buf, format='png', dpi=100, bbox_inches='tight', pad_inches=0)
@@ -90,10 +101,10 @@ def process_click(image_name, model_type, evt: gr.SelectData):
     """Process click on image and return prediction"""
 
     if evt is None:
-        return "Please click on the image where you first looked!", None, None
+        return "❗ Please click on the image where you first looked!", None, None
     
     if image_name is None:
-        return "Please select an image first!", None, None
+        return "❗ Please select an image first!", None, None
 
     # Get click coordinates (Gradio provides them in image coordinates)
     click_x_img, click_y_img = evt.index
@@ -107,7 +118,7 @@ def process_click(image_name, model_type, evt: gr.SelectData):
 
     # Get model data
     if image_name not in all_models:
-        return f"No model found for {image_name}", None, None
+        return f"❗ No model found for {image_name}", None, None
 
     model_data = all_models[image_name]
 
@@ -121,7 +132,8 @@ def process_click(image_name, model_type, evt: gr.SelectData):
     bias = dist_right - dist_left
 
     # Make prediction
-    X = np.array([[dist_left, dist_right, bias]])
+    X = pd.DataFrame([[dist_left, dist_right, bias]], 
+                    columns=['dist_to_left', 'dist_to_right', 'bias_to_left'])
     model = model_data[f'{model_type}_model']
     prediction = model.predict(X)[0]
     probability = model.predict_proba(X)[0]
@@ -130,18 +142,34 @@ def process_click(image_name, model_type, evt: gr.SelectData):
     predicted_class = model_data['label_classes'][prediction]
     confidence = probability[prediction]
 
+    # Create confidence level description
+    if confidence >= 0.8:
+        confidence_level = "Very High 🟢"
+    elif confidence >= 0.65:
+        confidence_level = "High 🟡"
+    elif confidence >= 0.5:
+        confidence_level = "Moderate 🟠"
+    else:
+        confidence_level = "Low 🔴"
+
     # Create detailed message
     message = f"""
-    ## Prediction Results
+    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 1.5rem; border-radius: 10px; color: white; margin: 0.5rem 0;">
+    <h2 style="color: white; margin-top: 0;">🔍 Prediction Results</h2>
 
-    **You clicked at:** ({click_x_img}, {click_y_img}) in image coordinates
-    **Normalized position:** ({click_x_norm:.1f}, {click_y_norm:.1f})
-
-    **Distance to left centroid:** {dist_left:.1f} pixels
-    **Distance to right centroid:** {dist_right:.1f} pixels
+    <p><strong>👆 Click Location:</strong> ({click_x_img}, {click_y_img}) pixels from top-left<br>
+    <strong>🎯 Normalized Position:</strong> ({click_x_norm:.1f}, {click_y_norm:.1f}) from center</p>
+    
+    <hr style="border-color: rgba(255,255,255,0.3);">
+    
+    <p><strong>📏 Distance to Left Region:</strong> {dist_left:.1f} pixels<br>
+    <strong>📏 Distance to Right Region:</strong> {dist_right:.1f} pixels<br>
+    <strong>⚖️ Bias Score:</strong> {bias:.1f}</p>
+    
+    <hr style="border-color: rgba(255,255,255,0.3);">
 
-    ### Prediction: You likely see the **{predicted_class.upper()}** interpretation
-    ### Confidence: {confidence:.1%}
+    <h3 style="color: white;">🧠 Prediction: You likely see the {predicted_class.upper()} interpretation</h3>
+    <h3 style="color: white;">📊 Confidence: {confidence:.1%} ({confidence_level})</h3>
     """
 
     # Create visualization
@@ -150,24 +178,26 @@ def process_click(image_name, model_type, evt: gr.SelectData):
 
     # Get example interpretations
     interpretations = {
-        'duck-rabbit': {'left': 'Duck', 'right': 'Rabbit'},
-        'face-vase': {'left': 'Faces', 'right': 'Vase'},
-        'young-old': {'left': 'Young Woman', 'right': 'Old Woman'},
-        'princess-oldMan': {'left': 'Princess', 'right': 'Old Man'},
-        'lily-woman': {'left': 'Lily', 'right': 'Woman'},
-        'tiger-monkey': {'left': 'Tiger', 'right': 'Monkey'}
+        'duck-rabbit': {'left': 'Duck 🦆', 'right': 'Rabbit 🐰'},
+        'face-vase': {'left': 'Two Faces 👥', 'right': 'Vase 🏺'},
+        'young-old': {'left': 'Young Woman 👩', 'right': 'Old Woman 👵'},
+        'princess-oldMan': {'left': 'Princess 👸', 'right': 'Old Man 👴'},
+        'lily-woman': {'left': 'Lily 🌸', 'right': 'Woman 👩'},
+        'tiger-monkey': {'left': 'Tiger 🐅', 'right': 'Monkey 🐒'}
     }
 
     if image_name in interpretations:
         specific = interpretations[image_name][predicted_class]
-        message += f"\n**Specific interpretation:** You see the **{specific}**"
+        message += f"<p><strong>🎨 What you see:</strong> {specific}</p>"
+    
+    message += "</div>"
 
     return message, viz, create_stats_table(image_name, model_type)
 
 def create_visualization(image_name, click_x, click_y, prediction, confidence, model_type='rf'):
     """Create a visualization showing the click point, centroids, and prediction"""
 
-    fig, (ax1, ax2) = plt.subplots(1, 2, figsize=(15, 6))
+    fig, (ax1, ax2) = plt.subplots(1, 2, figsize=(15, 6), facecolor='#f8f9fa')
 
     # Get model data
     model_data = all_models[image_name]
@@ -189,15 +219,15 @@ def create_visualization(image_name, click_x, click_y, prediction, confidence, m
         bias = dist_right - dist_left
         features.append([dist_left, dist_right, bias])
 
-    X = np.array(features)
+    X = pd.DataFrame(features, columns=['dist_to_left', 'dist_to_right', 'bias_to_left'])
     model = model_data[f'{model_type}_model']
     Z = model.predict(X)
     Z = Z.reshape(xx.shape)
 
     # Plot decision boundary
     from matplotlib.colors import ListedColormap
-    colors = ListedColormap(['lightblue', 'lightcoral'])
-    ax1.contourf(xx, yy, Z, alpha=0.6, cmap=colors)
+    colors = ListedColormap(['#a8d5ff', '#ffb3b3'])  # Softer blue and red
+    ax1.contourf(xx, yy, Z, alpha=0.7, cmap=colors)
 
     # Plot centroids
     ax1.scatter(centroid_left[0], centroid_left[1],
@@ -219,24 +249,33 @@ def create_visualization(image_name, click_x, click_y, prediction, confidence, m
     ax1.set_ylabel('Y (pixels from center)')
     ax1.set_title(f'Decision Space - {model_type.upper()} Model')
     ax1.grid(True, alpha=0.3)
-    ax1.legend()
+    ax1.legend(loc='upper right', framealpha=0.9)
     ax1.set_xlim(-960, 960)  # Full width range
     ax1.set_ylim(-540, 540)  # Full height range
     ax1.set_aspect('equal')
+    ax1.set_facecolor('#f8f9fa')  # Light background
 
     # Right plot: Statistics
     image_df = master_df[master_df['image_type'] == image_name]
 
     # Create bar chart of choices
     choice_counts = image_df['choice'].value_counts()
-    ax2.bar(choice_counts.index, choice_counts.values,
-           color=['blue' if x == 'left' else 'red' for x in choice_counts.index])
+    bars = ax2.bar(choice_counts.index, choice_counts.values,
+           color=['#4b86db' if x == 'left' else '#db4b4b' for x in choice_counts.index])
+    
+    # Add values on top of bars
+    for bar in bars:
+        height = bar.get_height()
+        ax2.text(bar.get_x() + bar.get_width()/2., height + 0.5,
+                f'{height:.0f}',
+                ha='center', va='bottom', fontsize=10)
 
     # Add prediction annotation
     ax2.text(0.5, 0.95, f'Your Predicted Choice: {prediction.upper()}',
             transform=ax2.transAxes, ha='center', va='top',
             fontsize=16, fontweight='bold',
-            bbox=dict(boxstyle='round', facecolor='lightgreen' if prediction == 'left' else 'lightcoral'))
+            bbox=dict(boxstyle='round,pad=0.5', facecolor='#c2f0c2' if prediction == 'left' else '#f0c2c2', 
+                     alpha=0.9, edgecolor='gray'))
 
     ax2.text(0.5, 0.85, f'Confidence: {confidence:.1%}',
             transform=ax2.transAxes, ha='center', va='top', fontsize=14)
@@ -249,7 +288,9 @@ def create_visualization(image_name, click_x, click_y, prediction, confidence, m
     ax2.text(0.5, 0.05, f'Model CV Accuracy: {model_data[f"cv_accuracy_{model_type}"]:.1%}',
             transform=ax2.transAxes, ha='center', va='bottom', fontsize=12,
             style='italic', alpha=0.7)
-
+    
+    ax2.set_facecolor('#f8f9fa')  # Light background
+    
     plt.tight_layout()
 
     # Convert plot to image
@@ -266,132 +307,222 @@ def create_stats_table(image_name, model_type):
     image_df = master_df[master_df['image_type'] == image_name]
 
     stats = {
-        'Metric': ['Total Participants', 'Left Choices', 'Right Choices',
-                   'Model Accuracy', 'Class Balance'],
+        'Metric': ['👥 Total Participants', '⬅️ Left Choices', '➡️ Right Choices',
+                   f'🎯 {model_type.upper()} Accuracy', '⚖️ Class Balance', '📊 Majority Choice'],
         'Value': [
             len(image_df),
             model_data['class_distribution'].get('left', 0),
             model_data['class_distribution'].get('right', 0),
             f"{model_data[f'cv_accuracy_{model_type}']:.1%}",
-            f"{min(model_data['class_distribution'].values()) / len(image_df):.1%}"
+            f"{min(model_data['class_distribution'].values()) / len(image_df):.1%}",
+            f"{image_df['choice'].mode()[0].title()} ({image_df['choice'].value_counts().max()}/{len(image_df)})"
         ]
     }
 
     return pd.DataFrame(stats)
 
-# Create Gradio Interface
-with gr.Blocks(title="Optical Illusion First Fixation Predictor") as demo:
-    gr.Markdown("""
-    # 🧠 Optical Illusion First Fixation Predictor
-
-    This tool predicts which interpretation of an ambiguous image you'll see based on where you first look!
-
-    ## How to use:
-    1. Select an optical illusion from the dropdown
-    2. Choose a model type (Random Forest usually performs better)
-    3. Click on the image where your eyes first landed
-    4. See the prediction of what you're likely to perceive!
+# Custom CSS for better styling
+css = """
+.gradio-container {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.main-header {
+    text-align: center;
+    margin-bottom: 2rem;
+    padding: 1.5rem;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 15px;
+    color: white;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+}
+
+.instruction-box {
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+    padding: 1rem;
+    border-radius: 10px;
+    color: white;
+    margin: 1rem 0;
+}
+
+.stats-highlight {
+    background-color: #f8f9fa;
+    border-left: 4px solid #007bff;
+    padding: 1rem;
+    margin: 0.5rem 0;
+}
+"""
 
-    **Note:** Images are displayed at 1920x1080 resolution. Click where you naturally first looked at the image.
+# Create Gradio Interface
+with gr.Blocks(title="🧠 Optical Illusion First Fixation Predictor", 
+               theme=gr.themes.Soft(), css=css) as demo:
+    
+    gr.HTML("""
+    <div class="main-header">
+        <h1>🧠 Optical Illusion First Fixation Predictor</h1>
+        <h3>Can we predict what you see based on where you look?</h3>
+        <p>This AI-powered tool analyzes your first fixation point to predict which interpretation of an ambiguous image you'll perceive!</p>
+    </div>
     """)
 
     with gr.Row():
         with gr.Column(scale=2):
-            # Image selection
+            # Image selection with description
             available_images = list(all_models.keys()) if all_models else []
             default_image = available_images[0] if available_images else None
             
             image_choice = gr.Dropdown(
                 choices=available_images,
                 value=default_image,
-                label="Select Optical Illusion",
+                label="🖼️ Select Optical Illusion",
                 info="Choose which ambiguous image to analyze"
             )
+            
+            # Display image description
+            image_description = gr.Markdown(
+                value=IMAGE_DESCRIPTIONS.get(default_image, "Select an image to see its description.") if default_image else "Select an image to see its description.",
+                label="📖 Image Description"
+            )
 
-            # Model selection
+            # Model selection with enhanced info
             model_type = gr.Radio(
-                choices=["rf", "lr"],
+                choices=[("Random Forest (Recommended)", "rf"), ("Logistic Regression", "lr")],
                 value="rf",
-                label="Model Type",
-                info="Random Forest (rf) usually performs better"
+                label="🔍 Prediction Model",
+                info="Random Forest typically provides better accuracy for this task",
+                container=True
             )
 
-            # Display image with proper dimensions
+            # Display image with better styling
             image_display = gr.Image(
-                label="Click where you first look",
+                label="👆 Click where your eyes first landed on the image",
                 interactive=True,
                 type="pil",
-                height=1080,  # Set to full height
-                width=1920    # Set to full width
+                height=540,  # Reduced for better mobile compatibility
+                width=960,
+                elem_classes="main-image"
             )
 
         with gr.Column(scale=1):
-            # Results section
-            prediction_output = gr.Markdown(label="Prediction Results")
-            stats_table = gr.DataFrame(label="Image Statistics")
+            # Results section with enhanced styling
+            prediction_output = gr.Markdown(
+                label="🧠 Prediction Results",
+                value="""<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 1rem; border-radius: 10px; color: white;">
+                <strong>👆 Click on the image to get your prediction!</strong><br><br>
+                The AI will analyze where you looked first and predict what you're likely to see.
+                </div>""",
+                elem_classes="stats-highlight"
+            )
+            stats_table = gr.DataFrame(label="📊 Image Statistics")
 
-    # Visualization output
+    # Visualization output with better layout
     with gr.Row():
         visualization_output = gr.Image(
-            label="Analysis Visualization",
+            label="📈 Analysis Visualization",
             type="pil"
         )
 
-    # Information section
-    with gr.Accordion("ℹ️ About the Models", open=False):
+    # Enhanced information sections
+    with gr.Accordion("ℹ️ How It Works", open=False):
         gr.Markdown("""
-        ### Model Information
-        - **Random Forest (RF)**: An ensemble learning method that creates multiple decision trees
-        - **Logistic Regression (LR)**: A linear model for binary classification
-
-        ### Features Used
-        - Distance from first fixation to left interpretation centroid
-        - Distance from first fixation to right interpretation centroid
-        - Bias (difference between distances)
-
-        ### Coordinate System
-        - Image dimensions: 1920x1080 pixels
-        - Normalized coordinates: X(-960 to 960), Y(-540 to 540)
-        - Center point (0,0) is the middle of the image
-
-        ### Training Method
-        - Leave-One-Participant-Out Cross-Validation (LOPO-CV)
-        - Ensures model generalizes to new participants
+        ### 🤖 The Science Behind the Prediction
+        
+        **🎯 Feature Extraction:**
+        - We calculate the distance from your click point to the centroid of each interpretation region
+        - A "bias score" measures which region you're closer to
+        
+        **🧠 Machine Learning Models:**
+        - **Random Forest:** Uses multiple decision trees for robust predictions
+        - **Logistic Regression:** A linear approach that's fast and interpretable
+        
+        **📊 Training Process:**
+        - Trained on eye-tracking data from multiple participants
+        - Uses Leave-One-Participant-Out Cross-Validation for unbiased evaluation
+        - Ensures the model generalizes to new users
+        
+        **🎨 Coordinate System:**
+        - Center of image = (0, 0)
+        - X-axis: -960 to +960 pixels (left to right)
+        - Y-axis: -540 to +540 pixels (bottom to top)
         """)
 
-    # Summary statistics
-    with gr.Accordion("📊 Model Performance Summary", open=False):
-        summary_data = []
-        for img_name, model_data in all_models.items():
-            summary_data.append({
-                'Image': img_name,
-                'RF Accuracy': f"{model_data['cv_accuracy_rf']:.1%}",
-                'LR Accuracy': f"{model_data['cv_accuracy_lr']:.1%}",
-                'Total Samples': model_data['total_samples']
-            })
-
-        gr.DataFrame(
-            value=pd.DataFrame(summary_data),
-            label="Cross-Validation Accuracies"
-        )
+    with gr.Accordion("📊 Model Performance", open=False):
+        if all_models:
+            summary_data = []
+            for img_name, model_data in all_models.items():
+                summary_data.append({
+                    'Image': img_name.replace('-', ' ').title(),
+                    'RF Accuracy': f"{model_data['cv_accuracy_rf']:.1%}",
+                    'LR Accuracy': f"{model_data['cv_accuracy_lr']:.1%}",
+                    'Participants': model_data['total_samples'],
+                    'Best Model': 'RF' if model_data['cv_accuracy_rf'] > model_data['cv_accuracy_lr'] else 'LR'
+                })
+
+            gr.DataFrame(
+                value=pd.DataFrame(summary_data),
+                label="Cross-Validation Performance Summary"
+            )
 
-    # Function to update image when selection changes
-    def update_image(image_name):
+    # Function to update image and description
+    def update_image_and_description(image_name):
         # Handle None case
         if image_name is None:
-            return create_placeholder_image(None), "Please select an image first!", None
+            empty_stats = pd.DataFrame({
+                'Metric': ['Select an image to see statistics'],
+                'Value': ['']
+            })
+            return (create_placeholder_image(None), 
+                   "Select an image to see its description.",
+                   """<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 1rem; border-radius: 10px; color: white;">
+                   <strong>👆 Please select an image first!</strong>
+                   </div>""", 
+                   empty_stats)
+        
+        # Update description
+        description = IMAGE_DESCRIPTIONS.get(image_name, "Description not available.")
         
         # Use real images if available, otherwise use placeholder
         if image_name in illusion_images:
-            return illusion_images[image_name], "Click on the image to get a prediction!", None
+            # Create initial stats table with proper data
+            model_data = all_models[image_name]
+            image_df = master_df[master_df['image_type'] == image_name]
+            
+            stats = {
+                'Metric': ['👥 Total Participants', '⬅️ Left Choices', '➡️ Right Choices',
+                          '🎯 RF Accuracy', '⚖️ Class Balance', '📊 Majority Choice'],
+                'Value': [
+                    len(image_df),
+                    model_data['class_distribution'].get('left', 0),
+                    model_data['class_distribution'].get('right', 0),
+                    f"{model_data['cv_accuracy_rf']:.1%}",
+                    f"{min(model_data['class_distribution'].values()) / len(image_df):.1%}",
+                    f"{image_df['choice'].mode()[0].title()} ({image_df['choice'].value_counts().max()}/{len(image_df)})"
+                ]
+            }
+            return (illusion_images[image_name], 
+                   f"**{description}**", 
+                   """<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 1rem; border-radius: 10px; color: white;">
+                   <strong>👆 Click on the image to get your prediction!</strong><br><br>
+                   The AI will analyze where you looked first and predict what you're likely to see.
+                   </div>""", 
+                   pd.DataFrame(stats))
         else:
-            return create_placeholder_image(image_name), "Click on the image to get a prediction!", None
+            empty_stats = pd.DataFrame({
+                'Metric': ['Image not found'],
+                'Value': ['']
+            })
+            return (create_placeholder_image(image_name), 
+                   f"**{description}**", 
+                   """<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 1rem; border-radius: 10px; color: white;">
+                   <strong>⚠️ Image file not found!</strong>
+                   </div>""", 
+                   empty_stats)
 
     # Connect events
     image_choice.change(
-        fn=update_image,
+        fn=update_image_and_description,
         inputs=[image_choice],
-        outputs=[image_display, prediction_output, stats_table]
+        outputs=[image_display, image_description, prediction_output, stats_table]
     )
 
     # Handle click event
@@ -403,16 +534,15 @@ with gr.Blocks(title="Optical Illusion First Fixation Predictor") as demo:
 
     # Load initial image
     demo.load(
-        fn=update_image,
+        fn=update_image_and_description,
         inputs=[image_choice],
-        outputs=[image_display, prediction_output, stats_table]
+        outputs=[image_display, image_description, prediction_output, stats_table]
     )
 
-    # Examples section
+    # Enhanced examples section
     if available_images:
-        gr.Markdown("## 📌 Example Interpretations")
+        gr.Markdown("## 📌 Quick Examples")
         with gr.Row():
-            # Only show examples for available images
             example_list = []
             for img in ["duck-rabbit", "face-vase", "young-old", "tiger-monkey"]:
                 if img in available_images:
@@ -422,8 +552,17 @@ with gr.Blocks(title="Optical Illusion First Fixation Predictor") as demo:
                 gr.Examples(
                     examples=example_list,
                     inputs=[image_choice, model_type],
-                    label="Try these examples"
+                    label="Try these popular illusions"
                 )
+                
+    # Enhanced footer
+    gr.HTML("""
+    <div style="text-align: center; margin-top: 2rem; padding: 1.5rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 15px; color: white;">
+        <h4>🔬 WID2003 Cognitive Science Group Assignment - OCC 2 Group 2</h4>
+        <p><strong>Universiti Malaya</strong> | 2025</p>
+        <p style="font-size: 0.9em; opacity: 0.8;">Vote for Us!</p>
+    </div>
+    """)
 
 # Debug info
 print(f"\nImage folder: {image_folder}")
@@ -433,4 +572,7 @@ print(f"Image dimensions: {DISPLAY_WIDTH}x{DISPLAY_HEIGHT}")
 
 # Launch the app
 if __name__ == "__main__":
-    demo.launch(share=True)
+    demo.launch(
+        # share=True,
+        # debug=True
+    )

requirements.txt

@@ -3,5 +3,5 @@ numpy
 pandas
 joblib
 matplotlib
-scikit-learn
+scikit-learn==1.6.1
 pillow