إعدادات واجهة المستخدم

خصّص مظهر وسلوك واجهة التوسيم.

إعدادات واجهة المستخدم

يوفر Potato خيارات إعدادات واسعة لتخصيص واجهة المستخدم. تتيح هذه الإعدادات للمسؤولين التحكم في مظهر واجهة التوسيم وسلوكها ووظائفها.

هيكل الإعدادات

يتم تعريف جميع خيارات إعدادات واجهة المستخدم في قسم 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)"

دعم صيغ الألوان

تدعم جميع خيارات الألوان صيغًا متعددة:

Hex: "#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`	معرّف فريد مطابق للإعدادات	نعم
`data-schema-name`	اسم المخطط للألوان	موصى به
`.ai-help`	أزرار مساعد الذكاء الاصطناعي	إذا كنت تستخدم الذكاء الاصطناعي

مرجع فئات CSS

هيكل النموذج:

.annotation-form - حاوية النموذج الرئيسية
.annotation-form-header - الترويسة مع الاسم وأزرار الذكاء الاصطناعي
.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"

توافق المتصفحات

تعمل جميع خيارات إعدادات واجهة المستخدم عبر المتصفحات الحديثة:

Chrome/Edge: دعم كامل مع تنسيق شريط التمرير المخصص
Firefox: دعم كامل مع شريط التمرير القياسي
Safari: دعم كامل مع شريط التمرير القياسي
الهاتف المحمول: تصميم متجاوب مع تفاعلات صديقة للمس

أفضل الممارسات

اختبر إعداداتك: اختبر دائمًا تغييرات واجهة المستخدم مع بياناتك المحددة
اعتبر إمكانية الوصول: تأكد من أن اختيارات الألوان توفر تباينًا كافيًا
التجاوب مع الهاتف: اختبر الإعدادات على الأجهزة المحمولة
الأداء: ملفات JavaScript المخصصة الكبيرة قد تؤثر على أوقات التحميل

استكشاف الأخطاء وإصلاحها

الألوان لا تظهر

تأكد من أن صيغة RGB تستخدم أقواسًا ومسافات: "(255, 128, 0)"

حد الارتفاع لا يعمل

تحقق من أن max_instance_height عدد صحيح موجب.

القوالب المخصصة لا تُحمّل

تحقق من أن مسار site_dir موجود ويحتوي على قوالب صالحة.

قراءة إضافية

تخصيص التخطيط - قوالب HTML مخصصة وCSS
عرض العناصر - إعداد عرض المحتوى
مخططات التوسيم - إعداد المخططات
ميزات الإنتاجية - اختصارات لوحة المفاتيح والتلميحات
دعم الذكاء الاصطناعي - إعداد مساعد الذكاء الاصطناعي

لمزيد من التفاصيل التقنية، راجع الوثائق المصدرية.