Update app.py

app.py

@@ -1,38 +1,179 @@
-!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"},
-    # ... rest of your projects
+    {"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"}
 ]
 
-# [PASTE THE CSS ABOVE HERE]
+css = """
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+
+/* PERFECT 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;
+}
+
+/* FORCE WHITE TEXT EVERYWHERE - LIGHT/DARK THEME SAFE */
+* { 
+    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 */
+.center-content {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    justify-content: center !important;
+    text-align: center !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    margin: 0 auto !important;
+    padding: 1rem !important;
+    box-sizing: border-box !important;
+}
+
+/* GLASSMORPHISM CARDS */
+.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;
+}
+
+/* PERFECT BUTTONS */
+.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;
+    line-height: 1.5 !important;
+    box-shadow: 0 10px 30px rgba(255,107,107,0.4) !important;
+}
+
+.demo-btn:hover {
+    transform: scale(1.05) !important;
+    box-shadow: 0 20px 40px rgba(255, 107, 107, 0.6) !important;
+}
+
+/* FAST LOADING VIDEOS */
+.video-container video {
+    width: 100% !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;
+}
+
+/* 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;
+    color: white !important;
+}
+
+/* TABS WHITE */
+.gradio-tabs, .tab-header, .tab-content { color: white !important; }
+.tab-button { color: white !important; }
+
+/* MOBILE PERFECTION */
+@media (max-width: 768px) {
+    .gradio-container { padding: 0.5rem !important; }
+    .center-content { 
+        padding: 1rem !important; 
+        margin: 0 !important; 
+        width: 100vw !important; 
+        max-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; 
+        width: 100% !important; 
+    }
+    .header-gradient { 
+        padding: 2rem 1rem !important; 
+        margin: 1rem 0 !important; 
+        max-width: 95vw !important;
+    }
+    .glass-card { padding: 1.5rem 1rem !important; }
+}
+"""
 
 with gr.Blocks(css=css) as demo:
+    # HEADER
     gr.Markdown(
-        "# ✨ **AI/ML Projects**\n\n**6 Production-Ready Projects • Live on Hugging Face**", 
+        "# ✨ **AI/ML Projects**\n\n**6 Production-Ready Projects • Live on Hugging Face Spaces**", 
         elem_classes="header-gradient glass-card center-content"
     )
     
+    # 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", scale=1):
+                    # PROJECT TITLE
                     gr.Markdown(f"# 🚀 **{proj['name']}**")
+                    
+                    # DESCRIPTION
                     gr.Markdown(f"**📝 {proj['desc']}**")
+                    
+                    # TECH STACK
                     gr.Markdown(f"**🛠️ Tech Stack:** {' • '.join(proj['skills'])}")
                     
+                    # LIVE DEMO BUTTON + ULTRA-FAST VIDEO
                     gr.HTML(f'''
-                    <div style="text-align:center;">
-                        <a href="{proj["live"]}" target="_blank" class="demo-btn" style="text-decoration:none;">
+                    <div style="text-align:center; width:100%;">
+                        <a href="{proj['live']}" target="_blank" class="demo-btn" style="text-decoration:none;">
                             🎮 Launch {proj['name']} Live Demo
                         </a>
-                        <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);">
-                            <source src="{proj["video"]}" type="video/mp4">
-                        </video>
+                        <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);">
+                                <source src="{proj['video']}" type="video/mp4">
+                                Video not supported
+                            </video>
+                        </div>
                     </div>
                     ''')
 
-demo.launch(share=True, debug=True, height=950)
+# LAUNCH WITH SHARE LINK
+demo.launch(share=True, debug=True, height=950, show_error=True)