app.py

import streamlit as st
import tempfile
import os
from model_pipeline import run_model_on_video # Assuming this function exists and is correctly implemented

# Page setup
st.set_page_config(
    page_title="AI Cricket Commentary",
    layout="wide",
    initial_sidebar_state="collapsed",
    menu_items={
        'Get Help': 'https://www.example.com/help',
        'Report a bug': "https://www.example.com/bug",
        'About': "# AI Cricket Commentary Generator"
    }
)

# Custom CSS for a professional, dark theme look
st.markdown("""
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

    html, body, .stApp {
        background-color: #0d0e12;
        font-family: 'Inter', sans-serif;
        color: #e0e0e0;
    }

    .main-title {
        font-size: 2.5rem;
        font-weight: 700;
        color: #e0e0e0;
        text-align: center;
        margin-top: 1rem;
        margin-bottom: 0.2rem;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.75rem;
    }

    .subtitle {
        font-size: 1.1rem;
        color: #a0a0a0;
        font-weight: 400;
        text-align: center;
        margin-bottom: 2rem;
    }

    .section-header {
        font-size: 1.5rem;
        font-weight: 600;
        color: #e0e0e0;
        margin-top: 3rem;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* Main container for the "Try It Yourself" section to fix alignment */
    .main-content-container {
        display: flex;
        justify-content: space-between;
        gap: 2rem;
        margin-bottom: 2rem;
    }

    /* Custom file uploader styling to match the image */
    .stFileUploader {
        background: #1f2229;
        border: 2px dashed #444a56;
        padding: 1.5rem;
        border-radius: 12px;
        text-align: center;
        cursor: pointer;
        transition: border-color 0.3s ease, background 0.3s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .stFileUploader:hover {
        border-color: #6a6f7b;
        background: #282b33;
    }

    .stFileUploader [data-testid="stFileUploaderDropzone"] {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
    }

    .stFileUploader [data-testid="stFileUploaderFile"] {
        background-color: #2c2e36;
        color: #e0e0e0;
        border-radius: 8px;
        padding: 0.5rem;
        margin-top: 1rem;
    }
    
    .stFileUploader [data-testid="stFileUploaderDropzone"] [data-testid="stMarkdownContainer"] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .stFileUploader [data-testid="stMarkdownContainer"] p:first-child {
        font-size: 1rem;
        font-weight: 600;
        color: #e0e0e0;
        margin-bottom: 0.25rem;
    }
    
    .stFileUploader [data-testid="stMarkdownContainer"] p:nth-child(2) {
        font-size: 0.8rem;
        color: #7b7d85;
    }

    /* Uploaded video display */
    .stVideo {
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    
    .video-container, .results-box {
        background: #1f2229;
        padding: 1.5rem;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        height: 100%;
        border: 1px solid #2c2f37;
    }
    
    .results-box h3 {
        margin-top: 0;
        color: #e0e0e0;
    }
    
    .results-box .placeholder-text {
        color: #7b7d85;
        text-align: center;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    /* Button styling */
    .stButton>button {
        background: #007bff;
        color: white;
        font-weight: 600;
        border-radius: 8px;
        padding: 0.75rem 1.5rem;
        border: none;
        transition: all 0.3s ease;
        box-shadow: 0 4px 6px rgba(0, 123, 255, 0.2);
    }
    
    .stButton>button:hover {
        background: #0056b3;
        transform: translateY(-2px);
        box-shadow: 0 6px 10px rgba(0, 123, 255, 0.3);
    }
    
    .stDownloadButton>button {
        background: #444a56;
        color: #e0e0e0;
        font-weight: 600;
        border: none;
        border-radius: 8px;
        padding: 0.75rem 1.5rem;
        transition: all 0.3s ease;
        box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    }
    
    .stDownloadButton>button:hover {
        background: #5d616d;
        transform: translateY(-2px);
        box-shadow: 0 6px 10px rgba(0,0,0,0.3);
    }
    
    /* Footer styling */
    .footer {
        text-align: center;
        font-size: 0.9rem;
        color: #7b7d85;
        margin-top: 5rem;
        padding-top: 2rem;
        border-top: 1px solid #2c2f37;
    }
</style>
""", unsafe_allow_html=True)

# --- HEADER ---
st.markdown('<h1 class="main-title">🏏 AI Cricket Commentary Generator</h1>', unsafe_allow_html=True)
st.markdown('<p class="subtitle">Revolutionizing Cricket Commentary with AI-driven analysis</p>', unsafe_allow_html=True)

# --- TRY IT YOURSELF SECTION ---
st.markdown('<h2 class="section-header">🎬 Try It Yourself</h2>', unsafe_allow_html=True)

# Use st.columns to create a clean two-column layout for upload and commentary
col_upload, col_display = st.columns(2)

with col_upload:
    st.markdown("<h4>Upload Cricket Match Video</h4>", unsafe_allow_html=True)
    video_file = st.file_uploader(
        "Drag and drop file here\nLimit 200MB per file",
        type=["mp4", "mov", "avi", "mpeg4"],
        label_visibility="collapsed"
    )

with col_display:
    if video_file:
        st.markdown("<h4>Uploaded Video Preview</h4>", unsafe_allow_html=True)
        st.video(video_file)
        if st.button("🚀 Generate Commentary", use_container_width=True):
            with st.spinner("Generating... please wait ⏳"):
                with tempfile.NamedTemporaryFile(delete=False, suffix=".mp4") as tmp:
                    tmp.write(video_file.read())
                    temp_video_path = tmp.name
                
                try:
                    commentary_text, audio_path, video_output_path = run_model_on_video(temp_video_path)

                    st.success("✅ Commentary Generated Successfully!")
                    st.markdown(f"**📝 AI Commentary Summary:**\n\n{commentary_text}")
                    st.audio(audio_path, format="audio/mp3", autoplay=False)
                    
                    col_audio, col_video = st.columns(2)
                    with col_audio:
                        with open(audio_path, 'rb') as a:
                            st.download_button("⬇️ Download Audio", a, file_name="commentary.mp3", use_container_width=True)
                    with col_video:
                        with open(video_output_path, 'rb') as v:
                            st.download_button("⬇️ Download Final Video", v, file_name="final_video.mp4", use_container_width=True)
                    
                    st.video(video_output_path)

                except Exception as e:
                    st.error(f"❌ An error occurred: {e}")
                    st.exception(e)
                finally:
                    try:
                        if 'temp_video_path' in locals() and os.path.exists(temp_video_path):
                            os.remove(temp_video_path)
                        if 'audio_path' in locals() and os.path.exists(audio_path):
                            os.remove(audio_path)
                        if 'video_output_path' in locals() and os.path.exists(video_output_path):
                            os.remove(video_output_path)
                    except PermissionError:
                        st.warning("Could not delete temporary files. Please delete them manually if necessary.")
    else:
        st.markdown('<div class="results-box">', unsafe_allow_html=True)
        st.markdown("<h3>AI Generated Commentary</h3>", unsafe_allow_html=True)
        st.markdown('<p class="placeholder-text">Upload a cricket video to see the preview and generate commentary.</p>', unsafe_allow_html=True)
        st.markdown('</div>', unsafe_allow_html=True)


# --- HOW IT WORKS SECTION ---
st.markdown('<div class="section-header">⚙️ How It Works</div>', unsafe_allow_html=True)
how_cols = st.columns(3)
steps = [
    ("📤 Upload Video", "Upload your cricket video file. Our system processes it frame by frame."),
    ("🧠 AI Analysis", "The AI analyzes key events, recognizes shots, and predicts outcomes."),
    ("🗣️ Generate Commentary", "High-quality, professional commentary is generated and ready for playback or download.")
]
for col, (title, desc) in zip(how_cols, steps):
    with col:
        st.markdown(f'<div class="results-box"><h4>{title}</h4><p>{desc}</p></div>', unsafe_allow_html=True)

# --- KEY FEATURES SECTION ---
st.markdown('<div class="section-header">⭐ Key Features</div>', unsafe_allow_html=True)
feature_cols = st.columns(3)
features = [
    ("🎯 Shot Recognition", "Accurately detects shots like cover drives, sweeps, pulls, and hooks."),
    ("📊 Outcome Prediction", "Intelligently predicts boundaries, wickets, and other key outcomes."),
    ("🎙️ Broadcast-Quality Commentary", "Generates dynamic commentary using proper cricket terminology and flow."),
]
for col, (title, desc) in zip(feature_cols, features):
    with col:
        st.markdown(f'<div class="results-box"><h5>{title}</h5><p>{desc}</p></div>', unsafe_allow_html=True)

# --- FOOTER ---
st.markdown('<div class="footer">Made with ❤️ by AI Cricket Labs | © 2024</div>', unsafe_allow_html=True)