Code Editor for app.py

import streamlit as st
import numpy as np
from PIL import Image, ImageDraw, ImageFont
import time
import base64

# Set page config
st.set_page_config(
    page_title="AI CCTV Surveillance",
    layout="wide",
    initial_sidebar_state="expanded"
)

# Custom CSS for dark theme and styling
st.markdown("""
    <style>
    .stApp {
        background-color: #1E1E1E;
        color: #FFFFFF;
    }
    .stSelectbox {
        background-color: #2D2D2D;
    }
    .stMarkdown {
        color: #FFFFFF;
    }
    .camera-feed {
        border: 2px solid #444;
        border-radius: 5px;
        padding: 10px;
        background-color: #2D2D2D;
    }
    </style>
""", unsafe_allow_html=True)

# Title and description
st.title("INTEGRATION OF AI IN CCTV SURVEILLANCE")
st.markdown("---")

# Sidebar
with st.sidebar:
    st.header("Control Panel")
    selected_feeds = st.multiselect(
        "Select Camera Feeds",
        ["Feed 1", "Feed 2", "Feed 3", "Feed 4", "Feed 5", "Feed 6"],
        default=["Feed 1", "Feed 2", "Feed 3"]
    )
    
    st.markdown("---")
    st.subheader("System Status")
    status_placeholder = st.empty()

# Function to create simulated camera feed with detection boxes
def create_camera_feed(feed_name, size=(400, 300)):
    # Create a base image
    img = Image.new('RGB', size, color='black')
    draw = ImageDraw.Draw(img)
    
    # Add some random "detection boxes"
    for _ in range(np.random.randint(1, 4)):
        x1 = np.random.randint(0, size[0]-50)
        y1 = np.random.randint(0, size[1]-50)
        x2 = x1 + np.random.randint(30, 100)
        y2 = y1 + np.random.randint(30, 100)
        
        # Draw rectangle
        draw.rectangle([x1, y1, x2, y2], outline='green', width=2)
        
        # Add label
        labels = ['Person', 'Vehicle', 'Object']
        label = np.random.choice(labels)
        draw.text((x1, y1-15), label, fill='green')
    
    # Add camera name
    draw.text((10, 10), feed_name, fill='white')
    
    return img

# Main content area
if selected_feeds:
    # Create columns based on number of selected feeds
    cols = st.columns(min(3, len(selected_feeds)))
    
    # Display camera feeds
    for idx, feed in enumerate(selected_feeds):
        col_idx = idx % 3
        with cols[col_idx]:
            st.markdown(f"<div class='camera-feed'>", unsafe_allow_html=True)
            feed_image = create_camera_feed(feed)
            st.image(feed_image, use_column_width=True)
            st.markdown("""
                <div style='background-color: #2D2D2D; padding: 5px; border-radius: 3px;'>
                    <small>Status: Active | FPS: 30 | Objects Detected: 3</small>
                </div>
            """, unsafe_allow_html=True)
            st.markdown("</div>", unsafe_allow_html=True)

    # Update system status in sidebar
    with status_placeholder:
        st.success(f"✅ {len(selected_feeds)} cameras active")
        st.metric("System Load", "32%")
        st.metric("Network Status", "Stable")
else:
    st.warning("Please select at least one camera feed from the sidebar.")

# Footer
st.markdown("---")
st.markdown("""
    <div style='text-align: center'>
        <small>AI-Powered CCTV Surveillance System | Last Updated: {}</small>
    </div>
""".format(time.strftime("%Y-%m-%d %H:%M:%S")), unsafe_allow_html=True)