Upload app.py

app.py

@@ -305,67 +305,234 @@ def load_sample_json():
 # GRADIO INTERFACE
 # ============================================================================
 
-# Custom CSS
+# Custom CSS for beautiful UI
 custom_css = """
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
 .gradio-container {
-    font-family: 'Arial', sans-serif;
+    font-family: 'Inter', sans-serif !important;
+    max-width: 1400px !important;
+    margin: 0 auto !important;
+}
+
+/* Header styling */
+.gradio-container h1 {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    font-size: 3em !important;
+    font-weight: 700 !important;
+    text-align: center;
+    margin-bottom: 0.5em;
+}
+
+/* Tab styling */
+.tab-nav {
+    border-radius: 12px !important;
+    background: linear-gradient(to right, #f8f9fa, #e9ecef) !important;
+    padding: 8px !important;
+    margin-bottom: 20px !important;
+}
+
+button.selected {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    color: white !important;
+    border-radius: 8px !important;
+    font-weight: 600 !important;
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
 }
-.tab-label {
+
+/* Button styling */
+.primary-btn {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    border: none !important;
+    color: white !important;
+    font-weight: 600 !important;
+    border-radius: 10px !important;
+    padding: 12px 24px !important;
     font-size: 16px !important;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
+}
+
+.primary-btn:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
+}
+
+/* Input fields */
+textarea, input[type="text"] {
+    border-radius: 10px !important;
+    border: 2px solid #e9ecef !important;
+    padding: 12px !important;
+    font-size: 15px !important;
+    transition: border-color 0.3s ease !important;
+}
+
+textarea:focus, input[type="text"]:focus {
+    border-color: #667eea !important;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
+}
+
+/* Output boxes */
+.output-class {
+    background: linear-gradient(to bottom, #ffffff, #f8f9fa) !important;
+    border-radius: 12px !important;
+    padding: 20px !important;
+    border: 2px solid #e9ecef !important;
+}
+
+/* Cards and containers */
+.gr-box {
+    border-radius: 12px !important;
+    border: 1px solid #e9ecef !important;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
+}
+
+/* Labels */
+label {
+    font-weight: 600 !important;
+    color: #495057 !important;
+    font-size: 14px !important;
+    margin-bottom: 8px !important;
+}
+
+/* Examples */
+.gr-samples-table {
+    border-radius: 10px !important;
+    overflow: hidden !important;
+}
+
+/* Footer */
+.footer {
+    text-align: center;
+    padding: 30px;
+    background: linear-gradient(to right, #f8f9fa, #e9ecef);
+    border-radius: 12px;
+    margin-top: 30px;
+}
+
+/* Image display */
+.gr-image {
+    border-radius: 12px !important;
+    border: 2px solid #e9ecef !important;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
+}
+
+/* Radio buttons and checkboxes */
+.gr-radio, .gr-checkbox {
+    padding: 10px !important;
+    border-radius: 8px !important;
+}
+
+/* File upload */
+.gr-file {
+    border: 2px dashed #667eea !important;
+    border-radius: 12px !important;
+    background: linear-gradient(to bottom, #ffffff, #f8f9fa) !important;
+    padding: 30px !important;
+}
+
+.gr-file:hover {
+    border-color: #764ba2 !important;
+    background: #f8f9fa !important;
 }
 """
 
 # Create Gradio interface
 with gr.Blocks(theme=gr.themes.Soft(), css=custom_css, title="MissionControlMCP Demo") as demo:
     
-    gr.Markdown("""
-    # 🚀 MissionControlMCP - Enterprise Automation Tools
-    
-    **Try all 8 powerful tools in your browser!** No installation needed.
+    gr.Markdown("# 🚀 MissionControlMCP")
+    gr.Markdown("### Enterprise Automation Tools - Powered by AI")
     
-    📌 Built for the HuggingFace Gradio Hackathon | 🏆 Claude MCP Integration
+    gr.HTML("""
+    <div style="text-align: center; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 15px; color: white; margin-bottom: 30px;">
+        <h3 style="color: white; margin: 0;">✨ Try all 8 powerful tools in your browser - No installation needed! ✨</h3>
+        <p style="margin: 10px 0 0 0; opacity: 0.9;">Built for HuggingFace Gradio Hackathon | Claude MCP Integration</p>
+    </div>
     """)
     
     with gr.Tabs():
         
         # ====== TAB 1: PDF READER ======
         with gr.Tab("📄 PDF Reader"):
-            gr.Markdown("### Extract text and metadata from PDF documents")
+            gr.Markdown("""
+            ### 📄 Extract Text and Metadata from PDF Documents
+            Upload any PDF file to extract its content, metadata, and keywords instantly.
+            """)
             
             with gr.Row():
-                with gr.Column():
-                    pdf_input = gr.File(label="Upload PDF", file_types=[".pdf"])
-                    pdf_btn = gr.Button("🔍 Extract Text", variant="primary")
+                with gr.Column(scale=1):
+                    pdf_input = gr.File(
+                        label="📎 Upload PDF File",
+                        file_types=[".pdf"],
+                        elem_classes=["file-upload"]
+                    )
+                    pdf_btn = gr.Button(
+                        "🔍 Extract Text from PDF",
+                        variant="primary",
+                        size="lg",
+                        elem_classes=["primary-btn"]
+                    )
+                    gr.Markdown("""
+                    **💡 Tips:**
+                    - Supports multi-page PDFs
+                    - Extracts metadata (author, title)
+                    - Automatically generates keywords
+                    """)
                 
-                with gr.Column():
-                    pdf_output = gr.Textbox(label="Results", lines=15)
+                with gr.Column(scale=2):
+                    pdf_output = gr.Textbox(
+                        label="📊 Extraction Results",
+                        lines=20,
+                        elem_classes=["output-class"]
+                    )
                     pdf_img = gr.Image(label="Preview", visible=False)
             
             pdf_btn.click(tool_pdf_reader, inputs=[pdf_input], outputs=[pdf_output, pdf_img])
             
-            gr.Examples([["Use the file upload above to try with your own PDF!"]], inputs=[])
+            gr.Markdown("*💡 Try uploading your resume, research paper, or any PDF document!*")
         
         # ====== TAB 2: TEXT EXTRACTOR ======
         with gr.Tab("📝 Text Extractor"):
-            gr.Markdown("### Extract keywords, generate summaries, clean text")
+            gr.Markdown("""
+            ### 📝 AI-Powered Text Analysis
+            Extract keywords, generate summaries, clean text, or split into chunks.
+            """)
             
             with gr.Row():
-                with gr.Column():
+                with gr.Column(scale=1):
                     text_input = gr.Textbox(
-                        label="Enter Text", 
-                        lines=8,
-                        placeholder="Paste your text here..."
+                        label="✍️ Enter Your Text", 
+                        lines=10,
+                        placeholder="Paste any text here - articles, reports, emails, etc...",
+                        elem_classes=["input-field"]
                     )
                     text_operation = gr.Radio(
                         ["keywords", "summarize", "clean", "chunk"],
-                        label="Operation",
-                        value="keywords"
+                        label="🛠️ Select Operation",
+                        value="keywords",
+                        info="Choose what to do with your text"
+                    )
+                    text_length = gr.Slider(
+                        100, 1000, 300,
+                        label="📏 Max Length (for summarize/chunk)",
+                        info="Adjust output length"
+                    )
+                    text_btn = gr.Button(
+                        "✨ Process Text",
+                        variant="primary",
+                        size="lg",
+                        elem_classes=["primary-btn"]
                     )
-                    text_length = gr.Slider(100, 1000, 300, label="Max Length (for summarize/chunk)")
-                    text_btn = gr.Button("✨ Process Text", variant="primary")
                 
-                with gr.Column():
-                    text_output = gr.Textbox(label="Results", lines=15)
+                with gr.Column(scale=2):
+                    text_output = gr.Textbox(
+                        label="📊 Processing Results",
+                        lines=20,
+                        elem_classes=["output-class"]
+                    )
             
             text_btn.click(
                 tool_text_extractor,
@@ -376,23 +543,43 @@ with gr.Blocks(theme=gr.themes.Soft(), css=custom_css, title="MissionControlMCP
             gr.Examples([
                 ["Artificial Intelligence is transforming businesses worldwide. Companies are leveraging AI for automation, decision-making, and customer service. Machine learning models can now process vast amounts of data and provide actionable insights.", "keywords", 300],
                 ["Climate change is one of the most pressing challenges of our time. Rising temperatures, extreme weather events, and environmental degradation require urgent action.", "summarize", 300]
-            ], inputs=[text_input, text_operation, text_length])
+            ], inputs=[text_input, text_operation, text_length], label="📚 Try These Examples")
         
         # ====== TAB 3: WEB FETCHER ======
         with gr.Tab("🌐 Web Fetcher"):
-            gr.Markdown("### Scrape and analyze web content")
+            gr.Markdown("""
+            ### 🌐 Scrape and Analyze Web Content
+            Fetch content from any website, extract clean text, and analyze it.
+            """)
             
             with gr.Row():
-                with gr.Column():
+                with gr.Column(scale=1):
                     web_input = gr.Textbox(
-                        label="Website URL",
+                        label="🔗 Website URL",
                         placeholder="https://example.com",
-                        value="https://example.com"
+                        value="https://example.com",
+                        info="Enter any public website URL"
+                    )
+                    web_btn = gr.Button(
+                        "🌐 Fetch Website",
+                        variant="primary",
+                        size="lg",
+                        elem_classes=["primary-btn"]
                     )
-                    web_btn = gr.Button("🌐 Fetch Website", variant="primary")
+                    gr.Markdown("""
+                    **💡 Tips:**
+                    - Works with most public websites
+                    - Extracts clean text (no HTML)
+                    - Finds all page links
+                    - Some sites block bots (e.g., LinkedIn)
+                    """)
                 
-                with gr.Column():
-                    web_output = gr.Textbox(label="Results", lines=15)
+                with gr.Column(scale=2):
+                    web_output = gr.Textbox(
+                        label="📊 Website Content",
+                        lines=20,
+                        elem_classes=["output-class"]
+                    )
             
             web_btn.click(tool_web_fetcher, inputs=[web_input], outputs=[web_output])
             
@@ -400,23 +587,44 @@ with gr.Blocks(theme=gr.themes.Soft(), css=custom_css, title="MissionControlMCP
                 ["https://example.com"],
                 ["https://python.org"],
                 ["https://github.com"]
-            ], inputs=[web_input])
+            ], inputs=[web_input], label="📚 Try These Examples")
         
         # ====== TAB 4: RAG SEARCH ======
         with gr.Tab("🔍 RAG Search"):
-            gr.Markdown("### Semantic document search with AI embeddings")
+            gr.Markdown("""
+            ### 🔍 Semantic Document Search with AI
+            Search through documents using AI-powered semantic understanding (RAG - Retrieval Augmented Generation).
+            """)
             
             with gr.Row():
-                with gr.Column():
+                with gr.Column(scale=1):
                     rag_input = gr.Textbox(
-                        label="Search Query",
+                        label="🔎 Search Query",
                         placeholder="What are you looking for?",
-                        value="What is machine learning?"
+                        value="What is machine learning?",
+                        lines=3,
+                        info="Ask questions in natural language"
+                    )
+                    rag_btn = gr.Button(
+                        "🔍 Search Documents",
+                        variant="primary",
+                        size="lg",
+                        elem_classes=["primary-btn"]
                     )
-                    rag_btn = gr.Button("🔍 Search Documents", variant="primary")
+                    gr.Markdown("""
+                    **💡 How it works:**
+                    - Uses AI embeddings (FAISS)
+                    - Understands meaning, not just keywords
+                    - Searches 5 sample documents
+                    - Returns relevance scores
+                    """)
                 
-                with gr.Column():
-                    rag_output = gr.Textbox(label="Search Results", lines=15)
+                with gr.Column(scale=2):
+                    rag_output = gr.Textbox(
+                        label="📊 Search Results",
+                        lines=20,
+                        elem_classes=["output-class"]
+                    )
             
             rag_btn.click(tool_rag_search, inputs=[rag_input], outputs=[rag_output])
             
@@ -425,56 +633,98 @@ with gr.Blocks(theme=gr.themes.Soft(), css=custom_css, title="MissionControlMCP
                 ["How to reduce carbon emissions?"],
                 ["What are modern web frameworks?"],
                 ["Digital marketing strategies"]
-            ], inputs=[rag_input])
+            ], inputs=[rag_input], label="📚 Try These Searches")
         
         # ====== TAB 5: DATA VISUALIZER ======
         with gr.Tab("📊 Data Visualizer"):
-            gr.Markdown("### Create beautiful charts from CSV data")
+            gr.Markdown("""
+            ### 📊 Create Beautiful Charts from Your Data
+            Transform CSV data into stunning visualizations - line charts, bar charts, pie charts, and scatter plots.
+            """)
             
             with gr.Row():
-                with gr.Column():
+                with gr.Column(scale=1):
                     viz_csv = gr.Textbox(
-                        label="CSV Data",
-                        lines=8,
+                        label="📋 CSV Data",
+                        lines=10,
                         value=load_sample_csv(),
-                        placeholder="month,revenue,costs\nJan,100000,60000"
+                        placeholder="month,revenue,costs\nJan,100000,60000",
+                        info="Paste your CSV data here"
                     )
                     viz_chart = gr.Radio(
                         ["line", "bar", "pie", "scatter"],
-                        label="Chart Type",
-                        value="line"
+                        label="📈 Chart Type",
+                        value="line",
+                        info="Select visualization style"
+                    )
+                    viz_x = gr.Textbox(label="📍 X-Axis Column", value="month")
+                    viz_y = gr.Textbox(label="📍 Y-Axis Column", value="revenue")
+                    viz_title = gr.Textbox(label="📝 Chart Title", value="Monthly Revenue")
+                    viz_btn = gr.Button(
+                        "📊 Create Chart",
+                        variant="primary",
+                        size="lg",
+                        elem_classes=["primary-btn"]
                     )
-                    viz_x = gr.Textbox(label="X Column", value="month")
-                    viz_y = gr.Textbox(label="Y Column", value="revenue")
-                    viz_title = gr.Textbox(label="Chart Title", value="Monthly Revenue")
-                    viz_btn = gr.Button("📊 Create Chart", variant="primary")
                 
-                with gr.Column():
-                    viz_output = gr.Textbox(label="Status", lines=5)
-                    viz_img = gr.Image(label="Chart")
+                with gr.Column(scale=2):
+                    viz_output = gr.Textbox(
+                        label="📊 Chart Status",
+                        lines=5,
+                        elem_classes=["output-class"]
+                    )
+                    viz_img = gr.Image(label="📈 Generated Chart", elem_classes=["chart-output"])
             
             viz_btn.click(
                 tool_data_visualizer,
                 inputs=[viz_csv, viz_chart, viz_x, viz_y, viz_title],
                 outputs=[viz_output, viz_img]
             )
+            
+            gr.Markdown("*💡 Sample data is already loaded! Just click 'Create Chart' to see it in action.*")
         
         # ====== TAB 6: EMAIL CLASSIFIER ======
         with gr.Tab("📧 Email Classifier"):
-            gr.Markdown("### Detect email intent with AI")
+            gr.Markdown("""
+            ### 📧 AI-Powered Email Intent Detection
+            Automatically classify email intent and detect sentiment - complaint, inquiry, urgent, etc.
+            """)
             
             with gr.Row():
-                with gr.Column():
+                with gr.Column(scale=1):
                     email_input = gr.Textbox(
-                        label="Email Text",
-                        lines=10,
+                        label="✉️ Email Content",
+                        lines=12,
                         value=load_sample_email(),
-                        placeholder="Paste email content here..."
+                        placeholder="Paste email content here...",
+                        info="Paste any email text for analysis"
                     )
-                    email_btn = gr.Button("🎯 Classify Email", variant="primary")
+                    email_btn = gr.Button(
+                        "🎯 Classify Email",
+                        variant="primary",
+                        size="lg",
+                        elem_classes=["primary-btn"]
+                    )
+                    gr.Markdown("""
+                    **💡 Detects 10 intents:**
+                    - Complaint
+                    - Inquiry
+                    - Request
+                    - Feedback
+                    - Order
+                    - Meeting
+                    - Urgent
+                    - Application
+                    - Sales
+                    - Other
+                    """)
                 
-                with gr.Column():
-                    email_output = gr.Textbox(label="Classification Results", lines=15)
+                with gr.Column(scale=2):
+                    email_output = gr.Textbox(
+                        label="📊 Classification Results",
+                        lines=20,
+                        elem_classes=["output-class"]
+                    )
             
             email_btn.click(tool_email_classifier, inputs=[email_input], outputs=[email_output])
             
@@ -482,56 +732,117 @@ with gr.Blocks(theme=gr.themes.Soft(), css=custom_css, title="MissionControlMCP
                 ["I am writing to complain about the poor service I received at your store yesterday."],
                 ["Could you please send me more information about your pricing plans?"],
                 ["URGENT: The server is down and customers cannot access the website!"]
-            ], inputs=[email_input])
+            ], inputs=[email_input], label="📚 Try These Examples")
         
         # ====== TAB 7: KPI GENERATOR ======
         with gr.Tab("📈 KPI Generator"):
-            gr.Markdown("### Calculate business metrics and KPIs")
+            gr.Markdown("""
+            ### 📈 Business KPI & Analytics Dashboard
+            Generate comprehensive business metrics and KPIs from your data automatically.
+            """)
             
             with gr.Row():
-                with gr.Column():
+                with gr.Column(scale=1):
                     kpi_json = gr.Textbox(
-                        label="Business Data (JSON)",
-                        lines=12,
+                        label="📊 Business Data (JSON Format)",
+                        lines=14,
                         value=load_sample_json(),
-                        placeholder='{"revenue": 1000000, "costs": 600000}'
+                        placeholder='{"revenue": 1000000, "costs": 600000}',
+                        info="Enter your business metrics in JSON"
                     )
                     kpi_metrics = gr.CheckboxGroup(
                         ["revenue", "growth", "efficiency", "customer", "operational"],
-                        label="Metrics to Calculate",
-                        value=["revenue", "growth", "efficiency"]
+                        label="📋 Metrics to Calculate",
+                        value=["revenue", "growth", "efficiency"],
+                        info="Select which KPI categories to generate"
+                    )
+                    kpi_btn = gr.Button(
+                        "📈 Generate KPIs",
+                        variant="primary",
+                        size="lg",
+                        elem_classes=["primary-btn"]
                     )
-                    kpi_btn = gr.Button("📈 Generate KPIs", variant="primary")
+                    gr.Markdown("""
+                    **💡 Generates:**
+                    - Revenue metrics
+                    - Growth rates
+                    - Efficiency ratios
+                    - Customer metrics
+                    - Operational KPIs
+                    - Executive summary
+                    """)
                 
-                with gr.Column():
-                    kpi_output = gr.Textbox(label="KPI Report", lines=20)
+                with gr.Column(scale=2):
+                    kpi_output = gr.Textbox(
+                        label="📊 KPI Report",
+                        lines=25,
+                        elem_classes=["output-class"]
+                    )
             
             kpi_btn.click(
                 tool_kpi_generator,
                 inputs=[kpi_json, kpi_metrics],
                 outputs=[kpi_output]
             )
+            
+            gr.Markdown("*💡 Sample business data is already loaded! Just click 'Generate KPIs' to see results.*")
     
     # Footer
-    gr.Markdown("""
-    ---
-    
-    ### 🎯 About MissionControlMCP
-    
-    8 enterprise-grade automation tools integrated with Claude Desktop via Model Context Protocol (MCP).
-    
-    - **PDF Reader** - Extract text from documents
-    - **Text Extractor** - Keywords, summaries, cleaning
-    - **Web Fetcher** - Scrape websites
-    - **RAG Search** - Semantic document search
-    - **Data Visualizer** - Create charts
-    - **File Converter** - Format conversions
-    - **Email Classifier** - Intent detection
-    - **KPI Generator** - Business analytics
-    
-    🔗 **GitHub:** [AlBaraa-1/CleanEye-Hackathon](https://github.com/AlBaraa-1/CleanEye-Hackathon)
-    
-    🏆 Built for HuggingFace Gradio x BuildWithMCP Hackathon
+    gr.HTML("""
+    <div class="footer">
+        <h2 style="margin-bottom: 20px;">🎯 About MissionControlMCP</h2>
+        
+        <p style="font-size: 18px; margin-bottom: 20px;">
+            <strong>8 enterprise-grade automation tools</strong> integrated with Claude Desktop via Model Context Protocol (MCP)
+        </p>
+        
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin: 30px 0;">
+            <div style="padding: 15px; background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+                <strong>📄 PDF Reader</strong><br/>
+                <small>Extract text from documents</small>
+            </div>
+            <div style="padding: 15px; background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+                <strong>📝 Text Extractor</strong><br/>
+                <small>Keywords & summaries</small>
+            </div>
+            <div style="padding: 15px; background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+                <strong>🌐 Web Fetcher</strong><br/>
+                <small>Scrape websites</small>
+            </div>
+            <div style="padding: 15px; background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+                <strong>🔍 RAG Search</strong><br/>
+                <small>Semantic search</small>
+            </div>
+            <div style="padding: 15px; background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+                <strong>📊 Data Visualizer</strong><br/>
+                <small>Create charts</small>
+            </div>
+            <div style="padding: 15px; background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+                <strong>🔄 File Converter</strong><br/>
+                <small>Format conversions</small>
+            </div>
+            <div style="padding: 15px; background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+                <strong>📧 Email Classifier</strong><br/>
+                <small>Intent detection</small>
+            </div>
+            <div style="padding: 15px; background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+                <strong>📈 KPI Generator</strong><br/>
+                <small>Business analytics</small>
+            </div>
+        </div>
+        
+        <div style="margin-top: 30px; padding-top: 20px; border-top: 2px solid #e9ecef;">
+            <p style="font-size: 16px; margin: 10px 0;">
+                🔗 <a href="https://github.com/AlBaraa-1/CleanEye-Hackathon" target="_blank" style="color: #667eea; text-decoration: none; font-weight: 600;">View on GitHub</a>
+            </p>
+            <p style="margin: 10px 0; color: #6c757d;">
+                🏆 Built for HuggingFace Gradio x BuildWithMCP Hackathon
+            </p>
+            <p style="margin: 10px 0; color: #6c757d;">
+                Made with ❤️ using Python, Gradio, Claude MCP, FAISS, and Sentence Transformers
+            </p>
+        </div>
+    </div>
     """)