Update commit

.space/config.json

@@ -0,0 +1,6 @@
+{
+  "sdk": "gradio",
+  "env": [
+    "OPENAI_API_KEY="
+  ]
+}

Dockerfile

@@ -1,4 +1,4 @@
-# EcoMCP - Docker Image
+# EcoMCP - Docker Image for Hugging Face Spaces
 # Fast, beautiful, production-grade MCP server
 
 FROM python:3.11-slim
@@ -8,28 +8,33 @@ WORKDIR /app
 # Install system dependencies
 RUN apt-get update && apt-get install -y --no-install-recommends \
     curl \
+    git \
+    gcc \
     && rm -rf /var/lib/apt/lists/*
 
 # Copy requirements
 COPY requirements.txt .
 
 # Install Python dependencies
-RUN pip install --no-cache-dir -r requirements.txt
+RUN pip install --no-cache-dir --upgrade pip && \
+    pip install --no-cache-dir -r requirements.txt
 
 # Copy application
-COPY run_server.py .
-COPY run_ui.py .
+COPY . .
 
 # Create non-root user
 RUN useradd -m -u 1000 ecomcp && chown -R ecomcp:ecomcp /app
 USER ecomcp
 
+# Set environment variable for Hugging Face Spaces
+ENV HUGGINGFACE_SPACES=1
+
 # Expose port
 EXPOSE 7860
 
 # Health check
 HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
-    CMD curl -f http://localhost:7860/health || exit 1
+    CMD curl -f http://localhost:7860/ || exit 1
 
 # Run UI by default
 CMD ["python", "run_ui.py"]

HF_SPACE.md

@@ -0,0 +1,36 @@
+# EcoMCP - E-commerce Intelligence Platform
+
+EcoMCP is a powerful e-commerce intelligence platform built on the Model Context Protocol (MCP). It provides AI-driven insights and recommendations to help you make better business decisions.
+
+## Features
+
+- 📦 Product Analysis: Discover market opportunities and competitive positioning
+- ⭐ Review Intelligence: Extract actionable insights from customer feedback
+- ✍️ Listing Generation: Create high-converting product descriptions
+- 💰 Smart Pricing: Optimize profit margins with data-driven pricing strategies
+- 🎯 Competitive Analysis: Analyze market positioning and differentiation strategies
+
+## Technical Details
+
+- **Platform:** Built with Gradio 6.0+
+- **Protocol:** JSON-RPC 2.0 compliant
+- **AI Model:** OpenAI GPT-4-Turbo
+- **Knowledge Base:** LlamaIndex with semantic search
+
+## Environment Variables
+
+To use the full MCP functionality, you'll need to set your OpenAI API key:
+
+- `OPENAI_API_KEY`: Your OpenAI API key for AI-powered analysis
+
+## How to Use
+
+1. Enter product information or customer reviews in the relevant sections
+2. Click the appropriate analyze button
+3. Review the AI-generated insights and recommendations
+
+## About MCP
+
+This application demonstrates the Model Context Protocol (MCP) for integrating AI models with application-specific tools and knowledge bases. MCP enables rich, contextual AI interactions for specialized domains.
+
+Built for the MCP 1st Birthday Hackathon - Track 1: Building MCP

README.md

@@ -1,341 +1,42 @@
 ---
-title: EcoMCP - E-Commerce MCP Server
-emoji: 📦
+title: EcoMCP - E-commerce Intelligence Platform
+emoji: 🛒
 colorFrom: blue
-colorTo: purple
+colorTo: gray
 sdk: gradio
-sdk_version: "5.0.0"
-app_file: run_ui.py
+sdk_version: 4.44.1
+app_file: app.py
 pinned: false
-tags:
-  - building-mcp-track-enterprise
-  - ecommerce
-  - llm
-  - openai
-  - mcp
+license: mit
 ---
 
-# EcoMCP - E-Commerce MCP Server
+# EcoMCP - E-commerce Intelligence Platform
 
-**A production-ready Model Context Protocol (MCP) server for e-commerce intelligence and automation**
+EcoMCP is a powerful e-commerce intelligence platform built on the Model Context Protocol (MCP). It provides AI-driven insights and recommendations to help you make better business decisions.
 
----
-
-## 🎯 Overview
-
-EcoMCP is an MCP server designed for e-commerce businesses with AI-powered tools for:
-- **Product Analysis**: Market insights and competitive positioning
-- **Review Analysis**: Sentiment analysis and customer insights
-- **Listing Generation**: Conversion-optimized product copy
-- **Price Recommendation**: Strategic pricing strategies
-- **Competitor Analysis**: Market positioning opportunities
-
----
-
-## ✨ Key Features
-
-- **7 AI-Powered Tools** - Comprehensive e-commerce analysis with knowledge base search
-- **OpenAI GPT-4 Turbo Integration** - Intelligent insights powered by latest models
-- **Beautiful Gradio Interface** - Modern, responsive UI with polished design
-- **Production-Ready** - Input validation, error handling, and logging
-- **Fully Async** - Non-blocking I/O with sync/async bridges for Gradio
-- **Centralized Configuration** - Environment-based settings management
-- **Knowledge Base Integration** - LlamaIndex semantic search across products and docs
-
----
-
-## 🚀 Quick Start
-
-### Prerequisites
-- Python 3.8+
-- OpenAI API key (from https://platform.openai.com/api-keys)
-
-### Local Development
-
-```bash
-# Clone repository
-git clone <repo-url>
-cd ecomcp
+## Features
 
-# Create virtual environment
-python3 -m venv venv
-source venv/bin/activate  # On Windows: venv\Scripts\activate
+- 📦 Product Analysis: Discover market opportunities and competitive positioning
+- ⭐ Review Intelligence: Extract actionable insights from customer feedback
+- ✍️ Listing Generation: Create high-converting product descriptions
+- 💰 Smart Pricing: Optimize profit margins with data-driven pricing strategies
+- 🎯 Competitive Analysis: Analyze market positioning and differentiation strategies
 
-# Install dependencies
-pip install -r requirements.txt
+## Technical Details
 
-# Set your OpenAI API key
-export OPENAI_API_KEY="your-api-key-here"
+- **Platform:** Built with Gradio
+- **Protocol:** JSON-RPC 2.0 compliant
+- **AI Model:** OpenAI GPT-4-Turbo
+- **Knowledge Base:** LlamaIndex with semantic search
 
-# Run the application
-python3 run_ui.py
-```
-
-Visit: **http://localhost:7860**
-
-### On HuggingFace Spaces
-
-1. Space builds automatically (2-3 minutes)
-2. Add `OPENAI_API_KEY` to Repository secrets
-3. Click "Open in iframe"
-4. Start using the tools!
-
----
-
-## 📋 Tools Included
-
-### 1. **Analyze Product**
-Comprehensive market analysis including:
-- Market positioning and competitive advantages
-- Target audience insights
-- Pricing analysis
-
-### 2. **Analyze Reviews**
-Customer sentiment analysis:
-- Sentiment distribution (positive/neutral/negative)
-- Key strengths and weaknesses
-- Recommendations for improvement
-
-### 3. **Generate Listing**
-AI-powered product copy:
-- Multiple tone styles (professional, casual, technical)
-- Conversion-optimized content
-- SEO-friendly descriptions
-
-### 4. **Price Recommendation**
-Strategic pricing guidance:
-- Market-based pricing suggestions
-- Discount strategies
-- Bundle recommendations
-
-### 5. **Competitor Analysis**
-Market intelligence:
-- Competitive positioning
-- Differentiation opportunities
-- Market trends analysis
-
----
+## Environment Variables
 
-## 🔧 Configuration
+To use the full MCP functionality, you'll need to set your OpenAI API key:
 
-### Environment Variables
-
-Create a `.env` file or add to Space Repository secrets:
-
-```env
-OPENAI_API_KEY=sk-your-api-key-here
-```
-
-### HuggingFace Spaces Setup
-
-In your Space Settings:
-1. **Repository secrets** → Add `OPENAI_API_KEY`
-2. Space automatically reloads with the secret
-
----
-
-## 📦 Requirements
-
-- **Python**: 3.8+
-- **Gradio**: 5.0.0+
-- **OpenAI API**: Active account with credits
-- **Memory**: ~300MB RAM
-- **Storage**: ~500MB
-
-### Core Dependencies
-
-```
-gradio>=5.0.0,<6.0.0
-huggingface-hub>=0.16.0,<0.20.0
-openai>=1.0.0
-python-dotenv>=1.0.0
-pydantic>=2.5.0
-```
-
----
-
-## 📚 Documentation
-
-- **[IMMEDIATE_ACTION_ITEMS.txt](IMMEDIATE_ACTION_ITEMS.txt)** - Quick checklist (2 min)
-- **[docs/deployment/DEPLOYMENT_FINAL_SUMMARY.txt](docs/deployment/DEPLOYMENT_FINAL_SUMMARY.txt)** - Complete summary (5 min)
-- **[docs/deployment/START_HF_SPACES.md](docs/deployment/START_HF_SPACES.md)** - 5-minute quick start
-- **[docs/deployment/DEPLOYMENT_COMPLETE.md](docs/deployment/DEPLOYMENT_COMPLETE.md)** - Post-deployment guide
-- **[docs/deployment/HUGGINGFACE_DEPLOYMENT.md](docs/deployment/HUGGINGFACE_DEPLOYMENT.md)** - Detailed deployment guide
-- **[docs/deployment/PRE_DEPLOYMENT_CHECKLIST.md](docs/deployment/PRE_DEPLOYMENT_CHECKLIST.md)** - Verification checklist
-
-### API & Technical Documentation
-
-- **[FIX_GRADIO_IMPORT_ERROR.md](FIX_GRADIO_IMPORT_ERROR.md)** - Troubleshooting guide
-- **[HF_SPACES_FIX.txt](HF_SPACES_FIX.txt)** - Quick reference
-
----
-
-## 🎓 Architecture
-
-### Technology Stack
-
-- **Framework**: Gradio 5.x (Web UI)
-- **Protocol**: MCP (Model Context Protocol)
-- **AI**: OpenAI GPT-4/5.1 API
-- **Language**: Python 3.8+
-- **Async**: asyncio with async/await
-
-### Project Structure
-
-```
-ecomcp/
-├── run_ui.py                 # Entry point
-├── requirements.txt          # Dependencies
-├── src/
-│   ├── ui/
-│   │   ├── app.py           # Gradio interface
-│   │   └── components.py    # UI components
-│   ├── server/
-│   │   ├── mcp_server.py    # MCP protocol
-│   │   └── tools.py         # Tool definitions
-│   ├── clients/
-│   │   └── mcp_client.py    # JSON-RPC client
-│   └── core/
-│       └── ...              # Core functionality
-├── docs/                     # Documentation
-└── tests/                    # Test suite
-```
-
----
+- `OPENAI_API_KEY`: Your OpenAI API key for AI-powered analysis
 
-## 🚨 Troubleshooting
+## About MCP
 
-### App won't start
-- Check Python version (3.8+ required)
-- Verify all dependencies: `pip install -r requirements.txt`
-- Check for error messages in console
-
-### Tools don't work
-- Verify `OPENAI_API_KEY` is set
-- Check OpenAI account has active credits
-- Review OpenAI API usage limits
-
-### Gradio interface issues
-- Try refreshing the page
-- Clear browser cache
-- Check browser console for errors
-
-### HuggingFace Spaces specific
-- Check Space logs: Settings → Logs
-- Verify `OPENAI_API_KEY` is in Repository secrets
-- Ensure Space has enough memory
-
-**For detailed troubleshooting**: See [FIX_GRADIO_IMPORT_ERROR.md](FIX_GRADIO_IMPORT_ERROR.md)
-
----
-
-## 📊 Performance
-
-- **Build time**: 2-3 minutes (first time)
-- **Startup time**: 30-60 seconds
-- **Interface load**: <5 seconds
-- **Tool response**: 2-5 seconds (includes OpenAI latency)
-- **Concurrent users**: 10-50+ (depends on hardware)
-
----
-
-## 🔗 Links & Resources
-
-- **[MCP Specification](https://modelcontextprotocol.io/)** - Model Context Protocol docs
-- **[Gradio Documentation](https://www.gradio.app/)** - Gradio framework docs
-- **[OpenAI API](https://platform.openai.com/docs)** - API reference
-- **[HuggingFace Spaces](https://huggingface.co/docs/hub/spaces)** - Spaces documentation
-- **[Hackathon](https://huggingface.co/MCP-1st-Birthday)** - MCP 1st Birthday Hackathon
-
----
-
-## 🎯 Hackathon Submission
-
-**Track**: Building MCP (Track 1)  
-**Category**: Enterprise Applications  
-**Status**: ✅ Production Ready
-
-### Requirements Met
-
-- ✅ Fully functional MCP server
-- ✅ Multiple integrated tools (5 tools)
-- ✅ Beautiful Gradio interface
-- ✅ Complete documentation
-- ✅ Production-ready code
-- ✅ OpenAI API integration
-
----
-
-## 📈 What's Next?
-
-### Immediate
-1. Add `OPENAI_API_KEY` to Repository secrets
-2. Test all 5 tools
-3. Verify everything works
-
-### Short-term
-1. Record demo video (1-5 minutes)
-2. Post on social media
-3. Gather user feedback
-
-### Before Deadline (Nov 30)
-1. Prepare submission materials
-2. Document achievements
-3. Submit to hackathon
-
----
-
-## 💬 Support
-
-### Questions or Issues?
-
-1. **Quick help**: Read [IMMEDIATE_ACTION_ITEMS.txt](IMMEDIATE_ACTION_ITEMS.txt)
-2. **Deployment issues**: Read [docs/deployment/DEPLOYMENT_COMPLETE.md](docs/deployment/DEPLOYMENT_COMPLETE.md)
-3. **Technical problems**: Read [FIX_GRADIO_IMPORT_ERROR.md](FIX_GRADIO_IMPORT_ERROR.md)
-4. **Space logs**: Settings → Logs (for error details)
-
----
-
-## ✅ Status
-
-- **Build Status**: ✅ Passing
-- **Deployment**: ✅ Live on HF Spaces
-- **Documentation**: ✅ Complete
-- **Testing**: ✅ Verified
-- **Status**: ✅ Production Ready
-
----
-
-## 📝 License
-
-MIT License - See LICENSE file for details
-
----
-
-## 🙏 Acknowledgments
-
-- **Anthropic** - Model Context Protocol
-- **HuggingFace** - Spaces hosting platform
-- **OpenAI** - API integration
-- **Gradio** - Web interface framework
-
----
-
-## 📞 Quick Links
-
-| Item | Link |
-|------|------|
-| **Space URL** | https://huggingface.co/spaces/MCP-1st-Birthday/ecomcp |
-| **OpenAI Keys** | https://platform.openai.com/api-keys |
-| **Hackathon** | https://huggingface.co/MCP-1st-Birthday |
-| **MCP Docs** | https://modelcontextprotocol.io/ |
-
----
-
-**Last Updated**: November 27, 2025  
-**Version**: 1.0.0  
-**Status**: Production Ready 🚀
-
----
+This application demonstrates the Model Context Protocol (MCP) for integrating AI models with application-specific tools and knowledge bases. MCP enables rich, contextual AI interactions for specialized domains.
 
-*Built for the MCP 1st Birthday Hackathon - Track 1: Building MCP*
+Built for the MCP 1st Birthday Hackathon - Track 1: Building MCP

app.py

@@ -0,0 +1,28 @@
+"""
+Hugging Face Space Entry Point
+This file is the main entry point for Hugging Face Spaces deployment
+"""
+
+import os
+import sys
+
+# Add the project root to the Python path
+sys.path.insert(0, os.path.dirname(__file__))
+
+from src.ui.app import create_app
+
+# Create the Gradio app
+app = create_app()
+
+# For Hugging Face Spaces, we need to make the app available at the module level
+# The Space will look for a variable named "app"
+demo = app
+
+if __name__ == "__main__":
+    # This is only used if running directly, not in Hugging Face Spaces
+    app.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        show_error=True,
+        share=False
+    )

requirements.txt

@@ -1,19 +1,10 @@
-gradio>=5.0.0,<6.0.0
+gradio>=4.0.0,<4.45.0
 gradio-client>=0.16.0
-huggingface-hub>=0.33.5,<1.0.0
 httpx>=0.25.0
 aiohttp>=3.9.0
 openai>=1.0.0
 tiktoken>=0.5.0
-llama-index>=0.9.0
-llama-index-embeddings-openai>=0.1.0
-llama-index-vector-stores-pinecone>=0.1.0
 python-dotenv>=1.0.0
 pydantic>=2.5.0
 pydantic-settings>=2.0.0
-modal>=0.62.0
-pytest>=7.4.0
-pytest-asyncio>=0.21.0
-pytest-cov>=4.1.0
-black>=23.0.0
-ruff>=0.1.0
+huggingface-hub>=0.20.0

run_ui.py

@@ -38,13 +38,27 @@ if __name__ == "__main__":
         logger.info("Creating Gradio app...")
         app = create_app()
         
-        logger.info("Launching EcoMCP at http://localhost:7860")
-        app.launch(
-            server_name="0.0.0.0",
-            server_port=7860,
-            show_error=True,
-            share=False
-        )
+        # Check if running in Hugging Face Space environment
+        import os
+        is_hf_space = os.environ.get("HUGGINGFACE_SPACES") == "1"
+
+        if is_hf_space:
+            logger.info("Launching EcoMCP in Hugging Face Space environment")
+            app.launch(
+                server_name="0.0.0.0",
+                server_port=7860,
+                show_error=True,
+                share=False,
+                show_tips=True
+            )
+        else:
+            logger.info("Launching EcoMCP at http://localhost:7860")
+            app.launch(
+                server_name="0.0.0.0",
+                server_port=7860,
+                show_error=True,
+                share=False
+            )
     except ImportError as e:
         logger.error(f"Failed to import required module: {e}")
         logger.error("Make sure all dependencies are installed: pip install -r requirements.txt")

src/clients/mcp_client.py

@@ -3,6 +3,7 @@ EcoMCP Client - Handles communication with MCP server via JSON-RPC
 """
 
 import json
+import os
 import sys
 import subprocess
 import asyncio
@@ -11,24 +12,41 @@ from typing import Dict, Any, Optional
 
 class MCPClient:
     """JSON-RPC client for MCP server"""
-    
+
     def __init__(self, server_script: str = "ecomcp_server.py"):
         self.server_script = server_script
         self.process: Optional[subprocess.Popen] = None
         self.request_id = 0
-    
+        # Check if we're in Hugging Face Space environment
+        self.is_hf_space = os.environ.get("HUGGINGFACE_SPACES") == "1"
+
     async def start_server(self) -> None:
         """Start MCP server process"""
+        # In Hugging Face Spaces, we may need to handle this differently
         if self.process is None:
             try:
-                self.process = subprocess.Popen(
-                    [sys.executable, self.server_script],
-                    stdin=subprocess.PIPE,
-                    stdout=subprocess.PIPE,
-                    stderr=subprocess.PIPE,
-                    text=True,
-                    bufsize=1
-                )
+                # For Hugging Face Spaces, use a more robust approach
+                cmd = [sys.executable, self.server_script]
+                if self.is_hf_space:
+                    # In Hugging Face Spaces, make sure to handle environment properly
+                    self.process = subprocess.Popen(
+                        cmd,
+                        stdin=subprocess.PIPE,
+                        stdout=subprocess.PIPE,
+                        stderr=subprocess.PIPE,
+                        text=True,
+                        bufsize=1,
+                        universal_newlines=True
+                    )
+                else:
+                    self.process = subprocess.Popen(
+                        cmd,
+                        stdin=subprocess.PIPE,
+                        stdout=subprocess.PIPE,
+                        stderr=subprocess.PIPE,
+                        text=True,
+                        bufsize=1
+                    )
             except Exception as e:
                 print(f"Server error: {e}")
                 raise
@@ -40,16 +58,16 @@ class MCPClient:
     ) -> Dict[str, Any]:
         """
         Send JSON-RPC request to server
-        
+
         Args:
             method: RPC method name
             params: Method parameters
-            
+
         Returns:
             Server response
         """
         await self.start_server()
-        
+
         self.request_id += 1
         message = {
             "jsonrpc": "2.0",
@@ -57,20 +75,35 @@ class MCPClient:
             "params": params or {},
             "id": self.request_id
         }
-        
+
         try:
             if not self.process or not self.process.stdin:
                 raise RuntimeError("Server process not initialized")
-                
+
+            # Write the message to the server
             self.process.stdin.write(json.dumps(message) + "\n")
             self.process.stdin.flush()
-            
+
+            # Try to read the response
             response_line = self.process.stdout.readline()
             if response_line:
-                return json.loads(response_line)
+                return json.loads(response_line.strip())
         except Exception as e:
             print(f"Request error: {e}")
-        
+            # If in Hugging Face Space and we get an error, try to restart the server
+            if self.is_hf_space:
+                try:
+                    self.stop()
+                    await self.start_server()
+                    # Retry the request once
+                    self.process.stdin.write(json.dumps(message) + "\n")
+                    self.process.stdin.flush()
+                    response_line = self.process.stdout.readline()
+                    if response_line:
+                        return json.loads(response_line.strip())
+                except Exception as retry_error:
+                    print(f"Retry also failed: {retry_error}")
+
         return {"error": "Failed to communicate with server"}
     
     def stop(self) -> None:

src/ui/app.py

@@ -19,8 +19,14 @@ try:
 except ImportError:
     LLAMAINDEX_AVAILABLE = False
 
+import os
+
+# Check if running in Hugging Face Space environment
+is_hf_space = os.environ.get("HUGGINGFACE_SPACES") == "1"
+
 # Initialize client and handler
-client = MCPClient(server_script="src/server/mcp_server.py")
+server_script_path = "src/server/mcp_server.py"
+client = MCPClient(server_script=server_script_path)
 handler = ToolCallHandler(client)
 
 # Initialize knowledge base if available
@@ -30,16 +36,20 @@ if LLAMAINDEX_AVAILABLE:
         kb = EcoMCPKnowledgeBase()
         if os.path.exists("./docs"):
             kb.initialize("./docs")
+        print("Knowledge base initialized successfully")
     except Exception as e:
         print(f"Warning: Could not initialize knowledge base: {e}")
         kb = None
 
 
 def create_theme() -> gr.themes.Base:
-    """Create polished Gradio theme with professional colors"""
-    return gr.themes.Soft(
-        primary_hue="blue",
-        secondary_hue="slate",
+    """Create a minimal, clean Gradio theme without gradients or colorful elements"""
+    return gr.themes.Default(
+        primary_hue=gr.themes.colors.neutral,
+        neutral_hue=gr.themes.colors.neutral,
+        font=["ui-sans-serif", "system-ui", "sans-serif"],
+        spacing_size=gr.themes.sizes.spacing.md,
+        radius_size=gr.themes.sizes.radius.sm,
     )
 
 
@@ -56,83 +66,81 @@ def create_app() -> gr.Blocks:
         * {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
         }
-        
-        /* Header section */
+
+        /* Header section - minimal styling */
         .header-container {
             text-align: center;
-            padding: 3rem 2rem;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-            border-radius: 12px;
+            padding: 2rem 1rem;
+            background: #ffffff;
+            color: #333333;
+            border-radius: 8px;
             margin-bottom: 2rem;
-            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
+            border: 1px solid #e5e7eb;
         }
-        
+
         .header-container h1 {
             margin: 0 0 0.5rem 0;
-            font-size: 2.5rem;
-            font-weight: 700;
-            letter-spacing: -0.5px;
+            font-size: 2rem;
+            font-weight: 600;
+            color: #1f2937;
         }
-        
+
         .header-container p {
             margin: 0.25rem 0;
-            font-size: 1.1rem;
-            opacity: 0.95;
-            font-weight: 500;
+            font-size: 1rem;
+            color: #6b7280;
+            font-weight: 400;
         }
-        
+
         .header-subtitle {
-            font-size: 0.95rem;
-            opacity: 0.85;
+            font-size: 0.9rem;
+            color: #9ca3af;
             margin-top: 0.5rem;
         }
-        
+
         /* Tab styling */
         .tool-tab {
             padding: 0;
         }
-        
+
         /* Tool section */
         .tool-section {
-            padding: 2rem;
-            background: white;
-            border-radius: 12px;
+            padding: 1.5rem;
+            background: #ffffff;
+            border-radius: 8px;
             border: 1px solid #e5e7eb;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-            transition: all 0.3s ease;
+            margin-bottom: 1rem;
         }
-        
+
         .tool-section:hover {
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
             border-color: #d1d5db;
         }
-        
+
         .tool-section h3 {
             margin: 0 0 0.5rem 0;
-            font-size: 1.5rem;
+            font-size: 1.25rem;
             font-weight: 600;
             color: #1f2937;
         }
-        
+
         .tool-description {
             color: #6b7280;
-            font-size: 0.95rem;
-            margin-bottom: 1.5rem;
+            font-size: 0.9rem;
+            margin-bottom: 1rem;
             line-height: 1.5;
         }
-        
+
         /* Output box */
         .output-box {
             background: #f9fafb;
-            padding: 1.5rem;
-            border-radius: 8px;
-            border-left: 4px solid #2563eb;
+            padding: 1rem;
+            border-radius: 4px;
+            border-left: 2px solid #9ca3af;
             border: 1px solid #e5e7eb;
             margin-top: 1rem;
             line-height: 1.6;
         }
-        
+
         .output-box h1,
         .output-box h2,
         .output-box h3 {
@@ -140,156 +148,143 @@ def create_app() -> gr.Blocks:
             margin-top: 1rem;
             margin-bottom: 0.5rem;
         }
-        
+
         .output-box h1 {
-            border-bottom: 2px solid #e5e7eb;
+            border-bottom: 1px solid #e5e7eb;
             padding-bottom: 0.5rem;
         }
-        
+
         /* Success and error states */
         .success {
             color: #059669;
         }
-        
+
         .error {
             color: #dc2626;
         }
-        
+
         .warning {
             color: #d97706;
         }
-        
+
         /* Input labels */
         .input-label {
-            font-weight: 600;
-            color: #1f2937;
-            margin-bottom: 0.5rem;
-            font-size: 0.95rem;
+            font-weight: 500;
+            color: #374151;
+            margin-bottom: 0.25rem;
+            font-size: 0.9rem;
         }
-        
+
         /* Button styling */
         .gr-button {
-            font-weight: 600;
-            border-radius: 8px;
-            transition: all 0.2s ease;
+            font-weight: 500;
+            border-radius: 4px;
             text-transform: none;
             letter-spacing: 0;
         }
-        
-        .gr-button:hover {
-            transform: translateY(-1px);
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-        }
-        
-        .gr-button:active {
-            transform: translateY(0);
-        }
-        
+
         /* Examples section */
         .examples-section {
-            background: #f0f4ff;
-            border-radius: 8px;
-            padding: 1rem;
-            margin-top: 1.5rem;
-            border: 1px solid #bfdbfe;
+            background: #f9fafb;
+            border-radius: 4px;
+            padding: 0.75rem;
+            margin-top: 1rem;
+            border: 1px solid #e5e7eb;
         }
-        
+
         /* About section */
         .about-container {
             max-width: 900px;
             margin: 0 auto;
-            padding: 2rem;
+            padding: 1.5rem;
         }
-        
+
         .about-container h2 {
             color: #1f2937;
             margin-top: 1.5rem;
             margin-bottom: 0.75rem;
             font-weight: 600;
         }
-        
+
         .feature-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-            gap: 1.5rem;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1rem;
             margin: 1.5rem 0;
         }
-        
+
         .feature-card {
-            background: white;
-            padding: 1.5rem;
-            border-radius: 8px;
+            background: #ffffff;
+            padding: 1rem;
+            border-radius: 6px;
             border: 1px solid #e5e7eb;
-            transition: all 0.3s ease;
         }
-        
+
         .feature-card:hover {
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-            border-color: #2563eb;
-            transform: translateY(-2px);
+            border-color: #d1d5db;
         }
-        
+
         .feature-card h3 {
             margin: 0 0 0.5rem 0;
             color: #1f2937;
-            font-size: 1.1rem;
+            font-size: 1rem;
         }
-        
+
         .feature-card p {
             margin: 0;
             color: #6b7280;
-            font-size: 0.9rem;
-            line-height: 1.5;
+            font-size: 0.85rem;
+            line-height: 1.4;
         }
-        
+
         /* Row and column adjustments */
         .gr-row {
             gap: 1rem;
         }
-        
+
         /* Loading state */
         .gr-loading {
-            opacity: 0.6;
+            opacity: 0.8;
         }
-        
+
         /* Markdown improvements */
         .gr-markdown {
             line-height: 1.6;
         }
-        
+
         .gr-markdown strong {
             font-weight: 600;
             color: #1f2937;
         }
-        
+
         .gr-markdown code {
             background: #f3f4f6;
-            padding: 0.2rem 0.4rem;
-            border-radius: 4px;
+            padding: 0.1rem 0.3rem;
+            border-radius: 3px;
             font-family: 'Courier New', monospace;
-            font-size: 0.9rem;
-            color: #dc2626;
+            font-size: 0.85rem;
+            color: #6b7280;
         }
-        
+
         /* Form spacing */
         .gr-form {
-            gap: 1.25rem;
+            gap: 1rem;
         }
-        
+
         /* Responsive adjustments */
         @media (max-width: 768px) {
             .header-container {
-                padding: 2rem 1rem;
+                padding: 1.5rem 1rem;
             }
-            
+
             .header-container h1 {
-                font-size: 1.75rem;
+                font-size: 1.5rem;
             }
-            
+
             .tool-section {
-                padding: 1.5rem;
+                padding: 1rem;
             }
-            
+
             .feature-grid {
                 grid-template-columns: 1fr;
             }
@@ -297,7 +292,7 @@ def create_app() -> gr.Blocks:
         """
     ) as demo:
         
-        # Header with gradient background
+        # Header with minimal styling
         gr.HTML("""
         <div class="header-container">
             <h1>⚡ EcoMCP</h1>

src/ui/formatters.py

@@ -6,76 +6,73 @@ from typing import Dict
 
 
 def create_sentiment_chart_html(sentiment_data: Dict[str, int]) -> str:
-    """Create enhanced HTML sentiment visualization with better styling"""
+    """Create minimal HTML sentiment visualization"""
     positive = sentiment_data.get("positive", 0)
     neutral = sentiment_data.get("neutral", 0)
     negative = sentiment_data.get("negative", 0)
-    
+
     # Determine dominant sentiment
     sentiments = [("positive", positive), ("neutral", neutral), ("negative", negative)]
     dominant = max(sentiments, key=lambda x: x[1])[0]
-    
+
     return f"""
-    <div style="margin: 2rem 0;">
-        <h3 style="font-size: 1.3rem; font-weight: 600; color: #1f2937; margin-bottom: 1.5rem;">
+    <div style="margin: 1.5rem 0;">
+        <h3 style="font-size: 1.2rem; font-weight: 600; color: #1f2937; margin-bottom: 1rem;">
             📊 Sentiment Distribution
         </h3>
-        
-        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem;">
-            <div style="background: {'#dcfce7 linear-gradient(135deg, #86efac 0%, #4ade80 100%)' if dominant == 'positive' else '#dcfce7'}; 
-                        border-radius: 12px; padding: 1.5rem; color: {'white' if dominant == 'positive' else '#065f46'}; 
-                        text-align: center; border: 2px solid {'#22c55e' if dominant == 'positive' else '#d1fae5'};
-                        transition: all 0.3s ease; transform: {'scale(1.02)' if dominant == 'positive' else 'scale(1)'};">
-                <div style="font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem;">{positive}%</div>
-                <div style="font-size: 0.95rem; font-weight: 500;">Positive 😊</div>
+
+        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 1rem;">
+            <div style="background: {'#f0f0f0' if dominant == 'positive' else '#f8fafc'};
+                        border-radius: 6px; padding: 1rem; color: #374151;
+                        text-align: center; border: 1px solid #e5e7eb;">
+                <div style="font-size: 1.75rem; font-weight: 600; margin-bottom: 0.25rem;">{positive}%</div>
+                <div style="font-size: 0.85rem; font-weight: 500;">Positive 😊</div>
             </div>
-            
-            <div style="background: {'#dbeafe linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%)' if dominant == 'neutral' else '#dbeafe'}; 
-                        border-radius: 12px; padding: 1.5rem; color: {'white' if dominant == 'neutral' else '#0c4a6e'}; 
-                        text-align: center; border: 2px solid {'#3b82f6' if dominant == 'neutral' else '#bfdbfe'};
-                        transition: all 0.3s ease; transform: {'scale(1.02)' if dominant == 'neutral' else 'scale(1)'};">
-                <div style="font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem;">{neutral}%</div>
-                <div style="font-size: 0.95rem; font-weight: 500;">Neutral 😐</div>
+
+            <div style="background: {'#f0f0f0' if dominant == 'neutral' else '#f8fafc'};
+                        border-radius: 6px; padding: 1rem; color: #374151;
+                        text-align: center; border: 1px solid #e5e7eb;">
+                <div style="font-size: 1.75rem; font-weight: 600; margin-bottom: 0.25rem;">{neutral}%</div>
+                <div style="font-size: 0.85rem; font-weight: 500;">Neutral 😐</div>
             </div>
-            
-            <div style="background: {'#fee2e2 linear-gradient(135deg, #f87171 0%, #ef4444 100%)' if dominant == 'negative' else '#fee2e2'}; 
-                        border-radius: 12px; padding: 1.5rem; color: {'white' if dominant == 'negative' else '#7f1d1d'}; 
-                        text-align: center; border: 2px solid {'#ef4444' if dominant == 'negative' else '#fecaca'};
-                        transition: all 0.3s ease; transform: {'scale(1.02)' if dominant == 'negative' else 'scale(1)'};">
-                <div style="font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem;">{negative}%</div>
-                <div style="font-size: 0.95rem; font-weight: 500;">Negative 😞</div>
+
+            <div style="background: {'#f0f0f0' if dominant == 'negative' else '#f8fafc'};
+                        border-radius: 6px; padding: 1rem; color: #374151;
+                        text-align: center; border: 1px solid #e5e7eb;">
+                <div style="font-size: 1.75rem; font-weight: 600; margin-bottom: 0.25rem;">{negative}%</div>
+                <div style="font-size: 0.85rem; font-weight: 500;">Negative 😞</div>
             </div>
         </div>
-        
-        <!-- Progress bars for better visual representation -->
-        <div style="margin-top: 1.5rem;">
-            <div style="margin-bottom: 1rem;">
-                <div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem; font-size: 0.9rem; color: #6b7280;">
-                    <span style="font-weight: 500;">Positive Sentiment</span>
-                    <span style="font-weight: 600; color: #22c55e;">{positive}%</span>
+
+        <!-- Progress bars for visual representation -->
+        <div style="margin-top: 1rem;">
+            <div style="margin-bottom: 0.75rem;">
+                <div style="display: flex; justify-content: space-between; margin-bottom: 0.25rem; font-size: 0.85rem; color: #6b7280;">
+                    <span style="font-weight: 500;">Positive</span>
+                    <span style="font-weight: 500;">{positive}%</span>
                 </div>
-                <div style="background: #e5e7eb; border-radius: 8px; height: 8px; overflow: hidden;">
-                    <div style="background: linear-gradient(90deg, #86efac 0%, #22c55e 100%); height: 100%; width: {positive}%; border-radius: 8px; transition: width 0.6s ease;"></div>
+                <div style="background: #e5e7eb; border-radius: 3px; height: 6px;">
+                    <div style="background: #6b7280; height: 100%; width: {positive}%; border-radius: 3px;"></div>
                 </div>
             </div>
-            
-            <div style="margin-bottom: 1rem;">
-                <div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem; font-size: 0.9rem; color: #6b7280;">
-                    <span style="font-weight: 500;">Neutral Sentiment</span>
-                    <span style="font-weight: 600; color: #3b82f6;">{neutral}%</span>
+
+            <div style="margin-bottom: 0.75rem;">
+                <div style="display: flex; justify-content: space-between; margin-bottom: 0.25rem; font-size: 0.85rem; color: #6b7280;">
+                    <span style="font-weight: 500;">Neutral</span>
+                    <span style="font-weight: 500;">{neutral}%</span>
                 </div>
-                <div style="background: #e5e7eb; border-radius: 8px; height: 8px; overflow: hidden;">
-                    <div style="background: linear-gradient(90deg, #60a5fa 0%, #3b82f6 100%); height: 100%; width: {neutral}%; border-radius: 8px; transition: width 0.6s ease;"></div>
+                <div style="background: #e5e7eb; border-radius: 3px; height: 6px;">
+                    <div style="background: #6b7280; height: 100%; width: {neutral}%; border-radius: 3px;"></div>
                 </div>
             </div>
-            
+
             <div>
-                <div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem; font-size: 0.9rem; color: #6b7280;">
-                    <span style="font-weight: 500;">Negative Sentiment</span>
-                    <span style="font-weight: 600; color: #ef4444;">{negative}%</span>
+                <div style="display: flex; justify-content: space-between; margin-bottom: 0.25rem; font-size: 0.85rem; color: #6b7280;">
+                    <span style="font-weight: 500;">Negative</span>
+                    <span style="font-weight: 500;">{negative}%</span>
                 </div>
-                <div style="background: #e5e7eb; border-radius: 8px; height: 8px; overflow: hidden;">
-                    <div style="background: linear-gradient(90deg, #f87171 0%, #ef4444 100%); height: 100%; width: {negative}%; border-radius: 8px; transition: width 0.6s ease;"></div>
+                <div style="background: #e5e7eb; border-radius: 3px; height: 6px;">
+                    <div style="background: #6b7280; height: 100%; width: {negative}%; border-radius: 3px;"></div>
                 </div>
             </div>
         </div>
@@ -84,66 +81,59 @@ def create_sentiment_chart_html(sentiment_data: Dict[str, int]) -> str:
 
 
 def create_pricing_tiers_html(tiers: Dict[str, float]) -> str:
-    """Create enhanced HTML pricing tier visualization"""
+    """Create minimal HTML pricing tier visualization"""
     html = """
-    <div style="margin: 2rem 0;">
-        <h3 style="font-size: 1.3rem; font-weight: 600; color: #1f2937; margin-bottom: 1.5rem;">
+    <div style="margin: 1.5rem 0;">
+        <h3 style="font-size: 1.2rem; font-weight: 600; color: #1f2937; margin-bottom: 1rem;">
             💰 Pricing Tier Comparison
         </h3>
-        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem;">
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1rem;">
     """
-    
+
     tier_info = {
         "budget": {
-            "name": "Budget-Friendly",
-            "color": "#FF9800",
-            "gradient": "linear-gradient(135deg, #FFB74D 0%, #FF9800 100%)",
-            "bg": "#fff3e0"
+            "name": "Budget",
+            "color": "#9ca3af",
+            "bg": "#f9fafb"
         },
         "standard": {
             "name": "Standard",
-            "color": "#4CAF50",
-            "gradient": "linear-gradient(135deg, #66BB6A 0%, #4CAF50 100%)",
-            "bg": "#f1f8e9"
+            "color": "#9ca3af",
+            "bg": "#f9fafb"
         },
         "premium": {
             "name": "Premium",
-            "color": "#2196F3",
-            "gradient": "linear-gradient(135deg, #64B5F6 0%, #2196F3 100%)",
-            "bg": "#e3f2fd"
+            "color": "#9ca3af",
+            "bg": "#f9fafb"
         }
     }
-    
+
     # Find highest price to highlight
     max_price = max(tiers.values()) if tiers else 0
-    
+
     for tier, price in tiers.items():
         info = tier_info.get(tier, {
             "name": tier.title(),
-            "color": "#999",
-            "gradient": "linear-gradient(135deg, #bbb 0%, #999 100%)",
-            "bg": "#f5f5f5"
+            "color": "#9ca3af",
+            "bg": "#f9fafb"
         })
-        
+
         is_best = price == max_price
-        highlight = "2px solid " + info["color"] if is_best else "1px solid #e5e7eb"
-        transform = "scale(1.05)" if is_best else "scale(1)"
-        
+        highlight = "2px solid #9ca3af" if is_best else "1px solid #e5e7eb"
+
         html += f"""
-            <div style="background: {info['bg']}; border: {highlight}; border-radius: 12px; padding: 1.5rem; 
-                        text-align: center; transition: all 0.3s ease; transform: {transform};
-                        box-shadow: {'0 8px 16px rgba(0,0,0,0.1)' if is_best else 'none'};">
-                <div style="font-size: 0.85rem; color: #666; margin-bottom: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;">
+            <div style="background: {info['bg']}; border: {highlight}; border-radius: 6px; padding: 1rem;
+                        text-align: center;">
+                <div style="font-size: 0.8rem; color: #4b5563; margin-bottom: 0.5rem; font-weight: 500; text-transform: uppercase;">
                     {info['name']}
-                    {'<span style="margin-left: 0.5rem; background: ' + info['color'] + '; color: white; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.7rem;">RECOMMENDED</span>' if is_best else ''}
+                    {'<span style="margin-left: 0.25rem; background: #e5e7eb; color: #4b5563; padding: 0.1rem 0.3rem; border-radius: 3px; font-size: 0.65rem;">RECOMMENDED</span>' if is_best else ''}
                 </div>
-                <div style="background: {info['gradient']}; color: white; border-radius: 8px; padding: 1.5rem; margin-bottom: 0.75rem;">
-                    <div style="font-size: 2.5rem; font-weight: 700; margin-bottom: 0.25rem;">${price:.2f}</div>
-                    <div style="font-size: 0.9rem; opacity: 0.95;">Recommended Price</div>
+                <div style="background: #f3f4f6; color: #1f2937; border-radius: 4px; padding: 0.75rem; margin-bottom: 0.5rem;">
+                    <div style="font-size: 1.5rem; font-weight: 600;">${price:.2f}</div>
                 </div>
             </div>
         """
-    
+
     html += """
         </div>
     </div>