Skip to content

Personalización del Diseño

Crea diseños visuales personalizados para tareas de anotación con plantillas HTML y CSS.

Personalización del Diseño

Nuevo en v2.1.0

Potato proporciona dos enfoques para personalizar el diseño de la interfaz de anotación:

  1. Diseños auto-generados: Potato genera un archivo HTML de diseño que puedes editar
  2. Archivos de diseño personalizados: Crea tu propia plantilla HTML con control total sobre el estilo

Inicio Rápido

Uso de Diseños Auto-generados

  1. Ejecuta tu servidor una vez — Potato crea layouts/task_layout.html
  2. Edita el archivo generado para personalizar el estilo
  3. Tus cambios persisten entre reinicios del servidor (a menos que modifiques annotation_schemes en la configuración)

Uso de Archivos de Diseño Personalizados

  1. Crea tu archivo de diseño (por ejemplo, layouts/custom_task_layout.html)
  2. Referéncialo en tu configuración:
yaml
task_layout: layouts/custom_task_layout.html

Estructura del Archivo de Diseño

Un archivo de diseño personalizado debe incluir:

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>

Atributos de Formulario Requeridos

Cada esquema de anotación necesita:

AtributoDescripción
idDebe coincidir con el name en los annotation_schemes de tu configuración
classIncluir annotation-form y el tipo (por ejemplo, radio, multiselect)
data-annotation-idÍndice secuencial (0, 1, 2...)
schemaAtributo en fieldset e inputs que coincide con el nombre del esquema

Atributos de Input Requeridos

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

Ejemplos de Diseño

Potato incluye tres ejemplos de diseño que demuestran personalización avanzada:

1. Panel de Moderación de Contenido

Ubicación: project-hub/layout-examples/content-moderation/

Presenta un banner de advertencia con metadatos del contenido, cuadrícula de 2 columnas para categorías de violación, niveles de severidad codificados por color y un flujo de trabajo de moderación profesional.

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

2. QA de Diálogo de Servicio al Cliente

Ubicación: project-hub/layout-examples/dialogue-qa/

Presenta un encabezado de caso con insignias de metadatos, secciones de evaluación agrupadas, calificaciones Likert circulares, lista de verificación de problemas de calidad e indicadores de resolución codificados por color.

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

3. Revisión de Imágenes Médicas

Ubicación: project-hub/layout-examples/medical-review/

Presenta estilo de interfaz médica profesional, diseño de dos columnas para ubicación/severidad, secciones de hallazgos agrupadas, informes médicos estructurados y tarjetas de recomendación con descripciones.

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

Técnicas CSS

Diseños de Cuadrícula

Crea diseños de múltiples columnas:

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

Opciones Codificadas por Color

Estiliza botones de radio con colores de severidad:

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

Estilo de Secciones

Crea agrupaciones visuales:

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

Calificaciones Likert Circulares

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

Combinación con Visualización de Instancias

Los diseños personalizados funcionan junto con la configuración de instance_display. El contenido de la instancia (imágenes, texto, diálogos) se renderiza por separado encima de tus formularios de anotación.

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]

Mejores Prácticas

  1. Haz coincidir los nombres de esquema: El id del formulario debe coincidir exactamente con el name en annotation_schemes
  2. IDs de anotación secuenciales: Usa 0, 1, 2... para data-annotation-id
  3. Incluye los handlers requeridos: Usa onclick="onlyOne(this);registerAnnotation(this);" para radio, onclick="registerAnnotation(this);" para checkbox
  4. Prueba la responsividad: Usa media queries para soporte móvil
  5. Mantén la accesibilidad: Usa etiquetas apropiadas y mantén la navegación por teclado

Solución de Problemas

Las anotaciones no se guardan

Verifica que:

  • El id del formulario coincida con el name del esquema de anotación
  • Los inputs tengan atributos schema y label_name
  • Los handlers de clic (registerAnnotation) estén presentes

Los estilos no se aplican

  • Asegúrate de que la especificidad CSS sea suficientemente alta para sobrescribir los valores por defecto
  • Verifica que tu bloque <style> esté dentro del archivo de diseño
  • Usa las herramientas de desarrollo del navegador para inspeccionar los estilos aplicados

El diseño no carga

  • Verifica que la ruta en task_layout sea relativa al archivo de configuración
  • Busca errores de sintaxis HTML
  • Revisa los registros del servidor para mensajes de error

Lecturas Adicionales

Para detalles de implementación, consulta la documentación fuente.