Update app.py

app.py

@@ -1,20 +1,7 @@
 import gradio as gr
-import base64
 import os
 
-# --- 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 ---
+# --- 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"},
@@ -24,81 +11,77 @@ projects = [
     {"name": "AvatarVerse", "desc": "Photorealistic AI avatars", "live": "https://huggingface.co/spaces/sreelekhaputta2/AvatarVerse", "video": "Avatarverse.mp4"}
 ]
 
-# --- 3. CSS (Modified for HF Iframe) ---
+# --- 2. THE NUCLEAR CSS OPTION ---
+# This forces EVERYTHING in Gradio to be transparent
 css = """
-/* Make the Gradio UI transparent to see the video */
-.gradio-container, .main, #root, .tabs, .tabitem {
+body, .gradio-container, .main, #root, .flex-col, .tabs, .tabitem, footer {
+    background-color: transparent !important;
     background: transparent !important;
     border: none !important;
 }
 
-#video-bg {
+#bg-container {
     position: fixed;
     top: 0;
     left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: -100;
+}
+
+video#bg-video {
     width: 100%;
     height: 100%;
     object-fit: cover;
-    z-index: -100;
 }
 
-#overlay {
+.overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background: linear-gradient(135deg, rgba(10,10,30,0.85), rgba(40,20,80,0.85));
+    background: rgba(0, 0, 0, 0.65); /* Darken for readability */
     z-index: -90;
 }
 
 .glass-card {
-    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: 30px !important;
+    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;
-    text-align: center;
-}
-
-.demo-btn {
-    background: linear-gradient(135deg, #6366f1, #a855f7) !important;
-    color: white !important;
-    padding: 12px 28px !important;
-    border-radius: 12px !important;
-    text-decoration: none !important;
-    display: inline-block !important;
-    font-weight: bold !important;
-    margin: 15px 0 !important;
 }
 """
 
-# --- 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">
+# --- 3. INTERFACE ---
+with gr.Blocks(css=css, theme=gr.themes.Default()) as demo:
+    
+    # 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 id="overlay"></div>
-        """)
-    else:
-        # Debug message if path is wrong
-        gr.Markdown("### ❌ Error: `bg.mp4` not found in root directory.")
+        <div class="overlay"></div>
+    </div>
+    """)
 
-    gr.Markdown("# ✨ AI/ML Portfolio", elem_classes="glass-card")
+    with gr.Column():
+        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"):
-                    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=320, interactive=False)
+        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)
 
-if __name__ == "__main__":
-    demo.launch()
+# --- 4. LAUNCH ---
+# allowed_paths is KEY. It tells Gradio it's allowed to serve these files.
+demo.launch(allowed_paths=["."])