Todo bloco que o curso sabe construir, ao vivo e interativo, em um só lugar. É a prova de que o vocabulário visual está mapeado e funcionando — fluxogramas, comparativos, calculadoras, flashcards, previsão, exemplo resolvido, revisão cumulativa, contadores, gráficos e animação — todos no design canônico Warm-Neutral, claro e escuro. Use como referência ao montar uma lição.
Objetivos — o que esta galeria prova
Que cada tipo de diagrama/fluxograma/SVG tem um padrão pronto, animado e seguro nos dois temas.
Que a interatividade (sliders, abas, flashcards, previsão, quiz) já está fiada no course.js compartilhado.
Que a pedagogia (objetivos, exemplo-antes-da-abstração, recuperação, revisão espaçada, feedback específico) é estrutural, não enfeite.
Que tudo é self-contained: abre do file://, sem build, sem rede.
Mapeia: lesson-generator (objectives) + a barra de progresso no topo que marca ◇→◆ conforme você rola.
Fluxograma
Mapeia demo: 13 · flowchart-diagram · 16 · implementation-plan. Caixas + losango de decisão + setas; caminho tracejado animado (.flow) e traço que se desenha no reveal (.draw).
Qual quantização escolher para a SUA RAM? (decisão)
Leia de cima → baixo: a RAM livre decide a quantização. O caminho verde lembra: sempre reserve folga para o KV cache e o sistema.
Diagrama comparativo
Mapeia demo: 14/15 · research-explainer. Dois lados, mesma escala, a diferença salta aos olhos (memória unificada × GPU discreta).
Mesma escala: no Apple Silicon os 128 GB são um pool único (CPU+GPU sem cópia); no PC, o modelo precisa caber nos 24 GB da GPU ou sofre cópia pelo PCIe.
Calculadora de VRAM
Mapeia demo: 20 · prompt-tuner / 06 · component-variants — um controle muda uma variável e o SVG + o número recalculam ao vivo.
VRAM ≈ parâmetros × bits ÷ 8 — contra o orçamento de 128 GB
Arraste os controles: a barra fica âmbar perto do teto e vermelha quando estoura os 128 GB. É a conta da Lição 02, ao vivo.
Medidor de tok/s
Mapeia demo: 07 · prototype-animation — um ponteiro analógico que recalcula a velocidade de decode pela banda de memória.
tok/s de decode ≈ banda ÷ tamanho do modelo (teto teórico)
O decode é limitado por banda: cada token relê todos os pesos. Modelo menor ou banda maior → o ponteiro sobe. É a Lição 03, ao vivo.
Abas Simples / Técnico
Mapeia demo: 04 · code-understanding + a pedagogia "explique simples, depois preciso". O mesmo conceito em duas profundidades.
Quantizar é guardar cada peso com menos casas. Em vez de 16 bits por número, você usa 4 — o arquivo encolhe 4×, e o modelo quase não perde qualidade se você fizer com cuidado.
Q4_K_M usa blocos com escala/min em FP16 e índices de 4 bits, com camadas sensíveis (attention, primeiras/últimas) preservadas em precisão maior — a "receita assimétrica". Erro de quantização ∝ passo do bloco; perplexidade sobe pouco até ~4 bits e desaba abaixo de ~3.
Flashcards
Mapeia demo: 06 · component-variants + a recuperação ativa do learn. Clique (ou Enter/Espaço) para virar; tente lembrar antes.
A banda de memória — cada token relê todos os pesos. Prefill segue o compute.
Ponto-doce
Qual quant equilibra tudo?
clique pra virar ↻
Resposta
Q4_K_M: ~4× menor que FP16 com perda de qualidade quase imperceptível.
Folga
Por que não encher os 128 GB?
clique pra virar ↻
Resposta
O KV cache cresce com o contexto e o SO precisa de RAM. Reserve ~10–20%.
Previsão
Mapeia: a previsão-antes-da-revelação do learn. Comprometa um palpite e a resposta aparece.
Preveja antes de revelar
Um modelo de 70 B em Q4_K_M ocupa ~35 GB de pesos. Quanto de KV cache ele pede a 32k tokens de contexto — mais perto de 2 GB, 8 GB ou 20 GB?
Da ordem de ~8 GB (varia com camadas/cabeças e a quantização do próprio cache). Por isso 35 GB de pesos não significam 35 GB de RAM: some o KV cache e o SO. É a Lição 06.
Exemplo resolvido
Mapeia demo: 16 · implementation-plan + o worked-example→try-it do learn. Passos numerados, depois você repete.
Cabe um 70 B em Q4 no meu M5 Max 128 GB?
1
Pesos: 70 × 4 ÷ 8 = 35 GB.
2
KV cache a 32k ctx: ~8 GB.
3
Sistema + apps: reserve ~16 GB.
4
Total ≈ 35 + 8 + 16 = 59 GB < 128 GB → cabe com folga, dá até para subir o contexto.
Agora você: refaça para um 120 B em Q4 (passo 1 = 60 GB). Ainda cabe? E em Q8?
Quiz com feedback
Mapeia demo: 15 · concept-explainer. Opções do mesmo tamanho (sem pista pela forma) e feedback específico: por que a certa é certa e por que cada errada falha.
O que limita a velocidade de decode (gerar 1 token por vez) num LLM local?
Banda. No decode, gerar cada token exige reler todos os pesos da memória → a banda (GB/s) é o teto. CPU erra: o trabalho roda na GPU/ANE e é memory-bound, não compute-bound. SSD erra: ele importa no carregamento inicial, não a cada token (salvo streaming do disco). É a Lição 03.
Revisão cumulativa
Mapeia: a revisão espaçada do lesson-generator. Um placar corre por todas as perguntas do bloco.
Mapeia demo: 12 · incident-report / 17 · pr-writeup. Os blocos que carregam a explicação: callout, spotlight, recall, citação e tabela comparativa.
Callout. O destaque calmo para uma ideia de apoio — borda oliva, fundo suave. Use para "lembre-se que…".
Spotlight
O destaque forte — borda âmbar — para a ideia central da seção. Aqui mora a frase que o leitor precisa levar embora.
"Decode is memory-bound: every token rereads the whole model."— síntese do playbook do @TheAhmadOsman
Recall: a banda de memória é o teto do decode — guarde isso, volta em quase toda lição.
Quantização
Bits/peso
70 B (GB)
Qualidade
FP16
16
140
referência
Q8
8
70
quase idêntica
Q4_K_M
~4.5
~35
ponto-doce
Q2_K
~2.6
~18
degrada (salvo receita assimétrica)
Esta galeria é a referência viva do vocabulário visual-teach. Toda lição do curso é montada com estes blocos — e toda nova lição deve usá-los, nunca reinventar.