Spaces:

Neylton
/

zeroFire

Sleeping

Upload app.py

fc12075 verified over 1 year ago

24.8 kB

#!/usr/bin/env python3
"""
zeroFire - Fire Detection Classification App
AI-powered fire detection using ConvNeXt transfer learning
"""

import streamlit as st
import torch
import torch.nn.functional as F
from PIL import Image
import numpy as np
import plotly.graph_objects as go
import plotly.express as px
from plotly.subplots import make_subplots
import pandas as pd
import sys
import os
import time
from io import BytesIO
import base64

# Add utils to path
sys.path.append('utils')
from model_utils import load_model, FireDetectionClassifier
from data_utils import get_inference_transform, prepare_image_for_inference, check_data_directory

# Page Configuration
st.set_page_config(
    page_title="🔥 zeroFire - Fire Detection System",
    page_icon="🔥",
    layout="wide",
    initial_sidebar_state="expanded"
)

# Custom CSS for Beautiful UI
st.markdown("""
<style>
    .main-header {
        background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
        padding: 2rem;
        border-radius: 15px;
        text-align: center;
        color: white;
        margin-bottom: 2rem;
        box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    }
    
    .main-header h1 {
        font-size: 3rem;
        margin: 0;
        font-weight: bold;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    }
    
    .main-header p {
        font-size: 1.2rem;
        margin: 0.5rem 0 0 0;
        opacity: 0.9;
    }
    
    .upload-section {
        background: linear-gradient(135deg, #a8e6cf 0%, #74b9ff 100%);
        color: white;
        padding: 20px 25px;
        border-radius: 15px;
        text-align: center;
        margin-bottom: 20px;
        box-shadow: 0 6px 20px rgba(168, 230, 207, 0.3);
        height: 130px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        line-height: 1.4;
    }
    
    .upload-section h3 {
        font-size: 1.3rem;
        margin: 0 0 8px 0;
        font-weight: bold;
    }
    
    .upload-section p {
        font-size: 0.95rem;
        margin: 0;
        opacity: 0.9;
        line-height: 1.3;
    }
    
    .result-fire {
        background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
        color: white;
        padding: 15px 20px;
        border-radius: 15px;
        text-align: center;
        margin: 0 0 20px 0;
        box-shadow: 0 6px 20px rgba(220, 53, 69, 0.3);
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .result-fire h2 {
        font-size: 1.2rem;
        margin: 0 0 5px 0;
        line-height: 1.2;
    }
    
    .result-fire p {
        font-size: 0.85rem;
        margin: 0;
        font-weight: bold;
    }
    
    .result-no-fire {
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        color: white;
        padding: 15px 20px;
        border-radius: 15px;
        text-align: center;
        margin: 0 0 20px 0;
        box-shadow: 0 6px 20px rgba(40, 167, 69, 0.3);
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .result-no-fire h2 {
        font-size: 1.2rem;
        margin: 0 0 5px 0;
        line-height: 1.2;
    }
    
    .result-no-fire p {
        font-size: 0.85rem;
        margin: 0;
        font-weight: bold;
    }
    
    .metric-card {
        background: linear-gradient(135deg, #ff9ff3 0%, #f368e0 100%);
        padding: 15px;
        border-radius: 10px;
        text-align: center;
        color: white;
        margin: 10px 0;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    
    .info-card {
        background: linear-gradient(135deg, #ff9ff3 0%, #f368e0 100%);
        color: white;
        padding: 20px;
        border-radius: 15px;
        margin: 15px 0;
        box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    }
    
    .info-card-fire {
        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
        color: white;
        padding: 20px;
        border-radius: 15px;
        margin: 15px 0;
        box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    }
    
    .stButton > button {
        background: linear-gradient(45deg, #74b9ff, #0984e3);
        color: white;
        border: none;
        border-radius: 10px;
        padding: 12px 24px;
        font-weight: bold;
        font-size: 1.1rem;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        width: 100%;
    }
    
    .stButton > button:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    }
    
    .sidebar .stSelectbox > div > div {
        background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
        color: white;
    }
    
    /* Constrain image height to prevent scrolling */
    .stImage > img {
        max-height: 400px;
        width: auto;
        object-fit: contain;
    }
    
    /* File uploader styling - enhanced for mobile */
    .stFileUploader > div {
        border-radius: 15px;
        margin: 10px 0;
    }
    
    .stFileUploader > div > div {
        border: 2px dashed #74b9ff;
        border-radius: 15px;
        padding: 20px;
        background: rgba(116, 185, 255, 0.05);
        transition: all 0.3s ease;
        min-height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .stFileUploader > div > div:hover {
        border-color: #0984e3;
        background: rgba(116, 185, 255, 0.1);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(116, 185, 255, 0.2);
    }
    
    /* Mobile specific styling */
    @media (max-width: 768px) {
        .stFileUploader > div > div {
            min-height: 100px;
            padding: 25px;
            font-size: 1.1rem;
        }
        
        .stFileUploader button {
            padding: 15px 25px;
            font-size: 1.1rem;
            border-radius: 10px;
            background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
            color: white;
            border: none;
            font-weight: bold;
        }
    }
    
    /* Mobile responsive adjustments */
    @media (max-width: 768px) {
        .main-header h1 {
            font-size: 2rem;
        }
        
        .main-header p {
            font-size: 1rem;
        }
        
        .upload-section {
            height: 110px;
            padding: 18px 20px;
        }
        
        .upload-section h3 {
            font-size: 1.1rem;
            margin: 0 0 6px 0;
        }
        
        .upload-section p {
            font-size: 0.9rem;
            line-height: 1.2;
        }
        
        .result-fire h2, .result-no-fire h2 {
            font-size: 1rem;
        }
        
        .result-fire, .result-no-fire {
            height: 80px;
        }
        
        .stImage > img {
            max-height: 300px;
        }
    }
</style>
""", unsafe_allow_html=True)

@st.cache_resource
def load_fire_model():
    """Load the trained fire detection model"""
    model_path = 'models/fire_detection_classifier.pth'
    
    if not os.path.exists(model_path):
        return None, "Model not found. Please train the model first."
    
    try:
        model, model_info = load_model(model_path, device='cpu')
        return model, model_info
    except Exception as e:
        return None, f"Error loading model: {str(e)}"

def get_prediction(image, model, transform):
    """Get prediction from the model"""
    try:
        # Prepare image
        input_tensor = prepare_image_for_inference(image, transform)
        
        # Get prediction
        with torch.no_grad():
            model.eval()
            outputs = model(input_tensor)
            probabilities = F.softmax(outputs, dim=1)
            confidence, predicted = torch.max(probabilities, 1)
            
            # Convert to numpy
            predicted_class = predicted.item()
            confidence_score = confidence.item()
            all_probs = probabilities.squeeze().cpu().numpy()
            
            return predicted_class, confidence_score, all_probs
    
    except Exception as e:
        st.error(f"Error during prediction: {str(e)}")
        return None, None, None

def create_confidence_chart(probabilities, class_names):
    """Create confidence chart using Plotly"""
    fig = go.Figure(data=[
        go.Bar(
            x=class_names,
            y=probabilities,
            marker_color=['#dc3545', '#28a745'],
            text=[f'{p:.1%}' for p in probabilities],
            textposition='auto',
        )
    ])
    
    fig.update_layout(
        title="Fire Detection Confidence",
        xaxis_title="Prediction",
        yaxis_title="Confidence",
        yaxis=dict(range=[0, 1]),
        showlegend=False,
        height=400,
        template="plotly_white"
    )
    
    return fig

def create_safety_metrics_chart(predicted_class, confidence):
    """Create safety metrics visualization"""
    if predicted_class == 0:  # Fire
        danger_level = confidence * 100
        safety_level = (1 - confidence) * 100
        primary_color = '#dc3545'
        status = "FIRE DETECTED"
    else:  # No Fire
        danger_level = (1 - confidence) * 100
        safety_level = confidence * 100
        primary_color = '#28a745'
        status = "NO FIRE"
    
    fig = go.Figure(go.Indicator(
        mode = "gauge+number+delta",
        value = danger_level,
        domain = {'x': [0, 1], 'y': [0, 1]},
        title = {'text': "Fire Risk Level"},
        delta = {'reference': 50},
        gauge = {'axis': {'range': [None, 100]},
                'bar': {'color': primary_color},
                'steps' : [
                    {'range': [0, 25], 'color': "lightgray"},
                    {'range': [25, 50], 'color': "yellow"},
                    {'range': [50, 75], 'color': "orange"},
                    {'range': [75, 100], 'color': "red"}],
                'threshold' : {'line': {'color': "red", 'width': 4},
                              'thickness': 0.75, 'value': 90}}))
    
    fig.update_layout(height=400)
    return fig

def analyze_fire_risk(predicted_class, confidence):
    """Analyze fire risk and provide recommendations"""
    if predicted_class == 0:  # Fire detected
        risk_level = confidence * 100
        
        if risk_level >= 90:
            return {
                'level': 'CRITICAL',
                'color': '#dc3545',
                'icon': '🚨',
                'message': 'IMMEDIATE ACTION REQUIRED',
                'recommendations': [
                    'Activate fire suppression system immediately',
                    'Evacuate the area',
                    'Call emergency services UAE 997',
                    'Shut down affected equipment if safe to do so',
                    'Monitor surrounding areas for spread'
                ]
            }
        elif risk_level >= 75:
            return {
                'level': 'HIGH',
                'color': '#fd7e14',
                'icon': '⚠️',
                'message': 'HIGH FIRE RISK DETECTED',
                'recommendations': [
                    'Investigate the area immediately',
                    'Prepare fire suppression systems',
                    'Alert security personnel',
                    'Consider equipment shutdown',
                    'Increase monitoring frequency'
                ]
            }
        else:
            return {
                'level': 'MODERATE',
                'color': '#ffc107',
                'icon': '🔶',
                'message': 'POSSIBLE FIRE DETECTED',
                'recommendations': [
                    'Verify with additional sensors',
                    'Send personnel to investigate',
                    'Check equipment temperatures',
                    'Review recent maintenance logs',
                    'Maintain heightened awareness'
                ]
            }
    else:  # No fire
        safety_level = confidence * 100
        
        if safety_level >= 95:
            return {
                'level': 'SAFE',
                'color': '#28a745',
                'icon': '✅',
                'message': 'NORMAL OPERATION',
                'recommendations': [
                    'Continue normal operations',
                    'Maintain regular monitoring',
                    'Keep fire suppression systems ready',
                    'Perform scheduled maintenance',
                    'Review safety protocols periodically'
                ]
            }
        else:
            return {
                'level': 'CAUTION',
                'color': '#17a2b8',
                'icon': '⚠️',
                'message': 'MONITOR CLOSELY',
                'recommendations': [
                    'Increase monitoring frequency',
                    'Check for unusual conditions',
                    'Verify sensor functionality',
                    'Review environmental factors',
                    'Maintain readiness for action'
                ]
            }

# display_fire_safety_checklist function removed - content moved to right column

def main():
    """Main application function"""
    # Header
    st.markdown("""
    <div class="main-header">
        <h1>🔥 zeroFire</h1>
        <p>AI-Powered Fire Detection System for Data Centers</p>
    </div>
    """, unsafe_allow_html=True)
    
    # Sidebar
    with st.sidebar:
        st.markdown("### 🔥 Fire Detection System")
        st.markdown("---")
        
        # Model status
        model, model_info = load_fire_model()
        
        if model is None:
            st.error("❌ Model not available")
            st.info("Train the model first using: `python train_fire_detection.py`")
            return
        else:
            st.success("✅ Model loaded successfully")
            if isinstance(model_info, dict):
                accuracy = model_info.get('best_acc', 'Unknown')
                if accuracy != 'Unknown':
                    # Format accuracy to 2 decimal places
                    accuracy_formatted = f"{float(accuracy):.2f}%"
                    st.info(f"📊 Model: ConvNeXt Large")
                    st.info(f"🎯 Accuracy: {accuracy_formatted}")
                    st.info(f"🔄 Transfer Learning: Food→Fire")
                    st.info(f"⚡ Precision: High-recall optimized")
                else:
                    st.info("📊 Model Accuracy: Unknown")
        
        st.markdown("---")
        
        # Settings
        st.markdown("### ⚙️ Settings")
        confidence_threshold = st.slider(
            "Confidence Threshold",
            min_value=0.0,
            max_value=1.0,
            value=0.5,
            step=0.05,
            help="Minimum confidence required for fire detection"
        )
        
        show_details = st.checkbox("Show detailed analysis", value=True)
        
        st.markdown("---")
        st.markdown("### 📊 Data Center Status")
        check_data_directory('data')
    
    # Main content
    col1, col2 = st.columns([2, 1])
    
    with col1:
        # Upload section
        st.markdown("""
        <div class="upload-section">
            <h3>📸 Fire Detection Input</h3>
            <p>Upload an image or take a photo to detect fire or smoke<br>in your data center</p>
        </div>
        """, unsafe_allow_html=True)
        
        # Mobile-friendly file uploader
        st.markdown("**📱 Take Photo or Upload Image**")
        
        # Clear mobile instructions
        st.markdown("""
        <div style="background: #e3f2fd; padding: 15px; border-radius: 10px; margin: 15px 0; border-left: 4px solid #2196f3;">
            <p style="margin: 0; color: #1976d2; font-weight: bold;">📱 Mobile Users:</p>
            <p style="margin: 5px 0 0 0; color: #1976d2;">
                Tap "Browse files" below → Select <strong>"Camera"</strong> to take a photo<br>
                Or select <strong>"Photos"</strong> to choose from gallery
            </p>
        </div>
        """, unsafe_allow_html=True)
        
        # Troubleshooting info
        with st.expander("🔧 Camera not working? Click here for help"):
            st.markdown("""
            **If you don't see the Camera option:**
            
            1. **✅ Check your browser:**
               - Use Chrome, Safari, or Firefox (latest versions)
               - Edge or other browsers may not support camera
            
            2. **🔐 Ensure secure connection:**
               - Camera requires HTTPS (✅ Hugging Face uses HTTPS)
               - Local development requires HTTPS for camera access
            
            3. **📱 Mobile device requirements:**
               - iOS: Safari 11+ or Chrome 64+
               - Android: Chrome 53+ or Firefox 68+
               - Some older devices may not support camera
            
            4. **🛠️ Try these steps:**
               - Refresh the page and try again
               - Clear browser cache and cookies
               - Try a different browser
               - Check if camera works on other websites
            
            5. **🔄 Alternative options:**
               - Take photo with your camera app first
               - Then select "Photos" to upload the saved image
               - Or use the desktop version for file upload
            """)
            
            st.info("💡 **Note**: Camera access depends on your browser and device. If it doesn't work, you can still upload photos from your gallery!")
        
        # Standard Streamlit file uploader
        uploaded_file = st.file_uploader(
            "Browse files",
            type=['jpg', 'jpeg', 'png'],
            help="📱 Mobile: Tap to see Camera and Photos options | 💻 Desktop: Click to browse files"
        )
        
        # Process the uploaded image
        image = None
        image_source = "uploaded"
        
        if uploaded_file is not None:
            image = Image.open(uploaded_file)
            image_source = "uploaded"
        
        # Process the image (whether uploaded or from camera)
        if image is not None:
            # Display the image with appropriate caption
            st.image(image, caption="📸 Your Image", use_column_width=True)
            
            # Get prediction
            transform = get_inference_transform()
            predicted_class, confidence_score, all_probs = get_prediction(image, model, transform)
            
            if predicted_class is not None:
                class_names = ['Fire', 'No Fire']
                predicted_label = class_names[predicted_class]
                
                # Fire detection result moved to right column
                
                # Technical details (keep only this in left column)
                with st.expander("🔬 Technical Details"):
                    st.markdown(f"""
                    **Prediction Details:**
                    - Predicted Class: {predicted_label}
                    - Confidence Score: {confidence_score:.4f}
                    - Fire Probability: {all_probs[0]:.4f}
                    - No-Fire Probability: {all_probs[1]:.4f}
                    - Threshold: {confidence_threshold:.2f}
                    """)
    
    with col2:
        # Display fire detection result first
        if 'predicted_class' in locals():
            # Display fire detection result box
            if predicted_class == 0:  # Fire
                st.markdown(f"""
                <div class="result-fire">
                    <h2>🚨 FIRE DETECTED - Confidence: {confidence_score:.1%}</h2>
                    <p>IMMEDIATE ACTION REQUIRED</p>
                </div>
                """, unsafe_allow_html=True)
            else:  # No Fire
                st.markdown(f"""
                <div class="result-no-fire">
                    <h2>✅ NO FIRE DETECTED - Confidence: {confidence_score:.1%}</h2>
                    <p>Normal Operation</p>
                </div>
                """, unsafe_allow_html=True)
        
        # Quick metrics
        st.markdown("### 📊 Quick Metrics")
        
        if 'predicted_class' in locals():
            # Create three columns for metrics in a row
            metric_col1, metric_col2, metric_col3 = st.columns(3)
            
            with metric_col1:
                # Fire risk gauge
                risk_percentage = all_probs[0] * 100
                st.metric(
                    label="Fire Risk",
                    value=f"{risk_percentage:.1f}%"
                )
            
            with metric_col2:
                # Safety score
                safety_score = all_probs[1] * 100
                st.metric(
                    label="Safety Score",
                    value=f"{safety_score:.1f}%"
                )
            
            with metric_col3:
                # Model status instead of redundant confidence
                status = "FIRE ALERT" if predicted_class == 0 else "NORMAL"
                st.metric(
                    label="Status",
                    value=status
                )
            
                         # Charts removed to eliminate confusion and redundancy
            
            # Detailed analysis moved from left column
            if show_details:
                st.markdown("### 📋 Detailed Analysis")
                
                analysis = analyze_fire_risk(predicted_class, confidence_score)
                
                # Use red styling only for fire detection
                card_class = "info-card-fire" if predicted_class == 0 else "info-card"
                
                st.markdown(f"""
                <div class="{card_class}">
                    <h3>{analysis['icon']} Risk Level: {analysis['level']}</h3>
                    <p><strong>{analysis['message']}</strong></p>
                </div>
                """, unsafe_allow_html=True)
                
                st.markdown("#### 🎯 Recommended Actions:")
                for rec in analysis['recommendations']:
                    st.markdown(f"- {rec}")
                
                # Fire Safety Checklist moved here
                st.markdown("---")
                st.markdown("""
                <div class="info-card">
                    <h3>🔥 Fire Safety Checklist</h3>
                    <p>Essential fire safety measures for data centers:</p>
                </div>
                """, unsafe_allow_html=True)
                
                safety_items = [
                    "🔥 **Fire Detection Systems** - Smoke, heat, and flame detectors",
                    "💨 **Suppression Systems** - Clean agent, water mist, or CO2",
                    "🌡️ **Temperature Monitoring** - Continuous thermal monitoring",
                    "⚡ **Electrical Safety** - Arc fault and ground fault protection",
                    "🚪 **Emergency Exits** - Clear and well-marked escape routes",
                    "📋 **Emergency Procedures** - Staff training and evacuation plans",
                    "🔧 **Equipment Maintenance** - Regular inspection and testing",
                    "📞 **Emergency Contacts** - Quick access to fire department",
                    "🎯 **Response Plans** - Pre-defined actions for different scenarios",
                    "📊 **Documentation** - Incident logging and safety records"
                ]
                
                for item in safety_items:
                    st.markdown(f"- {item}")
        
        # Additional info moved to bottom
    
    # Footer
    st.markdown("---")
    
    # Emergency Contacts only (Fire Safety Checklist moved to right column)
    st.markdown("""
    <div class="info-card" style="padding: 15px;">
        <h3 style="margin: 0 0 10px 0; text-align: center;">🚨 Emergency Contacts</h3>
        <div style="display: flex; justify-content: space-around; flex-wrap: wrap; gap: 15px;">
            <span><strong>Fire Dept:</strong> UAE 997</span>
            <span><strong>Security:</strong> [Your Number]</span>
            <span><strong>Facilities:</strong> [Your Number]</span>
            <span><strong>IT Ops:</strong> [Your Number]</span>
        </div>
    </div>
    """, unsafe_allow_html=True)
    
    st.markdown("---")
    st.markdown("""
    <div style="text-align: center; padding: 20px; background: linear-gradient(135deg, #a8e6cf 0%, #74b9ff 100%); border-radius: 15px; color: white;">
        <p>🔥 zeroFire - AI-Powered Fire Detection System</p>
        <p>Protecting your data center with advanced machine learning</p>
    </div>
    """, unsafe_allow_html=True)

if __name__ == "__main__":
    main() 

	#!/usr/bin/env python3
	"""
	zeroFire - Fire Detection Classification App
	AI-powered fire detection using ConvNeXt transfer learning
	"""

	import streamlit as st
	import torch
	import torch.nn.functional as F
	from PIL import Image
	import numpy as np
	import plotly.graph_objects as go
	import plotly.express as px
	from plotly.subplots import make_subplots
	import pandas as pd
	import sys
	import os
	import time
	from io import BytesIO
	import base64

	# Add utils to path
	sys.path.append('utils')
	from model_utils import load_model, FireDetectionClassifier
	from data_utils import get_inference_transform, prepare_image_for_inference, check_data_directory

	# Page Configuration
	st.set_page_config(
	page_title="🔥 zeroFire - Fire Detection System",
	page_icon="🔥",
	layout="wide",
	initial_sidebar_state="expanded"
	)

	# Custom CSS for Beautiful UI
	st.markdown("""
	<style>
	.main-header {
	background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
	padding: 2rem;
	border-radius: 15px;
	text-align: center;
	color: white;
	margin-bottom: 2rem;
	box-shadow: 0 8px 32px rgba(0,0,0,0.1);
	}

	.main-header h1 {
	font-size: 3rem;
	margin: 0;
	font-weight: bold;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
	}

	.main-header p {
	font-size: 1.2rem;
	margin: 0.5rem 0 0 0;
	opacity: 0.9;
	}

	.upload-section {
	background: linear-gradient(135deg, #a8e6cf 0%, #74b9ff 100%);
	color: white;
	padding: 20px 25px;
	border-radius: 15px;
	text-align: center;
	margin-bottom: 20px;
	box-shadow: 0 6px 20px rgba(168, 230, 207, 0.3);
	height: 130px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height: 1.4;
	}

	.upload-section h3 {
	font-size: 1.3rem;
	margin: 0 0 8px 0;
	font-weight: bold;
	}

	.upload-section p {
	font-size: 0.95rem;
	margin: 0;
	opacity: 0.9;
	line-height: 1.3;
	}

	.result-fire {
	background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
	color: white;
	padding: 15px 20px;
	border-radius: 15px;
	text-align: center;
	margin: 0 0 20px 0;
	box-shadow: 0 6px 20px rgba(220, 53, 69, 0.3);
	height: 100px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	}

	.result-fire h2 {
	font-size: 1.2rem;
	margin: 0 0 5px 0;
	line-height: 1.2;
	}

	.result-fire p {
	font-size: 0.85rem;
	margin: 0;
	font-weight: bold;
	}

	.result-no-fire {
	background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
	color: white;
	padding: 15px 20px;
	border-radius: 15px;
	text-align: center;
	margin: 0 0 20px 0;
	box-shadow: 0 6px 20px rgba(40, 167, 69, 0.3);
	height: 100px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	}

	.result-no-fire h2 {
	font-size: 1.2rem;
	margin: 0 0 5px 0;
	line-height: 1.2;
	}

	.result-no-fire p {
	font-size: 0.85rem;
	margin: 0;
	font-weight: bold;
	}

	.metric-card {
	background: linear-gradient(135deg, #ff9ff3 0%, #f368e0 100%);
	padding: 15px;
	border-radius: 10px;
	text-align: center;
	color: white;
	margin: 10px 0;
	box-shadow: 0 4px 15px rgba(0,0,0,0.2);
	}

	.info-card {
	background: linear-gradient(135deg, #ff9ff3 0%, #f368e0 100%);
	color: white;
	padding: 20px;
	border-radius: 15px;
	margin: 15px 0;
	box-shadow: 0 8px 32px rgba(0,0,0,0.1);
	}

	.info-card-fire {
	background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
	color: white;
	padding: 20px;
	border-radius: 15px;
	margin: 15px 0;
	box-shadow: 0 8px 32px rgba(0,0,0,0.1);
	}

	.stButton > button {
	background: linear-gradient(45deg, #74b9ff, #0984e3);
	color: white;
	border: none;
	border-radius: 10px;
	padding: 12px 24px;
	font-weight: bold;
	font-size: 1.1rem;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(0,0,0,0.2);
	width: 100%;
	}

	.stButton > button:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0,0,0,0.3);
	}

	.sidebar .stSelectbox > div > div {
	background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
	color: white;
	}

	/* Constrain image height to prevent scrolling */
	.stImage > img {
	max-height: 400px;
	width: auto;
	object-fit: contain;
	}

	/* File uploader styling - enhanced for mobile */
	.stFileUploader > div {
	border-radius: 15px;
	margin: 10px 0;
	}

	.stFileUploader > div > div {
	border: 2px dashed #74b9ff;
	border-radius: 15px;
	padding: 20px;
	background: rgba(116, 185, 255, 0.05);
	transition: all 0.3s ease;
	min-height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.stFileUploader > div > div:hover {
	border-color: #0984e3;
	background: rgba(116, 185, 255, 0.1);
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(116, 185, 255, 0.2);
	}

	/* Mobile specific styling */
	@media (max-width: 768px) {
	.stFileUploader > div > div {
	min-height: 100px;
	padding: 25px;
	font-size: 1.1rem;
	}

	.stFileUploader button {
	padding: 15px 25px;
	font-size: 1.1rem;
	border-radius: 10px;
	background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
	color: white;
	border: none;
	font-weight: bold;
	}
	}

	/* Mobile responsive adjustments */
	@media (max-width: 768px) {
	.main-header h1 {
	font-size: 2rem;
	}

	.main-header p {
	font-size: 1rem;
	}

	.upload-section {
	height: 110px;
	padding: 18px 20px;
	}

	.upload-section h3 {
	font-size: 1.1rem;
	margin: 0 0 6px 0;
	}

	.upload-section p {
	font-size: 0.9rem;
	line-height: 1.2;
	}

	.result-fire h2, .result-no-fire h2 {
	font-size: 1rem;
	}

	.result-fire, .result-no-fire {
	height: 80px;
	}

	.stImage > img {
	max-height: 300px;
	}
	}
	</style>
	""", unsafe_allow_html=True)

	@st.cache_resource
	def load_fire_model():
	"""Load the trained fire detection model"""
	model_path = 'models/fire_detection_classifier.pth'

	if not os.path.exists(model_path):
	return None, "Model not found. Please train the model first."

	try:
	model, model_info = load_model(model_path, device='cpu')
	return model, model_info
	except Exception as e:
	return None, f"Error loading model: {str(e)}"

	def get_prediction(image, model, transform):
	"""Get prediction from the model"""
	try:
	# Prepare image
	input_tensor = prepare_image_for_inference(image, transform)

	# Get prediction
	with torch.no_grad():
	model.eval()
	outputs = model(input_tensor)
	probabilities = F.softmax(outputs, dim=1)
	confidence, predicted = torch.max(probabilities, 1)

	# Convert to numpy
	predicted_class = predicted.item()
	confidence_score = confidence.item()
	all_probs = probabilities.squeeze().cpu().numpy()

	return predicted_class, confidence_score, all_probs

	except Exception as e:
	st.error(f"Error during prediction: {str(e)}")
	return None, None, None

	def create_confidence_chart(probabilities, class_names):
	"""Create confidence chart using Plotly"""
	fig = go.Figure(data=[
	go.Bar(
	x=class_names,
	y=probabilities,
	marker_color=['#dc3545', '#28a745'],
	text=[f'{p:.1%}' for p in probabilities],
	textposition='auto',
	)
	])

	fig.update_layout(
	title="Fire Detection Confidence",
	xaxis_title="Prediction",
	yaxis_title="Confidence",
	yaxis=dict(range=[0, 1]),
	showlegend=False,
	height=400,
	template="plotly_white"
	)

	return fig

	def create_safety_metrics_chart(predicted_class, confidence):
	"""Create safety metrics visualization"""
	if predicted_class == 0: # Fire
	danger_level = confidence * 100
	safety_level = (1 - confidence) * 100
	primary_color = '#dc3545'
	status = "FIRE DETECTED"
	else: # No Fire
	danger_level = (1 - confidence) * 100
	safety_level = confidence * 100
	primary_color = '#28a745'
	status = "NO FIRE"

	fig = go.Figure(go.Indicator(
	mode = "gauge+number+delta",
	value = danger_level,
	domain = {'x': [0, 1], 'y': [0, 1]},
	title = {'text': "Fire Risk Level"},
	delta = {'reference': 50},
	gauge = {'axis': {'range': [None, 100]},
	'bar': {'color': primary_color},
	'steps' : [
	{'range': [0, 25], 'color': "lightgray"},
	{'range': [25, 50], 'color': "yellow"},
	{'range': [50, 75], 'color': "orange"},
	{'range': [75, 100], 'color': "red"}],
	'threshold' : {'line': {'color': "red", 'width': 4},
	'thickness': 0.75, 'value': 90}}))

	fig.update_layout(height=400)
	return fig

	def analyze_fire_risk(predicted_class, confidence):
	"""Analyze fire risk and provide recommendations"""
	if predicted_class == 0: # Fire detected
	risk_level = confidence * 100

	if risk_level >= 90:
	return {
	'level': 'CRITICAL',
	'color': '#dc3545',
	'icon': '🚨',
	'message': 'IMMEDIATE ACTION REQUIRED',
	'recommendations': [
	'Activate fire suppression system immediately',
	'Evacuate the area',
	'Call emergency services UAE 997',
	'Shut down affected equipment if safe to do so',
	'Monitor surrounding areas for spread'
	]
	}
	elif risk_level >= 75:
	return {
	'level': 'HIGH',
	'color': '#fd7e14',
	'icon': '⚠️',
	'message': 'HIGH FIRE RISK DETECTED',
	'recommendations': [
	'Investigate the area immediately',
	'Prepare fire suppression systems',
	'Alert security personnel',
	'Consider equipment shutdown',
	'Increase monitoring frequency'
	]
	}
	else:
	return {
	'level': 'MODERATE',
	'color': '#ffc107',
	'icon': '🔶',
	'message': 'POSSIBLE FIRE DETECTED',
	'recommendations': [
	'Verify with additional sensors',
	'Send personnel to investigate',
	'Check equipment temperatures',
	'Review recent maintenance logs',
	'Maintain heightened awareness'
	]
	}
	else: # No fire
	safety_level = confidence * 100

	if safety_level >= 95:
	return {
	'level': 'SAFE',
	'color': '#28a745',
	'icon': '✅',
	'message': 'NORMAL OPERATION',
	'recommendations': [
	'Continue normal operations',
	'Maintain regular monitoring',
	'Keep fire suppression systems ready',
	'Perform scheduled maintenance',
	'Review safety protocols periodically'
	]
	}
	else:
	return {
	'level': 'CAUTION',
	'color': '#17a2b8',
	'icon': '⚠️',
	'message': 'MONITOR CLOSELY',
	'recommendations': [
	'Increase monitoring frequency',
	'Check for unusual conditions',
	'Verify sensor functionality',
	'Review environmental factors',
	'Maintain readiness for action'
	]
	}

	# display_fire_safety_checklist function removed - content moved to right column

	def main():
	"""Main application function"""
	# Header
	st.markdown("""
	<div class="main-header">
	<h1>🔥 zeroFire</h1>
	<p>AI-Powered Fire Detection System for Data Centers</p>
	</div>
	""", unsafe_allow_html=True)

	# Sidebar
	with st.sidebar:
	st.markdown("### 🔥 Fire Detection System")
	st.markdown("---")

	# Model status
	model, model_info = load_fire_model()

	if model is None:
	st.error("❌ Model not available")
	st.info("Train the model first using: `python train_fire_detection.py`")
	return
	else:
	st.success("✅ Model loaded successfully")
	if isinstance(model_info, dict):
	accuracy = model_info.get('best_acc', 'Unknown')
	if accuracy != 'Unknown':
	# Format accuracy to 2 decimal places
	accuracy_formatted = f"{float(accuracy):.2f}%"
	st.info(f"📊 Model: ConvNeXt Large")
	st.info(f"🎯 Accuracy: {accuracy_formatted}")
	st.info(f"🔄 Transfer Learning: Food→Fire")
	st.info(f"⚡ Precision: High-recall optimized")
	else:
	st.info("📊 Model Accuracy: Unknown")

	st.markdown("---")

	# Settings
	st.markdown("### ⚙️ Settings")
	confidence_threshold = st.slider(
	"Confidence Threshold",
	min_value=0.0,
	max_value=1.0,
	value=0.5,
	step=0.05,
	help="Minimum confidence required for fire detection"
	)

	show_details = st.checkbox("Show detailed analysis", value=True)

	st.markdown("---")
	st.markdown("### 📊 Data Center Status")
	check_data_directory('data')

	# Main content
	col1, col2 = st.columns([2, 1])

	with col1:
	# Upload section
	st.markdown("""
	<div class="upload-section">
	<h3>📸 Fire Detection Input</h3>
	<p>Upload an image or take a photo to detect fire or smoke<br>in your data center</p>
	</div>
	""", unsafe_allow_html=True)

	# Mobile-friendly file uploader
	st.markdown("📱 Take Photo or Upload Image")

	# Clear mobile instructions
	st.markdown("""
	<div style="background: #e3f2fd; padding: 15px; border-radius: 10px; margin: 15px 0; border-left: 4px solid #2196f3;">
	<p style="margin: 0; color: #1976d2; font-weight: bold;">📱 Mobile Users:</p>
	<p style="margin: 5px 0 0 0; color: #1976d2;">
	Tap "Browse files" below → Select <strong>"Camera"</strong> to take a photo<br>
	Or select <strong>"Photos"</strong> to choose from gallery
	</p>
	</div>
	""", unsafe_allow_html=True)

	# Troubleshooting info
	with st.expander("🔧 Camera not working? Click here for help"):
	st.markdown("""
	If you don't see the Camera option:

	1. ✅ Check your browser:
	- Use Chrome, Safari, or Firefox (latest versions)
	- Edge or other browsers may not support camera

	2. 🔐 Ensure secure connection:
	- Camera requires HTTPS (✅ Hugging Face uses HTTPS)
	- Local development requires HTTPS for camera access

	3. 📱 Mobile device requirements:
	- iOS: Safari 11+ or Chrome 64+
	- Android: Chrome 53+ or Firefox 68+
	- Some older devices may not support camera

	4. 🛠️ Try these steps:
	- Refresh the page and try again
	- Clear browser cache and cookies
	- Try a different browser
	- Check if camera works on other websites

	5. 🔄 Alternative options:
	- Take photo with your camera app first
	- Then select "Photos" to upload the saved image
	- Or use the desktop version for file upload
	""")

	st.info("💡 Note: Camera access depends on your browser and device. If it doesn't work, you can still upload photos from your gallery!")

	# Standard Streamlit file uploader
	uploaded_file = st.file_uploader(
	"Browse files",
	type=['jpg', 'jpeg', 'png'],
	help="📱 Mobile: Tap to see Camera and Photos options \| 💻 Desktop: Click to browse files"
	)

	# Process the uploaded image
	image = None
	image_source = "uploaded"

	if uploaded_file is not None:
	image = Image.open(uploaded_file)
	image_source = "uploaded"

	# Process the image (whether uploaded or from camera)
	if image is not None:
	# Display the image with appropriate caption
	st.image(image, caption="📸 Your Image", use_column_width=True)

	# Get prediction
	transform = get_inference_transform()
	predicted_class, confidence_score, all_probs = get_prediction(image, model, transform)

	if predicted_class is not None:
	class_names = ['Fire', 'No Fire']
	predicted_label = class_names[predicted_class]

	# Fire detection result moved to right column

	# Technical details (keep only this in left column)
	with st.expander("🔬 Technical Details"):
	st.markdown(f"""
	Prediction Details:
	- Predicted Class: {predicted_label}
	- Confidence Score: {confidence_score:.4f}
	- Fire Probability: {all_probs[0]:.4f}
	- No-Fire Probability: {all_probs[1]:.4f}
	- Threshold: {confidence_threshold:.2f}
	""")

	with col2:
	# Display fire detection result first
	if 'predicted_class' in locals():
	# Display fire detection result box
	if predicted_class == 0: # Fire
	st.markdown(f"""
	<div class="result-fire">
	<h2>🚨 FIRE DETECTED - Confidence: {confidence_score:.1%}</h2>
	<p>IMMEDIATE ACTION REQUIRED</p>
	</div>
	""", unsafe_allow_html=True)
	else: # No Fire
	st.markdown(f"""
	<div class="result-no-fire">
	<h2>✅ NO FIRE DETECTED - Confidence: {confidence_score:.1%}</h2>
	<p>Normal Operation</p>
	</div>
	""", unsafe_allow_html=True)

	# Quick metrics
	st.markdown("### 📊 Quick Metrics")

	if 'predicted_class' in locals():
	# Create three columns for metrics in a row
	metric_col1, metric_col2, metric_col3 = st.columns(3)

	with metric_col1:
	# Fire risk gauge
	risk_percentage = all_probs[0] * 100
	st.metric(
	label="Fire Risk",
	value=f"{risk_percentage:.1f}%"
	)

	with metric_col2:
	# Safety score
	safety_score = all_probs[1] * 100
	st.metric(
	label="Safety Score",
	value=f"{safety_score:.1f}%"
	)

	with metric_col3:
	# Model status instead of redundant confidence
	status = "FIRE ALERT" if predicted_class == 0 else "NORMAL"
	st.metric(
	label="Status",
	value=status
	)

	# Charts removed to eliminate confusion and redundancy

	# Detailed analysis moved from left column
	if show_details:
	st.markdown("### 📋 Detailed Analysis")

	analysis = analyze_fire_risk(predicted_class, confidence_score)

	# Use red styling only for fire detection
	card_class = "info-card-fire" if predicted_class == 0 else "info-card"

	st.markdown(f"""
	<div class="{card_class}">
	<h3>{analysis['icon']} Risk Level: {analysis['level']}</h3>
	<p><strong>{analysis['message']}</strong></p>
	</div>
	""", unsafe_allow_html=True)

	st.markdown("#### 🎯 Recommended Actions:")
	for rec in analysis['recommendations']:
	st.markdown(f"- {rec}")

	# Fire Safety Checklist moved here
	st.markdown("---")
	st.markdown("""
	<div class="info-card">
	<h3>🔥 Fire Safety Checklist</h3>
	<p>Essential fire safety measures for data centers:</p>
	</div>
	""", unsafe_allow_html=True)

	safety_items = [
	"🔥 Fire Detection Systems - Smoke, heat, and flame detectors",
	"💨 Suppression Systems - Clean agent, water mist, or CO2",
	"🌡️ Temperature Monitoring - Continuous thermal monitoring",
	"⚡ Electrical Safety - Arc fault and ground fault protection",
	"🚪 Emergency Exits - Clear and well-marked escape routes",
	"📋 Emergency Procedures - Staff training and evacuation plans",
	"🔧 Equipment Maintenance - Regular inspection and testing",
	"📞 Emergency Contacts - Quick access to fire department",
	"🎯 Response Plans - Pre-defined actions for different scenarios",
	"📊 Documentation - Incident logging and safety records"
	]

	for item in safety_items:
	st.markdown(f"- {item}")

	# Additional info moved to bottom

	# Footer
	st.markdown("---")

	# Emergency Contacts only (Fire Safety Checklist moved to right column)
	st.markdown("""
	<div class="info-card" style="padding: 15px;">
	<h3 style="margin: 0 0 10px 0; text-align: center;">🚨 Emergency Contacts</h3>
	<div style="display: flex; justify-content: space-around; flex-wrap: wrap; gap: 15px;">
	<span><strong>Fire Dept:</strong> UAE 997</span>
	<span><strong>Security:</strong> [Your Number]</span>
	<span><strong>Facilities:</strong> [Your Number]</span>
	<span><strong>IT Ops:</strong> [Your Number]</span>
	</div>
	</div>
	""", unsafe_allow_html=True)

	st.markdown("---")
	st.markdown("""
	<div style="text-align: center; padding: 20px; background: linear-gradient(135deg, #a8e6cf 0%, #74b9ff 100%); border-radius: 15px; color: white;">
	<p>🔥 zeroFire - AI-Powered Fire Detection System</p>
	<p>Protecting your data center with advanced machine learning</p>
	</div>
	""", unsafe_allow_html=True)

	if __name__ == "__main__":
	main()