Utilizando agentes de código¶

Vamos usar a skill edgepy-component para orientar o OpenCode na criação de uma extensão. Ela reúne os contratos do EdgePy Viewer, os pontos de registro e os cuidados com o ciclo de vida dos componentes. Assim, você pode começar o trabalho com um contexto específico do projeto.

O percurso é simples: instalar a skill → carregá-la no OpenCode → pedir uma extensão → conferir o resultado. Aqui, o agente ajuda a desenvolver o software. Os agentes Python dentro do viewer têm outro papel, voltado ao processamento de imagens.

1. Instale a skill no projeto¶

Comece pela cópia do repositório público preparada em Comece aqui. Dentro de ipen-edgepy-viewer/, crie a pasta:

mkdir -p .opencode/skills/edgepy-component

Baixar a skill do EdgePy

Salve o arquivo baixado como .opencode/skills/edgepy-component/SKILL.md. A estrutura deve ficar assim:

ipen-edgepy-viewer/
  .opencode/
    skills/
      edgepy-component/
        SKILL.md
  apps/
  packages/
  package.json

A skill é distribuída por este site e não vem no clone da revisão usada no tutorial. Ela fornece instruções ao agente e não altera a aplicação por conta própria.

---
name: EdgePy Component
description: Criar ou modificar painéis, renderizadores, resolvedores de assets e componentes de análise do EdgePy Viewer pelos contratos públicos.
---

# Extensões do EdgePy Viewer

## 1. Localize a fronteira

Localize a raiz do workspace: pode ser a raiz do repositório ou `edgepy-viewer/`.
Todos os caminhos abaixo são relativos a essa raiz, não à pasta desta skill.
Leia as instruções locais e o diff antes de editar.

Leia `apps/viewer-demo/src/App.tsx` e `packages/react-viewer/src/index.tsx`.
Classifique a tarefa e leia seu contrato:

- Painel: leia `packages/react-viewer/src/components/ViewerDrawers.tsx` e use `ViewerCustomPanel` e `customPanels`.
- Renderer ou assets: leia `packages/react-viewer/src/ports/viewportRenderer.ts` e use `ClinicalViewportRenderer` ou `ClinicalViewportAssetResolver`.
- Análise de pixels: o mesmo arquivo de portas, mais `packages/core/src/index.ts` para o snapshot.
- Python: leia a documentação local do PyScript e o pacote `pyodide-agents` antes de escolher o fluxo.

Conclua esta etapa identificando contrato, ponto de registro e comportamento observável esperado. Se o contrato não atender à tarefa, descreva a lacuna e contabilize a alteração arquitetural necessária.

## 2. Implemente uma extensão pequena

Mantenha o core independente de React, DOM, Cornerstone e Pyodide.
Registre dependências na aplicação e preserve painéis e callbacks existentes.
Separe cálculo puro da interface. Prefira imports públicos aos detalhes internos do renderizador.

Para pixels, trate método opcional, resposta vazia, erro e resposta assíncrona obsoleta.
Invalide ROI e resultado ao trocar estudo, série, corte ou handle.
Documente limites dos intervalos, valores não finitos e unidades efetivamente conhecidas.
Um renderer é responsável pela limpeza dos recursos que criou em `destroy()`. O painel consumidor não destrói o handle do viewer.

## 3. Verifique o comportamento

Consulte os scripts disponíveis no `package.json` atual e rode tipagem, testes relevantes e build.
Para cálculo, use uma entrada determinística com saída conhecida.
Para interface, verifique abertura, interação, fechamento e reabertura no viewer real.
Para renderer, verifique montagem, mudança de contexto, leitura de pixels quando suportada e limpeza.

Conclua com arquivos alterados, contratos utilizados, comandos e resultados observados, além das verificações ainda pendentes. Diferencie a demonstração sintética de compatibilidade DICOM e uso clínico. Mantenha a entrega local até que seja solicitada publicação.

2. Abra o OpenCode e carregue a skill¶

Instale e configure o OpenCode conforme a documentação oficial V2. Com um provedor de modelos configurado, execute o comando na pasta do projeto:

opencode

O OpenCode descobre skills em .opencode/skills. Na conversa, use @edgepy-component para pedir seu carregamento explicitamente:

@edgepy-component
Quero criar uma extensão para o EdgePy Viewer.
Leia os contratos públicos desta revisão e explique onde registrar um painel.
Identifique os arquivos da aplicação que precisaremos alterar.

Confira se o agente carregou a skill e encontrou ViewerCustomPanel, customPanels e a composição em apps/viewer-demo/src/App.tsx. Se a skill não aparecer, verifique o nome da pasta e se o arquivo se chama exatamente SKILL.md.

3. Crie uma extensão com a skill¶

Vamos pedir uma ferramenta nova: um painel que mostra as dimensões do corte ativo. Ele usa a mesma leitura de pixels apresentada no histograma, mas tem uma interface menor.

@edgepy-component
Crie um painel chamado Informações do corte.

Objetivo:
- Ao clicar em Ler corte, mostrar largura, altura e índice do corte atual.
- Mostrar uma mensagem clara quando não houver imagem disponível.
- Limpar os dados ao trocar estudo, série, corte ou handle do renderizador.
- Descartar respostas de leituras anteriores que terminarem depois da troca.

Integração:
- Use ViewerCustomPanel e customPanels em App.tsx.
- Obtenha os pixels pelo handle público com getCurrentImageData().
- Preserve os painéis e callbacks que já existem na aplicação.

Verificação:
- Execute a tipagem e o build da aplicação do viewer.
- Se houver ferramentas de navegador, confira o painel no viewer real.
- Ao terminar, liste os arquivos alterados e o que foi verificado.

A skill fornece as práticas do projeto. O pedido fornece a necessidade específica, o comportamento esperado e os critérios para conferir a entrega. Juntos, eles ajudam o agente a escolher o ponto de extensão adequado.

Se quiser retomar o primeiro exercício, peça o painel Olá com o contador. Para outro tipo de extensão, consulte Tipos de componente e descreva qual parte deseja acrescentar ou substituir.

4. Evolua a ferramenta em passos pequenos¶

Depois de verificar o painel básico, continue na mesma conversa:

@edgepy-component
Acrescente ao painel o menor e o maior valor finito da imagem lida.
Mantenha o cálculo separado da interface e teste com uma matriz conhecida.
Se todos os valores forem não finitos, mostre que não há dados válidos.

Ou use a skill para melhorar o componente desta trilha:

@edgepy-component
No histograma, acrescente a média das intensidades da ROI ao lado do gráfico.
Calcule a média com os valores originais dos pixels, ignorando não finitos.
Para ROI vazia, mostre “Sem pixels selecionados”.
Teste com a ROI central da matriz 4 × 4: a média esperada é 7,5.
Preserve a seleção por arraste e a atualização do gráfico durante o gesto.

Pedidos pequenos permitem comparar o comportamento antes e depois de cada alteração. Também tornam mais fácil perceber quando o agente escolheu um caminho diferente do esperado.

5. Revise e experimente o resultado¶

Na raiz do repositório:

git status --short
git diff
npm run typecheck
npm run build -w @pycom/clinical-viewer-next-demo

Abra a aplicação com npm run dev e confira a interação. Um build concluído não prova que o painel lê o corte certo ou descarta uma resposta antiga. Para o histograma, rode também os testes numéricos indicados na página.

Registre o pedido usado, as correções feitas durante a revisão e os resultados observados. Essas informações ajudam a avaliar como a skill contribuiu para criar a extensão.

Anterior: Histograma · Voltar à trilha: Comece aqui.