Update app.py

app.py

@@ -1,87 +1,183 @@
+!pip install gradio==5.4.1 -q
+
 import gradio as gr
-import os
 
-# --- 1. DATA ---
 projects = [
-    {"name": "Idealyze", "desc": "AI-powered content optimization", "live": "https://huggingface.co/spaces/sreelekhaputta2/Idealyze", "video": "Idealyze.mp4"},
-    {"name": "DivineLoop", "desc": "Audio-visual looping generator", "live": "https://huggingface.co/spaces/sreelekhaputta2/DivineLoop", "video": "Divineloop.mp4"},
-    {"name": "GenDoc_AI", "desc": "Intelligent PDF generation", "live": "https://huggingface.co/spaces/sreelekhaputta2/GenDoc_AI", "video": "GendocAI.mp4"},
-    {"name": "LinkShield", "desc": "URL security detection", "live": "https://huggingface.co/spaces/sreelekhaputta2/LinkShield", "video": "Linkshield.mp4"},
-    {"name": "Chatbot", "desc": "Multi-modal AI with memory", "live": "https://huggingface.co/spaces/sreelekhaputta2/Chatbot", "video": "Wiseverse.mp4"},
-    {"name": "AvatarVerse", "desc": "Photorealistic AI avatars", "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"}
 ]
 
-# --- 2. THE NUCLEAR CSS OPTION ---
-# This forces EVERYTHING in Gradio to be transparent
 css = """
-body, .gradio-container, .main, #root, .flex-col, .tabs, .tabitem, footer {
-    background-color: transparent !important;
-    background: transparent !important;
-    border: none !important;
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+* { font-family: 'Inter', sans-serif !important; }
+body { 
+    margin: 0 !important; padding: 0 !important; overflow-x: hidden !important;
+    background: #0a0a1a !important;
 }
 
-#bg-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    z-index: -100;
+#particles-canvas {
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100vw !important;
+    height: 100vh !important;
+    z-index: -1 !important;
+    pointer-events: none !important;
 }
 
-video#bg-video {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+.pexels-overlay {
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100vw !important;
+    height: 100vh !important;
+    background: linear-gradient(rgba(10,10,26,0.7), rgba(45,27,105,0.6)) !important;
+    z-index: 0 !important;
 }
 
-.overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.65); /* Darken for readability */
-    z-index: -90;
+.glass-card {
+    background: rgba(255, 255, 255, 0.15) !important;
+    backdrop-filter: blur(25px) !important;
+    border: 1px solid rgba(255, 255, 255, 0.2) !important;
+    border-radius: 24px !important;
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4) !important;
 }
 
-.glass-card {
-    background: rgba(255, 255, 255, 0.1) !important;
-    backdrop-filter: blur(15px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: 20px;
-    padding: 20px;
-    color: white !important;
+.center-content {
+    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;
+}
+
+.demo-btn:hover {
+    transform: scale(1.05) !important;
+    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; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
+}
+
+.header-gradient {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    border-radius: 24px !important; padding: 3rem !important; 
+    text-align: center !important; box-shadow: 0 25px 50px rgba(102, 126, 234, 0.4) !important;
+    margin: 2rem auto !important; max-width: 800px !important;
 }
 """
 
-# --- 3. INTERFACE ---
-with gr.Blocks(css=css, theme=gr.themes.Default()) as demo:
+with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo:
+    # ✅ PEXELS-STYLE PARTICLE VIDEO BACKGROUND
+    gr.HTML('''
+    <canvas id="particles-canvas"></canvas>
+    <div class="pexels-overlay"></div>
     
-    # Using the standard /file= syntax which is faster than Base64
-    gr.HTML("""
-    <div id="bg-container">
-        <video autoplay muted loop playsinline id="bg-video">
-            <source src="file/bg.mp4" type="video/mp4">
-        </video>
-        <div class="overlay"></div>
-    </div>
-    """)
-
-    with gr.Column():
-        gr.Markdown("# ✨ AI/ML Portfolio", elem_classes="glass-card")
+    <script>
+    const canvas = document.getElementById('particles-canvas');
+    const ctx = canvas.getContext('2d');
+    
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    
+    window.addEventListener('resize', () => {
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+    });
+    
+    const particles = [];
+    const particleCount = 120;
+    
+    class Particle {
+        constructor() {
+            this.x = Math.random() * canvas.width;
+            this.y = Math.random() * canvas.height;
+            this.size = Math.random() * 3 + 1;
+            this.speedX = Math.random() * 0.5 - 0.25;
+            this.speedY = Math.random() * 0.5 - 0.25;
+            this.hue = Math.random() * 60 + 200; // Cyan-blue spectrum
+        }
+        
+        update() {
+            this.x += this.speedX;
+            this.y += this.speedY;
+            
+            if (this.x > canvas.width || this.x < 0) this.speedX *= -1;
+            if (this.y > canvas.height || this.y < 0) this.speedY *= -1;
+        }
+        
+        draw() {
+            ctx.save();
+            ctx.globalAlpha = 0.7;
+            ctx.fillStyle = `hsl(${this.hue}, 70%, 60%)`;
+            ctx.shadowBlur = 10;
+            ctx.shadowColor = `hsl(${this.hue}, 70%, 50%)`;
+            ctx.beginPath();
+            ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.restore();
+        }
+    }
+    
+    for (let i = 0; i < particleCount; i++) {
+        particles.push(new Particle());
+    }
+    
+    function animate() {
+        ctx.fillStyle = 'rgba(10, 10, 26, 0.1)';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        
+        particles.forEach(p => {
+            p.update();
+            p.draw();
+        });
+        
+        requestAnimationFrame(animate);
+    }
+    
+    animate();
+    </script>
+    ''')
+    
+    gr.Markdown(
+        "# ✨ **AI/ML Projects**\n\n**6 Production-Ready Projects • Live on Hugging Face**", 
+        elem_classes="header-gradient glass-card center-content"
+    )
     
-        with gr.Tabs():
-            for proj in projects:
-                with gr.TabItem(proj["name"]):
-                    with gr.Column(elem_classes="glass-card"):
-                        gr.Markdown(f"## {proj['name']}")
-                        gr.Markdown(proj['desc'])
-                        gr.HTML(f'<a href="{proj["live"]}" target="_blank" style="color: cyan;">🎮 Live Demo</a>')
-                        
-                        if os.path.exists(proj["video"]):
-                            gr.Video(value=proj["video"], height=300)
+    with gr.Tabs():
+        for proj in projects:
+            with gr.TabItem(proj["name"]):
+                with gr.Column(elem_classes="glass-card center-content"):
+                    gr.Markdown(f"# 🚀 **{proj['name']}**")
+                    gr.Markdown(f"**📝 {proj['desc']}**")
+                    gr.Markdown(f"**🛠️ Tech Stack:** {' • '.join(proj['skills'])}")
+                    
+                    gr.HTML(f'''
+                    <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"
+                    )
 
-# --- 4. LAUNCH ---
-# allowed_paths is KEY. It tells Gradio it's allowed to serve these files.
-demo.launch(allowed_paths=["."])
+demo.launch(share=True, debug=True, height=950, show_error=True)