Skip to content

レイアウトカスタマイズ

HTMLテンプレートとCSSを使用してアノテーションタスクのカスタムビジュアルレイアウトを作成する。

レイアウトカスタマイズ

v2.1.0で新規追加

Potatoはアノテーションインターフェースのレイアウトをカスタマイズするための2つのアプローチを提供します：

  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と一致する必要がある
classannotation-formとタイプ（例：radio、multiselect）を含める
data-annotation-id連番インデックス（0、1、2...）
schemaスキーマ名と一致するfieldsetとinputの属性

必須の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には高度なカスタマイズを示す3つのレイアウト例が含まれています：

1. コンテンツモデレーションダッシュボード

場所：project-hub/layout-examples/content-moderation/

コンテンツメタデータ付きの警告バナーヘッダー、違反カテゴリの2列グリッド、色分けされた重大度レベル、プロフェッショナルなモデレーションワークフローを特徴としています。

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

2. カスタマーサービス対話QA

場所：project-hub/layout-examples/dialogue-qa/

メタデータバッジ付きのケースヘッダー、グループ化された評価セクション、円形のリッカート尺度評価、品質問題チェックリスト、色分けされた解決インジケーターを特徴としています。

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

3. 医療画像レビュー

場所：project-hub/layout-examples/medical-review/

プロフェッショナルな医療UIスタイリング、部位/重大度の2列レイアウト、グループ化された所見セクション、構造化された医療報告、説明付きの推奨カードを特徴としています。

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;
}

円形リッカート評価

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. 必須ハンドラーを含める：radioにはonclick="onlyOne(this);registerAnnotation(this);"、checkboxにはonclick="registerAnnotation(this);"を使用する
  4. レスポンシブ性をテストする：モバイルサポート用にメディアクエリを使用する
  5. アクセシビリティを維持する：適切なラベルを使用し、キーボードナビゲーションを維持する

トラブルシューティング

アノテーションが保存されない

以下を確認する：

  • フォームのidがアノテーションスキーマのnameと一致している
  • inputにschemaとlabel_name属性がある
  • クリックハンドラー（registerAnnotation）が存在する

スタイルが適用されない

  • CSS特異性がデフォルトを上書きするのに十分高いことを確認する
  • <style>ブロックがレイアウトファイル内にあることを確認する
  • ブラウザ開発ツールを使用して適用されたスタイルを検査する

レイアウトが読み込まれない

  • task_layoutのパスが設定ファイルからの相対パスであることを確認する
  • HTML構文エラーを確認する
  • サーバーログでエラーメッセージを確認する

関連情報

実装の詳細については、ソースドキュメントを参照してください。