Spaces:
Runtime error
Runtime error
| import gradio as gr | |
| def render_about(): | |
| with gr.Column(visible=False, elem_classes="page-container") as page: | |
| # Hero Banner with Tech Badges | |
| with gr.Column(elem_classes="about-hero"): | |
| gr.HTML(""" | |
| <div style="margin-bottom: 10px;"> | |
| <span class="tech-badge">MiniCPM-V-4.6</span> | |
| <span class="tech-badge">Modal Serverless</span> | |
| <span class="tech-badge">Local-First Cache</span> | |
| <span class="tech-badge">Vector Retrieval</span> | |
| </div> | |
| """) | |
| gr.Markdown(""" | |
| # ShutterSearch | |
| ### An intelligent, local-first photo archive designed to analyze and search photograph semantics. | |
| """) | |
| # Corrected: Replaced inline-styled gr.Markdown with styled gr.HTML | |
| gr.HTML(""" | |
| <h2 style="margin-top: 25px; margin-bottom: 15px; font-size: 1.5rem; font-weight: 700; color: #f8fafc;"> | |
| ⚙️ How it Works | |
| </h2> | |
| """) | |
| # Step Columns | |
| with gr.Row(): | |
| with gr.Column(elem_classes="about-card", scale=1): | |
| gr.HTML('<div class="about-card-icon">📥</div>') | |
| gr.Markdown(""" | |
| ### 1. Ingest & Analyze | |
| Select your folders. The archive safely processes visual metadata using a serverless Vision Language Model (VLM) running on high-end GPUs. | |
| """) | |
| with gr.Column(elem_classes="about-card", scale=1): | |
| gr.HTML('<div class="about-card-icon">🔍</div>') | |
| gr.Markdown(""" | |
| ### 2. Semantic Search | |
| Skip manual tags. Search your directory using natural descriptive phrases (such as *"cinematic lighting on trees"* or *"overcast street portrait"*). | |
| """) | |
| with gr.Column(elem_classes="about-card", scale=1): | |
| gr.HTML('<div class="about-card-icon">📁</div>') | |
| gr.Markdown(""" | |
| ### 3. Bulk Export | |
| Organize images within local collections. Select what you need directly from search results to export them in high-fidelity ZIP archives. | |
| """) | |
| # Footer hackathon card block | |
| with gr.Row(elem_classes="hackathon-footer"): | |
| gr.HTML(""" | |
| <div style="display: flex; align-items: center; gap: 15px;"> | |
| <div style="font-size: 1.8rem; line-height: 1;">🏆</div> | |
| <div> | |
| <h4 style="margin: 0 0 3px 0; color: #f8fafc; font-size: 0.95rem; font-weight: 600;">Hugging Face "Build Small" Hackathon</h4> | |
| <p style="margin: 0; color: #94a3b8; font-size: 0.85rem; line-height: 1.4;"> | |
| ShutterSearch was designed to fulfill constraints on building lightweight, local-first applications using edge AI concepts. | |
| </p> | |
| </div> | |
| </div> | |
| """) | |
| return page |