shadcn.io is not affiliated with official shadcn/ui
Message Comparison AI Block for Vue
A blind taste test of two answers: pick one of three prompts, read Answer A and Answer B, vote, then reveal which model wrote each with its tokens and seconds and a running tally of your votes.
Installation
Overview
Find out which answer people actually prefer before they know who wrote it, with this message comparison for Vue with Ark UI. A hairline frame with a plus mark on each corner holds Tabs for three sample prompts: a refund email, a slow query and release notes. Under each prompt two answers sit side by side as Answer A and Answer B with the models hidden, split by a centre divider and stacked on a phone. Three choices take the vote, A is better, Tie or B is better, and the Shine Button, the only colored control, reveals which fictional model wrote each answer with its tokens and seconds, then locks that round's vote. The same button reads Next prompt and, after the third round, Start over. Across the revealed rounds a sentence is derived from your votes, such as "You preferred Orvane 2 in 2 of 3 rounds". Guides rule the bands and everything moves with CSS only. For model evaluation, writing-quality checks and any product that compares outputs.
FAQ
What stays in the page, and how do I make it real?
Everything. The six answers, their token counts and seconds, and which model sits on which side are typed in the file, and the votes live in state until you leave. Nothing is sent and no model runs. To wire it for real, fetch two answers for the prompt from your models, shuffle which one is A, keep that mapping server-side or in state, and post each vote with the round and the mapping when Reveal is pressed.
How is the test kept blind?
The model row under each answer reads "Hidden" until you press Reveal, and the order is fixed so each model sits on a different side across the rounds. Once revealed, that round's vote is locked so it cannot be changed after seeing the names.
How is the tally worked out?
Only revealed rounds count. A vote for A or B counts for the model that wrote that side, a tie counts for nobody, and the sentence names the model with the most wins, or says your votes are split or were all ties. It updates as soon as a round is revealed.
How does it work from the keyboard?
Arrow keys move between the three prompt tabs and between the vote choices, which are real radio buttons in a labelled group. Pressing Reveal without a vote says so in the status line and moves focus to the first choice.