Configuração da Interface

Personalize a interface de anotação do Potato — layout do cabeçalho, seções da barra lateral, atalhos de teclado, ordenação de instâncias, paginação e posicionamento de blocos de exibição.

O Potato oferece amplas opções de configuração para personalizar a interface do usuário. Essas configurações permitem que os administradores controlem a aparência, o comportamento e a funcionalidade da interface de anotação.

Estrutura da Configuração

Todas as opções de configuração da interface são definidas na seção ui do seu arquivo de configuração:

yaml

ui:
  # UI configuration options go here

Controle da Altura da Instância

Controle a altura máxima da área de exibição do texto da instância para manter as opções de anotação visíveis em textos longos.

yaml

ui:
  max_instance_height: 300  # 300 pixels maximum height

Benefícios:

Instâncias de texto longas não empurram mais as opções de anotação para fora da visualização
As opções de anotação permanecem em um local previsível
Área de texto com rolagem para conteúdos longos

Cores dos Rótulos

Configure cores personalizadas para os rótulos em todos os tipos de anotação.

Cores Globais dos Rótulos

Defina cores para os rótulos em todos os 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)"

Cores de Rótulos em Linha

Defina as cores diretamente em cada rótulo:

yaml

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

Cores Específicas de Spans (Legado)

A configuração de cores original apenas para spans:

yaml

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

Suporte a Formatos de Cor

Todas as opções de cor aceitam vários formatos:

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

Cores Padrão

Se nenhuma cor personalizada for especificada, o Potato atribui cores com base nos nomes dos rótulos:

Nome do Rótulo	Cor
positive, yes, true, happy	Verde
negative, no, false, angry	Vermelho
neutral, maybe	Cinza
mixed, surprise	Âmbar
sad	Azul

Opções de Exibição da Interface

Controle a visibilidade e a funcionalidade dos elementos da 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

Personalização do Layout da Tarefa

O Potato gera automaticamente layouts HTML com base na sua configuração.

Layouts Gerados Automaticamente

Quando você executa o Potato, ele gera um arquivo de layout em:

text

{task_dir}/annotation_layouts/annotation_layout.html

Esse arquivo é regenerado sempre que sua configuração muda.

Layouts de Tarefa Personalizados

Para maior controle, forneça um arquivo HTML personalizado:

yaml

task_layout: "my_custom_layout.html"

Criando um Layout Personalizado:

Comece a partir do layout gerado como modelo
Modifique o HTML e adicione elementos personalizados
Referencie seu arquivo na configuração

Para orientações detalhadas sobre como criar layouts personalizados sofisticados com grade CSS, opções codificadas por cor e estilização de seções, consulte o guia de Personalização de Layout.

Requisitos da Estrutura do Layout

Layouts personalizados devem incluir determinados elementos:

Elemento	Finalidade	Obrigatório
`.annotation-form`	Contêiner para cada esquema	Sim
`data-annotation-id`	ID único correspondente à configuração	Sim
`data-schema-name`	Nome do esquema para as cores	Recomendado
`.ai-help`	Botões do assistente de IA	Se usar IA

Referência de Classes CSS

Estrutura do Formulário:

.annotation-form - Contêiner principal do formulário
.annotation-form-header - Cabeçalho com nome e botões de IA
.annotation-form-body - Corpo com opções de entrada
.annotation-name - Exibição do nome do esquema
.annotation-desc - Texto da descrição

Opções de Entrada:

.shadcn-radio-option - Opção de botão de rádio
.shadcn-checkbox-option - Opção de caixa de seleção
.shadcn-span-option - Opção de anotação de span

Configuração do Diretório do Site

Modelos Personalizados

yaml

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

JavaScript Personalizado

Injete código JavaScript personalizado:

yaml

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

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

Compatibilidade com Navegadores

Todas as opções de configuração da interface funcionam nos navegadores modernos:

Chrome/Edge: Suporte completo com estilização personalizada da barra de rolagem
Firefox: Suporte completo com barra de rolagem padrão
Safari: Suporte completo com barra de rolagem padrão
Móvel: Design responsivo com interações adaptadas ao toque

Boas Práticas

Teste Sua Configuração: Sempre teste as mudanças na interface com seus dados específicos
Considere a Acessibilidade: Garanta que as escolhas de cor ofereçam contraste suficiente
Responsividade Móvel: Teste as configurações em dispositivos móveis
Desempenho: Arquivos JavaScript personalizados grandes podem afetar o tempo de carregamento

Solução de Problemas

As Cores Não Aparecem

Garanta que o formato RGB use parênteses e espaços: "(255, 128, 0)"

O Limite de Altura Não Funciona

Verifique se max_instance_height é um número inteiro positivo.

Os Modelos Personalizados Não Carregam

Verifique se o caminho de site_dir existe e contém modelos válidos.

Leitura Adicional

Personalização de Layout - Modelos HTML e CSS personalizados
Exibição de Instâncias - Configure a exibição do conteúdo
Esquemas de Anotação - Configuração de esquemas
Recursos de Produtividade - Atalhos de teclado e dicas de ferramenta
Suporte de IA - Configuração do assistente de IA

Para detalhes de implementação, consulte a documentação de origem.