UI 구성

Potato의 주석 인터페이스를 사용자 정의합니다 — 헤더 레이아웃, 사이드바 섹션, 키보드 단축키, 인스턴스 정렬, 페이지 매김, 표시 블록 배치.

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"

사용자 정의 레이아웃 만들기:

생성된 레이아웃을 템플릿으로 시작합니다
HTML을 수정하고 사용자 정의 요소를 추가합니다
구성에서 파일을 참조합니다

CSS 그리드, 색상으로 구분된 옵션, 섹션 스타일링을 갖춘 정교한 사용자 정의 레이아웃 작성에 대한 자세한 안내는 레이아웃 사용자 정의 가이드를 참조하세요.

레이아웃 구조 요구 사항

사용자 정의 레이아웃에는 특정 요소가 포함되어야 합니다.

요소	목적	필수 여부
`.annotation-form`	각 스키마의 컨테이너	예
`data-annotation-id`	구성과 일치하는 고유 ID	예
`data-schema-name`	색상을 위한 스키마 이름	권장
`.ai-help`	AI 어시스턴트 버튼	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: 표준 스크롤바를 갖춘 완전 지원
모바일: 터치에 적합한 상호작용을 갖춘 반응형 디자인

모범 사례

구성 테스트: 항상 특정 데이터로 UI 변경 사항을 테스트하세요
접근성 고려: 색상 선택이 충분한 대비를 제공하는지 확인하세요
모바일 반응성: 모바일 기기에서 구성을 테스트하세요
성능: 큰 사용자 정의 JavaScript 파일은 로딩 시간에 영향을 줄 수 있습니다

문제 해결

색상이 나타나지 않음

RGB 형식이 괄호와 공백을 사용하는지 확인하세요: "(255, 128, 0)"

높이 제한이 작동하지 않음

max_instance_height가 양의 정수인지 확인하세요.

사용자 정의 템플릿이 로드되지 않음

site_dir 경로가 존재하고 유효한 템플릿을 포함하는지 확인하세요.

추가 자료

레이아웃 사용자 정의 - 사용자 정의 HTML 템플릿 및 CSS
인스턴스 표시 - 콘텐츠 표시 구성
주석 스키마 - 스키마 구성
생산성 기능 - 키보드 단축키 및 툴팁
AI 지원 - AI 어시스턴트 구성

구현 세부 정보는 소스 문서를 참조하세요.