ui/home.py

# import gradio as gr

# def render_home():
#     with gr.Column(visible=True) as page:
#         with gr.Row():
#             with gr.Column(scale=2):
#                 gr.Markdown("""
#                 # Welcome to ShutterSearch
#                 ### Your intelligent local-first photo archive.
                
#                 ShutterSearch uses state-of-the-art vision models to understand your photography. 
#                 Keep your photos organized in collections and find them instantly with natural language search.
                
#                 - **Semantic Search**: Find "sunset on a beach" even if you didn't tag it.
#                 - **Automatic Captioning**: Powered by MiniCPM-V-4.6.
#                 - **Privacy First**: Everything runs on your terms.
#                 """)
#                 start_btn = gr.Button("Start Ingesting", variant="primary", size="lg")
#             with gr.Column(scale=1):
#                 gr.Image("https://images.unsplash.com/photo-1542038784456-1ea8e935640e?q=80&w=1000&auto=format&fit=crop", 
#                          label="Photography", show_label=False, interactive=False)
#     return page, start_btn


import gradio as gr
import os

def render_home():
    root_dir = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
    img_path = os.path.join(root_dir, "public", "heroImage.png")
    
    print(f"Root directory: {root_dir}")
    print(f"Image path: {img_path}")
    print(f"File exists: {os.path.exists(img_path)}")
    with gr.Column(visible=False) as page:
        gr.HTML("""
        <style>
            .hero-container {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 60px 40px;
                min-height: 80vh;
                gap: 60px;
            }
            .hero-content {
                flex: 1;
                max-width: 600px;
            }
            .hero-title {
                font-size: 3.5rem;
                font-weight: 800;
                background: linear-gradient(135deg, #f8fafc 0%, #94a3b8 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                margin-bottom: 20px;
                line-height: 1.2;
            }
            .hero-subtitle {
                font-size: 1.25rem;
                color: #64748b;
                margin-bottom: 30px;
                line-height: 1.6;
            }
            .hero-description {
                font-size: 1rem;
                color: #94a3b8;
                line-height: 1.8;
                margin-bottom: 40px;
            }
            .feature-list {
                list-style: none;
                padding: 0;
                margin: 0 0 40px 0;
            }
            .feature-list li {
                padding: 4px 0;
                color: #cbd5e1;
                font-size: 0.95rem;
                display: flex;
                align-items: center;
                gap: 4px;
            }
            .feature-list li::before {
                content: "✓";
                color: #10b981;
                font-weight: bold;
                font-size: 1.2rem;
            }
            .hero-image-container {
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .hero-image {
                max-width: 500px;
                height: auto;
                filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
            }
            .cta-button {
                background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
                color: white !important;
                border: none !important;
                padding: 16px 40px !important;
                font-size: 1.1rem !important;
                font-weight: 600 !important;
                border-radius: 12px !important;
                cursor: pointer !important;
                transition: all 0.3s ease !important;
                box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3) !important;
            }
            .cta-button:hover {
                transform: translateY(-2px) !important;
                box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4) !important;
            }
        </style>
        
        <div class="hero-container">
            <div class="hero-content">
                <h1 class="hero-title">Preserve Your Precious Moments</h1>
                <p class="hero-subtitle">Your intelligent, privacy-first photo archive</p>
                
                <ul class="feature-list">
                    <li>AI-powered semantic search - find photos naturally</li>
                    <li>Automatic captioning with MiniCPM-V-4.6</li>
                </ul>
                
                <button class="cta-button" id="start-ingest-btn">Get Started</button>
            </div>
            
            <div class="hero-image-container">
                <img src="https://i.postimg.cc/zBKzF24k/hero-Image.png" alt="Precious Moments" class="hero-image">
            </div>
        </div>
        """)
        
        # Hidden button for Gradio event handling
        start_btn = gr.Button("Start Ingesting", variant="primary", size="lg", visible=False)
        
        # JavaScript to trigger the hidden button when CTA is clicked
        gr.HTML("""
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const ctaBtn = document.getElementById('start-ingest-btn');
                const gradioBtn = document.querySelector('button[data-testid="Start Ingesting"]');
                
                if (ctaBtn && gradioBtn) {
                    ctaBtn.addEventListener('click', function() {
                        gradioBtn.click();
                    });
                }
            });
        </script>
        """)
    
    return page, start_btn