# Degustação Dois modelos de IA respondem à mesma pergunta lado a lado, sem nome, e você vota antes de descobrir quem é quem. > Degustação é um componente exclusivo do THM Componentes que coloca dois modelos de IA para responder à mesma pergunta lado a lado, em streaming e com os nomes ocultos. A pessoa vota em A, B, empate ou ambos ruins, os nomes aparecem e um placar registra o resultado, com tokens, tempo e velocidade de cada resposta. - Categoria: Interfaces de IA - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/degustacao/ ## Como ele é Lembra um teste de sabor às cegas. Num cartão claro, o topo mostra o título da arena e o número da rodada, e logo abaixo aparece a pergunta em negrito, com um ícone de balão. Duas colunas, Modelo A e Modelo B, recebem o texto aos poucos, cada uma no seu ritmo, com um indicador girando e um cursor. No rodapé de cada coluna, tokens, segundos e tokens por segundo sobem ao vivo. Quando as duas terminam, os botões de voto se acendem; depois do voto, os nomes aparecem, a vencedora ganha borda na cor de destaque e a outra fica apagada. Embaixo, o placar soma as vitórias. ## Você pode estar procurando isto se pediu algo assim - “comparar a resposta de dois modelos de IA lado a lado” - “teste cego para a equipe escolher qual IA responde melhor” - “votar na resposta mais útil sem saber qual modelo gerou” - “tela de avaliação de prompts com placar de vitórias” - “mostrar a velocidade em tokens por segundo de cada modelo” - “arena de chatbots, tipo competição entre IAs, para o meu time” - “escolher entre dois modelos antes de colocar em produção” ## Também chamado de arena de modelos, comparação de modelos, teste cego de IA, avaliação de prompts, model arena, LLM comparison, side-by-side eval, blind A/B test ## Quando usar - Avaliar modelos e prompts lado a lado antes de escolher o que vai para produção - Rodadas internas em que a equipe vota às cegas, sem viés de marca - Demonstrações para clientes comparando dois fornecedores de IA - Ferramentas de avaliação que registram votos e métricas por rodada ## Quando evitar - Medições de custo exatas, já que a contagem de tokens é uma estimativa própria, não o tokenizador do modelo - Avaliações que precisam guardar o histórico sem integração, porque o placar vive só na memória da página ## Como pedir para a sua IA ```text Crie uma arena cega para comparar dois modelos de IA no meu painel interno: a mesma pergunta respondida lado a lado em streaming, nomes ocultos até o voto, botões de A, B, empate e ambos ruins, métricas de tokens e tempo, colunas empilhadas no celular e placar salvo na minha API. ``` Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Degustação ### Como ligo Degustação aos meus modelos? Passe na prop sources pelo menos dois modelos, cada um com nome e uma função respond que recebe o prompt e devolve a resposta em pedaços, como um fluxo assíncrono. Degustação sorteia o par e a pergunta de cada rodada pela semente e aceita perguntas próprias na prop questions. ### O placar de Degustação fica salvo? Não por conta própria. Degustação guarda o placar e o histórico só enquanto a página está aberta. Para registrar de verdade, use o evento vote, que traz a rodada, a pergunta, os dois nomes e o voto, e grave na sua API; o método getBoard lê o placar atual. ### As métricas de tokens de Degustação são exatas? São uma estimativa. Degustação conta palavras, números e sinais da resposta para chegar aos tokens e mede o tempo decorrido no navegador, calculando tokens por segundo ao vivo. Serve para comparar ritmo e tamanho entre modelos; para custo, use a contagem que a API de cada modelo devolve. ## Componentes relacionados - [Pingue-pongue](https://vibecode.thmtecnologia.com/componentes/pingue-pongue/): Conversa com a IA em que a resposta chega aos poucos, dá para gerar outra versão, editar a pergunta e avaliar. - [Prosa](https://vibecode.thmtecnologia.com/componentes/prosa/): A resposta do assistente aparece aos poucos, palavra por palavra, saindo de um leve desfoque, como num chat de IA. - [Mote](https://vibecode.thmtecnologia.com/componentes/mote/): Caixa de mensagem de app de IA que cresce com o texto, aceita arquivos, grava áudio e abre comandos ao digitar barra. - [Bastidores](https://vibecode.thmtecnologia.com/componentes/bastidores/): Painel que mostra, passo a passo, o que a IA está pensando, quais ferramentas chamou e quanto tempo cada etapa levou. - [Quebra-cabeça](https://vibecode.thmtecnologia.com/componentes/quebra-cabeca/): Painel que a IA monta sozinha na tela, peça por peça, com métricas, gráficos, listas, formulários e botões. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.