Personalizzazione del Layout

Novità della v2.1.0

Potato offre due approcci per personalizzare il layout dell'interfaccia di annotazione:

1. Layout generati automaticamente: Potato genera un file HTML di layout che puoi modificare
2. File di layout personalizzati: Crea il tuo template HTML con pieno controllo sullo stile

Avvio Rapido

Utilizzo dei Layout Generati Automaticamente

1. Avvia il server una volta — Potato crea layouts/task_layout.html
2. Modifica il file generato per personalizzare lo stile
3. Le tue modifiche persistono tra i riavvii del server (a meno che non modifichi annotation_schemes nella configurazione)

Utilizzo di File di Layout Personalizzati

1. Crea il tuo file di layout (es. layouts/custom_task_layout.html)
2. Fai riferimento a esso nella tua configurazione:

task_layout: layouts/custom_task_layout.html

Struttura del File di Layout

Un file di layout personalizzato deve includere:

<style>
    /* Il tuo CSS personalizzato */
</style>
 
<div class="annotation_schema">
    <!-- I tuoi moduli di annotazione -->
    <form id="schema_name" class="annotation-form radio" data-annotation-id="0">
        <fieldset schema="schema_name">
            <legend>Testo della domanda</legend>
            <!-- Elementi di input -->
        </fieldset>
    </form>
</div>

Attributi del Modulo Richiesti

Ogni schema di annotazione ha bisogno di:

Attributi di Input Richiesti

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

Layout di Esempio

Potato include tre layout di esempio che dimostrano la personalizzazione avanzata:

1. Dashboard di Moderazione Contenuti

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

Presenta un'intestazione banner di avviso con metadati del contenuto, griglia a 2 colonne per le categorie di violazione, livelli di gravità codificati a colori e un flusso di lavoro professionale di moderazione.

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

2. QA Dialogo Assistenza Clienti

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

Presenta un'intestazione del caso con badge di metadati, sezioni di valutazione raggruppate, valutazioni Likert circolari, checklist per i problemi di qualità e indicatori di risoluzione codificati a colori.

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

3. Revisione di Immagini Mediche

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

Presenta uno stile UI medico professionale, layout a due colonne per posizione/gravità, sezioni dei risultati raggruppate, reportistica medica strutturata e schede di raccomandazione con descrizioni.

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

Tecniche CSS

Layout a Griglia

Crea layout multi-colonna:

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

Opzioni Codificate a Colori

Stile dei pulsanti radio con colori di gravità:

.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;
}
 
/* Verde per "Nessuno" */
.severity-none .severity-label {
    background: #dcfce7;
    color: #166534;
}
.severity-none input:checked + .severity-label {
    background: #22c55e;
    color: white;
}
 
/* Rosso per "Grave" */
.severity-severe .severity-label {
    background: #fee2e2;
    color: #991b1b;
}
.severity-severe input:checked + .severity-label {
    background: #ef4444;
    color: white;
}

Stile delle Sezioni

Crea raggruppamenti visivi:

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

Valutazioni Likert Circolari

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

Combinazione con la Visualizzazione delle Istanze

I layout personalizzati funzionano insieme alla configurazione instance_display. Il contenuto dell'istanza (immagini, testi, dialoghi) viene reso separatamente sopra i tuoi moduli di annotazione.

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]

Best Practice

1. Corrisponda i nomi degli schemi: L'id del modulo deve corrispondere esattamente al name in annotation_schemes
2. ID di annotazione sequenziali: Usa 0, 1, 2... per data-annotation-id
3. Includi i gestori richiesti: Usa onclick="onlyOne(this);registerAnnotation(this);" per radio, onclick="registerAnnotation(this);" per checkbox
4. Testa la responsività: Usa media query per il supporto mobile
5. Mantieni l'accessibilità: Usa etichette appropriate e mantieni la navigazione da tastiera

Risoluzione dei Problemi

Annotazioni Non Salvate

Controlla che:

• L'id del modulo corrisponda al name dello schema di annotazione
• Gli input abbiano gli attributi schema e label_name
• I gestori dei clic (registerAnnotation) siano presenti

Stili Non Applicati

• Assicurati che la specificità CSS sia abbastanza alta da sovrascrivere i valori predefiniti
• Controlla che il tuo blocco <style> sia all'interno del file di layout
• Usa gli strumenti di sviluppo del browser per ispezionare gli stili applicati

Layout Non Caricato

• Verifica che il percorso in task_layout sia relativo al file di configurazione
• Controlla gli errori di sintassi HTML
• Rivedi i log del server per i messaggi di errore

Ulteriori Letture

• Visualizzazione delle Istanze - Configura quale contenuto mostrare
• Configurazione UI - Opzioni di personalizzazione dell'interfaccia
• Schemi di Annotazione - Tipi di annotazione disponibili

Per i dettagli di implementazione, consulta la documentazione sorgente.