Menu

Polly's Blog

OpenHands 源码解析系列（一）：项目概览与架构设计

OpenHands 是一个自动化的 AI 软件工程师项目，旨在通过前后端协作和强大的代理系统，帮助开发者完成复杂的任务。本文将深入解析 OpenHands 的整体架构和模块设计，帮助读者理解其核心逻辑和实现细节。

后端架构分析

后端是 OpenHands 的核心部分，负责处理用户请求、分配任务以及与大语言模型（LLM）的交互。以下是后端的主要模块及其职责：

  1. Controller 模块：

    • 文件路径：openhands/controller
    • 主要功能：解析用户输入的意图，并将任务分配给合适的代理。
    • 核心文件：
      • action_parser.py：负责将用户输入解析为系统可理解的动作。
      • agent_controller.py：根据解析结果选择合适的代理。

  2. AgentHub 模块：

    • 文件路径：openhands/agenthub
    • 主要功能：管理不同类型的代理（如代码生成代理、网页浏览代理）。
    • 核心文件：
      • browsing_agent：处理网页搜索任务。
      • codeact_agent：处理代码生成和分析任务。

  3. LLM 模块：

    • 文件路径：openhands/llm
    • 主要功能：与大语言模型交互，生成自然语言响应或代码。
    • 核心文件：
      • llm.py：封装与 LLM 的交互逻辑。
      • streaming_llm.py：支持流式响应。

  4. Storage 模块：

    • 文件路径：openhands/storage
    • 主要功能：提供数据存储功能，包括本地存储和云存储（如 S3）。

  5. Server 模块：

    • 文件路径：openhands/server
    • 主要功能：提供后端服务的入口，处理前端的 API 请求。
    • 核心文件：
      • app.py：定义了后端的主要路由。
      • routes/conversation.py：处理与对话相关的 API 请求。

前端架构分析

前端基于 React 构建，提供用户界面和交互逻辑。以下是前端的主要特点：

  1. 技术栈：

    • 使用 React 构建组件化界面。
    • 使用 TypeScript 提供类型安全。
    • 使用 Tailwind CSS 进行样式设计。

  2. 核心组件：

    • ChatInput：捕获用户输入并发送到后端。
    • ChatDisplay：显示对话内容并动态更新。

  3. API 调用：

    • 文件路径：frontend/src/api/conversation.ts
    • 功能：封装与后端的 API 交互逻辑。

运行逻辑详解

  1. 用户输入：

    • 用户通过前端的 ChatInput 组件输入内容。

  2. 前端发送请求：

    • 输入内容通过 conversation.ts 中的 API 方法发送到后端。

  3. 后端处理请求：

    • controller/action_parser.py 解析用户意图。
    • controller/agent_controller.py 分配合适的代理。
    • 代理通过 llm/llm.py 与大语言模型交互，生成响应。

  4. 前端显示响应：

    • 后端返回响应，前端更新 ChatDisplay 组件，显示新的对话内容。

通过以上分析，我们可以看到 OpenHands 的架构设计清晰，模块职责分明，便于扩展和维护。在接下来的文章中，我们将深入解析每个模块的实现细节，带你全面掌握 OpenHands 的源码。

项目概览

OpenHands 的代码库分为两个主要部分：

  1. 后端：基于 Python，负责核心逻辑、代理管理和与大语言模型（LLM）的交互。
  2. 前端：基于 React，提供用户界面，捕获用户输入并与后端交互。

此外，项目采用模块化设计，便于扩展和维护。

架构设计

1. 后端架构

后端代码位于 openhands 目录，主要模块包括：

  • Controller：负责解析用户意图并分配代理。
  • AgentHub：管理不同类型的代理（如代码生成、网页浏览）。
  • LLM：与大语言模型交互，生成响应。
  • Events：处理事件流。
  • Storage：管理数据存储。
  • Server：提供 API 接口，与前端通信。

2. 前端架构

前端代码位于 frontend 目录，主要特点：

  • 使用 React 构建组件化界面。
  • 通过 API 与后端交互。
  • 提供用户友好的对话界面。

模块职责

模块主要职责
Controller解析用户输入，分配任务给合适的代理。
AgentHub提供多种代理，完成特定任务（如代码生成、搜索）。
LLM调用大语言模型，生成自然语言响应或代码。
Events管理事件流，支持异步处理。
Storage提供本地存储、云存储（如 S3）等多种存储方式。
Server提供后端服务的入口，处理前端的 API 请求。

运行逻辑概览

  1. 用户输入：
    • 用户通过前端输入内容。
  2. 前端发送请求：
    • 前端将用户输入通过 API 发送到后端。
  3. 后端处理：
    • 后端解析用户意图，初始化对话上下文。
  4. 前端显示响应：
    • 前端接收后端的响应并更新界面。

总结

OpenHands 的架构设计清晰，模块职责分明，便于扩展和维护。在接下来的文章中，我们将深入解析每个模块的实现细节，带你全面掌握 OpenHands 的源码。

下一篇：OpenHands 源码解析系列（二）：前端架构与用户交互流程

留言与讨论