Update app.py

app.py

@@ -97,60 +97,91 @@ custom_theme = gr.themes.Monochrome(
     font=[gr.themes.GoogleFont("Montserrat"), "ui-sans-serif", "system-ui", "sans-serif"]
 )
 
-with gr.Blocks(theme=custom_theme) as demo:
+premium_css = """
+.gradio-container {
+    background-color: #FAFAFA;
+}
+.image-container img {
+    border-radius: 8px;
+    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
+}
+.image-container img:hover {
+    transform: scale(1.03);
+    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
+}
+button.primary {
+    background: linear-gradient(135deg, #1f1f1f, #3b3b3b) !important;
+    border: none !important;
+    transition: all 0.3s ease !important;
+}
+button.primary:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 8px 15px rgba(0,0,0,0.2) !important;
+}
+.visionary-title {
+    background: -webkit-linear-gradient(45deg, #111, #666);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-weight: 300; 
+    letter-spacing: 4px;
+}
+"""
+
+with gr.Blocks(theme=custom_theme, css=premium_css) as demo:
     gr.HTML("""
-    <div style="text-align: center; padding: 20px;">
-        <h1 style="font-weight: 300; letter-spacing: 2px;">V I S I O N A R Y</h1>
-        <p style="color: gray; font-size: 1.1em;">AI-Powered Interior Architecture & Design Engine</p>
+    <div style="text-align: center; padding: 40px 20px 20px 20px;">
+        <h1 class="visionary-title">V I S I O N A R Y</h1>
+        <p style="color: #777; font-size: 1.1em; font-weight: 300; margin-top: 10px;">AI-Powered Interior Architecture & Design Engine</p>
+        <div style="width: 50px; height: 2px; background-color: #ddd; margin: 20px auto;"></div>
     </div>
     """)
     
     with gr.Tabs():
         
         # --- TAB 1: Classic Search by Image ---
-        with gr.TabItem("🖼️ Search by Image"):
-            gr.Markdown("Upload an inspiration photo to instantly discover visually and stylistically similar rooms from our curated catalog.")
+        with gr.TabItem("🖼️ Image Search"):
+            gr.Markdown("<p style='text-align:center; margin-bottom: 20px;'>Upload an inspiration photo to instantly discover visually and stylistically similar rooms.</p>")
             with gr.Row():
                 with gr.Column(scale=1):
-                    image_input = gr.Image(label="Upload Inspiration", type="pil")
-                    img_submit_btn = gr.Button("Find Matches (Instant)", variant="primary")
+                    image_input = gr.Image(label="Inspiration Source", type="pil", elem_classes="image-container")
+                    img_submit_btn = gr.Button("Analyze & Match Vectors", variant="primary")
                     
                 with gr.Column(scale=2):
                     with gr.Row():
                         with gr.Column():
-                            img_rec1 = gr.Image(label="Top Match")
-                            img_score1 = gr.Textbox(label="Confidence", interactive=False)
+                            img_rec1 = gr.Image(label="Top Match", elem_classes="image-container")
+                            img_score1 = gr.Textbox(label="Semantic Confidence", interactive=False)
                         with gr.Column():
-                            img_rec2 = gr.Image(label="2nd Match")
-                            img_score2 = gr.Textbox(label="Confidence", interactive=False)
+                            img_rec2 = gr.Image(label="2nd Match", elem_classes="image-container")
+                            img_score2 = gr.Textbox(label="Semantic Confidence", interactive=False)
                         with gr.Column():
-                            img_rec3 = gr.Image(label="3rd Match")
-                            img_score3 = gr.Textbox(label="Confidence", interactive=False)
+                            img_rec3 = gr.Image(label="3rd Match", elem_classes="image-container")
+                            img_score3 = gr.Textbox(label="Semantic Confidence", interactive=False)
                             
             img_submit_btn.click(
                 fn=search_by_image, inputs=[image_input],
                 outputs=[img_rec1, img_score1, img_rec2, img_score2, img_rec3, img_score3]
             )
 
-        # --- TAB 2: Fast Text Search (CLIP Multi-modal) ---
-        with gr.TabItem("🔍 Fast Text Search"):
-            gr.Markdown("Describe a room in text. Our multi-modal vision engine will instantly search the catalog for matching designs.")
+        # --- TAB 2: Fast Text Search ---
+        with gr.TabItem("🔍 Smart Text Search"):
+            gr.Markdown("<p style='text-align:center; margin-bottom: 20px;'>Describe a room. Our multi-modal vision engine will instantly search the catalog for matching designs.</p>")
             with gr.Row():
                 with gr.Column(scale=1):
-                    fast_text_input = gr.Textbox(label="Search Query", placeholder="e.g., A minimalist industrial bedroom with exposed brick...", lines=3)
-                    fast_txt_submit_btn = gr.Button("Search Catalog (Instant)", variant="primary")
+                    fast_text_input = gr.Textbox(label="Architectural Query", placeholder="e.g., A minimalist industrial bedroom with exposed brick...", lines=3)
+                    fast_txt_submit_btn = gr.Button("Query Catalog", variant="primary")
                     
                 with gr.Column(scale=2):
                     with gr.Row():
                         with gr.Column():
-                            ft_rec1 = gr.Image(label="Top Match")
-                            ft_score1 = gr.Textbox(label="Confidence", interactive=False)
+                            ft_rec1 = gr.Image(label="Top Match", elem_classes="image-container")
+                            ft_score1 = gr.Textbox(label="Semantic Confidence", interactive=False)
                         with gr.Column():
-                            ft_rec2 = gr.Image(label="2nd Match")
-                            ft_score2 = gr.Textbox(label="Confidence", interactive=False)
+                            ft_rec2 = gr.Image(label="2nd Match", elem_classes="image-container")
+                            ft_score2 = gr.Textbox(label="Semantic Confidence", interactive=False)
                         with gr.Column():
-                            ft_rec3 = gr.Image(label="3rd Match")
-                            ft_score3 = gr.Textbox(label="Confidence", interactive=False)
+                            ft_rec3 = gr.Image(label="3rd Match", elem_classes="image-container")
+                            ft_score3 = gr.Textbox(label="Semantic Confidence", interactive=False)
 
             fast_txt_submit_btn.click(
                 fn=search_by_text_only, inputs=[fast_text_input],
@@ -158,29 +189,38 @@ with gr.Blocks(theme=custom_theme) as demo:
             )
 
         # --- TAB 3: Advanced GenAI Search ---
-        with gr.TabItem("✨ AI Design Studio"):
-            gr.Markdown("Describe your ideal space. Our Generative AI will draft a concept from scratch, and then find the closest real-world equivalents. <br> ⏳ *Note: Image generation takes ~3-5 minutes on free servers.*")
+        with gr.TabItem("✨ AI Studio"):
+            gr.Markdown("<p style='text-align:center; margin-bottom: 20px;'>Our Generative AI will draft a concept from scratch, and find the closest real-world equivalents.</p>")
             with gr.Row():
                 with gr.Column(scale=1):
                     text_input = gr.Textbox(label="Concept Description", placeholder="e.g., A cozy modern living room with large windows...", lines=3)
-                    txt_submit_btn = gr.Button("Generate Concept & Match", variant="primary")
-                    gen_output = gr.Image(label="AI Drafted Concept", type="pil")
+                    txt_submit_btn = gr.Button("Generate & Match Concept", variant="primary")
+                    gen_output = gr.Image(label="Generated Concept", type="pil", elem_classes="image-container")
                     
                 with gr.Column(scale=2):
                     with gr.Row():
                         with gr.Column():
-                            txt_rec1 = gr.Image(label="Top Match")
-                            txt_score1 = gr.Textbox(label="Confidence", interactive=False)
+                            txt_rec1 = gr.Image(label="Top Match", elem_classes="image-container")
+                            txt_score1 = gr.Textbox(label="Semantic Confidence", interactive=False)
                         with gr.Column():
-                            txt_rec2 = gr.Image(label="2nd Match")
-                            txt_score2 = gr.Textbox(label="Confidence", interactive=False)
+                            txt_rec2 = gr.Image(label="2nd Match", elem_classes="image-container")
+                            txt_score2 = gr.Textbox(label="Semantic Confidence", interactive=False)
                         with gr.Column():
-                            txt_rec3 = gr.Image(label="3rd Match")
-                            txt_score3 = gr.Textbox(label="Confidence", interactive=False)
+                            txt_rec3 = gr.Image(label="3rd Match", elem_classes="image-container")
+                            txt_score3 = gr.Textbox(label="Semantic Confidence", interactive=False)
 
             txt_submit_btn.click(
                 fn=generate_and_recommend, inputs=[text_input],
                 outputs=[gen_output, txt_rec1, txt_score1, txt_rec2, txt_score2, txt_rec3, txt_score3]
             )
 
-demo.launch()
+    # Footer אלגנטי בסוף
+    gr.HTML("""
+    <div style="text-align: center; margin-top: 50px; padding-top: 20px; border-top: 1px solid #eaeaea;">
+        <p style="color: #999; font-size: 0.8em; font-family: 'Montserrat', sans-serif;">© 2026 VISIONARY INTERIORS. POWERED BY STABLE DIFFUSION & CLIP.</p>
+    </div>
+    """)
+
+demo.launch()
+                    
+