Upload folder using huggingface_hub

.gitattributes

@@ -38,3 +38,8 @@ Final_similarity_matrix2.csv filter=lfs diff=lfs merge=lfs -text
 overall_database.csv filter=lfs diff=lfs merge=lfs -text
 overall_database2.csv filter=lfs diff=lfs merge=lfs -text
 overall_database3.csv filter=lfs diff=lfs merge=lfs -text
+data/Final_similarity_matrix.csv filter=lfs diff=lfs merge=lfs -text
+data/Final_similarity_matrix2.csv filter=lfs diff=lfs merge=lfs -text
+data/overall_database.csv filter=lfs diff=lfs merge=lfs -text
+data/overall_database2.csv filter=lfs diff=lfs merge=lfs -text
+data/overall_database3.csv filter=lfs diff=lfs merge=lfs -text

app.py

@@ -15,6 +15,8 @@ from visualization.image_viewer import ImageViewer
 from gui.gradio_interface import GradioInterface
 from typing import Tuple, Optional, Union, Dict, Any
 import pandas as pd
+import numpy as np
+
 
 class SimilarityApp:
     """Main application class that orchestrates all components"""
@@ -135,272 +137,370 @@ class SimilarityApp:
             print(f"Error getting model rankings: {e}")
             return {}
         
-    # Replace the show_image_pair method in SimilarityApp class
-    # This version adds normalized values to the display
-
-    # Add this new method to SimilarityApp class in app.py
-    # This returns multiple separate outputs for better Gradio layout
-
     def show_image_pair_multi(self, row_index: int):
-        """Show image pair with separate outputs for better layout"""
-        try:
-            data = self.data_loader.data
-            if row_index >= len(data):
-                return (None, None, "Invalid index", "Invalid index", 
-                    "Invalid row index", "", "", "", None)
-            
-            row = data.iloc[row_index]
-            img1, img2 = self.image_viewer.get_image_pair(data, row_index)
-            
-            # Format captions
-            def format_captions_html(caption_text):
-                if pd.isna(caption_text) or caption_text == 'No caption available':
-                    return '<div style="padding:10px; background:#f8f9fa; border-radius:5px;">No caption available</div>'
+            """Show image pair with separate outputs for better layout"""
+            try:
+                import matplotlib.pyplot as plt
+                import matplotlib
+                matplotlib.use('Agg')
+                import io
+                import base64
+                
+                data = self.data_loader.data
+                if row_index >= len(data):
+                    return (None, None, "Invalid index", "Invalid index", 
+                        "Invalid row index", "", "", "", "", None)
+                
+                row = data.iloc[row_index]
+                
+                # DEBUG: Print what images we're loading
+                print(f"\n{'*'*60}")
+                print(f"APP.PY - Loading Pair #{row_index}")
+                print(f"{'*'*60}")
+                print(f"Image 1 filename: {row.get('image_1', 'MISSING')}")
+                print(f"Image 2 filename: {row.get('image_2', 'MISSING')}")
+                print(f"Image 1 URL: {row.get('stim_1', 'MISSING')}")
+                print(f"Image 2 URL: {row.get('stim_2', 'MISSING')}")
+                print(f"{'*'*60}\n")
+                
+                # Get images - now returns swap information
+                img1, img2, was_swapped = self.image_viewer.get_image_pair(data, row_index)
+                
+                # Verify which images were loaded
+                print(f"Image 1 loaded: {'SUCCESS' if img1 is not None else 'FAILED'}")
+                print(f"Image 2 loaded: {'SUCCESS' if img2 is not None else 'FAILED'}")
+                print(f"URLs were swapped: {was_swapped}")
+                
+                # Format captions
+                def format_captions_html(caption_text):
+                    if pd.isna(caption_text) or caption_text == 'No caption available':
+                        return '<div style="padding:10px; background:#f8f9fa; border-radius:5px;">No caption available</div>'
+                    
+                    captions = [c.strip() for c in str(caption_text).split('|')]
+                    
+                    if len(captions) == 1:
+                        return f'<div style="padding:10px; background:#f8f9fa; border-radius:5px;">{captions[0]}</div>'
+                    else:
+                        html = f'<div style="padding:10px; background:#f8f9fa; border-radius:5px;"><strong>{len(captions)} descriptions:</strong><ol style="margin:5px 0; padding-left:20px;">'
+                        for cap in captions:
+                            html += f'<li>{cap}</li>'
+                        html += '</ol></div>'
+                        return html
+                
+                # Get captions in correct order (swap if images were swapped)
+                if was_swapped:
+                    print("[APP.PY] Swapping captions to match swapped images")
+                    caption1_html = format_captions_html(row.get('image_2_description', 'No caption available'))
+                    caption2_html = format_captions_html(row.get('image_1_description', 'No caption available'))
+                else:
+                    caption1_html = format_captions_html(row.get('image_1_description', 'No caption available'))
+                    caption2_html = format_captions_html(row.get('image_2_description', 'No caption available'))
+                
+                # Get normalized values for bar plot
+                from analysis.corner_analyzer import CornerAnalyzer
                 
-                captions = [c.strip() for c in str(caption_text).split('|')]
+                # Get current brain measure from the last used one (or default to common)
+                brain_measure = getattr(self, '_current_brain_measure', 'cosine_similarity_roi_values_common')
                 
-                if len(captions) == 1:
-                    return f'<div style="padding:10px; background:#f8f9fa; border-radius:5px;">{captions[0]}</div>'
+                # Normalize the three main values for this pair
+                human_norm = CornerAnalyzer.normalize_series(data['human_judgement']).iloc[row_index]
+                brain_norm = CornerAnalyzer.normalize_series(data[brain_measure]).iloc[row_index]
+                
+                # Get ML model norm
+                current_ml_model = getattr(self, '_current_ml_model', None)
+                if current_ml_model is not None:
+                    try:
+                        if isinstance(current_ml_model, int) and current_ml_model < len(self.data_loader.ml_models):
+                            ml_column = self.data_loader.ml_models[current_ml_model]
+                            ml_norm = CornerAnalyzer.normalize_series(data[ml_column]).iloc[row_index]
+                        elif isinstance(current_ml_model, str) and current_ml_model.startswith('avg_'):
+                            ml_norm = CornerAnalyzer.normalize_series(data[current_ml_model]).iloc[row_index]
+                        else:
+                            ml_norm = 0.5  # default
+                    except Exception:
+                        ml_norm = 0.5
                 else:
-                    html = f'<div style="padding:10px; background:#f8f9fa; border-radius:5px;"><strong>{len(captions)} descriptions:</strong><ol style="margin:5px 0; padding-left:20px;">'
-                    for cap in captions:
-                        html += f'<li>{cap}</li>'
-                    html += '</ol></div>'
-                    return html
-            
-            caption1_html = format_captions_html(row.get('image_1_description', 'No caption available'))
-            caption2_html = format_captions_html(row.get('image_2_description', 'No caption available'))
-            
-            # Get normalized values
-            from analysis.corner_analyzer import CornerAnalyzer
-            
-            # Calculate averages if needed
-            if 'avg_vision' not in data.columns:
-                vision_models = [col for col in data.columns if 'BOLD5000_timm_' in col]
-                language_models = [col for col in data.columns if 'bert-' in col or 'deberta-' in col or 'sup-simcse' in col]
-                semantic_models = [col for col in data.columns if any(x in col for x in ["bm25", "rouge", "tf-idf", "co-occurrence"])]
+                    ml_norm = 0.5
+                
+                # Create bar plot
+                fig, ax = plt.subplots(figsize=(6, 4))
+                
+                categories = ['Human', 'Brain', 'ML']
+                values = [human_norm, brain_norm, ml_norm]
+                colors = ['#4A90E2', '#50C878', '#E24A4A']
+                
+                # Create bars
+                bars = ax.bar(categories, values, color=colors, alpha=0.8, edgecolor='black', linewidth=1.5)
+                
+                # Add value labels on top of bars
+                for bar, val in zip(bars, values):
+                    height = bar.get_height()
+                    ax.text(bar.get_x() + bar.get_width()/2., height + 0.02,
+                        f'{val:.3f}',
+                        ha='center', va='bottom', fontsize=11, fontweight='bold')
+                
+                # Styling
+                ax.set_ylabel('Normalized Value (0-1)', fontsize=11, fontweight='bold')
+                ax.set_xlabel('Measure', fontsize=11, fontweight='bold')
+                ax.set_title(f'Normalized Values for Pair #{row_index}', fontsize=12, fontweight='bold')
+                ax.set_ylim(0, 1.15)
+                ax.grid(axis='y', alpha=0.3, linestyle='--')
+                ax.set_axisbelow(True)
+                
+                # Style the plot
+                ax.spines['top'].set_visible(False)
+                ax.spines['right'].set_visible(False)
+                
+                plt.tight_layout()
                 
-                def normalize_models(model_list):
-                    if not model_list:
+                # Convert to base64 image
+                buf = io.BytesIO()
+                plt.savefig(buf, format='png', dpi=100, bbox_inches='tight')
+                buf.seek(0)
+                img_base64 = base64.b64encode(buf.read()).decode()
+                plt.close(fig)
+                
+                bar_plot_html = f'<img src="data:image/png;base64,{img_base64}" style="width: 100%; max-width: 500px; margin: 20px auto; display: block; border: 1px solid #ddd; border-radius: 5px; padding: 10px; background: white;" />'
+                
+                # Calculate averages if needed
+                if 'avg_vision' not in data.columns:
+                    vision_models = [col for col in data.columns if 'BOLD5000_timm_' in col]
+                    language_models = [col for col in data.columns if 'bert-' in col or 'deberta-' in col or 'sup-simcse' in col]
+                    semantic_models = [col for col in data.columns if any(x in col for x in ["bm25", "rouge", "tf-idf", "co-occurrence"])]
+                    
+                    def normalize_models(model_list):
+                        if not model_list:
+                            return pd.Series([0] * len(data))
+                        normalized_data = []
+                        for model in model_list:
+                            if model in data.columns:
+                                model_data = data[model]
+                                normalized = (model_data - model_data.min()) / (model_data.max() - model_data.min())
+                                normalized_data.append(normalized)
+                        if normalized_data:
+                            return pd.concat(normalized_data, axis=1).mean(axis=1)
                         return pd.Series([0] * len(data))
-                    normalized_data = []
-                    for model in model_list:
-                        if model in data.columns:
-                            model_data = data[model]
-                            normalized = (model_data - model_data.min()) / (model_data.max() - model_data.min())
-                            normalized_data.append(normalized)
-                    if normalized_data:
-                        return pd.concat(normalized_data, axis=1).mean(axis=1)
-                    return pd.Series([0] * len(data))
-                
-                data['avg_vision'] = normalize_models(vision_models)
-                data['avg_language'] = normalize_models(language_models) 
-                data['avg_semantic'] = normalize_models(semantic_models)
-            
-            # Get current model
-            current_ml_model = getattr(self, '_current_ml_model', None)
-            current_ml_name = getattr(self, '_current_ml_name', 'No model selected')
-            current_ml_score = 'N/A'
-            current_ml_norm = 'N/A'
-            
-            if current_ml_model is not None:
-                try:
-                    if isinstance(current_ml_model, int) and current_ml_model < len(self.data_loader.ml_models):
-                        ml_column = self.data_loader.ml_models[current_ml_model]
-                        current_ml_score = f"{row[ml_column]:.3f}"
-                        current_ml_norm = f"{CornerAnalyzer.normalize_series(data[ml_column]).iloc[row_index]:.3f}"
-                    elif isinstance(current_ml_model, str) and current_ml_model.startswith('avg_'):
-                        current_ml_score = f"{row[current_ml_model]:.3f}"
-                        current_ml_norm = f"{CornerAnalyzer.normalize_series(data[current_ml_model]).iloc[row_index]:.3f}"
-                except Exception:
-                    pass
-            
-            # Summary card HTML
-            summary_html = f"""
-            <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
-                <h3 style="margin: 0 0 10px 0;">Image Pair #{row_index} Summary</h3>
-                <div><strong>Images:</strong> {row['image_1']} vs {row['image_2']}</div>
-                <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 15px;">
-                    <div style="background: rgba(255,255,255,0.2); padding: 10px; border-radius: 5px; text-align: center;">
-                        <div style="font-size: 11px; opacity: 0.9; margin-bottom: 5px;">Human Rating</div>
-                        <div style="font-size: 20px; font-weight: bold;">{row['human_judgement']:.2f}/6</div>
-                    </div>
-                    <div style="background: rgba(255,255,255,0.2); padding: 10px; border-radius: 5px; text-align: center;">
-                        <div style="font-size: 11px; opacity: 0.9; margin-bottom: 5px;">Brain Similarity</div>
-                        <div style="font-size: 20px; font-weight: bold;">{row.get('cosine_similarity_roi_values_common', 0):.3f}</div>
+                    
+                    data['avg_vision'] = normalize_models(vision_models)
+                    data['avg_language'] = normalize_models(language_models) 
+                    data['avg_semantic'] = normalize_models(semantic_models)
+                
+                # Get current model
+                current_ml_model = getattr(self, '_current_ml_model', None)
+                current_ml_name = getattr(self, '_current_ml_name', 'No model selected')
+                current_ml_score = 'N/A'
+                current_ml_norm = 'N/A'
+                
+                if current_ml_model is not None:
+                    try:
+                        if isinstance(current_ml_model, int) and current_ml_model < len(self.data_loader.ml_models):
+                            ml_column = self.data_loader.ml_models[current_ml_model]
+                            current_ml_score = f"{row[ml_column]:.3f}"
+                            current_ml_norm = f"{CornerAnalyzer.normalize_series(data[ml_column]).iloc[row_index]:.3f}"
+                        elif isinstance(current_ml_model, str) and current_ml_model.startswith('avg_'):
+                            current_ml_score = f"{row[current_ml_model]:.3f}"
+                            current_ml_norm = f"{CornerAnalyzer.normalize_series(data[current_ml_model]).iloc[row_index]:.3f}"
+                    except Exception:
+                        pass
+                
+                # Summary card HTML - WITH DEBUG INFO AND NORMALIZED VALUES
+                summary_html = f"""
+                <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
+                    <h3 style="margin: 0 0 10px 0;">Image Pair #{row_index} Summary</h3>
+                    <div style="background: rgba(255,255,255,0.15); padding: 10px; border-radius: 5px; margin-bottom: 10px; font-family: monospace; font-size: 11px;">
+                        <strong>🔍 DEBUG INFO:</strong><br>
+                        Image 1 File: <code>{row['image_1']}</code><br>
+                        Image 2 File: <code>{row['image_2']}</code>
                     </div>
-                    <div style="background: rgba(255,255,255,0.2); padding: 10px; border-radius: 5px; text-align: center;">
-                        <div style="font-size: 11px; opacity: 0.9; margin-bottom: 5px;">ML Model</div>
-                        <div style="font-size: 20px; font-weight: bold;">{current_ml_score}</div>
+                    <div><strong>Images:</strong> {row['image_1']} vs {row['image_2']}</div>
+                    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 15px;">
+                        <div style="background: rgba(255,255,255,0.2); padding: 10px; border-radius: 5px; text-align: center;">
+                            <div style="font-size: 11px; opacity: 0.9; margin-bottom: 5px;">Human Rating</div>
+                            <div style="font-size: 20px; font-weight: bold;">{row['human_judgement']:.2f}/6</div>
+                            <div style="font-size: 11px; opacity: 0.8; margin-top: 5px;">Norm: {human_norm:.3f}</div>
+                        </div>
+                        <div style="background: rgba(255,255,255,0.2); padding: 10px; border-radius: 5px; text-align: center;">
+                            <div style="font-size: 11px; opacity: 0.9; margin-bottom: 5px;">Brain Similarity</div>
+                            <div style="font-size: 20px; font-weight: bold;">{row.get(brain_measure, 0):.3f}</div>
+                            <div style="font-size: 11px; opacity: 0.8; margin-top: 5px;">Norm: {brain_norm:.3f}</div>
+                        </div>
+                        <div style="background: rgba(255,255,255,0.2); padding: 10px; border-radius: 5px; text-align: center;">
+                            <div style="font-size: 11px; opacity: 0.9; margin-bottom: 5px;">ML Model</div>
+                            <div style="font-size: 20px; font-weight: bold;">{current_ml_score}</div>
+                            <div style="font-size: 11px; opacity: 0.8; margin-top: 5px;">Norm: {ml_norm:.3f}</div>
+                        </div>
                     </div>
                 </div>
-            </div>
-            """
-            
-            # Brain measures table
-            brain_html = f"""
-            <table style="width: 100%; border-collapse: collapse;">
-            <thead>
-                <tr style="background: #f8f9fa;">
-                    <th style="padding: 10px; text-align: left; border-bottom: 2px solid #dee2e6;">Measure</th>
-                    <th style="padding: 10px; text-align: left; border-bottom: 2px solid #dee2e6;">Raw</th>
-                    <th style="padding: 10px; text-align: left; border-bottom: 2px solid #dee2e6;">Norm</th>
-                    <th style="padding: 10px; text-align: left; border-bottom: 2px solid #dee2e6;">Type</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr style="border-bottom: 1px solid #e9ecef;">
-                    <td style="padding: 8px 10px;"><strong>Cosine - Common</strong></td>
-                    <td style="padding: 8px 10px;">{row.get('cosine_similarity_roi_values_common', 0):.3f}</td>
-                    <td style="padding: 8px 10px;">{CornerAnalyzer.normalize_series(data['cosine_similarity_roi_values_common']).iloc[row_index]:.3f}</td>
-                    <td style="padding: 8px 10px;">All regions</td>
-                </tr>
-                <tr style="border-bottom: 1px solid #e9ecef;">
-                    <td style="padding: 8px 10px;"><strong>Cosine - Early</strong></td>
-                    <td style="padding: 8px 10px;">{row.get('cosine_similarity_roi_values_early', 0):.3f}</td>
-                    <td style="padding: 8px 10px;">{CornerAnalyzer.normalize_series(data['cosine_similarity_roi_values_early']).iloc[row_index]:.3f}</td>
-                    <td style="padding: 8px 10px;">Low-level</td>
-                </tr>
-                <tr style="border-bottom: 1px solid #e9ecef;">
-                    <td style="padding: 8px 10px;"><strong>Cosine - Late</strong></td>
-                    <td style="padding: 8px 10px;">{row.get('cosine_similarity_roi_values_late', 0):.3f}</td>
-                    <td style="padding: 8px 10px;">{CornerAnalyzer.normalize_series(data['cosine_similarity_roi_values_late']).iloc[row_index]:.3f}</td>
-                    <td style="padding: 8px 10px;">High-level</td>
-                </tr>
-                <tr style="border-bottom: 1px solid #e9ecef;">
-                    <td style="padding: 8px 10px;"><strong>Pearson - Common</strong></td>
-                    <td style="padding: 8px 10px;">{row.get('pearson_correlation_roi_values_common', 0):.3f}</td>
-                    <td style="padding: 8px 10px;">{CornerAnalyzer.normalize_series(data['pearson_correlation_roi_values_common']).iloc[row_index]:.3f}</td>
-                    <td style="padding: 8px 10px;">All regions</td>
-                </tr>
-                <tr style="border-bottom: 1px solid #e9ecef;">
-                    <td style="padding: 8px 10px;"><strong>Pearson - Early</strong></td>
-                    <td style="padding: 8px 10px;">{row.get('pearson_correlation_roi_values_early', 0):.3f}</td>
-                    <td style="padding: 8px 10px;">{CornerAnalyzer.normalize_series(data['pearson_correlation_roi_values_early']).iloc[row_index]:.3f}</td>
-                    <td style="padding: 8px 10px;">Low-level</td>
-                </tr>
-                <tr style="border-bottom: 1px solid #e9ecef;">
-                    <td style="padding: 8px 10px;"><strong>Pearson - Late</strong></td>
-                    <td style="padding: 8px 10px;">{row.get('pearson_correlation_roi_values_late', 0):.3f}</td>
-                    <td style="padding: 8px 10px;">{CornerAnalyzer.normalize_series(data['pearson_correlation_roi_values_late']).iloc[row_index]:.3f}</td>
-                    <td style="padding: 8px 10px;">High-level</td>
-                </tr>
-            </tbody>
-            </table>
-            """
-            
-            # Model performance HTML
-            model_html = f"""
-            <div style="margin-bottom: 15px;">
-                <strong>Category Averages</strong>
-                <table style="width: 100%; border-collapse: collapse; margin: 10px 0;">
+                """
+                
+                # Brain measures table
+                brain_html = f"""
+                <table style="width: 100%; border-collapse: collapse;">
                 <thead>
                     <tr style="background: #f8f9fa;">
-                        <th style="padding: 10px; text-align: left; border-bottom: 2px solid #dee2e6;">Category</th>
+                        <th style="padding: 10px; text-align: left; border-bottom: 2px solid #dee2e6;">Measure</th>
                         <th style="padding: 10px; text-align: left; border-bottom: 2px solid #dee2e6;">Raw</th>
                         <th style="padding: 10px; text-align: left; border-bottom: 2px solid #dee2e6;">Norm</th>
+                        <th style="padding: 10px; text-align: left; border-bottom: 2px solid #dee2e6;">Type</th>
                     </tr>
                 </thead>
                 <tbody>
                     <tr style="border-bottom: 1px solid #e9ecef;">
-                        <td style="padding: 8px 10px;">Vision</td>
-                        <td style="padding: 8px 10px;">{row.get('avg_vision', 0):.3f}</td>
-                        <td style="padding: 8px 10px;">{CornerAnalyzer.normalize_series(data['avg_vision']).iloc[row_index]:.3f}</td>
+                        <td style="padding: 8px 10px;"><strong>Cosine - Common</strong></td>
+                        <td style="padding: 8px 10px;">{row.get('cosine_similarity_roi_values_common', 0):.3f}</td>
+                        <td style="padding: 8px 10px;">{CornerAnalyzer.normalize_series(data['cosine_similarity_roi_values_common']).iloc[row_index]:.3f}</td>
+                        <td style="padding: 8px 10px;">All regions</td>
                     </tr>
                     <tr style="border-bottom: 1px solid #e9ecef;">
-                        <td style="padding: 8px 10px;">Language</td>
-                        <td style="padding: 8px 10px;">{row.get('avg_language', 0):.3f}</td>
-                        <td style="padding: 8px 10px;">{CornerAnalyzer.normalize_series(data['avg_language']).iloc[row_index]:.3f}</td>
+                        <td style="padding: 8px 10px;"><strong>Cosine - Early</strong></td>
+                        <td style="padding: 8px 10px;">{row.get('cosine_similarity_roi_values_early', 0):.3f}</td>
+                        <td style="padding: 8px 10px;">{CornerAnalyzer.normalize_series(data['cosine_similarity_roi_values_early']).iloc[row_index]:.3f}</td>
+                        <td style="padding: 8px 10px;">Low-level</td>
                     </tr>
                     <tr style="border-bottom: 1px solid #e9ecef;">
-                        <td style="padding: 8px 10px;">Semantic</td>
-                        <td style="padding: 8px 10px;">{row.get('avg_semantic', 0):.3f}</td>
-                        <td style="padding: 8px 10px;">{CornerAnalyzer.normalize_series(data['avg_semantic']).iloc[row_index]:.3f}</td>
-                    </tr>
-                </tbody>
-                </table>
-            </div>
-            <div>
-                <strong>Current Selection</strong>
-                <table style="width: 100%; border-collapse: collapse; margin: 10px 0;">
-                <thead>
-                    <tr style="background: #f8f9fa;">
-                        <th style="padding: 10px; text-align: left; border-bottom: 2px solid #dee2e6;">Info</th>
-                        <th style="padding: 10px; text-align: left; border-bottom: 2px solid #dee2e6;">Value</th>
+                        <td style="padding: 8px 10px;"><strong>Cosine - Late</strong></td>
+                        <td style="padding: 8px 10px;">{row.get('cosine_similarity_roi_values_late', 0):.3f}</td>
+                        <td style="padding: 8px 10px;">{CornerAnalyzer.normalize_series(data['cosine_similarity_roi_values_late']).iloc[row_index]:.3f}</td>
+                        <td style="padding: 8px 10px;">High-level</td>
                     </tr>
-                </thead>
-                <tbody>
                     <tr style="border-bottom: 1px solid #e9ecef;">
-                        <td style="padding: 8px 10px;">Model</td>
-                        <td style="padding: 8px 10px;">{current_ml_name}</td>
+                        <td style="padding: 8px 10px;"><strong>Pearson - Common</strong></td>
+                        <td style="padding: 8px 10px;">{row.get('pearson_correlation_roi_values_common', 0):.3f}</td>
+                        <td style="padding: 8px 10px;">{CornerAnalyzer.normalize_series(data['pearson_correlation_roi_values_common']).iloc[row_index]:.3f}</td>
+                        <td style="padding: 8px 10px;">All regions</td>
                     </tr>
                     <tr style="border-bottom: 1px solid #e9ecef;">
-                        <td style="padding: 8px 10px;">Raw</td>
-                        <td style="padding: 8px 10px;">{current_ml_score}</td>
+                        <td style="padding: 8px 10px;"><strong>Pearson - Early</strong></td>
+                        <td style="padding: 8px 10px;">{row.get('pearson_correlation_roi_values_early', 0):.3f}</td>
+                        <td style="padding: 8px 10px;">{CornerAnalyzer.normalize_series(data['pearson_correlation_roi_values_early']).iloc[row_index]:.3f}</td>
+                        <td style="padding: 8px 10px;">Low-level</td>
                     </tr>
                     <tr style="border-bottom: 1px solid #e9ecef;">
-                        <td style="padding: 8px 10px;">Norm</td>
-                        <td style="padding: 8px 10px;">{current_ml_norm}</td>
+                        <td style="padding: 8px 10px;"><strong>Pearson - Late</strong></td>
+                        <td style="padding: 8px 10px;">{row.get('pearson_correlation_roi_values_late', 0):.3f}</td>
+                        <td style="padding: 8px 10px;">{CornerAnalyzer.normalize_series(data['pearson_correlation_roi_values_late']).iloc[row_index]:.3f}</td>
+                        <td style="padding: 8px 10px;">High-level</td>
                     </tr>
                 </tbody>
                 </table>
-                <div style="margin-top: 15px; font-size: 12px; color: #666;">
-                <strong>Dataset:</strong> Vision: {len([col for col in data.columns if 'BOLD5000_timm_' in col])}, 
-                Language: {len([col for col in data.columns if 'bert-' in col or 'deberta-' in col or 'sup-simcse' in col])}, 
-                Semantic: {len([col for col in data.columns if any(x in col for x in ["bm25", "rouge", "tf-idf", "co-occurrence"])])} models
+                """
+                
+                # Model performance HTML
+                model_html = f"""
+                <div style="margin-bottom: 15px;">
+                    <strong>Category Averages</strong>
+                    <table style="width: 100%; border-collapse: collapse; margin: 10px 0;">
+                    <thead>
+                        <tr style="background: #f8f9fa;">
+                            <th style="padding: 10px; text-align: left; border-bottom: 2px solid #dee2e6;">Category</th>
+                            <th style="padding: 10px; text-align: left; border-bottom: 2px solid #dee2e6;">Raw</th>
+                            <th style="padding: 10px; text-align: left; border-bottom: 2px solid #dee2e6;">Norm</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr style="border-bottom: 1px solid #e9ecef;">
+                            <td style="padding: 8px 10px;">Vision</td>
+                            <td style="padding: 8px 10px;">{row.get('avg_vision', 0):.3f}</td>
+                            <td style="padding: 8px 10px;">{CornerAnalyzer.normalize_series(data['avg_vision']).iloc[row_index]:.3f}</td>
+                        </tr>
+                        <tr style="border-bottom: 1px solid #e9ecef;">
+                            <td style="padding: 8px 10px;">Language</td>
+                            <td style="padding: 8px 10px;">{row.get('avg_language', 0):.3f}</td>
+                            <td style="padding: 8px 10px;">{CornerAnalyzer.normalize_series(data['avg_language']).iloc[row_index]:.3f}</td>
+                        </tr>
+                        <tr style="border-bottom: 1px solid #e9ecef;">
+                            <td style="padding: 8px 10px;">Semantic</td>
+                            <td style="padding: 8px 10px;">{row.get('avg_semantic', 0):.3f}</td>
+                            <td style="padding: 8px 10px;">{CornerAnalyzer.normalize_series(data['avg_semantic']).iloc[row_index]:.3f}</td>
+                        </tr>
+                    </tbody>
+                    </table>
                 </div>
-            </div>
-            """
-            
-            # Model rankings
-            rankings = self.get_model_rankings_for_pair(row_index)
-            rankings_html = ""
-            for category in ['vision', 'language', 'semantic']:
-                if category in rankings:
-                    category_name = category.title()
-                    rankings_html += f"""
-                    <div style="margin: 15px 0;">
-                    <strong>{category_name} Models:</strong>
-                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 10px;">
-                        <div>
-                            <table style="width: 100%; border-collapse: collapse;">
-                            <thead><tr style="background: #f8f9fa;"><th style="padding: 8px; text-align: left; border-bottom: 2px solid #dee2e6;">Top 3 Best</th><th style="padding: 8px; text-align: left; border-bottom: 2px solid #dee2e6;">Score</th></tr></thead>
-                            <tbody>
-                    """
-                    for model, score in rankings[category]['best']:
-                        clean_name = model.replace('BOLD5000_timm_', '').replace('_sim_partial', '') if 'BOLD5000_timm_' in model else model
-                        rankings_html += f'<tr style="border-bottom: 1px solid #e9ecef;"><td style="padding: 6px 8px;">{clean_name}</td><td style="padding: 6px 8px;">{score:.3f}</td></tr>'
-                    
-                    rankings_html += """
-                            </tbody>
-                            </table>
+                <div>
+                    <strong>Current Selection</strong>
+                    <table style="width: 100%; border-collapse: collapse; margin: 10px 0;">
+                    <thead>
+                        <tr style="background: #f8f9fa;">
+                            <th style="padding: 10px; text-align: left; border-bottom: 2px solid #dee2e6;">Info</th>
+                            <th style="padding: 10px; text-align: left; border-bottom: 2px solid #dee2e6;">Value</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr style="border-bottom: 1px solid #e9ecef;">
+                            <td style="padding: 8px 10px;">Model</td>
+                            <td style="padding: 8px 10px;">{current_ml_name}</td>
+                        </tr>
+                        <tr style="border-bottom: 1px solid #e9ecef;">
+                            <td style="padding: 8px 10px;">Raw</td>
+                            <td style="padding: 8px 10px;">{current_ml_score}</td>
+                        </tr>
+                        <tr style="border-bottom: 1px solid #e9ecef;">
+                            <td style="padding: 8px 10px;">Norm</td>
+                            <td style="padding: 8px 10px;">{current_ml_norm}</td>
+                        </tr>
+                    </tbody>
+                    </table>
+                    <div style="margin-top: 15px; font-size: 12px; color: #666;">
+                    <strong>Dataset:</strong> Vision: {len([col for col in data.columns if 'BOLD5000_timm_' in col])}, 
+                    Language: {len([col for col in data.columns if 'bert-' in col or 'deberta-' in col or 'sup-simcse' in col])}, 
+                    Semantic: {len([col for col in data.columns if any(x in col for x in ["bm25", "rouge", "tf-idf", "co-occurrence"])])} models
+                    </div>
+                </div>
+                """
+                
+                # Model rankings
+                rankings = self.get_model_rankings_for_pair(row_index)
+                rankings_html = ""
+                for category in ['vision', 'language', 'semantic']:
+                    if category in rankings:
+                        category_name = category.title()
+                        rankings_html += f"""
+                        <div style="margin: 15px 0;">
+                        <strong>{category_name} Models:</strong>
+                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 10px;">
+                            <div>
+                                <table style="width: 100%; border-collapse: collapse;">
+                                <thead><tr style="background: #f8f9fa;"><th style="padding: 8px; text-align: left; border-bottom: 2px solid #dee2e6;">Top 3 Best</th><th style="padding: 8px; text-align: left; border-bottom: 2px solid #dee2e6;">Score</th></tr></thead>
+                                <tbody>
+                        """
+                        for model, score in rankings[category]['best']:
+                            clean_name = model.replace('BOLD5000_timm_', '').replace('_sim_partial', '') if 'BOLD5000_timm_' in model else model
+                            rankings_html += f'<tr style="border-bottom: 1px solid #e9ecef;"><td style="padding: 6px 8px;">{clean_name}</td><td style="padding: 6px 8px;">{score:.3f}</td></tr>'
+                        
+                        rankings_html += """
+                                </tbody>
+                                </table>
+                            </div>
+                            <div>
+                                <table style="width: 100%; border-collapse: collapse;">
+                                <thead><tr style="background: #f8f9fa;"><th style="padding: 8px; text-align: left; border-bottom: 2px solid #dee2e6;">Top 3 Worst</th><th style="padding: 8px; text-align: left; border-bottom: 2px solid #dee2e6;">Score</th></tr></thead>
+                                <tbody>
+                        """
+                        for model, score in rankings[category]['worst']:
+                            clean_name = model.replace('BOLD5000_timm_', '').replace('_sim_partial', '') if 'BOLD5000_timm_' in model else model
+                            rankings_html += f'<tr style="border-bottom: 1px solid #e9ecef;"><td style="padding: 6px 8px;">{clean_name}</td><td style="padding: 6px 8px;">{score:.3f}</td></tr>'
+                        
+                        rankings_html += """
+                                </tbody>
+                                </table>
+                            </div>
                         </div>
-                        <div>
-                            <table style="width: 100%; border-collapse: collapse;">
-                            <thead><tr style="background: #f8f9fa;"><th style="padding: 8px; text-align: left; border-bottom: 2px solid #dee2e6;">Top 3 Worst</th><th style="padding: 8px; text-align: left; border-bottom: 2px solid #dee2e6;">Score</th></tr></thead>
-                            <tbody>
-                    """
-                    for model, score in rankings[category]['worst']:
-                        clean_name = model.replace('BOLD5000_timm_', '').replace('_sim_partial', '') if 'BOLD5000_timm_' in model else model
-                        rankings_html += f'<tr style="border-bottom: 1px solid #e9ecef;"><td style="padding: 6px 8px;">{clean_name}</td><td style="padding: 6px 8px;">{score:.3f}</td></tr>'
-                    
-                    rankings_html += """
-                            </tbody>
-                            </table>
                         </div>
-                    </div>
-                    </div>
-                    """
-            
-            # ROI plot
-            roi_plot = self.roi_analyzer.create_roi_comparison_plot(data, row_index)
-            
-            return (img1, img2, caption1_html, caption2_html, summary_html, 
-                    brain_html, model_html, rankings_html, roi_plot)
-            
-        except Exception as e:
-            error_msg = f"<div style='color: red;'>Error: {e}</div>"
-            return (None, None, error_msg, error_msg, error_msg, error_msg, error_msg, error_msg, None)
+                        """
+                
+                # ROI plot
+                print(f"\nCalling ROI analyzer for pair #{row_index}...")
+                roi_plot = self.roi_analyzer.create_roi_comparison_plot(data, row_index)
+                print(f"ROI plot created successfully\n")
+                
+                return (img1, img2, caption1_html, caption2_html, summary_html, 
+                        bar_plot_html, brain_html, model_html, rankings_html, roi_plot)
+                
+            except Exception as e:
+                error_msg = f"<div style='color: red;'>Error: {e}</div>"
+                import traceback
+                traceback.print_exc()
+                return (None, None, error_msg, error_msg, error_msg, error_msg, error_msg, error_msg, error_msg, None)
     
     def set_current_model(self, ml_model_selection, ml_name):
         """Store the current ML model selection for display in image viewer"""
@@ -429,12 +529,248 @@ class SimilarityApp:
     def get_corner_interpretation(self, corner_name: str) -> str:
         """Get interpretation of a corner - delegates to CornerAnalyzer"""
         return self.corner_analyzer.get_interpretation(corner_name)
+    
+    # Add this new method to the SimilarityApp class in app.py
+
+    # Add this new method to the SimilarityApp class in app.py
+
+    def get_point_corner_distances(self, row_index: int, brain_measure: str, ml_model_selection: Union[str, int]) -> Tuple[str, Optional[Any]]:
+        """Get distances from a specific point to all 8 corners and create a 3D visualization"""
+        try:
+            data = self.data_loader.data
+            if row_index >= len(data):
+                return "Invalid row index", None
+            
+            # Get the data for this point
+            row = data.iloc[row_index]
+            ml_data, ml_name = self.plot_generator.get_model_data(ml_model_selection)
+            
+            # Get raw values
+            human_raw = row['human_judgement']
+            brain_raw = row[brain_measure]
+            ml_raw = ml_data.iloc[row_index]
+            
+            # Normalize to 0-1 for distance calculations
+            from analysis.corner_analyzer import CornerAnalyzer
+            human_norm = CornerAnalyzer.normalize_series(data['human_judgement']).iloc[row_index]
+            brain_norm = CornerAnalyzer.normalize_series(data[brain_measure]).iloc[row_index]
+            ml_norm = CornerAnalyzer.normalize_series(ml_data).iloc[row_index]
+            
+            # Define all 8 corners
+            corners = {
+                '(0,0,0)': (0, 0, 0),
+                '(0,0,1)': (0, 0, 1),
+                '(0,1,0)': (0, 1, 0),
+                '(0,1,1)': (0, 1, 1),
+                '(1,0,0)': (1, 0, 0),
+                '(1,0,1)': (1, 0, 1),
+                '(1,1,0)': (1, 1, 0),
+                '(1,1,1)': (1, 1, 1)
+            }
+            
+            # Calculate distances to each corner
+            point = np.array([human_norm, brain_norm, ml_norm])
+            distances = {}
+            for corner_name, corner_coords in corners.items():
+                corner_array = np.array(corner_coords)
+                distance = np.linalg.norm(point - corner_array)
+                distances[corner_name] = distance
+            
+            # Sort by distance
+            sorted_distances = sorted(distances.items(), key=lambda x: x[1])
+            
+            # Get corner interpretations
+            corner_meanings = {
+                '(0,0,0)': 'All Low - General disagreement on similarity',
+                '(0,0,1)': 'ML High, Human & Brain Low',
+                '(0,1,0)': 'Brain High, Human & ML Low',
+                '(0,1,1)': 'Brain & ML High, Human Low',
+                '(1,0,0)': 'Human High, Brain & ML Low',
+                '(1,0,1)': 'Human & ML High, Brain Low',
+                '(1,1,0)': 'Human & Brain High, ML Low',
+                '(1,1,1)': 'All High - Strong agreement on similarity'
+            }
+            
+            # Create HTML table
+            html = f"""
+            <div style="background: #f8f9fa; padding: 20px; border-radius: 10px; margin: 20px 0;">
+                <h3 style="margin-top: 0;">Distance to Each Corner (Normalized Space)</h3>
+                <div style="background: white; padding: 15px; border-radius: 5px; margin-bottom: 15px;">
+                    <strong>Current Point (Normalized 0-1):</strong><br>
+                    Human: {human_norm:.3f} | Brain: {brain_norm:.3f} | ML: {ml_norm:.3f}
+                </div>
+                <table style="width: 100%; border-collapse: collapse; background: white;">
+                    <thead>
+                        <tr style="background: #667eea; color: white;">
+                            <th style="padding: 12px; text-align: left;">Rank</th>
+                            <th style="padding: 12px; text-align: left;">Corner (H,B,M)</th>
+                            <th style="padding: 12px; text-align: left;">Distance</th>
+                            <th style="padding: 12px; text-align: left;">Meaning</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+            """
+            
+            for rank, (corner_name, distance) in enumerate(sorted_distances, 1):
+                row_color = "#e8f4f8" if rank == 1 else "white"
+                star = "⭐ " if rank == 1 else ""
+                html += f"""
+                    <tr style="background: {row_color}; border-bottom: 1px solid #dee2e6;">
+                        <td style="padding: 10px;"><strong>{star}{rank}</strong></td>
+                        <td style="padding: 10px; font-family: monospace;">{corner_name}</td>
+                        <td style="padding: 10px;"><strong>{distance:.4f}</strong></td>
+                        <td style="padding: 10px; font-size: 12px;">{corner_meanings[corner_name]}</td>
+                    </tr>
+                """
+            
+            html += """
+                    </tbody>
+                </table>
+                <div style="margin-top: 15px; font-size: 12px; color: #666;">
+                    Distances calculated in normalized 0-1 space using Euclidean distance. 
+                    Closer corners indicate which extreme this pair is nearest to.
+                </div>
+            </div>
+            """
+            
+            # Create 3D plot with the point highlighted
+            import plotly.graph_objects as go
+            
+            # Normalize all data for the 3D plot
+            human_all_norm = CornerAnalyzer.normalize_series(data['human_judgement'])
+            brain_all_norm = CornerAnalyzer.normalize_series(data[brain_measure])
+            ml_all_norm = CornerAnalyzer.normalize_series(ml_data)
+            
+            fig = go.Figure()
+            
+            # Add all other points in gray
+            other_indices = [i for i in range(len(data)) if i != row_index]
+            fig.add_trace(go.Scatter3d(
+                x=human_all_norm.iloc[other_indices],
+                y=brain_all_norm.iloc[other_indices],
+                z=ml_all_norm.iloc[other_indices],
+                mode='markers',
+                marker=dict(size=3, color='lightgray', opacity=0.3),
+                name='Other pairs',
+                hoverinfo='skip'
+            ))
+            
+            # Add the current point in VERY VISIBLE bright color with larger size
+            fig.add_trace(go.Scatter3d(
+                x=[human_norm],
+                y=[brain_norm],
+                z=[ml_norm],
+                mode='markers',
+                marker=dict(
+                    size=25,  # Much larger
+                    color='#FF0000',  # Bright red
+                    symbol='diamond',
+                    line=dict(color='yellow', width=4),  # Yellow outline for extra visibility
+                    opacity=1.0
+                ),
+                name=f'⭐ Current Pair #{row_index}',
+                hovertemplate=f'<b>⭐ CURRENT PAIR #{row_index}</b><br>' +
+                            f'Human: {human_norm:.3f}<br>' +
+                            f'Brain: {brain_norm:.3f}<br>' +
+                            f'ML: {ml_norm:.3f}<br>' +
+                            f'<extra></extra>'
+            ))
+            
+            # Add corner points with larger size
+            corner_x = [c[0] for c in corners.values()]
+            corner_y = [c[1] for c in corners.values()]
+            corner_z = [c[2] for c in corners.values()]
+            corner_labels = [f"{name}<br>{corner_meanings[name]}" for name in corners.keys()]
+            
+            fig.add_trace(go.Scatter3d(
+                x=corner_x,
+                y=corner_y,
+                z=corner_z,
+                mode='markers+text',
+                marker=dict(size=10, color='#4169E1', symbol='square', opacity=0.8),  # Larger, more visible
+                text=list(corners.keys()),
+                textposition='top center',
+                textfont=dict(size=9, color='darkblue', family='Arial Black'),
+                name='Corners',
+                hovertext=corner_labels,
+                hoverinfo='text'
+            ))
+            
+            # Add lines from current point to ALL corners with distance labels
+            for corner_name, distance in distances.items():
+                corner_coords = corners[corner_name]
+                
+                # Determine line color based on distance (closer = more orange, farther = more gray)
+                # Normalize distance for color (distances range from 0 to sqrt(3) ≈ 1.732)
+                normalized_dist = distance / 1.732
+                if normalized_dist < 0.33:
+                    line_color = '#FF4500'  # OrangeRed for closest
+                    line_width = 4
+                elif normalized_dist < 0.67:
+                    line_color = '#FFA500'  # Orange for medium
+                    line_width = 3
+                else:
+                    line_color = '#C0C0C0'  # Silver for farthest
+                    line_width = 2
+                
+                # Add the line
+                fig.add_trace(go.Scatter3d(
+                    x=[human_norm, corner_coords[0]],
+                    y=[brain_norm, corner_coords[1]],
+                    z=[ml_norm, corner_coords[2]],
+                    mode='lines',
+                    line=dict(color=line_color, width=line_width, dash='dot'),
+                    showlegend=False,
+                    hoverinfo='skip'
+                ))
+                
+                # Add text label at midpoint of line showing distance
+                mid_x = (human_norm + corner_coords[0]) / 2
+                mid_y = (brain_norm + corner_coords[1]) / 2
+                mid_z = (ml_norm + corner_coords[2]) / 2
+                
+                fig.add_trace(go.Scatter3d(
+                    x=[mid_x],
+                    y=[mid_y],
+                    z=[mid_z],
+                    mode='text',
+                    text=[f'{distance:.3f}'],
+                    textfont=dict(size=20, color=line_color),
+                    showlegend=False,
+                    hoverinfo='skip'
+                ))
+            
+            brain_name = brain_measure.replace('cosine_similarity_roi_values_', '').replace('pearson_correlation_roi_values_', '').title()
+            measure_type = "Cosine" if "cosine" in brain_measure else "Pearson"
+            
+            fig.update_layout(
+                title=f'Pair #{row_index} Position in Normalized 3D Space<br><sub>Red diamond shows current pair, blue squares show corners, dashed lines to 3 nearest corners</sub>',
+                scene=dict(
+                    xaxis_title='Human (norm)',
+                    yaxis_title=f'Brain {measure_type} (norm)',
+                    zaxis_title=f'{ml_name} (norm)',
+                    xaxis=dict(range=[0, 1]),
+                    yaxis=dict(range=[0, 1]),
+                    zaxis=dict(range=[0, 1]),
+                    camera=dict(eye=dict(x=1.5, y=1.5, z=1.5))
+                ),
+                height=600,
+                showlegend=True,
+                legend=dict(x=0.7, y=0.9)
+            )
+            
+            return html, fig
+            
+        except Exception as e:
+            import traceback
+            traceback.print_exc()
+            return f"<div style='color: red;'>Error calculating distances: {e}</div>", None
 
 def main():
     """Main function to run the application"""
     try:
         # Create and launch the app
-        app = SimilarityApp('overall_database3.csv')
+        app = SimilarityApp('data/overall_database3.csv')
         app.launch(
             server_name="0.0.0.0",
             server_port=7860,

data/Final_similarity_matrix.csv

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5ff83586ea8a37e91968eb0b73f23edebd61fdd88f815bef34a0f727c6d5ef35
+size 39820273

data/Final_similarity_matrix2.csv

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0cdd2d60df4ebd8de7533d82f7df5d4f8733d06134c641795d2f014c5de561b2
+size 64812304

data/overall_database.csv

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:08b27836f940efc44631b48b31964c02ae9ae0b7ef0c35ec4b33f1181e9e5480
+size 44624446

data/overall_database2.csv

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5dc09b2d3975398f84c9a734e0eac9f3a9db044a961600a91d8d34f5e1288bcb
+size 46365658

data/overall_database3.csv

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0a3c421e159026ec81497882cb4bc156f85cf93b21e5a3799eaf83bd653537aa
+size 46506013

gui/corner_cases_tab.py

@@ -3,6 +3,13 @@
 
 import gradio as gr
 from typing import TYPE_CHECKING
+import plotly.graph_objects as go
+from plotly.subplots import make_subplots
+import matplotlib.pyplot as plt
+import matplotlib
+matplotlib.use('Agg')  # Use non-interactive backend
+import io
+import base64
 
 if TYPE_CHECKING:
     from similarity_analysis.app import SimilarityApp
@@ -19,7 +26,6 @@ class CornerCasesTab:
         ml_options = self.app.data_loader.get_ml_model_options()
         
         gr.Markdown("## Corner Cases Analysis")
-        # gr.Markdown("Find the top 10 image pairs closest to each corner of the 3D space (Human × Brain × ML)")
         
         with gr.Row():
             with gr.Column(scale=1):
@@ -82,6 +88,49 @@ class CornerCasesTab:
             'results_display': results_display
         }
     
+    def create_single_pair_bar_plot(self, result, pair_index):
+        """Create a bar plot showing normalized values for a single pair using matplotlib"""
+        
+        # Create figure
+        fig, ax = plt.subplots(figsize=(6, 4))
+        
+        categories = ['Human', 'Brain', 'ML']
+        values = [result['human_norm'], result['brain_norm'], result['ml_norm']]
+        colors = ['#4A90E2', '#50C878', '#E24A4A']
+        
+        # Create bars
+        bars = ax.bar(categories, values, color=colors, alpha=0.8, edgecolor='black', linewidth=1.5)
+        
+        # Add value labels on top of bars
+        for bar, val in zip(bars, values):
+            height = bar.get_height()
+            ax.text(bar.get_x() + bar.get_width()/2., height + 0.02,
+                   f'{val:.3f}',
+                   ha='center', va='bottom', fontsize=11, fontweight='bold')
+        
+        # Styling
+        ax.set_ylabel('Normalized Value (0-1)', fontsize=11, fontweight='bold')
+        ax.set_xlabel('Measure', fontsize=11, fontweight='bold')
+        ax.set_title(f'Normalized Values for Pair #{pair_index}', fontsize=12, fontweight='bold')
+        ax.set_ylim(0, 1.15)
+        ax.grid(axis='y', alpha=0.3, linestyle='--')
+        ax.set_axisbelow(True)
+        
+        # Style the plot
+        ax.spines['top'].set_visible(False)
+        ax.spines['right'].set_visible(False)
+        
+        plt.tight_layout()
+        
+        # Convert to base64 image
+        buf = io.BytesIO()
+        plt.savefig(buf, format='png', dpi=100, bbox_inches='tight')
+        buf.seek(0)
+        img_base64 = base64.b64encode(buf.read()).decode()
+        plt.close(fig)
+        
+        return f'<img src="data:image/png;base64,{img_base64}" style="width: 100%; max-width: 450px; margin: 10px auto; display: block; border: 1px solid #ddd; border-radius: 5px; padding: 5px; background: white;" />'
+    
     def connect_events(self, components):
         """Connect event handlers for this tab"""
         
@@ -115,7 +164,7 @@ class CornerCasesTab:
                 
                 if show_images:
                     # Show results with images in a grid
-                    output += "<div style='display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 20px; margin-bottom: 30px;'>"
+                    output += "<div style='display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 20px; margin-bottom: 30px; margin-top: 20px;'>"
                     
                     for rank, result in enumerate(results, 1):
                         output += "<div style='border: 1px solid #ddd; padding: 15px; border-radius: 8px; background: #f9f9f9;'>"
@@ -123,8 +172,28 @@ class CornerCasesTab:
                         
                         # Get image URLs and captions
                         data = self.app.data_loader.data
-                        img1_url = data.iloc[result['index']]['stim_1']
-                        img2_url = data.iloc[result['index']]['stim_2']
+                        pair_row = data.iloc[result['index']]
+                        
+                        # Get URLs
+                        img1_url = pair_row['stim_1']
+                        img2_url = pair_row['stim_2']
+                        
+                        # Check if we need to swap URLs to match image_1 and image_2 filenames
+                        image_1_filename = str(pair_row.get('image_1', ''))
+                        image_2_filename = str(pair_row.get('image_2', ''))
+                        
+                        stim_1_matches_image_1 = image_1_filename in str(img1_url)
+                        stim_1_matches_image_2 = image_2_filename in str(img1_url)
+                        
+                        # Swap if needed
+                        if stim_1_matches_image_2 and not stim_1_matches_image_1:
+                            img1_url, img2_url = img2_url, img1_url
+                            # Also swap captions
+                            caption1_data = pair_row.get('image_2_description', 'No caption available')
+                            caption2_data = pair_row.get('image_1_description', 'No caption available')
+                        else:
+                            caption1_data = pair_row.get('image_1_description', 'No caption available')
+                            caption2_data = pair_row.get('image_2_description', 'No caption available')
                         
                         # Format captions (handle multiple descriptions separated by |)
                         def format_caption_html(caption_text):
@@ -140,8 +209,8 @@ class CornerCasesTab:
                                 html += "</ol>"
                                 return html
                         
-                        caption1 = format_caption_html(data.iloc[result['index']].get('image_1_description', 'No caption available'))
-                        caption2 = format_caption_html(data.iloc[result['index']].get('image_2_description', 'No caption available'))
+                        caption1 = format_caption_html(caption1_data)
+                        caption2 = format_caption_html(caption2_data)
                         
                         # Display images side by side
                         output += "<div style='display: flex; gap: 10px; margin: 10px 0;'>"
@@ -170,12 +239,19 @@ class CornerCasesTab:
                         output += f"<tr><td>ML:</td><td>{result['ml_norm']:.3f}</td></tr>"
                         output += "</table>"
                         
+                        # Add bar plot for this specific pair
+                        try:
+                            bar_plot_html = self.create_single_pair_bar_plot(result, result['index'])
+                            output += f"<div style='margin: 15px 0;'>{bar_plot_html}</div>"
+                        except Exception as e:
+                            output += f"<div style='color: red; padding: 10px;'>Error creating plot: {e}</div>"
+                        
                         output += "</div>"
                     
                     output += "</div>"
                 else:
                     # Text-only table format
-                    output += "<table style='width: 100%; border-collapse: collapse; margin-bottom: 30px;'>"
+                    output += "<table style='width: 100%; border-collapse: collapse; margin-bottom: 30px; margin-top: 20px;'>"
                     output += "<thead><tr style='background: #f0f0f0;'>"
                     output += "<th style='border: 1px solid #ddd; padding: 8px;'>Rank</th>"
                     output += "<th style='border: 1px solid #ddd; padding: 8px;'>Pair #</th>"

gui/viewer_tab.py

@@ -26,6 +26,25 @@ class ViewerTab:
                     info=f"Enter 0 to {len(self.app.data_loader.data)-1}",
                     precision=0
                 )
+                
+                # Add dropdowns for corner distance calculation
+                brain_options = self.app.data_loader.get_brain_measure_options()
+                ml_options = self.app.data_loader.get_ml_model_options()
+                
+                brain_dropdown = gr.Dropdown(
+                    choices=brain_options,
+                    value=brain_options[0][1] if brain_options else None,
+                    label="Brain Measure (for 3D position)",
+                    info="Select brain measure for corner distance calculation"
+                )
+                
+                ml_dropdown = gr.Dropdown(
+                    choices=ml_options,
+                    value=ml_options[0][1] if ml_options else None,
+                    label="ML Model (for 3D position)",
+                    info="Select ML model for corner distance calculation"
+                )
+                
                 show_btn = gr.Button("Show Images & Details", variant="primary", size="lg")
         
         # Images side by side
@@ -44,6 +63,12 @@ class ViewerTab:
         with gr.Row():
             summary_card = gr.HTML("<div>Select an image pair to see summary</div>")
         
+        # Bar plot for normalized values
+        with gr.Row():
+            with gr.Column():
+                gr.Markdown("### Normalized Values Visualization")
+                bar_plot_display = gr.HTML("<div>Bar plot will appear here</div>")
+        
         # Brain measures and Model performance side by side
         with gr.Row():
             with gr.Column(scale=1):
@@ -66,55 +91,99 @@ class ViewerTab:
                 gr.Markdown("### ROI Brain Activation Comparison")
                 roi_plot = gr.Plot(label="Side-by-Side ROI Values", show_label=False)
         
+        # NEW: Corner distances section
+        with gr.Row():
+            with gr.Column():
+                gr.Markdown("### Position in 3D Space & Corner Distances")
+                gr.Markdown("This shows where this specific pair sits in the normalized 3D space (Human × Brain × ML) and its distance to each of the 8 corners.")
+                corner_distance_table = gr.HTML("<div>Select parameters and click 'Show Images & Details' to see corner distances</div>")
+        
+        with gr.Row():
+            with gr.Column():
+                corner_3d_plot = gr.Plot(label="3D Position Visualization", show_label=False)
+        
         return {
             'row_input': row_input,
+            'brain_dropdown': brain_dropdown,
+            'ml_dropdown': ml_dropdown,
             'show_btn': show_btn,
             'image1_display': image1_display,
             'image2_display': image2_display,
             'caption1_display': caption1_display,
             'caption2_display': caption2_display,
             'summary_card': summary_card,
+            'bar_plot_display': bar_plot_display,
             'brain_table': brain_table,
             'model_table': model_table,
             'rankings_display': rankings_display,
-            'roi_plot': roi_plot
+            'roi_plot': roi_plot,
+            'corner_distance_table': corner_distance_table,
+            'corner_3d_plot': corner_3d_plot
         }
     
     def connect_events(self, components):
         """Connect event handlers for this tab"""
-        def show_images_and_details(row_idx):
+        def show_images_and_details(row_idx, brain_measure, ml_model_selection):
+            # Store the current brain measure and ML model in the app for the bar plot
+            self.app._current_brain_measure = brain_measure
+            self.app._current_ml_model = ml_model_selection
+            
+            # Get basic image pair info
             results = self.app.show_image_pair_multi(int(row_idx) if row_idx is not None else 0)
-            return results
+            
+            # Get corner distances and 3D plot
+            corner_html, corner_plot = self.app.get_point_corner_distances(
+                int(row_idx) if row_idx is not None else 0,
+                brain_measure,
+                ml_model_selection
+            )
+            
+            # Return all outputs including the new corner distance outputs
+            return (*results, corner_html, corner_plot)
         
-        # Connect with multiple outputs
+        # Connect with multiple outputs (added bar_plot_display)
         components['show_btn'].click(
             fn=show_images_and_details,
-            inputs=[components['row_input']],
+            inputs=[
+                components['row_input'],
+                components['brain_dropdown'],
+                components['ml_dropdown']
+            ],
             outputs=[
                 components['image1_display'], 
                 components['image2_display'],
                 components['caption1_display'],
                 components['caption2_display'],
                 components['summary_card'],
+                components['bar_plot_display'],
                 components['brain_table'],
                 components['model_table'],
                 components['rankings_display'],
-                components['roi_plot']
+                components['roi_plot'],
+                components['corner_distance_table'],
+                components['corner_3d_plot']
             ]
         )
         
         components['row_input'].change(
             fn=show_images_and_details,
-            inputs=[components['row_input']],
+            inputs=[
+                components['row_input'],
+                components['brain_dropdown'],
+                components['ml_dropdown']
+            ],
             outputs=[
                 components['image1_display'], 
                 components['image2_display'],
                 components['caption1_display'],
                 components['caption2_display'],
                 components['summary_card'],
+                components['bar_plot_display'],
                 components['brain_table'],
                 components['model_table'],
                 components['rankings_display'],
-                components['roi_plot']
+                components['roi_plot'],
+                components['corner_distance_table'],
+                components['corner_3d_plot']
             ]
         )

visualization/image_viewer.py

@@ -24,16 +24,58 @@ class ImageViewer:
             return placeholder
     
     @staticmethod
-    def get_image_pair(data: pd.DataFrame, row_index: int) -> Tuple[Optional[Image.Image], Optional[Image.Image]]:
-        """Get image pair for a specific row"""
+    def get_image_pair(data: pd.DataFrame, row_index: int) -> Tuple[Optional[Image.Image], Optional[Image.Image], bool]:
+        """Get image pair for a specific row
+        
+        Returns:
+            tuple: (img1, img2, was_swapped)
+            - img1: Image for image_1
+            - img2: Image for image_2  
+            - was_swapped: True if URLs were swapped to match filenames
+        """
         if row_index >= len(data):
-            return None, None
+            return None, None, False
         
         row = data.iloc[row_index]
+        was_swapped = False
+        
+        # DEBUG: Check which columns exist
+        print(f"\n[IMAGE_VIEWER DEBUG] Available URL columns: {[col for col in row.index if 'stim' in col.lower() or 'url' in col.lower()]}")
+        print(f"[IMAGE_VIEWER DEBUG] image_1: {row.get('image_1', 'MISSING')}")
+        print(f"[IMAGE_VIEWER DEBUG] image_2: {row.get('image_2', 'MISSING')}")
+        
+        # Try different possible column names for URLs
+        # Priority: use stim_1/stim_2 which are the URL columns
         img1_url = row.get('stim_1', '')
         img2_url = row.get('stim_2', '')
         
+        print(f"[IMAGE_VIEWER DEBUG] Loading stim_1 URL: {img1_url[:80] if img1_url else 'EMPTY'}...")
+        print(f"[IMAGE_VIEWER DEBUG] Loading stim_2 URL: {img2_url[:80] if img2_url else 'EMPTY'}...")
+        
+        # Check if stim_1 corresponds to image_1 or image_2 by looking at the filename in the URL
+        # If the URL contains the image_1 filename, then stim_1 = image_1
+        # Otherwise they might be swapped
+        image_1_filename = str(row.get('image_1', ''))
+        image_2_filename = str(row.get('image_2', ''))
+        
+        # Check if we need to swap
+        stim_1_matches_image_1 = image_1_filename in str(img1_url)
+        stim_1_matches_image_2 = image_2_filename in str(img1_url)
+        
+        print(f"[IMAGE_VIEWER DEBUG] stim_1 contains image_1 filename? {stim_1_matches_image_1}")
+        print(f"[IMAGE_VIEWER DEBUG] stim_1 contains image_2 filename? {stim_1_matches_image_2}")
+        
+        # If stim_1 contains image_2's filename, we need to swap
+        if stim_1_matches_image_2 and not stim_1_matches_image_1:
+            print("[IMAGE_VIEWER DEBUG] ⚠️  SWAPPING: stim_1 corresponds to image_2, swapping URLs")
+            img1_url, img2_url = img2_url, img1_url
+            was_swapped = True
+        elif stim_1_matches_image_1:
+            print("[IMAGE_VIEWER DEBUG] ✓ No swap needed: stim_1 corresponds to image_1")
+        else:
+            print("[IMAGE_VIEWER DEBUG] ⚠️  WARNING: Could not determine correspondence, assuming stim_1=image_1")
+        
         img1 = ImageViewer.load_image_from_url(img1_url) if img1_url else None
         img2 = ImageViewer.load_image_from_url(img2_url) if img2_url else None
         
-        return img1, img2
+        return img1, img2, was_swapped