并排LLM输出对比

有时您需要比较两个不同模型的响应，或将模型响应与真实答案进行对比。在此模板中，两个选项会并排显示，然后您点击选择符合标准的那个。

关于如何使用此模板与Label Studio SDK的教程，请参阅Evaluate LLM Responses。

配置标注界面

创建项目并设置以下标注配置：

<View className="root">
  <Style>
    .root {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Roboto',
        sans-serif;
      line-height: 1.6;
      background-color: #f0f0f0;
    }

    .container {
      margin: 0 auto;
      padding: 20px;
      background-color: #ffffff;
      border-radius: 5px;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
    }

    .prompt {
      padding: 20px;
      background-color: #0084ff;
      color: #ffffff;
      border-radius: 5px;
      margin-bottom: 20px;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.1);
    }

    .answers {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 20px;
    }

    .answer-box {
      flex-basis: 49%;
      padding: 20px;
      background-color: rgba(44, 62, 80, 0.9);
      color: #ffffff;
      border-radius: 5px;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.1);
    }

    .answer-box p {
      word-wrap: break-word;
    }

    .answer-box:hover {
      background-color: rgba(52, 73, 94, 0.9);
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .lsf-richtext__line:hover {
      background: unset;
    }

    .answer-box .lsf-object {
      padding: 20px
    }
  </Style>
  <View className="container">
    <View className="prompt">
      <Text name="prompt" value="$prompt" />
    </View>
    <View className="answers">
      <Pairwise name="comparison" toName="answer1,answer2"
                selectionStyle="background-color: #27ae60; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); border: 2px solid #2ecc71; cursor: pointer; transition: all 0.3s ease;" />
      <View className="answer-box">
        <Text name="answer1" value="$answer1" />
      </View>
      <View className="answer-box">
        <Text name="answer2" value="$answer2" />
      </View>
    </View>
  </View>
</View>

此配置包含以下元素：

• <View> - All labeling configurations must include a base View tag. In this configuration, the View tag is used to configure the display of blocks, similar to the div tag in HTML. It helps in organizing the layout of the labeling interface.
• <Style> - Style标签用于定义应用于View内元素的CSS样式。在此配置中，它为标注界面布局的各个部分设置了不同类的样式。
• - Text标签用于显示输入数据提供的文本内容。根据下面的示例输入数据，文本块会显示来自prompt或某个响应(answer1或answer2)的信息。您可能需要调整这些值以匹配您自己的JSON数据结构。
• - Pairwise标签用于显示选择元素。它提供选项供用户点击选择。了解更多关于Label Studio成对比较模板的信息。

输入数据

在这个示例中，您包含了提示语以及来自不同大语言模型的两个响应。

[
  {
    "data": {
      "prompt": "What is the capital of France?",
      "answer1": "Paris",
      "answer2": "London"
    }
  }
]

相关标签

• 查看
• 样式
• 文本
• Pairwise