Update app.py

app.py

@@ -1,84 +1,91 @@
 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"},
+    {"name": "DivineLoop", "desc": "Real-time audio-visual looping generator", "skills": ["Audio Processing", "Computer Vision", "WebRTC"], "live": "https://huggingface.co/spaces/sreelekhaputta2/DivineLoop"},
+    {"name": "GenDoc_AI", "desc": "Intelligent PDF document generation", "skills": ["LLMs", "PDF Generation", "LangChain"], "live": "https://huggingface.co/spaces/sreelekhaputta2/GenDoc_AI"},
+    {"name": "LinkShield", "desc": "Advanced URL security threat detection", "skills": ["Cybersecurity", "API Integration", "FastAPI"], "live": "https://huggingface.co/spaces/sreelekhaputta2/LinkShield"},
+    {"name": "Chatbot", "desc": "Multi-modal conversational AI with memory", "skills": ["LLMs", "RAG", "Vector DB"], "live": "https://huggingface.co/spaces/sreelekhaputta2/Chatbot"},
+    {"name": "AvatarVerse", "desc": "Photorealistic AI avatar generator", "skills": ["Stable Diffusion", "ControlNet", "GANs"], "live": "https://huggingface.co/spaces/sreelekhaputta2/AvatarVerse"}
 ]
 
 css = """
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
 
-/* PERFECT HF SPACES 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;
-}
-
-/* WHITE TEXT EVERYWHERE */
-*, body { 
+/* MOBILE-FIRST BASE */
+* { 
     font-family: 'Inter', sans-serif !important; 
     color: white !important;
-    background: transparent !important;
+    box-sizing: border-box !important;
+}
+body, .gradio-container {
+    margin: 0 !important; 
+    padding: 0 !important; 
+    background: linear-gradient(rgba(10,10,26,0.95), rgba(45,27,105,0.95)),
+                url('https://tse4.explicit.bing.net/th/id/OIP.CSOmF_Va1tPzTClwWuugnwHaEK?pid=Api&h=220&P=0') center/cover !important;
+    min-height: 100vh !important;
+    overflow-x: hidden !important;
 }
 
-/* MOBILE SCROLL + CENTER */
+/* MOBILE PERFECT CENTERING */
 .center-content {
     display: flex !important;
     flex-direction: column !important;
     align-items: center !important;
     justify-content: flex-start !important;
     text-align: center !important;
-    width: 100% !important;
+    width: 100vw !important;
+    max-width: 100vw !important;
     padding: 1rem !important;
-    box-sizing: border-box !important;
+    margin: 0 !important;
 }
 
-/* GLASS CARDS */
+/* GLASSMORPHISM - MOBILE SAFE */
 .glass-card {
-    background: rgba(255, 255, 255, 0.25) !important;
-    backdrop-filter: blur(30px) !important;
-    border: 1px solid rgba(255, 255, 255, 0.4) !important;
-    border-radius: 24px !important;
-    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6) !important;
-    color: white !important;
-    padding: 2rem !important;
-    margin: 1rem auto !important;
-    width: 100% !important;
-    max-width: 800px !important;
+    background: rgba(255,255,255,0.2) !important;
+    backdrop-filter: blur(25px) !important;
+    border: 1px solid rgba(255,255,255,0.3) !important;
+    border-radius: 20px !important;
+    box-shadow: 0 20px 40px rgba(0,0,0,0.5) !important;
+    padding: 1.5rem !important;
+    margin: 0.5rem auto !important;
+    width: 95vw !important;
+    max-width: 600px !important;
 }
 
-/* BUTTONS */
+/* BUTTONS - MOBILE PERFECT */
 .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;
+    padding: 1rem 2rem !important;
+    border-radius: 12px !important;
     text-decoration: none !important;
     display: inline-block !important;
-    box-shadow: 0 10px 30px rgba(255,107,107,0.4) !important;
+    font-weight: 600 !important;
+    font-size: 1rem !important;
+    width: 90% !important;
+    max-width: 300px !important;
+    margin: 1rem auto !important;
+    box-shadow: 0 10px 25px rgba(255,107,107,0.4) !important;
+    transition: all 0.3s !important;
+    line-height: 1.4 !important;
 }
 
 .demo-btn:hover {
-    transform: scale(1.05) !important;
-    box-shadow: 0 20px 40px rgba(255, 107, 107, 0.6) !important;
+    transform: scale(1.02) !important;
+    box-shadow: 0 15px 35px rgba(255,107,107,0.6) !important;
+}
+
+/* HEADER - MOBILE RESPONSIVE */
+.header-gradient {
+    background: linear-gradient(135deg, rgba(102,126,234,0.95), rgba(118,75,162,0.95)) !important;
+    border-radius: 20px !important;
+    padding: 2rem 1rem !important;
+    margin: 1rem auto !important;
+    max-width: 95vw !important;
 }
 
-/* VIDEOS */
+/* VIDEOS - MOBILE PERFECT */
 .video-container {
     width: 100% !important;
     margin: 1rem 0 !important;
@@ -86,36 +93,49 @@ css = """
 .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;
+    max-height: 300px !important;
+    border-radius: 12px !important;
+    box-shadow: 0 15px 30px rgba(0,0,0,0.4) !important;
+    display: block !important;
 }
 
-/* HEADER */
-.header-gradient {
-    background: linear-gradient(135deg, rgba(102,126,234,0.95), rgba(118,75,162,0.95)) !important;
-    border-radius: 24px !important;
-    padding: 3rem 2rem !important;
-    text-align: center !important;
-    box-shadow: 0 25px 50px rgba(102, 126, 234, 0.5) !important;
-    margin: 2rem auto !important;
-    max-width: 90% !important;
+/* TABS WHITE */
+.gradio-tabs, .tab-header, .tab-content, .tab-button { 
+    color: white !important; 
+    background: transparent !important;
+}
+.tab-item { 
+    padding: 1rem !important; 
+    min-height: 70vh !important;
+}
+
+/* TABLET */
+@media (min-width: 769px) and (max-width: 1024px) {
+    .glass-card { padding: 2rem !important; max-width: 700px !important; }
+    .demo-btn { padding: 1.1rem 2.2rem !important; font-size: 1.05rem !important; }
+    .video-container video { max-height: 320px !important; }
+    .header-gradient { padding: 2.5rem 1.5rem !important; }
 }
 
-/* TABS + MOBILE */
-.gradio-tabs, .tab-header, .tab-content, .tab-button { color: white !important; }
-.tab-item { min-height: 60vh !important; color: white !important; }
+/* DESKTOP */
+@media (min-width: 1025px) {
+    .glass-card { padding: 2.5rem !important; max-width: 800px !important; }
+    .demo-btn { padding: 1.2rem 2.5rem !important; font-size: 1.1rem !important; max-width: 350px !important; }
+    .video-container video { max-height: 350px !important; }
+    .header-gradient { padding: 3rem 2rem !important; max-width: 90% !important; }
+}
 
-@media (max-width: 768px) {
-    .center-content { padding: 1rem !important; width: 100vw !important; }
-    .demo-btn { padding: 1rem 1.5rem !important; font-size: 1rem !important; max-width: 90vw !important; }
-    .video-container video { max-height: 280px !important; }
-    .header-gradient { padding: 2rem 1rem !important; max-width: 95vw !important; }
-    .glass-card { padding: 1.5rem 1rem !important; }
+/* ULTRA MOBILE FIXES */
+@media (max-width: 480px) {
+    .gradio-container { padding: 0.5rem !important; }
+    .center-content { padding: 0.8rem !important; }
+    .glass-card { padding: 1.2rem 0.8rem !important; border-radius: 16px !important; }
+    .demo-btn { padding: 0.9rem 1.5rem !important; font-size: 0.95rem !important; }
+    .video-container video { max-height: 250px !important; }
+    .header-gradient { padding: 1.5rem 0.8rem !important; margin: 0.5rem auto !important; }
 }
 """
 
-# **FIXED: Gradio 6.0 - css in launch()**
 with gr.Blocks() as demo:
     # HEADER
     with gr.Column(elem_classes="center-content"):
@@ -124,34 +144,40 @@ with gr.Blocks() as demo:
             elem_classes="header-gradient glass-card"
         )
     
-    # TABS
+    # MOBILE PERFECT TABS
     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"):
+                    # TITLE
                     gr.Markdown(f"# 🚀 **{proj['name']}**")
+                    
+                    # DESCRIPTION
                     gr.Markdown(f"**📝 {proj['desc']}**")
+                    
+                    # SKILLS
                     gr.Markdown(f"**🛠️ Tech Stack:** {' • '.join(proj['skills'])}")
                     
+                    # BUTTON + VIDEO
                     gr.HTML(f'''
-                    <div style="width:100%; text-align:center;">
+                    <div style="width:100%; text-align:center; padding:1rem 0;">
                         <a href="{proj['live']}" target="_blank" class="demo-btn" style="text-decoration:none;">
                             🎮 Launch {proj['name']} Live Demo
                         </a>
                         <div class="video-container">
-                            <video controls preload="metadata" 
-                                   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);">
-                                <source src="{proj['video']}" type="video/mp4">
+                            <video controls preload="metadata" playsinline
+                                   style="width:100%; height:auto; max-height:300px; border-radius:12px; margin-top:1rem; box-shadow:0 15px 30px rgba(0,0,0,0.4);">
+                                <source src="./{proj['name']}.mp4" type="video/mp4">
+                                Video demo (tap to play)
                             </video>
                         </div>
                     </div>
                     ''')
 
-# **FIXED: css + height in launch()**
+# HF SPACES + MOBILE PERFECT
 demo.launch(
     share=True, 
     debug=True, 
     show_error=True,
-    css=css,
-    height=1000
+    css=css
 )