Skip to content

佈局自定義

使用 HTML 模板和 CSS 為標註任務建立自定義視覺佈局。

v2.1.0 新增

Potato 提供兩種方法來自定義標註介面佈局：

  1. 自動生成佈局：Potato 生成一個 HTML 佈局檔案，你可以編輯它
  2. 自定義佈局檔案：建立你自己的 HTML 模板，完全控制樣式

快速開始

使用自動生成佈局

  1. 執行一次伺服器——Potato 建立 layouts/task_layout.html
  2. 編輯生成的檔案來自定義樣式
  3. 你的更改在伺服器重啟後仍然有效（除非你修改了配置中的 annotation_schemes）

使用自定義佈局檔案

  1. 建立你的佈局檔案（例如 layouts/custom_task_layout.html）
  2. 在配置中引用它：
yaml
task_layout: layouts/custom_task_layout.html

佈局檔案結構

自定義佈局檔案必須包含：

html
<style>
    /* Your custom CSS */
</style>
 
<div class="annotation_schema">
    <!-- Your annotation forms -->
    <form id="schema_name" class="annotation-form radio" data-annotation-id="0">
        <fieldset schema="schema_name">
            <legend>Question text</legend>
            <!-- Input elements -->
        </fieldset>
    </form>
</div>

必需的表單屬性

每個標註模式需要：

屬性描述
id必須匹配配置中 annotation_schemes 的 name
class包含 annotation-form 和類型（如 radio、multiselect）
data-annotation-id順序索引（0, 1, 2...）
schemafieldset 和 input 上的屬性，匹配模式名稱

必需的輸入屬性

html
<input class="schema_name annotation-input"
       type="radio"
       name="schema_name"
       value="label_value"
       schema="schema_name"
       label_name="label_value"
       onclick="onlyOne(this);registerAnnotation(this);">

示例佈局

Potato 包含三個示例佈局，展示高階自定義：

1. 內容稽核儀表板

位置：project-hub/layout-examples/content-moderation/

特點包括帶內容後設資料的警告橫幅頭部、違規類別的 2 列網格、顏色編碼的嚴重程度級別和專業的稽核工作流。

bash
python -m potato start project-hub/layout-examples/content-moderation/config.yaml -p 8000

2. 客戶服務對話品質保證

位置：project-hub/layout-examples/dialogue-qa/

特點包括帶後設資料徽章的案例頭部、分組評估部分、圓形 Likert 量表評分、品質問題清單和顏色編碼的解決方案指標。

bash
python -m potato start project-hub/layout-examples/dialogue-qa/config.yaml -p 8000

3. 醫學影像稽核

位置：project-hub/layout-examples/medical-review/

特點包括專業的醫療 UI 樣式、位置/嚴重程度的雙列布局、分組檢查結果部分、結構化的醫療報告和帶描述的建議卡片。

bash
python -m potato start project-hub/layout-examples/medical-review/config.yaml -p 8000

CSS 技巧

網格佈局

建立多列布局：

css
.annotation-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
 
.full-width {
    grid-column: 1 / -1;
}
 
@media (max-width: 768px) {
    .annotation-grid {
        grid-template-columns: 1fr;
    }
}

顏色編碼選項

使用嚴重程度顏色樣式化單選按鈕：

css
.severity-option input[type="radio"] {
    position: absolute;
    opacity: 0;
}
 
.severity-label {
    display: block;
    padding: 10px;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}
 
/* Green for "None" */
.severity-none .severity-label {
    background: #dcfce7;
    color: #166534;
}
.severity-none input:checked + .severity-label {
    background: #22c55e;
    color: white;
}
 
/* Red for "Severe" */
.severity-severe .severity-label {
    background: #fee2e2;
    color: #991b1b;
}
.severity-severe input:checked + .severity-label {
    background: #ef4444;
    color: white;
}

區塊樣式

建立視覺分組：

css
.annotation-section {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}
 
.section-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #3b82f6;
}

圓形 Likert 評分

css
.likert-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
 
.likert-option input:checked + .likert-circle {
    background: #8b5cf6;
    color: white;
    border-color: #7c3aed;
}

與實例顯示結合

自定義佈局與 instance_display 配置一起工作。實例內容（影像、文本、對話）在標註表單上方單獨渲染。

yaml
instance_display:
  fields:
    - key: image_url
      type: image
      display_options:
        zoomable: true
 
task_layout: layouts/custom_task_layout.html
 
annotation_schemes:
  - annotation_type: radio
    name: category
    labels: [A, B, C]

最佳實踐

  1. 匹配模式名稱：表單 id 必須與 annotation_schemes 中的 name 完全匹配
  2. 順序標註 ID：data-annotation-id 使用 0, 1, 2...
  3. 包含必需的處理程序：單選使用 onclick="onlyOne(this);registerAnnotation(this);"，核取方塊使用 onclick="registerAnnotation(this);"
  4. 測試響應性：使用媒體查詢支援移動端
  5. 保持可訪問性：使用正確的標籤並保持鍵盤導航

故障排除

標註未儲存

檢查：

  • 表單 id 是否匹配標註模式 name
  • 輸入是否有 schema 和 label_name 屬性
  • 是否有點選處理程序（registerAnnotation）

樣式未生效

  • 確保 CSS 特異性足夠高以覆蓋預設值
  • 檢查 <style> 塊是否在佈局檔案內
  • 使用瀏覽器開發工具檢查應用的樣式

佈局未載入

  • 驗證 task_layout 中的路徑相對於配置檔案
  • 檢查 HTML 語法錯誤
  • 檢視伺服器日誌中的錯誤資訊

延伸閱讀

有關實現細節，請參閱原始碼文件。