feat: Revamp UI with a professional eco-friendly theme and initialize RAG persistent storage.

app.py

@@ -408,266 +408,176 @@ def assess_product_agentic(image, text_input: str, progress=gr.Progress()) -> st
         import traceback
         return f"**Error:**\n\n{str(e)}\n\n```\n{traceback.format_exc()}\n```"
 
-# ===== ECO-FRIENDLY GREEN THEME - IMPROVED CONTRAST =====
-# ===== ECO-FRIENDLY GREEN THEME - IMPROVED CONTRAST =====
+# ===== ECO-FRIENDLY GREEN THEME - PROFESSIONAL & MODERN =====
 eco_green_css = """
-/* Eco-Friendly Green Theme - Mobile Optimized with Better Contrast */
+/* Professional Eco Theme - Clean, Modern, Sustainable */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+:root {
+    --primary-color: #059669;       /* Emerald 600 */
+    --primary-dark: #047857;        /* Emerald 700 */
+    --primary-light: #d1fae5;       /* Emerald 100 */
+    --accent-color: #10b981;        /* Emerald 500 */
+    --text-main: #1e293b;           /* Slate 800 */
+    --text-muted: #64748b;          /* Slate 500 */
+    --bg-color: #f8fafc;            /* Slate 50 */
+    --card-bg: #ffffff;
+    --border-color: #e2e8f0;        /* Slate 200 */
+}
+
+body {
+    background-color: var(--bg-color);
+    color: var(--text-main);
+}
+
 .gradio-container {
-    background: linear-gradient(135deg, #0a3d29 0%, #1a5c42 100%) !important;
-    max-width: 100% !important;
-    margin: 0 auto;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    max-width: 1000px !important;
+    margin: 0 auto !important;
+    padding: 2rem 1rem !important;
+    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
 }
 
-/* Main elements */
+/* Blocks/Cards - Clean & Professional */
 .block {
-    background: rgba(255, 255, 255, 0.98) !important;
-    border: 2px solid #2d8659 !important;
+    background: var(--card-bg) !important;
+    border: 1px solid var(--border-color) !important;
     border-radius: 12px !important;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    padding: 0 !important;
+    overflow: hidden !important;
 }
 
-/* Input fields */
-input, textarea {
+/* Input Fields - Modern & Accessible */
+input, textarea, .gr-input {
     background: #ffffff !important;
-    color: #1a1a1a !important;
-    border: 2px solid #4caf50 !important;
+    border: 1px solid #cbd5e1 !important;
     border-radius: 8px !important;
-    font-size: 16px !important;
-    padding: 12px !important;
-}
-
-input::placeholder, textarea::placeholder {
-    color: #666666 !important;
+    padding: 12px 16px !important;
+    font-size: 1rem !important;
+    color: var(--text-main) !important;
+    transition: all 0.2s ease;
 }
 
 input:focus, textarea:focus {
-    border: 2px solid #2d8659 !important;
-    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2) !important;
+    border-color: var(--primary-color) !important;
+    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15) !important;
     outline: none !important;
 }
 
-/* Button styling - Green gradient */
+input::placeholder, textarea::placeholder {
+    color: #94a3b8 !important;
+}
+
+/* Primary Action Button - TACTILE & 3D */
 #assess-btn {
-    background: linear-gradient(135deg, #4caf50 0%, #2d8659 100%) !important;
-    color: #ffffff !important;
-    border: none !important;
+    background: linear-gradient(180deg, #10b981 0%, #059669 100%) !important;
+    color: white !important;
+    border: 1px solid #047857 !important;
+    border-radius: 8px !important;
+    padding: 14px 28px !important;
+    font-weight: 600 !important;
     font-size: 1.1rem !important;
-    font-weight: bold !important;
-    padding: 16px 24px !important;
-    border-radius: 12px !important;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4) !important;
-    transition: all 0.3s ease;
+    letter-spacing: 0.01em;
+    cursor: pointer !important;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
+    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
 }
 
 #assess-btn:hover {
-    background: linear-gradient(135deg, #45a049 0%, #26734a 100%) !important;
-    box-shadow: 0 6px 16px rgba(76, 175, 80, 0.6) !important;
-    transform: translateY(-2px);
+    background: linear-gradient(180deg, #059669 0%, #047857 100%) !important;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
 }
 
 #assess-btn:active {
-    transform: translateY(0px);
-    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.4) !important;
+    transform: translateY(1px);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(0, 0, 0, 0.1) !important;
+    background: #047857 !important;
 }
 
-/* Result boxes */
+/* Result Box - Typography & Spacing */
 #result-box {
     background: #ffffff !important;
-    color: #1a1a1a !important;
-    border: 2px solid #e8f5e9 !important;
+    border: 1px solid var(--border-color) !important;
     border-radius: 12px !important;
-    padding: 1.5rem !important;
-    font-size: 1rem !important;
-    line-height: 1.8 !important;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
+    padding: 2.5rem !important;
 }
 
-/* Markdown text styling - IMPROVED CONTRAST */
-.markdown-text {
-    color: #1a1a1a !important;
+#result-box .markdown-text {
+    font-size: 1.05rem !important;
+    line-height: 1.7 !important;
+    color: var(--text-main) !important;
 }
 
-.markdown-text h1 {
-    color: #1a4d2e !important;
-    font-weight: bold !important;
-    margin-bottom: 1rem !important;
-    font-size: 1.8rem !important;
-    border-bottom: 3px solid #4caf50 !important;
-    padding-bottom: 0.5rem !important;
+#result-box h1 {
+    color: var(--primary-dark) !important;
+    font-size: 2rem !important;
+    font-weight: 700 !important;
+    border-bottom: 2px solid var(--primary-light) !important;
+    padding-bottom: 0.75rem !important;
+    margin-bottom: 1.5rem !important;
+    letter-spacing: -0.02em !important;
 }
 
-.markdown-text h2 {
-    color: #2d8659 !important;
+#result-box h2 {
+    color: var(--primary-color) !important;
+    font-size: 1.5rem !important;
     font-weight: 600 !important;
-    margin-top: 1.5rem !important;
-    margin-bottom: 0.5rem !important;
-    font-size: 1.3rem !important;
+    margin-top: 2.5rem !important;
+    margin-bottom: 1rem !important;
+    letter-spacing: -0.01em !important;
 }
 
-.markdown-text strong {
-    color: #1a4d2e !important;
-    font-weight: 700 !important;
+#result-box strong {
+    color: var(--primary-dark) !important;
+    font-weight: 600 !important;
 }
 
-.markdown-text p {
-    color: #333333 !important;
-    margin: 0.5rem 0 !important;
+#result-box p {
+    margin-bottom: 1rem !important;
 }
 
-.markdown-text hr {
-    border: none !important;
-    border-top: 2px solid #e8f5e9 !important;
-    margin: 1.5rem 0 !important;
+/* Image Upload Area */
+.image-container {
+    border: 2px dashed #cbd5e1 !important;
+    border-radius: 12px !important;
+    background: #f8fafc !important;
+    transition: border-color 0.2s ease;
 }
 
-/* Labels */
-label {
-    color: #e8f5e9 !important;
-    font-weight: 600 !important;
-    font-size: 0.95rem !important;
-    margin-bottom: 8px !important;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
+.image-container:hover {
+    border-color: var(--primary-color) !important;
 }
 
-/* Image containers */
-.image-container {
-    border: 3px solid #4caf50 !important;
-    border-radius: 12px !important;
-    overflow: hidden !important;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
-    background: #ffffff !important;
+/* Labels */
+label span {
+    color: var(--text-muted) !important;
+    font-weight: 500 !important;
+    font-size: 0.9rem !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.05em !important;
+    margin-bottom: 0.5rem !important;
 }
 
-/* Progress bar */
+/* Progress Bar */
 .progress-bar {
-    background: linear-gradient(90deg, #4caf50 0%, #2d8659 100%) !important;
+    background: var(--primary-color) !important;
 }
 
-/* OR text divider */
-.gr-markdown p {
-    color: #e8f5e9 !important;
+/* OR Divider */
+.or-text p {
+    color: var(--text-muted) !important;
+    font-weight: 600 !important;
     text-align: center !important;
-    font-weight: bold !important;
     margin: 1rem 0 !important;
-    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
+    font-size: 1.1rem !important;
+    position: relative;
 }
 
 /* Footer */
-footer {
-    text-align: center;
-    padding: 1.5rem;
-    color: #e8f5e9 !important;
-    font-size: 0.9rem;
-}
-
-/* Info/Success messages */
-.gr-toast {
-    background: #4caf50 !important;
-    color: #ffffff !important;
-    border-radius: 8px !important;
-}
-
-/* Mobile-first responsive design */
-@media (max-width: 768px) {
-    .gradio-container {
-        padding: 0.5rem !important;
-    }
-    
-    #assess-btn {
-        font-size: 1rem !important;
-        padding: 14px 20px !important;
-        width: 100% !important;
-    }
-    
-    .markdown-text h1 {
-        font-size: 1.5rem !important;
-    }
-    
-    .markdown-text h2 {
-        font-size: 1.2rem !important;
-    }
-    
-    input, textarea {
-        font-size: 16px !important; /* Prevents zoom on iOS */
-    }
-    
-    .block {
-        margin: 0.5rem 0 !important;
-        padding: 1rem !important;
-    }
-    
-    #result-box {
-        padding: 1rem !important;
-    }
-}
-
-/* Tablet screens */
-@media (min-width: 769px) and (max-width: 1024px) {
-    .gradio-container {
-        max-width: 95% !important;
-        padding: 1rem !important;
-    }
-}
-
-/* Large screens */
-@media (min-width: 1025px) {
-    .gradio-container {
-        max-width: 900px !important;
-    }
-}
-
-/* Touch-friendly spacing */
-.gr-button {
-    min-height: 48px !important;
-}
-
-/* Better focus indicators for accessibility */
-button:focus, input:focus, textarea:focus {
-    outline: 3px solid #4caf50 !important;
-    outline-offset: 2px !important;
-}
-
-/* Scrollbar styling */
-::-webkit-scrollbar {
-    width: 10px;
-}
-
-::-webkit-scrollbar-track {
-    background: #1a5c42;
-}
-
-::-webkit-scrollbar-thumb {
-    background: #4caf50;
-    border-radius: 5px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: #45a049;
-}
-
-/* Loading animation */
-.progress-bar-wrap {
-    background: rgba(76, 175, 80, 0.1) !important;
-    border-radius: 4px !important;
-}
-
-/* Card-like sections within result */
-#result-box .markdown-text {
-    line-height: 1.9 !important;
-}
-
-/* Better spacing for readability */
-#result-box h1 + h2 {
-    margin-top: 0.5rem !important;
-}
-
-#result-box p + p {
-    margin-top: 1rem !important;
+footer p {
+    color: var(--text-muted) !important;
 }
 """
 
@@ -677,9 +587,12 @@ with gr.Blocks(title="Future Earth - Eco Advisor") as app:
         <style>
             {eco_green_css}
         </style>
-        <div style="text-align: center; padding: 2rem 1rem; background: linear-gradient(135deg, #4caf50 0%, #2d8659 100%); border-radius: 16px; margin-bottom: 1.5rem; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);">
-            <h1 style="margin: 0; font-size: 2.2rem; color: #ffffff; font-weight: bold; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); letter-spacing: 1px;">🌍 FUTURE EARTH</h1>
-            <p style="color: #ffffff; margin-top: 0.5rem; font-size: 1rem; letter-spacing: 1px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);">Your AI-Powered Eco Advisor</p>
+        <div style="text-align: center; margin-bottom: 2.5rem; padding-top: 1rem;">
+            <div style="display: inline-flex; align-items: center; justify-content: center; background: #ecfdf5; padding: 16px; border-radius: 20px; margin-bottom: 1.2rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);">
+                <span style="font-size: 3rem;">🌍</span>
+            </div>
+            <h1 style="color: #064e3b; font-size: 2.5rem; font-weight: 800; margin: 0; letter-spacing: -0.03em; font-family: 'Inter', sans-serif;">Future Earth</h1>
+            <p style="color: #64748b; font-size: 1.1rem; margin-top: 0.75rem; font-weight: 400;">AI-Powered Environmental Assessment & Advisor</p>
         </div>
     """)
     
@@ -692,7 +605,7 @@ with gr.Blocks(title="Future Earth - Eco Advisor") as app:
                 height=300, 
                 elem_classes="image-container"
             )
-            gr.Markdown("**OR**")
+            gr.Markdown("**OR**", elem_classes="or-text")
             text_input = gr.Textbox(
                 label="✏️ Type Product Name", 
                 placeholder="e.g., wireless headphones, plastic bottle, laptop...", 
@@ -711,9 +624,9 @@ with gr.Blocks(title="Future Earth - Eco Advisor") as app:
             )
     
     gr.HTML("""
-        <footer style="background: rgba(0, 0, 0, 0.15); border-top: 2px solid #4caf50; margin-top: 2rem; padding: 1.5rem 1rem; border-radius: 8px;">
-            <p style="color: #ffffff; letter-spacing: 1px; font-size: 0.95rem; margin: 0; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);">♻️ Powered by AI • MCP • RAG Technology</p>
-            <p style="color: #c8e6c9; font-size: 0.85rem; margin-top: 0.5rem; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);">Building a sustainable future, one assessment at a time</p>
+        <footer style="text-align: center; margin-top: 4rem; padding: 2.5rem 0; color: #94a3b8; border-top: 1px solid #e2e8f0;">
+            <p style="margin: 0; font-weight: 500; color: #64748b;">Powered by Advanced Agentic AI • MCP • RAG</p>
+            <p style="margin-top: 0.75rem; font-size: 0.9rem; opacity: 0.8;">Building a sustainable future through intelligent analysis</p>
         </footer>
     """)