magentic-ui: 在保持控制的同时自动执行 Web 任务

GitHub：GitHub - microsoft/magentic-ui: A research prototype of a human-centered web agent

更多AI开源软件：发现分享好用的AI工具、AI开源软件、AI模型、AI变现 - 小众AI

Magentic-UI 是一个以人为本的界面的研究原型，由多代理系统提供支持，可以在 Web 上浏览和执行作，生成和执行代码，以及生成和分析文件。 Magentic-UI 对于需要在 Web 上执行作（例如，填写表单、自定义食品订单）、在未被搜索引擎索引的网站中进行深度导航（例如，过滤航班、从个人站点查找链接）或需要 Web 导航和代码执行的任务（例如，从在线数据生成图表）的 Web 任务特别有用。

Magentic-UI 与其他浏览器使用产品的区别在于其透明和可控的界面，允许高效的人机交互。

​

​

主要功能

• 🧑 🤝 🧑 共同规划：使用聊天和计划编辑器协作创建和批准分步计划。
• 🤝 共同任务处理：直接使用 Web 浏览器或通过聊天中断和指导任务执行。Magentic-UI 还可以在需要时要求澄清和帮助。
• 🛡️ 作防护：敏感作仅在用户明确批准的情况下执行。
• 🧠 计划学习和检索：从以前的运行中学习，以改进未来的任务自动化并将其保存在计划库中。在将来的任务中自动或手动检索已保存的计划。
• 🔀 并行任务执行：您可以并行运行多个任务，会话状态指示器将让您知道 Magentic-UI 何时需要您的输入或已完成任务。

  安装和使用

  先决条件

  1. Magentic-UI 需要 Docker 作为正常作的一部分。如果在 Windows 或 Mac 上运行，则可以使用 Docker Desktop。
  2. 在 Windows 上运行 Magentic-UI 需要 WSL2。您可以按照此处的说明安装 WSL2。此外，请确保将 Docker Desktop 配置为使用 WSL2（WSL 集成>>资源设置）。您可以在此处找到有关此步骤的更多详细说明。
  3. 通过设置环境变量，向 Magentic-UI 提供您的 OpenAI API 密钥。或者，查看下面的 Custom Client Configuration 部分。OPENAI_API_KEY​
  4. 您至少需要安装 Python 3.10。

  PyPI 安装

  Magentic-UI 在 PyPI 上可用。我们建议使用虚拟环境以避免与其他软件包冲突。

  python3 -m venv .venv
  source .venv/bin/activate
  pip install magentic-ui
  

  或者，如果您使用 uv​ 进行依赖项管理，则可以使用以下命令安装 Magentic-UI：

  uv venv --python=3.12 .venv
  . .venv/bin/activate
  uv pip install magentic-ui
  

  运行 Magentic-UI

  要运行 Magentic-UI，请确保 Docker 正在运行，然后运行以下命令：

  magentic ui --port 8081
  

  第一次运行此命令时，构建 Docker 镜像需要一段时间 —— 去喝杯咖啡什么的。下次运行它时，它会快得多，因为它不必再次构建 Docker。

  服务器运行后，您可以在 http://localhost:8081 访问 UI。

  自定义客户端配置

  如果要使用不同的 OpenAI 密钥，或者想要配置与 Azure OpenAI 或 Ollama 的使用，可以在 UI 中执行此作，方法是导航到设置（右上角图标）并使用下面的文件格式更改模型配置。您还可以在 UI 中创建并导入它，或在启动时将 Magentic-UI 指向其路径：config.yamlconfig.yaml​

  magentic ui --config path/to/config.yaml
  

  下面给出了 OpenAI 的示例：config.yaml​

  # config.yaml
  ######################################
  # Default OpenAI model configuration #
  ######################################
  model_config: &client
    provider: autogen_ext.models.openai.OpenAIChatCompletionClient
    config:
      model: gpt-4o
      api_key: 
      max_retries: 10
  ##########################
  # Clients for each agent #
  ##########################
  orchestrator_client: *client
  coder_client: *client
  web_surfer_client: *client
  file_surfer_client: *client
  action_guard_client: *client
  

  Azure OpenAI 的相应配置为：

  # config.yaml
  ######################################
  # Azure model configuration          #
  ######################################
  model_config: &client
    provider: AzureOpenAIChatCompletionClient
    config:
      model: gpt-4o
      azure_endpoint: ""
      azure_deployment: ""
      api_version: "2024-10-21"
      azure_ad_token_provider:
        provider: autogen_ext.auth.azure.AzureTokenProvider
        config:
          provider_kind: DefaultAzureCredential
          scopes:
            - https://cognitiveservices.azure.com/.default
      max_retries: 10
  ##########################
  # Clients for each agent #
  ##########################
  orchestrator_client: *client
  coder_client: *client
  web_surfer_client: *client
  file_surfer_client: *client
  action_guard_client: *client
  

  从源码构建 Magentic-UI

  1. 确保已安装上述先决条件，并且 Docker 正在运行。

  2. 将存储库克隆到本地计算机：

  git clone https://github.com/microsoft/magentic-ui.git
  cd magentic-ui
  

  或者，如果使用 SSH：

  git clone git@github.com:microsoft/magentic-ui.git
  cd magentic-ui
  

  3. 使用 uv 安装 Magentic-UI 的依赖项：

  # install uv through https://docs.astral.sh/uv/getting-started/installation/
  uv venv --python=3.12 .venv
  uv sync --all-extras
  source .venv/bin/activate
  

  4. 构建前端：

  首先确保有 install node：

  # install nvm to install node
  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
  nvm install node
  

  然后安装前端：

  cd frontend
  npm install -g gatsby-cli
  npm install --global yarn
  yarn install
  yarn build
  

  5. 像往常一样运行 Magentic-UI。

  magentic ui --port 8081
  

  注意：首次运行此命令将构建 Magentic-UI 代理所需的两个 docker 容器。如果您遇到问题，可以从存储库内部使用以下命令直接构建它们：

  docker build -t magentic-ui-vnc-browser:latest ./src/magentic_ui/docker/magentic-ui-browser-docker
  docker build -t magentic-ui-python-env:latest ./src/magentic_ui/docker/magentic-ui-python-env
  

  从源运行 UI

  如果您正在处理 UI，则可以在开发模式下运行前端，以便在您进行更改时自动更新。

  1. 打开一个单独的终端并将目录更改为前端

  cd frontend
  

  1. 创建文件。.env.development​

  cp .env.default .env.development
  

  1. 启动前端服务器

  npm run start
  

  然后运行 UI：

  magentic ui --port 8081
  

  来自源代码的前端将在 http://localhost:8000 上提供，编译后的前端将在 http://localhost:8081 上提供。

  技术原理

  Magentic-UI 的底层系统是一支由上图所示的 AutoGen 的 Magentic-One 系统改编而来的专业代理团队。代理协同工作以创建一个模块化系统：

  • Orchestrator 是主要代理，由大型语言模型 （LLM） 提供支持，它与用户执行共同规划，决定何时向用户请求反馈，并将子任务委派给其余代理完成。
  • WebSurfer 是一个 LLM 代理，配备了它可以控制的 Web 浏览器。根据 Orchestrator 的请求，它可以在多轮中单击、键入、滚动和访问页面，以完成来自 Orchestrator 的请求。该代理在可以执行的作（选项卡管理、选择选项、文件上传、多模式查询）方面对 AutoGen 进行了重大改进。MultimodalWebSurfer​
  • Coder 是一个配备了 Docker 代码执行容器的 LLM 代理。它可以编写和执行 Python 和 shell 命令，并向 Orchestrator 提供响应。
  • FileSurfer 是一个 LLM 代理，配备了 Docker 代码执行容器和 MarkItDown 包中的文件转换工具。它可以在 Magentic-UI 控制的目录中定位文件，将文件转换为 markdown，并回答有关文件的问题。
  • UserProxy 是一个代理，代表与 Magentic-UI 交互的用户。Orchestrator 可以将工作委派给用户，而不是其他代理。

    要与 Magentic-UI 交互，用户可以输入文本消息并附加图像。作为响应，Magentic-UI 创建了一个自然语言的分步计划，用户可以通过计划编辑界面与之交互。用户可以添加、删除、编辑、重新生成步骤，并编写后续消息以迭代计划。虽然用户编辑计划会增加交互的前期成本，但它可能会为座席执行计划节省大量时间，并增加其成功的机会。

    该计划存储在 Orchestrator 中，用于执行任务。对于计划的每个步骤，Orchestrator 将确定哪些代理（WebSurfer、Coder、FileSurfer）或用户应完成该步骤。做出该决定后，Orchestrator 会向其中一个代理或用户发送请求，并等待响应。收到响应后，Orchestrator 将决定该步骤是否完成。如果是，Orchestrator 将继续执行以下步骤。

    完成所有步骤后，Orchestrator 会生成呈现给用户的最终答案。如果在执行任何步骤时，Orchestrator 认为计划不合适（例如，由于无法访问某个网站），则 Orchestrator 可以在获得用户权限的情况下重新规划并开始执行新计划。

    所有中间进度步骤都清楚地显示给用户。此外，用户可以暂停计划的执行并发送其他请求或反馈。用户还可以通过界面配置代理作（例如，单击按钮）是否需要批准。