diff --git a/docker/Dockerfile b/docker/Dockerfile index bcac1614e8..41f08a1b46 100644 --- a/docker/Dockerfile +++ b/docker/Dockerfile @@ -1,8 +1,7 @@ # Multi-stage build for Chrome DevTools Frontend -# Stage 1: Builder - Use x86-64 for build compatibility FROM --platform=linux/amd64 ubuntu:22.04 AS builder -# Install required packages for the build +# Install required packages RUN apt-get update && apt-get install -y \ curl \ git \ @@ -11,74 +10,53 @@ RUN apt-get update && apt-get install -y \ python-is-python3 \ wget \ unzip \ - lsb-release \ sudo \ ca-certificates \ - gnupg \ + build-essential \ && rm -rf /var/lib/apt/lists/* -# Install Node.js 18.x (LTS) +# Install Node.js 18.x RUN curl -fsSL https://deb.nodesource.com/setup_18.x | bash - && \ apt-get install -y nodejs && \ rm -rf /var/lib/apt/lists/* -# Set up working directory WORKDIR /workspace -# Copy the entire repository -COPY . . - -# Clone depot_tools if not exists and add to PATH -RUN if [ ! -d "third_party/depot_tools" ]; then \ - git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git third_party/depot_tools; \ - fi - -# Set PATH to include depot_tools -ENV PATH="/workspace/third_party/depot_tools:${PATH}" - -# Set environment variables to bypass CIPD issues -ENV VPYTHON_BYPASS="manually managed python not supported by chrome operations" +# Clone depot_tools +RUN git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git +ENV PATH="/workspace/depot_tools:${PATH}" ENV DEPOT_TOOLS_UPDATE=0 -# Download Node.js binary for the expected path (x86-64) -RUN mkdir -p third_party/node/linux && \ - cd third_party/node/linux && \ - wget -q https://nodejs.org/dist/v18.20.0/node-v18.20.0-linux-x64.tar.xz && \ - tar -xf node-v18.20.0-linux-x64.tar.xz && \ - mv node-v18.20.0-linux-x64 node-linux-x64 && \ - rm -rf node-v18.20.0-linux-x64.tar.xz +# Follow README instructions exactly: +# fetching code +RUN mkdir devtools +WORKDIR /workspace/devtools +RUN fetch devtools-frontend -# Download correct ninja binary for x86-64 -RUN rm -rf third_party/ninja && \ - mkdir -p third_party/ninja && \ - wget -O /tmp/ninja.zip https://github.com/ninja-build/ninja/releases/download/v1.11.1/ninja-linux.zip && \ - unzip -o /tmp/ninja.zip -d third_party/ninja/ && \ - chmod +x third_party/ninja/ninja && \ - rm /tmp/ninja.zip +# Build steps +WORKDIR /workspace/devtools/devtools-frontend -# Create a simple python3 wrapper for vpython3 -RUN echo '#!/bin/bash\nexec python3 "$@"' > /usr/local/bin/vpython3 && \ - chmod +x /usr/local/bin/vpython3 +RUN gclient sync +RUN /workspace/depot_tools/ensure_bootstrap -# Run npm install and build -RUN npm install && \ - npm run build +# Build standard DevTools first +RUN npm run build -# Stage 2: Production -FROM nginx:alpine +# Add Browser Operator fork and switch to it +RUN git remote add upstream https://github.com/BrowserOperator/browser-operator-core.git +RUN git fetch upstream +RUN git checkout upstream/main -# Copy only the built frontend files from builder stage -COPY --from=builder /workspace/out/Default/gen/front_end /usr/share/nginx/html +# Build Browser Operator version +RUN npm run build -# Copy nginx configuration -COPY docker/nginx.conf /etc/nginx/conf.d/default.conf +# Production stage +FROM --platform=linux/amd64 nginx:alpine -# Expose port 8000 to match the original Python server port -EXPOSE 8000 +# Copy the built DevTools frontend +COPY --from=builder /workspace/devtools/devtools-frontend/out/Default/gen/front_end /usr/share/nginx/html -# Health check -HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \ - CMD wget --no-verbose --tries=1 --spider http://localhost:8000/ || exit 1 +# Copy nginx config +COPY docker/nginx.conf /etc/nginx/conf.d/default.conf -# Start nginx -CMD ["nginx", "-g", "daemon off;"] \ No newline at end of file +EXPOSE 8000 \ No newline at end of file diff --git a/front_end/panels/ai_chat/Readme.md b/front_end/panels/ai_chat/Readme.md index 108f6f7e93..4561c34080 100644 --- a/front_end/panels/ai_chat/Readme.md +++ b/front_end/panels/ai_chat/Readme.md @@ -2,6 +2,18 @@ This panel is a Multi-Agent Framework that allows a user to connect an existing LLM with the chromium browser. +### Docker +```sh +# assuming you are running from the root "browser-operator-core" directory +docker build -f docker/Dockerfile -t devtools-frontend . +docker run -d -p 8000:8000 --name devtools-frontend devtools-frontend +/third_party/chrome/chrome-/chrome --disable-infobars --custom-devtools-frontend=http://localhost:8000/ + +# MacOS Example +/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --custom-devtools-frontend=http://localhost:8000/ +``` + + ### Steps to run project 1. Setup the depot_tools to fetch the chromium dev tools using the instructions provided [here](https://www.chromium.org/developers/how-tos/get-the-code/) @@ -25,7 +37,7 @@ npm run build 3. Update the code to this fork implementation ```sh -git remote add upstream git@github.com:tysonthomas9/browser-operator-devtools-frontend.git +git remote add upstream https://github.com/BrowserOperator/browser-operator-core.git git fetch upstream git checkout upstream/main ```