Layout-Anpassung

Neu in v2.1.0

Potato bietet zwei Ansätze zur Anpassung des Annotationsoberflächen-Layouts:

1. Automatisch generierte Layouts: Potato generiert eine HTML-Layout-Datei, die Sie bearbeiten können
2. Benutzerdefinierte Layout-Dateien: Erstellen Sie Ihre eigene HTML-Vorlage mit voller Kontrolle über das Styling

Schnellstart

Automatisch generierte Layouts verwenden

1. Starten Sie Ihren Server einmal – Potato erstellt layouts/task_layout.html
2. Bearbeiten Sie die generierte Datei, um das Styling anzupassen
3. Ihre Änderungen bleiben über Serverneustarts hinweg erhalten (außer Sie ändern annotation_schemes in der Konfiguration)

Benutzerdefinierte Layout-Dateien verwenden

1. Erstellen Sie Ihre Layout-Datei (z. B. layouts/custom_task_layout.html)
2. Referenzieren Sie sie in Ihrer Konfiguration:

task_layout: layouts/custom_task_layout.html

Layout-Dateistruktur

Eine benutzerdefinierte Layout-Datei muss Folgendes enthalten:

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

Erforderliche Formularattribute

Jedes Annotationsschema benötigt:

Erforderliche Eingabeattribute

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

Beispiel-Layouts

Potato enthält drei Beispiel-Layouts, die erweiterte Anpassungen demonstrieren:

1. Inhaltsmoderation-Dashboard

Speicherort: project-hub/layout-examples/content-moderation/

Enthält ein Warnbanner-Header mit Inhaltsmetadaten, ein 2-spaltiges Raster für Verletzungskategorien, farbcodierte Schweregrade und einen professionellen Moderations-Workflow.

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

2. Kundendienst-Dialog-QA

Speicherort: project-hub/layout-examples/dialogue-qa/

Enthält einen Fall-Header mit Metadaten-Badges, gruppierte Bewertungsabschnitte, kreisförmige Likert-Bewertungen, eine Qualitätsprobleme-Checkliste und farbcodierte Lösungsindikatoren.

python -m potato start project-hub/layout-examples/dialogue-qa/config.yaml -p 8000

3. Medizinische Bildüberprüfung

Speicherort: project-hub/layout-examples/medical-review/

Enthält professionelles medizinisches UI-Styling, ein zweispaltiges Layout für Lage/Schweregrad, gruppierte Befundsabschnitte, strukturierte medizinische Berichterstattung und Empfehlungskarten mit Beschreibungen.

python -m potato start project-hub/layout-examples/medical-review/config.yaml -p 8000

CSS-Techniken

Raster-Layouts

Mehrspaltige Layouts erstellen:

.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;
    }
}

Farbcodierte Optionen

Radio-Buttons mit Schweregradfarben gestalten:

.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;
}

Abschnitts-Styling

Visuelle Gruppierungen erstellen:

.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;
}

Kreisförmige Likert-Bewertungen

.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;
}

Kombination mit Instanzanzeige

Benutzerdefinierte Layouts funktionieren zusammen mit der instance_display-Konfiguration. Der Instanzinhalt (Bilder, Text, Dialoge) wird separat über Ihren Annotationsformularen gerendert.

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]

Bewährte Vorgehensweisen

1. Schema-Namen abgleichen: Formular-id muss exakt dem name in annotation_schemes entsprechen
2. Fortlaufende Annotations-IDs: 0, 1, 2... für data-annotation-id verwenden
3. Erforderliche Handler einschließen: onclick="onlyOne(this);registerAnnotation(this);" für radio, onclick="registerAnnotation(this);" für checkbox verwenden
4. Responsivität testen: Media Queries für Mobile-Unterstützung verwenden
5. Barrierefreiheit gewährleisten: Korrekte Labels verwenden und Tastaturnavigation beibehalten

Fehlerbehebung

Annotationen werden nicht gespeichert

Prüfen Sie:

• Formular-id entspricht dem Annotationsschema-name
• Eingabefelder haben die Attribute schema und label_name
• Klick-Handler (registerAnnotation) sind vorhanden

Styles werden nicht angewendet

• Sicherstellen, dass die CSS-Spezifität hoch genug ist, um Standardstile zu überschreiben
• Prüfen, ob Ihr <style>-Block innerhalb der Layout-Datei ist
• Browser-Entwicklungstools verwenden, um angewendete Styles zu prüfen

Layout lädt nicht

• Pfad in task_layout auf Relativität zur Konfigurationsdatei prüfen
• Auf HTML-Syntaxfehler prüfen
• Server-Logs auf Fehlermeldungen überprüfen

Weiterführende Informationen

• Instanzanzeige – Anzuzeigenden Inhalt konfigurieren
• UI-Konfiguration – Optionen zur Schnittstellenanpassung
• Annotationsschemata – Verfügbare Annotationstypen

Implementierungsdetails finden Sie in der Quelldokumentation.