在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

Significant-Gravitas/AutoGPT

菜单

市场

相关源文件

市场是AutoGPT平台的一个核心功能，使用户能够发现、分享和使用预构建的AI代理。它充当了一个社区中心，创建者可以在此发布他们的代理，用户可以找到满足其特定需求的解决方案。本文档涵盖了市场系统的架构、组件和功能。

1. 概述

市场提供了一个经过精心策划的环境，用于浏览、添加和下载由AutoGPT社区创建的代理。它包括发现热门代理、探索不同类别以及了解创建者的功能。

来源

2. 市场页面结构

市场登陆页面组织成几个不同的部分，突出显示可用代理的各个方面。每个部分都有助于用户发现和与代理交互。

主页包括

  1. Hero Section：市场介绍横幅
  2. 精选代理：带有特殊视觉效果的精选代理的轮播
  3. 热门代理：基于使用指标的流行代理的网格显示
  4. 热门创建者：展示社区中重要的代理创建者
  5. 成为创建者：鼓励用户发布自己代理的行动号召部分

来源

3. 主要组件

3.1 代理卡片

代理卡片是显示市场中代理的基本UI元素。存在两种主要变体：

StoreCard

标准卡片，用于大多数部分，显示：

  • 代理图片
  • 代理名称
  • 创建者信息（姓名和头像）
  • 简短描述
  • 使用统计（运行次数和评分）
+---------------------------+
|                           |
|       [Agent Image]       |
|                           |
| [Creator Avatar]          |
+---------------------------+
| Agent Name                |
| by Creator Name           |
|                           |
| Description text that     |
| summarizes the agent's    |
| functionality and use     |
| cases...                  |
|                           |
| 5,000 runs        ★ 4.8   |
+---------------------------+

来源

FeaturedAgentCard

用于精选代理轮播的特殊卡片格式，具有

  • 彩色背景
  • 悬停动画显示描述
  • 紧凑布局，用于轮播显示

来源

3.2 代理详情页

当用户选择一个代理时，他们会进入一个详细视图，该视图包括：

  1. Agent Info Section

    • 代理名称和创建者
    • 描述
    • 统计（评分和运行次数）
    • 类别
    • “添加到库”或“下载”按钮
    • 版本信息

  2. Agent Images Section

    • 展示代理的多个图片或视频
    • 演示视频的视频播放功能

  3. 相关代理

    • “此创建者的其他代理”
    • “相似代理”（基于类别或关键字）

来源

3.3 创建者资料

创建者资料显示有关代理创建者的信息，包括：

  • 创建者姓名和头像
  • 简介/描述
  • 热门类别
  • 统计（平均评分和总运行次数）
  • 创建者发布的代理列表

CreatorInfoCard 组件以视觉吸引人的布局显示此信息。

来源

3.4 发布工作流程

代理发布工作流程是一个多步骤过程，由PublishAgentPopout组件处理。

  1. 选择代理：用户从他们的库中选择要发布的代理
  2. 代理信息：用户提供有关代理的详细信息
    • 标题
    • 副标题
    • Slug（URL友好的名称）
    • 图片（上传或AI生成）
    • YouTube视频链接
    • 类别
    • 描述
  3. 审核：提交的代理将经过审核，然后才能出现在市场中

来源

4. 数据流

市场与后端API进行交互，以检索和管理代理数据。下图说明了关键用户交互的数据流：

来源

5. UI 组件层级

市场UI是使用基于组件的架构构建的。以下是主要UI组件的层级结构：

来源

6. 关键用户交互

6.1 将代理添加到库

当用户想使用市场中的代理时，他们可以将其添加到自己的个人库中。此过程涉及：

  1. 用户在代理详情页点击“添加到库”
  2. 系统调用addMarketplaceAgentToLibrary(storeListingVersionId)
  3. 后端在用户的库中创建代理的副本
  4. 用户被重定向到其库中的代理

对于未登录的用户，会提供“将代理下载为文件”选项，该选项：

  1. 调用downloadStoreAgent(storeListingVersionId)
  2. 将响应转换为JSON文件
  3. 在浏览器中触发下载

来源

6.2 发布代理

代理发布工作流程包括三个主要步骤：

  1. 代理选择:

    • 用户点击“成为创建者”或“上传您的代理”
    • 系统加载用户的代理
    • 用户选择要发布的代理

  2. 代理信息:

    • 用户提供有关代理的详细信息
      • 名称、副标题、描述
      • 代理图片（上传或AI生成）
      • YouTube演示链接
      • 类别选择

  3. 提交审核:

    • 系统验证必需字段
    • 代理被提交审核
    • 用户看到确认屏幕

来源

7. API集成

市场依赖于几个后端API端点来检索和管理数据。

端点方法目的组件
/api/store/agentsGET检索代理以供市场展示FeaturedSection, AgentsSection
/api/store/agents/:creator/:slugGET获取特定代理的详细信息AgentDetailPage
/api/store/creatorsGET获取热门创建者FeaturedCreators
/api/store/creators/:usernameGET获取创建者资料详情CreatorProfilePage
/api/library/agents/marketplace/:idPOST将市场代理添加到用户的库中AgentInfo
/api/store/agents/:id/downloadGET将代理下载为文件AgentInfo
/api/store/submissionsPOST提交代理以发布到市场PublishAgentInfo
/api/store/submission-mediaPOST上传用于代理提交的图片PublishAgentInfo

来源

8. 响应式设计

市场UI旨在跨不同设备尺寸保持响应性。

  • 移动设备：单列布局，带有精选代理的轮播
  • 平板电脑：代理卡片双列网格
  • 桌面设备：根据屏幕宽度为三列或四列网格

这是通过CSS类和响应式断点实现的。

<div className="hidden grid-cols-1 place-items-center gap-6 md:grid md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">

该实现采用了移动优先的方法，并使用CSS网格和flexbox进行布局。

来源

9. 与其他系统的集成

市场集成了AutoGPT平台的多个其他组件：

  1. 用户库：可以从市场直接将代理添加到用户的个人库中使用。
  2. 代理构建系统：用户可以从市场导航到代理构建器来创建新代理。
  3. 用户认证：已登录用户可以将代理添加到其库中，而访客可以下载代理文件。
  4. 代理执行系统：用户可以将市场中的代理添加到其库中后再运行。

来源

10. 未来发展

市场系统潜在的改进领域：

  1. 搜索和过滤：增强搜索功能，支持按类别、评分和其他标准进行过滤。
  2. 分页：目前使用基本的分页，带有“TODO: 当我们有分页时更新此内容”的注释。
  3. 评论系统：为代理提供更全面的评论和反馈系统。
  4. 分析仪表板：供创建者跟踪其代理的性能。
  5. 代理更新：用于发布现有代理更新的机制。

来源