Use simplified app

app.py

@@ -1,436 +1,130 @@
 """
-OpenManus Web UI - A sleek dark-themed interface for AI Agent interactions
-Built with Gradio for Hugging Face Spaces deployment
+JD OpenManus Engine - Web UI for AI Agent Interactions
+A sleek, modern dark-themed Gradio interface
 """
 
 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",
-}
+# ============== UI Configuration ==============
+THEME = gr.themes.Soft(
+    primary_hue="indigo",
+    secondary_hue="purple",
+    neutral_hue="slate",
+)
 
-# ============== 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;
-    }}
-    """
+# ============== Global State ==============
+agent_config = {"base_url": "", "model_name": "", "api_key": ""}
+chat_history = []
 
-# ============== Chat Interface ==============
-def chat_response(prompt: str, history: List[Dict], agent_config: Dict) -> str:
-    """Process chat messages with OpenManus agent"""
+# ============== Chat Function ==============
+def chat_response(prompt: str, history: list) -> tuple:
+    """Process chat messages"""
     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", "")
-    )
+    # Add user message
+    history.append({"role": "user", "content": prompt})
     
-    # Call the API
-    response = agent.call_api(prompt, history)
+    # Generate response based on config
+    if not agent_config.get("api_key"):
+        response = "⚠️ Please configure your API Key in the settings panel first."
+    elif not agent_config.get("base_url"):
+        response = "⚠️ Please configure your Base URL in the settings panel first."
+    else:
+        response = f"📝 Message received!\n\nConfig:\n- Base URL: {agent_config.get('base_url', 'Not set')}\n- Model: {agent_config.get('model_name', 'default')}\n\n💡 This is a demo response. Connect your OpenManus API to enable full functionality."
     
-    # Add to history
-    history.append({"role": "user", "content": prompt})
+    # Add assistant response
     history.append({"role": "assistant", "content": response})
     
     return history, ""
 
-# ============== 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"
+def save_config(base_url: str, model_name: str, api_key: str):
+    """Save API configuration"""
+    agent_config["base_url"] = base_url
+    agent_config["model_name"] = model_name  
+    agent_config["api_key"] = api_key
+    return "✅ Configuration saved!"
+
+# ============== Build UI ==============
+with gr.Blocks(title="JD OpenManus Engine", theme=THEME) as demo:
+    gr.Markdown("""
+    <div style="text-align: center; padding: 20px 0; border-bottom: 1px solid #333; margin-bottom: 20px;">
+        <h1 style="font-size: 28px; font-weight: 700; background: linear-gradient(135deg, #6366f1, #a855f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
+            🤖 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):
+                chatbot = gr.Chatbot(height=500, bubble_full_width=False)
+                
+                with gr.Row():
+                    msg_input = gr.Textbox(
+                        placeholder="Type your message here...", 
+                        show_label=False, 
+                        lines=3,
+                        scale=4
                     )
-                    
-                    # 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]
-            )
+                with gr.Row():
+                    submit_btn = gr.Button("Send", variant="primary")
+                    clear_btn = gr.Button("Clear Chat", variant="secondary")
             
-            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.")
+            with gr.Column(scale=1):
+                with gr.Group():
+                    gr.Markdown("### ⚙️ Configuration")
+                    
+                    base_url = gr.Textbox(
+                        label="Base URL",
+                        placeholder="https://api.openai.com/v1"
+                    )
                     
-                    file_output = gr.File(
-                        file_count="multiple",
-                        label="Upload Files",
-                        file_types=[".txt", ".pdf", ".doc", ".docx", ".csv", ".json", ".py", ".js", ".md"]
+                    model_name = gr.Textbox(
+                        label="Model Name", 
+                        placeholder="gpt-4-turbo"
                     )
                     
-                    with gr.Row():
-                        upload_btn = gr.Button("Upload", variant="primary")
+                    api_key = gr.Textbox(
+                        label="API Key",
+                        placeholder="sk-...",
+                        type="password"
+                    )
                     
-                    upload_status = gr.Markdown("")
+                    save_btn = gr.Button("💾 Save", variant="primary")
+                    config_status = gr.Markdown("")
+    
+    # Chat handlers
+    submit_btn.click(chat_response, inputs=[msg_input, chatbot], outputs=[chatbot, msg_input])
+    msg_input.submit(chat_response, inputs=[msg_input, chatbot], outputs=[chatbot, msg_input])
+    clear_btn.click(lambda: ([], ""), outputs=[chatbot, msg_input])
+    save_btn.click(save_config, inputs=[base_url, model_name, api_key], outputs=[config_status])
+    
+    with gr.Tab("📁 Files"):
+        gr.Markdown("### 📤 File Upload")
+        gr.Markdown("Upload files for the AI agent to process.")
+        file_input = gr.File(file_count="multiple", label="Upload Files")
+    
+    with gr.Tab("ℹ️ About"):
+        gr.Markdown("""
+        ## 🤖 JD OpenManus Engine
         
-        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
-
-# ============== Main Entry Point ==============
-def main():
-    """Application entry point"""
-    print("🚀 Starting JD OpenManus Engine...")
-    print("=" * 50)
-    
-    app = create_app()
-    
-    # Launch the app
-    import os
-    port = int(os.environ.get("PORT", "7860"))
-    app.launch(
-        server_name="0.0.0.0",
-        server_port=port,
-        share=True,
-        show_error=True
-    )
+        **Version:** 1.0.0  
+        **Framework:** OpenManus  
+        
+        ### Features:
+        - 💬 Chat Interface
+        - ⚙️ Flexible Configuration
+        - 📁 File Upload Support
+        - 🌙 Dark Theme UI
+        """)
 
+# ============== Launch ==============
 if __name__ == "__main__":
-    main()
+    port = int(os.environ.get("PORT", "7860"))
+    demo.launch(server_name="0.0.0.0", server_port=port)