Update app.py

app.py

@@ -1,12 +1,12 @@
 import gradio as gr
 
 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"}
+    {"name": "Idealyze", "desc": "AI-powered content optimization platform", "skills": ["NLP", "Transformers", "FastAPI"], "live": "https://huggingface.co/spaces/sreelekhaputta2/Idealyze", "video": "Idealyze.mp4", "thumb": "Idealyze_thumb.jpg"},
+    {"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", "thumb": "Divineloop_thumb.jpg"},
+    {"name": "GenDoc_AI", "desc": "Intelligent PDF document generation", "skills": ["LLMs", "PDF Generation", "LangChain"], "live": "https://huggingface.co/spaces/sreelekhaputta2/GenDoc_AI", "video": "GendocAI.mp4", "thumb": "GendocAI_thumb.jpg"},
+    {"name": "LinkShield", "desc": "Advanced URL security threat detection", "skills": ["Cybersecurity", "API Integration", "FastAPI"], "live": "https://huggingface.co/spaces/sreelekhaputta2/LinkShield", "video": "Linkshield.mp4", "thumb": "Linkshield_thumb.jpg"},
+    {"name": "Chatbot", "desc": "Multi-modal conversational AI with memory", "skills": ["LLMs", "RAG", "Vector DB"], "live": "https://huggingface.co/spaces/sreelekhaputta2/Chatbot", "video": "Wiseverse.mp4", "thumb": "Wiseverse_thumb.jpg"},
+    {"name": "AvatarVerse", "desc": "Photorealistic AI avatar generator", "skills": ["Stable Diffusion", "ControlNet", "GANs"], "live": "https://huggingface.co/spaces/sreelekhaputta2/AvatarVerse", "video": "Avatarverse.mp4", "thumb": "Avatarverse_thumb.jpg"}
 ]
 
 css = """
@@ -14,35 +14,19 @@ css = """
 
 * { font-family: 'Inter', sans-serif !important; }
 
-body {
-    margin: 0 !important;
-    padding: 0 !important;
-    overflow-x: hidden !important;
-}
+body { margin: 0 !important; padding: 0 !important; overflow-x: hidden !important; }
 
-.gradio-container {
-    background: none !important;
-    position: relative !important;
-    min-height: 100vh !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;
+    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;
+    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;
 }
@@ -56,27 +40,19 @@ body {
 }
 
 .center-content {
-    display: flex !important;
-    flex-direction: column !important;
-    align-items: center !important;
-    text-align: center !important;
+    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;
+    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;
 }
 
@@ -85,32 +61,58 @@ body {
     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;
+/* FAST VIDEO LOADING */
+.fast-video-container {
+    position: relative !important; width: 100% !important; max-width: 650px !important;
+    height: 280px !important; margin: 1rem auto !important;
+}
+
+.fast-video-poster {
+    width: 100% !important; height: 280px !important;
+    object-fit: cover !important; border-radius: 16px !important;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
+    transition: opacity 0.3s ease !important;
+}
+
+.fast-video-player {
+    width: 100% !important; height: 280px !important;
+    border-radius: 16px !important; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
+}
+
+.fast-video-player video {
+    width: 100% !important; height: 280px !important;
+    object-fit: cover !important; border-radius: 16px !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;
+    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; }
+    .fast-video-container, .fast-video-poster, .fast-video-player { height: 220px !important; }
 }
 """
 
+def create_fast_video_html(video_file, thumb_file):
+    return f"""
+    <div class="fast-video-container">
+        <img src="{thumb_file}" class="fast-video-poster" alt="Demo thumbnail" loading="lazy">
+        <div class="fast-video-player">
+            <video preload="metadata" muted loop playsinline controlsList="nodownload" style="width:100%;height:100%;">
+                <source src="{video_file}" type="video/mp4">
+                <img src="{thumb_file}" style="width:100%;height:100%;object-fit:cover;">
+            </video>
+        </div>
+    </div>
+    """
+
 with gr.Blocks() as demo:
     # Background Video
     gr.HTML("""
-    <video autoplay muted loop id="background-video">
+    <video autoplay muted loop playsinline id="background-video">
         <source src="bg.mp4" type="video/mp4">
     </video>
     <div class="video-overlay"></div>
@@ -120,7 +122,10 @@ with gr.Blocks() as demo:
     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;">
+            <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;">
@@ -129,7 +134,7 @@ with gr.Blocks() as demo:
         </div>
         """)
     
-    # Project Tabs
+    # Project Tabs - FAST LOADING
     with gr.Tabs():
         for proj in projects:
             with gr.TabItem(proj["name"]):
@@ -139,18 +144,13 @@ with gr.Blocks() as demo:
                     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;">
+                    <a href="{proj["live"]}" target="_blank" class="demo-btn">
                         🎮 Launch {proj['name']} Live Demo
                     </a>
                     ''')
                     
-                    gr.Video(
-                        value=proj["video"],
-                        label="📹 Project Demo",
-                        height=350,
-                        interactive=False,
-                        elem_classes="video-medium"
-                    )
+                    # ULTRA-FAST VIDEO with thumbnail
+                    gr.HTML(create_fast_video_html(proj["video"], proj["thumb"]))
 
 demo.launch(
     share=True,