Spaces:
Running
Running
| 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 --- | |
| 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"} | |
| ] | |
| # --- 3. CSS (Modified for HF Iframe) --- | |
| css = """ | |
| /* Make the Gradio UI transparent to see the video */ | |
| .gradio-container, .main, #root, .tabs, .tabitem { | |
| background: transparent !important; | |
| border: none !important; | |
| } | |
| #video-bg { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| z-index: -100; | |
| } | |
| #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)); | |
| 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; | |
| 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"> | |
| </video> | |
| <div id="overlay"></div> | |
| """) | |
| else: | |
| # Debug message if path is wrong | |
| gr.Markdown("### ❌ Error: `bg.mp4` not found in root directory.") | |
| 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) | |
| if __name__ == "__main__": | |
| demo.launch() |