Dockerized App (#4)

* ADD generate_instruction

* CHG update_trace_step exception handling

* ADD frontend objets

* ADD Dockerfile

* ADD getApiBaseUrl

* ADD dynamic nb of backend worker

* FIX pre-commit

.dockerignore

@@ -0,0 +1,72 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+.pytest_cache/
+.coverage
+htmlcov/
+.tox/
+.venv
+venv/
+ENV/
+env/
+
+# Node
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+cua2-front/dist/
+cua2-front/build/
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+.DS_Store
+
+# Git
+.git/
+.gitignore
+.gitattributes
+
+# Documentation
+*.md
+!README.md
+docs/
+
+# Data and logs
+*.log
+*.pid
+data/
+cua2-core/data/
+
+# Environment
+.env
+.env.local
+.env.*.local
+
+# Test
+tests/
+test_*.py
+*_test.py

Dockerfile

@@ -0,0 +1,46 @@
+# Stage 1: Builder
+FROM node:20-alpine AS frontend-builder
+
+WORKDIR /app/frontend
+
+COPY cua2-front/package*.json ./
+
+RUN npm ci
+
+COPY cua2-front/ ./
+
+RUN npm run build
+
+# Stage 2: Production image
+FROM python:3.11-slim
+
+RUN apt-get update && apt-get install -y \
+    nginx \
+    curl \
+    procps \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+COPY pyproject.toml uv.lock ./
+COPY cua2-core/ ./cua2-core/
+
+RUN pip install --no-cache-dir uv
+
+RUN cd /app && uv sync --frozen
+
+COPY --from=frontend-builder /app/frontend/dist /app/static
+
+COPY nginx.conf /etc/nginx/nginx.conf
+
+COPY entrypoint.sh /app/entrypoint.sh
+RUN chmod +x /app/entrypoint.sh
+
+EXPOSE 7860
+
+ENV PYTHONUNBUFFERED=1
+ENV HOST=0.0.0.0
+ENV PORT=8000
+
+# Use entrypoint script
+ENTRYPOINT ["/app/entrypoint.sh"]

Makefile

@@ -1,4 +1,4 @@
-.PHONY: sync setup install dev-backend dev-frontend dev clean
+.PHONY: sync setup install dev-backend dev-frontend dev clean docker-build docker-run docker-stop docker-clean docker-logs
 
 # Sync all dependencies (Python + Node.js)
 sync:
@@ -38,3 +38,42 @@ clean:
 	find . -type d -name ".pytest_cache" -exec rm -rf {} + 2>/dev/null || true
 	cd cua2-front && rm -rf node_modules dist 2>/dev/null || true
 	@echo "✓ Cleaned!"
+
+# Docker commands
+docker-build:
+	@echo "Building Docker image..."
+	make docker-stop
+	docker build -t cua2:latest .
+	@echo "✓ Docker image built successfully!"
+
+docker-run:
+	@echo "Starting CUA2 container..."
+	@if [ -z "$$E2B_API_KEY" ]; then \
+		echo "Error: E2B_API_KEY environment variable is not set"; \
+		echo "Please set it with: export E2B_API_KEY=your-key"; \
+		exit 1; \
+	fi
+	@if [ -z "$$HF_TOKEN" ]; then \
+		echo "Error: HF_TOKEN environment variable is not set"; \
+		echo "Please set it with: export HF_TOKEN=your-token"; \
+		exit 1; \
+	fi
+	docker run -d --name cua2-app -p 7860:7860 \
+		-e E2B_API_KEY="$$E2B_API_KEY" \
+		-e HF_TOKEN="$$HF_TOKEN" \
+		cua2:latest
+	@echo "✓ Container started! Access at http://localhost:7860"
+
+docker-stop:
+	@echo "Stopping CUA2 container..."
+	docker stop cua2-app || true
+	docker rm cua2-app || true
+	@echo "✓ Container stopped!"
+
+docker-clean:
+	@echo "Removing CUA2 Docker images..."
+	docker rmi cua2:latest || true
+	@echo "✓ Docker images removed!"
+
+docker-logs:
+	docker logs -f cua2-app

cua2-core/src/cua2_core/app.py

@@ -1,3 +1,4 @@
+import os
 from contextlib import asynccontextmanager
 
 from cua2_core.services.agent_service import AgentService
@@ -17,6 +18,9 @@ async def lifespan(app: FastAPI):
     # Startup: Initialize services
     print("Initializing services...")
 
+    if not os.getenv("HF_TOKEN"):
+        raise ValueError("HF_TOKEN is not set")
+
     websocket_manager = WebSocketManager()
 
     sandbox_service = SandboxService()

cua2-front/src/config/api.ts

@@ -0,0 +1,48 @@
+
+/**
+ * Get the WebSocket URL based on the environment
+ * In production (Docker), it uses the current host
+ * In development, it uses the configured URL or defaults to localhost:8000
+ */
+export const getWebSocketUrl = (): string => {
+    // Check if we have a configured WebSocket URL from environment
+    const envWsUrl = import.meta.env.VITE_WS_URL;
+
+    if (envWsUrl) {
+        return envWsUrl;
+    }
+
+    // In production (when served from same origin), use relative WebSocket URL
+    if (import.meta.env.PROD) {
+        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        const host = window.location.host;
+        return `${protocol}//${host}/ws`;
+    }
+
+    // Development fallback
+    return 'ws://localhost:8000/ws';
+};
+
+/**
+ * Get the base API URL based on the environment
+ * In production (Docker), it uses the current host with /api prefix
+ * In development, it uses the configured URL or defaults to localhost:8000/api
+ */
+export const getApiBaseUrl = (): string => {
+    // Check if we have a configured API URL from environment
+    const envApiUrl = import.meta.env.VITE_API_URL;
+
+    if (envApiUrl) {
+        return envApiUrl;
+    }
+
+    // In production (when served from same origin), use relative API URL
+    if (import.meta.env.PROD) {
+        const protocol = window.location.protocol;
+        const host = window.location.host;
+        return `${protocol}//${host}/api`;
+    }
+
+    // Development fallback
+    return 'http://localhost:8000/api';
+};

cua2-front/src/pages/Index.tsx

@@ -1,4 +1,5 @@
 import { Header, Metadata, StackSteps, VNCStream } from '@/components/mock';
+import { getWebSocketUrl } from '@/config/api';
 import { useWebSocket } from '@/hooks/useWebSocket';
 import { AgentStep, AgentTrace, WebSocketEvent } from '@/types/agent';
 import { useState } from 'react';
@@ -12,9 +13,8 @@ const Index = () => {
 
   // #################### WebSocket Connection ########################
 
-  // WebSocket connection - Use environment variable
-  // const WS_URL = process.env.NEXT_PUBLIC_WS_URL || 'ws://localhost:8000/ws';
-  const WS_URL = 'ws://localhost:8000/ws';
+  // WebSocket connection - Automatically configured based on environment
+  const WS_URL = getWebSocketUrl();
 
   const handleWebSocketMessage = (event: WebSocketEvent) => {
     console.log('WebSocket event received:', event);

entrypoint.sh

@@ -0,0 +1,25 @@
+#!/bin/bash
+set -e
+
+echo "Starting CUA2 Application..."
+
+service nginx start
+
+sleep 2
+
+# Check if nginx is running
+if ! pgrep nginx > /dev/null; then
+    echo "Error: nginx failed to start"
+    exit 1
+fi
+
+
+cd /app/cua2-core
+
+# Set default number of workers if not specified
+WORKERS=${WORKERS:-1}
+
+echo "Starting backend with $WORKERS worker(s)..."
+
+# Use uv to run the application
+exec uv run uvicorn cua2_core.main:app --host 0.0.0.0 --port 8000 --workers $WORKERS --log-level info

nginx.conf

@@ -0,0 +1,99 @@
+user www-data;
+worker_processes auto;
+pid /run/nginx.pid;
+
+events {
+    worker_connections 1024;
+}
+
+http {
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+
+    access_log /var/log/nginx/access.log;
+    error_log /var/log/nginx/error.log;
+
+    sendfile on;
+    tcp_nopush on;
+    tcp_nodelay on;
+    keepalive_timeout 65;
+    types_hash_max_size 2048;
+
+    gzip on;
+    gzip_vary on;
+    gzip_proxied any;
+    gzip_comp_level 6;
+    gzip_types text/plain text/css text/xml text/javascript application/json application/javascript application/xml+rss application/rss+xml font/truetype font/opentype application/vnd.ms-fontobject image/svg+xml;
+
+    server {
+        listen 7860;
+        server_name _;
+
+        root /app/static;
+        index index.html;
+
+        location / {
+            try_files $uri $uri/ /index.html;
+
+            location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+                expires 1y;
+                add_header Cache-Control "public, immutable";
+            }
+        }
+
+        # Proxy API requests to backend
+        location /api/ {
+            proxy_pass http://127.0.0.1:8000;
+            proxy_http_version 1.1;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+
+            proxy_connect_timeout 60s;
+            proxy_send_timeout 60s;
+            proxy_read_timeout 60s;
+        }
+
+        # Proxy WebSocket connections
+        location /ws {
+            proxy_pass http://127.0.0.1:8000;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "upgrade";
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+
+            proxy_connect_timeout 7d;
+            proxy_send_timeout 7d;
+            proxy_read_timeout 7d;
+        }
+
+        # Proxy health check
+        location /health {
+            proxy_pass http://127.0.0.1:8000;
+            proxy_http_version 1.1;
+            proxy_set_header Host $host;
+        }
+
+        location /docs {
+            proxy_pass http://127.0.0.1:8000;
+            proxy_http_version 1.1;
+            proxy_set_header Host $host;
+        }
+
+        location /redoc {
+            proxy_pass http://127.0.0.1:8000;
+            proxy_http_version 1.1;
+            proxy_set_header Host $host;
+        }
+
+        location /openapi.json {
+            proxy_pass http://127.0.0.1:8000;
+            proxy_http_version 1.1;
+            proxy_set_header Host $host;
+        }
+    }
+}