Didactic JavaScript animation explaining LLM context windows

Prompt

The author shared the full prompt.

Faça uma animação javascript de como um LLM vai compondo na janela de contexto as perguntas do usuário e as respostas geradas. É importante diferenciar a janela de contexto de entrada da de saída, que normalmente possuem tamanhos diferentes, e deve-se mostrar também que a resposta que foi gerada na janela de contexto de saída é transferida e concatenada ào contexto  da janela de entrada. Deve ser claro e didático e pode ter labels em português

PROMPT2: 

gere a animação no formato MP4 para download

Nesse mesmo estilo, prepare outra animação em Javascript que apresente o conceito “IA Generativa” de forma histórica e incremental, isto é, iniciamos pelo conceito “IA”, depois Machine Learning, Deep Learning, IA Preditiva, etc

E o resultado foi simples e claramente PERFEITO:

E mais um sobre embeddings:

Agora, preciso apresentar o conceito de vetores de embeddings. É importante explicar que vetores representam a posição semântica de um conteúdo num espaço n-dimensional e esse conteúdo representado pode ser desde uma palavra, frase, parágrafo ou documento, até mesmo conteúdo multimodal: imagem, áudio, etc. 

Lembre de explicar que para visualizar esses vetores, precisamos fazer uma redução de n para 2 ou 3 dimensões

E o importante conceito da Predição da Próxima Palavra? 

PROMPT:
Apresente agora o conceito “predição da próxima palavra” usando um exemplo em que a palavra é predita por ser parte de uma obra conhecida (ex: “Olha que coisa mais linda mais cheia de” vai predizer “graça” devido ao treinamento) e, depois, ao modificar o contexto que vem antes dessa frase semente (inclua uma frase antes que faça com que a IA escolha como próximo token algo distinto de “graça”, por influência do contexto, é claro)

Por sugestão recebida: FINE-TUNING

PROMPT: Agora, preciso da explicação do conceito de fine-tuning, de forma clara e didática

[ o prompt foi simples assim... como o prompt estava no mesmo contexto, não precisei repetir instruções ]

E vamos entender o RAG com um exemplo do domínio jurídico?

PROMPT: 
Vamos explicar o conceito de RAG tendo como exemplo uma base de jurisprudência e legislação. Os vetores da legislação foram calculados por artigo (unidade básica de articulação). Os vetores da jurisprudência foram calculados considerando a ementa e o inteiro teor (documento completo e também vetores para as suas partes: relatório, etc).

E como fica a árvore de perguntas e respostas?

PROMPT:
Crie agora uma animação que mostre de forma clara e didática que o usuário, após ver a resposta de um prompt submetido, pode: (1) regerar o resultado uma ou mais vezes; (2) editar o prompt e resubmetê-lo e (3) continuar o diálogo com novo conteúdo ou solicitando ajustes na resposta anterior. Dessa forma, o usuário deve entender que, internamente, a ferramenta de diálogo normalmente cria uma árvore de perguntas e repostas e permite navegar pelas versões da resposta (quando regerada) ou da pergunta (quando editadas). Faça de forma clara e didática.

E como os recursos de “análise de dados” dos assistentes de IA funcionam? 

PROMPT:
Agora crie uma animação que mostre como um LLM interage com um sandbox com python (como o OpenAI Advanced Data Analysis) para, no contexto de um prompt específico, criar um programa que lê dados de uma planilha que o usuário havia feito upload, filtra e agrega esses dados e, depois, cria um gráfico, retornando o resultado ao usuário.

PROMPT [Temperatura e Amostragem]:
Desenvolva agora "2. Temperatura e amostragem: por que regerar dá respostas diferentes
Ponte entre a animação do "próximo token" e a da "árvore da conversa".
Parte das mesmas barras de probabilidade ("Minha terra tem → palmeiras 81%…").

Um controle de temperatura vai de 0 a 1.5 e as barras mudam de forma na tela: com temperatura baixa, a opção mais provável domina; com temperatura alta, as outras ganham chance.

Uma "roleta" sorteia o token várias vezes seguidas, mostrando como a mesma pergunta gera continuações diferentes.

Fecha com usos práticos: temperatura baixa para ementas, extração de dados e respostas técnicas; mais alta para brainstorming de títulos e textos criativos.

PROMPT [Alucinação e atenuando com RAG]: 
Desenvolva: "Alucinação: quando o plausível não é verdadeiro

Pergunta: "Cite um precedente do STJ sobre purgação da mora". Sem RAG, o modelo gera, token a token, um número de REsp com formato perfeito, relator e data, mas inexistente. As barras mostram que cada token era provável, mas nenhuma fonte confirmava o conjunto.
A mesma pergunta com RAG: o modelo só cita o que foi recuperado, e a citação tem link para a fonte.
Um quadro compara os tipos de alucinação: citação inventada, dispositivo legal trocado, número calculado "de cabeça" (resolvido pelo sandbox) e informação desatualizada.
Termina com um checklist de verificação para o profissional do direito: conferir a fonte, a vigência, o número do processo e o inteiro teor."

PROMPT [Apurando a semântica nas camadas]

Crie uma animação que mostre como se calcula o vetor de uma frase ao longo das diversas camadas de um LLM, desde a camada inicial com a lista de tokens iniciais, e depois o modificador que representa a posição, e depois vai passando por diversas camadas até que, ao final, chega-se ao vetor semântico da entrada que representa o contexto. Seria interessante fazer um paralelo com a interpretação de imagens nas camadas, que também funciona bottom-up (tente representar uma rede com várias camadas).

Category

Explainers

On X

274 likes · 31K views · 179 saves