Update app.py

app.py

@@ -1,3 +1,5 @@
+!pip install gradio==5.4.1 -q
+
 import gradio as gr
 
 projects = [
@@ -11,165 +13,261 @@ projects = [
 
 css = """
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
-
-/* MOBILE SCROLL FIXED + CENTER */
 * { 
-    font-family: 'Inter', sans-serif !important; 
-    color: white !important;
-    box-sizing: border-box !important;
-    max-width: 100% !important;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; 
+    box-sizing: border-box;
 }
 
-/* SCROLLABLE MOBILE */
-html, body, .gradio-container {
+body, .gradio-container {
     margin: 0 !important; 
     padding: 0 !important; 
-    height: auto !important;
-    min-height: 100vh !important;
     overflow-x: hidden !important;
-    overflow-y: auto !important;
-    -webkit-overflow-scrolling: touch !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;
 }
 
-/* PERFECT MOBILE CENTER */
-.center-content {
-    display: flex !important;
-    flex-direction: column !important;
-    align-items: center !important;
-    justify-content: flex-start !important;
+/* Consistent glassmorphism across all themes */
+.glass-card {
+    background: rgba(255, 255, 255, 0.12) !important;
+    backdrop-filter: blur(20px) saturate(180%) !important;
+    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
+    border: 1px solid rgba(255, 255, 255, 0.2) !important;
+    border-radius: 20px !important;
+    box-shadow: 
+        0 8px 32px rgba(0, 0, 0, 0.15),
+        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
+    position: relative !important;
+}
+
+.glass-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: 20px;
+    padding: 2px;
+    background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
+    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    mask-composite: exclude;
+    -webkit-mask-composite: xor;
+    pointer-events: none;
+}
+
+/* Universal gradient header */
+.header-gradient {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%) !important;
+    border-radius: 20px !important;
+    padding: 2.5rem 2rem !important;
     text-align: center !important;
-    width: 100% !important;
-    max-width: 100% !important;
-    padding: 1rem !important;
-    margin: 0 auto !important;
-    min-height: 100vh !important;
+    box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3) !important;
+    margin: 1.5rem auto !important;
+    position: relative;
+    overflow: hidden;
 }
 
-/* MOBILE GLASS CARDS */
-.glass-card {
-    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: 16px !important;
-    box-shadow: 0 15px 35px rgba(0,0,0,0.5) !important;
-    padding: 1.5rem !important;
-    margin: 1rem auto !important;
-    width: 95% !important;
-    max-width: 600px !important;
+.header-gradient::after {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
+    animation: shine 3s infinite;
+}
+
+@keyframes shine {
+    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
+    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
 }
 
-/* MOBILE BUTTONS */
+/* Demo button - consistent across themes */
 .demo-btn {
-    background: linear-gradient(135deg, #ff6b6b, #feca57) !important;
+    background: linear-gradient(135deg, #ff6b6b, #feca57, #ff9ff3) !important;
+    border: none !important;
+    border-radius: 16px !important;
     color: white !important;
-    padding: 1rem 2rem !important;
-    border-radius: 12px !important;
-    text-decoration: none !important;
-    display: inline-block !important;
     font-weight: 600 !important;
     font-size: 1rem !important;
-    width: 85% !important;
-    max-width: 300px !important;
+    padding: 1rem 2rem !important;
+    width: 100% !important;
+    max-width: 320px !important;
     margin: 1rem auto !important;
-    box-shadow: 0 10px 25px rgba(255,107,107,0.4) !important;
-    transition: all 0.3s !important;
-    touch-action: manipulation !important;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    text-decoration: none !important;
+    display: inline-flex !important;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    position: relative;
+    overflow: hidden;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
 }
 
-/* HEADER */
-.header-gradient {
-    background: linear-gradient(135deg, rgba(102,126,234,0.95), rgba(118,75,162,0.95)) !important;
+.demo-btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+    transition: left 0.5s;
+}
+
+.demo-btn:hover::before {
+    left: 100%;
+}
+
+.demo-btn:hover {
+    transform: translateY(-2px) scale(1.02) !important;
+    box-shadow: 0 15px 35px rgba(255, 107, 107, 0.4) !important;
+}
+
+/* Video styling */
+.video-medium { 
+    width: 100% !important; 
+    max-width: 700px !important;
+    height: 300px !important;
     border-radius: 16px !important;
-    padding: 2rem 1rem !important;
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
     margin: 1rem auto !important;
-    max-width: 95% !important;
 }
 
-/* VIDEO RESPONSIVE */
-.playable-video video {
-    width: 100% !important;
-    height: auto !important;
-    max-height: 280px !important;
-    border-radius: 12px !important;
-    margin: 1rem 0 !important;
+/* Typography consistency */
+h1, h2, h3 { 
+    font-weight: 700 !important;
+    background: linear-gradient(135deg, #ffffff, #e0e7ff) !important;
+    -webkit-background-clip: text !important;
+    -webkit-text-fill-color: transparent !important;
+    background-clip: text !important;
+    margin: 0.5rem 0 !important;
 }
 
-/* MOBILE TABS SCROLLABLE */
-.gradio-tabs {
-    width: 100% !important;
-    max-width: 100% !important;
+p, .prose { 
+    color: inherit !important;
+    opacity: 0.95 !important;
+    line-height: 1.6 !important;
 }
-.tab-header {
+
+/* Center content */
+.center-content {
     display: flex !important;
-    flex-wrap: wrap !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    text-align: center !important;
     justify-content: center !important;
-    overflow-x: auto !important;
-    background: transparent !important;
-}
-.tab-button {
-    color: white !important;
-    background: rgba(255,255,255,0.1) !important;
-    border: 1px solid rgba(255,255,255,0.3) !important;
-    margin: 0.2rem !important;
-    padding: 0.8rem 1rem !important;
-    white-space: nowrap !important;
-    min-height: 44px !important;
-    flex: 0 0 auto !important;
+    padding: 2rem 1rem !important;
+    gap: 1.5rem !important;
 }
 
-/* MOBILE SPECIFIC */
+/* Responsive breakpoints */
 @media (max-width: 768px) {
-    .center-content { padding: 0.8rem !important; }
-    .glass-card { padding: 1.2rem !important; margin: 0.8rem auto !important; width: 98% !important; }
-    .playable-video video { max-height: 220px !important; }
-    .demo-btn { padding: 0.9rem 1.8rem !important; font-size: 0.95rem !important; }
-    .header-gradient { padding: 1.5rem 1rem !important; }
-    .tab-header { padding: 0.5rem !important; }
+    .header-gradient { 
+        padding: 2rem 1.5rem !important; 
+        margin: 1rem 0.5rem !important;
+        border-radius: 16px !important;
+    }
+    
+    .demo-btn { 
+        padding: 0.9rem 1.5rem !important; 
+        font-size: 0.95rem !important;
+        max-width: 280px !important;
+    }
+    
+    .video-medium { 
+        height: 250px !important; 
+    }
+    
+    .glass-card {
+        margin: 0.5rem !important;
+        border-radius: 16px !important;
+    }
+    
+    .center-content {
+        padding: 1.5rem 1rem !important;
+        gap: 1rem !important;
+    }
+}
+
+@media (max-width: 480px) {
+    .video-medium { height: 220px !important; }
+    .demo-btn { padding: 0.8rem 1.2rem !important; font-size: 0.9rem !important; }
+    h1 { font-size: 1.8rem !important; }
+    h2 { font-size: 1.4rem !important; }
+}
+
+/* Tab improvements */
+.tabitem {
+    padding: 1rem !important;
+    margin: 0 !important;
+}
+
+.tabitem > div {
+    max-width: 100% !important;
+}
+
+/* Skill badges */
+.skills {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    gap: 0.5rem !important;
+    justify-content: center !important;
 }
 
-/* DESKTOP */
-@media (min-width: 1025px) {
-    .glass-card { padding: 2.5rem !important; max-width: 800px !important; }
-    .playable-video video { max-height: 350px !important; }
-    .center-content { max-width: 1000px !important; padding: 2rem !important; }
+.skill-badge {
+    background: rgba(255, 255, 255, 0.15) !important;
+    padding: 0.4rem 1rem !important;
+    border-radius: 20px !important;
+    font-size: 0.85rem !important;
+    font-weight: 500 !important;
+    border: 1px solid rgba(255, 255, 255, 0.2) !important;
 }
 """
 
-with gr.Blocks(css=css) as demo:
-    # HEADER
+with gr.Blocks(
+    css=css, 
+    theme=gr.themes.Soft(),
+    fill_height=True
+) as demo:
+    
     gr.Markdown(
         "# ✨ **AI/ML Projects**\n\n**6 Production-Ready Projects • Live on Hugging Face**", 
         elem_classes="header-gradient glass-card center-content"
     )
     
-    # SCROLLABLE TABS
-    with gr.Tabs(elem_classes="center-content"):
+    with gr.Tabs(elem_classes="glass-card") as tabs:
         for proj in projects:
-            with gr.TabItem(proj["name"]):
-                with gr.Column(elem_classes="glass-card center-content"):
+            with gr.TabItem(proj["name"], elem_classes="glass-card"):
+                with gr.Column(elem_classes="glass-card center-content", scale=1):
                     gr.Markdown(f"# 🚀 **{proj['name']}**")
                     gr.Markdown(f"**📝 {proj['desc']}**")
-                    gr.Markdown(f"**🛠️ Tech Stack:** {' • '.join(proj['skills'])}")
                     
-                    # BUTTON
+                    with gr.Row():
+                        gr.Markdown(f"**🛠️ Tech Stack:**")
+                        skills_md = " ".join([f'<span class="skill-badge">{skill}</span>' for skill in proj["skills"]])
+                        gr.HTML(skills_md)
+                    
                     gr.HTML(f'''
-                    <div style="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>
+                    <a href="{proj["live"]}" target="_blank" class="demo-btn">
+                        🎮 Launch {proj['name']} Live Demo
+                    </a>
                     ''')
                     
-                    # VIDEO
                     gr.Video(
                         value=proj["video"],
-                        label=f"📹 {proj['name']} Demo",
-                        height=280,
+                        label="📹 Project Demo",
+                        height=300,
+                        show_download_button=True,
                         interactive=False,
-                        format="mp4",
-                        elem_classes="playable-video"
+                        elem_classes="video-medium"
                     )
 
-demo.launch(share=True, debug=True, show_error=True, css=css)
+# Optimized for Hugging Face Spaces
+demo.launch(
+    share=True, 
+    debug=True, 
+    show_error=True,
+    height="auto",
+    enable_queue=True
+)