Add full OpenManus UI

app.py

@@ -1,12 +1,434 @@
 """
-Minimal Gradio App
+OpenManus Web UI - A sleek dark-themed interface for AI Agent interactions
+Built with Gradio for Hugging Face Spaces deployment
 """
+
 import gradio as gr
+import os
+import json
+import time
+from datetime import datetime
+from typing import List, Dict, Any, Optional
+
+# ============== Configuration ==============
+# Theme colors for the dark UI
+THEME = {
+    "background": "#0d0d0d",
+    "surface": "#1a1a1a", 
+    "surface_hover": "#252525",
+    "border": "#333333",
+    "text_primary": "#ffffff",
+    "text_secondary": "#a0a0a0",
+    "accent": "#6366f1",  # Indigo accent
+    "accent_hover": "#818cf8",
+    "success": "#10b981",
+    "error": "#ef4444",
+    "warning": "#f59e0b",
+}
+
+# ============== OpenManus Agent Wrapper ==============
+class OpenManusAgent:
+    """Wrapper class for OpenManus-style agent interactions"""
+    
+    def __init__(self, base_url: str, model_name: str, api_key: str):
+        self.base_url = base_url.strip()
+        self.model_name = model_name.strip()
+        self.api_key = api_key.strip()
+        
+    def _build_headers(self) -> Dict[str, str]:
+        """Build request headers"""
+        return {
+            "Authorization": f"Bearer {self.api_key}",
+            "Content-Type": "application/json"
+        }
+    
+    @staticmethod
+    def format_message_history(messages: List[Dict]) -> List[Dict]:
+        """Format message history for display"""
+        formatted = []
+        for msg in messages:
+            role = msg.get("role", "user")
+            content = msg.get("content", "")
+            formatted.append({
+                "role": role,
+                "content": content
+            })
+        return formatted
+    
+    def call_api(self, prompt: str, history: Optional[List[Dict]] = None) -> str:
+        """Call the OpenManus API"""
+        if not self.base_url:
+            return "⚠️ Please configure the Base URL in settings."
+        
+        if not self.api_key:
+            return "⚠️ Please configure the API Key in settings."
+        
+        # Build the conversation context
+        messages = []
+        if history:
+            messages = self.format_message_history(history)
+        messages.append({"role": "user", "content": prompt})
+        
+        try:
+            import requests
+            
+            payload = {
+                "model": self.model_name or "default",
+                "messages": messages,
+                "stream": False
+            }
+            
+            response = requests.post(
+                f"{self.base_url}/chat/completions",
+                headers=self._build_headers(),
+                json=payload,
+                timeout=120
+            )
+            
+            if response.status_code == 200:
+                result = response.json()
+                if "choices" in result and len(result["choices"]) > 0:
+                    return result["choices"][0]["message"]["content"]
+                return str(result)
+            else:
+                return f"⚠️ API Error ({response.status_code}): {response.text[:200]}"
+                
+        except ImportError:
+            return "⚠️ Requests library not available. Please install dependencies."
+        except requests.exceptions.ConnectionError:
+            return "⚠️ Could not connect to the API. Check your Base URL."
+        except requests.exceptions.Timeout:
+            return "⚠️ Request timed out. The server may be busy."
+        except Exception as e:
+            return f"⚠️ Error: {str(e)[:200]}"
+
+# ============== UI Components ==============
+def create_custom_css() -> str:
+    """Generate custom CSS for dark theme"""
+    return f"""
+    /* Global Dark Theme */
+    body {{
+        background-color: {THEME['background']} !important;
+        color: {THEME['text_primary']} !important;
+    }}
+    
+    /* Main container */
+    .gradio-container {{
+        background: {THEME['background']} !important;
+    }}
+    
+    /* Chat interface */
+    .chat-message {{
+        background: {THEME['surface']} !important;
+        border: 1px solid {THEME['border']} !important;
+        border-radius: 12px !important;
+        padding: 16px !important;
+        margin: 8px 0 !important;
+    }}
+    
+    .chat-message.user {{
+        background: {THEME['accent']}15 !important;
+        border-left: 3px solid {THEME['accent']} !important;
+    }}
+    
+    .chat-message.assistant {{
+        background: {THEME['surface']} !important;
+    }}
+    
+    /* Buttons */
+    button.primary {{
+        background: {THEME['accent']} !important;
+        color: white !important;
+        border: none !important;
+        border-radius: 8px !important;
+        padding: 12px 24px !important;
+        font-weight: 600 !important;
+        transition: all 0.2s ease !important;
+    }}
+    
+    button.primary:hover {{
+        background: {THEME['accent_hover']} !important;
+        transform: translateY(-1px) !important;
+    }}
+    
+    /* Input fields */
+    input, textarea {{
+        background: {THEME['surface']} !important;
+        border: 1px solid {THEME['border']} !important;
+        color: {THEME['text_primary']} !important;
+        border-radius: 8px !important;
+    }}
+    
+    input:focus, textarea:focus {{
+        border-color: {THEME['accent']} !important;
+        outline: none !important;
+    }}
+    
+    /* Tabs */
+    .tab-nav button {{
+        background: transparent !important;
+        color: {THEME['text_secondary']} !important;
+        border: none !important;
+    }}
+    
+    .tab-nav button.selected {{
+        color: {THEME['accent']} !important;
+        border-bottom: 2px solid {THEME['accent']} !important;
+    }}
+    
+    /* File upload area */
+    .upload-area {{
+        background: {THEME['surface']} !important;
+        border: 2px dashed {THEME['border']} !important;
+        border-radius: 12px !important;
+    }}
+    
+    .upload-area:hover {{
+        border-color: {THEME['accent']} !important;
+    }}
+    
+    /* Status indicators */
+    .status-connected {{
+        color: {THEME['success']} !important;
+    }}
+    
+    .status-disconnected {{
+        color: {THEME['error']} !important;
+    }}
+    
+    /* Panel styling */
+    .panel {{
+        background: {THEME['surface']} !important;
+        border: 1px solid {THEME['border']} !important;
+        border-radius: 12px !important;
+        padding: 20px !important;
+    }}
+    
+    /* Scrollbar styling */
+    ::-webkit-scrollbar {{
+        width: 8px;
+    }}
+    
+    ::-webkit-scrollbar-track {{
+        background: {THEME['background']};
+    }}
+    
+    ::-webkit-scrollbar-thumb {{
+        background: {THEME['border']};
+        border-radius: 4px;
+    }}
+    
+    ::-webkit-scrollbar-thumb:hover {{
+        background: {THEME['text_secondary']};
+    }}
+    
+    /* Logo/Header */
+    .header-logo {{
+        font-size: 28px;
+        font-weight: 700;
+        background: linear-gradient(135deg, {THEME['accent']}, #a855f7);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }}
+    """
+
+# ============== Chat Interface ==============
+def chat_response(prompt: str, history: List[Dict], agent_config: Dict) -> str:
+    """Process chat messages with OpenManus agent"""
+    if not prompt.strip():
+        return history, ""
+    
+    # Initialize agent with config
+    agent = OpenManusAgent(
+        base_url=agent_config.get("base_url", ""),
+        model_name=agent_config.get("model_name", ""),
+        api_key=agent_config.get("api_key", "")
+    )
+    
+    # Call the API
+    response = agent.call_api(prompt, history)
+    
+    # Add to history
+    history.append({"role": "user", "content": prompt})
+    history.append({"role": "assistant", "content": response})
+    
+    return history, ""
 
-def greet(name):
-    return f"Hello, {name}!"
+# ============== Main App ==============
+def create_app() -> gr.Blocks:
+    """Create the Gradio application"""
+    
+    # Global state
+    agent_state = {"config": {}}
+    
+    with gr.Blocks(
+        title="JD OpenManus Engine",
+        theme=gr.themes.Soft(
+            primary_hue="indigo",
+            secondary_hue="purple",
+            neutral_hue="slate",
+            font="Inter",
+        ),
+        css=create_custom_css(),
+    ) as app:
+        
+        # Header
+        gr.HTML("""
+        <div style="text-align: center; padding: 20px 0; border-bottom: 1px solid #333; margin-bottom: 20px;">
+            <h1 class="header-logo">🤖 JD OpenManus Engine</h1>
+            <p style="color: #a0a0a0; margin-top: 8px;">
+                AI Agent Interface • Powered by OpenManus Framework
+            </p>
+        </div>
+        """)
+        
+        with gr.Tab("💬 Chat"):
+            with gr.Row():
+                with gr.Column(scale=3):
+                    # Chat display
+                    chatbot = gr.Chatbot(
+                        height=500,
+                        bubble_full_width=False,
+                        avatar_images=(
+                            "👤",  # User avatar
+                            "🤖",  # Bot avatar
+                        ),
+                        elem_classes="chat-container"
+                    )
+                    
+                    # Chat input
+                    with gr.Row():
+                        msg_input = gr.Textbox(
+                            placeholder="Type your message here...",
+                            show_label=False,
+                            lines=3,
+                            scale=4,
+                            container=False,
+                        )
+                    
+                    with gr.Row():
+                        submit_btn = gr.Button("Send", variant="primary", scale=1)
+                        clear_btn = gr.Button("Clear Chat", variant="secondary", scale=1)
+                
+                with gr.Column(scale=1):
+                    # Sidebar with config
+                    with gr.Group(elem_classes="panel"):
+                        gr.Markdown("### ⚙️ Configuration")
+                        
+                        with gr.Accordion("API Settings", open=True):
+                            base_url = gr.Textbox(
+                                label="Base URL",
+                                placeholder="https://api.openai.com/v1",
+                                info="API endpoint URL"
+                            )
+                            
+                            model_name = gr.Textbox(
+                                label="Model Name",
+                                placeholder="gpt-4-turbo",
+                                info="Model identifier"
+                            )
+                            
+                            api_key = gr.Textbox(
+                                label="API Key",
+                                placeholder="sk-...",
+                                type="password",
+                                info="Your API key"
+                            )
+                        
+                        save_config_btn = gr.Button("💾 Save Configuration", variant="primary")
+                        config_status = gr.Markdown("")
+            
+            # Chat handlers
+            def save_config(burl, mname, key):
+                agent_state["config"] = {
+                    "base_url": burl or "",
+                    "model_name": mname or "",
+                    "api_key": key or ""
+                }
+                return "✅ Configuration saved!"
+            
+            save_config_btn.click(
+                save_config,
+                inputs=[base_url, model_name, api_key],
+                outputs=[config_status]
+            )
+            
+            def handle_submit(msg, history):
+                if not msg.strip():
+                    return history, ""
+                return chat_response(msg, history, agent_state["config"])
+            
+            submit_btn.click(
+                handle_submit,
+                inputs=[msg_input, chatbot],
+                outputs=[chatbot, msg_input]
+            )
+            
+            msg_input.submit(
+                handle_submit,
+                inputs=[msg_input, chatbot],
+                outputs=[chatbot, msg_input]
+            )
+            
+            clear_btn.click(
+                lambda: ([], ""),
+                outputs=[chatbot, msg_input]
+            )
+        
+        with gr.Tab("📁 Files"):
+            with gr.Row():
+                with gr.Column():
+                    gr.Markdown("### 📤 File Upload")
+                    gr.Markdown("Upload files for the AI agent to process.")
+                    
+                    file_output = gr.File(
+                        file_count="multiple",
+                        label="Upload Files",
+                        file_types=[".txt", ".pdf", ".doc", ".docx", ".csv", ".json", ".py", ".js", ".md"]
+                    )
+                    
+                    with gr.Row():
+                        upload_btn = gr.Button("Upload", variant="primary")
+                    
+                    upload_status = gr.Markdown("")
+        
+        with gr.Tab("ℹ️ About"):
+            gr.Markdown("""
+            ## 🤖 JD OpenManus Engine
+            
+            **Version:** 1.0.0  
+            **Framework:** OpenManus  
+            
+            ### Features:
+            - 💬 **Chat Interface** - Interact with AI agents
+            - 📁 **File Upload** - Process documents and data
+            - ⚙️ **Flexible Configuration** - Connect to any API
+            
+            ### How to Use:
+            1. Configure your API credentials in the Settings tab
+            2. Enter your message in the chat input
+            3. Press Send or hit Enter to get a response
+            
+            ⚠️ **Note:** This is a Web UI wrapper. You'll need to configure a valid API endpoint (like OpenAI, Anthropic, or custom) to use the chat functionality.
+            """)
+    
+    return app
 
-demo = gr.Interface(fn=greet, inputs=gr.Textbox(), outputs=gr.Textbox(), title="Test")
+# ============== Main Entry Point ==============
+def main():
+    """Application entry point"""
+    print("🚀 Starting JD OpenManus Engine...")
+    print("=" * 50)
+    
+    app = create_app()
+    
+    # Launch the app
+    app.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=True,
+        show_error=True
+    )
 
 if __name__ == "__main__":
-    demo.launch(server_name="0.0.0.0", server_port=7860)
+    main()