このページはまだお使いの言語に翻訳されていません。英語版を表示しています。

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"

स्पैन-विशिष्ट रंग (Legacy)

मूल स्पैन-ओनली रंग कॉन्फ़िगरेशन:

yaml

ui:
  spans:
    span_colors:
      sentiment:
        positive: "(220, 252, 231)"  # RGB format
        negative: "(254, 226, 226)"

रंग प्रारूप समर्थन

सभी रंग विकल्प एकाधिक प्रारूपों का समर्थन करते हैं:

Hex: "#FF8000" या "#F80"
RGB: "(255, 128, 0)" या "rgb(255, 128, 0)"
RGBA: "rgba(255, 128, 0, 0.8)"
Named: "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 ग्रिड, कलर-कोडेड विकल्पों, और सेक्शन स्टाइलिंग के साथ परिष्कृत कस्टम लेआउट बनाने के लिए विस्तृत मार्गदर्शन के लिए, Layout Customization गाइड देखें।

लेआउट संरचना आवश्यकताएं

कस्टम लेआउट में कुछ तत्व शामिल होने चाहिए:

तत्व	उद्देश्य	आवश्यक
`.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: मानक स्क्रॉलबार के साथ पूर्ण समर्थन
Mobile: टच-फ्रेंडली इंटरैक्शन के साथ रिस्पॉन्सिव डिज़ाइन

सर्वोत्तम अभ्यास

अपनी कॉन्फ़िगरेशन परीक्षण करें: हमेशा अपने विशिष्ट डेटा के साथ UI परिवर्तनों का परीक्षण करें
पहुंच योग्यता पर विचार करें: सुनिश्चित करें कि रंग विकल्प पर्याप्त कंट्रास्ट प्रदान करते हैं
मोबाइल रिस्पॉन्सिवनेस: मोबाइल उपकरणों पर कॉन्फ़िगरेशन परीक्षण करें
प्रदर्शन: बड़ी कस्टम JavaScript फ़ाइलें लोडिंग समय को प्रभावित कर सकती हैं

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

रंग दिखाई नहीं दे रहे

सुनिश्चित करें कि RGB प्रारूप कोष्ठक और स्पेस का उपयोग करता है: "(255, 128, 0)"

ऊँचाई सीमा काम नहीं कर रही

जांचें कि max_instance_height एक सकारात्मक पूर्णांक है।

कस्टम टेम्पलेट लोड नहीं हो रहे

सत्यापित करें कि site_dir पथ मौजूद है और वैध टेम्पलेट शामिल हैं।

आगे पढ़ें

Layout Customization - कस्टम HTML टेम्पलेट और CSS
Instance Display - सामग्री प्रदर्शन कॉन्फ़िगर करें
Annotation Schemes - स्कीमा कॉन्फ़िगरेशन
Productivity Features - कीबोर्ड शॉर्टकट और टूलटिप
AI Support - AI सहायक कॉन्फ़िगरेशन

कार्यान्वयन विवरण के लिए, स्रोत दस्तावेज़ देखें।