2.3 · Argilla 前端（Argilla Frontend）

人工复核与反馈数据 · 聚焦本章的模块关系、源码依据与实现要点。

项目Argilla 章节2.3 状态全文译文模块界面与交互、评测、反馈与人工复核、文档对象与元数据、系统架构

项目要点页2.5 参考项目项目章节目录Argilla DeepWiki 原始章节Argilla Frontend 上一章2.2 下一章3

源码线索

.gitignore
.pre-commit-config.yaml
README.md
argilla-frontend/CHANGELOG.md
argilla-frontend/components/features/annotation/container/questions/form/span/EntityLabelSelection.component.vue
argilla-frontend/components/features/annotation/settings/Validation.vue
argilla-frontend/components/features/dataset-creation/configuration/DatasetConfigurationForm.vue
argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationFieldSelector.vue
argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationLabels.vue
argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationQuestion.vue

模块标签

界面与交互
评测、反馈与人工复核
文档对象与元数据
系统架构
配置治理

章节正文

Argilla 前端

原始 DeepWiki 页面https://deepwiki.com/argilla-io/argilla/2.3-argilla-frontend

Argilla 前端

架构总览

Argilla 前端使用 Vue.js 和 Nuxt.js 构建，实现了基于组件的架构，专注于为数据标注任务提供用户友好的界面。

前端技术栈

Argilla · 前端技术栈 · 图 1

来源： argilla-frontend/package.json:1-81 argilla-frontend/v1/domain/entities/hub/Subset.ts:1-288

前端使用以下技术：

Vue.js 2.7.16 和 Nuxt.js 2.18.1：核心框架
Pinia 2.1.7：状态管理
Axios 1.6.8：用于 API 请求的 HTTP 客户端
SASS：CSS 预处理器
@nuxtjs/i18n 7.3.1：国际化

核心组件与数据流

下图展示了前端的主要组件以及在标注过程中数据如何在它们之间流动：

Argilla · 核心组件与数据流 · 图 2

来源： argilla-frontend/components/features/annotation/container/questions/form/span/EntityLabelSelection.component.vue:1-321 argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationLabels.vue:1-116

数据集配置系统

数据集配置系统是前端的关键部分，允许用户定义数据集的结构，包括字段（要显示的数据）和问题（要标注的内容）。

Argilla · 数据集配置系统 · 图 3

来源： argilla-frontend/components/features/dataset-creation/configuration/DatasetConfigurationForm.vue:1-276 argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationQuestion.vue:1-127 argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationFieldSelector.vue:1-145 argilla-frontend/v1/domain/entities/hub/QuestionCreation.ts:1-219

支持的字段类型

前端支持多种字段类型来显示待标注的数据：

字段类型	描述	实现方式
文本字段	显示文本内容	基础文本渲染，可选 Markdown 支持
图片字段	显示图片	支持 URL 和数据 URL
对话字段	显示对话	渲染多轮对话
自定义字段	显示自定义内容	在沙箱环境中支持 HTML

来源： argilla-frontend/translation/en.js:1-409 argilla-frontend/v1/domain/entities/hub/Subset.ts:143-154

支持的问题类型

前端支持多种用于标注的问题类型：

问题类型	描述	实现方式
标签选择	选择单个标签	单选按钮，可选键盘快捷键
多标签选择	选择多个标签	复选框，支持过滤
评分	提供数值评分	数值刻度（0-10）
排序	对选项进行排序	拖放界面
文本	自由文本响应	文本输入字段
跨度标注	高亮并标注文本跨度	文本选择与实体标注

来源： argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationLabels.vue:1-116 argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationRating.vue:1-101 argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationSpan.vue:1-142 argilla-frontend/v1/domain/entities/hub/QuestionCreation.ts:19-26

数据集创建与导入流程

Argilla 前端的关键功能之一是从 Hugging Face Hub 导入数据集并配置它们以进行标注：

Argilla · 数据集创建与导入流程 · 图 4

来源： argilla-frontend/v1/domain/entities/hub/Subset.ts:1-288 argilla-frontend/v1/domain/entities/hub/DatasetCreation.test.ts:1-304 argilla-frontend/components/features/dataset-creation/configuration/DatasetConfigurationForm.vue:1-276

标注界面

标注界面是用户与记录交互以回答问题的地方。它支持不同的视图模式、过滤和键盘快捷键，以实现高效的标注。

标注视图

聚焦模式：一次专注于一条记录
批量模式：同时查看和标注多条记录

过滤与排序

用户可以通过以下方式过滤记录：

文本内容
元数据值
响应状态（待处理、已提交、已丢弃等）
建议值和分数

校验与反馈

界面提供校验反馈，确保响应满足要求：

Argilla · 校验与反馈 · 图 5

来源： argilla-frontend/components/features/annotation/settings/Validation.vue:1-46 argilla-frontend/translation/en.js:142-145

国际化

前端通过国际化系统支持多种语言：

英语（默认）
德语
西班牙语

翻译文件采用键值对结构，键表示文本标识符，值包含每种语言的翻译文本。

来源： argilla-frontend/translation/en.js:1-409 argilla-frontend/translation/de.js:1-402 argilla-frontend/translation/es.js:1-404

主题与无障碍

前端支持多种主题以改善无障碍性：

浅色模式
深色模式
高对比度模式

这些主题旨在确保具有不同视觉需求和偏好的用户都能使用该应用。

来源： argilla-frontend/translation/en.js:373-377 argilla-frontend/CHANGELOG.md:49

与 Argilla SDK 的集成

前端与 Argilla SDK 协同工作，允许用户：

以编程方式创建数据集
向这些数据集上传记录
在前端查看和标注记录
导出标注后的数据

这种集成使得创建端到端工作流成为可能，将程序化数据操作与人工标注结合起来。

来源： README.md:96-154 argilla-frontend/translation/en.js:272-284

键盘快捷键

前端为常见操作提供键盘快捷键，提高了高级用户的效率：

导航：使用箭头键在记录之间移动
标签问题：使用数字键选择选项
多标签问题：使用组合键选择多个选项
提交：使用快捷键提交、丢弃或保存为草稿

来源： argilla-frontend/translation/en.js:164-169

开发与部署

前端与 Argilla 服务器打包在一起，可以通过多种方式部署：

Docker
Kubernetes
Hugging Face Spaces

对于开发者，可以使用以下命令在开发模式下运行前端：

npm run dev

来源： argilla-frontend/dev.frontend.Dockerfile:1-33 argilla-frontend/package.json:5-22

总结

Argilla 前端为数据标注和整理提供了强大而灵活的界面。其基于组件的架构以及对各种字段和问题类型的支持，使其能够适应广泛的标注任务，而国际化、主题等功能则确保了不同用户群体的可访问性。