Spaces:
Runtime error
Runtime error
File size: 6,134 Bytes
4a02afe 0b48770 4a02afe | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 | # 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 |