Initial browser-use RL environment

Dockerfile

@@ -0,0 +1,66 @@
+FROM python:3.12-slim AS builder
+
+WORKDIR /app
+
+# Install system deps for building
+RUN apt-get update && \
+    apt-get install -y --no-install-recommends git curl && \
+    rm -rf /var/lib/apt/lists/*
+
+# Install uv
+RUN curl -LsSf https://astral.sh/uv/install.sh | sh && \
+    mv /root/.local/bin/uv /usr/local/bin/uv && \
+    mv /root/.local/bin/uvx /usr/local/bin/uvx
+
+# Copy project files
+COPY pyproject.toml uv.lock ./
+COPY __init__.py client.py models.py openenv.yaml ./
+COPY server/ ./server/
+COPY mock_sites/ ./mock_sites/
+COPY README.md ./
+
+# Install dependencies
+RUN uv sync --frozen --no-editable || uv sync --no-editable
+
+# Install Playwright Chromium
+RUN /app/.venv/bin/playwright install chromium && \
+    /app/.venv/bin/playwright install-deps chromium
+
+# ── Runtime stage ────────────────────────────────────────────────────
+FROM python:3.12-slim
+
+WORKDIR /app
+
+# Install Chromium runtime dependencies + curl for healthcheck
+RUN apt-get update && \
+    apt-get install -y --no-install-recommends \
+    libnss3 libnspr4 libatk1.0-0 libatk-bridge2.0-0 \
+    libcups2 libdrm2 libdbus-1-3 libxkbcommon0 \
+    libatspi2.0-0 libxcomposite1 libxdamage1 libxfixes3 \
+    libxrandr2 libgbm1 libpango-1.0-0 libcairo2 libasound2 \
+    libwayland-client0 fonts-noto-color-emoji curl && \
+    rm -rf /var/lib/apt/lists/*
+
+# Create non-root user (HF Spaces runs as uid 1000)
+RUN useradd -m -u 1000 appuser
+
+# Copy venv and app code from builder
+COPY --from=builder /app/.venv /app/.venv
+COPY --from=builder /app /app
+COPY --from=builder /root/.cache/ms-playwright /home/appuser/.cache/ms-playwright
+
+# Fix permissions
+RUN chown -R appuser:appuser /app /home/appuser/.cache
+
+ENV PATH="/app/.venv/bin:$PATH"
+ENV PYTHONPATH="/app:$PYTHONPATH"
+ENV PLAYWRIGHT_BROWSERS_PATH="/home/appuser/.cache/ms-playwright"
+
+USER appuser
+
+EXPOSE 7860
+
+HEALTHCHECK --interval=30s --timeout=3s --start-period=15s --retries=3 \
+    CMD curl -f http://localhost:7860/health || exit 1
+
+CMD ["uvicorn", "server.app:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,10 +1,84 @@
----
-title: Dalaal Env
-emoji: 📚
-colorFrom: pink
-colorTo: yellow
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# dalaal-env: Browser-Use RL Environment
+
+An OpenEnv-compatible reinforcement learning environment where agents learn to interact with web pages through an **accessibility tree** interface.
+
+The agent observes a structured text representation of the page (like a screen reader) and takes discrete actions — click, type, scroll, select — to complete browser tasks.
+
+## Architecture
+
+```
+Agent (LLM) ←→ OpenEnv Client ←→ WebSocket ←→ OpenEnv Server ←→ Playwright (headless Chromium)
+```
+
+## Observation Space
+
+The agent sees the page as a numbered accessibility tree:
+
+```
+[1] heading "My Todo List" level=1
+[2] textbox "Add a new todo"
+[3] button "Add"
+[4] checkbox "Complete: Walk the dog" checked=false
+[5] button "Delete: Walk the dog"
+```
+
+## Action Space
+
+| Action | Parameters | Description |
+|--------|-----------|-------------|
+| `click` | `element_id` | Click an element by its tree ID |
+| `type` | `element_id`, `text` | Clear and type text into an input |
+| `select_option` | `element_id`, `text` | Select a dropdown option by label |
+| `press_key` | `key` | Press a keyboard key (Enter, Tab, etc.) |
+| `scroll` | `direction` | Scroll up or down |
+| `go_back` | — | Browser back |
+| `done` | — | Signal task completion |
+
+## Available Tasks
+
+| Task ID | Description | Max Steps |
+|---------|-------------|-----------|
+| `todo_add` | Add "Buy milk" to a todo list | 10 |
+| `todo_add_and_complete` | Add "Buy milk" and mark complete | 15 |
+| `login` | Log in with credentials | 10 |
+| `search_and_click` | Search and click first result | 10 |
+| `add_to_cart` | Add headphones to cart | 10 |
+| `add_to_cart_and_checkout` | Add to cart and checkout | 15 |
+| `fill_registration` | Fill a multi-field registration form | 15 |
+
+## Reward
+
+- **+1.0** on task success (verified by DOM-based success criteria)
+- **-0.01** per step (encourages efficiency)
+- **0.0** on failure or timeout
+- Final score clamped to [0, 1]
+
+## Quick Start
+
+```bash
+# Install
+uv sync
+
+# Install Playwright browser
+uv run playwright install chromium
+
+# Run server
+uv run uvicorn server.app:app --host 0.0.0.0 --port 8000
+
+# Run inference
+export HF_TOKEN=your_token
+export MODEL_NAME=Qwen/Qwen2.5-72B-Instruct
+uv run python inference.py
+```
+
+## Docker
+
+```bash
+cd server && docker build -t dalaal-env .
+```
+
+## Validation
+
+```bash
+uv run openenv validate
+```

__init__.py

@@ -0,0 +1,10 @@
+"""Dalaal Browser-Use Environment."""
+
+from .client import DalaalEnvEnv
+from .models import DalaalEnvAction, DalaalEnvObservation
+
+__all__ = [
+    "DalaalEnvAction",
+    "DalaalEnvObservation",
+    "DalaalEnvEnv",
+]

client.py

@@ -0,0 +1,69 @@
+"""Dalaal Browser-Use Environment Client."""
+
+from typing import Any, Dict, Optional
+
+from openenv.core import EnvClient
+from openenv.core.client_types import StepResult
+from openenv.core.env_server.types import State
+
+from .models import DalaalEnvAction, DalaalEnvObservation
+
+
+class DalaalEnvEnv(EnvClient[DalaalEnvAction, DalaalEnvObservation, State]):
+    """
+    Client for the Dalaal Browser-Use Environment.
+
+    This client maintains a persistent WebSocket connection to the environment
+    server, enabling efficient multi-step browser interactions.
+
+    Example:
+        >>> async with DalaalEnvEnv(base_url="http://localhost:8000") as env:
+        ...     result = await env.reset(task="todo_add")
+        ...     print(result.observation.accessibility_tree)
+        ...     result = await env.step(DalaalEnvAction(action_type="click", element_id=3))
+
+    Example with Docker:
+        >>> env = await DalaalEnvEnv.from_docker_image("dalaal-env:latest")
+        >>> result = await env.reset(task="login")
+    """
+
+    def _step_payload(self, action: DalaalEnvAction) -> Dict[str, Any]:
+        """Convert DalaalEnvAction to JSON payload."""
+        payload: Dict[str, Any] = {"action_type": action.action_type}
+        if action.element_id is not None:
+            payload["element_id"] = action.element_id
+        if action.text is not None:
+            payload["text"] = action.text
+        if action.key is not None:
+            payload["key"] = action.key
+        if action.direction is not None:
+            payload["direction"] = action.direction
+        return payload
+
+    def _parse_result(self, payload: Dict) -> StepResult[DalaalEnvObservation]:
+        """Parse server response into StepResult."""
+        obs_data = payload.get("observation", {})
+        observation = DalaalEnvObservation(
+            url=obs_data.get("url", ""),
+            title=obs_data.get("title", ""),
+            accessibility_tree=obs_data.get("accessibility_tree", ""),
+            task_description=obs_data.get("task_description", ""),
+            last_action_error=obs_data.get("last_action_error"),
+            step_count=obs_data.get("step_count", 0),
+            max_steps=obs_data.get("max_steps", 20),
+            done=payload.get("done", False),
+            reward=payload.get("reward"),
+            metadata=obs_data.get("metadata", {}),
+        )
+        return StepResult(
+            observation=observation,
+            reward=payload.get("reward"),
+            done=payload.get("done", False),
+        )
+
+    def _parse_state(self, payload: Dict) -> State:
+        """Parse server response into State."""
+        return State(
+            episode_id=payload.get("episode_id"),
+            step_count=payload.get("step_count", 0),
+        )

inference.py

@@ -0,0 +1,225 @@
+"""
+Inference Script — Dalaal Browser-Use Environment
+===================================
+MANDATORY
+- Before submitting, ensure the following variables are defined in your environment configuration:
+    API_BASE_URL   The API endpoint for the LLM.
+    MODEL_NAME     The model identifier to use for inference.
+    HF_TOKEN       Your Hugging Face / API key.
+    LOCAL_IMAGE_NAME The name of the local image to use for the environment if you are using from_docker_image()
+
+- The inference script must be named `inference.py` and placed in the root directory of the project
+- Participants must use OpenAI Client for all LLM calls using above variables
+
+STDOUT FORMAT
+- The script must emit exactly three line types to stdout, in this order:
+
+    [START] task=<task_name> env=<benchmark> model=<model_name>
+    [STEP]  step=<n> action=<action_str> reward=<0.00> done=<true|false> error=<msg|null>
+    [END]   success=<true|false> steps=<n> score=<score> rewards=<r1,r2,...,rn>
+"""
+
+import asyncio
+import json
+import os
+import textwrap
+from typing import List, Optional
+
+from openai import OpenAI
+
+from dalaal_env import DalaalEnvAction, DalaalEnvEnv
+
+IMAGE_NAME = os.getenv("LOCAL_IMAGE_NAME")
+API_KEY = os.getenv("HF_TOKEN") or os.getenv("API_KEY")
+API_BASE_URL = os.getenv("API_BASE_URL", "https://router.huggingface.co/v1")
+MODEL_NAME = os.getenv("MODEL_NAME", "Qwen/Qwen2.5-72B-Instruct")
+
+TASK_NAME = os.getenv("DALAAL_TASK", "todo_add")
+BENCHMARK = "dalaal_env"
+MAX_STEPS = 15
+TEMPERATURE = 0.0
+MAX_TOKENS = 300
+
+SYSTEM_PROMPT = textwrap.dedent("""\
+    You are a browser automation agent. You interact with web pages by reading
+    an accessibility tree and issuing actions.
+
+    ACCESSIBILITY TREE FORMAT:
+    Each element has an [ID] followed by its role and properties:
+      [1] heading "Page Title"
+      [2] textbox "Search" value=""
+      [3] button "Submit"
+      [4] checkbox "Accept terms" checked=false
+
+    AVAILABLE ACTIONS (respond with exactly one JSON object):
+    - Click an element:       {"action_type": "click", "element_id": <id>}
+    - Type into an element:   {"action_type": "type", "element_id": <id>, "text": "<text>"}
+    - Select a dropdown option: {"action_type": "select_option", "element_id": <id>, "text": "<option label>"}
+    - Press a key:            {"action_type": "press_key", "key": "<key name>"}
+    - Scroll:                 {"action_type": "scroll", "direction": "up" or "down"}
+    - Go back:                {"action_type": "go_back"}
+    - Signal task complete:   {"action_type": "done"}
+
+    RULES:
+    - Respond with ONLY a JSON object. No explanation, no markdown, no extra text.
+    - Use element IDs from the accessibility tree.
+    - When you believe the task is complete, use {"action_type": "done"}.
+    - If you see an error, try a different approach.
+""")
+
+
+def log_start(task: str, env: str, model: str) -> None:
+    print(f"[START] task={task} env={env} model={model}", flush=True)
+
+
+def log_step(step: int, action: str, reward: float, done: bool, error: Optional[str]) -> None:
+    error_val = error if error else "null"
+    done_val = str(done).lower()
+    print(
+        f"[STEP] step={step} action={action} reward={reward:.2f} done={done_val} error={error_val}",
+        flush=True,
+    )
+
+
+def log_end(success: bool, steps: int, score: float, rewards: List[float]) -> None:
+    rewards_str = ",".join(f"{r:.2f}" for r in rewards)
+    print(
+        f"[END] success={str(success).lower()} steps={steps} score={score:.3f} rewards={rewards_str}",
+        flush=True,
+    )
+
+
+def parse_action(text: str) -> DalaalEnvAction:
+    """Parse LLM response into a DalaalEnvAction."""
+    text = text.strip()
+    # Strip markdown code fences if present
+    if text.startswith("```"):
+        lines = text.split("\n")
+        lines = [l for l in lines if not l.startswith("```")]
+        text = "\n".join(lines).strip()
+
+    data = json.loads(text)
+    return DalaalEnvAction(**data)
+
+
+def build_user_prompt(
+    task: str,
+    tree: str,
+    url: str,
+    step: int,
+    max_steps: int,
+    last_error: Optional[str],
+) -> str:
+    parts = [
+        f"TASK: {task}",
+        f"STEP: {step}/{max_steps}",
+        f"URL: {url}",
+    ]
+    if last_error:
+        parts.append(f"LAST ACTION ERROR: {last_error}")
+    parts.append(f"ACCESSIBILITY TREE:\n{tree}")
+    parts.append("Respond with your next action as a JSON object.")
+    return "\n\n".join(parts)
+
+
+def get_action_from_llm(
+    client: OpenAI,
+    task: str,
+    tree: str,
+    url: str,
+    step: int,
+    max_steps: int,
+    last_error: Optional[str],
+) -> DalaalEnvAction:
+    """Call the LLM and parse the response into an action."""
+    user_prompt = build_user_prompt(task, tree, url, step, max_steps, last_error)
+
+    try:
+        completion = client.chat.completions.create(
+            model=MODEL_NAME,
+            messages=[
+                {"role": "system", "content": SYSTEM_PROMPT},
+                {"role": "user", "content": user_prompt},
+            ],
+            temperature=TEMPERATURE,
+            max_tokens=MAX_TOKENS,
+            stream=False,
+        )
+        text = (completion.choices[0].message.content or "").strip()
+        return parse_action(text)
+    except Exception as exc:
+        print(f"[DEBUG] LLM/parse error: {exc}", flush=True)
+        # Fallback: signal done to avoid infinite loops
+        return DalaalEnvAction(action_type="done")
+
+
+async def main() -> None:
+    client = OpenAI(base_url=API_BASE_URL, api_key=API_KEY)
+
+    if IMAGE_NAME:
+        env = await DalaalEnvEnv.from_docker_image(IMAGE_NAME)
+    else:
+        env = DalaalEnvEnv(base_url=os.getenv("DALAAL_ENV_URL", "http://localhost:8000"))
+        await env.connect()
+
+    rewards: List[float] = []
+    steps_taken = 0
+    score = 0.0
+    success = False
+
+    log_start(task=TASK_NAME, env=BENCHMARK, model=MODEL_NAME)
+
+    try:
+        result = await env.reset(task=TASK_NAME)
+        obs = result.observation
+
+        for step in range(1, MAX_STEPS + 1):
+            if result.done:
+                break
+
+            action = get_action_from_llm(
+                client=client,
+                task=obs.task_description,
+                tree=obs.accessibility_tree,
+                url=obs.url,
+                step=step,
+                max_steps=obs.max_steps,
+                last_error=obs.last_action_error,
+            )
+
+            result = await env.step(action)
+            obs = result.observation
+
+            reward = result.reward or 0.0
+            done = result.done
+            error = obs.last_action_error
+
+            rewards.append(reward)
+            steps_taken = step
+
+            action_str = f"{action.action_type}({action.element_id or action.text or action.key or ''})"
+            log_step(step=step, action=action_str, reward=reward, done=done, error=error)
+
+            if done:
+                break
+
+        # Final reward is the last reward (which encodes success)
+        if rewards and rewards[-1] > 0:
+            score = rewards[-1]
+            success = True
+        else:
+            score = 0.0
+            success = False
+
+        score = min(max(score, 0.0), 1.0)
+
+    finally:
+        try:
+            await env.close()
+        except Exception as e:
+            print(f"[DEBUG] env.close() error: {e}", flush=True)
+        log_end(success=success, steps=steps_taken, score=score, rewards=rewards)
+
+
+if __name__ == "__main__":
+    asyncio.run(main())

mock_sites/ecommerce/index.html

@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>ShopEasy - Online Store</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: system-ui, sans-serif; background: #f5f5f5; }
+    header { background: #1a1a2e; color: white; padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; }
+    header h1 { font-size: 22px; }
+    .cart-btn { background: #e94560; padding: 8px 16px; border-radius: 20px; color: white; border: none; cursor: pointer; font-size: 14px; }
+    .products { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; padding: 24px; max-width: 1000px; margin: 0 auto; }
+    .product-card { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
+    .product-card .img-placeholder { height: 160px; background: #e0e0e0; display: flex; align-items: center; justify-content: center; font-size: 48px; }
+    .product-info { padding: 16px; }
+    .product-info h3 { margin-bottom: 8px; }
+    .product-info .price { color: #e94560; font-size: 20px; font-weight: bold; margin-bottom: 12px; }
+    .product-info button { width: 100%; padding: 10px; background: #1a1a2e; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; }
+    .product-info button.added { background: #4CAF50; }
+    #checkout-page { display: none; padding: 40px; text-align: center; }
+    #checkout-page h2 { color: #4CAF50; margin-bottom: 16px; }
+    .cart-summary { display: none; background: white; padding: 20px; margin: 20px auto; max-width: 600px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
+    .cart-summary h2 { margin-bottom: 16px; }
+    .cart-summary .cart-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #eee; }
+    .checkout-btn { padding: 12px 24px; background: #e94560; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; margin-top: 16px; }
+  </style>
+</head>
+<body>
+  <div id="shop-page">
+    <header>
+      <h1>ShopEasy</h1>
+      <button class="cart-btn" onclick="showCart()" aria-label="Shopping Cart">Cart (<span id="cart-count">0</span>)</button>
+    </header>
+
+    <div class="products" id="products">
+      <div class="product-card">
+        <div class="img-placeholder">🎧</div>
+        <div class="product-info">
+          <h3>Wireless Headphones</h3>
+          <div class="price">$79.99</div>
+          <button onclick="addToCart(this, 'Wireless Headphones', 79.99)" aria-label="Add to cart: Wireless Headphones">Add to Cart</button>
+        </div>
+      </div>
+      <div class="product-card">
+        <div class="img-placeholder">⌨️</div>
+        <div class="product-info">
+          <h3>Mechanical Keyboard</h3>
+          <div class="price">$129.99</div>
+          <button onclick="addToCart(this, 'Mechanical Keyboard', 129.99)" aria-label="Add to cart: Mechanical Keyboard">Add to Cart</button>
+        </div>
+      </div>
+      <div class="product-card">
+        <div class="img-placeholder">🖱️</div>
+        <div class="product-info">
+          <h3>Ergonomic Mouse</h3>
+          <div class="price">$49.99</div>
+          <button onclick="addToCart(this, 'Ergonomic Mouse', 49.99)" aria-label="Add to cart: Ergonomic Mouse">Add to Cart</button>
+        </div>
+      </div>
+      <div class="product-card">
+        <div class="img-placeholder">📱</div>
+        <div class="product-info">
+          <h3>Phone Stand</h3>
+          <div class="price">$19.99</div>
+          <button onclick="addToCart(this, 'Phone Stand', 19.99)" aria-label="Add to cart: Phone Stand">Add to Cart</button>
+        </div>
+      </div>
+    </div>
+
+    <div class="cart-summary" id="cart-summary">
+      <h2>Your Cart</h2>
+      <div id="cart-items"></div>
+      <button class="checkout-btn" onclick="checkout()" aria-label="Proceed to Checkout">Proceed to Checkout</button>
+    </div>
+  </div>
+
+  <div id="checkout-page">
+    <h2>Checkout Complete!</h2>
+    <p>Thank you for your order. Your items will be shipped soon.</p>
+  </div>
+
+  <script>
+    const cart = [];
+
+    function addToCart(btn, name, price) {
+      cart.push({ name, price });
+      document.getElementById('cart-count').textContent = cart.length;
+      btn.textContent = 'Added!';
+      btn.classList.add('added');
+      setTimeout(() => {
+        btn.textContent = 'Add to Cart';
+        btn.classList.remove('added');
+      }, 1500);
+    }
+
+    function showCart() {
+      const summary = document.getElementById('cart-summary');
+      if (cart.length === 0) return;
+      summary.style.display = 'block';
+      const itemsHtml = cart.map(item => `
+        <div class="cart-item">
+          <span>${item.name}</span>
+          <span>$${item.price.toFixed(2)}</span>
+        </div>
+      `).join('');
+      const total = cart.reduce((s, i) => s + i.price, 0);
+      document.getElementById('cart-items').innerHTML = itemsHtml + `
+        <div class="cart-item" style="font-weight:bold; border-top: 2px solid #333; margin-top: 8px; padding-top: 8px;">
+          <span>Total</span>
+          <span>$${total.toFixed(2)}</span>
+        </div>
+      `;
+    }
+
+    function checkout() {
+      document.getElementById('shop-page').style.display = 'none';
+      document.getElementById('checkout-page').style.display = 'block';
+    }
+  </script>
+</body>
+</html>

mock_sites/login_form/index.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Login</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: system-ui, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #f0f2f5; }
+    .login-card { background: white; padding: 40px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); width: 100%; max-width: 400px; }
+    h1 { margin-bottom: 24px; color: #333; text-align: center; }
+    .form-group { margin-bottom: 16px; }
+    label { display: block; margin-bottom: 6px; color: #555; font-weight: 500; }
+    input[type="text"], input[type="password"] { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; }
+    button[type="submit"] { width: 100%; padding: 12px; background: #1976D2; color: white; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; margin-top: 8px; }
+    .error { color: #f44336; font-size: 14px; margin-top: 8px; display: none; }
+    #success-message { text-align: center; display: none; }
+    #success-message h2 { color: #4CAF50; margin-bottom: 10px; }
+  </style>
+</head>
+<body>
+  <div class="login-card">
+    <div id="login-form-container">
+      <h1>Sign In</h1>
+      <form onsubmit="handleLogin(event)">
+        <div class="form-group">
+          <label for="username">Username</label>
+          <input type="text" id="username" name="username" placeholder="Enter username" required aria-label="Username">
+        </div>
+        <div class="form-group">
+          <label for="password">Password</label>
+          <input type="password" id="password" name="password" placeholder="Enter password" required aria-label="Password">
+        </div>
+        <div class="error" id="error-msg">Invalid username or password.</div>
+        <button type="submit">Log In</button>
+      </form>
+    </div>
+    <div id="success-message">
+      <h2>Welcome, admin!</h2>
+      <p>You have successfully logged in.</p>
+    </div>
+  </div>
+
+  <script>
+    function handleLogin(e) {
+      e.preventDefault();
+      const user = document.getElementById('username').value;
+      const pass = document.getElementById('password').value;
+
+      if (user === 'admin' && pass === 'secret123') {
+        document.getElementById('login-form-container').style.display = 'none';
+        document.getElementById('success-message').style.display = 'block';
+      } else {
+        document.getElementById('error-msg').style.display = 'block';
+      }
+    }
+  </script>
+</body>
+</html>

mock_sites/registration_form/index.html

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Create Account</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: system-ui, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #f0f2f5; }
+    .card { background: white; padding: 40px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); width: 100%; max-width: 450px; }
+    h1 { margin-bottom: 24px; color: #333; text-align: center; }
+    .form-group { margin-bottom: 16px; }
+    label { display: block; margin-bottom: 6px; color: #555; font-weight: 500; }
+    input[type="text"], input[type="email"], input[type="tel"], select { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; }
+    button[type="submit"] { width: 100%; padding: 12px; background: #4CAF50; color: white; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; margin-top: 8px; }
+    .error { color: #f44336; font-size: 13px; margin-top: 4px; display: none; }
+    #success-message { display: none; text-align: center; }
+    #success-message h2 { color: #4CAF50; margin-bottom: 12px; }
+    #success-message .details { background: #f5f5f5; padding: 16px; border-radius: 4px; text-align: left; margin-top: 16px; }
+    #success-message .details p { margin: 4px 0; }
+  </style>
+</head>
+<body>
+  <div class="card">
+    <div id="form-container">
+      <h1>Create Account</h1>
+      <form onsubmit="handleSubmit(event)">
+        <div class="form-group">
+          <label for="fullname">Full Name</label>
+          <input type="text" id="fullname" name="fullname" placeholder="Enter your full name" required aria-label="Full Name">
+          <div class="error" id="name-error">Please enter your name</div>
+        </div>
+        <div class="form-group">
+          <label for="email">Email Address</label>
+          <input type="email" id="email" name="email" placeholder="Enter your email" required aria-label="Email Address">
+          <div class="error" id="email-error">Please enter a valid email</div>
+        </div>
+        <div class="form-group">
+          <label for="phone">Phone Number</label>
+          <input type="tel" id="phone" name="phone" placeholder="Enter phone number" aria-label="Phone Number">
+        </div>
+        <div class="form-group">
+          <label for="country">Country</label>
+          <select id="country" name="country" required aria-label="Country">
+            <option value="">Select a country</option>
+            <option value="US">United States</option>
+            <option value="UK">United Kingdom</option>
+            <option value="CA">Canada</option>
+            <option value="DE">Germany</option>
+            <option value="IN">India</option>
+            <option value="JP">Japan</option>
+          </select>
+        </div>
+        <button type="submit">Create Account</button>
+      </form>
+    </div>
+    <div id="success-message">
+      <h2>Account Created!</h2>
+      <p>Your account has been successfully created.</p>
+      <div class="details">
+        <p><strong>Name:</strong> <span id="show-name"></span></p>
+        <p><strong>Email:</strong> <span id="show-email"></span></p>
+        <p><strong>Country:</strong> <span id="show-country"></span></p>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    function handleSubmit(e) {
+      e.preventDefault();
+      const name = document.getElementById('fullname').value.trim();
+      const email = document.getElementById('email').value.trim();
+      const country = document.getElementById('country').value;
+
+      let valid = true;
+      if (!name) { document.getElementById('name-error').style.display = 'block'; valid = false; }
+      else { document.getElementById('name-error').style.display = 'none'; }
+      if (!email || !email.includes('@')) { document.getElementById('email-error').style.display = 'block'; valid = false; }
+      else { document.getElementById('email-error').style.display = 'none'; }
+
+      if (!valid || !country) return;
+
+      document.getElementById('show-name').textContent = name;
+      document.getElementById('show-email').textContent = email;
+      document.getElementById('show-country').textContent = document.getElementById('country').options[document.getElementById('country').selectedIndex].text;
+
+      document.getElementById('form-container').style.display = 'none';
+      document.getElementById('success-message').style.display = 'block';
+    }
+  </script>
+</body>
+</html>

mock_sites/search_engine/index.html

@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>SearchIt - Web Search</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: system-ui, sans-serif; background: #fff; }
+    .search-header { padding: 20px; border-bottom: 1px solid #e0e0e0; display: flex; align-items: center; gap: 16px; }
+    .logo { font-size: 24px; font-weight: bold; color: #1a73e8; }
+    .search-bar { display: flex; gap: 8px; flex: 1; max-width: 600px; }
+    .search-bar input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 20px; font-size: 16px; }
+    .search-bar button { padding: 10px 20px; background: #1a73e8; color: white; border: none; border-radius: 20px; cursor: pointer; }
+    .search-home { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 80vh; }
+    .search-home .logo { font-size: 48px; margin-bottom: 24px; }
+    .search-home .search-bar { width: 100%; max-width: 580px; }
+    .search-home .search-bar input { padding: 14px 20px; }
+    .results-page { display: none; }
+    .results { padding: 20px 20px 20px 160px; max-width: 800px; }
+    .result-item { margin-bottom: 24px; }
+    .result-item a { color: #1a0dab; font-size: 18px; text-decoration: none; }
+    .result-item a:hover { text-decoration: underline; }
+    .result-item .url { color: #006621; font-size: 14px; }
+    .result-item .snippet { color: #545454; font-size: 14px; margin-top: 4px; }
+    #result-page { display: none; padding: 40px; }
+    #result-page h1 { margin-bottom: 16px; }
+    #result-page p { line-height: 1.6; color: #333; }
+  </style>
+</head>
+<body>
+  <div id="home-page" class="search-home">
+    <div class="logo">SearchIt</div>
+    <div class="search-bar">
+      <input type="text" id="search-input" placeholder="Search the web..." aria-label="Search">
+      <button onclick="performSearch()" aria-label="Search">Search</button>
+    </div>
+  </div>
+
+  <div id="results-container" class="results-page">
+    <div class="search-header">
+      <div class="logo">SearchIt</div>
+      <div class="search-bar">
+        <input type="text" id="search-input-2" aria-label="Search">
+        <button onclick="performSearch()" aria-label="Search">Search</button>
+      </div>
+    </div>
+    <div class="results" id="results"></div>
+  </div>
+
+  <div id="result-page">
+    <h1 id="article-title"></h1>
+    <p id="article-content"></p>
+  </div>
+
+  <script>
+    const articles = {
+      "machine learning": [
+        { title: "Introduction to Machine Learning - ML Guide", url: "https://mlguide.org/intro", snippet: "Machine learning is a subset of artificial intelligence that enables systems to learn and improve from experience without being explicitly programmed." },
+        { title: "Machine Learning Course - Stanford Online", url: "https://stanford.edu/ml-course", snippet: "Free online machine learning course covering supervised learning, unsupervised learning, and best practices." },
+        { title: "What is Machine Learning? - TechExplained", url: "https://techexplained.com/ml", snippet: "A comprehensive guide to understanding machine learning algorithms, applications, and the future of AI." }
+      ],
+      "default": [
+        { title: "Welcome to the Web - Example", url: "https://example.com", snippet: "This is an example search result for your query." },
+        { title: "Learn More - Wikipedia", url: "https://wikipedia.org", snippet: "Wikipedia is a free online encyclopedia with articles on almost every topic." }
+      ]
+    };
+
+    function performSearch() {
+      const query = (document.getElementById('search-input').value || document.getElementById('search-input-2').value).trim().toLowerCase();
+      if (!query) return;
+
+      document.getElementById('home-page').style.display = 'none';
+      document.getElementById('results-container').style.display = 'block';
+      document.getElementById('search-input-2').value = query;
+
+      const results = articles[query] || articles["default"];
+      const html = results.map((r, i) => `
+        <div class="result-item">
+          <div class="url">${r.url}</div>
+          <a href="#" onclick="openResult('${r.title}', '${r.snippet}'); return false;">${r.title}</a>
+          <div class="snippet">${r.snippet}</div>
+        </div>
+      `).join('');
+      document.getElementById('results').innerHTML = html;
+    }
+
+    function openResult(title, content) {
+      document.getElementById('results-container').style.display = 'none';
+      document.getElementById('result-page').style.display = 'block';
+      document.getElementById('article-title').textContent = title;
+      document.getElementById('article-content').textContent = content;
+    }
+
+    document.getElementById('search-input').addEventListener('keydown', function(e) {
+      if (e.key === 'Enter') performSearch();
+    });
+  </script>
+</body>
+</html>

mock_sites/todo_app/index.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Todo App</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: system-ui, sans-serif; max-width: 600px; margin: 40px auto; padding: 20px; background: #f5f5f5; }
+    h1 { margin-bottom: 20px; color: #333; }
+    .add-form { display: flex; gap: 8px; margin-bottom: 20px; }
+    .add-form input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; }
+    .add-form button { padding: 10px 20px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }
+    .todo-list { list-style: none; }
+    .todo-item { display: flex; align-items: center; gap: 10px; padding: 12px; background: white; margin-bottom: 8px; border-radius: 4px; border: 1px solid #e0e0e0; }
+    .todo-item.completed .todo-text { text-decoration: line-through; color: #999; }
+    .todo-text { flex: 1; font-size: 16px; }
+    .todo-item button { padding: 6px 12px; background: #f44336; color: white; border: none; border-radius: 4px; cursor: pointer; }
+    .todo-item input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; }
+  </style>
+</head>
+<body>
+  <h1>My Todo List</h1>
+  <div class="add-form">
+    <input type="text" id="todo-input" placeholder="Add a new todo..." aria-label="Add a new todo">
+    <button id="add-btn" onclick="addTodo()">Add</button>
+  </div>
+  <ul class="todo-list" id="todo-list" role="list">
+    <li class="todo-item" role="listitem">
+      <input type="checkbox" aria-label="Complete: Walk the dog" onchange="toggleTodo(this)">
+      <span class="todo-text">Walk the dog</span>
+      <button onclick="deleteTodo(this)" aria-label="Delete: Walk the dog">Delete</button>
+    </li>
+    <li class="todo-item" role="listitem">
+      <input type="checkbox" aria-label="Complete: Read a book" onchange="toggleTodo(this)">
+      <span class="todo-text">Read a book</span>
+      <button onclick="deleteTodo(this)" aria-label="Delete: Read a book">Delete</button>
+    </li>
+  </ul>
+
+  <script>
+    function addTodo() {
+      const input = document.getElementById('todo-input');
+      const text = input.value.trim();
+      if (!text) return;
+
+      const li = document.createElement('li');
+      li.className = 'todo-item';
+      li.setAttribute('role', 'listitem');
+      li.innerHTML = `
+        <input type="checkbox" aria-label="Complete: ${text}" onchange="toggleTodo(this)">
+        <span class="todo-text">${text}</span>
+        <button onclick="deleteTodo(this)" aria-label="Delete: ${text}">Delete</button>
+      `;
+      document.getElementById('todo-list').appendChild(li);
+      input.value = '';
+    }
+
+    function toggleTodo(checkbox) {
+      const item = checkbox.closest('.todo-item');
+      item.classList.toggle('completed', checkbox.checked);
+    }
+
+    function deleteTodo(btn) {
+      btn.closest('.todo-item').remove();
+    }
+
+    document.getElementById('todo-input').addEventListener('keydown', function(e) {
+      if (e.key === 'Enter') addTodo();
+    });
+  </script>
+</body>
+</html>

models.py

@@ -0,0 +1,71 @@
+"""
+Data models for the Dalaal Browser-Use Environment.
+
+The dalaal_env environment provides a browser interaction environment
+where agents learn to navigate and interact with web pages using
+an accessibility tree representation.
+"""
+
+from typing import Literal, Optional
+
+from openenv.core.env_server.types import Action, Observation
+from pydantic import Field
+
+
+class DalaalEnvAction(Action):
+    """Action for the Browser-Use environment.
+
+    The agent interacts with the browser by specifying an action type
+    and relevant parameters. Elements are referenced by their ID in
+    the accessibility tree.
+    """
+
+    action_type: Literal[
+        "click",
+        "type",
+        "select_option",
+        "press_key",
+        "scroll",
+        "go_back",
+        "done",
+    ] = Field(..., description="Type of browser action to perform")
+
+    element_id: Optional[int] = Field(
+        default=None,
+        description="ID of the element in the accessibility tree (for click, type, select_option)",
+    )
+    text: Optional[str] = Field(
+        default=None,
+        description="Text to type or option to select",
+    )
+    key: Optional[str] = Field(
+        default=None,
+        description="Key to press (e.g. 'Enter', 'Tab', 'Escape')",
+    )
+    direction: Optional[Literal["up", "down"]] = Field(
+        default=None,
+        description="Scroll direction",
+    )
+
+
+class DalaalEnvObservation(Observation):
+    """Observation from the Browser-Use environment.
+
+    Contains the accessibility tree of the current page, which provides
+    a structured text representation of all interactive elements with
+    assigned IDs that the agent can reference in actions.
+    """
+
+    url: str = Field(default="", description="Current page URL")
+    title: str = Field(default="", description="Current page title")
+    accessibility_tree: str = Field(
+        default="", description="Text accessibility tree with element IDs"
+    )
+    task_description: str = Field(
+        default="", description="Natural language description of the current task"
+    )
+    last_action_error: Optional[str] = Field(
+        default=None, description="Error message from last action, if any"
+    )
+    step_count: int = Field(default=0, description="Current step number")
+    max_steps: int = Field(default=20, description="Maximum steps for this task")

openenv.yaml

@@ -0,0 +1,6 @@
+spec_version: 1
+name: dalaal_env
+type: space
+runtime: fastapi
+app: server.app:app
+port: 8000

pyproject.toml

@@ -0,0 +1,35 @@
+[build-system]
+requires = ["setuptools>=45", "wheel"]
+build-backend = "setuptools.build_meta"
+
+[project]
+name = "openenv-dalaal-env"
+version = "0.1.0"
+description = "Browser-Use RL environment where agents learn to interact with web pages through accessibility tree observations"
+readme = "README.md"
+requires-python = ">=3.10"
+dependencies = [
+    "openenv-core[core]>=0.2.2",
+    "playwright>=1.40.0",
+    "fastapi>=0.115.0",
+    "uvicorn>=0.24.0",
+    "openai>=2.30.0",
+    "huggingface-hub>=1.9.0",
+]
+
+[project.optional-dependencies]
+dev = [
+    "pytest>=8.0.0",
+    "pytest-asyncio>=0.23.0",
+]
+
+[project.scripts]
+server = "dalaal_env.server.app:main"
+
+[tool.setuptools]
+include-package-data = true
+packages = ["dalaal_env", "dalaal_env.server"]
+package-dir = { "dalaal_env" = ".", "dalaal_env.server" = "server" }
+
+[tool.setuptools.package-data]
+"dalaal_env" = ["mock_sites/**/*.html"]

server/Dockerfile

@@ -0,0 +1,69 @@
+ARG BASE_IMAGE=ghcr.io/meta-pytorch/openenv-base:latest
+FROM ${BASE_IMAGE} AS builder
+
+WORKDIR /app
+
+RUN apt-get update && \
+    apt-get install -y --no-install-recommends git && \
+    rm -rf /var/lib/apt/lists/*
+
+ARG BUILD_MODE=in-repo
+ARG ENV_NAME=dalaal_env
+
+COPY . /app/env
+
+WORKDIR /app/env
+
+RUN if ! command -v uv >/dev/null 2>&1; then \
+        curl -LsSf https://astral.sh/uv/install.sh | sh && \
+        mv /root/.local/bin/uv /usr/local/bin/uv && \
+        mv /root/.local/bin/uvx /usr/local/bin/uvx; \
+    fi
+
+RUN --mount=type=cache,target=/root/.cache/uv \
+    if [ -f uv.lock ]; then \
+        uv sync --frozen --no-install-project --no-editable; \
+    else \
+        uv sync --no-install-project --no-editable; \
+    fi
+
+RUN --mount=type=cache,target=/root/.cache/uv \
+    if [ -f uv.lock ]; then \
+        uv sync --frozen --no-editable; \
+    else \
+        uv sync --no-editable; \
+    fi
+
+# Install Playwright and Chromium browser
+RUN /app/env/.venv/bin/playwright install chromium && \
+    /app/env/.venv/bin/playwright install-deps chromium
+
+# Final runtime stage
+FROM ${BASE_IMAGE}
+
+WORKDIR /app
+
+# Install Chromium runtime dependencies
+RUN apt-get update && \
+    apt-get install -y --no-install-recommends \
+    libnss3 libnspr4 libatk1.0-0 libatk-bridge2.0-0 \
+    libcups2 libdrm2 libdbus-1-3 libxkbcommon0 \
+    libatspi2.0-0 libxcomposite1 libxdamage1 libxfixes3 \
+    libxrandr2 libgbm1 libpango-1.0-0 libcairo2 libasound2 \
+    libwayland-client0 fonts-noto-color-emoji curl && \
+    rm -rf /var/lib/apt/lists/*
+
+# Copy the virtual environment from builder (includes Playwright browsers)
+COPY --from=builder /app/env/.venv /app/.venv
+COPY --from=builder /root/.cache/ms-playwright /root/.cache/ms-playwright
+
+# Copy the environment code
+COPY --from=builder /app/env /app/env
+
+ENV PATH="/app/.venv/bin:$PATH"
+ENV PYTHONPATH="/app/env:$PYTHONPATH"
+
+HEALTHCHECK --interval=30s --timeout=3s --start-period=10s --retries=3 \
+    CMD curl -f http://localhost:8000/health || exit 1
+
+CMD ["sh", "-c", "cd /app/env && uvicorn server.app:app --host 0.0.0.0 --port 8000"]

server/__init__.py

@@ -0,0 +1,5 @@
+"""Dalaal Browser-Use environment server components."""
+
+from .dalaal_env_environment import DalaalEnvEnvironment
+
+__all__ = ["DalaalEnvEnvironment"]

server/accessibility.py

@@ -0,0 +1,132 @@
+"""
+Accessibility tree extraction from Playwright pages using Chrome DevTools Protocol.
+
+Converts the browser DOM into a numbered text representation that LLM agents
+can reason about and reference by element ID.
+
+Example output:
+    [1] heading "My Todo List"
+    [2] textbox "Add a new todo..." value=""
+    [3] button "Add"
+    [4] checkbox "Buy groceries" checked=false
+"""
+
+from __future__ import annotations
+
+from dataclasses import dataclass, field
+from typing import Optional
+
+from playwright.async_api import Page
+
+
+SKIP_ROLES = frozenset({
+    "none", "generic", "RootWebArea", "LineBreak",
+    "InlineTextBox", "StaticText", "paragraph",
+    "MenuListPopup", "group",
+})
+
+INTERACTIVE_ROLES = frozenset({
+    "button", "link", "textbox", "checkbox", "radio",
+    "combobox", "searchbox", "option", "tab", "menuitem",
+    "switch", "slider", "spinbutton",
+})
+
+
+@dataclass
+class AccessibilityNode:
+    """A node in the parsed accessibility tree."""
+    id: int
+    role: str
+    name: str
+    value: Optional[str] = None
+    checked: Optional[str] = None
+    selected: Optional[bool] = None
+    expanded: Optional[bool] = None
+    disabled: Optional[bool] = None
+    focused: Optional[bool] = None
+    level: Optional[int] = None
+
+
+class AccessibilityTree:
+    """Manages accessibility tree extraction and element ID mapping."""
+
+    def __init__(self):
+        self._nodes: dict[int, AccessibilityNode] = {}
+        self._counter = 0
+
+    def clear(self):
+        self._nodes.clear()
+        self._counter = 0
+
+    def get_node(self, element_id: int) -> Optional[AccessibilityNode]:
+        return self._nodes.get(element_id)
+
+    async def extract(self, page: Page) -> str:
+        """Extract accessibility tree from page via CDP and return text representation."""
+        self.clear()
+
+        cdp = await page.context.new_cdp_session(page)
+        try:
+            result = await cdp.send("Accessibility.getFullAXTree")
+        finally:
+            await cdp.detach()
+
+        raw_nodes = result.get("nodes", [])
+        lines = []
+
+        for raw in raw_nodes:
+            role = raw.get("role", {}).get("value", "")
+            if role in SKIP_ROLES:
+                continue
+
+            name = raw.get("name", {}).get("value", "")
+            props = {}
+            for p in raw.get("properties", []):
+                val = p.get("value", {})
+                if "value" in val:
+                    props[p["name"]] = val["value"]
+
+            # Skip nodes with no name and non-interactive roles
+            if not name and role not in INTERACTIVE_ROLES:
+                continue
+
+            self._counter += 1
+            node = AccessibilityNode(
+                id=self._counter,
+                role=role,
+                name=name,
+                value=props.get("value"),
+                checked=props.get("checked"),
+                selected=props.get("selected"),
+                expanded=props.get("expanded"),
+                disabled=props.get("disabled"),
+                focused=props.get("focused"),
+                level=props.get("level"),
+            )
+            self._nodes[node.id] = node
+            lines.append(self._render_node(node))
+
+        return "\n".join(lines) if lines else "[empty page]"
+
+    def _render_node(self, node: AccessibilityNode) -> str:
+        """Render a single node as text."""
+        parts = [f"[{node.id}] {node.role}"]
+
+        if node.name:
+            parts.append(f'"{node.name}"')
+        if node.value is not None:
+            parts.append(f'value="{node.value}"')
+        if node.checked is not None:
+            parts.append(f"checked={node.checked}")
+        if node.selected is not None:
+            parts.append(f"selected={str(node.selected).lower()}")
+        if node.expanded is not None:
+            parts.append(f"expanded={str(node.expanded).lower()}")
+        if node.disabled is not None and node.disabled:
+            parts.append("disabled")
+        if node.focused is not None and node.focused:
+            parts.append("focused")
+        if node.level is not None:
+            parts.append(f"level={node.level}")
+
+        return " ".join(parts)

server/app.py

@@ -0,0 +1,48 @@
+"""
+FastAPI application for the Dalaal Browser-Use Environment.
+
+Endpoints:
+    - POST /reset: Reset the environment (pass task name in body)
+    - POST /step: Execute a browser action
+    - GET /state: Get current environment state
+    - GET /schema: Get action/observation schemas
+    - WS /ws: WebSocket endpoint for persistent sessions
+"""
+
+try:
+    from openenv.core.env_server.http_server import create_app
+except Exception as e:
+    raise ImportError(
+        "openenv is required. Install with: uv sync"
+    ) from e
+
+try:
+    from ..models import DalaalEnvAction, DalaalEnvObservation
+    from .dalaal_env_environment import DalaalEnvEnvironment
+except (ImportError, SystemError):
+    try:
+        from models import DalaalEnvAction, DalaalEnvObservation
+        from server.dalaal_env_environment import DalaalEnvEnvironment
+    except ImportError:
+        from dalaal_env.models import DalaalEnvAction, DalaalEnvObservation
+        from dalaal_env.server.dalaal_env_environment import DalaalEnvEnvironment
+
+
+app = create_app(
+    DalaalEnvEnvironment,
+    DalaalEnvAction,
+    DalaalEnvObservation,
+    env_name="dalaal_env",
+    max_concurrent_envs=1,
+)
+
+
+def main(host: str = "0.0.0.0", port: int = 8000):
+    """Entry point for direct execution."""
+    import uvicorn
+
+    uvicorn.run(app, host=host, port=port)
+
+
+if __name__ == "__main__":
+    main()

server/dalaal_env_environment.py

@@ -0,0 +1,286 @@
+"""
+Dalaal Browser-Use Environment Implementation.
+
+An RL environment where agents interact with web pages through
+an accessibility-tree interface, learning to perform browser tasks
+like form filling, navigation, and multi-step workflows.
+"""
+
+from __future__ import annotations
+
+import asyncio
+import os
+from typing import Optional
+from uuid import uuid4
+
+from openenv.core.env_server.interfaces import Environment
+from openenv.core.env_server.types import State
+from playwright.async_api import async_playwright, Browser, BrowserContext, Page
+
+try:
+    from ..models import DalaalEnvAction, DalaalEnvObservation
+except (ImportError, SystemError):
+    try:
+        from models import DalaalEnvAction, DalaalEnvObservation
+    except ImportError:
+        from dalaal_env.models import DalaalEnvAction, DalaalEnvObservation
+
+from .accessibility import AccessibilityTree
+from .tasks import Task, get_task, list_tasks, get_mock_sites_dir
+
+# Step penalty to encourage efficiency
+STEP_PENALTY = -0.01
+
+
+class DalaalEnvEnvironment(Environment):
+    """
+    Browser-Use RL environment powered by Playwright.
+
+    The agent observes the page through an accessibility tree and takes
+    discrete actions (click, type, scroll, etc.) to complete tasks.
+
+    Each episode presents a task on a bundled mock website. The agent
+    receives +1.0 reward for task success (minus step penalties) and
+    0.0 for failure/timeout.
+    """
+
+    SUPPORTS_CONCURRENT_SESSIONS: bool = True
+
+    def __init__(self):
+        self._state = State(episode_id=str(uuid4()), step_count=0)
+        self._playwright = None
+        self._browser: Optional[Browser] = None
+        self._context: Optional[BrowserContext] = None
+        self._page: Optional[Page] = None
+        self._a11y = AccessibilityTree()
+        self._task: Optional[Task] = None
+        self._last_error: Optional[str] = None
+        self._total_reward: float = 0.0
+        self._mock_sites_dir = get_mock_sites_dir()
+
+    async def _ensure_browser(self):
+        """Launch browser if not already running."""
+        if self._browser is None:
+            self._playwright = await async_playwright().start()
+            self._browser = await self._playwright.chromium.launch(
+                headless=True,
+                args=["--no-sandbox", "--disable-dev-shm-usage"],
+            )
+
+    async def _new_page(self) -> Page:
+        """Create a fresh browser context and page."""
+        if self._context:
+            await self._context.close()
+        self._context = await self._browser.new_context(
+            viewport={"width": 1280, "height": 720},
+        )
+        self._page = await self._context.new_page()
+        return self._page
+
+    async def _build_observation(self, done: bool = False, reward: float = 0.0) -> DalaalEnvObservation:
+        """Build observation from current page state."""
+        tree_text = await self._a11y.extract(self._page)
+        url = self._page.url if self._page else ""
+        title = await self._page.title() if self._page else ""
+
+        return DalaalEnvObservation(
+            url=url,
+            title=title,
+            accessibility_tree=tree_text,
+            task_description=self._task.description if self._task else "",
+            last_action_error=self._last_error,
+            step_count=self._state.step_count,
+            max_steps=self._task.max_steps if self._task else 20,
+            done=done,
+            reward=reward,
+        )
+
+    async def reset_async(self, seed=None, episode_id=None, **kwargs) -> DalaalEnvObservation:
+        """Reset environment with a new task.
+
+        Args:
+            seed: Random seed (unused currently)
+            episode_id: Custom episode ID
+            **kwargs: Must include 'task' with a valid task ID.
+                      Defaults to 'todo_add' if not specified.
+        """
+        task_id = kwargs.get("task", "todo_add")
+        self._task = get_task(task_id)
+        self._state = State(
+            episode_id=episode_id or str(uuid4()),
+            step_count=0,
+        )
+        self._last_error = None
+        self._total_reward = 0.0
+
+        await self._ensure_browser()
+        page = await self._new_page()
+
+        # Load the mock site
+        site_path = os.path.join(self._mock_sites_dir, self._task.site_file)
+        await page.goto(f"file://{site_path}")
+        await page.wait_for_load_state("domcontentloaded")
+
+        return await self._build_observation()
+
+    def reset(self, seed=None, episode_id=None, **kwargs) -> DalaalEnvObservation:
+        """Sync reset - delegates to async version."""
+        return asyncio.get_event_loop().run_until_complete(
+            self.reset_async(seed=seed, episode_id=episode_id, **kwargs)
+        )
+
+    async def step_async(self, action: DalaalEnvAction, timeout_s=30, **kwargs) -> DalaalEnvObservation:
+        """Execute a browser action and return the new observation."""
+        self._state.step_count += 1
+        self._last_error = None
+
+        try:
+            await self._execute_action(action)
+        except Exception as e:
+            self._last_error = str(e)
+
+        # Small wait for page to settle after action
+        await asyncio.sleep(0.3)
+
+        # Check if agent signaled done
+        if action.action_type == "done":
+            success = await self._check_success()
+            reward = (1.0 + self._total_reward) if success else 0.0
+            reward = max(0.0, min(1.0, reward))
+            return await self._build_observation(done=True, reward=reward)
+
+        # Check step limit
+        if self._state.step_count >= self._task.max_steps:
+            success = await self._check_success()
+            reward = (1.0 + self._total_reward) if success else 0.0
+            reward = max(0.0, min(1.0, reward))
+            return await self._build_observation(done=True, reward=reward)
+
+        # Normal step: small penalty
+        self._total_reward += STEP_PENALTY
+        return await self._build_observation(done=False, reward=STEP_PENALTY)
+
+    def step(self, action: DalaalEnvAction, timeout_s=30, **kwargs) -> DalaalEnvObservation:
+        """Sync step - delegates to async version."""
+        return asyncio.get_event_loop().run_until_complete(
+            self.step_async(action, timeout_s=timeout_s, **kwargs)
+        )
+
+    async def _execute_action(self, action: DalaalEnvAction):
+        """Execute the given action on the browser page."""
+        page = self._page
+        if page is None:
+            raise RuntimeError("No page open. Call reset() first.")
+
+        if action.action_type == "click":
+            await self._action_click(page, action)
+        elif action.action_type == "type":
+            await self._action_type(page, action)
+        elif action.action_type == "select_option":
+            await self._action_select(page, action)
+        elif action.action_type == "press_key":
+            await self._action_press_key(page, action)
+        elif action.action_type == "scroll":
+            await self._action_scroll(page, action)
+        elif action.action_type == "go_back":
+            await page.go_back()
+        elif action.action_type == "done":
+            pass  # handled in step_async
+
+    async def _action_click(self, page: Page, action: DalaalEnvAction):
+        if action.element_id is None:
+            raise ValueError("click requires element_id")
+        node = self._a11y.get_node(action.element_id)
+        if node is None:
+            raise ValueError(f"No element with id={action.element_id}")
+        locator = self._get_locator(page, node)
+        await locator.click(timeout=5000)
+
+    async def _action_type(self, page: Page, action: DalaalEnvAction):
+        if action.element_id is None:
+            raise ValueError("type requires element_id")
+        if action.text is None:
+            raise ValueError("type requires text")
+        node = self._a11y.get_node(action.element_id)
+        if node is None:
+            raise ValueError(f"No element with id={action.element_id}")
+        locator = self._get_locator(page, node)
+        await locator.click(timeout=5000)
+        await locator.fill(action.text, timeout=5000)
+
+    async def _action_select(self, page: Page, action: DalaalEnvAction):
+        if action.element_id is None:
+            raise ValueError("select_option requires element_id")
+        if action.text is None:
+            raise ValueError("select_option requires text")
+        node = self._a11y.get_node(action.element_id)
+        if node is None:
+            raise ValueError(f"No element with id={action.element_id}")
+        locator = self._get_locator(page, node)
+        await locator.select_option(label=action.text, timeout=5000)
+
+    async def _action_press_key(self, page: Page, action: DalaalEnvAction):
+        key = action.key or "Enter"
+        await page.keyboard.press(key)
+
+    async def _action_scroll(self, page: Page, action: DalaalEnvAction):
+        direction = action.direction or "down"
+        delta = -300 if direction == "up" else 300
+        await page.mouse.wheel(0, delta)
+
+    def _get_locator(self, page: Page, node):
+        """Get a Playwright locator for an accessibility tree node."""
+        role = node.role
+        name = node.name
+
+        # Map accessibility roles to Playwright's get_by_role
+        role_map = {
+            "button": "button",
+            "link": "link",
+            "textbox": "textbox",
+            "checkbox": "checkbox",
+            "radio": "radio",
+            "combobox": "combobox",
+            "heading": "heading",
+            "listitem": "listitem",
+            "option": "option",
+            "tab": "tab",
+            "menuitem": "menuitem",
+            "searchbox": "searchbox",
+        }
+
+        playwright_role = role_map.get(role)
+        if playwright_role and name:
+            return page.get_by_role(playwright_role, name=name)
+        elif playwright_role:
+            return page.get_by_role(playwright_role)
+        elif name:
+            return page.get_by_text(name, exact=True)
+        else:
+            raise ValueError(f"Cannot locate element: role={role}, name={name}")
+
+    async def _check_success(self) -> bool:
+        """Check if the current task's success criteria are met."""
+        if self._task is None or self._page is None:
+            return False
+        try:
+            result = await self._page.evaluate(self._task.success_check_js)
+            return bool(result)
+        except Exception:
+            return False
+
+    async def close(self):
+        """Clean up browser resources."""
+        if self._context:
+            await self._context.close()
+            self._context = None
+        if self._browser:
+            await self._browser.close()
+            self._browser = None
+        if self._playwright:
+            await self._playwright.stop()
+            self._playwright = None
+
+    @property
+    def state(self) -> State:
+        return self._state

server/requirements.txt

@@ -0,0 +1,4 @@
+openenv[core]>=0.2.0
+fastapi>=0.115.0
+uvicorn>=0.24.0
+playwright>=1.40.0

server/tasks.py

@@ -0,0 +1,147 @@
+"""
+Task registry for the Dalaal Browser-Use Environment.
+
+Each task defines a goal, a mock site to load, and JavaScript-based
+success criteria that are evaluated in the browser context.
+"""
+
+from __future__ import annotations
+
+import os
+from dataclasses import dataclass
+
+
+@dataclass
+class Task:
+    """A browser task with success criteria."""
+
+    id: str
+    description: str
+    site_file: str  # relative path from mock_sites/ to HTML file
+    max_steps: int
+    success_check_js: str  # JS expression returning true/false
+
+
+# Resolve the mock_sites directory relative to this file
+_MOCK_SITES_DIR = os.path.join(
+    os.path.dirname(os.path.dirname(os.path.abspath(__file__))),
+    "mock_sites",
+)
+
+
+def get_mock_sites_dir() -> str:
+    return _MOCK_SITES_DIR
+
+
+TASKS: dict[str, Task] = {}
+
+
+def _register(task: Task):
+    TASKS[task.id] = task
+
+
+# ── Todo App Tasks ──────────────────────────────────────────────────
+
+_register(Task(
+    id="todo_add",
+    description='Add a new todo item called "Buy milk" to the todo list.',
+    site_file="todo_app/index.html",
+    max_steps=10,
+    success_check_js="""
+        (() => {
+            const items = document.querySelectorAll('.todo-text');
+            return Array.from(items).some(el => el.textContent.trim().toLowerCase() === 'buy milk');
+        })()
+    """,
+))
+
+_register(Task(
+    id="todo_add_and_complete",
+    description='Add a todo item called "Buy milk" and mark it as completed.',
+    site_file="todo_app/index.html",
+    max_steps=15,
+    success_check_js="""
+        (() => {
+            const items = document.querySelectorAll('.todo-item.completed');
+            return Array.from(items).some(el => el.querySelector('.todo-text')?.textContent.trim().toLowerCase() === 'buy milk');
+        })()
+    """,
+))
+
+# ── Login Form Tasks ────────────────────────────────────────────────
+
+_register(Task(
+    id="login",
+    description='Log in with username "admin" and password "secret123".',
+    site_file="login_form/index.html",
+    max_steps=10,
+    success_check_js="""
+        document.getElementById('success-message') !== null &&
+        document.getElementById('success-message').style.display !== 'none'
+    """,
+))
+
+# ── Search Engine Tasks ─────────────────────────────────────────────
+
+_register(Task(
+    id="search_and_click",
+    description='Search for "machine learning" and click on the first result link.',
+    site_file="search_engine/index.html",
+    max_steps=10,
+    success_check_js="""
+        document.getElementById('result-page') !== null &&
+        document.getElementById('result-page').style.display !== 'none'
+    """,
+))
+
+# ── E-commerce Tasks ────────────────────────────────────────────────
+
+_register(Task(
+    id="add_to_cart",
+    description='Add the "Wireless Headphones" product to your shopping cart.',
+    site_file="ecommerce/index.html",
+    max_steps=10,
+    success_check_js="""
+        (() => {
+            const cartCount = document.getElementById('cart-count');
+            return cartCount && parseInt(cartCount.textContent) > 0;
+        })()
+    """,
+))
+
+_register(Task(
+    id="add_to_cart_and_checkout",
+    description='Add the "Wireless Headphones" to your cart and proceed to checkout.',
+    site_file="ecommerce/index.html",
+    max_steps=15,
+    success_check_js="""
+        document.getElementById('checkout-page') !== null &&
+        document.getElementById('checkout-page').style.display !== 'none'
+    """,
+))
+
+# ── Registration Form Tasks ─────────────────────────────────────────
+
+_register(Task(
+    id="fill_registration",
+    description='Fill the registration form with: Name "John Doe", Email "john@example.com", select country "United States", and submit.',
+    site_file="registration_form/index.html",
+    max_steps=15,
+    success_check_js="""
+        document.getElementById('success-message') !== null &&
+        document.getElementById('success-message').style.display !== 'none'
+    """,
+))
+
+
+def get_task(task_id: str) -> Task:
+    """Get a task by ID. Raises KeyError if not found."""
+    if task_id not in TASKS:
+        available = ", ".join(sorted(TASKS.keys()))
+        raise KeyError(f"Unknown task '{task_id}'. Available tasks: {available}")
+    return TASKS[task_id]
+
+
+def list_tasks() -> list[str]:
+    """Return all available task IDs."""
+    return sorted(TASKS.keys())