Skip to content

레이아웃 사용자 정의

HTML 템플릿과 CSS로 Potato에서 사용자 정의 주석 레이아웃을 디자인합니다 — 나란히 비교, 다중 열 스키마, 완전한 사용자 정의 표시 블록 구조.

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과 일치해야 합니다
classannotation-form과 유형(예: radio, multiselect)을 포함합니다
data-annotation-id순차 인덱스(0, 1, 2...)
schema스키마 이름과 일치하는 fieldset 및 입력의 속성

필수 입력 속성

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. 고객 서비스 대화 QA

위치: 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 스타일링, 위치/심각도를 위한 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;
}

원형 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 구문 오류를 확인합니다
  • 서버 로그에서 오류 메시지를 검토합니다

더 읽어보기

구현 세부 사항은 원본 문서를 참조하십시오.