refactor: change assess_product_agentic to synchronous function and optimize execution flow

app.py

@@ -312,8 +312,8 @@ def format_score(score) -> str:
 
 
 # ===== GRADIO 6 FEATURE: Progress Tracking =====
-async def assess_product_agentic(image: str, progress=gr.Progress()) -> str:
-    """Main assessment with Gradio 6 Progress tracking - OPTIMIZED FOR SPEED"""
+def assess_product_agentic(image: str, progress=gr.Progress()) -> str:
+    """Main assessment with Gradio 6 Progress tracking"""
     
     try:
         progress(0, desc="Initializing agent...")
@@ -326,10 +326,7 @@ async def assess_product_agentic(image: str, progress=gr.Progress()) -> str:
         
         if image is not None:
             progress(0.1, desc="Analyzing image...")
-            # Run image analysis in thread pool to avoid blocking
-            loop = asyncio.get_running_loop()
-            query, vision_data = await loop.run_in_executor(None, analyze_image_with_mcp, image)
-            
+            query, vision_data = analyze_image_with_mcp(image)
             # Don't stop if image analysis fails, just log it
             if query and not query.startswith("Error"):
                 source = f"**Detected:** {query}\n\n"
@@ -342,123 +339,78 @@ async def assess_product_agentic(image: str, progress=gr.Progress()) -> str:
                 # Image analysis failed, clear query so text input can be used
                 query = ""
         
+       
         
         # Only return error if BOTH image and text are missing/invalid
         if not query:
             return "**Take a photo** or type a product name to get started!"
         
-        # PHASE 1: PLANNING (Simplified for speed)
+        # PHASE 1: PLANNING
         progress(0.3, desc="Agent planning assessment...")
-        # Skip slow LLM planning call, use static plan for speed
-        agent.plan = ["Identify product", "Analyze lifecycle", "Retrieve data", "Generate report"]
-        
-        # PHASE 2 & 3: PARALLEL EXECUTION
-        progress(0.5, desc="Running parallel analysis...")
-        
-        loop = asyncio.get_running_loop()
-        
-        async def run_reasoning():
-            return await loop.run_in_executor(None, agent.reason_about_product, query)
-            
-        async def run_rag():
-            # RAG doesn't strictly need reasoning, so we can run it in parallel
-            return await loop.run_in_executor(None, retrieve_environmental_knowledge, query, "")
-            
-        async def run_lifecycle():
-            product_data = {"name": query, "query": query}
-            if vision_data and vision_data.get("status") == "success":
-                analysis = vision_data.get("analysis", {})
-                materials = analysis.get("materials", [])
-                if materials: product_data["materials"] = materials
-                packaging = analysis.get("packaging_materials", [])
-                if packaging: product_data["packaging"] = packaging
-                category = analysis.get("product_category", "")
-                if category: product_data["category"] = category
-            
-            return await loop.run_in_executor(None, mcp_lifecycle_assessment, query, product_data)
-
-        # Execute all three heavy tasks concurrently
-        reasoning, rag_context, lifecycle_result = await asyncio.gather(
-            run_reasoning(),
-            run_rag(),
-            run_lifecycle()
-        )
+        plan = agent.plan_assessment(query)
         
-        agent.execution_log.append("Parallel execution completed")
+        # PHASE 2: REASONING
+        progress(0.5, desc="Agent reasoning...")
         
-        # PHASE 4: SYNTHESIS
-        progress(0.8, desc="Synthesizing results...")
-        
-        # Context Engineering
-        engineered_prompt = f"""You are an environmental assessment expert. Assess this product: {query}
-
-**AGENT REASONING:**
-{reasoning}
-
-**RETRIEVED KNOWLEDGE (RAG):**
-{rag_context}
-
-**MCP LIFECYCLE ANALYSIS:**
-{json.dumps(lifecycle_result, indent=2) if lifecycle_result.get("status") == "success" else "Pending detailed analysis"}
-
-**VISION ANALYSIS:**
-{json.dumps(vision_data.get("analysis", {}), indent=2) if vision_data else "No image data"}
-
-Using ALL the above context, provide a comprehensive assessment in this EXACT JSON format:
-{{
-    "name": "{query}",
-    "eco_score": 5.5,
-    "carbon": "XX kg CO2e or XX g CO2e",
-    "issues": "Main environmental concerns separated by commas",
-    "alternative": "Best eco-friendly alternative with score (X.X/10) - Key benefit",
-    "lifecycle_insights": "Key insights from lifecycle analysis",
-    "materials_analysis": "Summary of materials and their impact"
-}}
-
-IMPORTANT:
-- name MUST be: {query}
-- eco_score: realistic number 1-10 for THIS SPECIFIC product
-- alternative: Recommend ONLY NEW sustainable products (NOT second-hand, vintage, used, refurbished, or pre-owned items). Focus on eco-friendly materials, sustainable manufacturing, certifications, or innovative green technologies
-- Be specific and accurate based on the context provided
-- Return ONLY valid JSON, no extra text.
-"""
-
-        # Final LLM Call
-        message = await loop.run_in_executor(None, lambda: client.messages.create(
-            model="claude-sonnet-4-20250514",
-            max_tokens=2000,
-            messages=[{"role": "user", "content": engineered_prompt}]
-        ))
-        
-        response_text = message.content[0].text.strip()
-        
-        if "```json" in response_text:
-            response_text = response_text.split("```json")[1].split("```")[0].strip()
-        elif "```" in response_text:
-            response_text = response_text.split("```")[1].split("```")[0].strip()
-        
-        product = json.loads(response_text)
-        product["name"] = query.title()
-        
-        if isinstance(product.get("eco_score"), str):
-            product["eco_score"] = float(product["eco_score"])
+        # PHASE 3: EXECUTION
+        progress(0.7, desc="Executing assessment...")
+        result = execute_assessment(agent, query, vision_data)
         
         progress(0.9, desc="Formatting results...")
+        product = result["assessment"]
+        
+        # Get score for color coding
+        eco_score = float(product.get('eco_score', 5.0))
+        
+        # Determine score color based on value
+        if eco_score < 5:
+            score_color = "#ef4444"  # Red
+            score_label = "Poor"
+            score_bg = "#fee2e2"
+        elif eco_score < 7:
+            score_color = "#f59e0b"  # Amber
+            score_label = "Moderate"
+            score_bg = "#fef3c7"
+        else:
+            score_color = "#10b981"  # Green
+            score_label = "Good"
+            score_bg = "#d1fae5"
+        
+        # Format main output with styled HTML
+        main_output = f"""
+<div style="background: white; border-radius: 16px; padding: 2rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
+    <div style="text-align: center; margin-bottom: 2rem;">
+        <div style="display: inline-block; background: {score_bg}; padding: 1.5rem 2.5rem; border-radius: 16px; margin-bottom: 1rem;">
+            <div style="font-size: 3.5rem; font-weight: 800; color: {score_color}; margin-bottom: 0.5rem;">{eco_score}/10</div>
+            <div style="font-size: 1.2rem; font-weight: 600; color: {score_color}; text-transform: uppercase; letter-spacing: 0.05em;">{score_label}</div>
+        </div>
+        <h1 style="font-size: 2rem; font-weight: 700; color: #1e293b; margin: 1rem 0;">{product['name']}</h1>
+    </div>
+    
+    <div style="display: grid; gap: 1.5rem;">
+        <div style="background: #f8fafc; border-left: 4px solid #10b981; padding: 1.5rem; border-radius: 8px;">
+            <h3 style="font-size: 1.1rem; font-weight: 600; color: #059669; margin: 0 0 0.75rem 0;">🌱 Carbon Footprint</h3>
+            <p style="font-size: 1rem; color: #475569; margin: 0; line-height: 1.6;">{product.get('carbon', 'N/A')}</p>
+        </div>
         
-        # Format main output
-        main_output = f"{source}# {product['name']}\n\n"
-        main_output += f"## {format_score(product.get('eco_score', 5.0))}\n\n"
-        main_output += f"**Carbon Footprint**\n{product.get('carbon', 'N/A')}\n\n"
-        main_output += f"**Environmental Issues**\n{product.get('issues', 'N/A')}\n\n"
+        <div style="background: #f8fafc; border-left: 4px solid #ef4444; padding: 1.5rem; border-radius: 8px;">
+            <h3 style="font-size: 1.1rem; font-weight: 600; color: #dc2626; margin: 0 0 0.75rem 0;">⚠️ Environmental Issues</h3>
+            <p style="font-size: 1rem; color: #475569; margin: 0; line-height: 1.6;">{product.get('issues', 'N/A')}</p>
+        </div>
         
-        if 'materials_analysis' in product:
-            main_output += f"**Materials Analysis**\n{product['materials_analysis']}\n\n"
+        {"<div style='background: #f8fafc; border-left: 4px solid #3b82f6; padding: 1.5rem; border-radius: 8px;'><h3 style='font-size: 1.1rem; font-weight: 600; color: #2563eb; margin: 0 0 0.75rem 0;'>🔬 Materials Analysis</h3><p style='font-size: 1rem; color: #475569; margin: 0; line-height: 1.6;'>" + product['materials_analysis'] + "</p></div>" if 'materials_analysis' in product else ""}
         
-        if 'lifecycle_insights' in product:
-            main_output += f"**Lifecycle Insights**\n{product['lifecycle_insights']}\n\n"
+        {"<div style='background: #f8fafc; border-left: 4px solid #8b5cf6; padding: 1.5rem; border-radius: 8px;'><h3 style='font-size: 1.1rem; font-weight: 600; color: #7c3aed; margin: 0 0 0.75rem 0;'>♻️ Lifecycle Insights</h3><p style='font-size: 1rem; color: #475569; margin: 0; line-height: 1.6;'>" + product['lifecycle_insights'] + "</p></div>" if 'lifecycle_insights' in product else ""}
         
-        main_output += f"---\n\n"
-        main_output += f"## Better Alternative\n\n{product.get('alternative', 'N/A')}\n\n"
+        <div style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); padding: 2rem; border-radius: 12px; margin-top: 1rem;">
+            <h3 style="font-size: 1.3rem; font-weight: 700; color: white; margin: 0 0 1rem 0; display: flex; align-items: center; gap: 0.5rem;">
+                <span style="font-size: 1.5rem;">✨</span> Better Alternative
+            </h3>
+            <p style="font-size: 1.05rem; color: white; margin: 0; line-height: 1.7; font-weight: 500;">{product.get('alternative', 'N/A')}</p>
+        </div>
+    </div>
+</div>
+"""
         
         progress(1.0, desc="Complete!")
         return main_output
@@ -467,221 +419,337 @@ IMPORTANT:
         import traceback
         return f"**Error:**\n\n{str(e)}\n\n```\n{traceback.format_exc()}\n```"
 
-# ===== ECO-FRIENDLY GREEN THEME - PROFESSIONAL & MODERN =====
-eco_green_css = """
-/* Professional Eco Theme - Clean, Modern, Sustainable */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+# ===== ECO SAGE ADVISOR INSPIRED DESIGN =====
+eco_sage_css = """
+/* Eco Sage Advisor Inspired Design */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
+
+* {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
 
 :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 */
+    --primary: #10b981;
+    --primary-dark: #059669;
+    --danger: #ef4444;
+    --warning: #f59e0b;
+    --info: #3b82f6;
 }
 
 body {
-    background-color: var(--bg-color);
-    color: var(--text-main);
+    background: linear-gradient(135deg, #0f766e 0%, #059669 100%);
+    margin: 0;
+    padding: 0;
 }
 
 .gradio-container {
-    max-width: 1000px !important;
+    max-width: 1200px !important;
     margin: 0 auto !important;
     padding: 2rem 1rem !important;
-    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
 }
 
-/* Blocks/Cards - Clean & Professional */
+/* Hero Section */
+.hero-section {
+    text-align: center;
+    padding: 3rem 1rem;
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 24px;
+    margin-bottom: 2rem;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+/* Blocks/Cards */
 .block {
-    background: var(--card-bg) !important;
-    border: 1px solid var(--border-color) !important;
-    border-radius: 12px !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;
+    background: rgba(255, 255, 255, 0.98) !important;
+    border: none !important;
+    border-radius: 20px !important;
+    padding: 2rem !important;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    backdrop-filter: blur(10px);
 }
 
-/* Input Fields - Modern & Accessible */
-input, textarea, .gr-input {
+/* Input Fields */
+input, textarea {
     background: #ffffff !important;
-    border: 1px solid #cbd5e1 !important;
-    border-radius: 8px !important;
-    padding: 12px 16px !important;
-    font-size: 16px !important; /* Enforce 16px to prevent iOS zoom */
-    color: var(--text-main) !important;
-    transition: all 0.2s ease;
+    border: 2px solid #e5e7eb !important;
+    border-radius: 12px !important;
+    padding: 14px 18px !important;
+    font-size: 16px !important;
+    color: #1f2937 !important;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 input:focus, textarea:focus {
-    border-color: var(--primary-color) !important;
-    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15) !important;
+    border-color: var(--primary) !important;
+    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1) !important;
     outline: none !important;
+    transform: translateY(-1px);
 }
 
 input::placeholder, textarea::placeholder {
-    color: #475569 !important; /* Slate 600 - Darker for better visibility */
-    opacity: 1 !important;
+    color: #9ca3af !important;
 }
 
-/* Primary Action Button - TACTILE & 3D */
+/* Primary Button - Hero Style */
 #assess-btn {
-    background: linear-gradient(180deg, #10b981 0%, #059669 100%) !important;
+    background: linear-gradient(135deg, #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;
-    letter-spacing: 0.01em;
+    border: none !important;
+    border-radius: 16px !important;
+    padding: 18px 36px !important;
+    font-weight: 700 !important;
+    font-size: 1.15rem !important;
+    letter-spacing: 0.02em;
     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);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.4), 0 10px 10px -5px rgba(16, 185, 129, 0.04) !important;
+    text-transform: none !important;
+    width: 100% !important;
 }
 
 #assess-btn:hover {
-    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;
+    transform: translateY(-3px) scale(1.02);
+    box-shadow: 0 20px 35px -5px rgba(16, 185, 129, 0.5), 0 10px 10px -5px rgba(16, 185, 129, 0.08) !important;
+    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
 }
 
 #assess-btn:active {
-    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;
+    transform: translateY(-1px) scale(0.98);
 }
 
-/* Result Box - Typography & Spacing */
+/* Result Box */
 #result-box {
-    background: #ffffff !important;
-    border: 1px solid var(--border-color) !important;
-    border-radius: 12px !important;
-    padding: 2.5rem !important;
+    background: transparent !important;
+    border: none !important;
+    padding: 0 !important;
+    box-shadow: none !important;
 }
 
-#result-box .markdown-text {
-    font-size: 1.05rem !important;
-    line-height: 1.7 !important;
-    color: var(--text-main) !important;
+#result-box > div {
+    background: transparent !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;
+/* Image Upload Area - FIXED SIZE */
+.image-container {
+    border: 3px dashed #d1d5db !important;
+    border-radius: 20px !important;
+    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%) !important;
+    transition: all 0.3s ease;
 }
 
-#result-box h2 {
-    color: var(--primary-color) !important;
-    font-size: 1.5rem !important;
-    font-weight: 600 !important;
-    margin-top: 2.5rem !important;
-    margin-bottom: 1rem !important;
-    letter-spacing: -0.01em !important;
+.image-container:hover {
+    border-color: var(--primary) !important;
+    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%) !important;
+    transform: scale(1.01);
 }
 
-#result-box strong {
-    color: var(--primary-dark) !important;
-    font-weight: 600 !important;
+/* Hide large upload icon */
+.image-container .upload-icon {
+    display: none !important;
 }
 
-#result-box p {
-    margin-bottom: 1rem !important;
-    color: var(--text-main) !important; /* Force dark color */
+/* Resize upload text and icon */
+.image-container button {
+    font-size: 0.95rem !important;
+    padding: 0.75rem 1.5rem !important;
 }
 
-/* Image Upload Area */
-.image-container {
-    border: 2px dashed #cbd5e1 !important;
-    border-radius: 12px !important;
-    background: #f8fafc !important;
-    transition: border-color 0.2s ease;
+/* Make upload area more compact */
+.image-container > div {
+    padding: 1rem !important;
 }
 
-.image-container:hover {
-    border-color: var(--primary-color) !important;
+/* Hide the huge center icon in Gradio Image component */
+.image-container svg {
+    width: 40px !important;
+    height: 40px !important;
+    opacity: 0.5;
+}
+
+.image-container .wrap {
+    min-height: 250px !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;
+label {
+    color: #374151 !important;
+    font-weight: 600 !important;
+    font-size: 1rem !important;
+    margin-bottom: 0.75rem !important;
+    display: block !important;
 }
 
 /* Progress Bar */
 .progress-bar {
-    background: var(--primary-color) !important;
+    background: linear-gradient(90deg, #10b981 0%, #059669 100%) !important;
+    border-radius: 9999px !important;
+}
+
+.progress-bar-wrap {
+    background: rgba(16, 185, 129, 0.1) !important;
+    border-radius: 9999px !important;
 }
 
 /* OR Divider */
-.or-text p {
-    color: #475569 !important; /* Slate 600 - Darker */
-    font-weight: 700 !important;
-    text-align: center !important;
-    margin: 1rem 0 !important;
-    font-size: 1.1rem !important;
+.or-divider {
+    text-align: center;
+    margin: 1.5rem 0;
     position: relative;
 }
 
+.or-divider::before,
+.or-divider::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    width: 40%;
+    height: 2px;
+    background: linear-gradient(to right, transparent, #d1d5db, transparent);
+}
+
+.or-divider::before {
+    left: 0;
+}
+
+.or-divider::after {
+    right: 0;
+}
+
+/* Toast/Info Messages */
+.toast {
+    background: white !important;
+    border-left: 4px solid var(--primary) !important;
+    border-radius: 12px !important;
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+    width: 10px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f5f9;
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(180deg, #10b981, #059669);
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(180deg, #059669, #047857);
+}
+
+/* Mobile Responsive */
+@media (max-width: 768px) {
+    .gradio-container {
+        padding: 1rem 0.5rem !important;
+    }
+    
+    .hero-section {
+        padding: 2rem 1rem;
+    }
+    
+    .block {
+        padding: 1.5rem !important;
+    }
+    
+    #assess-btn {
+        padding: 16px 28px !important;
+        font-size: 1rem !important;
+    }
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.block {
+    animation: fadeIn 0.5s ease-out;
+}
+
 /* Footer */
+footer {
+    background: rgba(255, 255, 255, 0.1) !important;
+    backdrop-filter: blur(10px);
+    border-radius: 16px;
+    margin-top: 3rem;
+    padding: 2rem;
+}
+
 footer p {
-    color: var(--text-muted) !important;
+    color: white !important;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 """
 
-with gr.Blocks(title="Future Earth - Eco Advisor") as app:
+with gr.Blocks(title="Future Earth") as app:
     
     gr.HTML(f"""
         <style>
-            {eco_green_css}
+            {eco_sage_css}
         </style>
-        <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 class="hero-section">
+            <!-- Logo and Title Row -->
+            <div style="display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1.5rem;">
+                <div style="display: flex; align-items: baseline; gap: 0.5rem;">
+                    <h1 style="font-size: 2.5rem; font-weight: 800; color: #047857; margin: 0; line-height: 1;">Future Earth</h1>
+                </div>
             </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>
+            
+            <!-- Main Heading -->
+            <h2 style="font-size: 2.25rem; font-weight: 700; color: #111827; margin: 0 0 1rem 0; line-height: 1.2;">Agentic Eco Advisor</h2>
+            
+            <!-- Subtitle -->
+            <p style="font-size: 1.125rem; color: #6b7280; margin: 0; font-weight: 400; max-width: 800px; margin-left: auto; margin-right: auto;">Analyze products instantly and discover their environmental footprint</p>
         </div>
     """)
     
-    with gr.Row():
-        with gr.Column():
-            image_input = gr.Image(
-                label="📸 Take Photo or Upload Product Image", 
-                type="pil", 
-                sources=["webcam", "upload"], 
-                height=300, 
-                elem_classes="image-container"
-            )
-            
-            assess_btn = gr.Button("🌱 Check Environmental Impact", elem_id="assess-btn", size="lg")
-    
-    with gr.Row():
-        with gr.Column():
-            result_output = gr.Markdown(
-                label="📊 Environmental Assessment", 
-                elem_id="result-box", 
-                value="**🌿 Ready to analyze your product...**\n\nTake a photo or type a product name to get started!", 
-                elem_classes="markdown-text"
-            )
+    with gr.Column():
+        image_input = gr.Image(
+            label="📸 Upload Product Image", 
+            type="pil", 
+            sources=["webcam", "upload"], 
+            height=300, 
+            elem_classes="image-container",
+            show_label=False
+        )
+        
+        
+        assess_btn = gr.Button("🌱 Analyze Environmental Impact", elem_id="assess-btn", size="lg")
+        
+        result_output = gr.HTML(
+            label="", 
+            value="""
+            <div style="background: white; border-radius: 20px; padding: 3rem; text-align: center; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);">
+                <div style="font-size: 4rem; margin-bottom: 1rem;">🌿</div>
+                <h2 style="font-size: 1.5rem; font-weight: 700; color: #1e293b; margin-bottom: 1rem;">Ready to Analyze</h2>
+                <p style="font-size: 1.1rem; color: #64748b; margin: 0;">Upload a product image or type a product name to get started with your environmental assessment</p>
+            </div>
+            """,
+            elem_id="result-box"
+        )
     
     gr.HTML("""
-        <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 style="text-align: center;">
+            <p style="font-size: 0.85rem; font-weight: 600; margin: 0; color: #1f2937 !important; text-shadow: none !important;">♻️ Powered by Advanced AI • MCP • RAG Technology</p>
+            <p style="font-size: 0.85rem; margin-top: 0.75rem; opacity: 0.9; color: #374151 !important; text-shadow: none !important;">Building a sustainable future through intelligent environmental analysis</p>
+            <div style="margin-top: 1.5rem; display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap;">
+                <span style="font-size: 0.85rem; color: #1f2937 !important;">🌱 Sustainable Products</span>
+                <span style="font-size: 0.85rem; color: #1f2937 !important;">📊 Data-Driven Insights</span>
+                <span style="font-size: 0.85rem; color: #1f2937 !important;">🔬 Scientific Analysis</span>
+            </div>
         </footer>
     """)
     
@@ -697,4 +765,4 @@ with gr.Blocks(title="Future Earth - Eco Advisor") as app:
     )
 
 if __name__ == "__main__":
-    app.launch()
+        app.launch()