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 何时需要您的输入或已完成任务。

安装和使用

先决条件

Magentic-UI 需要 Docker 作为正常作的一部分。如果在 Windows 或 Mac 上运行，则可以使用 Docker Desktop。
在 Windows 上运行 Magentic-UI 需要 WSL2。您可以按照此处的说明安装 WSL2。此外，请确保将 Docker Desktop 配置为使用 WSL2（WSL 集成>>资源设置）。您可以在此处找到有关此步骤的更多详细说明。
通过设置环境变量，向 Magentic-UI 提供您的 OpenAI API 密钥。或者，查看下面的 Custom Client Configuration 部分。OPENAI_API_KEY
您至少需要安装 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: <YOUR 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: "<YOUR ENDPOINT>"
    azure_deployment: "<YOUR 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 [email protected]: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，则可以在开发模式下运行前端，以便在您进行更改时自动更新。

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

cd frontend
创建文件。.env.development

cp .env.default .env.development
启动前端服务器

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 可以在获得用户权限的情况下重新规划并开始执行新计划。

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