Update app.py

app.py

@@ -1,113 +1,104 @@
 import gradio as gr
+import base64
 import os
 
-# --- 1. DATA CONFIGURATION ---
+# --- 1. ENCODE VIDEO FUNCTION ---
+def get_base64_video(file_path):
+    # This looks for bg.mp4 in the same folder as app.py
+    if os.path.exists(file_path):
+        with open(file_path, "rb") as f:
+            data = f.read()
+            return base64.b64encode(data).decode()
+    return None
+
+# Load the video from the root path
+bg_video_base64 = get_base64_video("bg.mp4")
+
+# --- 2. DATA ---
 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", "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"}
 ]
 
-# --- 2. CSS STYLING ---
+# --- 3. CSS (Modified for HF Iframe) ---
 css = """
-/* Make the Gradio background transparent */
-.gradio-container {
-    background: transparent !important;
-}
-
-/* Ensure the main container doesn't have a white background */
-#root, .main, .gradio-container-5-4-1 {
+/* Make the Gradio UI transparent to see the video */
+.gradio-container, .main, #root, .tabs, .tabitem {
     background: transparent !important;
+    border: none !important;
 }
 
-/* Background Video Styling */
-#bg-video-container {
+#video-bg {
     position: fixed;
     top: 0;
     left: 0;
-    width: 100vw;
-    height: 100vh;
-    z-index: -10;
-    overflow: hidden;
-}
-
-#bg-video-container video {
     width: 100%;
     height: 100%;
     object-fit: cover;
+    z-index: -100;
 }
 
-.video-overlay {
-    position: absolute;
+#overlay {
+    position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background: linear-gradient(rgba(10, 10, 30, 0.8), rgba(20, 10, 50, 0.8));
-    z-index: -5;
+    background: linear-gradient(135deg, rgba(10,10,30,0.85), rgba(40,20,80,0.85));
+    z-index: -90;
 }
 
 .glass-card {
-    background: rgba(255, 255, 255, 0.07) !important;
-    backdrop-filter: blur(15px) !important;
+    background: rgba(255, 255, 255, 0.05) !important;
+    backdrop-filter: blur(20px) !important;
     border: 1px solid rgba(255, 255, 255, 0.1) !important;
     border-radius: 20px !important;
-    padding: 25px !important;
+    padding: 30px !important;
     color: white !important;
-}
-
-.center-content {
-    display: flex !important;
-    flex-direction: column !important;
-    align-items: center !important;
-    text-align: center !important;
+    text-align: center;
 }
 
 .demo-btn {
     background: linear-gradient(135deg, #6366f1, #a855f7) !important;
-    border-radius: 12px !important;
     color: white !important;
-    font-weight: bold !important;
-    padding: 12px 24px !important;
+    padding: 12px 28px !important;
+    border-radius: 12px !important;
     text-decoration: none !important;
     display: inline-block !important;
-    margin: 10px 0 !important;
+    font-weight: bold !important;
+    margin: 15px 0 !important;
 }
 """
 
-# --- 3. GRADIO INTERFACE ---
-# Note: allowed_paths is crucial for Hugging Face to let the browser access local files
-with gr.Blocks(css=css, theme=gr.themes.Soft(), delete_cache=(60, 60)) as demo:
-    
-    # Background Video HTML
-    # We use /file= to tell Gradio to serve the local file
-    gr.HTML("""
-    <div id="bg-video-container">
-        <video autoplay muted loop playsinline>
-            <source src="file=bg.mp4" type="video/mp4">
+# --- 4. INTERFACE ---
+with gr.Blocks(css=css) as demo:
+    if bg_video_base64:
+        gr.HTML(f"""
+        <video autoplay muted loop playsinline id="video-bg">
+            <source src="data:video/mp4;base64,{bg_video_base64}" type="video/mp4">
         </video>
-        <div class="video-overlay"></div>
-    </div>
-    """)
+        <div id="overlay"></div>
+        """)
+    else:
+        # Debug message if path is wrong
+        gr.Markdown("### ❌ Error: `bg.mp4` not found in root directory.")
 
-    with gr.Column(elem_classes="center-content"):
-        gr.Markdown("# ✨ **AI/ML Portfolio**", elem_classes="glass-card")
+    gr.Markdown("# ✨ AI/ML Portfolio", elem_classes="glass-card")
     
     with gr.Tabs():
         for proj in projects:
             with gr.TabItem(proj["name"]):
-                with gr.Column(elem_classes="glass-card center-content"):
+                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" class="demo-btn">🎮 Live Demo</a>')
                     
                     if os.path.exists(proj["video"]):
-                        gr.Video(value=proj["video"], height=300, interactive=False)
+                        gr.Video(value=proj["video"], height=320, interactive=False)
 
-# --- 4. LAUNCH ---
-# IMPORTANT: allowed_paths allows the app to serve the .mp4 files correctly
-demo.launch(allowed_paths=["."])
+if __name__ == "__main__":
+    demo.launch()