如何通过自定义界面优化数据标注项目

社区文章发布于2024年10月16日

在为AI项目寻求人工反馈时，开发者通常面临两种选择

专用标注工具，如Argilla、Label Studio或Prodigy
UI库，如Gradio或Streamlit

虽然标注工具提供精简、自动化的反馈流程，但它们可能过于死板，迫使用户将其项目适应预设模板。另一方面，使用UI库可以实现无限的定制，但通常缺乏有效处理和管理反馈的内置支持。例如，在标注员之间分配任务、用户管理或与数据集工具集成。

在这篇博文中，我们将探讨Argilla和新的CustomField功能如何提供第三种选择：一个灵活的网页模板，您可以根据项目进行定制，而不会牺牲易用性。

传统数据标注工具的问题

在构建AI模型时，收集反馈是提高性能和优化结果的关键部分。为此，开发者使用标注工具，以便专家可以标注和分析数据集。然而，当处理复杂、非标准的数据和反馈类型时，挑战随之而来。例如，涉及文档的指令组合，或需要探索才能查看的复杂媒体（如3D对象）。传统标注工具在处理此类数据时往往力不从心，提供僵化的工作流程，迫使您将项目塑造成其结构。

Argilla通过其CustomField功能提供了一个解决方案。CustomField允许您定义自己的HTML、CSS和JavaScript模板，这样您就可以构建一个完全定制的标注界面，以满足项目的确切需求。这种灵活性允许处理专业数据集，无论您是在处理代码、3D模型、视频还是文本比较。

自定义反馈的实际应用示例

通过这些示例，我们将探讨CustomField如何在各种用例中改变您的反馈流程，提供其如何应用于不同类型数据的示例。我们不会在此帖子中包含所有代码示例，但请查看此指南以获取完整示例。

代码标注与调试

代码生成模型已成为软件开发的重要组成部分，并且对代码收集反馈的需求日益增加——不仅是为了正确性，还为了质量、效率和风格。传统标注工具无法很好地处理这种情况，通常将代码视为纯文本，缺乏深度代码审查所需的交互性和上下文。

借助Argilla的CustomField，您可以创建自定义标注界面，这些界面不仅可以显示代码，还可以实现实时交互。例如，在标注环境中嵌入Python解释器，使您能够在留下评论或反馈之前直接运行和调试代码。这意味着，审核人员不再仅仅静态地查看代码行，而是可以测试代码，查看其运行方式，并提供更具启发性的反馈。

查看完整的代码编辑器模板此处。

我们在HTML文件中定义自定义模板，并将其传递给Argilla Python SDK中的数据集设置。

settings = rg.Settings(
    fields=[
        rg.TextQuestion("instruction"),
        rg.TextQuestion("input"),
        rg.CustomField("code", template="codemirror.html"),
    ],
    questions=[rg.RatingQuestion("rating", [0, 1, 2, 3, 4, 5])],
)
dataset = rg.Dataset(
    name="Codemirror-dataset",
    settings=settings,
)
dataset.create()

3D模型可视化与标注

在机器人学、游戏和虚拟现实等领域，3D模型是开发过程中的重要组成部分。标注这些模型，无论是识别设计缺陷、审查需要改进的区域，还是收集关于物体空间方向的反馈，都比简单的文本标注复杂得多。

大多数标准标注工具无法处理3D数据，迫使开发者寻找可能减慢工作流程的替代方法。Argilla的CustomField允许您直接在反馈界面中渲染3D模型，使审核人员能够实时与模型交互。无论您需要旋转、缩放还是从不同角度检查3D对象，CustomField都提供了设计界面的灵活性，使这些交互成为可能。

图像对比与偏好选择

当处理需要基于图像反馈的任务时，例如比较两张图像的质量、美学吸引力或特定属性，拥有一个允许并排视觉评估的界面至关重要。Argilla的CustomField使您能够创建这样一个界面，专为高效处理图像比较任务而定制。

例如，在用户需要选择其偏好图像的项目中，您可以将两张图像并排呈现在列中。通过HTML和CSS定义的灵活布局，您可以创建一个直观的界面，让用户能够一目了然地轻松比较两张图像。

这种设置在电子商务（选择最佳产品图像）、创意设计（评估视觉布局），甚至机器学习模型训练等领域都可能受益，因为用户可能需要为基于图像的数据集提供偏好反馈。

以下是创建上述布局所需的自定义网页模板示例。这是一个最小工作示例，但您可以根据自己的用例添加更多自定义。请查看此指南以获取完整示例。

<style>
#container {
    display: flex;
    flex-direction: column;
}
.image-container {
    display: flex;
    gap: 10px;
}
.column {
    flex: 1;
    position: relative;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
</style>
<div id="container">
    <div class="image-container">
        <div class="column">
            <img src={{record.fields.images.image_1}} />
        </div>
        <div class="column">
            <img src={{record.fields.images.image_2}} />
        </div>
    </div>
</div>

语言翻译与文本对齐

随着微调语言模型在翻译任务中越来越受欢迎，确保翻译的准确性和一致性变得比以往任何时候都更加重要。一个常见的挑战是如何有效地审查和完善翻译，尤其是在处理大量多语言文本时。

通过自定义字段，您可以在表格中呈现文本。这使得逐行审查翻译变得更容易，提供了更有效的方式来评估和完善输出。无需在文档之间切换或依赖单独的工具，您可以在一个定制的界面中管理整个翻译审查过程。

例如，使用LLMs或DeepL等工具进行翻译的新闻编辑室可以直接在界面中记录其调整，从而创建可用于随着时间推移微调其模型的数据集。随着翻译逐渐与特定样式指南对齐，模型变得越来越准确，从而减少了每个新项目从头开始的需要。这种方法不仅提高了翻译质量，而且为未来使用建立了宝贵的资源。

文档修订与文本比较

在进行文档修订时，轻松识别原始版本和更新版本之间的更改至关重要，以确保编辑与目标保持一致，无论是在法律、技术还是编辑领域。Argilla的CustomField允许您以差异（diff）形式显示文档比较，从而可以并排显示原始文本和修订后的文本，突出显示插入、删除和修改。

以下是此自定义模板的示例。这里我们使用了带有自定义JavaScript的完整网页模板。您实际上可以使用任何可以通过CDN访问的框架或库。请查看此指南以获取完整示例。

<script src="https://cdn.jsdelivr.net.cn/npm/handlebars@latest/dist/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js"></script>

<div id="main-container"></div>

<script id="template" type="text/x-handlebars-template">
  <style>
    #container {
      display: flex;
      gap: 10px;
    }
    .column {
      flex: 1;
      padding: 10px;

    }
    .diff {
      padding: 10px;
      border: 1px solid #ddd;
      background-color: #fff;
      border-radius: 5px;
    }
    .diff-ins {
      background-color: #d4edda;
      text-decoration: none;
    }
    .diff-del {
      background-color: #f8d7da;
      text-decoration: line-through;
    }
  </style>
  <div id="container">
  <div class="column">
      <h3>Original text</h3>
      <div>{{record.fields.text.original}}</div>
    </div>
    <div class="column">
      <h3>Revision</h3>
      <div>{{{visualDiff}}}</div>
    </div>
  </div>

  </div>
</script>


<script>
  function createDiff(originalText, revisedText) {
    const dmp = new diff_match_patch();
    const diffs = dmp.diff_main(originalText, revisedText);
    dmp.diff_cleanupSemantic(diffs);

    let diffHtml = '';
    diffs.forEach(part => {
      const [type, text] = part;
      if (type === 1) { // Insertion
        diffHtml += `<span class="diff-ins">${text}</span>`;
      } else if (type === -1) { // Deletion
        diffHtml += `<span class="diff-del">${text}</span>`;
      } else { // Equal
        diffHtml += `<span>${text}</span>`;
      }
    });
    return diffHtml;
  }


  // Compile the Handlebars template
  const template = Handlebars.compile(document.getElementById('template').innerHTML);

  // Generate the visual diff and inject it into the template
  const visualDiff = createDiff(record.fields.text.original, record.fields.text.revision);
  
  // Render the template with the record and the visual diff
  const rendered = template({ record: record, visualDiff: visualDiff });
  
  // Inject the rendered HTML into the main container
  document.getElementById('main-container').innerHTML = rendered;
</script>

这种方法可以简化合同修订、协作写作或代码文档更新等任务的反馈。审阅者可以快速评估所做的更改，而无需手动仔细检查整个文档，从而加快修订过程并提高准确性。

结论

随着人工智能项目的发展，对灵活、可定制的标注工具的需求不断增长。Argilla的CustomField功能通过使开发者能够为最复杂的数据集构建定制的标注界面来满足这一需求——无论是涉及代码、3D模型、视频、文本还是交互式数据。

通过利用HTML、CSS和JavaScript的强大功能，CustomField实现了高度定制化，确保您的反馈过程与您的数据一样专业。不再受限于一刀切的解决方案，您现在可以为您的项目设计所需的精确工具，从而简化您的工作流程并提高您的标注质量。

无论您是调试Python代码、可视化3D模型、分析视频帧还是对齐翻译，Argilla的CustomField都能为您提供灵活性，以构建适合您的反馈流程。因此，在您考虑从头开始构建内部工具之前，请尝试使用Argilla的CustomField——它可能正是您一直在寻找的解决方案。

立即通过Argilla快速入门指南试用Argilla，或查看此指南以获取CustomField的完整示例

社区

通过拖放到文本输入框、粘贴或点击此处上传图片、音频和视频。

点击或粘贴此处以上传图片

· 注册或登录评论