Skip to content

تخصيص التخطيط

إنشاء تخطيطات مرئية مخصصة لمهام التعليق التوضيحي باستخدام قوالب HTML وCSS.

تخصيص التخطيط

جديد في الإصدار 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يجب أن يتطابق مع name في annotation_schemes في التهيئة
classتضمين annotation-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/

يتميز بشريط تحذير رأسي مع بيانات وصفية للمحتوى، وشبكة من عمودين لفئات المخالفات، ومستويات خطورة مرمّزة بالألوان، وسير عمل إشراف احترافي.

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

2. أسئلة وأجوبة حوار خدمة العملاء

الموقع: 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/

يتميز بتنسيق واجهة طبية احترافية، وتخطيط من عمودين للموقع/الخطورة، وأقسام نتائج مجمّعة، وتقارير طبية منظّمة، وبطاقات توصيات مع أوصاف.

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 النموذج تماماً مع name في annotation_schemes
  2. معرّفات التعليق التوضيحي التسلسلية: استخدم 0، 1، 2... لـ data-annotation-id
  3. تضمين المعالجات المطلوبة: استخدم onclick="onlyOne(this);registerAnnotation(this);" للراديو، وonclick="registerAnnotation(this);" لمربعات الاختيار
  4. اختبار الاستجابة: استخدم استعلامات الوسائط لدعم الأجهزة المحمولة
  5. الحفاظ على إمكانية الوصول: استخدم التسميات المناسبة وحافظ على التنقل بلوحة المفاتيح

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

التعليقات التوضيحية لا تُحفظ

تحقق من:

  • تطابق id النموذج مع name مخطط التعليق التوضيحي
  • وجود سمات schema وlabel_name في المدخلات
  • وجود معالجات النقر (registerAnnotation)

الأنماط لا تُطبّق

  • تأكد من أن خصوصية CSS عالية بما يكفي لتجاوز الإعدادات الافتراضية
  • تحقق من أن كتلة <style> داخل ملف التخطيط
  • استخدم أدوات المطور في المتصفح لفحص الأنماط المطبّقة

التخطيط لا يُحمّل

  • تحقق من أن المسار في task_layout نسبي لملف التهيئة
  • تحقق من أخطاء بناء جملة HTML
  • راجع سجلات الخادم بحثاً عن رسائل الخطأ

قراءات إضافية

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