Spaces:
Sleeping
Sleeping
| import gradio as gr | |
| # Custom CSS for styling | |
| custom_css = """ | |
| .header-container { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| padding: 20px; | |
| text-align: center; | |
| color: white; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| width: 100%; | |
| z-index: 1000; | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.1); | |
| margin: 0; | |
| border-radius: 0; | |
| } | |
| .header-title { | |
| font-size: 2.5em; | |
| font-weight: bold; | |
| margin-bottom: 5px; | |
| letter-spacing: 2px; | |
| } | |
| .header-subtitle { | |
| font-size: 1.1em; | |
| opacity: 0.9; | |
| font-weight: 300; | |
| } | |
| .chat-container { | |
| height: 400px; | |
| border: 2px solid #e0e0e0; | |
| border-radius: 10px; | |
| padding: 15px; | |
| background-color: #fafafa; | |
| } | |
| .input-container { | |
| margin-top: 15px; | |
| } | |
| .send-button { | |
| background: linear-gradient(45deg, #667eea, #764ba2) !important; | |
| color: white !important; | |
| border: none !important; | |
| border-radius: 20px !important; | |
| padding: 10px 20px !important; | |
| font-weight: bold !important; | |
| } | |
| .tab-nav { | |
| background-color: #f5f5f5; | |
| border-radius: 10px 10px 0 0; | |
| } | |
| .gradio-container { | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| padding-top: 100px; | |
| } | |
| /* Ensure content doesn't hide under fixed header */ | |
| .main-content { | |
| margin-top: 20px; | |
| } | |
| /* Override Gradio's default container padding */ | |
| .contain { | |
| padding-top: 0 !important; | |
| } | |
| """ | |
| # Custom HTML header | |
| header_html = """ | |
| <div class="header-container"> | |
| <div class="header-title">Agent Rox</div> | |
| <div class="header-subtitle">Multi-Task AI Agent with Multiple MCP</div> | |
| </div> | |
| """ | |
| def chat_function(message, history): | |
| """Simple chat function - replace with your actual logic""" | |
| response = f"Agent Rox received: {message}" | |
| history.append([message, response]) | |
| return history, "" | |
| def task_function(task_input): | |
| """Task processing function""" | |
| return f"Task processed: {task_input}" | |
| def ai_agents_function(agent_config): | |
| """AI agents configuration function""" | |
| return f"AI Agents configured: {agent_config}" | |
| def cookies_function(): | |
| """Cookies management function""" | |
| return "Cookies management interface" | |
| def config_function(config_data): | |
| """Configuration function""" | |
| return f"Configuration updated: {config_data}" | |
| def how_to_use_function(): | |
| """How to use information function""" | |
| return """ | |
| # How to Use Agent Rox | |
| 1. **Chat**: Interact with the AI agent through natural conversation | |
| 2. **Task**: Submit specific tasks for processing | |
| 3. **AI Agents**: Configure multiple AI agents for different purposes | |
| 4. **Cookies**: Manage session cookies and preferences | |
| 5. **Config**: Adjust system configuration settings | |
| 6. **How to Use**: View this help information | |
| """ | |
| # Create the Gradio interface | |
| with gr.Blocks(css=custom_css, title="Agent Rox", theme=gr.themes.Soft()) as demo: | |
| # Custom header | |
| gr.HTML(header_html) | |
| # Main content wrapper | |
| with gr.Column(elem_classes=["main-content"]): | |
| # Main tabs | |
| with gr.Tabs(): | |
| # Chat Tab | |
| with gr.Tab("chat"): | |
| with gr.Column(): | |
| chatbot = gr.Chatbot( | |
| value=[], | |
| elem_classes=["chat-container"], | |
| height=400, | |
| show_label=False | |
| ) | |
| with gr.Row(elem_classes=["input-container"]): | |
| with gr.Column(scale=4): | |
| msg_input = gr.Textbox( | |
| placeholder="types your message", | |
| show_label=False, | |
| container=False | |
| ) | |
| with gr.Column(scale=1): | |
| send_btn = gr.Button("Send", elem_classes=["send-button"]) | |
| # Chat functionality | |
| def respond(message, chat_history): | |
| bot_message = f"Agent Rox: I received your message '{message}'. How can I help you today?" | |
| chat_history.append([message, bot_message]) | |
| return chat_history, "" | |
| send_btn.click(respond, [msg_input, chatbot], [chatbot, msg_input]) | |
| msg_input.submit(respond, [msg_input, chatbot], [chatbot, msg_input]) | |
| # Task Tab | |
| with gr.Tab("task"): | |
| with gr.Column(): | |
| gr.Markdown("## Task Management") | |
| task_input = gr.Textbox( | |
| label="Enter Task", | |
| placeholder="Describe the task you want Agent Rox to perform...", | |
| lines=4 | |
| ) | |
| task_btn = gr.Button("Process Task") | |
| task_output = gr.Textbox(label="Task Result", interactive=False) | |
| task_btn.click(task_function, inputs=task_input, outputs=task_output) | |
| # AI Agents Tab | |
| with gr.Tab("ai agents"): | |
| with gr.Column(): | |
| gr.Markdown("## AI Agents Configuration") | |
| agent_name = gr.Textbox(label="Agent Name", placeholder="Enter agent name...") | |
| agent_type = gr.Dropdown( | |
| choices=["GPT-4", "Claude", "Gemini", "Custom"], | |
| label="Agent Type" | |
| ) | |
| agent_config = gr.Textbox( | |
| label="Configuration", | |
| placeholder="Enter agent configuration...", | |
| lines=3 | |
| ) | |
| config_btn = gr.Button("Configure Agent") | |
| agent_output = gr.Textbox(label="Configuration Result", interactive=False) | |
| config_btn.click( | |
| lambda name, type_val, config: f"Agent '{name}' of type '{type_val}' configured with: {config}", | |
| inputs=[agent_name, agent_type, agent_config], | |
| outputs=agent_output | |
| ) | |
| # Cookies Tab | |
| with gr.Tab("cookies"): | |
| with gr.Column(): | |
| gr.Markdown("## Cookies Management") | |
| gr.Markdown("Manage your session cookies and preferences here.") | |
| cookies_info = gr.Textbox( | |
| label="Current Cookies", | |
| value="Session cookies are active", | |
| interactive=False | |
| ) | |
| clear_cookies_btn = gr.Button("Clear Cookies") | |
| cookies_status = gr.Textbox(label="Status", interactive=False) | |
| clear_cookies_btn.click( | |
| lambda: "Cookies cleared successfully", | |
| outputs=cookies_status | |
| ) | |
| # Config Tab | |
| with gr.Tab("config"): | |
| with gr.Column(): | |
| gr.Markdown("## System Configuration") | |
| api_key = gr.Textbox( | |
| label="API Key", | |
| placeholder="Enter your API key...", | |
| type="password" | |
| ) | |
| model_selection = gr.Dropdown( | |
| choices=["GPT-4", "GPT-3.5", "Claude-3", "Gemini-Pro"], | |
| label="Default Model", | |
| value="GPT-4" | |
| ) | |
| temperature = gr.Slider( | |
| minimum=0.0, | |
| maximum=2.0, | |
| value=0.7, | |
| step=0.1, | |
| label="Temperature" | |
| ) | |
| save_config_btn = gr.Button("Save Configuration") | |
| config_status = gr.Textbox(label="Configuration Status", interactive=False) | |
| save_config_btn.click( | |
| lambda key, model, temp: f"Configuration saved - Model: {model}, Temperature: {temp}", | |
| inputs=[api_key, model_selection, temperature], | |
| outputs=config_status | |
| ) | |
| # How to Use Tab | |
| with gr.Tab("how to use"): | |
| gr.Markdown(how_to_use_function()) | |
| # Launch the interface | |
| if __name__ == "__main__": | |
| demo.launch( | |
| server_name="0.0.0.0", | |
| server_port=7860, | |
| share=False, | |
| debug=True | |
| ) |