app.py

import gradio as gr
import os

projects = [
    {"name": "Idealyze", "desc": "AI-powered content optimization platform", "skills": ["NLP", "Transformers", "FastAPI"], "live": "https://huggingface.co/spaces/sreelekhaputta2/Idealyze", "video": "Idealyze.mp4"},
    {"name": "DivineLoop", "desc": "Real-time audio-visual looping generator", "skills": ["Audio Processing", "Computer Vision", "WebRTC"], "live": "https://huggingface.co/spaces/sreelekhaputta2/DivineLoop", "video": "Divineloop.mp4"},
    {"name": "GenDoc_AI", "desc": "Intelligent PDF document generation", "skills": ["LLMs", "PDF Generation", "LangChain"], "live": "https://huggingface.co/spaces/sreelekhaputta2/GenDoc_AI", "video": "GendocAI.mp4"},
    {"name": "LinkShield", "desc": "Advanced URL security threat detection", "skills": ["Cybersecurity", "API Integration", "FastAPI"], "live": "https://huggingface.co/spaces/sreelekhaputta2/LinkShield", "video": "Linkshield.mp4"},
    {"name": "Chatbot", "desc": "Multi-modal conversational AI with memory", "skills": ["LLMs", "RAG", "Vector DB"], "live": "https://huggingface.co/spaces/sreelekhaputta2/Chatbot", "video": "Wiseverse.mp4"},
    {"name": "AvatarVerse", "desc": "Photorealistic AI avatar generator", "skills": ["Stable Diffusion", "ControlNet", "GANs"], "live": "https://huggingface.co/spaces/sreelekhaputta2/AvatarVerse", "video": "Avatarverse.mp4"}
]

css = """
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

* { font-family: 'Inter', sans-serif !important; }

body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

.gradio-container {
    background: none !important;
    position: relative !important;
    min-height: 100vh !important;
}

#background-video {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    object-fit: cover !important;
    z-index: -2 !important;
    pointer-events: none !important;
}

.video-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: linear-gradient(rgba(15,15,35,0.85), rgba(45,27,105,0.85)) !important;
    z-index: -1 !important;
}

.glass-card {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(25px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 24px !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4) !important;
}

.center-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    justify-content: center !important;
}

.demo-btn {
    background: linear-gradient(135deg, #ff6b6b, #feca57) !important;
    border: none !important;
    border-radius: 16px !important;
    color: white !important;
    font-weight: 600 !important;
    padding: 1.2rem 2.5rem !important;
    font-size: 1.1rem !important;
    width: 100% !important;
    max-width: 350px !important;
    margin: 1rem auto !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
    text-align: center !important;
}

.demo-btn:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 20px 40px rgba(255, 107, 107, 0.4) !important;
}

.video-medium { 
    height: 350px !important; 
    max-width: 100% !important; 
    width: 650px !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
}

.header-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-radius: 24px !important;
    padding: 2.5rem !important;
    text-align: center !important;
    box-shadow: 0 25px 50px rgba(102, 126, 234, 0.4) !important;
}

@media (max-width: 768px) {
    .demo-btn { padding: 1rem 2rem !important; font-size: 1rem !important; }
    .video-medium { height: 280px !important; width: 100% !important; }
}
"""

def get_video_file(video_path):
    """Returns the video file if it exists, otherwise returns None"""
    if os.path.exists(video_path):
        return video_path
    return None

with gr.Blocks() as demo:
    # Background Video
    gr.HTML("""
    <video autoplay muted loop id="background-video" preload="auto">
        <source src="bg.mp4" type="video/mp4">
    </video>
    <div class="video-overlay"></div>
    """)
    
    # Centered Header
    with gr.Row(variant="compact", elem_classes="center-content"):
        gr.HTML("""
        <div class="header-gradient glass-card">
            <h1 style="margin: 0; font-weight: 800; font-size: 3rem; background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
                ✨ AI/ML Projects
            </h1>
            <p style="margin: 1rem 0 0 0; font-size: 1.3rem; opacity: 0.9;">
                6 Production-Ready Projects • Live on Hugging Face
            </p>
        </div>
        """)
    
    # Project Tabs
    with gr.Tabs():
        for proj in projects:
            with gr.TabItem(proj["name"]):
                with gr.Column(elem_classes="glass-card center-content"):
                    gr.Markdown(f"# 🚀 **{proj['name']}**")
                    gr.Markdown(f"**📝 {proj['desc']}**")
                    gr.Markdown(f"**🛠️ Tech Stack:** {' • '.join(proj['skills'])}")
                    
                    gr.HTML(f'''
                    <a href="{proj["live"]}" target="_blank" class="demo-btn" style="display: inline-block; text-align: center; line-height: 1.5;">
                        🎮 Launch {proj['name']} Live Demo
                    </a>
                    ''')
                    
                    # Video Component - using Gradio's built-in Video component
                    video_file = get_video_file(proj["video"])
                    if video_file:
                        gr.Video(
                            value=video_file,
                            label="📹 Project Demo",
                            height=350,
                            interactive=False,
                            elem_classes="video-medium"
                        )
                    else:
                        gr.HTML(f"<div style='padding: 20px; text-align: center; color: #fff;'><p>📹 Video file not found: {proj['video']}</p></div>")

demo.launch(share=True)