Update app.py

app.py

@@ -178,9 +178,213 @@ def generate_and_extract_glb(
 
 
 
-with gr.Blocks(delete_cache=(600, 600)) as demo:
+# Custom CSS for dark theme matching the image reference
+custom_css = """
+/* Dark theme styling */
+.gradio-container {
+    background: #1A1A1A !important;
+    color: #CCCCCC !important;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
+}
+
+/* Main title styling */
+.main-title {
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+.main-title h1 {
+    font-size: 3rem;
+    font-weight: bold;
+    margin: 0;
+    line-height: 1.2;
+}
+
+.title-welcome {
+    color: #FFFFFF;
+    display: block;
+}
+
+.title-project {
+    color: #FF8C00;
+    display: block;
+}
+
+.subtitle {
+    text-align: center;
+    color: #CCCCCC;
+    font-size: 1.2rem;
+    margin: 1rem 0;
+}
+
+.description {
+    text-align: center;
+    color: #CCCCCC;
+    font-size: 1rem;
+    margin-bottom: 3rem;
+}
+
+/* Card styling */
+.feature-card {
+    background: #2C2C2C !important;
+    border-radius: 12px;
+    padding: 1.5rem;
+    margin: 1rem;
+    border: none;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+    transition: transform 0.2s ease;
+}
+
+.feature-card:hover {
+    transform: translateY(-2px);
+}
+
+.card-title {
+    color: #FFFFFF;
+    font-size: 1.3rem;
+    font-weight: bold;
+    margin-bottom: 0.8rem;
+}
+
+.card-description {
+    color: #CCCCCC;
+    font-size: 0.95rem;
+    line-height: 1.4;
+    margin-bottom: 1rem;
+}
+
+.card-arrow {
+    color: #FF8C00;
+    font-size: 1.2rem;
+    font-weight: bold;
+}
+
+/* Footer styling */
+.footer {
+    text-align: center;
+    margin-top: 3rem;
+    padding: 2rem 0;
+    color: #CCCCCC;
+    font-size: 0.9rem;
+}
+
+.footer-brand {
+    color: #FF8C00;
+    font-weight: bold;
+}
+
+/* Input components styling */
+.gradio-container .gr-form {
+    background: #2C2C2C !important;
+    border-radius: 8px;
+    padding: 1rem;
+    margin: 1rem 0;
+}
+
+.gradio-container .gr-button {
+    background: #FF8C00 !important;
+    color: #FFFFFF !important;
+    border: none !important;
+    border-radius: 8px !important;
+    font-weight: bold !important;
+}
+
+.gradio-container .gr-button:hover {
+    background: #E67E00 !important;
+}
+
+/* Input styling */
+.gradio-container input, .gradio-container textarea, .gradio-container select {
+    background: #1A1A1A !important;
+    color: #CCCCCC !important;
+    border: 1px solid #444444 !important;
+    border-radius: 6px !important;
+}
+
+.gradio-container input:focus, .gradio-container textarea:focus, .gradio-container select:focus {
+    border-color: #FF8C00 !important;
+    box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.2) !important;
+}
+
+/* Tab styling */
+.gradio-container .gr-tabs {
+    background: #2C2C2C !important;
+    border-radius: 8px;
+}
+
+.gradio-container .gr-tab {
+    color: #CCCCCC !important;
+    background: transparent !important;
+}
+
+.gradio-container .gr-tab.selected {
+    background: #FF8C00 !important;
+    color: #FFFFFF !important;
+}
+
+/* Accordion styling */
+.gradio-container .gr-accordion {
+    background: #2C2C2C !important;
+    border: 1px solid #444444 !important;
+    border-radius: 8px;
+}
+
+.gradio-container .gr-accordion-header {
+    color: #FFFFFF !important;
+    background: #2C2C2C !important;
+}
+
+/* Video and model output styling */
+.gradio-container .gr-video, .gradio-container .gr-model3d {
+    border-radius: 8px;
+    border: 1px solid #444444;
+}
+
+/* Gallery styling */
+.gradio-container .gr-gallery {
+    background: #1A1A1A !important;
+    border: 1px solid #444444 !important;
+    border-radius: 8px;
+}
+"""
+
+with gr.Blocks(css=custom_css, delete_cache=(600, 600)) as demo:
+    # Header section
+    with gr.Column(elem_classes="main-title"):
+        gr.HTML("""
+        <h1>
+            <span class="title-welcome">Welcome to</span>
+            <span class="title-project">Project Neural Lynx</span>
+        </h1>
+        """)
+        gr.HTML('<p class="subtitle">AI-powered tools for VFX made for and by creators.</p>')
+        gr.HTML('<p class="description">Discover our suite of AI tools catered to VFX workflows.</p>')
+    
+    # Feature cards section
+    with gr.Row():
+        with gr.Column(elem_classes="feature-card"):
+            gr.HTML('<h3 class="card-title">3D Model Generation</h3>')
+            gr.HTML('<p class="card-description">Generate 3D models and textures from image or text using AI technology.</p>')
+            gr.HTML('<span class="card-arrow">→</span>')
+        
+        with gr.Column(elem_classes="feature-card"):
+            gr.HTML('<h3 class="card-title">Depth Map Generation</h3>')
+            gr.HTML('<p class="card-description">Create depth maps from video content for compositing and 3D effects.</p>')
+            gr.HTML('<span class="card-arrow">→</span>')
+        
+        with gr.Column(elem_classes="feature-card"):
+            gr.HTML('<h3 class="card-title">Auto Rotoscope</h3>')
+            gr.HTML('<p class="card-description">Remove backgrounds from video content using AI algorithms.</p>')
+            gr.HTML('<span class="card-arrow">→</span>')
+        
+        with gr.Column(elem_classes="feature-card"):
+            gr.HTML('<h3 class="card-title">Audio Captioning</h3>')
+            gr.HTML('<p class="card-description">Generate captions and transcriptions from audio file content.</p>')
+            gr.HTML('<span class="card-arrow">→</span>')
+    
+    # Main application interface
     gr.Markdown("""
-    ## Neural Lynx - 3D Asset Generator
+    ## 3D Asset Generator
     Convert images into high-quality 3D assets for your VFX projects.
     
     **Instructions:**
@@ -277,6 +481,9 @@ with gr.Blocks(delete_cache=(600, 600)) as demo:
         outputs=[download_glb],
     )
     
+    # Footer section
+    with gr.Column(elem_classes="footer"):
+        gr.HTML('<p>Powered by <span class="footer-brand">Mean Cat Entertainment</span> • Built for the future of VFX</p>')
 
 # Launch the Gradio app
 if __name__ == "__main__":