🤖 Deploy chat_env environment - 2025-10-19 23:03:44

src/core/env_server/web_interface.py

@@ -244,7 +244,15 @@ def create_web_interface_app(
     @app.post("/web/step")
     async def web_step(request: Dict[str, Any]):
         """Step endpoint for web interface."""
-        action_data = request.get("action", {})
+        # Check if this is a message-based request (chat environment)
+        if "message" in request:
+            message = request["message"]
+            # Convert message to action using the environment's message_to_action method
+            action = web_manager.env.message_to_action(message)
+            action_data = {"tokens": action.tokens.tolist()}
+        else:
+            action_data = request.get("action", {})
+        
         return await web_manager.step_environment(action_data)
     
     @app.get("/web/state")
@@ -258,6 +266,14 @@ def create_web_interface_app(
 def get_web_interface_html(action_cls: Type[Action]) -> str:
     """Generate the HTML for the web interface."""
     
+    # Check if this is a chat environment by looking for tokens field
+    is_chat_env = False
+    if hasattr(action_cls, '__dataclass_fields__'):
+        for field_name, field_info in action_cls.__dataclass_fields__.items():
+            if field_name == 'tokens' and hasattr(field_info.type, '__name__') and 'Tensor' in field_info.type.__name__:
+                is_chat_env = True
+                break
+    
     # Get action fields for dynamic form generation
     action_fields = []
     if hasattr(action_cls, '__dataclass_fields__'):
@@ -500,6 +516,103 @@ def get_web_interface_html(action_cls: Type[Action]) -> str:
             max-height: 200px;
             overflow-y: auto;
         }}
+        
+        /* Chat Interface Styles */
+        .chat-interface {{
+            background: white;
+            border: 1px solid #e0e0e0;
+            border-radius: 8px;
+            padding: 20px;
+            margin-bottom: 20px;
+        }}
+        
+        .chat-messages {{
+            background: #f8f9fa;
+            border: 1px solid #e0e0e0;
+            border-radius: 8px;
+            padding: 15px;
+            margin-bottom: 15px;
+            max-height: 400px;
+            overflow-y: auto;
+        }}
+        
+        .chat-message {{
+            margin-bottom: 15px;
+            padding: 10px;
+            border-radius: 8px;
+        }}
+        
+        .chat-message:last-child {{
+            margin-bottom: 0;
+        }}
+        
+        .chat-message.user {{
+            background: #e3f2fd;
+            margin-left: 20px;
+        }}
+        
+        .chat-message.assistant {{
+            background: #f3e5f5;
+            margin-right: 20px;
+        }}
+        
+        .chat-message.system {{
+            background: #e8f5e8;
+            font-style: italic;
+        }}
+        
+        .message-role {{
+            font-weight: 600;
+            font-size: 12px;
+            color: #666;
+            margin-bottom: 5px;
+        }}
+        
+        .message-content {{
+            font-size: 14px;
+            line-height: 1.4;
+        }}
+        
+        .chat-input-container {{
+            border-top: 1px solid #e0e0e0;
+            padding-top: 15px;
+        }}
+        
+        .role-selector {{
+            margin-bottom: 10px;
+        }}
+        
+        .role-selector label {{
+            font-weight: 500;
+            margin-right: 10px;
+        }}
+        
+        .role-selector select {{
+            padding: 5px 10px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }}
+        
+        .message-input {{
+            display: flex;
+            gap: 10px;
+            align-items: flex-end;
+        }}
+        
+        .message-input textarea {{
+            flex: 1;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            resize: vertical;
+            font-family: inherit;
+        }}
+        
+        .message-input textarea:focus {{
+            outline: none;
+            border-color: #007bff;
+            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+        }}
     </style>
 </head>
 <body>
@@ -511,14 +624,8 @@ def get_web_interface_html(action_cls: Type[Action]) -> str:
                 HumanAgent Interface
             </div>
             <div class="pane-content">
-                <!-- Action Form -->
-                <div class="action-form">
-                    <h3>Take Action</h3>
-                    <form id="action-form">
-                        {_generate_action_form_fields(action_fields)}
-                        <button type="submit" class="btn" id="step-btn">Step</button>
-                    </form>
-                </div>
+                <!-- Action Form or Chat Interface -->
+                {_generate_action_interface(action_fields, is_chat_env)}
                 
                 <!-- Control Buttons -->
                 <div style="margin-bottom: 20px;">
@@ -618,11 +725,32 @@ def get_web_interface_html(action_cls: Type[Action]) -> str:
             }}
             
             setupEventListeners() {{
-                // Action form submission
-                document.getElementById('action-form').addEventListener('submit', (e) => {{
-                    e.preventDefault();
-                    this.submitAction();
-                }});
+                // Check if this is a chat environment
+                const isChatEnv = document.getElementById('chat-messages') !== null;
+                
+                if (isChatEnv) {{
+                    // Chat environment event listeners
+                    document.getElementById('send-message-btn').addEventListener('click', () => {{
+                        this.sendMessage();
+                    }});
+                    
+                    // Send message on Enter (but allow Shift+Enter for new lines)
+                    document.getElementById('message-input').addEventListener('keydown', (e) => {{
+                        if (e.key === 'Enter' && !e.shiftKey) {{
+                            e.preventDefault();
+                            this.sendMessage();
+                        }}
+                    }});
+                }} else {{
+                    // Traditional action form submission
+                    const actionForm = document.getElementById('action-form');
+                    if (actionForm) {{
+                        actionForm.addEventListener('submit', (e) => {{
+                            e.preventDefault();
+                            this.submitAction();
+                        }});
+                    }}
+                }}
                 
                 // Reset button
                 document.getElementById('reset-btn').addEventListener('click', () => {{
@@ -635,6 +763,61 @@ def get_web_interface_html(action_cls: Type[Action]) -> str:
                 }});
             }}
             
+            async sendMessage() {{
+                const messageInput = document.getElementById('message-input');
+                const roleSelect = document.getElementById('message-role');
+                const message = messageInput.value.trim();
+                const role = roleSelect.value;
+                
+                if (!message) {{
+                    return;
+                }}
+                
+                // Add message to chat display immediately
+                this.addMessageToChat(role, message);
+                
+                // Clear input
+                messageInput.value = '';
+                
+                try {{
+                    // Send message to server to convert to action and step
+                    const response = await fetch('/web/step', {{
+                        method: 'POST',
+                        headers: {{ 'Content-Type': 'application/json' }},
+                        body: JSON.stringify({{ 
+                            message: {{
+                                role: role,
+                                content: message
+                            }}
+                        }})
+                    }});
+                    
+                    if (!response.ok) {{
+                        throw new Error(`HTTP error! status: ${{response.status}}`);
+                    }}
+                    
+                    const result = await response.json();
+                    console.log('Message sent:', result);
+                }} catch (error) {{
+                    console.error('Error sending message:', error);
+                    alert('Error sending message: ' + error.message);
+                }}
+            }}
+            
+            addMessageToChat(role, content) {{
+                const chatMessages = document.getElementById('chat-messages');
+                const messageDiv = document.createElement('div');
+                messageDiv.className = `chat-message ${{role}}`;
+                
+                messageDiv.innerHTML = `
+                    <div class="message-role">${{role.charAt(0).toUpperCase() + role.slice(1)}}</div>
+                    <div class="message-content">${{content}}</div>
+                `;
+                
+                chatMessages.appendChild(messageDiv);
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+            }}
+            
             async submitAction() {{
                 const formData = new FormData(document.getElementById('action-form'));
                 const action = {{}};
@@ -716,6 +899,9 @@ def get_web_interface_html(action_cls: Type[Action]) -> str:
             }}
             
             updateUI(episodeState) {{
+                // Check if this is a chat environment
+                const isChatEnv = document.getElementById('chat-messages') !== null;
+                
                 // Update current state
                 document.getElementById('env-status').textContent = 
                     episodeState.is_reset ? 'Reset' : 'Running';
@@ -724,14 +910,19 @@ def get_web_interface_html(action_cls: Type[Action]) -> str:
                 document.getElementById('step-count').textContent = 
                     episodeState.step_count.toString();
                 
-                // Update current observation
-                const observationDiv = document.getElementById('current-observation');
-                if (episodeState.current_observation) {{
-                    observationDiv.textContent = JSON.stringify(
-                        episodeState.current_observation, null, 2
-                    );
+                if (isChatEnv) {{
+                    // Update chat interface
+                    this.updateChatInterface(episodeState);
                 }} else {{
-                    observationDiv.textContent = 'No observation yet';
+                    // Update traditional observation display
+                    const observationDiv = document.getElementById('current-observation');
+                    if (episodeState.current_observation) {{
+                        observationDiv.textContent = JSON.stringify(
+                            episodeState.current_observation, null, 2
+                        );
+                    }} else {{
+                        observationDiv.textContent = 'No observation yet';
+                    }}
                 }}
                 
                 // Update action logs
@@ -752,6 +943,25 @@ def get_web_interface_html(action_cls: Type[Action]) -> str:
                     `).join('');
                 }}
             }}
+            
+            updateChatInterface(episodeState) {{
+                const chatMessages = document.getElementById('chat-messages');
+                if (!chatMessages) return;
+                
+                // Clear existing messages (except system message)
+                const systemMessage = chatMessages.querySelector('.chat-message.system');
+                chatMessages.innerHTML = '';
+                if (systemMessage) {{
+                    chatMessages.appendChild(systemMessage);
+                }}
+                
+                // Add messages from current observation
+                if (episodeState.current_observation && episodeState.current_observation.messages) {{
+                    episodeState.current_observation.messages.forEach(msg => {{
+                        this.addMessageToChat(msg.role, msg.content);
+                    }});
+                }}
+            }}
         }}
         
         // Initialize the web interface when the page loads
@@ -764,6 +974,54 @@ def get_web_interface_html(action_cls: Type[Action]) -> str:
     """.replace('{_generate_action_form_fields(action_fields)}', _generate_action_form_fields(action_fields))
 
 
+def _generate_action_interface(action_fields: List[Dict[str, Any]], is_chat_env: bool) -> str:
+    """Generate either a chat interface or action form based on environment type."""
+    if is_chat_env:
+        return _generate_chat_interface()
+    else:
+        return _generate_action_form(action_fields)
+
+def _generate_chat_interface() -> str:
+    """Generate a chat-style interface for chat environments."""
+    return '''
+                <!-- Chat Interface -->
+                <div class="chat-interface">
+                    <h3>Chat Interface</h3>
+                    <div class="chat-messages" id="chat-messages">
+                        <div class="chat-message system">
+                            <div class="message-role">System</div>
+                            <div class="message-content">Chat environment ready. Send a message to start the conversation.</div>
+                        </div>
+                    </div>
+                    <div class="chat-input-container">
+                        <div class="role-selector">
+                            <label for="message-role">Role:</label>
+                            <select id="message-role">
+                                <option value="user">User</option>
+                                <option value="assistant">Assistant</option>
+                            </select>
+                        </div>
+                        <div class="message-input">
+                            <textarea id="message-input" placeholder="Type your message here..." rows="3"></textarea>
+                            <button class="btn" id="send-message-btn">Send Message</button>
+                        </div>
+                    </div>
+                </div>
+    '''
+
+def _generate_action_form(action_fields: List[Dict[str, Any]]) -> str:
+    """Generate a traditional action form for non-chat environments."""
+    return f'''
+                <!-- Action Form -->
+                <div class="action-form">
+                    <h3>Take Action</h3>
+                    <form id="action-form">
+                        {_generate_action_form_fields(action_fields)}
+                        <button type="submit" class="btn" id="step-btn">Step</button>
+                    </form>
+                </div>
+    '''
+
 def _generate_action_form_fields(action_fields: List[Dict[str, Any]]) -> str:
     """Generate HTML form fields for action input."""
     if not action_fields: