Skip to content

UI 配置

自定義標註介面的外觀和行為。

Potato 提供了豐富的配置選項來自定義使用者介面。這些設定允許管理員控制標註介面的外觀、行為和功能。

標註頁面的區域 — 每個區域由幾個可覆蓋的配置鍵決定標註頁面的區域

配置結構

所有 UI 配置選項在配置檔案的 ui 部分中定義：

yaml
ui:
  # UI configuration options go here

實例高度控制

控制實例文本顯示區域的最大高度，以便在處理長文本時保持標註選項可見。

yaml
ui:
  max_instance_height: 300  # 300 pixels maximum height

優點：

  • 長文本實例不再將標註選項推出檢視
  • 標註選項保持在可預測的位置
  • 為長內容提供可滾動的文本區域

標籤顏色

為所有標註類型配置自定義標籤顏色。

全域標籤顏色

為所有方案定義標籤顏色：

yaml
ui:
  label_colors:
    sentiment:
      positive: "#22C55E"      # Green
      negative: "#EF4444"      # Red
      neutral: "#9CA3AF"       # Gray
    emotion:
      happy: "rgba(34, 197, 94, 0.8)"
      sad: "rgba(59, 130, 246, 0.8)"

內聯標籤顏色

直接在每個標籤上定義顏色：

yaml
annotation_schemes:
  - annotation_type: radio
    name: sentiment
    labels:
      - name: positive
        color: "#22C55E"
        tooltip: "Positive sentiment"
      - name: negative
        color: "#EF4444"

片段專用顏色（舊版）

原始的僅限片段的顏色配置：

yaml
ui:
  spans:
    span_colors:
      sentiment:
        positive: "(220, 252, 231)"  # RGB format
        negative: "(254, 226, 226)"

顏色格式支援

所有顏色選項支援多種格式：

  • 十六進位制："#FF8000" 或 "#F80"
  • RGB："(255, 128, 0)" 或 "rgb(255, 128, 0)"
  • RGBA："rgba(255, 128, 0, 0.8)"
  • 命名色："red"、"blue"、"green"

預設顏色

如果未指定自定義顏色，Potato 會根據標籤名稱分配顏色：

標籤名稱顏色
positive, yes, true, happy綠色
negative, no, false, angry紅色
neutral, maybe灰色
mixed, surprise琥珀色
sad藍色

介面顯示選項

控制介面元素的可見性和功能：

yaml
ui:
  show_progress: true        # Show progress indicators
  show_instructions: true    # Show instruction panels
  allow_navigation: true     # Allow navigation between instances
  allow_editing: true        # Allow editing of annotations

任務佈局自定義

Potato 會根據您的配置自動生成 HTML 佈局。

自動生成佈局

執行 Potato 時，會在以下位置生成佈局檔案：

text
{task_dir}/annotation_layouts/annotation_layout.html

當配置更改時，此檔案會重新生成。

自定義任務佈局

如需更多控制，可提供自定義 HTML 檔案：

yaml
task_layout: "my_custom_layout.html"

建立自定義佈局：

  1. 從生成的佈局開始作為模板
  2. 修改 HTML，新增自定義元素
  3. 在配置中引用您的檔案

有關使用 CSS 網格、顏色編碼選項和部分樣式建立複雜自定義佈局的詳細指導，請參閱佈局自定義指南。

佈局結構要求

自定義佈局必須包含某些元素：

元素用途是否必須
.annotation-form每個方案的容器是
data-annotation-id匹配配置的唯一 ID是
data-schema-name顏色的方案名稱推薦
.ai-helpAI 助手按鈕如果使用 AI

CSS 類參考

表單結構：

  • .annotation-form - 主表單容器
  • .annotation-form-header - 帶名稱和 AI 按鈕的標題
  • .annotation-form-body - 帶輸入選項的主體
  • .annotation-name - 方案名稱顯示
  • .annotation-desc - 描述文本

輸入選項：

  • .shadcn-radio-option - 單選按鈕選項
  • .shadcn-checkbox-option - 核取方塊選項
  • .shadcn-span-option - 片段標註選項

站點目錄配置

自定義模板

yaml
site_dir: "custom_templates"  # Use custom templates
# OR
site_dir: "default"           # Use built-in templates

自定義 JavaScript

注入自定義 JavaScript 程式碼：

yaml
customjs: "http://localhost:8080/custom.js"
customjs_hostname: "localhost:8080"

完整示例

yaml
annotation_task_name: "UI Configuration Example"
 
# Annotation schemes with inline colors
annotation_schemes:
  - annotation_type: radio
    name: sentiment
    description: "What is the overall sentiment?"
    labels:
      - name: positive
        color: "#22C55E"
        tooltip: "Positive sentiment"
        key_value: p
      - name: negative
        color: "#EF4444"
        tooltip: "Negative sentiment"
        key_value: n
      - name: neutral
        color: "#9CA3AF"
        key_value: u
 
# UI Configuration
ui:
  max_instance_height: 400
 
  label_colors:
 
  show_progress: true
  show_instructions: true
  allow_navigation: true
  allow_editing: true
 
site_dir: "default"

瀏覽器相容性

所有 UI 配置選項在現代瀏覽器中均可使用：

  • Chrome/Edge：完全支援，包括自定義捲軸樣式
  • Firefox：完全支援，使用標準捲軸
  • Safari：完全支援，使用標準捲軸
  • 移動端：響應式設計，支援觸控互動

最佳實踐

  1. 測試配置：始終使用您的具體資料測試 UI 更改
  2. 考慮可訪問性：確保顏色選擇提供足夠的對比度
  3. 移動端響應：在移動裝置上測試配置
  4. 效能：大型自定義 JavaScript 檔案可能影響載入時間

故障排除

顏色不顯示

確保 RGB 格式使用括號和空格："(255, 128, 0)"

高度限制不生效

檢查 max_instance_height 是否為正整數。

自定義模板未載入

驗證 site_dir 路徑存在並包含有效模板。

延伸閱讀

有關實現細節，請參閱源文件。