LearnFlow.M3D — logomarca
LearnFlow.M3D
Documento descritivo técnico · m3d.pro Ecosystem
↗ Versão corrente ▶ Abrir LearnFlow.M3D
Módulo Educacional Clínico · Grupo M3D · MTD

Plataforma Imersiva de Ensino Cirúrgico Baseada em IA

LearnFlow.M3D — um simulador inteligente e interativo sobre vídeos cirúrgicos reais (4K/60fps), com decomposição step-by-step, overlay anatômico dinâmico, trilhas adaptativas e gerenciamento ativo de complicações em neurocirurgia, ortopedia e instrumentação cirúrgica.

Versão do documento · 1.0.0 (Set/2026) Autoria · Lucas da Silva Teixeira · Grupo M3D · LA Cibermedicina Público-alvo · Diretoria M3D, engenharia, interligas, residentes, avaliadores clínicos, investidores Hub de referência learnflow.m3d.pro/version
8Fases cirúrgicas indexadas
4Níveis de dificuldade
7Módulos funcionais
3Caminhos de autenticação
~50Créditos iniciais por conta

1.Apresentação e versionamento

Ficha técnica do módulo, escopo do documento e cobertura.

Documento
LearnFlow.M3D — Documento descritivo técnico do módulo educacional-gamificado
Versão
1.0.0 (Set/2026) — Edição derivada do protótipo funcional corrigido
Autoria / idealização
Lucas da Silva Teixeira — Grupo M3D · LA Cibermedicina
Módulo
LearnFlow.M3D — camada educacional imersiva do ecossistema m3d.pro
Hub de referência
learnflow.m3d.pro/version
Escopo
Decomposição step-by-step, mapa cirúrgico grafo, player imersivo com overlay de step, dashboard com gráfico de amostragem do ranking, gestão de usuários, gamificação com XP/badges/marcos.
Protocolo indexado
spine-fusion-l4l5-l5s1 · Neurocirurgia · Coluna
Idioma
pt-BR (edições en/es previstas na trilha de internacionalização)
Classificação
Educacional — não substitui treinamento supervisionado nem julgamento clínico

2.Visão geral e proposta de valor

O que o sistema entrega e a que pergunta clínica ele responde.

LearnFlow.M3D é um simulador inteligente e interativo baseado em dados reais e vídeos cirúrgicos de alta complexidade (como microcirurgias vasculares e tumorais em 4K/60fps). O sistema transcende a simples visualização de vídeos ao integrar:

  • Decomposição cirúrgica estruturada (step-by-step) com adendos referenciais, instrumentais específicos, pitfalls e dicas de especialistas.
  • Overlay anatômico dinâmico (in situ) com camadas visuais inteligentes alimentadas por Computer Vision/SAM-Med.
  • Trilhas adaptativas guiadas por IA e Grafos de Conhecimento para simulação de desfechos e gerenciamento ativo de complicações.
"Cada módulo do ecossistema compartilha governança de catálogos. LearnFlow.M3D é a camada educacional-gamificada dessa família de produtos."

2.1 Pilares da arquitetura pedagógica

A · Decomposição cirúrgica (step-by-step)

Os vídeos cirúrgicos reais são segmentados em micro-etapas em marcos críticos — dissecção, hemostasia, anastomose, fechamento ou craniotomia e abertura dural. Cada micro-etapa traz adendo referencial com instrumentais, pitfalls e dicas de especialistas.

B · Overlay anatômico dinâmico in situ

Sobreposições gráficas inteligentes destacam planos fasciais, marcos anatômicos de segurança e estruturas nobres (vasos, nervos, ductos) em seu contexto tridimensional real. A IA contextualiza os fenômenos físicos e biológicos envolvidos (tração tecidual, eletrocoagulação, tensão em suturas e hemodinâmica).

C · Trilha adaptativa de complexidade

O aluno interage questionando variações de técnica ou cenários anatômicos atípicos. A IA ajusta dinamicamente o nível de complexidade, introduzindo variantes desafiadoras ou restrições de tempo de execução.

D · Módulo de complicações e protocolos de resgate

Banco de eventos adversos vinculado a cada etapa crítica, com trechos de vídeo que exemplificam complicações reais e protocolos de resgate imediato passo a passo — transformando o imprevisto em aprendizado ativo sob pressão.

3.Tela inicial — autenticação e seleção de usuário

Três caminhos para entrar no sistema, todos fixados à mesma conta local.

A primeira superfície que o usuário encontra após o boot é a tela de autenticação, organizada em três abas internas. A escolha é flexível: o mesmo conjunto de credenciais funciona em qualquer um dos três caminhos, e os pontos/XP/créditos ficam vinculados à conta autenticada em todos eles.

3.1 Os três caminhos de entrada

🔐

Usuário e senha

Aba clássica com login + senha. Confirma hash didático + salt em localStorage. Persistência de sessão opcional ("manter conectado").

aba: ktCred
🪪

Criar conta

Wizard gamificado que pede nome completo, usuário, senha, avatar (12 disponíveis) e especialidade (6 disponíveis). Gera automaticamente uma chave de acesso de 7 caracteres.

aba: ktCreate
🔑

Entrar com chave

Lista como chips (avatar + nome + prefixo da chave) todas as contas previamente cadastradas neste navegador. Um clique preenche a chave automaticamente.

aba: ktEnter
Contas pré-carregadas para demonstração: demo@m3d.pro · learnflow e admin · m3d2026. O botão "🔐 Sair (logout) · trocar de conta" no topo direito encerra a sessão e retorna direto à aba Entrar com chave para escolher outro usuário/avatar sem digitar tudo de novo.

Campos do objeto de conta

Identidade
username · name · role · proc
Personalização
avatar (12 emojis: 🙂🧑‍⚕️👩‍⚕️👨‍⚕️🦷🧠🫀🦴🔬🎓⚡🐺) · spec (6 strings)
Créditos iniciais
50 créditos por conta nova, debitados em ações pesadas
Persistência de progresso
events[], days{}, sessions[], credits — tudo em localStorage vinculado à conta
Data de criação
Amostragem histórica de até 90 dias para a conta de demonstração

4.Os 7 módulos funcionais do app

Construído como uma SPA em pt-BR com 7 abas, navegação por mouse, teclado, atalhos e tour on-demand.

O módulo principal da aplicação é organizado em sete abas, todas acessíveis a partir do cabeçalho (#tabs) e refletidas da URL/âncora para deep-linking e compartilhamento.

🗂️

1. Trilhas

Hero com cards das fases cirúrgicas. Cada card mostra nível (Básico/Intermediário/Avançado/Crítico), número de steps, complicações e progresso do usuário. Clique abre resumo detalhado com contexto, teoria, anatomia, itens e validação de complexidade antes de ingressar.

data-tab="tracks"
🧭

2. Mapa cirúrgico

SVG navegável com protocolo, fases, steps e complicações/desfechos/resoluções. Zoom (0.18×–2.4×), pan por drag, "Expandir tudo/Colapsar" e clique em qualquer nó abre modal com metadados completos. Cada step tem overlay de registro que adiciona/remove o step do progresso e gera XP.

data-tab="flow"
🎥

3. Imersivo

Player com índice lateral (escolha de step), painel central com o vídeo do step e árvore de complicações → desfechos → resoluções. Em casos com recursividade, aparece o ícone ↻ para re-entrada no mesmo contexto clínico. Botões "Iniciar trilha" e "Reiniciar" controlam o início.

data-tab="imm"
📊

4. Dashboard

KPIs, linha temporal de XP (events ao longo do tempo), tempo de uso por dia, progresso por fase e o gráfico principal de amostragem do ranking. Painel inclui cards de "Desempenho recente" e "Mapa de conhecimento rápido" (Anatomia → Risco → Resgate).

data-tab="dash"
🧨

5. Ranking

Ranking detalhado com amostragem da coorte e confronto direto em gráfico radar entre o usuário corrente e os outros perfis cadastrados. Eixos: tempo de uso, XP, precisão, completude por fase, recursividades.

data-tab="ranking"
🛠️

6. Gestão

Painel administrativo (role gating) para edição de fases, steps, complicações/desfechos/resoluções, níveis de dificuldade e regras de XP. Permite ajustar o currículo sem perder progresso dos usuários.

data-tab="gestao"
👥

7. Usuários

Lista de todas as contas (próprias e dos pares) com avatar, especialidade, último acesso, XP, nível e botão de troca rápida. Toggle "esconder outros usuários" para foco individual.

data-tab="users"

4.1 Trilhas — curadoria e complexidade progressiva

A aba Trilhas serve como ponto de entrada na jornada. O hero apresenta os cards das 8 fases do procedimento indexado (spine-fusion-l4l5-l5s1), cada um colorido pela borda esquerda com a cor da dificuldade. Cada card lista, em pílulas informativas: o label do nível (🟢/🟡/🟠/🔴), a quantidade de steps, a quantidade de complicações mapeadas e o progresso atual (X/Y steps e %). Clicar abre um modal com cinco blocos — Contexto clínico, Teoria e princípios, Anatomia, Itens & instrumentais, Validação de complexidade — antes de o aluno se comprometer com a trilha.

4.2 Mapa cirúrgico — grafo navegável do procedimento

Construído como um grafo em SVG/WebGL com nós representando protocolo, fases, steps, complicações, desfechos e resoluções. Arestas codificam hierarquia (fase → step) e contingência (complicação → desfecho → resolução). Recursos: zoom (0.18×–2.4×), pan por drag, dois botões de massa ("Expandir tudo" e "Colapsar para protocolo") e clique em qualquer nó abre um painel lateral com o detalhe clicado. Em cada nó/step há um botão toggle que registra/desfaz o step, creditando ou removendo XP em tempo real.

4.3 Imersivo — estrutura dual-panel

O modo imersivo é o coração didático. Três regiões: à esquerda o índice de steps (com % por step), ao centro o player do step corrente com overlay de marcadores, à direita a árvore de complicações → desfechos → resoluções do step atual. Quando o step atual tem recursividade, o ícone ↻ aparece para reentrada no mesmo caso clínico. Controles: iniciar, reiniciar, próximo/anterior.

4.4 Dashboard — KPIs e linha temporal

O dashboard agrega tudo em uma única superfície: cards de KPI (XP, minutos, engajamento, %), linha temporal dos eventos de XP, histograma de tempo de uso por dia, gráfico de progresso por fase e o gráfico de amostragem do ranking (coorte de pares). Tudo é plotado com Chart.js v4.4.1 embutido offline.

4.5 Ranking & radar

O ranking mostra a posição do usuário corrente em relação à amostragem completa de contas cadastradas neste navegador. O confronto direto é feito em gráfico radar com eixos como tempo de uso, XP total, validações, recursividades e completude por nível de dificuldade.

4.6 Gestão

Painel administrativo. O acesso é feito com role gating (role="admin") na autenticação; usuários comuns não enxergam a aba. Permite editar as 8 fases do protocolo, os steps de cada fase, as complicações mapeadas, os desfechos e as resoluções. Alterações são imediatas e afetam todos os usuários a partir do próximo refresh.

4.7 Usuários

Catálogo de todas as contas conhecidas (locais). Mostra avatar, nome, especialidade, último acesso, XP acumulado, nível e link de troca rápida. Toggle "mostrar apenas meu usuário" para foco individual.

5.Gamificação — XP, badges e marcos

Tabela de XP por status do evento, multiplicador por tempo e três famílias de conquistas.

5.1 Sistema de pontos (XP)

Status do eventoXPRacional pedagógico
validado10 ptsStep concluído corretamente — creditado por toggle explícito do usuário no mapa ou no painel do step.
pendente5 ptsEm revisão — creditado parcialmente; virar "validado" ou "rejeitado" depois que o usuário revisa.
rejeitado0 ptsMarcado como erro; remoção completa do XP e da marcação de progresso.
Engajamento por tempo2 pts/minSomado ao XP bruto: xpOf(u) + minutesOf(u) × 2. Recompensa consistência de prática.
Exemplo: um residente com 30 steps validados (300 XP) e 240 minutos acumulados soma 300 + 240 × 2 = 780 pts de engajamento. Essa métrica é o que alimenta o radar de ranking.

5.2 Três famílias de conquistas (badges)

A · Badges por nível de dificuldade

🟢Básico concluído · 100% dos steps 🟢
🟡Intermediário concluído · 100% dos steps 🟡
🟠Avançado concluído · 100% dos steps 🟠
🔴Crítico concluído · 100% dos steps 🔴

B · Badges por fase

Para cada uma das 8 fases, badge dedicada ao concluir 100% dos steps daquela fase. Exemplo: $[Fase 1 concluída · 🛏️ para a fase de posicionamento.

C · Marcos de engajamento

🌱 Primeiro avanço

Registrou o primeiro step da trilha. Marco inicial da jornada gamificada.

🧠 Trilha integral

100% dos steps do procedimento indexado (spine-fusion-l4l5-l5s1). Faixa máxima do currículo.

⏱️ Consistência

7 dias consecutivos com pelo menos 30 minutos de uso registrado.

↻ Resiliência

Resolveu pelo menos 3 casos com complicação usando uma resolução recursiva (↻).

6.Modelo de dados e governança clínica

Schema local, chaves de armazenamento e ciclo de vida dos eventos.

6.1 Modelo de dados do usuário

Identidade
id · username · name · avatar · spec · role · proc
Histórico de eventos
events[] — cada evento tem id · f · s · kind · label · at · status · loop
Tempo por dia
days{} — map com chave ISO YYYY-MM-DD e valor em minutos do dia
Sessões registradas
sessions[]at · min · result (exitosa|insucesso) · f · s · steps
Créditos
credits — 50 iniciais; debitados em ações pesadas
Metadados
created — timestamp ISO para a curva de aprendizado

6.2 Camada de dados do procedimento

Constante LF indexa o protocolo e suas 8 fases com schema:

protocol
id · title · specialty (Neurocirurgia · Coluna) · descrição do contexto
phases
array de n · ic · diff · t · ctx · theory · anatomy · it[] · tec[] · steps[]
steps[]
n · t · ctx · it[] · pitfall · dica · c[] (complicações)
compli­cações
severity (high|medium|low) · o[] (desfechos)
desfechos
n · t · o[] (resoluções; podem ser recursivas ↻)

6.3 Identificadores únicos

O sistema gera identificadores à prova de colisão no boot: uid() ⇒ 'u' + Date.now().toString(36) + uidc.toString(36). As fases usam 'f' + n + '-s' + step como chave composta para steps concluídos. Isso permite diffs incrementais entre cargas sem serializar objetos inteiros.

7.Pipeline pedagógico (extraído do texto anexo)

Da captura física ao conhecimento recuperável: cinco etapas assíncronas com RAG restrito.

01

Captura física

Procedimento ou aula registrado com consentimento; checklist de privacidade nasce aqui (não no pós).

02

Ingestão & integridade

Upload a object storage com hash de integridade, classificação de sensibilidade, jurisdição de armazenamento.

03

Índice temporal

Transcodificação HLS, transcrição Whisper fine-tuned, segmentação com sobreposição → linha do tempo única.

04

Camada de conversa

Comentários, notas aclaratórias, referências, alertas de complicação — fixados a segmentos e revisitáveis.

05

RAG restrito

Resposta da IA só com segmentos recuperados; sem extrapolação; citação de timestamp obrigatória.

Tabela comparativa por camada

CamadaTecnologia propostaFunção pedagógica
Ingestão & áudioOpenAI Whisper fine-tuned em PT/Latim neurocirúrgicoTranscrição sincronizada e extração de marcos verbais.
Visão computacional in situSAM-Med 2D/3D adaptadoSegmentação de planos fasciais, vascularização, parênquima e interações de instrumentais; máscaras convertidas em coordenadas vetoriais (SVG/WebGL).
Ontologia cirúrgicaGraphRAG + Neo4jMicro-etapas, estruturas anatômicas, riscos e protocolos de resgate interconectados por arestas de contingência.
FrontendHTML5 / CSS3 / WebGL / JSRenderização fluida do player, overlays gráficos e dashboards interativos.
"Na neurocirurgia, a margem de erro é milimétrica e o manejo de complicações é medido em segundos. Por isso o índice temporal do vídeo precisa ser tão resiliente quanto o gesto que ele documenta."

8.Mapa de fases e níveis de dificuldade

As 8 fases do protocolo spine-fusion-l4l5-l5s1 com seus níveis.

#ÍconeFaseNívelTendência de progresso (típica)
1🛏️Posicionamento & abordagem inicial🟢 Básico
2🔪Incisão & exposição🟢 Básico
3🪚Preparo do leito receptor🟡 Intermediário
4🧷Instrumentação pedicular🟡 Intermediário
5🧪Preparo do enxerto / cage🟠 Avançado
6🧊Compressão & ajuste de lordose🟠 Avançado
7🔩Fixação definitiva🔴 Crítico
8🩹Fechamento & curativo🟡 Intermediário
BásicoIntermediárioAvançadoCrítico

9.Segurança, persistência e ethics

O que o protótipo faz e o que não faz — explicitamente.

9.1 Persistência local

DB principal
localStorage['lfm3d.immersive.v1'] · DBKEY
Contas
localStorage['lfm3d.accounts'] · ACCTKEY
Estado de sessão
localStorage['lfm3d.session.key'] · SESSKEY
Sessão de credenciais
CREDSESSlfm3d.session.cred · sessionStorage ou localStorage (se "manter conectado")
Estado expandido do mapa
localStorage['lfm3d.exp'] · Array de IDs de nós abertos
Hash didático
Senhas armazenadas como hash não-criptográfico + salt — adequado para demonstração e protótipo individual

9.2 Limitação explícita (relevante para uso clínico)

Aviso: LearnFlow.M3D é uma camada educacional. Não substitui treinamento supervisionado, não emite laudo, não realiza diagnóstico, não é um EHR. A persistência é client-side; em uso institucional exige backend de autenticação dedicado. O conteúdo pedagógico é derivado de casos reais cadastrados pelos curadores clínicos.

9.3 Interoperabilidade futura

Subdomínio do ecossistemaO que o LearnFlow.M3D consomeO que devolve
m3d.proTokens visuais, governança de marcaIdentidade visual em todas as superfícies educacionais
tele.m3d.proGravações de teleconsulta consentidas, contexto FHIR R4Trechos clínicos endereçáveis para estudo de caso
interligas.m3d.proCuradoria por especialidade, validação de transcrição, trilhas de ensinoÍndice federado por Especialidade e selo de revisão clínica
pod.m3d.proEpisódios, capítulos, convidadosReuso de transcrição e busca do mesmo pipeline
cypher.m3d.proPolíticas de RBAC, retenção, residência de dados, auditoriaTelemetria de acesso e trilha de auditoria auditável

10.Acesso à versão corrente

O link de produção e os dados de versão estão em uma única URL.

URL oficial

https://learnflow.m3d.pro/version

A página acima entrega o executável mais recente do módulo (com Chart.js v4.4.1 embutido offline), aplicação de patches de segurança, keymap de contas pré-carregadas e ajustes gamificados posteriores ao documento.

Status do documento: 1.0.0. Este descritivo técnico é uma peça derivada diretamente do código do protótipo corrigido e do texto anexo. Toda funcionalidade descrita aqui corresponde a comportamento real presente na base de código do módulo.