Update app.py

app.py

@@ -1,55 +1,59 @@
-
+!pip install gradio==5.4.1 -q
 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"},
+    {"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');
 
-/* PERFECT BACKGROUND */
+/* PERFECT RESPONSIVE BACKGROUND */
 .gradio-container {
     background: linear-gradient(rgba(10,10,26,0.92), rgba(45,27,105,0.92)),
                 url('https://tse4.explicit.bing.net/th/id/OIP.CSOmF_Va1tPzTClwWuugnwHaEK?pid=Api&h=220&P=0') center/cover no-repeat !important;
     font-family: 'Inter', sans-serif !important;
     min-height: 100vh !important;
     color: white !important;
+    padding: 0 !important;
+    margin: 0 !important;
 }
 
-/* FORCE WHITE TEXT EVERYWHERE - LIGHT/DARK THEME SAFE */
-* { 
+/* WHITE TEXT EVERYWHERE */
+*, body { 
     font-family: 'Inter', sans-serif !important; 
     color: white !important;
-}
-body { 
-    margin: 0 !important; 
-    padding: 0 !important; 
-    overflow-x: hidden !important; 
     background: transparent !important;
-    color: white !important;
 }
 
-/* MOBILE PERFECT CENTERING */
+/* MOBILE SCROLL FIX */
+html, body {
+    overflow-x: hidden !important;
+    overflow-y: auto !important;
+    height: 100% !important;
+}
+
+/* PERFECT CENTERING */
 .center-content {
     display: flex !important;
     flex-direction: column !important;
     align-items: center !important;
-    justify-content: center !important;
+    justify-content: flex-start !important;
     text-align: center !important;
     width: 100% !important;
     max-width: 100% !important;
     margin: 0 auto !important;
     padding: 1rem !important;
+    min-height: 100vh !important;
     box-sizing: border-box !important;
 }
 
-/* GLASSMORPHISM CARDS */
+/* GLASS CARDS */
 .glass-card {
     background: rgba(255, 255, 255, 0.25) !important;
     backdrop-filter: blur(30px) !important;
@@ -59,9 +63,11 @@ body {
     color: white !important;
     padding: 2rem !important;
     margin: 1rem auto !important;
+    width: 100% !important;
+    max-width: 800px !important;
 }
 
-/* PERFECT BUTTONS */
+/* BUTTONS */
 .demo-btn {
     background: linear-gradient(135deg, #ff6b6b, #feca57) !important;
     border: none !important;
@@ -76,8 +82,6 @@ body {
     transition: all 0.3s ease !important;
     text-decoration: none !important;
     display: inline-block !important;
-    text-align: center !important;
-    line-height: 1.5 !important;
     box-shadow: 0 10px 30px rgba(255,107,107,0.4) !important;
 }
 
@@ -86,13 +90,19 @@ body {
     box-shadow: 0 20px 40px rgba(255, 107, 107, 0.6) !important;
 }
 
-/* FAST LOADING VIDEOS */
+/* MOBILE VIDEO FIX - FULL RESPONSIVE */
+.video-container {
+    width: 100% !important;
+    max-width: 100% !important;
+    margin: 1rem 0 !important;
+}
 .video-container video {
     width: 100% !important;
+    height: auto !important;
     max-height: 350px !important;
     border-radius: 16px !important;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
-    margin-top: 1rem !important;
+    display: block !important;
 }
 
 /* HEADER */
@@ -107,18 +117,24 @@ body {
     color: white !important;
 }
 
-/* TABS WHITE */
-.gradio-tabs, .tab-header, .tab-content { color: white !important; }
-.tab-button { color: white !important; }
+/* TABS WHITE + MOBILE */
+.gradio-tabs, .tab-header, .tab-content, .tab-button { 
+    color: white !important; 
+    background: transparent !important;
+}
+.tab-item { 
+    color: white !important; 
+    min-height: 60vh !important;
+}
 
 /* MOBILE PERFECTION */
 @media (max-width: 768px) {
-    .gradio-container { padding: 0.5rem !important; }
+    .gradio-container { padding: 0 !important; margin: 0 !important; }
     .center-content { 
         padding: 1rem !important; 
-        margin: 0 !important; 
         width: 100vw !important; 
         max-width: 100vw !important;
+        overflow-y: auto !important;
     }
     .demo-btn { 
         padding: 1rem 1.5rem !important; 
@@ -128,52 +144,60 @@ body {
     .video-container video { 
         max-height: 280px !important; 
         width: 100% !important; 
+        height: auto !important;
     }
     .header-gradient { 
         padding: 2rem 1rem !important; 
         margin: 1rem 0 !important; 
         max-width: 95vw !important;
     }
-    .glass-card { padding: 1.5rem 1rem !important; }
+    .glass-card { 
+        padding: 1.5rem 1rem !important; 
+        margin: 0.5rem 0 !important;
+    }
+    .tab-item { min-height: 70vh !important; }
 }
+
+/* PREVENT HORIZONTAL SCROLL */
+* { max-width: 100% !important; box-sizing: border-box !important; }
 """
 
-with gr.Blocks(css=css) as demo:
+with gr.Blocks(css=css, height=1000) as demo:
     # HEADER
-    gr.Markdown(
-        "# ✨ **AI/ML Projects**\n\n**6 Production-Ready Projects • Live on Hugging Face Spaces**", 
-        elem_classes="header-gradient glass-card center-content"
-    )
+    with gr.Column(elem_classes="center-content"):
+        gr.Markdown(
+            "# ✨ **AI/ML Projects**\n\n**6 Production-Ready Projects • Live on Hugging Face Spaces**", 
+            elem_classes="header-gradient glass-card"
+        )
     
-    # TABS
+    # TABS WITH VIDEOS THAT WORK
     with gr.Tabs(elem_classes="center-content"):
         for proj in projects:
             with gr.TabItem(proj["name"]):
-                with gr.Column(elem_classes="glass-card center-content", scale=1):
-                    # PROJECT TITLE
-                    gr.Markdown(f"# 🚀 **{proj['name']}**")
+                with gr.Column(elem_classes="glass-card center-content"):
+                    # TITLE
+                    gr.Markdown(f"# 🚀 **{proj['name']}**", elem_classes="center-content")
                     
                     # DESCRIPTION
-                    gr.Markdown(f"**📝 {proj['desc']}**")
+                    gr.Markdown(f"**📝 {proj['desc']}**", elem_classes="center-content")
                     
-                    # TECH STACK
-                    gr.Markdown(f"**🛠️ Tech Stack:** {' • '.join(proj['skills'])}")
+                    # SKILLS
+                    gr.Markdown(f"**🛠️ Tech Stack:** {' • '.join(proj['skills'])}", elem_classes="center-content")
                     
-                    # LIVE DEMO BUTTON + ULTRA-FAST VIDEO
+                    # BUTTON + VIDEO
                     gr.HTML(f'''
-                    <div style="text-align:center; width:100%;">
-                        <a href="{proj['live']}" target="_blank" class="demo-btn" style="text-decoration:none;">
+                    <div style="width:100%; text-align:center; padding:1rem;">
+                        <a href="{proj['live']}" target="_blank" class="demo-btn" style="text-decoration:none; display:inline-block;">
                             🎮 Launch {proj['name']} Live Demo
                         </a>
                         <div class="video-container">
                             <video controls preload="metadata" 
-                                   style="width:100%; max-height:350px; border-radius:16px; margin-top:1rem; box-shadow:0 20px 40px rgba(0,0,0,0.4);">
+                                   style="width:100%; height:auto; max-height:350px; border-radius:16px; margin-top:1rem; box-shadow:0 20px 40px rgba(0,0,0,0.4); display:block;">
                                 <source src="{proj['video']}" type="video/mp4">
-                                Video not supported
+                                Your browser doesn't support video
                             </video>
                         </div>
                     </div>
                     ''')
 
-# LAUNCH WITH SHARE LINK
-demo.launch(share=True, debug=True, height=950, show_error=True)
+demo.launch(share=True, debug=True, show_error=True, height=1000)