Update src/streamlit_app.py

src/streamlit_app.py

@@ -2,6 +2,8 @@ import streamlit as st
 import cv2
 import numpy as np
 import networkx as nx
+import matplotlib
+matplotlib.use('Agg')  # Use non-interactive backend
 import matplotlib.pyplot as plt
 import pandas as pd
 import io
@@ -10,18 +12,7 @@ from PIL import Image
 import plotly.graph_objects as go
 from plotly.subplots import make_subplots
 import plotly.express as px
-
-# --- Session state initialization ---
-def initialize_session_state():
-    """Initialize all session state variables"""
-    if 'uploaded_image' not in st.session_state:
-        st.session_state['uploaded_image'] = None
-    if 'analysis_complete' not in st.session_state:
-        st.session_state['analysis_complete'] = False
-    if 'analysis_results' not in st.session_state:
-        st.session_state['analysis_results'] = {}
-    if 'processing' not in st.session_state:
-        st.session_state['processing'] = False
+import json
 
 # Fix for Hugging Face Spaces permissions
 import os
@@ -29,10 +20,7 @@ import tempfile
 os.environ['STREAMLIT_BROWSER_GATHER_USAGE_STATS'] = 'false'
 os.environ['MPLCONFIGDIR'] = tempfile.gettempdir()
 
-# Initialize session state
-initialize_session_state()
-
-# Page configuration
+# Page configuration - MUST be first Streamlit command
 st.set_page_config(
     page_title="Kolam Design Analyzer",
     page_icon="🎨",
@@ -40,7 +28,29 @@ st.set_page_config(
     initial_sidebar_state="expanded"
 )
 
-# Custom CSS for professional styling
+# --- Session state initialization ---
+def initialize_session_state():
+    """Initialize all session state variables"""
+    defaults = {
+        'uploaded_image': None,
+        'analysis_complete': False,
+        'analysis_results': {},
+        'processing': False,
+        'image_uploaded': False,
+        'analysis_hash': None,
+        'cached_figures': {},
+        'params_changed': False,
+        'file_hash': None
+    }
+    
+    for key, value in defaults.items():
+        if key not in st.session_state:
+            st.session_state[key] = value
+
+# Initialize session state
+initialize_session_state()
+
+# Custom CSS for professional styling and anti-flicker
 st.markdown("""
 <style>
     .main-header {
@@ -61,22 +71,6 @@ st.markdown("""
         margin: 0.5rem 0;
     }
     
-    .analysis-section {
-        background: #f8f9fa;
-        padding: 1.5rem;
-        border-radius: 10px;
-        margin: 1rem 0;
-    }
-    
-    .upload-section {
-        border: 2px dashed #FF6B35;
-        padding: 2rem;
-        border-radius: 10px;
-        text-align: center;
-        margin: 1rem 0;
-        background: #fff9f7;
-    }
-    
     .stButton > button {
         background: linear-gradient(90deg, #FF6B35 0%, #F7931E 100%);
         color: white;
@@ -87,15 +81,34 @@ st.markdown("""
         transition: all 0.3s;
     }
     
-    .stButton > button:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
-    }
-    
-    /* Prevent page jumping */
+    /* Anti-flicker CSS */
     .main .block-container {
         padding-top: 1rem;
         padding-bottom: 1rem;
+        max-width: 100%;
+    }
+    
+    .stTabs [data-baseweb="tab-list"] {
+        gap: 2px;
+    }
+    
+    .stTabs [data-baseweb="tab"] {
+        height: 50px;
+    }
+    
+    .element-container {
+        width: 100% !important;
+    }
+    
+    /* Prevent layout shifts */
+    .stPlotlyChart, .stPyplot {
+        width: 100%;
+        min-height: 400px;
+    }
+    
+    /* Stabilize metrics */
+    [data-testid="metric-container"] {
+        min-height: 80px;
     }
 </style>
 """, unsafe_allow_html=True)
@@ -109,56 +122,6 @@ st.markdown("""
 </div>
 """, unsafe_allow_html=True)
 
-# Sidebar with consistent parameters
-with st.sidebar:
-    st.markdown("### 🔧 Analysis Parameters")
-    
-    # Use session state for parameters to prevent re-runs
-    if 'params' not in st.session_state:
-        st.session_state['params'] = {
-            'image_size': 256,
-            'threshold_value': 127,
-            'canny_low': 30,
-            'canny_high': 100,
-            'max_corners': 100,
-            'min_line_length': 5
-        }
-    
-    image_size = st.slider("Image Processing Size", 128, 512, 
-                          st.session_state['params']['image_size'], step=64)
-    threshold_value = st.slider("Binary Threshold", 50, 200, 
-                               st.session_state['params']['threshold_value'])
-    canny_low = st.slider("Canny Low Threshold", 10, 100, 
-                         st.session_state['params']['canny_low'])
-    canny_high = st.slider("Canny High Threshold", 50, 200, 
-                          st.session_state['params']['canny_high'])
-    max_corners = st.slider("Maximum Corners", 50, 200, 
-                           st.session_state['params']['max_corners'])
-    min_line_length = st.slider("Minimum Line Length", 3, 20, 
-                               st.session_state['params']['min_line_length'])
-    
-    # Update parameters in session state
-    st.session_state['params'].update({
-        'image_size': image_size,
-        'threshold_value': threshold_value,
-        'canny_low': canny_low,
-        'canny_high': canny_high,
-        'max_corners': max_corners,
-        'min_line_length': min_line_length
-    })
-    
-    st.markdown("---")
-    st.markdown("### 📊 About This Tool")
-    st.info("This application uses computer vision and graph theory to analyze traditional Kolam designs, extracting geometric patterns and design principles.")
-    
-    # Reset button
-    if st.button("🔄 Reset Analysis"):
-        st.session_state['analysis_complete'] = False
-        st.session_state['uploaded_image'] = None
-        st.session_state['analysis_results'] = {}
-        st.session_state['processing'] = False
-        st.rerun()
-
 class KolamAnalyzer:
     def __init__(self):
         self.cipher = None
@@ -211,7 +174,6 @@ class KolamAnalyzer:
                 return []
             return [tuple(pt.ravel()) for pt in corners.astype(int)]
         except Exception as e:
-            st.error(f"Error in node detection: {str(e)}")
             return []
     
     def detect_edges(self, edges, nodes, min_line_length):
@@ -242,7 +204,6 @@ class KolamAnalyzer:
                 
             return graph_edges
         except Exception as e:
-            st.error(f"Error in edge detection: {str(e)}")
             return []
     
     def connect_nearby_nodes(self, nodes, max_distance=30):
@@ -266,7 +227,6 @@ class KolamAnalyzer:
                 G.add_edge(n1, n2)
             return G
         except Exception as e:
-            st.error(f"Error in graph building: {str(e)}")
             return nx.Graph()
     
     def extract_graph_features(self, G):
@@ -314,168 +274,249 @@ class KolamAnalyzer:
                 "density": round(nx.density(G), 4) if num_nodes > 1 else 0
             }
         except Exception as e:
-            st.error(f"Error in feature extraction: {str(e)}")
             return {}
-    
-    def encrypt_graph(self, G):
-        """Encrypt graph data for security"""
-        try:
-            if not self.cipher:
-                self.generate_encryption_key()
-            
-            adj_matrix = nx.to_numpy_array(G)
-            adj_bytes = adj_matrix.tobytes()
-            encrypted = self.cipher.encrypt(adj_bytes)
-            return encrypted
-        except Exception as e:
-            return None
-    
-    def create_interactive_graph(self, G):
-        """Create interactive graph visualization using Plotly"""
-        try:
-            pos = nx.get_node_attributes(G, 'pos')
-            
-            if not pos:
-                # If no positions, use spring layout
-                pos = nx.spring_layout(G)
-            
-            # Extract edges
-            edge_x = []
-            edge_y = []
-            for edge in G.edges():
-                x0, y0 = pos[edge[0]]
-                x1, y1 = pos[edge[1]]
-                edge_x.extend([x0, x1, None])
-                edge_y.extend([y0, y1, None])
-            
-            # Create edge trace
-            edge_trace = go.Scatter(
-                x=edge_x, y=edge_y,
-                line=dict(width=2, color='#FF6B35'),
-                hoverinfo='none',
-                mode='lines'
-            )
-            
-            # Extract nodes
-            node_x = []
-            node_y = []
-            node_text = []
-            node_degree = []
-            
-            for node in G.nodes():
-                x, y = pos[node]
-                node_x.append(x)
-                node_y.append(y)
-                degree = G.degree(node)
-                node_degree.append(degree)
-                node_text.append(f'Node {node}<br>Degree: {degree}')
-            
-            # Create node trace
-            node_trace = go.Scatter(
-                x=node_x, y=node_y,
-                mode='markers',
-                hoverinfo='text',
-                text=node_text,
-                marker=dict(
-                    size=[max(10, d*3) for d in node_degree],
-                    color=node_degree,
-                    colorscale='Viridis',
-                    colorbar=dict(
-                        thickness=15,
-                        len=0.5,
-                        x=1.02,
-                        title="Node Degree"
-                    ),
-                    line=dict(width=2, color='white')
-                )
-            )
-            
-            # Create figure
-            fig = go.Figure(data=[edge_trace, node_trace],
-                           layout=go.Layout(
-                                title='Interactive Kolam Graph Structure',
-                                titlefont_size=16,
-                                showlegend=False,
-                                hovermode='closest',
-                                margin=dict(b=20,l=5,r=5,t=40),
-                                annotations=[ dict(
-                                    text="Node size represents degree centrality",
-                                    showarrow=False,
-                                    xref="paper", yref="paper",
-                                    x=0.005, y=-0.002,
-                                    xanchor="left", yanchor="bottom",
-                                    font=dict(size=12)
-                                )],
-                                xaxis=dict(showgrid=False, zeroline=False, showticklabels=False),
-                                yaxis=dict(showgrid=False, zeroline=False, showticklabels=False),
-                                plot_bgcolor='white'
-                           ))
-            
-            return fig
-        except Exception as e:
-            st.error(f"Error creating interactive graph: {str(e)}")
-            return None
 
-# Initialize analyzer
+# Initialize analyzer - cached to prevent recreation
 @st.cache_resource
 def get_analyzer():
     return KolamAnalyzer()
 
 analyzer = get_analyzer()
 
-# Main content area
-col1, col2 = st.columns([1, 2])
-
 # Check library availability
+PANDAS_AVAILABLE = True
+PLOTLY_AVAILABLE = True
+CRYPTO_AVAILABLE = True
+
 try:
     import pandas as pd
-    PANDAS_AVAILABLE = True
-except ImportError as e:
-    st.warning("⚠️ Pandas not available due to NumPy compatibility. Using basic data structures.")
+except ImportError:
     PANDAS_AVAILABLE = False
 
 try:
     import plotly.graph_objects as go
     import plotly.express as px
-    PLOTLY_AVAILABLE = True
-except ImportError as e:
-    st.warning("⚠️ Plotly not available due to NumPy compatibility. Using matplotlib for visualizations.")
+except ImportError:
     PLOTLY_AVAILABLE = False
 
 try:
     from cryptography.fernet import Fernet
-    CRYPTO_AVAILABLE = True
-except ImportError as e:
-    st.warning("⚠️ Cryptography not available. Encryption features disabled.")
+except ImportError:
     CRYPTO_AVAILABLE = False
 
+# Helper function to create stable matplotlib figures
+@st.cache_data(hash_funcs={np.ndarray: lambda x: x.tobytes()})
+def create_processing_figure(original_img, thresh_img, edges_img):
+    """Create cached matplotlib figure for image processing"""
+    fig, axes = plt.subplots(1, 3, figsize=(15, 5))
+    
+    axes[0].imshow(original_img, cmap='gray')
+    axes[0].set_title('Original Grayscale', fontsize=12, fontweight='bold')
+    axes[0].axis('off')
+    
+    axes[1].imshow(thresh_img, cmap='gray')
+    axes[1].set_title('Binary Threshold', fontsize=12, fontweight='bold')
+    axes[1].axis('off')
+    
+    axes[2].imshow(edges_img, cmap='gray')
+    axes[2].set_title('Edge Detection', fontsize=12, fontweight='bold')
+    axes[2].axis('off')
+    
+    plt.tight_layout()
+    return fig
+
+@st.cache_data(hash_funcs={np.ndarray: lambda x: x.tobytes()})
+def create_nodes_figure(original_img, nodes):
+    """Create cached matplotlib figure for detected nodes"""
+    img_with_nodes = original_img.copy()
+    for x, y in nodes:
+        cv2.circle(img_with_nodes, (int(x), int(y)), 3, (255), -1)
+    
+    fig, ax = plt.subplots(1, 1, figsize=(8, 8))
+    ax.imshow(img_with_nodes, cmap='gray')
+    ax.set_title(f'Detected Nodes: {len(nodes)}', fontsize=14, fontweight='bold')
+    ax.axis('off')
+    return fig
+
+@st.cache_data(hash_funcs={nx.Graph: lambda g: str(sorted(g.edges()))})
+def create_interactive_graph(G):
+    """Create cached interactive graph visualization"""
+    if G.number_of_nodes() == 0:
+        return None
+        
+    pos = nx.get_node_attributes(G, 'pos')
+    
+    if not pos:
+        pos = nx.spring_layout(G, seed=42)  # Fixed seed for consistency
+    
+    # Extract edges
+    edge_x = []
+    edge_y = []
+    for edge in G.edges():
+        x0, y0 = pos[edge[0]]
+        x1, y1 = pos[edge[1]]
+        edge_x.extend([x0, x1, None])
+        edge_y.extend([y0, y1, None])
+    
+    # Create edge trace
+    edge_trace = go.Scatter(
+        x=edge_x, y=edge_y,
+        line=dict(width=2, color='#FF6B35'),
+        hoverinfo='none',
+        mode='lines',
+        name='Edges'
+    )
+    
+    # Extract nodes
+    node_x = []
+    node_y = []
+    node_text = []
+    node_degree = []
+    
+    for node in G.nodes():
+        x, y = pos[node]
+        node_x.append(x)
+        node_y.append(y)
+        degree = G.degree(node)
+        node_degree.append(degree)
+        node_text.append(f'Node {node}<br>Degree: {degree}')
+    
+    # Create node trace
+    node_trace = go.Scatter(
+        x=node_x, y=node_y,
+        mode='markers',
+        hoverinfo='text',
+        text=node_text,
+        name='Nodes',
+        marker=dict(
+            size=[max(10, d*3) for d in node_degree],
+            color=node_degree,
+            colorscale='Viridis',
+            colorbar=dict(
+                thickness=15,
+                len=0.5,
+                x=1.02,
+                title="Node Degree"
+            ),
+            line=dict(width=2, color='white')
+        )
+    )
+    
+    # Create figure
+    fig = go.Figure(
+        data=[edge_trace, node_trace],
+        layout=go.Layout(
+            title='Interactive Kolam Graph Structure',
+            titlefont_size=16,
+            showlegend=False,
+            hovermode='closest',
+            margin=dict(b=20,l=5,r=5,t=40),
+            annotations=[dict(
+                text="Node size represents degree centrality",
+                showarrow=False,
+                xref="paper", yref="paper",
+                x=0.005, y=-0.002,
+                xanchor="left", yanchor="bottom",
+                font=dict(size=12)
+            )],
+            xaxis=dict(showgrid=False, zeroline=False, showticklabels=False),
+            yaxis=dict(showgrid=False, zeroline=False, showticklabels=False),
+            plot_bgcolor='white',
+            height=500  # Fixed height to prevent layout shifts
+        )
+    )
+    
+    return fig
+
+# Sidebar with parameters
+with st.sidebar:
+    st.markdown("### 🔧 Analysis Parameters")
+    
+    # Initialize default parameters
+    if 'params' not in st.session_state:
+        st.session_state['params'] = {
+            'image_size': 256,
+            'threshold_value': 127,
+            'canny_low': 30,
+            'canny_high': 100,
+            'max_corners': 100,
+            'min_line_length': 5
+        }
+    
+    # Get current parameters
+    current_params = st.session_state['params'].copy()
+    
+    # Parameter sliders
+    image_size = st.slider("Image Processing Size", 128, 512, current_params['image_size'], step=64)
+    threshold_value = st.slider("Binary Threshold", 50, 200, current_params['threshold_value'])
+    canny_low = st.slider("Canny Low Threshold", 10, 100, current_params['canny_low'])
+    canny_high = st.slider("Canny High Threshold", 50, 200, current_params['canny_high'])
+    max_corners = st.slider("Maximum Corners", 50, 200, current_params['max_corners'])
+    min_line_length = st.slider("Minimum Line Length", 3, 20, current_params['min_line_length'])
+    
+    # Update parameters and check if changed
+    new_params = {
+        'image_size': image_size,
+        'threshold_value': threshold_value,
+        'canny_low': canny_low,
+        'canny_high': canny_high,
+        'max_corners': max_corners,
+        'min_line_length': min_line_length
+    }
+    
+    if new_params != st.session_state['params']:
+        st.session_state['params'] = new_params
+        st.session_state['params_changed'] = True
+    
+    st.markdown("---")
+    st.markdown("### 📊 About This Tool")
+    st.info("This application uses computer vision and graph theory to analyze traditional Kolam designs, extracting geometric patterns and design principles.")
+    
+    # Reset button
+    if st.button("🔄 Reset Analysis"):
+        for key in ['analysis_complete', 'analysis_results', 'uploaded_image', 
+                   'processing', 'analysis_hash', 'cached_figures', 'file_hash']:
+            if key in st.session_state:
+                del st.session_state[key]
+        st.cache_data.clear()
+        st.rerun()
+
+# Main content area
+col1, col2 = st.columns([1, 2], gap="medium")
+
 with col1:
     st.markdown("### 📤 Upload Kolam Image")
     
     uploaded_file = st.file_uploader(
         "Choose a Kolam image...",
         type=["png", "jpg", "jpeg"],
-        help="Upload a clear image of a Kolam design for analysis",
-        key="file_uploader"
+        help="Upload a clear image of a Kolam design for analysis"
     )
 
-    # Handle file upload
+    # Handle file upload with hash checking
     if uploaded_file is not None:
-        # Only process if it's a new file
-        if (st.session_state['uploaded_image'] is None or 
-            uploaded_file.name != getattr(st.session_state.get('uploaded_file'), 'name', None)):
+        file_hash = hash(uploaded_file.read())
+        uploaded_file.seek(0)  # Reset file pointer
+        
+        if st.session_state['file_hash'] != file_hash:
             st.session_state['uploaded_image'] = Image.open(uploaded_file)
-            st.session_state['uploaded_file'] = uploaded_file
+            st.session_state['file_hash'] = file_hash
             st.session_state['analysis_complete'] = False
             st.session_state['analysis_results'] = {}
+            st.cache_data.clear()  # Clear cache for new image
 
     # Display uploaded image
     if st.session_state['uploaded_image'] is not None:
         st.image(st.session_state['uploaded_image'], caption="Uploaded Kolam", use_column_width=True)
         
         # Analysis button
-        if st.button("🔍 Analyze Kolam Design", key="analyze_btn", disabled=st.session_state.get('processing', False)):
+        analyze_disabled = (st.session_state.get('processing', False) or 
+                          (st.session_state.get('analysis_complete', False) and 
+                           not st.session_state.get('params_changed', False)))
+        
+        if st.button("🔍 Analyze Kolam Design", disabled=analyze_disabled):
             st.session_state['processing'] = True
+            st.session_state['params_changed'] = False
             
             with st.spinner("Analyzing Kolam design..."):
                 try:
@@ -527,106 +568,80 @@ with col1:
 with col2:
     st.markdown("### 📊 Analysis Results")
     
-    if st.session_state['analysis_complete'] and st.session_state['analysis_results']:
+    if st.session_state.get('analysis_complete', False) and st.session_state.get('analysis_results'):
         results = st.session_state['analysis_results']
         
-        # Create tabs for different visualizations
+        # Create stable tabs
         tab1, tab2, tab3, tab4 = st.tabs(["🖼️ Image Processing", "📈 Graph Analysis", "📊 Features", "🔐 Security"])
         
         with tab1:
             st.markdown("#### Image Processing Pipeline")
             
-            try:
-                # Create subplot for processed images
-                fig, axes = plt.subplots(1, 3, figsize=(15, 5))
-                
-                axes[0].imshow(results['original_img'], cmap='gray')
-                axes[0].set_title('Original Grayscale', fontsize=12, fontweight='bold')
-                axes[0].axis('off')
-                
-                axes[1].imshow(results['thresh_img'], cmap='gray')
-                axes[1].set_title('Binary Threshold', fontsize=12, fontweight='bold')
-                axes[1].axis('off')
-                
-                axes[2].imshow(results['edges_img'], cmap='gray')
-                axes[2].set_title('Edge Detection', fontsize=12, fontweight='bold')
-                axes[2].axis('off')
-                
-                plt.tight_layout()
-                st.pyplot(fig)
-                plt.close()
-                
-                # Show detected nodes
-                st.markdown("#### Detected Corner Points")
-                img_with_nodes = results['original_img'].copy()
-                for x, y in results['nodes']:
-                    cv2.circle(img_with_nodes, (int(x), int(y)), 3, (255), -1)
-                
-                fig_nodes, ax_nodes = plt.subplots(1, 1, figsize=(8, 8))
-                ax_nodes.imshow(img_with_nodes, cmap='gray')
-                ax_nodes.set_title(f'Detected Nodes: {len(results["nodes"])}', 
-                                  fontsize=14, fontweight='bold')
-                ax_nodes.axis('off')
-                st.pyplot(fig_nodes)
-                plt.close()
-            except Exception as e:
-                st.error(f"Error displaying image processing results: {str(e)}")
+            # Use cached figure creation
+            fig = create_processing_figure(
+                results['original_img'], 
+                results['thresh_img'], 
+                results['edges_img']
+            )
+            st.pyplot(fig, clear_figure=True)
+            
+            # Show detected nodes with cached figure
+            st.markdown("#### Detected Corner Points")
+            fig_nodes = create_nodes_figure(results['original_img'], results['nodes'])
+            st.pyplot(fig_nodes, clear_figure=True)
         
         with tab2:
             st.markdown("#### Interactive Graph Visualization")
             
-            try:
-                # Create interactive graph
-                if results['graph'].number_of_nodes() > 0:
-                    fig_interactive = analyzer.create_interactive_graph(results['graph'])
-                    if fig_interactive:
-                        st.plotly_chart(fig_interactive, use_container_width=True)
-                else:
-                    st.warning("No graph structure detected in the image.")
-                
-                # Graph statistics
-                col_a, col_b = st.columns(2)
-                with col_a:
-                    st.metric("Total Nodes", results['features'].get('num_nodes', 0))
-                    st.metric("Total Edges", results['features'].get('num_edges', 0))
-                    st.metric("Graph Density", results['features'].get('density', 0))
-                
-                with col_b:
-                    st.metric("Average Degree", results['features'].get('avg_degree', 0))
-                    st.metric("Number of Cycles", results['features'].get('num_cycles', 0))
-                    st.metric("Connected Components", results['features'].get('num_components', 0))
-            except Exception as e:
-                st.error(f"Error displaying graph analysis: {str(e)}")
+            # Create interactive graph with caching
+            fig_interactive = create_interactive_graph(results['graph'])
+            if fig_interactive:
+                st.plotly_chart(fig_interactive, use_container_width=True, key="main_graph")
+            else:
+                st.warning("No graph structure detected in the image.")
+            
+            # Stable graph statistics
+            col_a, col_b = st.columns(2)
+            with col_a:
+                st.metric("Total Nodes", results['features'].get('num_nodes', 0))
+                st.metric("Total Edges", results['features'].get('num_edges', 0))
+                st.metric("Graph Density", results['features'].get('density', 0))
+            
+            with col_b:
+                st.metric("Average Degree", results['features'].get('avg_degree', 0))
+                st.metric("Number of Cycles", results['features'].get('num_cycles', 0))
+                st.metric("Connected Components", results['features'].get('num_components', 0))
         
         with tab3:
             st.markdown("#### Mathematical Properties")
             
-            try:
-                # Create metrics dataframe
-                if PANDAS_AVAILABLE:
-                    features_df = pd.DataFrame([
-                        {"Property": "Nodes", "Value": results['features'].get('num_nodes', 0)},
-                        {"Property": "Edges", "Value": results['features'].get('num_edges', 0)},
-                        {"Property": "Average Degree", "Value": results['features'].get('avg_degree', 0)},
-                        {"Property": "Maximum Degree", "Value": results['features'].get('max_degree', 0)},
-                        {"Property": "Minimum Degree", "Value": results['features'].get('min_degree', 0)},
-                        {"Property": "Cycles", "Value": results['features'].get('num_cycles', 0)},
-                        {"Property": "Graph Density", "Value": results['features'].get('density', 0)},
-                        {"Property": "Average Betweenness", "Value": results['features'].get('avg_betweenness', 0)},
-                        {"Property": "Average Closeness", "Value": results['features'].get('avg_closeness', 0)},
-                        {"Property": "Connected", "Value": "Yes" if results['features'].get('is_connected', False) else "No"},
-                        {"Property": "Components", "Value": results['features'].get('num_components', 0)}
-                    ])
-                    
-                    st.dataframe(features_df, use_container_width=True)
-                else:
-                    # Display as simple table without pandas
-                    for key, value in results['features'].items():
-                        st.write(f"**{key.replace('_', ' ').title()}**: {value}")
+            # Create stable dataframe
+            if PANDAS_AVAILABLE:
+                features_data = [
+                    {"Property": "Nodes", "Value": results['features'].get('num_nodes', 0)},
+                    {"Property": "Edges", "Value": results['features'].get('num_edges', 0)},
+                    {"Property": "Average Degree", "Value": results['features'].get('avg_degree', 0)},
+                    {"Property": "Maximum Degree", "Value": results['features'].get('max_degree', 0)},
+                    {"Property": "Minimum Degree", "Value": results['features'].get('min_degree', 0)},
+                    {"Property": "Cycles", "Value": results['features'].get('num_cycles', 0)},
+                    {"Property": "Graph Density", "Value": results['features'].get('density', 0)},
+                    {"Property": "Average Betweenness", "Value": results['features'].get('avg_betweenness', 0)},
+                    {"Property": "Average Closeness", "Value": results['features'].get('avg_closeness', 0)},
+                    {"Property": "Connected", "Value": "Yes" if results['features'].get('is_connected', False) else "No"},
+                    {"Property": "Components", "Value": results['features'].get('num_components', 0)}
+                ]
                 
-                # Visualize degree distribution
-                if results['graph'].number_of_nodes() > 0 and PLOTLY_AVAILABLE:
-                    degrees = [d for _, d in results['graph'].degree()]
+                features_df = pd.DataFrame(features_data)
+                st.dataframe(features_df, use_container_width=True, hide_index=True)
+            else:
+                # Display as table without pandas
+                for key, value in results['features'].items():
+                    st.write(f"**{key.replace('_', ' ').title()}**: {value}")
+            
+            # Degree distribution with fixed height
+            if results['graph'].number_of_nodes() > 0 and PLOTLY_AVAILABLE:
+                degrees = [d for _, d in results['graph'].degree()]
+                if degrees:
                     fig_hist = px.histogram(
                         x=degrees, 
                         title="Degree Distribution",
@@ -635,69 +650,74 @@ with col2:
                     )
                     fig_hist.update_layout(
                         plot_bgcolor='white',
-                        paper_bgcolor='white'
+                        paper_bgcolor='white',
+                        height=400  # Fixed height
                     )
-                    st.plotly_chart(fig_hist, use_container_width=True)
-            except Exception as e:
-                st.error(f"Error displaying features: {str(e)}")
+                    st.plotly_chart(fig_hist, use_container_width=True, key="degree_hist")
         
         with tab4:
             st.markdown("#### Security & Data Protection")
             
-            try:
-                if CRYPTO_AVAILABLE:
-                    # Encrypt graph
-                    encrypted_data = analyzer.encrypt_graph(results['graph'])
-                    
-                    if encrypted_data:
-                        col_x, col_y = st.columns(2)
-                        with col_x:
-                            st.success("🔐 Graph data encrypted successfully!")
-                            st.info(f"Encrypted data size: {len(encrypted_data)} bytes")
-                            
-                        with col_y:
-                            if results.get('encryption_key'):
-                                st.code(f"Encryption Key:\n{results['encryption_key']}", language="text")
-                    else:
-                        st.error("Failed to encrypt graph data")
-                else:
-                    st.warning("🔒 Encryption not available due to package compatibility issues.")
-                    st.info("Graph data will be stored in plain text format.")
-                    
-                # Download options
-                st.markdown("#### 📥 Download Results")
+            if CRYPTO_AVAILABLE:
+                encrypted_data = analyzer.encrypt_graph(results['graph'])
                 
-                col_dl1, col_dl2 = st.columns(2)
-                with col_dl1:
-                    # Prepare features for download
-                    if PANDAS_AVAILABLE:
-                        features_json = pd.DataFrame([results['features']]).to_json(orient='records')
-                    else:
-                        import json
-                        features_json = json.dumps([results['features']], indent=2)
+                if encrypted_data:
+                    col_x, col_y = st.columns(2)
+                    with col_x:
+                        st.success("🔐 Graph data encrypted successfully!")
+                        st.info(f"Encrypted data size: {len(encrypted_data)} bytes")
                         
-                    st.download_button(
-                        "📊 Download Features (JSON)",
-                        data=features_json,
-                        file_name="kolam_features.json",
-                        mime="application/json"
-                    )
+                    with col_y:
+                        if results.get('encryption_key'):
+                            st.code(f"Encryption Key:\n{results['encryption_key'][:50]}...", language="text")
+                else:
+                    st.error("Failed to encrypt graph data")
+            else:
+                st.warning("🔒 Encryption not available.")
+                st.info("Graph data will be stored in plain text format.")
                 
-                with col_dl2:
-                    # Prepare adjacency matrix
-                    adj_matrix = nx.to_numpy_array(results['graph'])
-                    adj_buffer = io.BytesIO()
-                    np.save(adj_buffer, adj_matrix)
-                    st.download_button(
-                        "🔢 Download Adjacency Matrix",
-                        data=adj_buffer.getvalue(),
-                        file_name="kolam_adjacency.npy",
-                        mime="application/octet-stream"
-                    )
-            except Exception as e:
-                st.error(f"Error in security section: {str(e)}")
+            # Download options
+            st.markdown("#### 📥 Download Results")
+            
+            col_dl1, col_dl2 = st.columns(2)
+            with col_dl1:
+                # Features JSON
+                features_json = json.dumps([results['features']], indent=2)
+                st.download_button(
+                    "📊 Download Features (JSON)",
+                    data=features_json,
+                    file_name="kolam_features.json",
+                    mime="application/json"
+                )
+            
+            with col_dl2:
+                # Adjacency matrix
+                adj_matrix = nx.to_numpy_array(results['graph'])
+                adj_buffer = io.BytesIO()
+                np.save(adj_buffer, adj_matrix)
+                st.download_button(
+                    "🔢 Download Adjacency Matrix",
+                    data=adj_buffer.getvalue(),
+                    file_name="kolam_adjacency.npy",
+                    mime="application/octet-stream"
+                )
     else:
         st.info("👆 Please upload a Kolam image and click 'Analyze' to see results")
+        
+        # Show placeholder content to maintain layout stability
+        tab1, tab2, tab3, tab4 = st.tabs(["🖼️ Image Processing", "📈 Graph Analysis", "📊 Features", "🔐 Security"])
+        
+        with tab1:
+            st.write("Upload an image and run analysis to see image processing results.")
+        
+        with tab2:
+            st.write("Upload an image and run analysis to see graph visualization.")
+        
+        with tab3:
+            st.write("Upload an image and run analysis to see mathematical features.")
+        
+        with tab4:
+            st.write("Upload an image and run analysis to see security options.")
 
 # Footer
 st.markdown("---")