Configuration de l'interface

Personnalisez l'apparence et le comportement de l'interface d'annotation.

Configuration de l'interface

Potato offre de nombreuses options de configuration pour personnaliser l'interface utilisateur. Ces paramètres permettent aux administrateurs de contrôler l'apparence, le comportement et les fonctionnalités de l'interface d'annotation.

Structure de configuration

Toutes les options de configuration de l'interface sont définies dans la section ui de votre fichier de configuration :

yaml

ui:
  # UI configuration options go here

Contrôle de la hauteur des instances

Contrôlez la hauteur maximale de la zone d'affichage du texte des instances pour garder les options d'annotation visibles pour les textes longs.

yaml

ui:
  max_instance_height: 300  # 300 pixels maximum height

Avantages :

Les instances de texte long ne poussent plus les options d'annotation hors de la vue
Les options d'annotation restent à un emplacement prévisible
Zone de texte défilante pour le contenu long

Couleurs des étiquettes

Configurez des couleurs personnalisées pour les étiquettes de tous les types d'annotation.

Couleurs d'étiquettes globales

Définissez des couleurs pour les étiquettes de tous les schémas :

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

Couleurs d'étiquettes en ligne

Définissez les couleurs directement sur chaque étiquette :

yaml

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

Couleurs spécifiques aux segments (hérité)

La configuration de couleurs originale réservée aux segments :

yaml

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

Formats de couleurs supportés

Toutes les options de couleur supportent plusieurs formats :

Hex : "#FF8000" ou "#F80"
RGB : "(255, 128, 0)" ou "rgb(255, 128, 0)"
RGBA : "rgba(255, 128, 0, 0.8)"
Nommé : "red", "blue", "green"

Couleurs par défaut

Si aucune couleur personnalisée n'est spécifiée, Potato attribue des couleurs basées sur les noms d'étiquettes :

Nom d'étiquette	Couleur
positive, yes, true, happy	Vert
negative, no, false, angry	Rouge
neutral, maybe	Gris
mixed, surprise	Ambre
sad	Bleu

Options d'affichage de l'interface

Contrôlez la visibilité et les fonctionnalités des éléments de l'interface :

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

Personnalisation de la mise en page de la tâche

Potato génère automatiquement des mises en page HTML basées sur votre configuration.

Mises en page auto-générées

Lorsque vous lancez Potato, il génère un fichier de mise en page à :

text

{task_dir}/annotation_layouts/annotation_layout.html

Ce fichier est régénéré lorsque votre configuration change.

Mises en page de tâche personnalisées

Pour plus de contrôle, fournissez un fichier HTML personnalisé :

yaml

task_layout: "my_custom_layout.html"

Créer une mise en page personnalisée :

Partez de la mise en page générée comme template
Modifiez le HTML, ajoutez des éléments personnalisés
Référencez votre fichier dans la configuration

Pour des conseils détaillés sur la création de mises en page personnalisées sophistiquées avec grilles CSS, options colorées et styles de sections, consultez le guide de Personnalisation de la mise en page.

Exigences de structure de la mise en page

Les mises en page personnalisées doivent inclure certains éléments :

Élément	Objectif	Obligatoire
`.annotation-form`	Conteneur pour chaque schéma	Oui
`data-annotation-id`	ID unique correspondant à la configuration	Oui
`data-schema-name`	Nom du schéma pour les couleurs	Recommandé
`.ai-help`	Boutons de l'assistant IA	Si IA utilisée

Référence des classes CSS

Structure du formulaire :

.annotation-form - Conteneur principal du formulaire
.annotation-form-header - En-tête avec le nom et les boutons IA
.annotation-form-body - Corps avec les options de saisie
.annotation-name - Affichage du nom du schéma
.annotation-desc - Texte de description

Options de saisie :

.shadcn-radio-option - Option bouton radio
.shadcn-checkbox-option - Option case à cocher
.shadcn-span-option - Option d'annotation de segment

Configuration du répertoire du site

Templates personnalisés

yaml

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

JavaScript personnalisé

Injectez du code JavaScript personnalisé :

yaml

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

Exemple complet

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"

Compatibilité navigateur

Toutes les options de configuration de l'interface fonctionnent sur les navigateurs modernes :

Chrome/Edge : Support complet avec style de barre de défilement personnalisé
Firefox : Support complet avec barre de défilement standard
Safari : Support complet avec barre de défilement standard
Mobile : Design responsive avec interactions tactiles

Bonnes pratiques

Testez votre configuration : Testez toujours les changements d'interface avec vos données spécifiques
Pensez à l'accessibilité : Assurez-vous que les choix de couleurs fournissent un contraste suffisant
Responsive mobile : Testez les configurations sur les appareils mobiles
Performance : Les gros fichiers JavaScript personnalisés peuvent impacter les temps de chargement

Dépannage

Les couleurs n'apparaissent pas

Assurez-vous que le format RGB utilise des parenthèses et des espaces : "(255, 128, 0)"

La limite de hauteur ne fonctionne pas

Vérifiez que max_instance_height est un entier positif.

Les templates personnalisés ne se chargent pas

Vérifiez que le chemin site_dir existe et contient des templates valides.

Pour aller plus loin

Personnalisation de la mise en page - Templates HTML et CSS personnalisés
Affichage des instances - Configurer l'affichage du contenu
Schémas d'annotation - Configuration des schémas
Fonctionnalités de productivité - Raccourcis clavier et info-bulles
Support IA - Configuration de l'assistant IA

Pour les détails d'implémentation, voir la documentation source.