Skip to content

Personalização de Layout

Crie layouts de anotação personalizados no Potato com templates HTML e CSS — comparações lado a lado, esquemas multicoluna e estruturas de blocos de exibição totalmente personalizadas.

Novo na v2.1.0

O Potato oferece duas abordagens para personalizar o layout da interface de anotação:

  1. Layouts gerados automaticamente: O Potato gera um arquivo de layout HTML que você pode editar
  2. Arquivos de layout personalizados: Crie seu próprio template HTML com controle total sobre a estilização

Início Rápido

Usando Layouts Gerados Automaticamente

  1. Execute seu servidor uma vez — o Potato cria layouts/task_layout.html
  2. Edite o arquivo gerado para personalizar a estilização
  3. Suas alterações persistem entre reinicializações do servidor (a menos que você modifique annotation_schemes na configuração)

Usando Arquivos de Layout Personalizados

  1. Crie seu arquivo de layout (por exemplo, layouts/custom_task_layout.html)
  2. Referencie-o na sua configuração:
yaml
task_layout: layouts/custom_task_layout.html

Estrutura do Arquivo de Layout

Um arquivo de layout personalizado deve 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 Obrigatórios do Formulário

Cada esquema de anotação precisa de:

AtributoDescrição
idDeve corresponder ao name em annotation_schemes na sua configuração
classInclua annotation-form e o tipo (por exemplo, radio, multiselect)
data-annotation-idÍndice sequencial (0, 1, 2...)
schemaAtributo no fieldset e nas entradas correspondente ao nome do esquema

Atributos Obrigatórios da Entrada

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

Layouts de Exemplo

O Potato inclui três layouts de exemplo que demonstram personalização avançada:

1. Painel de Moderação de Conteúdo

Localização: project-hub/layout-examples/content-moderation/

Apresenta um cabeçalho com banner de aviso contendo metadados de conteúdo, uma grade de 2 colunas para categorias de violação, níveis de gravidade codificados por cor e um fluxo de moderação profissional.

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

2. QA de Diálogo de Atendimento ao Cliente

Localização: project-hub/layout-examples/dialogue-qa/

Apresenta um cabeçalho de caso com selos de metadados, seções de avaliação agrupadas, classificações em escala Likert circulares, lista de verificação de problemas de qualidade e indicadores de resolução codificados por cor.

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

3. Revisão de Imagens Médicas

Localização: project-hub/layout-examples/medical-review/

Apresenta estilização de interface médica profissional, layout de duas colunas para localização/gravidade, seções de achados agrupadas, relatórios médicos estruturados e cartões de recomendação com descrições.

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

Técnicas de CSS

Layouts em Grade

Crie layouts multicoluna:

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

Opções Codificadas por Cor

Estilize botões de rádio com cores de gravidade:

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

Estilização de Seções

Crie agrupamentos visuais:

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

Classificações 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;
}

Combinando com a Exibição de Instâncias

Layouts personalizados funcionam junto com a configuração instance_display. O conteúdo da instância (imagens, texto, diálogos) é renderizado separadamente acima dos seus formulários de anotação.

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]

Boas Práticas

  1. Faça os nomes dos esquemas corresponderem: O id do formulário deve corresponder exatamente ao name em annotation_schemes
  2. IDs de anotação sequenciais: Use 0, 1, 2... para data-annotation-id
  3. Inclua os manipuladores obrigatórios: Use onclick="onlyOne(this);registerAnnotation(this);" para rádio e onclick="registerAnnotation(this);" para caixa de seleção
  4. Teste a responsividade: Use media queries para suporte em dispositivos móveis
  5. Mantenha a acessibilidade: Use rótulos apropriados e mantenha a navegação por teclado

Solução de Problemas

As anotações não estão sendo salvas

Verifique se:

  • O id do formulário corresponde ao name do esquema de anotação
  • As entradas têm os atributos schema e label_name
  • Os manipuladores de clique (registerAnnotation) estão presentes

Os estilos não estão sendo aplicados

  • Garanta que a especificidade do CSS seja alta o suficiente para sobrepor os padrões
  • Verifique se o seu bloco <style> está dentro do arquivo de layout
  • Use as ferramentas de desenvolvedor do navegador para inspecionar os estilos aplicados

O layout não está carregando

  • Verifique se o caminho em task_layout é relativo ao arquivo de configuração
  • Procure por erros de sintaxe HTML
  • Revise os logs do servidor em busca de mensagens de erro

Leitura Adicional

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