UI-Konfiguration

Potato bietet umfangreiche Konfigurationsoptionen zur Anpassung der Benutzeroberfläche. Diese Einstellungen ermöglichen Administratoren, das Erscheinungsbild, das Verhalten und die Funktionalität der Annotationsoberfläche zu steuern.

Konfigurationsstruktur

Alle UI-Konfigurationsoptionen werden im Abschnitt ui Ihrer Konfigurationsdatei definiert:

ui:
  # UI configuration options go here

Höhensteuerung für Instanzen

Steuern Sie die maximale Höhe des Anzeigebereichs für Instanztext, damit Annotationsoptionen bei langen Texten sichtbar bleiben.

ui:
  max_instance_height: 300  # 300 pixels maximum height

Vorteile:

• Lange Textinstanzen drängen Annotationsoptionen nicht mehr aus dem Blickfeld
• Annotationsoptionen bleiben an einem vorhersehbaren Ort
• Scrollbarer Textbereich für lange Inhalte

Beschriftungsfarben

Benutzerdefinierte Farben für Beschriftungen in allen Annotationstypen konfigurieren.

Globale Beschriftungsfarben

Farben für Beschriftungen in allen Schemata definieren:

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

Inline-Beschriftungsfarben

Farben direkt an jeder Beschriftung definieren:

annotation_schemes:
  - annotation_type: radio
    name: sentiment
    labels:
      - name: positive
        color: "#22C55E"
        tooltip: "Positive sentiment"
      - name: negative
        color: "#EF4444"

Span-spezifische Farben (Legacy)

Die ursprüngliche, nur für Spans geltende Farbkonfiguration:

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

Unterstützte Farbformate

Alle Farboptionen unterstützen mehrere Formate:

• Hex: "#FF8000" oder "#F80"
• RGB: "(255, 128, 0)" oder "rgb(255, 128, 0)"
• RGBA: "rgba(255, 128, 0, 0.8)"
• Benannt: "red", "blue", "green"

Standardfarben

Wenn keine benutzerdefinierte Farbe angegeben ist, weist Potato Farben basierend auf Beschriftungsnamen zu:

Anzeigeoptionen für die Oberfläche

Sichtbarkeit und Funktionalität von Oberflächenelementen steuern:

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

Anpassung des Aufgaben-Layouts

Potato generiert automatisch HTML-Layouts basierend auf Ihrer Konfiguration.

Automatisch generierte Layouts

Wenn Sie Potato starten, wird eine Layout-Datei generiert unter:

{task_dir}/annotation_layouts/annotation_layout.html

Diese Datei wird neu generiert, wenn sich Ihre Konfiguration ändert.

Benutzerdefinierte Aufgaben-Layouts

Für mehr Kontrolle können Sie eine benutzerdefinierte HTML-Datei angeben:

task_layout: "my_custom_layout.html"

Erstellen eines benutzerdefinierten Layouts:

1. Beginnen Sie mit dem generierten Layout als Vorlage
2. HTML anpassen, benutzerdefinierte Elemente hinzufügen
3. Datei in der Konfiguration referenzieren

Eine ausführliche Anleitung zum Erstellen anspruchsvoller benutzerdefinierter Layouts mit CSS-Grid, farbkodierten Optionen und Abschnittsgestaltung finden Sie im Layout-Anpassungs-Leitfaden.

Anforderungen an die Layout-Struktur

Benutzerdefinierte Layouts müssen bestimmte Elemente enthalten:

CSS-Klassen-Referenz

Formularstruktur:

• .annotation-form – Hauptformular-Container
• .annotation-form-header – Kopfzeile mit Name und KI-Schaltflächen
• .annotation-form-body – Textkörper mit Eingabeoptionen
• .annotation-name – Anzeige des Schemanamens
• .annotation-desc – Beschreibungstext

Eingabeoptionen:

• .shadcn-radio-option – Optionsfeld-Option
• .shadcn-checkbox-option – Kontrollkästchen-Option
• .shadcn-span-option – Span-Annotations-Option

Verzeichniskonfiguration für die Website

Benutzerdefinierte Vorlagen

site_dir: "custom_templates"  # Use custom templates
# OR
site_dir: "default"           # Use built-in templates

Benutzerdefiniertes JavaScript

Benutzerdefiniertes JavaScript einbinden:

customjs: "http://localhost:8080/custom.js"
customjs_hostname: "localhost:8080"

Vollständiges Beispiel

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"

Browser-Kompatibilität

Alle UI-Konfigurationsoptionen funktionieren in modernen Browsern:

• Chrome/Edge: Vollständige Unterstützung mit benutzerdefiniertem Scrollbalken-Styling
• Firefox: Vollständige Unterstützung mit Standard-Scrollbalken
• Safari: Vollständige Unterstützung mit Standard-Scrollbalken
• Mobil: Responsives Design mit touch-freundlichen Interaktionen

Bewährte Vorgehensweisen

1. Konfiguration testen: UI-Änderungen immer mit Ihren spezifischen Daten testen
2. Barrierefreiheit berücksichtigen: Farbauswahl mit ausreichendem Kontrast sicherstellen
3. Mobile Responsivität: Konfigurationen auf Mobilgeräten testen
4. Leistung: Große benutzerdefinierte JavaScript-Dateien können die Ladezeiten beeinträchtigen

Fehlerbehebung

Farben werden nicht angezeigt

Stellen Sie sicher, dass das RGB-Format Klammern und Leerzeichen verwendet: "(255, 128, 0)"

Höhenbegrenzung funktioniert nicht

Überprüfen Sie, dass max_instance_height eine positive ganze Zahl ist.

Benutzerdefinierte Vorlagen werden nicht geladen

Überprüfen Sie, ob der site_dir-Pfad vorhanden ist und gültige Vorlagen enthält.

Weiterführende Informationen

• Layout-Anpassung – Benutzerdefinierte HTML-Vorlagen und CSS
• Instanzanzeige – Inhaltsanzeige konfigurieren
• Annotationsschemata – Schemakonfiguration
• Produktivitätsfunktionen – Tastaturkürzel und Tooltips
• KI-Unterstützung – KI-Assistenz-Konfiguration

Implementierungsdetails finden Sie in der Quelldokumentation.