Configurazione UI

Potato offre ampie opzioni di configurazione per personalizzare l'interfaccia utente. Queste impostazioni consentono agli amministratori di controllare l'aspetto, il comportamento e le funzionalità dell'interfaccia di annotazione.

Struttura della Configurazione

Tutte le opzioni di configurazione dell'interfaccia utente sono definite nella sezione ui del file di configurazione:

ui:
  # UI configuration options go here

Controllo dell'Altezza delle Istanze

Controlla l'altezza massima dell'area di visualizzazione del testo dell'istanza per mantenere visibili le opzioni di annotazione per i testi lunghi.

ui:
  max_instance_height: 300  # 300 pixels maximum height

Vantaggi:

• Le istanze con testo lungo non spingono più le opzioni di annotazione fuori dalla visualizzazione
• Le opzioni di annotazione rimangono in una posizione prevedibile
• Area di testo scorrevole per i contenuti lunghi

Colori delle Etichette

Configura colori personalizzati per le etichette in tutti i tipi di annotazione.

Colori Globali delle Etichette

Definisci i colori delle etichette in tutti gli schemi:

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

Colori Inline delle Etichette

Definisci i colori direttamente su ciascuna etichetta:

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

Colori Specifici per Span (Legacy)

La configurazione colori originale solo per span:

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

Formati di Colore Supportati

Tutte le opzioni di colore supportano più formati:

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

Colori Predefiniti

Se non viene specificato alcun colore personalizzato, Potato assegna i colori in base ai nomi delle etichette:

Opzioni di Visualizzazione dell'Interfaccia

Controlla la visibilità e la funzionalità degli elementi dell'interfaccia:

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

Personalizzazione del Layout del Task

Potato genera automaticamente layout HTML in base alla tua configurazione.

Layout Generati Automaticamente

Quando si avvia Potato, viene generato un file di layout in:

{task_dir}/annotation_layouts/annotation_layout.html

Questo file viene rigenerato quando la configurazione cambia.

Layout del Task Personalizzati

Per un maggiore controllo, fornisci un file HTML personalizzato:

task_layout: "my_custom_layout.html"

Creazione di un Layout Personalizzato:

1. Parti dal layout generato come template
2. Modifica l'HTML, aggiungi elementi personalizzati
3. Fai riferimento al tuo file nella configurazione

Per una guida dettagliata sulla creazione di layout personalizzati sofisticati con griglia CSS, opzioni con codice colore e stili di sezione, consulta la guida alla Personalizzazione del Layout.

Requisiti della Struttura del Layout

I layout personalizzati devono includere determinati elementi:

Riferimento alle Classi CSS

Struttura del Modulo:

• .annotation-form - Contenitore principale del modulo
• .annotation-form-header - Intestazione con nome e pulsanti AI
• .annotation-form-body - Corpo con opzioni di input
• .annotation-name - Visualizzazione del nome dello schema
• .annotation-desc - Testo della descrizione

Opzioni di Input:

• .shadcn-radio-option - Opzione con pulsante radio
• .shadcn-checkbox-option - Opzione con casella di controllo
• .shadcn-span-option - Opzione per l'annotazione di span

Configurazione della Directory del Sito

Template Personalizzati

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

JavaScript Personalizzato

Inietta codice JavaScript personalizzato:

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

Esempio Completo

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"

Compatibilità con i Browser

Tutte le opzioni di configurazione dell'interfaccia funzionano con i browser moderni:

• Chrome/Edge: Supporto completo con stile personalizzato della barra di scorrimento
• Firefox: Supporto completo con barra di scorrimento standard
• Safari: Supporto completo con barra di scorrimento standard
• Mobile: Design responsivo con interazioni touch-friendly

Buone Pratiche

1. Testa la Tua Configurazione: Verifica sempre le modifiche all'interfaccia con i tuoi dati specifici
2. Considera l'Accessibilità: Assicurati che le scelte di colore forniscano un contrasto sufficiente
3. Responsività Mobile: Testa le configurazioni su dispositivi mobili
4. Prestazioni: File JavaScript personalizzati di grandi dimensioni potrebbero influire sui tempi di caricamento

Risoluzione dei Problemi

Colori Non Visualizzati

Assicurati che il formato RGB utilizzi parentesi e spazi: "(255, 128, 0)"

Limite di Altezza Non Funzionante

Verifica che max_instance_height sia un numero intero positivo.

Template Personalizzati Non Caricati

Verifica che il percorso di site_dir esista e contenga template validi.

Approfondimenti

• Personalizzazione del Layout - Template HTML e CSS personalizzati
• Visualizzazione delle Istanze - Configurazione della visualizzazione del contenuto
• Schemi di Annotazione - Configurazione degli schemi
• Funzionalità di Produttività - Scorciatoie da tastiera e tooltip
• Supporto AI - Configurazione dell'assistente AI

Per i dettagli implementativi, consulta la documentazione sorgente.