Construir as cenas do orquestrador, do paralelismo e do robô

Um orquestrador de modelos de IA se explica melhor como um fluxo que a pessoa dispara e vê andar do que como um parágrafo. Orquestrador é o programa que recebe um pedido, parte em tarefas e entrega cada uma ao modelo mais barato que dá conta. Quem vê as tarefas correndo lado a lado entende em dez segundos o que uma página inteira de texto não entrega.

A metáfora que funciona é o balcão de despacho de uma transportadora, e a que atrapalha é o maestro. O maestro sugere harmonia contínua. O despacho mostra o que interessa: alguém classifica o pedido, escolhe quem atende, cobra o retorno e decide o que fazer quando uma resposta volta incompleta.

O harness é a segunda peça, e a mais esquecida. Harness é a armação que envolve o modelo e organiza o trabalho dele, como o arreio de um cavalo de tração. Na prática, é o ciclo em que o modelo pede uma ferramenta, a ferramenta executa, um portão confere e só então a resposta segue.

O artigo da freeCodeCamp sobre o tema, de 2026, resume a divisão: o harness é tudo o que roda em volta do modelo, e o modelo é só a parte que prevê texto.

A animação que ensina errado é a fila reta. Se as cinco tarefas aparecem uma atrás da outra, a pessoa aprende que o orquestrador é uma esteira. O ponto central se perde: no modo paralelo, o tempo de parede é o da tarefa mais lenta, e a soma de todas só aparece no modo sequencial.

Esconder a reprovação é o segundo erro. Um laço que acerta de primeira ensina que agente (o programa que executa o pedido com as ferramentas que recebeu) é sinônimo de acerto. Mostre a verificação devolvendo um resultado ao orquestrador, porque essa volta separa um harness de uma chamada solta ao modelo.

Addy Osmani registra, no texto sobre engenharia de harness de 2026, uma frase de Boris Cherny, criador do Claude Code: a verificação é a coisa mais importante para a qualidade.

Um caso real calibra a cena. Em 25 de setembro de 2026, o geo-orchestrator da Brasil GEO, orquestrador de código aberto que roda cinco modelos de fornecedores diferentes, respondeu a uma pergunta de pesquisa deste capítulo em modo paralelo. O mais rápido levou 18,2 s e o mais lento 221 s, com uma nova tentativa por tempo esgotado.

No relógio de parede, a rodada durou 221 s, e a soma das cinco durações daria 360 s, por US$ 0,48 no total. Esses números viram os parâmetros da cena: ao alternar para o modo sequencial, a barra cresce até 360 s; ao voltar ao paralelo, cai para 221 s. A diferença de 139 s é o argumento inteiro do paralelismo em um gesto.

O laboratório abaixo monta esse grafo com o React Flow, a biblioteca de nós e conexões que os editores de fluxo usam. Dispare o pedido e veja as cinco tarefas correrem; ligue a verificação e repare na volta; troque para o modo sequencial e compare o tempo de parede. Com movimento reduzido ativo no aparelho, nada anda sozinho e a cena avança por botão.

O React Flow entra porque o grafo tem estado: cada nó guarda se está aguardando, executando, concluído ou reprovado. A biblioteca, ou seja, o pacote de código pronto que a página baixa, cuida de posição, conexão, zoom e toque. Um grafo desenhado à mão em SVG resolve a figura estática desta aula, e é a alternativa certa para quem lê sem JavaScript.

Quando a máquina de estados vem do designer, o Rive cabe melhor. O arquivo .riv carrega a lógica de estados e o código só dispara entradas, ao custo de um runtime de cerca de 200 kB em WebAssembly. O dotLottie ganhou máquinas de estado no fim de 2025, mas segue controlando a reprodução de fora, e a lógica continua no seu código.

As ferramentas de agente mostram o mesmo cuidado. Em junho e julho de 2026, o Claude Code passou a exibir a árvore de subagentes crescendo e estados coloridos por linha, e o LangGraph Studio mostra etapas e estados intermediários. A animação comprovada nesses produtos é a do indicador de atividade; as conexões não se movem, e isso basta para o operador.

Antes de publicar a cena, faça o teste das três leituras. Com o script desligado, a figura estática precisa contar a mesma história. Com movimento reduzido, cada estado precisa se distinguir com a tela parada. E uma pessoa leiga precisa dizer em uma frase, ao fim da narração, o que o orquestrador fez. Se alguma das três falhar, a cena está decorando, e sai antes de ir ao ar.

O trecho abaixo é o coração do laboratório. Um nó do React Flow carrega o próprio estado, e a aresta só anda enquanto a etapa executa e a pessoa não pediu movimento reduzido. O código completo, com o roteiro dos eventos e a medição real, está no arquivo para download logo depois.

Fazer milhares de tarefas e a velocidade caberem numa cena

O orquestrador já aparece distribuindo e conferindo, e a cena seguinte precisa provar o paralelismo com trabalho de verdade e separar a espera inicial do ritmo de geração.

Paralelismo se demonstra com trabalho de verdade dividido entre os núcleos do aparelho. Velocidade se demonstra com duas medidas separadas: a espera pela primeira palavra e o ritmo em que as demais chegam. Uma barra que anda mais depressa prova pouco. Mil ladrilhos pintados por oito trabalhadores ao mesmo tempo provam o mecanismo.

Computação paralela é dividir um trabalho grande em pedaços iguais e independentes e executá-los no mesmo instante, em processadores diferentes. A metáfora certa é o porto com dezenas de guindastes iguais, e a errada é o caminhão mais veloz: o guindaste não anda mais depressa, há mais deles.

A escala de hoje foge da intuição. O Colossus, da xAI, em Memphis, chegou a 555 mil GPUs anunciadas em janeiro de 2026. GPU é a placa gráfica que virou o processador padrão da IA, porque faz milhares de contas iguais de uma vez. Um único rack Blackwell Ultra da NVIDIA reúne 72 chips, segundo o anúncio de 18 de março de 2025.

O navegador tem a versão doméstica desse porto. Web Workers (fios de execução separados da tela, que rodam sem travar a página) usam os núcleos do aparelho, e um notebook comum informa de quatro a 16. Quando a cena divide 1.024 tarefas iguais entre oito trabalhadores, o tempo cai perto de oito vezes, e para de cair quando os trabalhadores passam dos núcleos.

O que não cai é a soma no fim. Juntar os 1.024 resultados numa resposta só roda em um lugar, e essa fila de saída é o gargalo que nenhum paralelismo elimina. Gene Amdahl deu nome ao limite em 1967: a parte do trabalho que não se divide manda no tempo total quando a parte divisível já encolheu.

Velocidade tem duas medidas, e a cena precisa separá-las. A primeira é a espera até a primeira palavra, o tempo entre apertar enviar e ver algo na tela, como o intervalo até alguém atender o telefone. A segunda é o ritmo de geração, em tokens por segundo. Token é o pedaço de palavra que o modelo produz de cada vez, cerca de três quartos de uma palavra em português.

Os números de hoje dão a escala da corrida. Uma pessoa lê em silêncio cerca de 238 palavras por minuto, na meta-análise de Brysbaert publicada em 2019. Uma GPU especializada da Groq produz cerca de 480 tokens por segundo no modelo gpt-oss-120B.

O chip do tamanho de um wafer da Cerebras produz cerca de 1.700 tokens por segundo no mesmo modelo, nas medições da Artificial Analysis consultadas em 25 de setembro de 2026. O fabricante anuncia 3.000, e a cena usa o número medido.

O laboratório abaixo faz as duas coisas. No primeiro painel, os trabalhadores são Web Workers reais: escolha quantos, execute e veja os ladrilhos pintados por cada um, com o tempo medido no seu aparelho.

No segundo painel, a corrida de tokens usa o GSAP, a biblioteca de linha do tempo, para animar as três pistas, e o number-flow para os contadores. Percorra a linha do tempo pelo controle deslizante e compare a espera inicial com o ritmo.

O GSAP entra aqui porque a animação é o produto da cena, o quarto degrau da escada da trilha de movimento. Uma linha do tempo com três pistas, pausa, percurso pelo controle e escala de tempo pede um sequenciador. O pacote ficou gratuito em 2025, sob a Webflow, e a versão 3.15 saiu em 13 de abril de 2026.

Já o Canvas 2D desenha os 1.024 ladrilhos porque mil elementos no DOM travam a página, e o number-flow entra porque o contador muda dezenas de vezes na sessão. Para milhares de partículas com interação, o PixiJS 8 é o degrau seguinte. Para milhões, a placa de vídeo pela WebGPU, que o Safari 26 passou a entregar em 2025 e o Chrome entrega desde 2023.

Antes de publicar, meça no celular mais fraco da equipe, porque o painel de trabalhadores usa o processador de quem visita. Se o tempo com um trabalhador passar de dez segundos, reduza as tarefas para 256. E mantenha as duas medidas de velocidade separadas na tela: quem mistura espera inicial com ritmo publica um cronômetro que não explica nada.

O trecho abaixo mostra as duas peças que o laboratório usa de verdade. A primeira é o trabalhador criado a partir de um Blob, sem configuração de empacotador. A segunda é a linha do tempo do GSAP, pausada, que o controle deslizante percorre. O arquivo para download traz o componente inteiro, com a fila dinâmica e os três ritmos.

Colocar um robô simulado e uma cena imersiva na página

Com o paralelismo e a velocidade medidos no próprio aparelho, resta a cena que a pessoa toca: o robô que obedece à física e a imersão oferecida só a quem tem o visor.

Um robô simulado convence quando obedece à física e a um alvo, e uma cena imersiva convence quando a pessoa entra nela pelo próprio visor. As duas nascem do mesmo lugar, a janela do navegador, e custam a mesma coisa: peso de código que só deve descer depois de um pedido explícito de quem visita.

Simulação de robô é o ensaio numa réplica digital antes de mover a máquina de verdade. A cena desta aula é um braço de três juntas que pega cubos numa posição e empilha em outra. A garra não segue um roteiro gravado: o código calcula, a cada quadro, os ângulos que as juntas precisam ter para a ponta chegar ao alvo. Esse cálculo se chama cinemática inversa.

A física dá o resto da credibilidade. Quando a garra solta o cubo, ele cai, bate e se acomoda na pilha, porque um motor de física governa os objetos. Motor de física é o programa que calcula gravidade, colisão e atrito, como o de um jogo. O Rapier, escrito em Rust e compilado para o navegador, é o motor padrão do ecossistema React Three Fiber.

A pilha é a mesma do herói deste curso. Three.js é a biblioteca de 3D do navegador, o pacote de código que desenha a cena, com a r186 anunciada em 8 de setembro de 2026. O React Three Fiber a traduz em componentes React. O drei traz câmera orbital, sombra de contato e grade prontas, e o Rapier entra pelo pacote @react-three/rapier 2.2.

O custo é conhecido antes de começar. O arquivo do Three.js tem cerca de 640 kB antes de minificar e comprimir, e o motor de física traz 1,4 MB de WebAssembly. Por isso a cena não carrega com a página: a pessoa vê um desenho estático e um botão que declara o peso, e só então o código desce. Quem lê sem JavaScript fica com o desenho, que conta a mesma história.

Quatro decisões mantêm o celular frio. Limite a densidade de pixels a 1,5, porque renderizar em 3x numa tela de retina triplica o trabalho sem ganho visível. Rode o laço de quadros só enquanto a cena se move, e pare quando a aba se esconde ou a cena sai da tela.

Dispense sombras dinâmicas, porque a sombra de contato do drei entrega a leitura de apoio por uma fração do custo. Mantenha a física com poucos corpos: quatro cubos e um chão bastam para ensinar gravidade.

Com movimento reduzido ativo no aparelho, a cena abre parada e avança um ciclo por botão. Nada gira sozinho, e a pessoa ainda pode orbitar a câmera com o dedo, porque orbitar é ação dela, e não movimento disparado pela página.

Imersão no navegador é a WebXR, a interface que entrega a cena a um visor de realidade virtual sem instalar aplicativo. O botão de entrar só aparece quando o aparelho responde que oferece a sessão imersiva. Num celular ou notebook comum ele não existe, e a cena continua navegável com o dedo ou o mouse.

O cenário de setembro de 2026 tem dois caminhos. No Safari 27 do visionOS, o elemento model e a Immersive API deixam um site oferecer um ambiente imersivo a partir de um arquivo USDZ, com poucas linhas de código. Esse caminho é distinto da WebXR. No Quest Browser, a WebXR segue o caminho padrão, com renderização foveada por WebGPU em fase experimental desde a versão 150.1, de 28 de agosto de 2026.

Um vídeo em 360 graus não é imersão. A perspectiva precisa responder ao movimento da cabeça, e a mão precisa tocar o objeto; sem essas duas respostas, a pessoa assiste, e a cena vira filme.

O laboratório abaixo é a cena completa. Carregue o 3D pelo botão, inicie o ciclo e orbite a câmera. Mostre os ângulos das juntas para ver a cinemática inversa trabalhando, troque a velocidade e repare que a física continua coerente. Se um visor compatível estiver conectado, o botão de realidade virtual aparece ao lado dos controles.

Antes de aprovar uma cena 3D, cobre três provas de quem a entregou. A primeira é o peso declarado antes do clique. A segunda é a nota de velocidade da página sem a cena carregada. A terceira é um vídeo de trinta segundos do celular mais fraco da equipe rodando o ciclo.

Se a resposta for uma cena que abre sozinha e aquece o aparelho, peça o degrau de baixo: um vídeo curto do robô com legenda resolve a maior parte das páginas de venda.

O trecho abaixo reúne o que a cena faz de mais específico. A física do Rapier entra com o chão e os cubos. A cinemática inversa de dois elos sai da lei dos cossenos. E o cubo troca de corpo cinemático para dinâmico na hora de soltar. O componente inteiro, com a câmera, o botão de peso e o visor, está no arquivo para download.