app.py

"""
Frontend Streamlit para el sistema de detección de logos de videojuegos.

Uso:
    streamlit run app.py
"""

import streamlit as st
import requests
import pandas as pd
import matplotlib
matplotlib.use("Agg")
import matplotlib.pyplot as plt

# ──────────────────────────────────────────────
# Configuración de página
# ──────────────────────────────────────────────
st.set_page_config(
    page_title="|Logo Detector|",
    page_icon="🎮",
    layout="wide",
    initial_sidebar_state="expanded"
)

API_URL_LOCAL = "http://127.0.0.1:8000"
API_URL_HF    = "https://michh14-logo-detector.hf.space"

# ──────────────────────────────────────────────
# Estilos CSS
# ──────────────────────────────────────────────
st.markdown("""
<style>
    .stApp { background-color: #0d0d1a; }
    [data-testid="stSidebar"] { background-color: #12122b; border-right: 1px solid #2a2a5a; }

    .main-title {
        font-size: 2.8rem;
        font-weight: 800;
        background: linear-gradient(135deg, #7b2ff7, #00d4ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-align: center;
        margin-bottom: 0.2rem;
    }
    .main-subtitle {
        text-align: center;
        color: #8888bb;
        font-size: 1rem;
        margin-bottom: 2rem;
    }
    .frame-label {
        font-size: 0.8rem;
        color: #8888bb;
        text-align: center;
        margin-top: 4px;
    }
    [data-testid="stMetricValue"] {
        color: #00d4ff !important;
        font-size: 1.6rem !important;
        font-weight: 700 !important;
    }
    [data-testid="stMetricLabel"] { color: #8888bb !important; }
    .stTextInput input {
        background-color: #1a1a3e !important;
        color: white !important;
        border: 1px solid #3a3a7a !important;
        border-radius: 8px !important;
    }
    .stButton > button {
        background: linear-gradient(135deg, #7b2ff7, #00d4ff) !important;
        color: white !important;
        font-weight: 700 !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 0.6rem 2rem !important;
        font-size: 1rem !important;
        width: 100% !important;
    }
    .stButton > button:hover { opacity: 0.85 !important; }
    hr { border-color: #2a2a5a !important; }
    p, li, span { color: #ccccee !important; }
    h1, h2, h3 { color: #ffffff !important; }
</style>
""", unsafe_allow_html=True)


# ──────────────────────────────────────────────
# Helper
# ──────────────────────────────────────────────
def check_api(url: str) -> bool:
    try:
        return requests.get(f"{url}/", timeout=3).status_code == 200
    except Exception:
        return False


# ──────────────────────────────────────────────
# Sidebar
# ──────────────────────────────────────────────
with st.sidebar:
    st.markdown("## ⚙️ Configuración")
    st.divider()

    conf_threshold = st.slider(
        "Umbral de confianza",
        min_value=0.20, max_value=0.90,
        value=0.50, step=0.05,
        help="Sube el umbral para reducir falsos positivos."
    )

    st.divider()
    st.markdown("**Estado de la API**")
    st.markdown("🖥️ Local")
    if check_api(API_URL_LOCAL):
        st.success("✅ Conectada")
    else:
        st.error("❌ Sin conexión")
        st.caption("Ejecuta:\n`uvicorn main:app --reload`")

    st.markdown("☁️ HuggingFace")
    if check_api(API_URL_HF):
        st.success("✅ Conectada")
        try:
            info = requests.get(f"{API_URL_HF}/", timeout=3).json()
            with st.expander("Clases disponibles"):
                for clase in info.get("clases", []):
                    st.markdown(f"• `{clase}`")
        except Exception:
            pass
    else:
        st.error("❌ Sin conexión")

    st.divider()
    st.markdown("### 📂 Historial")
    historial_api = st.radio("Ver historial de:", ["Local", "HuggingFace"], horizontal=True)
    if st.button("🔄 Cargar historial"):
        api_hist = API_URL_LOCAL if historial_api == "Local" else API_URL_HF
        try:
            videos = requests.get(f"{api_hist}/videos", timeout=5).json()
            if videos:
                for v in videos[:5]:
                    st.markdown(f"**{v['nombre']}**")
                    st.caption(f"ID: {v['id']} | {v['duracion_s']:.0f}s | {v['fecha_analisis'][:10]}")
            else:
                st.info("No hay vídeos analizados aún.")
        except Exception:
            st.error("No se pudo conectar con la API.")


# ──────────────────────────────────────────────
# Contenido principal
# ──────────────────────────────────────────────
st.markdown('<div class="main-title">🎮 Logo Detector</div>', unsafe_allow_html=True)
st.markdown('<div class="main-subtitle">Detección de logos de videojuegos en vídeos con YOLOv8</div>', unsafe_allow_html=True)
st.divider()

# ── Selector de modo ───────────────────────────────────────────────────────
modo = st.radio(
    "Modo de análisis",
    ["🔗 URL de YouTube (local)", "📁 Subir vídeo (HuggingFace)"],
    horizontal=True
)

st.divider()

if modo == "🔗 URL de YouTube (local)":
    col_input, col_btn = st.columns([4, 1])
    with col_input:
        url = st.text_input(
            "URL", placeholder="https://www.youtube.com/watch?v=...",
            label_visibility="collapsed"
        )
    with col_btn:
        analizar = st.button("🔍 Analizar", use_container_width=True)
    uploaded_file = None
else:
    uploaded_file = st.file_uploader(
        "Sube tu vídeo",
        type=["mp4", "avi", "mkv", "mov"],
        label_visibility="collapsed"
    )
    analizar = st.button("🔍 Analizar", use_container_width=True)
    url = None

st.divider()

# ──────────────────────────────────────────────
# Análisis
# ──────────────────────────────────────────────
if analizar:
    if modo == "🔗 URL de YouTube (local)" and not url:
        st.warning("⚠️ Introduce una URL de YouTube primero.")
    elif modo == "📁 Subir vídeo (HuggingFace)" and not uploaded_file:
        st.warning("⚠️ Sube un vídeo primero.")
    else:
        api = API_URL_LOCAL if modo == "🔗 URL de YouTube (local)" else API_URL_HF

        if not check_api(api):
            st.error(f"❌ No hay conexión con la API ({'local' if api == API_URL_LOCAL else 'HuggingFace'}). "
                     f"{'Ejecuta `uvicorn main:app --reload`' if api == API_URL_LOCAL else 'Comprueba el Space en HuggingFace'}")
        else:
            with st.spinner("⬇️ Analizando el vídeo... puede tardar unos minutos"):
                try:
                    if modo == "🔗 URL de YouTube (local)":
                        resp = requests.post(
                            f"{api}/analizar",
                            json={"url": url, "conf": conf_threshold},
                            timeout=600
                        )
                    else:
                        resp = requests.post(
                            f"{api}/analizar",
                            files={"file": (uploaded_file.name, uploaded_file.getvalue(), "video/mp4")},
                            params={"conf": conf_threshold},
                            timeout=600
                        )

                    data = resp.json()

                    if "detail" in data:
                        st.error(f"❌ {data['detail']}")
                    else:
                        st.success("✅ Análisis completado")

                        # ── Métricas generales ─────────────────────────────
                        st.markdown("### 📊 Resumen general")
                        m1, m2, m3, m4 = st.columns(4)
                        m1.metric("⏱️ Duración",         f"{data['duracion_s']}s")
                        m2.metric("🎞️ Total frames",     data['total_frames'])
                        m3.metric("📺 FPS",               data['fps'])
                        m4.metric("🏷️ Marcas detectadas", len(data['marcas']))
                        st.divider()

                        if not data["marcas"]:
                            st.info("No se detectaron logos. Prueba bajando el umbral de confianza.")
                        else:
                            marcas_sorted = sorted(
                                data["marcas"].items(),
                                key=lambda x: -x[1]["porcentaje"]
                            )

                            # ── Frames representativos ─────────────────────
                            st.markdown("### 🖼️ Detecciones visuales")
                            st.caption("Mejor frame detectado por cada marca con su bounding box")

                            cols_per_row = 3
                            marcas_list  = list(marcas_sorted)

                            for i in range(0, len(marcas_list), cols_per_row):
                                row_marcas = marcas_list[i:i + cols_per_row]
                                cols = st.columns(cols_per_row)
                                for col, (marca, info) in zip(cols, row_marcas):
                                    with col:
                                        frame_url = info.get("frame_url")
                                        if frame_url:
                                            try:
                                                img_resp = requests.get(
                                                    f"{api}{frame_url}", timeout=10
                                                )
                                                if img_resp.status_code == 200:
                                                    st.image(img_resp.content, use_container_width=True)
                                            except Exception:
                                                st.info("Frame no disponible")
                                        st.markdown(
                                            f"<div class='frame-label'>"
                                            f"<b>{marca.upper()}</b> · "
                                            f"{info['confianza_maxima']}% confianza máx."
                                            f"</div>",
                                            unsafe_allow_html=True
                                        )

                            st.divider()

                            # ── Estadísticas por marca ─────────────────────
                            st.markdown("### 🏷️ Estadísticas por marca")
                            for marca, info in marcas_sorted:
                                c1, c2, c3, c4 = st.columns([2, 1, 1, 1])
                                c1.markdown(f"**{marca.upper()}**")
                                c2.metric("⏱️ Tiempo",    f"{info['tiempo_pantalla_s']}s")
                                c3.metric("📊 % vídeo",   f"{info['porcentaje']}%")
                                c4.metric("🎯 Confianza", f"{info['confianza_media']}%")
                                st.progress(min(info["porcentaje"] / 100, 1.0))
                                st.divider()

                            # ── Gráficas ───────────────────────────────────
                            st.markdown("### 📈 Comparativa visual")
                            col_c1, col_c2 = st.columns(2)

                            nombres     = [m for m, _ in marcas_sorted]
                            porcentajes = [i["porcentaje"] for _, i in marcas_sorted]
                            confianzas  = [i["confianza_media"] for _, i in marcas_sorted]
                            colors      = plt.cm.plasma([i / max(len(nombres), 1) for i in range(len(nombres))])

                            with col_c1:
                                fig1, ax1 = plt.subplots(figsize=(5, 3), facecolor="#0d0d1a")
                                ax1.set_facecolor("#1a1a3e")
                                ax1.barh(nombres, porcentajes, color=colors, edgecolor="none")
                                ax1.set_xlabel("% aparición", color="#8888bb", fontsize=9)
                                ax1.set_title("% aparición por marca", color="white", fontsize=10)
                                ax1.tick_params(colors="white", labelsize=8)
                                ax1.spines[:].set_color("#2a2a5a")
                                st.pyplot(fig1)
                                plt.close(fig1)

                            with col_c2:
                                fig2, ax2 = plt.subplots(figsize=(5, 3), facecolor="#0d0d1a")
                                ax2.set_facecolor("#1a1a3e")
                                ax2.bar(nombres, confianzas, color=colors, edgecolor="none")
                                ax2.set_ylabel("Confianza (%)", color="#8888bb", fontsize=9)
                                ax2.set_title("Confianza media por marca", color="white", fontsize=10)
                                ax2.tick_params(colors="white", labelsize=8)
                                ax2.spines[:].set_color("#2a2a5a")
                                plt.setp(ax2.get_xticklabels(), rotation=20, ha="right", fontsize=8)
                                st.pyplot(fig2)
                                plt.close(fig2)

                            # ── Tabla descargable ──────────────────────────
                            st.markdown("### 📋 Tabla de resultados")
                            df = pd.DataFrame([
                                {
                                    "Marca":             marca.upper(),
                                    "Tiempo (s)":        info["tiempo_pantalla_s"],
                                    "% del vídeo":       info["porcentaje"],
                                    "Confianza media %": info["confianza_media"],
                                    "Confianza máx %":   info["confianza_maxima"],
                                    "Frames detectados": info["frames_detectados"],
                                }
                                for marca, info in marcas_sorted
                            ])
                            st.dataframe(df, use_container_width=True, hide_index=True)
                            st.download_button(
                                "⬇️ Descargar CSV",
                                data=df.to_csv(index=False),
                                file_name="resultados_logos.csv",
                                mime="text/csv"
                            )

                            # ── Informe PNG ────────────────────────────────
                            if data.get("informe_url"):
                                st.markdown("### 🖼️ Informe visual completo")
                                try:
                                    img_resp = requests.get(
                                        f"{api}{data['informe_url']}", timeout=10
                                    )
                                    if img_resp.status_code == 200:
                                        st.image(img_resp.content, use_container_width=True)
                                except Exception:
                                    st.info("El informe visual se guardó en outputs/")

                except requests.exceptions.Timeout:
                    st.error("⏱️ Tiempo agotado. Prueba con un vídeo más corto.")
                except Exception as e:
                    st.error(f"❌ Error inesperado: {e}")

# ── Footer ─────────────────────────────────────────────────────────────────
st.divider()
st.markdown(
    "<p style='text-align:center; color:#444477; font-size:0.8rem;'>"
    "v3 · Detección de logos · YOLOv8 + FastAPI + Streamlit"
    "</p>",
    unsafe_allow_html=True
)