Configuración de UI

Personaliza la apariencia y el comportamiento de la interfaz de anotación.

Configuración de UI

Potato proporciona amplias opciones de configuración para personalizar la interfaz de usuario. Estos ajustes permiten a los administradores controlar la apariencia, el comportamiento y la funcionalidad de la interfaz de anotación.

Estructura de Configuración

Todas las opciones de configuración de UI se definen en la sección ui de tu archivo de configuración:

yaml

ui:
  # UI configuration options go here

Control de Altura de Instancia

Controla la altura máxima del área de visualización del texto de la instancia para mantener las opciones de anotación visibles para textos largos.

yaml

ui:
  max_instance_height: 300  # 300 pixels maximum height

Beneficios:

Las instancias de texto largo ya no empujan las opciones de anotación fuera de la vista
Las opciones de anotación permanecen en una ubicación predecible
Área de texto con scroll para contenido largo

Colores de Etiquetas

Configura colores personalizados para etiquetas en todos los tipos de anotación.

Colores Globales de Etiquetas

Define colores para etiquetas en todos los esquemas:

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

Colores de Etiquetas en Línea

Define colores directamente en cada etiqueta:

yaml

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

Colores Específicos de Segmentos (Heredado)

La configuración de color original solo para segmentos:

yaml

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

Soporte de Formatos de Color

Todas las opciones de color soportan múltiples formatos:

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

Colores Predeterminados

Si no se especifica un color personalizado, Potato asigna colores basados en los nombres de las etiquetas:

Nombre de Etiqueta	Color
positive, yes, true, happy	Verde
negative, no, false, angry	Rojo
neutral, maybe	Gris
mixed, surprise	Ámbar
sad	Azul

Opciones de Visualización de la Interfaz

Controla la visibilidad y funcionalidad de los elementos de la interfaz:

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

Personalización del Diseño de Tarea

Potato genera automáticamente diseños HTML basados en tu configuración.

Diseños Auto-Generados

Cuando ejecutas Potato, genera un archivo de diseño en:

text

{task_dir}/annotation_layouts/annotation_layout.html

Este archivo se regenera cuando tu configuración cambia.

Diseños de Tarea Personalizados

Para mayor control, proporciona un archivo HTML personalizado:

yaml

task_layout: "my_custom_layout.html"

Crear un Diseño Personalizado:

Comienza desde el diseño generado como plantilla
Modifica el HTML, añade elementos personalizados
Referencia tu archivo en la configuración

Para una guía detallada sobre la creación de diseños personalizados sofisticados con cuadrículas CSS, opciones codificadas por color y estilos de sección, consulta la guía de Personalización de Diseño.

Requisitos de Estructura del Diseño

Los diseños personalizados deben incluir ciertos elementos:

Elemento	Propósito	Requerido
`.annotation-form`	Contenedor para cada esquema	Sí
`data-annotation-id`	ID único que coincide con la configuración	Sí
`data-schema-name`	Nombre del esquema para colores	Recomendado
`.ai-help`	Botones del asistente de IA	Si se usa IA

Referencia de Clases CSS

Estructura del Formulario:

.annotation-form - Contenedor principal del formulario
.annotation-form-header - Encabezado con nombre y botones de IA
.annotation-form-body - Cuerpo con opciones de entrada
.annotation-name - Visualización del nombre del esquema
.annotation-desc - Texto de descripción

Opciones de Entrada:

.shadcn-radio-option - Opción de botón de radio
.shadcn-checkbox-option - Opción de casilla de verificación
.shadcn-span-option - Opción de anotación de segmentos

Configuración del Directorio del Sitio

Plantillas Personalizadas

yaml

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

JavaScript Personalizado

Inyecta código JavaScript personalizado:

yaml

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

Ejemplo Completo

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"

Compatibilidad con Navegadores

Todas las opciones de configuración de UI funcionan en navegadores modernos:

Chrome/Edge: Soporte completo con estilos de barra de desplazamiento personalizados
Firefox: Soporte completo con barra de desplazamiento estándar
Safari: Soporte completo con barra de desplazamiento estándar
Móvil: Diseño responsivo con interacciones táctiles

Mejores Prácticas

Prueba Tu Configuración: Siempre prueba los cambios de UI con tus datos específicos
Considera la Accesibilidad: Asegúrate de que las opciones de color proporcionen suficiente contraste
Responsividad Móvil: Prueba las configuraciones en dispositivos móviles
Rendimiento: Los archivos JavaScript personalizados grandes pueden afectar los tiempos de carga

Solución de Problemas

Los Colores No Aparecen

Asegúrate de que el formato RGB use paréntesis y espacios: "(255, 128, 0)"

El Límite de Altura No Funciona

Verifica que max_instance_height sea un entero positivo.

Las Plantillas Personalizadas No Se Cargan

Verifica que la ruta site_dir exista y contenga plantillas válidas.

Lectura Adicional

Personalización de Diseño - Plantillas HTML personalizadas y CSS
Visualización de Instancias - Configura la visualización de contenido
Esquemas de Anotación - Configuración de esquemas
Funcionalidades de Productividad - Atajos de teclado y tooltips
Soporte de IA - Configuración del asistente de IA

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