🤖 Deploy atari_env environment - 2025-10-21 02:05:10

Dockerfile

@@ -4,38 +4,14 @@
 # This source code is licensed under the BSD-style license found in the
 # LICENSE file in the root directory of this source tree.
 
-# Multi-stage build: First stage builds the base image
-FROM python:3.11-slim as base-builder
-
-# Install system dependencies
-RUN apt-get update && apt-get install -y --no-install-recommends \
-    curl \
-    && rm -rf /var/lib/apt/lists/*
-
-# Install Python dependencies that all environments need
-RUN pip install --no-cache-dir \
-    fastapi>=0.104.0 \
-    "uvicorn[standard]>=0.24.0" \
-    requests>=2.25.0 \
-    wsproto>=1.0.0
-
-# Set working directory
-WORKDIR /app
-
-# Default environment variables
-ENV PYTHONPATH=/app/src
-ENV PYTHONUNBUFFERED=1
-
-# Second stage: Use the built base image and add environment-specific dependencies
-FROM base-builder
-
+# Use the specified openenv-base image
+FROM openenv-base:sha-7dd8148
 # Install ALE-specific dependencies
 RUN pip install --no-cache-dir \
     gymnasium>=0.29.0 \
     ale-py>=0.8.0 \
     numpy>=1.24.0
 
-
 # Copy only what's needed for this environment
 COPY src/core/ /app/src/core/
 COPY src/envs/atari_env/ /app/src/envs/atari_env/

src/core/env_server/http_server.py

@@ -163,20 +163,22 @@ def create_app(
     env: Environment,
     action_cls: Type[Action],
     observation_cls: Type[Observation],
+    env_name: Optional[str] = None,
 ) -> Any:
     """
-    Create a FastAPI application with web interface enabled for Hugging Face deployments.
+    Create a FastAPI application with or without web interface.
     
-    This function checks for the ENABLE_WEB_INTERFACE environment variable to determine
-    whether to enable the web interface. 
+    This function creates a FastAPI app with the web interface enabled by default,
+    including README integration for better user experience.
     
     Args:
         env: The Environment instance to serve
         action_cls: The Action subclass this environment expects
         observation_cls: The Observation subclass this environment returns
+        env_name: Optional environment name for README loading
         
     Returns:
-        FastAPI application instance with or without web interface based on environment
+        FastAPI application instance with or without web interface and README integration
     """
     # Check if web interface should be enabled
     # This can be controlled via environment variable or build argument
@@ -187,7 +189,7 @@ def create_app(
     if enable_web:
         # Import web interface only when needed
         from .web_interface import create_web_interface_app
-        return create_web_interface_app(env, action_cls, observation_cls)
+        return create_web_interface_app(env, action_cls, observation_cls, env_name)
     else:
         # Use standard FastAPI app without web interface
         return create_fastapi_app(env, action_cls, observation_cls)

src/core/env_server/types.py

@@ -43,3 +43,15 @@ class CodeExecResult:
     stdout: str
     stderr: str
     exit_code: int
+
+
+@dataclass
+class EnvironmentMetadata:
+    """Metadata about an environment for documentation and UI purposes."""
+    
+    name: str
+    description: str
+    readme_content: Optional[str] = None
+    version: Optional[str] = None
+    author: Optional[str] = None
+    documentation_url: Optional[str] = None

src/core/env_server/web_interface.py

@@ -25,7 +25,77 @@ from fastapi.staticfiles import StaticFiles
 from pydantic import BaseModel
 
 from .interfaces import Environment
-from .types import Action, Observation, State
+from .types import Action, Observation, State, EnvironmentMetadata
+
+
+def load_environment_metadata(env: Environment, env_name: Optional[str] = None) -> EnvironmentMetadata:
+    """
+    Load environment metadata including README content.
+    
+    Args:
+        env: The environment instance
+        env_name: Optional environment name for README file lookup
+        
+    Returns:
+        EnvironmentMetadata with loaded information
+    """
+    # Try to get metadata from environment if it has a method for it
+    if hasattr(env, 'get_metadata'):
+        return env.get_metadata()
+    
+    # Default metadata
+    metadata = EnvironmentMetadata(
+        name=env_name or env.__class__.__name__,
+        description=f"{env.__class__.__name__} environment",
+        version="1.0.0"
+    )
+    
+    # Try to load README from file system
+    readme_content = _load_readme_from_filesystem(env_name)
+    if readme_content:
+        metadata.readme_content = readme_content
+    
+    return metadata
+
+
+def _load_readme_from_filesystem(env_name: Optional[str]) -> Optional[str]:
+    """
+    Load README content from the filesystem.
+    
+    Tries multiple locations:
+    1. Container filesystem: /app/README.md
+    2. Local development: src/envs/{env_name}/README.md
+    3. Environment variable: ENV_README_PATH
+    """
+    import os
+    from pathlib import Path
+    
+    # Try container filesystem first
+    container_readme = Path("/app/README.md")
+    if container_readme.exists():
+        try:
+            return container_readme.read_text(encoding='utf-8')
+        except Exception:
+            pass
+    
+    # Try environment variable path
+    custom_path = os.environ.get("ENV_README_PATH")
+    if custom_path and Path(custom_path).exists():
+        try:
+            return Path(custom_path).read_text(encoding='utf-8')
+        except Exception:
+            pass
+    
+    # Try local development path
+    if env_name:
+        local_readme = Path(f"src/envs/{env_name}/README.md")
+        if local_readme.exists():
+            try:
+                return local_readme.read_text(encoding='utf-8')
+            except Exception:
+                pass
+    
+    return None
 
 
 @dataclass
@@ -57,10 +127,15 @@ class WebInterfaceManager:
         env: Environment,
         action_cls: Type[Action],
         observation_cls: Type[Observation],
+        metadata: Optional[EnvironmentMetadata] = None,
     ):
         self.env = env
         self.action_cls = action_cls
         self.observation_cls = observation_cls
+        self.metadata = metadata or EnvironmentMetadata(
+            name=env.__class__.__name__,
+            description=f"{env.__class__.__name__} environment"
+        )
         self.episode_state = EpisodeState(
             episode_id=None,
             step_count=0,
@@ -168,7 +243,36 @@ class WebInterfaceManager:
     def _deserialize_action(self, action_data: Dict[str, Any]) -> Action:
         """Convert JSON dict to Action instance."""
         metadata = action_data.pop("metadata", {})
-        action = self.action_cls(**action_data)
+        
+        # Handle tensor fields that come from JSON as lists
+        processed_data = {}
+        for key, value in action_data.items():
+            if key == "tokens" and isinstance(value, (list, str)):
+                # Convert list or string to tensor
+                if isinstance(value, str):
+                    # If it's a string, try to parse it as a list of numbers
+                    try:
+                        import json
+                        value = json.loads(value)
+                    except:
+                        # If parsing fails, treat as empty list
+                        value = []
+                if isinstance(value, list):
+                    import torch
+                    processed_data[key] = torch.tensor(value, dtype=torch.long)
+                else:
+                    processed_data[key] = value
+            elif key == "action_id" and isinstance(value, str):
+                # Convert action_id from string to int
+                try:
+                    processed_data[key] = int(value)
+                except ValueError:
+                    # If conversion fails, keep original value
+                    processed_data[key] = value
+            else:
+                processed_data[key] = value
+        
+        action = self.action_cls(**processed_data)
         action.metadata = metadata
         return action
 
@@ -177,6 +281,7 @@ def create_web_interface_app(
     env: Environment,
     action_cls: Type[Action],
     observation_cls: Type[Observation],
+    env_name: Optional[str] = None,
 ) -> FastAPI:
     """
     Create a FastAPI application with web interface for the given environment.
@@ -185,6 +290,7 @@ def create_web_interface_app(
         env: The Environment instance to serve
         action_cls: The Action subclass this environment expects
         observation_cls: The Observation subclass this environment returns
+        env_name: Optional environment name for README loading
         
     Returns:
         FastAPI application instance with web interface
@@ -194,14 +300,22 @@ def create_web_interface_app(
     # Create the base environment app
     app = create_fastapi_app(env, action_cls, observation_cls)
     
+    # Load environment metadata
+    metadata = load_environment_metadata(env, env_name)
+    
     # Create web interface manager
-    web_manager = WebInterfaceManager(env, action_cls, observation_cls)
+    web_manager = WebInterfaceManager(env, action_cls, observation_cls, metadata)
     
     # Add web interface routes
     @app.get("/web", response_class=HTMLResponse)
     async def web_interface():
         """Serve the web interface."""
-        return get_web_interface_html(action_cls)
+        return get_web_interface_html(action_cls, web_manager.metadata)
+    
+    @app.get("/web/metadata")
+    async def web_metadata():
+        """Get environment metadata."""
+        return asdict(web_manager.metadata)
     
     @app.websocket("/ws")
     async def websocket_endpoint(websocket: WebSocket):
@@ -222,7 +336,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")
@@ -233,31 +355,19 @@ def create_web_interface_app(
     return app
 
 
-def get_web_interface_html(action_cls: Type[Action]) -> str:
+def get_web_interface_html(action_cls: Type[Action], metadata: Optional[EnvironmentMetadata] = None) -> str:
     """Generate the HTML for the web interface."""
     
-    # Get action fields for dynamic form generation
-    action_fields = []
+    # 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 != 'metadata':
-                field_type = field_info.type
-                if field_type == str:
-                    input_type = "text"
-                elif field_type == int:
-                    input_type = "number"
-                elif field_type == float:
-                    input_type = "number"
-                elif field_type == bool:
-                    input_type = "checkbox"
-                else:
-                    input_type = "text"
-                
-                action_fields.append({
-                    'name': field_name,
-                    'type': input_type,
-                    'required': field_info.default is field_info.default_factory
-                })
+            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 with enhanced metadata
+    action_fields = _extract_action_fields(action_cls)
     
     return f"""
 <!DOCTYPE html>
@@ -476,6 +586,307 @@ 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);
+        }}
+        
+        /* Instructions Section Styles */
+        .instructions-section {{
+            background: white;
+            border: 1px solid #e0e0e0;
+            border-radius: 8px;
+            padding: 20px;
+            margin-bottom: 20px;
+        }}
+        
+        .instructions-header {{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+        }}
+        
+        .instructions-title {{
+            font-size: 18px;
+            font-weight: 600;
+            color: #333;
+            margin: 0;
+        }}
+        
+        .instructions-toggle {{
+            background: #f8f9fa;
+            border: 1px solid #dee2e6;
+            border-radius: 4px;
+            padding: 5px 10px;
+            cursor: pointer;
+            font-size: 12px;
+            color: #6c757d;
+        }}
+        
+        .instructions-toggle:hover {{
+            background: #e9ecef;
+        }}
+        
+        .instructions-content {{
+            display: none;
+            max-height: 400px;
+            overflow-y: auto;
+            border-top: 1px solid #e0e0e0;
+            padding-top: 15px;
+        }}
+        
+        .instructions-content.expanded {{
+            display: block;
+        }}
+        
+        .instructions-content h1,
+        .instructions-content h2,
+        .instructions-content h3 {{
+            color: #333;
+            margin-top: 20px;
+            margin-bottom: 10px;
+        }}
+        
+        .instructions-content h1 {{
+            font-size: 24px;
+            border-bottom: 2px solid #007bff;
+            padding-bottom: 10px;
+        }}
+        
+        .instructions-content h2 {{
+            font-size: 20px;
+        }}
+        
+        .instructions-content h3 {{
+            font-size: 16px;
+        }}
+        
+        .instructions-content p {{
+            margin-bottom: 10px;
+            line-height: 1.6;
+        }}
+        
+        .instructions-content code {{
+            background: #f8f9fa;
+            padding: 2px 4px;
+            border-radius: 3px;
+            font-family: monospace;
+            font-size: 14px;
+        }}
+        
+        .instructions-content pre {{
+            background: #f8f9fa;
+            border: 1px solid #e9ecef;
+            border-radius: 4px;
+            padding: 15px;
+            overflow-x: auto;
+            margin: 10px 0;
+        }}
+        
+        .instructions-content pre code {{
+            background: none;
+            padding: 0;
+        }}
+        
+        .instructions-content ul,
+        .instructions-content ol {{
+            margin: 10px 0;
+            padding-left: 20px;
+        }}
+        
+        .instructions-content li {{
+            margin-bottom: 5px;
+        }}
+        
+        .instructions-content table {{
+            border-collapse: collapse;
+            width: 100%;
+            margin: 15px 0;
+        }}
+        
+        .instructions-content th,
+        .instructions-content td {{
+            border: 1px solid #dee2e6;
+            padding: 8px 12px;
+            text-align: left;
+        }}
+        
+        .instructions-content th {{
+            background: #f8f9fa;
+            font-weight: 600;
+        }}
+        
+        /* Enhanced Form Styles */
+        .help-text {{
+            display: block;
+            margin-top: 5px;
+            font-size: 12px;
+            color: #6c757d;
+            font-style: italic;
+        }}
+        
+        .form-group label {{
+            font-weight: 500;
+            color: #333;
+            margin-bottom: 5px;
+        }}
+        
+        .form-group select {{
+            width: 100%;
+            padding: 8px 12px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            font-size: 14px;
+            background-color: white;
+        }}
+        
+        .form-group select:focus {{
+            outline: none;
+            border-color: #007bff;
+            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+        }}
+        
+        .form-group textarea {{
+            width: 100%;
+            padding: 8px 12px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            font-size: 14px;
+            font-family: inherit;
+            resize: vertical;
+        }}
+        
+        .form-group textarea:focus {{
+            outline: none;
+            border-color: #007bff;
+            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+        }}
+        
+        .form-group input[type="number"] {{
+            width: 100%;
+            padding: 8px 12px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            font-size: 14px;
+        }}
+        
+        .form-group input[type="number"]:focus {{
+            outline: none;
+            border-color: #007bff;
+            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+        }}
+        
+        .form-group input[type="text"]:focus {{
+            outline: none;
+            border-color: #007bff;
+            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+        }}
+        
+        .required-indicator {{
+            color: #dc3545;
+            font-weight: bold;
+        }}
+        
+        .form-group .field-description {{
+            font-size: 11px;
+            color: #666;
+            margin-top: 2px;
+            font-style: italic;
+        }}
     </style>
 </head>
 <body>
@@ -487,14 +898,11 @@ 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>
+                <!-- Instructions Section -->
+                {_generate_instructions_section(metadata)}
+                
+                <!-- Action Form or Chat Interface -->
+                {_generate_action_interface(action_fields, is_chat_env)}
                 
                 <!-- Control Buttons -->
                 <div style="margin-bottom: 20px;">
@@ -594,11 +1002,43 @@ 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();
-                }});
+                // Instructions toggle
+                const instructionsToggle = document.getElementById('instructions-toggle');
+                const instructionsContent = document.getElementById('instructions-content');
+                if (instructionsToggle && instructionsContent) {{
+                    instructionsToggle.addEventListener('click', () => {{
+                        instructionsContent.classList.toggle('expanded');
+                        instructionsToggle.textContent = instructionsContent.classList.contains('expanded') 
+                            ? 'Hide Instructions' : 'Show Instructions';
+                    }});
+                }}
+                
+                // 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', () => {{
@@ -611,6 +1051,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 = {{}};
@@ -618,7 +1113,17 @@ def get_web_interface_html(action_cls: Type[Action]) -> str:
                 // Collect form data
                 for (const [key, value] of formData.entries()) {{
                     if (value !== '') {{
-                        action[key] = value;
+                        // Handle tensor fields (tokens) - convert comma-separated string to array
+                        if (key === 'tokens') {{
+                            try {{
+                                action[key] = value.split(',').map(x => parseInt(x.trim())).filter(x => !isNaN(x));
+                            }} catch (e) {{
+                                console.error('Error parsing tokens:', e);
+                                action[key] = [];
+                            }}
+                        }} else {{
+                            action[key] = value;
+                        }}
                     }}
                 }}
                 
@@ -682,6 +1187,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';
@@ -690,14 +1198,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
@@ -718,6 +1231,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
@@ -730,35 +1262,352 @@ 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_instructions_section(metadata: Optional[EnvironmentMetadata]) -> str:
+    """Generate the instructions section with environment documentation."""
+    if not metadata or not metadata.readme_content:
+        return ''
+    
+    # Convert markdown to HTML (basic conversion)
+    import re
+    html_content = _markdown_to_html(metadata.readme_content)
+    
+    return f'''
+                <!-- Instructions Section -->
+                <div class="instructions-section">
+                    <div class="instructions-header">
+                        <h3 class="instructions-title">{metadata.name}</h3>
+                        <button class="instructions-toggle" id="instructions-toggle">Show Instructions</button>
+                    </div>
+                    <div class="instructions-content" id="instructions-content">
+                        <div class="instructions-readme">
+                            {html_content}
+                        </div>
+                    </div>
+                </div>
+    '''
+
+
+def _extract_action_fields(action_cls: Type[Action]) -> List[Dict[str, Any]]:
+    """Extract enhanced field metadata from Action class for form generation."""
+    import typing
+    from typing import get_origin, get_args
+    
+    action_fields = []
+    if not hasattr(action_cls, '__dataclass_fields__'):
+        return action_fields
+    
+    for field_name, field_info in action_cls.__dataclass_fields__.items():
+        if field_name == 'metadata':
+            continue
+            
+        field_type = field_info.type
+        field_metadata = _extract_field_metadata(field_name, field_info)
+        
+        # Determine input type based on field type
+        input_type = _determine_input_type(field_type)
+        
+        # Check if field is required
+        is_required = field_info.default is field_info.default_factory
+        
+        action_fields.append({
+            'name': field_name,
+            'type': input_type,
+            'required': is_required,
+            'description': field_metadata.get('description', ''),
+            'default_value': field_metadata.get('default_value'),
+            'choices': field_metadata.get('choices', []),
+            'min_value': field_metadata.get('min_value'),
+            'max_value': field_metadata.get('max_value'),
+            'placeholder': field_metadata.get('placeholder', ''),
+            'help_text': field_metadata.get('help_text', ''),
+        })
+    
+    return action_fields
+
+
+def _extract_field_metadata(field_name: str, field_info) -> Dict[str, Any]:
+    """Extract metadata from dataclass field including docstring and type hints."""
+    import typing
+    from typing import get_origin, get_args, Literal, Union, Optional
+    
+    metadata = {}
+    
+    # Extract description from field docstring or annotation
+    if hasattr(field_info, 'metadata') and field_info.metadata:
+        # Check for custom metadata
+        for meta in field_info.metadata:
+            if isinstance(meta, dict):
+                metadata.update(meta)
+    
+    # Extract type information
+    field_type = field_info.type
+    origin = get_origin(field_type)
+    
+    # Handle Literal types for dropdown choices
+    if origin is Literal:
+        args = get_args(field_type)
+        metadata['choices'] = list(args)
+    
+    # Handle Optional types
+    if origin is Union:
+        args = get_args(field_type)
+        if len(args) == 2 and type(None) in args:
+            # This is Optional[SomeType]
+            non_none_type = args[0] if args[1] is type(None) else args[1]
+            metadata['optional'] = True
+            # Recursively check the non-None type for choices
+            if get_origin(non_none_type) is Literal:
+                metadata['choices'] = list(get_args(non_none_type))
+        else:
+            # Regular Union type
+            metadata['choices'] = [str(arg) for arg in args if arg is not type(None)]
+    
+    # Handle numeric constraints
+    if field_type in (int, float):
+        # Check for common constraint patterns in field name
+        if 'count' in field_name.lower() or 'num' in field_name.lower():
+            metadata['min_value'] = 0
+        if 'id' in field_name.lower():
+            metadata['min_value'] = 0
+    
+    # Generate placeholder text
+    if 'message' in field_name.lower():
+        metadata['placeholder'] = f'Enter {field_name.replace("_", " ")}...'
+    elif 'code' in field_name.lower():
+        metadata['placeholder'] = 'Enter Python code here...'
+    elif 'tokens' in field_name.lower():
+        metadata['placeholder'] = 'Enter comma-separated token IDs (e.g., 1,2,3,4,5)'
+    else:
+        metadata['placeholder'] = f'Enter {field_name.replace("_", " ")}...'
+    
+    # Generate help text based on field name and type
+    if 'action_id' in field_name.lower():
+        metadata['help_text'] = 'The action ID to execute in the environment'
+    elif 'game_name' in field_name.lower():
+        metadata['help_text'] = 'Name of the game or environment'
+    elif 'tokens' in field_name.lower():
+        metadata['help_text'] = 'Token IDs as a comma-separated list of integers'
+    elif 'code' in field_name.lower():
+        metadata['help_text'] = 'Python code to execute in the environment'
+    elif 'message' in field_name.lower():
+        metadata['help_text'] = 'Text message to send'
+    
+    return metadata
+
+
+def _determine_input_type(field_type) -> str:
+    """Determine the appropriate HTML input type for a field type."""
+    import typing
+    from typing import get_origin, get_args, Literal, Union
+    
+    # Handle direct types
+    if field_type == str:
+        return "text"
+    elif field_type == int:
+        return "number"
+    elif field_type == float:
+        return "number"
+    elif field_type == bool:
+        return "checkbox"
+    
+    # Handle complex types
+    origin = get_origin(field_type)
+    
+    if origin is Literal:
+        return "select"
+    elif origin is Union:
+        args = get_args(field_type)
+        if len(args) == 2 and type(None) in args:
+            # Optional type - use the non-None type
+            non_none_type = args[0] if args[1] is type(None) else args[1]
+            return _determine_input_type(non_none_type)
+        elif all(isinstance(arg, str) for arg in args if arg is not type(None)):
+            return "select"
+        else:
+            return "text"
+    elif hasattr(field_type, '__name__') and 'Tensor' in field_type.__name__:
+        return "tensor"
+    else:
+        return "text"
+
+
+def _markdown_to_html(markdown: str) -> str:
+    """Convert basic markdown to HTML for README display."""
+    import html
+    import re
+    
+    # Escape HTML first
+    html_content = html.escape(markdown)
+    
+    # Convert headers
+    html_content = re.sub(r'^# (.*?)$', r'<h1>\1</h1>', html_content, flags=re.MULTILINE)
+    html_content = re.sub(r'^## (.*?)$', r'<h2>\1</h2>', html_content, flags=re.MULTILINE)
+    html_content = re.sub(r'^### (.*?)$', r'<h3>\1</h3>', html_content, flags=re.MULTILINE)
+    
+    # Convert code blocks
+    html_content = re.sub(r'```(.*?)\n(.*?)\n```', r'<pre><code>\2</code></pre>', html_content, flags=re.DOTALL)
+    html_content = re.sub(r'`([^`]+)`', r'<code>\1</code>', html_content)
+    
+    # Convert bold and italic
+    html_content = re.sub(r'\*\*(.*?)\*\*', r'<strong>\1</strong>', html_content)
+    html_content = re.sub(r'\*(.*?)\*', r'<em>\1</em>', html_content)
+    
+    # Convert lists
+    html_content = re.sub(r'^- (.*?)$', r'<li>\1</li>', html_content, flags=re.MULTILINE)
+    html_content = re.sub(r'(<li>.*</li>)', r'<ul>\1</ul>', html_content, flags=re.DOTALL)
+    
+    # Convert line breaks
+    html_content = html_content.replace('\n', '<br>')
+    
+    return html_content
+
+
+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."""
+    """Generate HTML form fields for action input with enhanced metadata."""
     if not action_fields:
         return '<p>No action fields available</p>'
     
     fields_html = []
     for field in action_fields:
-        if field['type'] == 'checkbox':
-            fields_html.append(f'''
-                <div class="form-group">
-                    <label>
-                        <input type="checkbox" name="{field['name']}" value="true">
-                        {field['name']}
-                    </label>
-                </div>
-            ''')
-        elif field['type'] == 'text' and 'message' in field['name'].lower():
-            fields_html.append(f'''
-                <div class="form-group">
-                    <label for="{field['name']}">{field['name']}:</label>
-                    <textarea name="{field['name']}" id="{field['name']}" rows="3" placeholder="Enter {field['name']}..."></textarea>
-                </div>
-            ''')
-        else:
-            fields_html.append(f'''
-                <div class="form-group">
-                    <label for="{field['name']}">{field['name']}:</label>
-                    <input type="{field['type']}" name="{field['name']}" id="{field['name']}" placeholder="Enter {field['name']}..." {"required" if field['required'] else ""}>
-                </div>
-            ''')
+        field_html = _generate_single_field(field)
+        fields_html.append(field_html)
     
     return '\n'.join(fields_html)
+
+
+def _generate_single_field(field: Dict[str, Any]) -> str:
+    """Generate HTML for a single form field with enhanced metadata."""
+    field_name = field['name']
+    field_type = field['type']
+    required = field['required']
+    placeholder = field.get('placeholder', '')
+    help_text = field.get('help_text', '')
+    choices = field.get('choices', [])
+    min_value = field.get('min_value')
+    max_value = field.get('max_value')
+    default_value = field.get('default_value')
+    
+    # Build label with required indicator
+    label_text = field_name.replace('_', ' ').title()
+    if required:
+        label_text += ' <span style="color: red;">*</span>'
+    
+    # Build input attributes
+    input_attrs = []
+    if required:
+        input_attrs.append('required')
+    if placeholder:
+        input_attrs.append(f'placeholder="{placeholder}"')
+    if min_value is not None:
+        input_attrs.append(f'min="{min_value}"')
+    if max_value is not None:
+        input_attrs.append(f'max="{max_value}"')
+    if default_value is not None:
+        input_attrs.append(f'value="{default_value}"')
+    
+    attrs_str = ' '.join(input_attrs)
+    
+    if field_type == 'checkbox':
+        return f'''
+            <div class="form-group">
+                <label>
+                    <input type="checkbox" name="{field_name}" value="true" {attrs_str}>
+                    {label_text}
+                </label>
+                {f'<small class="help-text">{help_text}</small>' if help_text else ''}
+            </div>
+        '''
+    
+    elif field_type == 'select':
+        options_html = []
+        if not required:
+            options_html.append(f'<option value="">-- Select {label_text} --</option>')
+        
+        for choice in choices:
+            selected = 'selected' if str(choice) == str(default_value) else ''
+            options_html.append(f'<option value="{choice}" {selected}>{choice}</option>')
+        
+        return f'''
+            <div class="form-group">
+                <label for="{field_name}">{label_text}:</label>
+                <select name="{field_name}" id="{field_name}" {attrs_str}>
+                    {''.join(options_html)}
+                </select>
+                {f'<small class="help-text">{help_text}</small>' if help_text else ''}
+            </div>
+        '''
+    
+    elif field_type == 'tensor':
+        return f'''
+            <div class="form-group">
+                <label for="{field_name}">{label_text} (comma-separated integers):</label>
+                <input type="text" name="{field_name}" id="{field_name}" {attrs_str}>
+                <small class="help-text">{help_text or 'Enter token IDs as comma-separated integers (e.g., 1,2,3,4,5)'}</small>
+            </div>
+        '''
+    
+    elif field_type == 'text' and ('message' in field_name.lower() or 'code' in field_name.lower()):
+        return f'''
+            <div class="form-group">
+                <label for="{field_name}">{label_text}:</label>
+                <textarea name="{field_name}" id="{field_name}" rows="3" {attrs_str}></textarea>
+                {f'<small class="help-text">{help_text}</small>' if help_text else ''}
+            </div>
+        '''
+    
+    else:
+        return f'''
+            <div class="form-group">
+                <label for="{field_name}">{label_text}:</label>
+                <input type="{field_type}" name="{field_name}" id="{field_name}" {attrs_str}>
+                {f'<small class="help-text">{help_text}</small>' if help_text else ''}
+            </div>
+        '''

src/envs/atari_env/server/Dockerfile

@@ -9,7 +9,7 @@
 #
 # CI/CD build: docker build --build-arg BASE_IMAGE=ghcr.io/meta-pytorch/openenv-base:latest \
 #              -f src/envs/atari_env/server/Dockerfile -t atari-env:latest .
-ARG BASE_IMAGE=envtorch-base:latest
+ARG BASE_IMAGE=openenv-base:latest
 FROM ${BASE_IMAGE}
 
 # Install ALE-specific dependencies
@@ -25,6 +25,9 @@ COPY src/core/ /app/src/core/
 # Copy Atari environment code
 COPY src/envs/atari_env/ /app/src/envs/atari_env/
 
+# Copy README for web interface documentation
+COPY src/envs/atari_env/README.md /app/README.md
+
 # Atari-specific environment variables (can be overridden at runtime)
 ENV ATARI_GAME=pong
 ENV ATARI_OBS_TYPE=rgb

src/envs/atari_env/server/app.py

@@ -63,8 +63,8 @@ env = AtariEnvironment(
     frameskip=frameskip,
 )
 
-# Create the FastAPI app with routes
-app = create_app(env, AtariAction, AtariObservation)
+# Create the FastAPI app with web interface and README integration
+app = create_app(env, AtariAction, AtariObservation, env_name="atari_env")
 
 
 if __name__ == "__main__":