Por trás do projeto

Como criei o Anatomy Atlas

De imagens anatômicas reais a um atlas interativo em 3D. Veja o processo, acesse o código e adapte o atlas para o seu projeto.

6 regiões3D + 3 cortesEstudo + quiz
Tela real do Anatomy Atlas com neuroanatomia por ressonância, modelo 3D, cortes e painel de estudo
Tela real do Anatomy Atlas by MED Magno

Projeto educacional, feito com fontes anatômicas licenciadas e verificação dos dados.

O resultado

Uma anatomia que você pode percorrer

Selecione uma estrutura no 3D e encontre o mesmo ponto nos cortes axial, coronal e sagital.

6módulos
4perspectivas
180estruturas únicas

As regiões vêm de exames e atlas diferentes. A interface não representa um único corpo.

Animação com capturas reais do Atlas passando por cabeça e pescoço, abdômen, pelve, pernas e pésTela do Atlas na região dos pés
O mesmo explorador, da cabeça aos pés.
Explore a entrega

Seis regiões. Um jeito de aprender.

Capturas reais dos módulos. Cada região carrega apenas seu exame e suas estruturas.

Bastidores

Como eu fiz, passo a passo

O produto nasceu dos dados. A interface veio depois que imagem, máscara e posição espacial passaram a concordar.

02

Conferi imagem e segmentação

Validei dimensões, posição espacial e rótulos. Volume e máscara precisavam ocupar a mesma grade antes de qualquer recorte.

Uma estrutura bonita no 3D não ajuda se aponta para o lugar errado na TC ou RM.
Três cortes de cabeça e pescoço usados para conferir a segmentação do encéfalo

Axial, coronal e sagital foram conferidos contra o mesmo volume.

03

Transformei os dados em 3D

Recortei e reamostrei imagem e máscara juntas. Das máscaras, extraí malhas, suavizei quando apropriado e exportei modelos GLB.

Mantive a referência espacial entre voxels, malhas e mira das quatro vistas.
Examevoxels
Máscararótulos
MalhaGLB
Atlas4 vistas
Resultado 3D da pelve conectado aos cortes de tomografia
04

Construí o explorador

Reuni 3D, axial, coronal e sagital numa mira sincronizada. Depois acrescentei busca, contraste de TC, T1/T2 e controles para isolar estruturas.

Só a região ativa carrega seus arquivos: a navegação fica mais leve.
Quatro perspectivas sincronizadas no Atlas de cabeça e pescoço

Uma seleção posiciona a estrutura nas quatro vistas.

05

Fiz o Atlas ensinar

Acrescentei fichas anatômicas, percursos guiados e quiz. O progresso fica salvo no navegador em que a pessoa estudou.

As fichas trazem fontes; ainda não há revisão médica independente registrada.
Tela de estudo com ficha anatômica e roteiro guiadoTela de quiz de anatomia com alternativas

Explorar → estudar → testar o que ficou.

06

Revisei o que podia enganar

Troquei a TC de cabeça por um caso com melhor aparência visual; para neuroanatomia detalhada, usei RM T1/T2 na grade original de 1 mm.

Não inventei detalhes com IA: a suavização de tela melhora a exibição, sem aumentar a resolução do exame.
Imagem T1 do atlas médio usado para neuroanatomia
Detalhe de origem · T1
Imagem T2 do atlas médio usado para neuroanatomia
Detalhe de origem · T2

Fonte certa e limites claros valem mais que uma imagem artificialmente nítida.

O que fez a diferença

Três decisões que sustentam o Atlas

Dados rastreáveis

Casos, versões, hashes e licenças documentados.

Espaço consistente

Imagem, máscara, 3D e mira falando a mesma coordenada.

Ensino, não diagnóstico

Interação didática com limites e fontes visíveis.

Código pronto para usar

Copie o código aqui embaixo.

Entre no ChatGPT, no ChatGPT Codex ou no Claude Code. Cole o link do projeto e o pedido pronto e diga à IA: “Comece a produção.” Depois, peça o nome, as cores e o estilo que quiser.

Ver código no GitHub ↗
CÓDIGO COMPLETO E FUNCIONALanatomy-atlas-educacionalApp + seis regiões + imagens processadas + testes
https://github.com/juliooandradee/anatomy-atlas-educacional
01 · CHATGPT

Conecte o GitHub

Selecione este repositório para a conversa consultar o código. Para editar e testar todos os arquivos, continue no Codex ou Claude Code.

02 · CHATGPT CODEX

Abra o projeto

Baixe e abra a pasta no Codex. Se usar o Codex pela web, faça uma cópia no GitHub e selecione esse projeto.

03 · CLAUDE CODE

Abra a pasta do código

Baixe o projeto, extraia o ZIP e abra a pasta no Claude Code. Depois cole o pedido pronto.

Para produzir com os arquivos reais: abra o projeto completo no Codex ou Claude Code. No ChatGPT, conecte o GitHub para consultar o repositório. Em seguida, cole o pedido abaixo.

Pedido pronto para a IA começar

Cole este pedido depois de dar acesso ao código. Troque nome, público e cores agora ou peça as mudanças depois.

Ver o pedido completo
Comece a produção agora. Aja como uma equipe de engenharia de software, visualização médica 3D, design de interfaces e controle de qualidade. Quero que você CRIE e ENTREGUE uma aplicação executável, com código-fonte completo, a partir do projeto abaixo. Faça as alterações no projeto e teste o resultado; não responda apenas com um plano ou trechos de código.

Meu projeto:
- Nome: {NOME DO PROJETO: Atlas Anatômico Interativo}
- Público: {PÚBLICO: estudantes e profissionais da saúde}
- Identidade visual: {CORES E ESTILO: azul ardósia, branco, tipografia legível e visual científico contemporâneo}

BASE OBRIGATÓRIA
Trabalhe no projeto que abri nesta tarefa. Se a pasta ainda estiver vazia, clone https://github.com/juliooandradee/anatomy-atlas-educacional. Leia README.md, PROMPT.md, LICENSE-CODE.md e LICENSE-DATA.md. O repositório já traz o app Next.js, os arquivos anatômicos processados em web/public/data/, os pipelines de origem e os testes. Use essa base real para que a anatomia, as interações e a organização das telas fiquem próximas ao exemplo. Não substitua o projeto por um mockup, imagens estáticas, uma demonstração sem dados ou uma reimplementação superficial.

Faça um inventário curto dos módulos e arquivos existentes. Em seguida, implemente a versão com o nome e a identidade visual que defini. Use Next.js, React, TypeScript, Three.js/React Three Fiber e a estrutura do projeto, preservando os dados e as relações espaciais. Se precisar mudar a arquitetura, justifique a mudança e mantenha todas as funções.

FUNCIONALIDADES QUE DEVEM ESTAR PRONTAS
1. Seis módulos navegáveis: neuroanatomia por RM, cabeça e pescoço, abdômen, pelve, coxas e pernas, tornozelos e pés. Mostre o nome da região e a origem do exame. Carregue apenas os arquivos da região ativa e descarte respostas antigas ao trocar rapidamente de módulo.
2. Em cada região, mantenha o modelo 3D e os cortes axial, coronal e sagital do mesmo volume. A seleção no 3D ou na lista deve localizar a estrutura e posicionar a mira em um voxel interior da máscara; cliques e arrastos nos cortes devem atualizar a mira e as outras vistas. Respeite orientação radiológica, lado direito/esquerdo e limites da imagem.
3. Inclua rotação, zoom, mostrar/ocultar e isolamento de estruturas, planos de referência, busca por nome, filtros por grupo quando disponíveis, navegação por cortes, ampliação de cada vista e controles utilizáveis no teclado e no celular.
4. Para as tomografias, preserve HU quando o arquivo da região os contém e ofereça janelas adequadas para encéfalo, tecidos moles e ossos. Para a RM, permita alternar T1 e T2 com a mesma posição da mira; intensidade de RM não é HU. A interpolação visual pode suavizar pixels na tela, mas não aumenta a resolução adquirida.
5. Mantenha as fichas de estudo com fontes, roteiros guiados e quiz de cinco perguntas com alternativas distintas. Registre respostas, pistas e progresso no navegador; trate armazenamento bloqueado sem quebrar o app. Não revele a resposta antes da escolha do aluno.
6. Faça uma interface responsiva, com contraste, foco visível, rótulos acessíveis, estado de carregamento e mensagem de erro com opção de tentar novamente. O 3D e os cortes devem continuar utilizáveis em telas pequenas, sem rolagem horizontal.

DADOS, FIDELIDADE E DIREITOS
Os arquivos processados já incluídos permitem abrir o app imediatamente. A RM usa ICBM152/CerebrA; cabeça e pescoço e abdômen usam dois casos do TotalSegmentator; pelve até os pés usa um caso BoneHub/VSD. São fontes e indivíduos distintos: não os apresente como um único paciente nem simule continuidade anatômica entre regiões. Preserve a associação entre volume, máscara, metadados e malhas. Não invente rótulos, estruturas ou detalhes de exame e não gere imagens médicas sintéticas para preencher lacunas.

Os pipelines Python estão em pipeline/ para quem desejar reconstruir os arquivos a partir das fontes; essa reconstrução não é necessária para personalizar a interface. Se alterar dados, recortes ou malhas, verifique dimensões, affine, espaçamento, lateralidade, integridade e correspondência voxel ↔ corte ↔ 3D. Registre o caso e a versão usados.

Crie sua própria identidade visual: substitua título, ícone, paleta, textos de abertura e metadados. Não copie nomes, emblemas, imagens de marca ou identidade institucional de terceiros. Preserve os créditos e avisos das fontes em LICENSE-DATA.md e no produto. O código permite reutilização não comercial conforme LICENSE-CODE.md; os dados têm licenças próprias, inclusive CC BY-NC-SA 4.0 para os derivados BoneHub. Não apresente a aplicação como dispositivo médico, ferramenta diagnóstica ou substituto de revisão anatômica.

EXECUÇÃO E ACEITE
Instale as dependências com npm ci dentro de web/. Rode npm test, npm run typecheck e npm run build. Inicie o servidor e abra a aplicação no navegador. Verifique cada uma das seis regiões, a seleção de estruturas reais, o alinhamento entre 3D e três cortes, a troca T1/T2, a janela de TC, o estudo, o quiz, a persistência do progresso e a troca rápida de região. Confira desktop e uma tela móvel; corrija erros de execução, recursos ausentes e transbordamento horizontal. Se alterar o processamento anatômico, execute também os verificadores Python correspondentes.

ENTREGA
Entregue o projeto completo e executável na minha cópia de trabalho, não apenas arquivos isolados ou uma descrição. Informe como abrir localmente, quais arquivos foram alterados e o que cada mudança resolve. Liste os testes que de fato passaram e qualquer limite ainda não verificado. Mostre capturas das telas principais em desktop e celular. Explique como publicar na Vercel usando web como Root Directory, mas só faça o deploy quando eu pedir. Escreva de forma clara para quem está aprendendo: diferencie o que está pronto, o que foi testado e o que ainda exige revisão humana.
Depois, basta pedir:“Troque o nome para Atlas da Minha Escola e a cor principal para azul. Mantenha a anatomia e as funções.”

Versão compartilhável sem a marca original. Código sob PolyForm Noncommercial 1.0.0; os arquivos anatômicos mantêm suas licenças e créditos. O código e os dados processados dão uma base fiel, mas o resultado final depende das mudanças e da revisão de quem usar.

Créditos dos dados

As fontes por trás das imagens

O Anatomy Atlas é educacional. Seus exames, segmentações, textos e malhas não foram validados como ferramenta de diagnóstico, medição clínica ou planejamento terapêutico.
Seu próximo projeto

Comece por uma região.

Escolha uma fonte licenciada, confirme o alinhamento e só então transforme os dados em uma experiência de aprendizado.

Acessar comunidade ↗