UI-Konfiguration

Erscheinungsbild und Verhalten der Annotationsoberfläche anpassen.

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:

yaml

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.

yaml

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:

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

Inline-Beschriftungsfarben

Farben direkt an jeder Beschriftung definieren:

yaml

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:

yaml

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:

Beschriftungsname	Farbe
positive, yes, true, happy	Grün
negative, no, false, angry	Rot
neutral, maybe	Grau
mixed, surprise	Bernstein
sad	Blau

Anzeigeoptionen für die Oberfläche

Sichtbarkeit und Funktionalität von Oberflächenelementen steuern:

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

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:

text

{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:

yaml

task_layout: "my_custom_layout.html"

Erstellen eines benutzerdefinierten Layouts:

Beginnen Sie mit dem generierten Layout als Vorlage
HTML anpassen, benutzerdefinierte Elemente hinzufügen
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:

Element	Zweck	Erforderlich
`.annotation-form`	Container für jedes Schema	Ja
`data-annotation-id`	Eindeutige ID entsprechend der Konfiguration	Ja
`data-schema-name`	Schemaname für Farben	Empfohlen
`.ai-help`	KI-Assistenz-Schaltflächen	Bei KI-Nutzung

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

yaml

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

Benutzerdefiniertes JavaScript

Benutzerdefiniertes JavaScript einbinden:

yaml

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

Vollständiges Beispiel

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"

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

Konfiguration testen: UI-Änderungen immer mit Ihren spezifischen Daten testen
Barrierefreiheit berücksichtigen: Farbauswahl mit ausreichendem Kontrast sicherstellen
Mobile Responsivität: Konfigurationen auf Mobilgeräten testen
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.