Skip to content

UI設定

アノテーションインターフェースの外観と動作をカスタマイズします。

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)"

カラー形式のサポート

すべてのカラーオプションが複数の形式をサポート：

  • 16進数: "#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:
    sentiment:
      positive: "rgba(34, 197, 94, 0.8)"
      negative: "rgba(239, 68, 68, 0.8)"
      neutral: "rgba(156, 163, 175, 0.8)"
 
  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パスが存在し、有効なテンプレートを含んでいることを確認してください。

関連資料

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