Update: English language, dark theme optimization, improved markdown display

app.py

@@ -6,12 +6,13 @@ import httpx
 from openai import OpenAI
 from typing import List, Dict, Any
 import logging
+import markdown
 
-# Cấu hình logging
+# Configure logging
 logging.basicConfig(level=logging.INFO)
 logger = logging.getLogger(__name__)
 
-# Khởi tạo OpenAI client
+# Initialize OpenAI client
 client = OpenAI(
     api_key=os.getenv("OPENAI_API_KEY"),
     base_url=os.getenv("OPENAI_API_BASE", "https://api.openai.com/v1")
@@ -22,37 +23,37 @@ class MCPServerDemo:
         self.servers = {
             "Microsoft Learn Docs": {
                 "url": "https://learn.microsoft.com/api/mcp",
-                "description": "Tìm kiếm tài liệu Microsoft Learn chính thức",
+                "description": "Search official Microsoft Learn documentation",
                 "tools": ["microsoft_docs_search"]
             },
             "Azure MCP": {
-                "description": "Quản lý tài nguyên Azure",
+                "description": "Manage Azure resources and services",
                 "tools": ["azure_resource_list", "azure_monitor_query"]
             },
             "GitHub MCP": {
-                "description": "Tương tác với GitHub repositories",
+                "description": "Interact with GitHub repositories",
                 "tools": ["github_search_repos", "github_create_issue"]
             },
             "Azure DevOps MCP": {
-                "description": "Quản lý Azure DevOps work items",
+                "description": "Manage Azure DevOps work items",
                 "tools": ["devops_create_workitem", "devops_query_workitems"]
             },
             "MarkItDown MCP": {
-                "description": "Chuyển đổi documents sang Markdown",
+                "description": "Convert documents to Markdown format",
                 "tools": ["convert_to_markdown"]
             },
             "SQL Server MCP": {
-                "description": "Truy vấn SQL Server database",
+                "description": "Query SQL Server databases",
                 "tools": ["sql_query", "sql_schema"]
             },
             "Playwright MCP": {
-                "description": "Web automation và testing",
+                "description": "Web automation and testing",
                 "tools": ["playwright_navigate", "playwright_screenshot"]
             }
         }
     
     async def search_microsoft_docs(self, query: str) -> str:
-        """Tìm kiếm tài liệu Microsoft Learn"""
+        """Search Microsoft Learn documentation"""
         try:
             async with httpx.AsyncClient() as client:
                 response = await client.post(
@@ -69,104 +70,151 @@ class MCPServerDemo:
                 
                 if response.status_code == 200:
                     result = response.json()
-                    return f"Kết quả tìm kiếm cho '{query}':\n\n{json.dumps(result, indent=2, ensure_ascii=False)}"
+                    return f"Search results for '{query}':\n\n{json.dumps(result, indent=2, ensure_ascii=False)}"
                 else:
-                    return f"Lỗi khi tìm kiếm: {response.status_code}"
+                    return f"Search error: {response.status_code}"
         except Exception as e:
             logger.error(f"Error searching Microsoft docs: {e}")
-            return f"Lỗi: {str(e)}"
+            return f"Error: {str(e)}"
     
     def simulate_mcp_call(self, server_name: str, tool_name: str, query: str) -> str:
-        """Mô phỏng gọi MCP server"""
+        """Simulate MCP server call with markdown formatting"""
         if server_name not in self.servers:
-            return "Server không tồn tại"
+            return "❌ **Server not found**"
         
         server_info = self.servers[server_name]
         
-        # Mô phỏng kết quả dựa trên server và tool
+        # Simulate results based on server and tool
         if server_name == "Microsoft Learn Docs" and tool_name == "microsoft_docs_search":
             return f"""
-🔍 **Tìm kiếm Microsoft Learn Docs**
-Query: {query}
+## 🔍 **Microsoft Learn Docs Search**
 
-📚 **Kết quả mô phỏng:**
-1. **ASP.NET Core Documentation**
-   - URL: https://learn.microsoft.com/aspnet/core/
-   - Mô tả: Comprehensive guide for ASP.NET Core development
-   
-2. **Azure Documentation**  
-   - URL: https://learn.microsoft.com/azure/
-   - Mô tả: Official Azure documentation and tutorials
-   
-3. **C# Programming Guide**
-   - URL: https://learn.microsoft.com/dotnet/csharp/
-   - Mô tả: Complete C# language reference and examples
+**Query:** `{query}`
 
-✅ **Tính năng thực tế:**
-- Semantic search qua toàn bộ Microsoft Learn
-- Truy cập real-time đến tài liệu mới nhất
-- Kết quả có context và source links
+### 📚 **Simulated Results:**
+
+#### 1. ASP.NET Core Documentation
+- **URL:** [https://learn.microsoft.com/aspnet/core/](https://learn.microsoft.com/aspnet/core/)
+- **Description:** Comprehensive guide for ASP.NET Core development
+- **Relevance:** ⭐⭐⭐⭐⭐
+
+#### 2. Azure Documentation  
+- **URL:** [https://learn.microsoft.com/azure/](https://learn.microsoft.com/azure/)
+- **Description:** Official Azure documentation and tutorials
+- **Relevance:** ⭐⭐⭐⭐
+
+#### 3. C# Programming Guide
+- **URL:** [https://learn.microsoft.com/dotnet/csharp/](https://learn.microsoft.com/dotnet/csharp/)
+- **Description:** Complete C# language reference and examples
+- **Relevance:** ⭐⭐⭐⭐⭐
+
+### ✅ **Real Features:**
+- 🔍 Semantic search across all Microsoft Learn content
+- 🔄 Real-time access to latest documentation
+- 🔗 Contextual results with source links
+- 📊 Up to 10 high-quality content chunks returned
 """
         
         elif server_name == "Azure MCP":
             return f"""
-☁️ **Azure MCP Server**
-Action: {tool_name}
-Query: {query}
+## ☁️ **Azure MCP Server**
+
+**Action:** `{tool_name}`  
+**Query:** `{query}`
 
-🔧 **Kết quả mô phỏng:**
-- Resource Groups: 5 active
-- Storage Accounts: 12 total
-- Virtual Machines: 3 running
-- App Services: 8 deployed
+### 🔧 **Simulated Results:**
 
-✅ **Tính năng thực tế:**
-- Quản lý 15+ Azure services
-- Monitor logs với KQL queries  
-- Database connectivity (PostgreSQL, SQL Server)
-- Cosmos DB integration
+| Resource Type | Count | Status |
+|---------------|-------|--------|
+| Resource Groups | 5 | ✅ Active |
+| Storage Accounts | 12 | ✅ Running |
+| Virtual Machines | 3 | ✅ Running |
+| App Services | 8 | ✅ Deployed |
+
+### 📊 **Resource Health:**
+- 🟢 **Healthy:** 28 resources
+- 🟡 **Warning:** 2 resources  
+- 🔴 **Critical:** 0 resources
+
+### ✅ **Real Features:**
+- 🛠️ **15+ Azure service connectors**
+- 📊 **Azure Monitor log analysis with KQL**
+- 🗄️ **Database connectivity** (PostgreSQL, SQL Server)
+- 🌐 **Cosmos DB integration**
+- 📈 **Resource management and monitoring**
 """
         
         elif server_name == "GitHub MCP":
             return f"""
-🐙 **GitHub MCP Server**
-Action: {tool_name}
-Query: {query}
+## 🐙 **GitHub MCP Server**
+
+**Action:** `{tool_name}`  
+**Query:** `{query}`
+
+### 📊 **Simulated Results:**
+
+#### Repository Statistics
+```json
+{
+  "repositories_found": 25,
+  "open_issues": 12,
+  "pull_requests": 8,
+  "recent_commits": 45,
+  "contributors": 15
+}
+```
 
-📊 **Kết quả mô phỏng:**
-- Repositories found: 25
-- Open Issues: 12
-- Pull Requests: 8
-- Recent commits: 45
+#### Top Repositories
+1. **microsoft/vscode** - ⭐ 162k stars
+2. **microsoft/TypeScript** - ⭐ 100k stars  
+3. **microsoft/PowerToys** - ⭐ 110k stars
 
-✅ **Tính năng thực tế:**
-- Tạo và quản lý GitHub issues
-- Search repositories và code
-- Manage pull requests
-- Repository analytics
+### ✅ **Real Features:**
+- 📝 **Create and manage GitHub issues**
+- 🔍 **Search repositories and code**
+- 🔄 **Manage pull requests**
+- 📊 **Repository analytics and insights**
+- 👥 **Team collaboration tools**
 """
         
         else:
             return f"""
-🛠️ **{server_name}**
-Tool: {tool_name}
-Query: {query}
+## 🛠️ **{server_name}**
 
-📋 **Mô phỏng kết quả:**
-{server_info['description']}
+**Tool:** `{tool_name}`  
+**Query:** `{query}`
 
-Đây là demo mô phỏng. Trong thực tế, server này sẽ:
-- Kết nối trực tiếp với service
-- Thực hiện các thao tác real-time
-- Trả về dữ liệu chính xác từ API
+### 📋 **Simulation Results:**
+
+> **{server_info['description']}**
+
+This is a **demo simulation**. In production, this server would:
+
+### ✅ **Capabilities:**
+- 🔗 Connect directly to the service
+- ⚡ Perform real-time operations  
+- 📊 Return accurate data from APIs
+- 🔄 Execute live commands and queries
+
+### 🚀 **Integration Benefits:**
+- **Stay in flow** - No context switching
+- **AI-powered** - Natural language queries
+- **Chainable** - Combine multiple servers
+- **Extensible** - Build custom integrations
 """
 
+    def format_markdown_response(self, content: str) -> str:
+        """Format response with proper markdown rendering"""
+        # Convert markdown to HTML for better rendering
+        html_content = markdown.markdown(content, extensions=['tables', 'fenced_code'])
+        return html_content
+
 def create_demo_interface():
     demo_instance = MCPServerDemo()
     
     def process_mcp_request(server_name: str, tool_name: str, query: str) -> str:
         if not query.strip():
-            return "Vui lòng nhập query để test MCP server"
+            return "❌ **Please enter a query to test the MCP server**"
         
         return demo_instance.simulate_mcp_call(server_name, tool_name, query)
     
@@ -176,88 +224,241 @@ def create_demo_interface():
             return gr.Dropdown(choices=tools, value=tools[0] if tools else None)
         return gr.Dropdown(choices=[], value=None)
     
+    # Dark theme optimized CSS
+    dark_theme_css = """
+    .gradio-container {
+        max-width: 1400px !important;
+        background: #0d1117 !important;
+    }
+    
+    .server-header {
+        background: linear-gradient(135deg, #1f6feb 0%, #8b5cf6 100%);
+        color: white;
+        padding: 24px;
+        border-radius: 12px;
+        margin: 16px 0;
+        box-shadow: 0 8px 32px rgba(31, 111, 235, 0.2);
+    }
+    
+    .server-info-grid {
+        background: #161b22;
+        padding: 24px;
+        border-radius: 12px;
+        margin: 20px 0;
+        border: 1px solid #30363d;
+    }
+    
+    .server-card {
+        background: #21262d;
+        padding: 20px;
+        border-radius: 10px;
+        border-left: 4px solid #1f6feb;
+        margin: 12px 0;
+        transition: all 0.3s ease;
+    }
+    
+    .server-card:hover {
+        background: #262c36;
+        transform: translateY(-2px);
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+    }
+    
+    .markdown-content {
+        background: #0d1117;
+        color: #e6edf3;
+        font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
+    }
+    
+    .markdown-content h2 {
+        color: #1f6feb;
+        border-bottom: 2px solid #21262d;
+        padding-bottom: 8px;
+    }
+    
+    .markdown-content h3 {
+        color: #7c3aed;
+    }
+    
+    .markdown-content code {
+        background: #161b22;
+        color: #79c0ff;
+        padding: 2px 6px;
+        border-radius: 4px;
+        border: 1px solid #30363d;
+    }
+    
+    .markdown-content pre {
+        background: #161b22 !important;
+        border: 1px solid #30363d;
+        border-radius: 8px;
+        padding: 16px;
+    }
+    
+    .markdown-content table {
+        border-collapse: collapse;
+        width: 100%;
+        margin: 16px 0;
+    }
+    
+    .markdown-content th,
+    .markdown-content td {
+        border: 1px solid #30363d;
+        padding: 12px;
+        text-align: left;
+    }
+    
+    .markdown-content th {
+        background: #21262d;
+        color: #1f6feb;
+        font-weight: 600;
+    }
+    
+    .markdown-content blockquote {
+        border-left: 4px solid #1f6feb;
+        background: #161b22;
+        padding: 16px;
+        margin: 16px 0;
+        border-radius: 0 8px 8px 0;
+    }
+    
+    /* Gradio component styling for dark theme */
+    .gr-textbox, .gr-dropdown {
+        background: #21262d !important;
+        border: 1px solid #30363d !important;
+        color: #e6edf3 !important;
+    }
+    
+    .gr-button {
+        background: linear-gradient(135deg, #1f6feb 0%, #8b5cf6 100%) !important;
+        border: none !important;
+        color: white !important;
+        font-weight: 600 !important;
+        transition: all 0.3s ease !important;
+    }
+    
+    .gr-button:hover {
+        transform: translateY(-2px) !important;
+        box-shadow: 0 4px 16px rgba(31, 111, 235, 0.4) !important;
+    }
+    """
+    
     with gr.Blocks(
         title="Microsoft MCP Servers Demo",
-        theme=gr.themes.Soft(),
-        css="""
-        .gradio-container {
-            max-width: 1200px !important;
-        }
-        .server-info {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-            padding: 20px;
-            border-radius: 10px;
-            margin: 10px 0;
-        }
-        """
+        theme=gr.themes.Base().set(
+            body_background_fill="#0d1117",
+            body_text_color="#e6edf3",
+            background_fill_primary="#161b22",
+            background_fill_secondary="#21262d",
+            border_color_primary="#30363d",
+            color_accent="#1f6feb",
+            color_accent_soft="#1f6feb20"
+        ),
+        css=dark_theme_css
     ) as demo:
         
         gr.HTML("""
-        <div class="server-info">
+        <div class="server-header">
             <h1>🚀 Microsoft MCP Servers Demo</h1>
-            <p>Khám phá 10 Microsoft MCP Servers để tăng tốc development workflow của bạn!</p>
-            <p><strong>Model Context Protocol (MCP)</strong> cho phép AI assistant kết nối với external tools và data sources.</p>
+            <p>Explore 10 Microsoft MCP Servers to accelerate your development workflow!</p>
+            <p><strong>Model Context Protocol (MCP)</strong> enables AI assistants to connect with external tools and data sources.</p>
         </div>
         """)
         
         with gr.Row():
             with gr.Column(scale=1):
-                gr.HTML("<h3>🛠️ Chọn MCP Server</h3>")
+                gr.HTML("<h3>🛠️ Select MCP Server</h3>")
                 server_dropdown = gr.Dropdown(
                     choices=list(demo_instance.servers.keys()),
                     value="Microsoft Learn Docs",
                     label="MCP Server",
-                    info="Chọn server để test"
+                    info="Choose a server to test",
+                    elem_classes=["gr-dropdown"]
                 )
                 
                 tool_dropdown = gr.Dropdown(
                     choices=demo_instance.servers["Microsoft Learn Docs"]["tools"],
                     value="microsoft_docs_search",
                     label="Tool/Function",
-                    info="Chọn function để gọi"
+                    info="Select function to call",
+                    elem_classes=["gr-dropdown"]
                 )
                 
                 query_input = gr.Textbox(
                     label="Query/Input",
-                    placeholder="Nhập query để test MCP server...",
+                    placeholder="Enter your query to test the MCP server...",
                     lines=3,
-                    value="ASP.NET Core authentication"
+                    value="ASP.NET Core authentication",
+                    elem_classes=["gr-textbox"]
                 )
                 
-                submit_btn = gr.Button("🔍 Test MCP Server", variant="primary")
+                submit_btn = gr.Button(
+                    "🔍 Test MCP Server", 
+                    variant="primary",
+                    elem_classes=["gr-button"]
+                )
                 
             with gr.Column(scale=2):
-                gr.HTML("<h3>📊 Kết quả</h3>")
-                output_text = gr.Textbox(
+                gr.HTML("<h3>📊 Results</h3>")
+                output_text = gr.Markdown(
                     label="MCP Server Response",
-                    lines=20,
-                    max_lines=30,
-                    show_copy_button=True
+                    value="",
+                    elem_classes=["markdown-content"],
+                    show_copy_button=True,
+                    line_breaks=True,
+                    sanitize_html=False
                 )
         
-        # Server info section
+        # Server info section with improved styling
         with gr.Row():
             gr.HTML("""
-            <div style="background: #f8f9fa; padding: 20px; border-radius: 10px; margin: 20px 0;">
-                <h3>📚 Thông tin về Microsoft MCP Servers</h3>
-                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; margin-top: 15px;">
-                    <div style="background: white; padding: 15px; border-radius: 8px; border-left: 4px solid #0078d4;">
+            <div class="server-info-grid">
+                <h3>📚 Microsoft MCP Servers Overview</h3>
+                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 20px;">
+                    <div class="server-card">
                         <h4>📚 Microsoft Learn Docs</h4>
-                        <p>Tìm kiếm semantic qua tài liệu Microsoft chính thức</p>
+                        <p>Semantic search across official Microsoft documentation</p>
+                        <code>microsoft_docs_search</code>
                     </div>
-                    <div style="background: white; padding: 15px; border-radius: 8px; border-left: 4px solid #00bcf2;">
+                    <div class="server-card">
                         <h4>☁️ Azure MCP</h4>
-                        <p>Quản lý 15+ Azure services và resources</p>
+                        <p>Manage 15+ Azure services and resources</p>
+                        <code>azure_resource_list, azure_monitor_query</code>
                     </div>
-                    <div style="background: white; padding: 15px; border-radius: 8px; border-left: 4px solid #24292e;">
+                    <div class="server-card">
                         <h4>🐙 GitHub MCP</h4>
-                        <p>Tương tác với GitHub repos, issues, PRs</p>
+                        <p>Interact with GitHub repos, issues, PRs</p>
+                        <code>github_search_repos, github_create_issue</code>
                     </div>
-                    <div style="background: white; padding: 15px; border-radius: 8px; border-left: 4px solid #0078d4;">
+                    <div class="server-card">
                         <h4>🔄 Azure DevOps</h4>
-                        <p>Quản lý work items, builds, releases</p>
+                        <p>Manage work items, builds, releases</p>
+                        <code>devops_create_workitem, devops_query_workitems</code>
                     </div>
+                    <div class="server-card">
+                        <h4>📝 MarkItDown</h4>
+                        <p>Convert documents to Markdown format</p>
+                        <code>convert_to_markdown</code>
+                    </div>
+                    <div class="server-card">
+                        <h4>🗃️ SQL Server</h4>
+                        <p>Query SQL Server databases</p>
+                        <code>sql_query, sql_schema</code>
+                    </div>
+                    <div class="server-card">
+                        <h4>🎭 Playwright</h4>
+                        <p>Web automation and testing</p>
+                        <code>playwright_navigate, playwright_screenshot</code>
+                    </div>
+                </div>
+                
+                <div style="margin-top: 24px; padding: 20px; background: #21262d; border-radius: 10px; border-left: 4px solid #7c3aed;">
+                    <h4>🚀 Key Benefits</h4>
+                    <ul style="margin: 12px 0; padding-left: 20px;">
+                        <li><strong>Stay in flow</strong> - No context switching required</li>
+                        <li><strong>AI-powered queries</strong> - Natural language instead of exact syntax</li>
+                        <li><strong>Chainable operations</strong> - Combine multiple servers</li>
+                        <li><strong>Extensible ecosystem</strong> - Build custom integrations</li>
+                    </ul>
                 </div>
             </div>
             """)
@@ -290,7 +491,7 @@ if __name__ == "__main__":
     demo = create_demo_interface()
     demo.launch(
         server_name="0.0.0.0",
-        server_port=7860,
+        server_port=int(os.getenv("GRADIO_SERVER_PORT", 7860)),
         share=False,
         show_error=True
     )

requirements.txt

@@ -6,4 +6,5 @@ mcp==1.0.0
 httpx==0.27.0
 asyncio-mqtt==0.16.2
 aiofiles==23.2.1
+markdown==3.6