Skip to content

Personnalisation de la mise en page

Concevez des mises en page d'annotation sur mesure dans Potato avec des gabarits HTML et du CSS : comparaisons côte à côte, schémas sur plusieurs colonnes et blocs d'affichage entièrement personnalisés.

Nouveau dans la v2.1.0

Potato propose deux approches pour personnaliser la mise en page de l'interface d'annotation :

  1. Mises en page générées automatiquement : Potato génère un fichier HTML que vous pouvez ensuite modifier
  2. Fichiers de mise en page personnalisés : vous écrivez votre propre gabarit HTML et gardez la main sur tout le style

Démarrage rapide

Utiliser les mises en page générées

  1. Lancez le serveur une première fois — Potato crée layouts/task_layout.html
  2. Modifiez le fichier généré pour ajuster le style
  3. Vos modifications sont conservées d'un redémarrage à l'autre (sauf si vous touchez à annotation_schemes dans la configuration)

Utiliser un fichier de mise en page personnalisé

  1. Créez votre fichier de mise en page (par exemple layouts/custom_task_layout.html)
  2. Référencez-le dans votre configuration :
yaml
task_layout: layouts/custom_task_layout.html

Structure du fichier de mise en page

Un fichier de mise en page personnalisé doit contenir :

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

Attributs de formulaire obligatoires

Chaque schéma d'annotation a besoin de :

AttributDescription
idDoit correspondre au name défini dans annotation_schemes
classDoit inclure annotation-form et le type (par exemple radio, multiselect)
data-annotation-idIndice séquentiel (0, 1, 2...)
schemaAttribut à placer sur le fieldset et les champs, avec le nom du schéma

Attributs de champ obligatoires

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

Exemples de mises en page

Potato fournit trois exemples de mises en page qui illustrent une personnalisation poussée :

1. Tableau de bord de modération de contenu

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

En-tête sous forme de bandeau d'avertissement avec les métadonnées du contenu, grille à 2 colonnes pour les catégories d'infraction, niveaux de gravité codés par couleur, et un flux de modération abouti.

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

2. Contrôle qualité de dialogues de service client

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

En-tête de dossier avec badges de métadonnées, sections d'évaluation regroupées, échelles de Likert circulaires, liste de contrôle des problèmes de qualité et indicateurs de résolution codés par couleur.

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

3. Relecture d'images médicales

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

Style d'interface adapté au domaine médical, disposition à deux colonnes pour la localisation et la gravité, sections d'observations regroupées, compte rendu médical structuré et cartes de recommandation accompagnées de descriptions.

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

Techniques CSS

Mises en page en grille

Créer des dispositions sur plusieurs colonnes :

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

Options codées par couleur

Styler les boutons radio selon la gravité :

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

Style des sections

Créer des regroupements visuels :

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

Échelles de Likert circulaires

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

Combinaison avec l'affichage des instances

Les mises en page personnalisées fonctionnent en parallèle de la configuration instance_display. Le contenu de l'instance (images, texte, dialogues) est rendu séparément, au-dessus de vos formulaires d'annotation.

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

Bonnes pratiques

  1. Faites correspondre les noms de schéma : l'id du formulaire doit être exactement le name déclaré dans annotation_schemes
  2. Numérotez les annotations dans l'ordre : utilisez 0, 1, 2... pour data-annotation-id
  3. N'oubliez pas les gestionnaires requis : onclick="onlyOne(this);registerAnnotation(this);" pour les boutons radio, onclick="registerAnnotation(this);" pour les cases à cocher
  4. Testez le rendu adaptatif : utilisez des media queries pour le mobile
  5. Préservez l'accessibilité : des libellés corrects et une navigation au clavier qui reste utilisable

Dépannage

Les annotations ne sont pas enregistrées

Vérifiez que :

  • L'id du formulaire correspond au name du schéma d'annotation
  • Les champs portent bien les attributs schema et label_name
  • Les gestionnaires de clic (registerAnnotation) sont présents

Les styles ne s'appliquent pas

  • Vérifiez que la spécificité CSS est suffisante pour l'emporter sur les styles par défaut
  • Vérifiez que votre bloc <style> se trouve bien dans le fichier de mise en page
  • Inspectez les styles appliqués avec les outils de développement du navigateur

La mise en page ne se charge pas

  • Vérifiez que le chemin indiqué dans task_layout est relatif au fichier de configuration
  • Cherchez des erreurs de syntaxe HTML
  • Consultez les journaux du serveur pour repérer les messages d'erreur

Pour aller plus loin

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