Skip to content
यह पृष्ठ अभी आपकी भाषा में उपलब्ध नहीं है। अंग्रेज़ी संस्करण दिखाया जा रहा है।

Layout Customization

HTML templates और CSS के साथ annotation tasks के लिए custom visual layouts बनाएँ।

Layout Customization

v2.1.0 में नया

Potato annotation interface layout को customize करने के लिए दो approaches प्रदान करता है:

  1. Auto-generated layouts: Potato एक HTML layout file generate करता है जिसे आप edit कर सकते हैं
  2. Custom layout files: Styling पर पूर्ण नियंत्रण के साथ अपना HTML template बनाएँ

Quick Start

Auto-generated Layouts का उपयोग करना

  1. अपना server एक बार चलाएँ — Potato layouts/task_layout.html बनाता है
  2. Styling customize करने के लिए generated file edit करें
  3. आपके परिवर्तन server restarts के बाद persist करते हैं (जब तक आप config में annotation_schemes संशोधित नहीं करते)

Custom Layout Files का उपयोग करना

  1. अपनी layout file बनाएँ (जैसे, layouts/custom_task_layout.html)
  2. अपने config में reference करें:
yaml
task_layout: layouts/custom_task_layout.html

Layout File Structure

एक custom layout file में शामिल होना चाहिए:

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>

आवश्यक Form Attributes

प्रत्येक annotation scheme को चाहिए:

Attributeविवरण
idआपके config के annotation_schemes में name से बिल्कुल मेल खाना चाहिए
classannotation-form और type शामिल करें (जैसे, radio, multiselect)
data-annotation-idअनुक्रमिक index (0, 1, 2...)
schemaFieldset और inputs पर attribute schema name से मेल खाता हुआ

आवश्यक Input Attributes

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

उदाहरण Layouts

Potato में उन्नत customization दर्शाने वाले तीन उदाहरण layouts शामिल हैं:

1. Content Moderation Dashboard

Location: project-hub/layout-examples/content-moderation/

Content metadata के साथ warning banner header, violation categories के लिए 2-column grid, color-coded severity levels, और professional moderation workflow प्रदर्शित करता है।

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

2. Customer Service Dialogue QA

Location: project-hub/layout-examples/dialogue-qa/

Metadata badges के साथ case header, grouped assessment sections, circular Likert-scale ratings, quality issues checklist, और color-coded resolution indicators प्रदर्शित करता है।

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

3. Medical Image Review

Location: project-hub/layout-examples/medical-review/

Professional medical UI styling, location/severity के लिए two-column layout, grouped findings sections, structured medical reporting, और recommendation cards with descriptions प्रदर्शित करता है।

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

CSS Techniques

Grid Layouts

Multi-column layouts बनाएँ:

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

Color-Coded Options

Severity colors के साथ radio buttons style करें:

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

Section Styling

Visual groupings बनाएँ:

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

Circular Likert Ratings

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 के साथ मिलाना

Custom layouts instance_display कॉन्फ़िगरेशन के साथ काम करते हैं। Instance content (images, text, dialogues) आपके annotation forms के ऊपर अलग से render होती है।

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. Schema names मेल खाएँ: Form id बिल्कुल annotation_schemes में name से मेल खाना चाहिए
  2. अनुक्रमिक annotation IDs: data-annotation-id के लिए 0, 1, 2... का उपयोग करें
  3. आवश्यक handlers शामिल करें: Radio के लिए onclick="onlyOne(this);registerAnnotation(this);" और checkbox के लिए onclick="registerAnnotation(this);" का उपयोग करें
  4. Responsiveness test करें: Mobile support के लिए media queries का उपयोग करें
  5. Accessibility बनाए रखें: Proper labels का उपयोग करें और keyboard navigation बनाए रखें

समस्या निवारण

Annotations सहेजे नहीं जा रहे

जांचें कि:

  • Form id annotation scheme name से मेल खाता है
  • Inputs में schema और label_name attributes हैं
  • Click handlers (registerAnnotation) मौजूद हैं

Styles लागू नहीं हो रहे

  • सुनिश्चित करें कि CSS specificity defaults override करने के लिए पर्याप्त उच्च है
  • जांचें कि आपका {'<'}style{'>'} block layout file के अंदर है
  • Applied styles inspect करने के लिए browser dev tools का उपयोग करें

Layout लोड नहीं हो रहा

  • task_layout में path config file के relative है, verify करें
  • HTML syntax errors जांचें
  • Error messages के लिए server logs समीक्षा करें

आगे पढ़ें

कार्यान्वयन विवरण के लिए, source documentation देखें।